Multiple ScrollTriggers and Vue Router clash

[Y A]

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

[OSUblake]

Have you checked out the scrollerProxy for smooth scrolling.

 

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

 

Not sure if that will fix your issues. I would think you need to wait for the route transition to finish before creating your scroll triggers. mounted is going to fire before the transition is complete. I know with nuxt there is a way to listen for the scrollTop event, but I'm not sure how to do this with just Vue.

 

And you can't use the same id for multiple triggers. A better way to get all the relevant triggers would be like this.

 

mounted() {
  this.revealOnScroll();
  ScrollTrigger.refresh();
},

  beforeDestroy() {
    this.animations.forEach((animation) => {
      animation.scrollTrigger.kill();
      animation.kill();
    });
  },

    methods: {
      revealOnScroll() {
        this.animations = gsap.utils.toArray(".project").map((project) => {
          return gsap.from(project, {
            scrollTrigger: {
              id: "revealer",
              trigger: project,
              start: "top 80%",
              end: "top 35%",
              scrub: 1,
            },
            opacity: 0,
          });
        });
      },
    },

 

[Y A]

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!