使用ScrollTrigger创建令人惊叹的滚动动画

ScrollTrigger是基于GSAP的滚动事件触发器插件。它可以使用较少的代码创建令人惊叹的滚动动画，或者任何与滚动相关的事件。

特色

• 将任何动画附加到特定的元素上，以便仅在该元素位于视口中时执行动画。
• 在进入/离开定义的区域时对动画进行执行操作（播放、暂停、恢复、重新启动、反转、完成、重置）或将其直接附加到滚动条上。
• 延迟动画和滚动条之间的同步。
• 捕捉动画中的进度值。
• 可以将滚动触发器直接嵌入 GSAP 动画 （包括时间线）或创建 独立实例，并利用丰富的回调系统执行任何你想做的事情。
• 高级固定功能可以将元素锁定在某些滚动位置之间的地方。
• 灵活定义滚动位置。
• 支持垂直或水平滚动。
• 丰富的回调。
• 当窗口调整大小时，自动重新计算位置。
• 启用可视标记，在开发过程中以准确查看开始/结束/触发点的位置。
• 当 ScrollTrigger 处于活动状态时，可使用例如 toggleClass: "active" 将 active 类添加到触发器元素。
• 使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。
• 自定义滚动触发器容器，可以定义一个 div 而不一定是浏览器视口。

提示：ScrollTrigger是GSAP的插件，ScrollTrigger处理滚动事件，GSAP处理动画。要创建滚动动画需要ScrollTrigger和GSAP组合使用。

安装/引入

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>

ES Modules

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

UMD/CommonJS

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

基础示例

gsap.to(".box", {
  scrollTrigger: ".box", // 当".box"进入视口时开始执行动画（一次） 
  x: 500
});

高级示例

let tl = gsap.timeline({
    // 添加到整个时间线 
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // 在执行时固定触发器元素
      start: "top top", // 当触发器的顶部碰到视口的顶部时
      end: "+=500", // 在滚动 500 px后结束
      scrub: 1, // 触发器1秒后跟上滚动条
      snap: {
        snapTo: "labels", // 捕捉时间线中最近的标签
        duration: {min: 0.2, max: 3}, // 捕捉动画应至少为 0.2 秒，但不超过 3 秒（由速度决定） 
        delay: 0.2, // 从上次滚动事件开始等待 0.2 秒，然后再进行捕捉 
        ease: "power1.inOut" // 捕捉动画的过度时间（默认为“power3”） 
      }
    }
  });

// 向时间线添加动画和标签 
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

自定义示例

ScrollTrigger.create({
  trigger: "#id",
  start: "top top",
  endTrigger: "#otherID",
  end: "bottom 50%+=100px",
  onToggle: self => console.log("toggled, isActive:", self.isActive),
  onUpdate: self => {
    console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());
  }
});

演示

地图路线滚动

See the Pen Scroll Map (Sunday Bike Route) by Tom Miller (@creativeocean) on CodePen.

横向穿插滚动

See the Pen GSAP ScrollTrigger – Demo by Noel Delgado (@noeldelgado) on CodePen.

视差滚动

See the Pen Simple parallax sections – ScrollTrigger by GreenSock (@GreenSock) on CodePen.

延迟同步滚动

See the Pen GSAP ScrollTrigger – Pinned Section Animation by Ryan Mulligan (@hexagoncircle) on CodePen.

缩放滚动

See the Pen Scroll to view gallery – ScrollTrigger by GreenSock (@GreenSock) on CodePen.