用GSAP ScrollTrigger触发动画

Question

我创建了一个带有滚动触发器的CSS3动画，这是我在GSAP ScrollTrigger中需要的，因为AddEventListener('scroll'...与GSAP不兼容，因为它使用了不同的滚动机制。

这是我创建的当前动画：https://jsfiddle.net/nyofa3cb/13/

这就是我在GSAP ScrollTrigger中试图做的，但没有奏效：

gsap.to('.glitch-slide', {
    keyframes: {
        "0%":   { backgroundPosition: '0 0' },
        "10%":  { backgroundPosition: '5px 0' },
        "20%":  { backgroundPosition: '-5px 0' },
        "30%":  { backgroundPosition: '15px 0' },
        "40%":  { backgroundPosition: '-25x 0' },
        "50%":  { backgroundPosition: '-50px 0' },
        "60%":  { backgroundPosition: '0 -20px' },
        "70%":  { backgroundPosition: '-60px -20px' },
        "80%":  { backgroundPosition: '0 0' },
        "90%":  { backgroundPosition: '20px 0'},
        "100%": { backgroundPosition: '0 0'},
         easeEach: 'expo.inOut'
       },
       ease: 'none',
       duration: 1
})

Answer 1

您可以将关键帧添加到css中，并创建包含此动画的类。在此之后，启动此动画只需使用ScrollTrigger将创建的类添加到元素中。

onEnter

onEnter: ({progress, direction, isActive}) => documentQuerySelector('.my-selector').classList.add('active')

或

toggleClass: {targets: ".my-selector", className: "active"}

下面是示例https://greensock.com/docs/v3/Plugins/ScrollTrigger