scrolltrigger作用
建议大家学习前可以先看下官方提供的视频介绍，会受益匪浅的~
scrolltrigger 通过监听滚动条的运动进而做出的一些执行动画或操作。
如何引入
- CDN引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
- NPM引入
npm install gsap //or 通过 yarn add gsap
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger.js";
gsap.registerPlugin(ScrollTrigger);
- Download下载引入，或者直接下载 gsap.min.js， ScrollTrigger.min.js；
在线代码
gsap参数介绍
持续更新~
| 字段 | 类型 | 说明 |
|---|---|---|
| start | String,Number,Function | 确定ScrollTrigger的起始位置。"top center" trigger顶部位置 scroller-star窗口顶部50%位置，"bottom 100px" |
| end | String,Number,Function | 确定ScrollTrigger的结束位置。"bottom center"， "center 100px" trigger底部位置 scroller-end窗口顶部100px位置 |
| toggleActions | String | 确定如何控制链接动画在4个不同的切换位置- onEnter, onLeave, onEnterBack, onLeaveBack，按此顺序。默认是play none none none。所以toggleActions: "play pause resume reset"将在进入时播放动画，在离开时暂停动画，在再次向后输入时恢复动画，在一直滚动到开始之前时重置(倒回到开始)。您可以为每个动作使用以下任何关键字:"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none" |
| autoAlpha | Number | 与不透明度相同的是，当值为0时，能见度属性将被设置为隐藏，以提高浏览器呈现性能和防止点击/交互目标。当值不是0时，可见性将被设置为继承。它没有被设置为可见是为了继承(想象父元素被隐藏了—显式地将子元素设置为可见将导致它在可能不是预期的情况下出现)。为了方便起见，如果元素的可见性最初设置为隐藏且不透明度为1，它将假定不透明度也应该从0开始。这使得在页面上以不可见的方式开始(设置CSS可视性:hidden)，然后在你想要的时候淡入它们变得很简单 |
| markers | Object,Boolean | 添加在开发/故障排除期间有帮助的标记。true使用默认值(startColor: "green"， endColor: "red"， fontSize: "16px"， fontWeigth: "normal"， indent: 0)添加它们，但你可以使用像marker这样的对象自定义它们:{startColor: "white"， endColor: "white"， fontSize: "18px"， fontWeight: "bold"， indent: 20} |
| scrub | Boolean,Number | 将动画的进度直接链接到滚动条，这样它就像一个洗涤器。你可以应用平滑，这样播放头需要一点时间来赶上滚动条的位置! true 时将动画的进度直接链接到ScrollTrigger的进度。0.5 时播放头“追赶”所需的时间(以秒为单位)，所以scrub: 0.5会导致动画的播放头花0.5秒来追赶滚动条的位置 |
| pin | Boolean,Element | 钉住目标至窗口运动轨迹位置 参考案例 |
| snap | Number,Array,Function,Object | 允许您在用户停止滚动后捕捉到某些进度值(介于0和1之间)。所以snap: 0.1会以0.1的增量(10%、20%、30%等)进行snap。Snap:[0, 0.1, 0.5, 0.8, 1]将只让它停留在这些特定的进度值之一上。 |
| direction | Number | 滚动方向 反映实时滚动的方向，其中1是向前，-1是向后 |
| overwrite | Boolean | 如果为真，那么所有相同目标的补间将立即被杀死，而不管它们影响的是什么属性。如果为“auto”，当补间第一次呈现时，它会查找活动动画中的任何冲突(动画相同目标的相同属性)，并只杀死其他补间的那些部分。非冲突部分保持完整。如果为false，则不使用覆盖策略。默认值:false。 |
| onUpdate | Function | 每当ScrollTrigger的进度发生变化(即滚动位置发生变化)时调用的回调。如果你应用了数值擦洗，请记住，相关的动画将在滚动位置停止后继续擦洗一段时间，所以如果你的目标是每当动画更新时更新某些内容，最好是应用onUpdate到动画本身，而不是ScrollTrigger。demo |
| reversed | Boolean | 如果为真，动画开始时播放头将颠倒，这意味着它将面向移动到它的开始。因为播放头从0开始，反向补间最初会显示暂停，因为它的播放头不能向后移动超过开始。 |
| .quickSetter() | Function | gsap.quickSetter("#id","x","px") 应用到#id元素的x属性上，并添加一个"px"单位,更加提升性能 |
| .to() | Function | gsap.to(".box", {rotation: 27, x: 100, duration: 1}) |
| .getVelocity() | Function | 返回:Number 速度单位为像素/秒 |
| .timeline() | Function | Timeline是一种功能强大的排序工具，它充当了过渡段和其他时间线的容器，使得控制它们作为一个整体和精确管理它们的时间变得简单。如果没有时间线，构建复杂的序列将更加麻烦，因为你需要为每个动画使用延迟 |
gsap.utils参数说明
| 方法 | 说明 |
|---|---|
| toArray() | 将几乎所有类数组对象转换为数组，包括选择器文本!(例如:toArray(".class")——>[element1, element2])。 |
| clamp() | 固定一个值以适合特定的范围(例如:固定(0,100,-12) --- 0)。clamp(minimum:数字—最小值,maximum:数值—最大值,valueToClamp: Number—应该夹在前两个值之间的值。) |
