GSAP学习(五) - 技术栈

gsap插件是构建复杂动画的重要工具，常用的有scrollTrigger滚动相关，splitText文字处理等。首先介绍scrollTrigger。

使用插件前必须先引入注册，在官网中提供了如何引入各类插件的选项

要引入scrollTrigger，则是

javascript 复制代码

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

scrollTrigger插件的基础作用是当页面滚动到对应元素出现时触发动画，所以基础写法是

php 复制代码

gsap.to('.box', {
    scrollTrigger: '.box', 
    x: 500
});

上面写法就代表当.box元素出现窗口时，动画开始，x轴移动500像素

如果要更复杂，就需要将scrollTrigger写作一个对象。

trigger是可以理解为监听滚动的元素，不一定是最后应用动画的元素。仅是当设置的"该元素出现时"，动画开始。

scrub，动画的播放进度与滚动条位置相关联，营造出滚动到哪里动画就播放到哪里的效果。可以设置scrub为true。也可以设置为数字，这样动画会和滚动之间有对应的延迟时间。

pin，设置某些元素在动画执行期间固定在初始位置，而这时滚动条可以继续滚动。当动画结束时，固定元素也可以随页面滚动了。

start，是用来设置元素滚动到什么位置时可以触发动画。一般会写作"top"，"bottom"，"center"，这样的字符串。例如："top top"，表示元素的顶部和窗口的顶部重合时，动画开始。除了这三个关键字还可以加入百分比和像素值，例如"top 80%"表示元素的顶部在距离窗口顶部80%的位置触发动画，"bottom top+=100px"元素的底部在距离窗口顶部100px处开始动画。如果start只是一个数字，则表示滚动元素滚动多少像素后触发动画。此外还可以是一个返回对应字符串或数字的函数，这个函数的入参是gsap的ScrollTrigger对象。

end，是用来表示当元素滚动到什么位置时动画结束。与start的类型一致。

除上面常用的外，还有horizontal将滚动方向调整为水平，once设置动画为一次性等。还有onEnter，onLeave等回调函数。

更多信息可以查看官方文档

gsap.com/docs/v3/Plu...