Greensock (gsap) 汉堡覆盖

Question

在我的 bootstarp 网站中，我添加了 greensock (gsap) 动画。我有一个汉堡菜单。因此，在单击汉堡菜单后，叠加层现在从左到右类型打开，但我需要从右到左打开 type.Itried 尽我所能，但我无法达到我的 expectations.so 任何人都可以帮助我做 this.I 插入我在 codepen 中提到的 url。

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

这是我在我的网站上试过的 gsap 代码

$(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

为此，您需要浏览 CSS 并查找要修改的重要仓位属性。在这种情况下，有几个left个位置我改成了right。另外，在JS代码中，您需要修改动画的参数以确保菜单"moves"的方向正确。我修改了您发布的代码并在此处提供了一个工作示例：

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

我不需要修改HTML，只需要修改CSS和JS代码。

Greensock (gsap) 汉堡覆盖

Greensock (gsap) Hamburger overlay

javascript

css

gsap