时间戳

首页 > 解决方案 > Gsap 滚动触发器混淆

html - Gsap 滚动触发器混淆

问题描述

我有一个 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

任何意见，将不胜感激！

谢谢！

标签： htmljquerycssgsap

解决方案

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

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

修复语法错误后，它会呈现但不会执行您想要的操作。其他一些需要改进的地方：

  • 您正在犯最常见的 ScrollTrigger 错误之一— 包括时间轴内的补间中的 ScrollTrigger。这样做没有多大意义，因为 ScrollTrigger 和时间线都会尝试控制动画。而是将 ScrollTrigger 放在时间线上。
  • 我不知道你为什么reversed: true在你的时间线上。
  • 您应该尽可能避免为宽度、高度、顶部、右侧等非性能属性设置动画。只要有可能，尽量坚持为转换等高性能属性设置动画。
  • 坚持使用像.to()and.from()而不是使用.fromTo(). 它还可以帮助您更有效地制作动画。

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

推荐阅读