Jump to content
Search Community

ScrollTrigger animations not rendering correctly after registering ScrollSmoother in nextjs app

dialformonkey test
Moderator Tag

Recommended Posts

Hi. Looking for the proper way to call ScrollSmoother.create() inside a nextjs app. I have a couple of animations that run fine when i disable the ScrollSmoother create call. However when i enable it the animations are not working most of the time even with markers: true enabled.

 

I have been troubleshooting the issue and have moved the initialization to the root as well. This still does not seem to work. I am using the useIsomorphicLayoutEffect with gsap.context.

 

since i cant exactly recreate it on a codepen, i could dm over a few live links with both the ScrollSmoother enabled and disabled as well as send over the github repo.

Link to comment
Share on other sites

Hi @dialformonkey and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock!

 

There is not much we can do without a minimal demo. In the case of NextJS you can use either Codesandbox or StackBlitz to create one. This is a simple setup in Stackblitz:

https://stackblitz.com/edit/nextjs-efumgr?file=pages%2Findex.js

 

And here you can find the same example in Codesandbox (read only I'm afraid unless you're logged in with Github):

https://codesandbox.io/p/sandbox/practical-tamas-2xh3h4?file=%2Fpages%2Findex.tsx&selection=[{"endColumn"%3A28%2C"endLineNumber"%3A19%2C"startColumn"%3A28%2C"startLineNumber"%3A19}]

 

Hopefully that's enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

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.
×
×
  • Create New...