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
})
You can add your keyframes to css and create a class that starts this animation. With that, all you need to start this animation is to add the created class to the element using ScrollTrigger.
in Enter
onEnter: ({progress, direction, isActive}) => documentQuerySelector('.my-selector').classList.add('active')either
toggleClass: {targets: ".my-selector", className: "active"}Here are examples https://greensock.com/docs/v3/Plugins/ScrollTrigger