Ndtyjky

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();

  });

})

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.