Greensock (gsap) Hamburger overlay

Question

In my bootstarp website i added greensock (gsap) animation. I have a one hamburger menu. So After click hamburger menu now the overlay opened left to right type, but i need right to left opening type.Itried as my best but i couldn't reach my expectations.so anyone help me to do this.I insert the url i referred in codepen.

https://codepen.io/larpo1/pen/VjzJQN

This is the gsap code i tried in my website

$(document).ready(function(){
  var menuIsOpen=false,
      $menu=$(".menu"),
      $menuItem=$(".menu-item"),
      $menuBg=$(".menu-bg"),
      $menuToggle=$(".menu-toggle"),

      menuWidth=300,
      menuItemOffset=150,
      menuBgSkew=-10,
      timeScale={v:1}
  ;
  TweenMax.globalTimeScale(timeScale.v);

  TweenMax.set($menuItem,{
    x:-menuItemOffset
  });
  TweenMax.set($menuBg,{
    skewX:menuBgSkew
  })
  function setTimescale(v){
    TweenMax.to(timeScale,0.5,{
      v:v,
      ease:Quad.easeInOut,
      onUpdate:updateTimescale,
      onComplete:updateTimescale
    });
  }
  function updateTimescale(){
    TweenMax.globalTimeScale(timeScale.v);
  }

  function openMenu(){
    menuIsOpen=true;
    TweenMax.to($menu,0.55,{
      x:menuWidth,
      force3D:false,
      ease:Elastic.easeOut,
      easeParams:[1.01,0.8]
    });
    TweenMax.to($menuBg,0.55,{
      skewX:0,
      force3D:false,
      ease:Elastic.easeOut,
      easeParams:[1.01,0.8]
    });
    $menuItem.each(function(i){
      TweenMax.to($(this),0.7+(i*0.05),{
        delay:0.02*i,
        x:0,
        force3D:false,
        // ease:Quint.easeOut
        ease:Elastic.easeOut,
        easeParams:[1.1,0.6]
      });
    });

  }
  function closeMenu(){
    menuIsOpen=false;
    TweenMax.to($menu,0.2,{
      x:-100,
      ease:Quad.easeIn,
      force3D:false
    });
    TweenMax.set($menuBg,{
      delay:0.2,
      skewX:menuBgSkew,
      force3D:false
    });
    $menuItem.each(function(i){
      TweenMax.to($(this),0.3+(0.05*i),{
        x:-menuItemOffset,
        ease:Quad.easeIn,
        force3D:false
      });
    });


  }
  function toggleMenu(){
    if(menuIsOpen){
      $menuToggle.removeClass('menu-open');
      closeMenu();
    }else{
      $menuToggle.addClass('menu-open');
      openMenu();
    }
  }
  $menuToggle.click(function(){
    toggleMenu();
  });
})

Answer 1

To do this, you would need to go through the CSS and look for important position properties to modify. In this case, there were several left positions that I changed to right. Also, in the JS code, you would need to modify the parameters of the animation to ensure the menu "moves" in the correct direction. I have modified the code you posted and have a working example here:

https://codepen.io/justinthielman/pen/rQydjY

I did not need to modify the HTML, only the CSS and JS code.