Jump to content
Search Community

Update for gsap.scrollTrigger within Vuejs directive is not triggered

gregor test
Moderator Tag

Recommended Posts

I'm using locomotive for smooth-scrolling and gsap for animations. Now I wanted to create a directive to animate some typo.

My application contains this code to create the smooth-scroller and combine it with gsap (copied from 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}
  },
})

this.$ScrollTrigger.addEventListener('refresh', () => scroller.update())

this code works fine

 

now I want to create a directive to easily reuse some types of animations.

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)

The directive gets executed once at load, but never fires the onUpdate or onEnter function on scroll

 

Is the prop „scroller: .js_smoothscroller“ enough that it knows where to listen for updates?

 

If I resize the window the onUpdate function gets fired.

 

What I'm missing?

See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

ScrollTrigger seems to be working fine, but your trigger has a small height, change it to something bigger and you will see it update.

https://codesandbox.io/s/gsap-scrolltrigger-forked-j6967?file=/directives/char-animation.js

 

Your directive gets created before your locomotive-scroll gets created, which messes stuff up. Notice in this demo how it doesn't work if locomotive scroll is created later.

 

Locomotive Scroll with ScrollTrigger scrubbing and pinning (codepen.io)

 

You'll need to find a way to create locomotive scroll first. Maybe try reaching out to locomotive support as it isn't a GSAP product so really can't say how to fix that.

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...