GSAP<scrollTrigger+timeline模块拆合>

451 阅读1分钟

知识点:

参考更多文档内容

字段说明
.timeline()Timeline是一种功能强大的排序工具,它充当了过渡段和其他时间线的容器,使得控制它们作为一个整体和精确管理它们的时间变得简单。如果没有时间线,构建复杂的序列将更加麻烦,因为你需要为每个动画使用延迟
end确定ScrollTrigger的结束位置。"bottom center", "center 100px" trigger底部位置 scroller-end窗口顶部100px位置
scrub将动画的进度直接链接到滚动条,这样它就像一个洗涤器。你可以应用平滑,这样播放头需要一点时间来赶上滚动条的位置! true将动画的进度直接链接到ScrollTrigger的进度0.5 时播放头“追赶”所需的时间(以秒为单位),所以scrub: 0.5会导致动画的播放头花0.5秒来追赶滚动条的位置
markers添加在开发/故障排除期间有帮助的标记。true使用默认值(startColor: "green", endColor: "red", fontSize: "16px", fontWeigth: "normal", indent: 0)添加它们,但你可以使用像marker这样的对象自定义它们:{startColor: "white", endColor: "white", fontSize: "18px", fontWeight: "bold", indent: 20}
pin钉住目标至窗口运动轨迹位置 参考案例