gsap ScrollTrigger 实现整屏滚动效果 滚动动画

          import { gsap } from 'gsap/dist/gsap'
        import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
        
        
        
      gsap.registerPlugin(ScrollTrigger)
          gsap.timeline({
    // 添加到整个时间线
    scrollTrigger: {
      trigger: '.class',
      pin: true, // 在执行时固定触发器元素
      start: 'top top', // 当触发器的顶部碰到视口的顶部时
      end: '+=500', // 在滚动 500 px后结束
      scrub: true, // 触发器1秒后跟上滚动条
      markers: true,  // 指示器
      onEnter: e => {
        console.log('enter')
      }, // 滚动到进入
      onLeave: e => {
        // console.log("leave ")
      }, // 滚动到退出
      onEnterBack: () => {
        // console.log('enter back')
      }, // 滚动到进入位置
      onLeaveBack: () => console.log('leave back'), // 滚动到退出位置
      onUpdate: self => {
        console.log('progress:', self.progress.toFixed(3), 'direction:', self.direction, 
        }
      },
    },
  })
},

 ScrollTrigger.revert()    // 重置为初始状态也就是 没有被接管的状态呀
 
 
 

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