ScrollSmoother effects not working after route change in Nuxt.js

[nicolaseielll]

Hello guys!

 

First of all I really appreciate your help here on the GreenSock Forum! It really helps me out!

 

The question:

 

I have a scrollSmoother parallax effect set to few images on the front page but it stops working after I navigate to another page and back. I have tried this.$ScrollSmoother.refresh() but it seems to have no effect on the animation. My site is built on Nuxt.js and my scrollSmoother is located in the layouts of the project.

 

This is my scrollSmoother object and the parallax effect:

 

[OSUblake]

Hi nicolaseielll,

 

It's hard to answer without seeing what you are doing. Can you fork this Codesandbox to show your issue?

 

https://codesandbox.io/s/gsap-scrollsmoother-nuxt-js-starter-2zgxyo?file=/pages/index.vue

 

[nicolaseielll]

I tried but it seems that I don't have enough experience to work with that setup. It is way more complicated than mine and I could not understand what is going on in there. The code that I sent in a screenshot is all I have to set up the scrollSmoother & parallax effect so there's nothing more to show. And I described where the code is located as well. Can you figure out anything based of it? It would be very helpful.

[OSUblake]

Just copy and paste what have you. The only difference in the CodeSandbox is that you import from gsap-trial instead of gsap. Everything else should match up with your local environment. There is no need to use that nuxt gsap module, nor do we officially support using it.

 

import { gsap } from "gsap-trial";
import { ScrollTrigger } from "gsap-trial/ScrollTrigger";
import { ScrollSmoother } from "gsap-trial/ScrollSmoother";

mounted() {
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
  
  ScrollSmoother.create({
    ...
  })
}

 

[nicolaseielll]

Ok I got somthing now: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-js-starter-forked-3pst93?file=/pages/index.vue

 

So theres the green box which has this parallax effect and if you navigate to Test page and back, it stops working. (btw sorry for my english).

[OSUblake]

I'll post back later with a component for ScrollSmoother that might make this easier for you.

 

One thing to keep in mind for effects is they are ScrollTrigger instances, so you should kill them when navigating to a new page. And to get ScrollSmoother to parse data attributes, you can run this on after navigating to a new page. That will search the DOM for any elements that have a data-speed or data-lag attribute, and create an effect.

 

smoother.effects("[data-speed], [data-lag]", {});

 

[nicolaseielll]

Is there a way I could run this inside the page component because I have my scrollSmoother in the nuxt default layout so I don't have to define the smoother on every page? I tried to put that inside watch: {"route"() {}} so it would run every time a route changes inside the layout but it did not help. So is it necessary to put it in the page component for it to work?

[OSUblake]

You can create it however you want. The demo I posted above has the ScrollSmoother in the layout page, but I'm updating in the index page, because that's where the elements are. You have to keep in mind how Vue/Nuxt works. Children are mounted before the parent, so that's why I put the observer in there to wait for the parent to mounted.

 

 

[nicolaseielll]

I forked the project once again and added a second page to it and tried the same thing there but the animations did't work there either after navigating back to the home page even tho it has the observer.

 

https://codesandbox.io/s/gsap-scrollsmoother-nuxt-js-starter-forked-x09mh8?file=/pages/test.vue

[OSUblake]

Have you used ScrollTrigger before? You would need kill your triggers inside beforeDestroy. 

 

beforeDestroy() {
  ScrollTrigger.getAll().forEach(t => t.kill())
}

 

And I said I would make a component later. Please be patient.

 

[GreenSock]

Not sure if it's related to what you're asking, but there was a regression in 3.10.3 that could cause effects to not get triggered at the right positions if you scroll down and then resize the window. You can download an updated zip from greensock.com right now and it will have that fix in place. We'll release the official one within the next few days most likely. 

[OSUblake]

Please check out  this thread...

 

 

[nicolaseielll]

I really appreciate your time you put into this, thank you for that! It works now.