Gsap 滚动触发器混淆

Question

我有一个 div 和一些像这样的 scss：

<div class="box"> 
   <h1 id="#h1-1">Title</h1>
    <img id="arrowimg"src="img/arrowdown.png"/>
    <div class="innerbox">
      <nav>
        <ul>
          <li><a href="#A">A</a></li>
          <li><a href="#B">B</a></li>
          <li><a href="#C">C</a></li>
        </ul>
      </nav>
      <p> A paragraph within the div</p>
   
      <p>Another paragraph within the div</p>
   
      <p>Yet another paragraph within the div</p>

      <div id="B">

        <p>Blah blah blah</p>
      </div>

      <div id="C">

        <p>Blah blah blah</p>
      </div>
    </div>
   
  </div>

SCSS：

.box {
  position: absolute;
  display:flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
  background-color: rgb(146, 134, 219);
  overflow:hidden;
}


img {
  position:absolute;
  height: 20px;
  width: 20px;
  top: 760px;
  left: 500px;
}

.active {
  position:absolute;
  background: yellow;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.innerbox {
  display:none;
}

我这里有一些 Gsap 代码控制扩展和收缩框 div：

 gsap.plugin(ScrollTrigger);

var box = document.querySelector(".box");
var tl = gsap
  .timeline({ reversed: true }),
  .fromTo(
    ".box",
    { top: 700, left: 400, height: 50, width: 200 },
    {
      scrollTrigger: {
        trigger: "#arrowimg",
        start: "top bottom",
        markers: true},
      ease: "power3.in",
      height: "100%",
      width: "100%",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      duration: 0.45
    }
  );

显然，我对 Gsap 很陌生。

在我拥有它之前，如果您单击 div，它会扩展和收缩。但它将每次点击注册为一个框点击——即使在导航栏中，所以我决定我应该使用滚动。如果我不能让滚动工作，也许一个按钮会比点击框更好？

这是笔：https://codepen.io/Hamlington/pen/yLVvoQX

任何建议将不胜感激！

谢谢！

Answer 1

您的 CodePen 存在一些 JS 语法错误。您可以通过打开开发人员工具 (F12) 并一一修复它们来查看它们。如何修复它们：

• 这是gsap.registerPlugin()，而不是.plugin()。
• 在时间线和补间之间有一个额外的,。删除它。
• gsap 未定义。确保加载它（在 CodePen 上，您可以通过单击 GSAP 旁边的齿轮图标然后在搜索字段中输入“GSAP”来加载）。
• ScrollTrigger 未定义。确保也加载它（同样的，但搜索“ScrollTrigger”）。

一旦你修复了语法错误，它就会呈现但不会做你想做的事。其他一些需要改进的地方：

• 您正在制作the most common ScrollTrigger mistakes 之一——在时间轴内的补间中包含一个ScrollTrigger。这样做没有多大意义，因为 ScrollTrigger 和时间线都会尝试控制动画。而是将 ScrollTrigger 放在时间轴上。
• 我不知道为什么你的时间线上有reversed: true。
• 您应尽可能避免为宽度、高度、顶部、右侧等非性能属性设置动画。尽量坚持为转换等高性能属性设置动画。
• 最好坚持使用.to() 和.from() 等相对补间而不是使用.fromTo()。它还可以帮助您为more efficiently 制作动画。

完成所有这些更改后，您应该会收到this demo。现在，无论这是否是你想要的效果，我不能说。