ScrollTrigger 简介

GSAP ScrollTrigger 是目前最强大的滚动动画库之一。它允许你将任何 GSAP 动画与滚动位置关联起来。

基础用法

最简单的 ScrollTrigger 用法：

gsap.to(".element", {
  scrollTrigger: {
    trigger: ".element",
    start: "top center",
    end: "bottom center",
    scrub: true,
  },
  x: 500,
  opacity: 1,
});

Pin 效果

Pin 效果可以让元素在滚动过程中固定在视口中：

gsap.to(".panel", {
  scrollTrigger: {
    trigger: ".panel",
    start: "top top",
    pin: true,
    end: "+=500",
    scrub: 1,
  },
});

批量动画

使用 batch 方法可以轻松创建交错动画：

ScrollTrigger.batch(".card", {
  onEnter: (elements) => {
    gsap.from(elements, {
      opacity: 0,
      y: 40,
      stagger: 0.1,
    });
  },
});

性能优化

1. 使用 scrub 而不是独立动画
2. 限制 pin 元素数量（最多 2 个）
3. 离屏元素自动暂停
4. 使用 will-change 提示浏览器

总结

ScrollTrigger 是创建电影级网页体验的核心工具。掌握它的各种模式，可以让你创建出令人印象深刻的滚动叙事效果。