ScrollTrigger的使用

特别提示：Most Common GSAP Mistakes

// Not recommended
x: "50%",
y: "50%",

// Recommended
xPercent: 50,
yPercent: 50

// The right method
x: 100,
y: 300,
xPercent: 50,
yPercent: 50

简单使用，相当于页面加载完即开始动画

gsap.to(".target", {
  x: 400,
  rotation: 360,
  duration: 3
});

toggleActions: 当 scroll 滚动的几种场景触发条件

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".target",
    // toggleActions: "onEnter onLeave onEnterBack onLeaveBack"
    toggleActions: "restart pause reverse pause" // play,pause,resume,reverse,restart,reset,complete,none
  },
  x: 400,
  rotation: 360,
  duration: 3
});

start: 何时开始/结束动画

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".target",
    // String: top, bottom, ((left, right) && (horizontal: true)), center, 80%, 100px, bottom-=100px => 距离底部100px
    // Number: 200 => 一个精确的滚动值，所以当viewport/scroller滚动正好200像素时，200将触发
    // Function: () => "+=" + document.querySelector(".target").offsetWidth
    start: "top center",
    end: "+=100",
    toggleActions: "restart pause reverse pause"
  },
  x: 400,
  rotation: 360,
  duration: 3
});

markers: 标记触发点

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".target",
    start: "top center",
    markers: true, // or {startColor: "white", endColor: "white", fontSize: "18px", fontWeight: "bold", indent: 20}
    toggleActions: "restart pause reverse pause"
  },
  x: 400,
  rotation: 360,
  duration: 3
});

trigger/endTrigger: 根据元素来触发/结束动画

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".a",
    start: "top center",
    endTrigger: ".c",
    end: "bottom 80%",
    markers: true,
    toggleActions: "restart pause reverse pause"
  },
  x: 400,
  rotation: 360,
  duration: 3
});

scrub: 让动画播放赶上滚动条，即根据进度条来控制动画进度

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".target",
    start: "top center",
    end: "top 100px",
    scrub: true, // 0.5, 以秒计算
    markers: true
  },
  x: 400,
  rotation: 360,
  duration: 3
});

结合 timeline 完成动效

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".target",
    start: "top center",
    end: "top 100px",
    scrub: 1,
    markers: true
  }
});
tl.to(".target", {
  x: 400,
  rotation: 360,
  ease: "none",
  duration: 3
})
.to(".target", {
    backgroundColor: "purple",
    duration: 1
})
.to(".target", {
  x: 0,
  duration: 2
});

pin: Boolean | String | Element，钉住元素的位置，类似 position: sticky

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".target",
    start: "top center",
    end: "top 100px",
    scrub: true,
    pin: ".target_ghost",
    markers: true
  },
  x: 400,
  rotation: 360,
  duration: 3
});

使用 pin 完成动效

gsap.defaults({ease: "none", duration: 2});

const tl = gsap.timeline();
tl.from(".a", {xPercent: -100})
  .from(".b", {xPercent: 100})
  .from(".c", {yPercent: -100});

ScrollTrigger.create({
  animation: tl,
  trigger: "#container",
  start: "top top",
  end: "+=4000",
  scrub: true,
  pin: true,
  anticipatePin: 1, // 通常最合适，可以减少或增加该数字以控制钉扎的时间
});

pinSpacing: 解决使用 pin 时出现的填充(padding)问题

ScrollTrigger.create({
  trigger: ".target",
  start: "top top",
  end: "+=300px",
  // 默认情况下，填充将添加到底部(或在水平右边 && horizontal: true)以将其他元素下推，以便在固定元素被取消固定时，以下内容可以完美地捕捉到。 否则，事物可能会在固定元素下滚动
  pinSpacing: false, // "margin", 使用 margin 代替 padding
  pin: true
});

对 Array[Element] 使用 pin

gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top",
    pin: true,
    pinSpacing: false
  });
});

snap: Number | Array | Function | Object | "labels" ,允许您在用户停止滚动后捕获某些进度值(在0到1之间)。所以snap: 0.1会以0.1为增量进行snap(10%， 20%， 30%，等等)。snap:[0, 0.1, 0.5, 0.8, 1]只会让它停留在其中一个特定的进度值上.
Number: 0.1 || 1 / (sections - 1);
Array: [0, 0.1, 0.5, 0.8, 1];
Function: (value) => Math.round(value / 0.2) * 0.2;
"labels": “标签”与时间线中最接近的标签对齐(动画必须是带有标签的时间线);
Object: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}; // snapTo 是必须的

// css
body { overflow-x: hidden; }
// js
let sections = gsap.utils.toArray(".panel");

gsap.to(sections, {
  xPercent: -100 * (sections.length -1),
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".container").offsetWidth
  }
});

Callbacks and Custon Options
toggleClass: String | Object，当ScrollTrigger切换活动/不活动时，将一个类添加/删除到一个(或多个)元素

// 全局配置
ScrollTrigger.defaults({
  toggleActions: "restart pause resume none",
  markers: true
});

ScrollTrigger.create({
  trigger: ".target",
  start: "top center",
  end: "top 100px",
  onEnter: () => console.log("enter"), // 滚动到进入
  onLeave: () => console.log("leave"), // 滚动到退出
  onEnterBack: () => console.log("enter back"), // 滚动到进入位置
  onLeaveBack: () => console.log("leave back"), // 滚动到退出位置
  onUpdate: (self) => console.log("update", self.progress.toFixed(3)), // 开始-结束之间滚动
  onToggle: (self) => console.log("toggle", self.isActive), // 从开始开结束为 true
  toggleClass: "active", // 当在 onToggle 中 self.isActive === true 时，为指定元素添加 class="active"
  id: "my-id", // 为元素添加id
  scroller: "#container", // 根据指定元素的滚动值来计算
  horizontal: true, // 水平滚动
  markers: true
});

如果在 ScrollTrigger.create 中添加了 id，则可以通过一下获取
let trigger = ScrollTrigger.getById("my-id");