ScrollTrigger-官网
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
引用CDN或者下载js文件地址在上方 以下是demo 参数说明:
ScrollTrigger.create({
trigger: '目标元素需要添加效果的盒子',
start: 'top top', //触发效果的位置
end: '+=800', '触发动画结束的位置'
pin:'开启固定定位',
//若是不清楚触发位置markers开启后可以标注
//这个颜色可以自定义markers: {startColor: "green", endColor: "red", fontSize: "12px"},
markers:true,
animation:gsap.timeline().fromTo('需要处理的动画')//多个就.fromTo()多个
})