gsap-scrollTrigger

本期给大家简单介绍一下ScrollTrigger

要使用ScrollTrigger, 首先你需要引入ScrollTrigger plugin, 使用他非常简单

import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

紧接着就是如何使用了，也非常简单，直接上代码

gasp.to('你的dom元素',{
    ...gsap的to的属性,
    scrollTrigger:{
        ...scrollTriggerPlugin的属性
    }
})

来一个示例，比如说

gasp.to('#target',{
    x:400,
    rotation:360,
    duration:3,
    scrollTrigger:{
        trigger:'#targetWrapper',
        markers:true
    }
})

通过markers，我们可以显示出target的start和end标志线，以及容器的scroll的start和end标志线，
我们可以通过start和end参数，来调整这几个标志，以达到我们需要的开始和结束效果

同时在scrollTriggerPlugin的属性中，还有更多的，比如scrub, ping, snap等，当然他也有一些callback方法