Creé una animación CSS3 con un disparador de desplazamiento que necesitaría en GSAP ScrollTrigger ya que AddEventListener('scroll'... no es compatible con GSAP porque usa algunos mecanismos diferentes para desplazarse.
Esta es la animación actual que he creado: https://jsfiddle.net/nyofa3cb/13/
Esto es lo que he intentado hacer en GSAP ScrollTrigger, pero no ha funcionado:
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 })Puede agregar sus fotogramas clave a css y crear una clase que inicie esta animación. Con eso, todo lo que necesita para comenzar esta animación es agregar la clase creada al elemento usando ScrollTrigger.
en Entrar
onEnter: ({progress, direction, isActive}) => documentQuerySelector('.my-selector').classList.add('active')o
toggleClass: {targets: ".my-selector", className: "active"}Aquí hay ejemplos https://greensock.com/docs/v3/Plugins/ScrollTrigger