我已经创建了一个带有滚动触发器的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
})