GSAP插件介绍

ScrollTrigger

一个可以将元素动画效果与浏览器滚动条关联起来的插件

1. 引入依赖

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

2. 使用

gsap.registerPlugin(ScrollTrigger) // 注册插件
gsap.to('.box', {
    scrollTrigger: {
        trigger: '.box', // 在哪些元素上触发动画
        scrub: true, // 将指定元素与滚动条进行关联
        pin: true, // 固定元素
        start: "center center" // 元素播放动画时在可视窗口的位置
    },
    x: 500,
    ease: "none"
});