当页面滚动到某些位置以及视口中有某些元素时，此新插件的作用是触发动画。

介绍
https://greensock.com/scrolltrigger/

安装

  1. import gsap from 'gsap/dist/gsap';
  2. import ScrollTrigger from 'gsap/ScrollTrigger' // 内置
  3. gsap.registerPlugin(ScrollTrigger);
  4. Vue.prototype.gsap = gsap;

例子

  1. gsap.to(".box", {
  2.   scrollTrigger: ".box", // 当“.box”进入视口时启动动画（一次）
  3.   x: 500
  4. });

属性

  • trigger
  • start 当触发器的顶部碰到视口的顶部时

两个参数
第一个scrollTrigger的容器的
第二个是屏幕的

  • end
  • pin （true|false）

固定

  • pinSpacing

  • snap

    事件

  • onEnter

  • onEnterBack
  • onLeave
  • onLeaveBack
  • onToggle
  • onUpdate
  • onScrubComplete
  • onRefresh

启用视觉标记

以准确查看起点/终点/触发点的位置。自定义选项比比皆是

  1. markers: {startColor: "green", endColor: "red", fontSize: "12px"}

切换CSS类

例如，toggleClass: "active"在ScrollTrigger处于活动状态时，将“ active”类添加到触发元素。您也可以影响其他元素

参考

https://css-tricks.com/greensock-scrolltrigger/

官方文档
https://greensock.com/docs/v3/Plugins/ScrollTrigger