react框架下GSAP动画插件-ScrollTrigger的使用介绍

ScrollTrigger插件这个插件是基于GSAP使用的,ScrollTrigger仅仅是用来控制触发动画，而GSAP才是用来操作元素。

react框架使用ScrollTrigge,首先是引入ScrollTrigger

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

 ScrollTrigge相比于单纯的GSAP的使用,最大的好处在于可以控制动画的出现位置,可以让某个元素移动到页面的某个部分时才触发动画。

例:

// 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: Boolean | String | Element, //在元素活动时钉住元素的位置，效果类似于 position: sticky
 start: "top top", //起始点:当触发器顶部到达视口的顶部
 end: "+=500", //结束点:从起始点滚动 500px 后
 scrub: 1,//页面滚动时元素需要 1 秒才能“赶上”滚动条
 markers,//将滚动的触发点在页面中标记出来
endTrigger,//根据元素结束动画
 snap: { snapTo: "labels", 
//捕捉到时间线中最近的标签
 duration: {min: 0.2, max: 3}, //
捕捉动画时间最小值 0.2 秒最大值 3秒 (由速度决定)
 delay: 0.2, //在执行捕捉之前等待最后一个滚动事件 0.2 秒
 ease: "power1.inOut" // 动画的运动曲线是"power3"
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]只会让它停留在其中一个特定的进度值上.

还可以给滚动动画添加时间轴,构造连续的动画效果

例:

let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".container",
      pin: true,  
      start: "top top",
      end: "+=500", 
      scrub: 1, /
      snap: {
        snapTo: "labels", 
        duration: {min: 0.2, max: 3},
        delay: 0.2,g
        ease: "power1.inOut" 
      }
    }
  });
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");

我们可以不需要将 ScrollTriggers 直接放入动画中,而可以将回调用于任何事情

例:

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());
  }
});