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

推荐答案

你可以把你的关键帧添加到css中,并创建初始化这个动画的类.在此基础上,您只需使用ScrollTrigger将创建的类添加到元素中即可开始此动画.

onEnter

onEnter: ({progress, direction, isActive}) => documentQuerySelect或('.my-select或').classList.add('active')

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

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

Javascript相关问答推荐

使用useup时,React-Redux无法找到Redux上下文值

如何在表格上拥有水平滚动条,在正文页面上拥有垂直滚动条,同时还对html表格的标题使用位置粘性?

useNavigation更改URL,但不呈现或显示组件

通过嵌套模型对象进行Mongoose搜索

类型自定义lazy Promise. all

如何修复(或忽略)HTML模板中的TypeScript错误?'

jQuery s data()[storage object]在vanilla JavaScript中?'

Web Crypto API解密失败,RSA-OAEP

查询参数未在我的Next.js应用路由接口中定义

从Nextjs中的 Select 项收集值,但当单击以处理时,未发生任何情况

expo 联系人:如果联系人的状态被拒绝,则请求访问联系人的权限

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

ngOnChanges仅在第二次调用时才触发

P5JS-绘制不重叠的圆

为什么当雪碧的S在另一个函数中时,Phaser不能加载它?

将字符串解释为数字;将其重新编码为另一个基数

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

webpack 5和mini-css-extract-plugin在将scss保存到css文件后不加载css

为什么我找不到东西?

如何调试从CEPRESS测试文件调用的Java脚本文件