[Multiple ScrollTriggers and Vue Router clash]

Thanks a lot for your reply. It turns out you're right about the ScrollTrigger loading before the transition is complete. I tried setTimeout in the mounted hook, just to make sure it loads after the transition. this fixes the problem when coming back to the page with the trigger from a page without.

 

The other issue is: if I kill the Triggers on the transition from the page with trigger to a page without, the scroll position is affected and the page rolls down to the saved position, however, if I don't kill the trigger and just refresh on the way back, this behaviour doesn't occur and the scrollTop stays at 0 and everything works fine. I don't understand why.

 

I didn't know about scrollerProxy before, I will check it out and report back.

 

Thanks again!

[Multiple ScrollTriggers and Vue Router clash]

Hi, I ran into a few problems while using scrollTrigger with vuejs and vue-router and can't figure it out, I hope to get some help here.

 

I made a small reproduction of the problem here https://codesandbox.io/s/vigilant-gould-do4go?file=/src/App.vue

 

I created a scrollTrigger for momentum scrolling based on Blake's pen here and it's all working perfectly. When clicking on router-link it transitions to another page with the scroll position back to the top of the page.

fyi - I'm using the following code to ensue the scroll position returns to the top after every route navigation

 

scrollBehavior (to, from, savedPosition) {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

    	resolve({ x: 0, y: 0 })

    }, 5)

  })

},

 

The problem starts when I add another scrollTrigger that does something else on the page. in this case, navigating to another route scrolls down the page to a saved position and when going back to the page with the second scrollTrigger, the start and end positions for the scrollTrigger are all wrong.

I tried killing and disabling the scrollTrigger on beforeDestroyed() hook using ScrollTrigger.getById("id").kill() but that didn't work.

 

Any help would be appreciated. 

 

Thanks!

See the Pen 89f1e24fbc30e59edbc186a4c961f35c?editors=0010 by osublake (@osublake) on CodePen