使用 GSAP ScrollTrigger 触发 animation

Question

I've created a CSS3 Animation with a scroll trigger that I'd need in GSAP ScrollTrigger since AddEventListener('scroll'... is not compatible with GSAP because it uses some different mechanisms for scrolling.

This is the current animation that I've created: https://jsfiddle.net/nyofa3cb/13/

This is what I've tried to do in GSAP ScrollTrigger, but hasn't worked:

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

You can add your keyframes to css and create class that init this animation. With that all you need to start this animation is to add created class to element using ScrollTrigger.

onEnter

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

or

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

Here are examples https://greensock.com/docs/v3/Plugins/ScrollTrigger