Jump to content

Bogdan Kostyuk

ScrollTrigger + asScroll + Nuxt.js

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.


  scroller: asscroll.containerElement,


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


  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.