Dfyjkt

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.