ScrollSmoother does not work in dynamic frameworks like Nuxt/Vue.js

[thei]

I've used ScrollSmoother in a few previous projects and liked it.

 

Unfortunately I've just built a Nuxt 2 (Vue.js 2) site using ScrollSmoother without looking into it enough, and now I've found that ScrollSmoother  is not compatible with frameworks that use shadow-DOMs and dynamically manipulate the DOM (such as Vue/react/etc) to animate page routing, rather than using the more traditional "load a new page" approach.

 

It seems that when the framework updates the DOM, ScrollSmoother doesn't know, and it all goes horribly wrong from there.

 

I've seen some posts here about absurdly complex hacks that supposedly make it work (for example, see below) but so far the "solutions" I've seen are unworkable and ridiculous - so my question is: is there a reliable, workable way to use ScrollSmoother in a Nuxt2-based project? Or have I screwed up and I'll need to rework all my GSAP-based code to use some alternative?

 

Thanks
 

[elegantseagulls]

We used it in our Next.JS site (elegantseagulls.com). All you need to do is proper garbage cleanup for ScrollTrigger/Animations, and refresh ScrollTrigger on route change (like you have to do anyway to get ScrollTrigger animations to work). I certainly don't see this as "absurdly complex hacks"—just the nature of working with complex frameworks like Vue or React.

This is a Nuxt2 example, is there something about this approach you have questions about? https://codesandbox.io/s/pbhmeh?file=/components/GSAPScrollSmoother.vue

[thei]

1 hour ago, elegantseagulls said:

We used it in our Next.JS site (elegantseagulls.com). All you need to do is proper garbage cleanup for ScrollTrigger/Animations, and refresh ScrollTrigger on route change (like you have to do anyway to get ScrollTrigger animations to work). I certainly don't see this as "absurdly complex hacks"—just the nature of working with complex frameworks like Vue or React.

This is a Nuxt2 example, is there something about this approach you have questions about? https://codesandbox.io/s/pbhmeh?file=/components/GSAPScrollSmoother.vue

Have you actually looked at that example? It's probably simpler to actually write a scroll-smoothing function from scratch, than it is to use that "workaround" 😂. It's also seems to me to be an overly complex way of achieving what can be done by simply doing this, or am I misunderstanding something?

mounted() {
   this.$nextTick(function() {
      // do animations
   })
},
beforeDestroy() {
   // kill animations
},

One of the main reasons (in my opinion, the only good reason) to use a framework like Vue.js, is to take advantage of its virtual-dom manipulation, which works from basic components right down to the "page" level. This allows for seamless animations and transitions between things which aren't possible using a traditional DOM. However, if you have to kill your animation framework and recreate it between each virtual-dom to real-dom manipulation, then you've just lost the main reason you'd use a framework like Vue.js in the first place?

 

Either way, the "workaround" above is very far from "simple".

So I'll repeat/rephrase my original question:
 

Is there a reliable, workable and simple way to use ScrollSmoother in a Nuxt2-based project (ideally without utilising workarounds, like that quoted above, that defeat the purpose of using Vue.js in the first place, but either way... simple is the keyword here)?

 

Note that this is different to individual component animations, which obviously can't be run until the components that need to be animated actually exist - but the page scrolling exists across route changes, and needs to work as such to be usable for route-change-based transitions and what not (which as I've said above, seems to me to be the main reason one would use a framework like Vue.js in the first place, at least from an animation perspective)

 

Anyway, thanks for the example, until (or if) ScrollSmoother works with Vue.js, I can use that to hack around it, but I was hoping for something simple that'd just work - that's what I like most about GSAP, most of it is stuff that can be done relatively easily without GSAP, but using GSAP makes it trivially easy. This seems like an exception to that.

[Rodrigo]

Hi @thei,

 

The example Ryan (@elegantseagulls) pointed is using version 3.10.2 and just today version 3.11.2 was released, so that example has to be revisited and perhaps built again in order to offer a better and simpler solution. Also since version 3.11 GSAP has Context that helps a lot in this matter:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Right now is a bit late and it has been a long day, so I ask you to be a bit more patience about this and wait no more than a day or two until we can see what territory we are stepping into with the latest additions to GSAP. Also the component you mention accounts for a range of solutions and options that is quite wide and maybe not necessary for every single Nuxt project out there. Just look at the methods of the component and you'll find a lot of helper methods that might not be needed in every case. This is just a wrapper that encompasses every possible scenario and situation you could run into

 

That being said what Ryan is referring to is that regardless of your setup, scroll based animations are a unique situation, since regardless of what framework or approach you're using you have to flush down the animations stored in memory (no point in keeping them if you're not showing the content they animate) and create the new ones. Why?, because you have a whole new content in the DOM now and you need to check the positions, scroll height, etc. in order to create the new animations.

 

Finally, do you have a live sample of your particular usage of SmoothScroller in a Nuxt project that we can take a look at? In order to better orient you in finding the best possible solution.

[thei]

3 minutes ago, Rodrigo said:

Hi @thei,

 

The example Ryan (@elegantseagulls) pointed is using version 3.10.2 and just today version 3.11.2 was released, so that example has to be revisited and perhaps built again in order to offer a better and simpler solution. Also since version 3.11 GSAP has Context that helps a lot in this matter:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Right now is a bit late and it has been a long day, so I ask you to be a bit more patience about this and wait no more than a day or two until we can see what territory we are stepping into with the latest additions to GSAP. Also the component you mention accounts for a range of solutions and options that is quite wide and maybe not necessary for every single Nuxt project out there. Just look at the methods of the component and you'll find a lot of helper methods that might not be needed in every case. This is just a wrapper that encompasses every possible scenario and situation you could run into

 

That being said what Ryan is referring to is that regardless of your setup, scroll based animations are a unique situation, since regardless of what framework or approach you're using you have to flush down the animations stored in memory (no point in keeping them if you're not showing the content they animate) and create the new ones. Why?, because you have a whole new content in the DOM now and you need to check the positions, scroll height, etc. in order to create the new animations.

 

Finally, do you have a live sample of your particular usage of SmoothScroller in a Nuxt project that we can take a look at? In order to better orient you in finding the best possible solution.

I'm using 3.11.1 - I'll update to 3.11.2 I suppose.

 

It does seem that ScrollSmoother is perhaps a bit too immature for use in a production site, but unfortunately I did not know that prior to using it, and had used it a few times before and found that it made things I used to manually do using a combination of ScrollTrigger and native JS much simpler, so I didn't really stop to test it first and just assumed it'd work with the same level of reliability that the rest of GSAP has exhibited. Since now having to test it, I've found that it's got all kinds of issues with mobile and third-party DOM manipulation and what not. Unfortunately switching it out now would be problematic, as the rest of GSAP animations are all interlinked with it.

 

Context looks very interesting/useful here, I did not know about it and will look into it further.

 

I'm aware that I need to handle refreshing GSAP on DOM changes, it's just that the major point of using GSAP (for me at least) is that it handles most of this tedious stuff automatically behind the scenes. As soon as it doesn't, I may as well write stuff myself - the basic concepts minus all the tedious workarounds are usually pretty simple. I had assumed/hoped that ScrollSmoother would have some magic way of handling all this (which it sounds like it may be working towards with context and it's just a bit too new still?)

 

Unfortunately I don't have time to create a mockup project in a sandbox and I can't put my actual project into a sandbox as it's a commercial client project (and also large and complex), but any Nuxt-based two-or-more-paged site with smooth scrolling should exhibit these same problems. When I Googled for solutions earlier I found several people having similar problems who had made sandboxes.