Trigger animation with GSAP ScrollTrigger

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
})

score 1 · Accepted Answer · answered Aug 13 '22 at 07:06

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

Trigger animation with GSAP ScrollTrigger

1 Answers1