0

我使用机车进行平滑滚动，使用 gsap 进行动画。现在我想创建一个指令来动画一些错字。

我的应用程序包含此代码来创建平滑滚动并将其与 gsap 结合（从https://codepen.io/GreenSock/pen/zYrELYe复制）

    const scroller = new this.$locomotiveScroll({
      el: document.querySelector('.js_smoothscroller'),
      smooth: true
    });   

    scroller.on('scroll', () => {
      this.$ScrollTrigger.update()
    })

    this.$ScrollTrigger.scrollerProxy('.js_smoothscroller', {
        scrollTop(value) {
          return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y
        },
        getBoundingClientRect() {
          return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight
          }
        },
        
      }
    )

此代码工作正常

现在我想创建一些指令来轻松重用某些类型的动画。


function animateLetters() {
  console.log('inviewport')
}
const init = {
  bind: (el, binding, vnode) => {

    ...
   
    vnode.context.$ScrollTrigger.create({
      trigger: '.heading',
      scroller: ".js_smoothscroller",
      onEnter: () => { console.log('inviewport') }
      onUpdate: () => { console.log('doesn't get updated')},
      start: "top bottom",
      end: "top top"
    })
  }
}

Vue.directive('char-animation', init)

该指令在加载时执行一次，但不会触发 onUpdate 或 onEnter 函数。

如果我调整窗口大小，onUpdate 函数会被触发，但不会在滚动时触发。

更新 addet 一个小演示 https://codesandbox.io/s/gsap-scrolltrigger-ihfbg?file=/directives/char-animation.js

我错过了什么？

4

0 回答 0