ScrollTrigger + asScroll + Nuxt.js

[Bogdan Kostyuk 0 Likes (Newbie)]

Hello everyone!

 

I was exploring smooth scrolling and scrolltrigger, found beautiful library called asScroll, tryied to add it to my Nuxt.js project.

It kinda works, but scroll trigger is updating it's state only when scrolling is stopped, so the animation with scrub was not so smooth.

 

Here is a minimal demo on codesandbox

[OSUblake 18,533 Likes (Superhero)]

Hi Bogdan,

 

Children are mounted before their parent, so ASScroll is created last, but it needs to be created before any other ScrollTriggers, so you're going to need to find a way to create ASScroll first, so you shouldn't be using mounted for any of your ScrollTriggers. You might need to get a little creative, like using events, provide/inject, or an event bus. And you will probably also have to change the pinType on any ScrollTriggers you pin.

 

Beyond that, ASScroll is a third-party, so can't really offer much more in support.

 

 

 

[Bogdan Kostyuk 0 Likes (Newbie)]

Well, thank you @OSUblake, that was really helpful.

 

But why smooth scroller needed to be initialized firstly?  I always thought that the reason was in the smoothing library itlself rather then the mounting order.

[OSUblake 18,533 Likes (Superhero)]

7 hours ago, Bogdan Kostyuk said:

But why smooth scroller needed to be initialized firstly?

 

Notice when you setup the scrollerProxy that it changes the default scroller. So any ScrollTriggers created before that would be using the wrong scroller.

 

this.$ScrollTrigger.defaults({
  scroller: asscroll.containerElement,
});

 

GreenSock | Docs | Plugins | ScrollTrigger | static.defaults()