Jump to content
GreenSock

Crystal

GSAP + NEXTJS (REACT): scrolltrigger dissappears / stops working

Recommended Posts

I have a page with scrollTrigger, implemented within react project. I am using UseEffect hook  for implementing it and cleaning up with kill() afterwards. 

When loading redirecting to the page the first time - everything works  ( from page with no scrollTrigger), after going back to frontpage and to scroll-trigger page again, it stops working.

When loading the page directly, it never works, the scroll-trigger markers flash and disappear.

This happens only on production - vercel hosted, statically generated page. 

 

Any idea what could be causing this. I have tried different solutions, made sure the trigger is loaded and there when scrolltrigger gets initiated, which it always does. When I console log the scrollTrigger after initiation, it's there.  No other elements on the page use scrollTrigger, it's the only one.

 

Videos and code for information bellow, it's hard to recreate in codepen as it' a part of bigger ecosystem .

 

https://drive.google.com/drive/folders/1k_ZMRbcrezLGbtemDDX8NIGGqsdgC69K?usp=sharing

 

scrolltrigger- implementation.png

  • Like 1
Link to comment
Share on other sites

  • 7 months later...

hi, I'm having the same problem. did you find out what was happening?

it seems like scrolltrigger does not get instantiated when you navigate between pages. when you refresh, it works fine, but when you navigate to another page it breaks.

Link to comment
Share on other sites

Hi @avizmarques. You might want to look into gsap.context(). It's super helpful, particularly for React users. Makes cleanup simple. 

 

If you're still having trouble, please make sure you post a minimal demo that clearly shows the problem and we'd be happy to take a peek. It sounds like you may just need to call ScrollTrigger.refresh() after your page finishes loading. ScrollTrigger does that automatically on a window "load" event, but it sounds like you're dynamically loading things so perhaps you need to tie into a lifecycle event in your framework and call it manually. 

Link to comment
Share on other sites

thanks for your reply, these links are useful. However, I don't seem to be able to use gsap.context. I get an error:

Property 'context' does not exist on type 'typeof gsap'.ts(2339)

forcing the type does not work, it says gsap.context() is not a function.

 

(edit: my bad I was using 3.10, upgrade fixed this ^ )


The problem I am getting is that somehow it looks like ScrollTrigger is missing when I navigate from another page that has a ScrollTrigger with react next.  It tells me it's missing the plugin, even though I register it in the component.

Link to comment
Share on other sites

Hi,

 

Can you provide a minimal demo so we can take a look at it? The only advice I can give you, based on what you have posted is to register ScrollTrigger in the _app.js file and not in every component, but beyond that I can't think of anything without looking at a live sample that we can tinker with.

 

Everything seems to be working as expected here:

https://stackblitz.com/edit/nextjs-reqcqo?file=pages%2F_app.js,pages%2Findex.js,pages%2Fabout.js

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

Im having issues with gsap and nextjs where scrolltrigger doesnt work as expected when running `yarn dev`, but works fine on `yarn build && yarn start`.

 

Whats weird is that it works fine in this stackblitz example, but the exact same code i have running locally on vscode does not work with `yarn dev`, what i'm seeing is the pinned section stuck on the screen, with the 3rd section overlapping it.

 

https://stackblitz.com/edit/nextjs-em5vru?file=pages/index.js

Link to comment
Share on other sites

Hi @joshu_a,

 

Sorry that you're having issues with your app, but this seems to be related to the dev server Next is using and not with GSAP, since in a production build running on your local machine everything seems to be working as expected.

 

One advice I can give you is to check the dimensions of all the involved elements in your setup by the time ScrollTrigger is created and a few milliseconds after. Also check the same dimensions without creating the ScrollTrigger instance. If you keep running into the issue, perhaps create a timeout in development only to create the ScrollTrigger instance.

 

Sorry there is nothing else we can do to help you with this. Any other question you have about GSAP,  we'll be ready to help you as much as possible!

 

Happy Tweening!!!

Link to comment
Share on other sites

On 9/23/2022 at 6:16 PM, Rodrigo said:

Hi,

 

Can you provide a minimal demo so we can take a look at it? The only advice I can give you, based on what you have posted is to register ScrollTrigger in the _app.js file and not in every component, but beyond that I can't think of anything without looking at a live sample that we can tinker with.

 

Everything seems to be working as expected here:

https://stackblitz.com/edit/nextjs-reqcqo?file=pages%2F_app.js,pages%2Findex.js,pages%2Fabout.js

 

Happy Tweening!!!


Hi Rodrigo, thank you for your reply.

 

In the example you sent me, ScrollTrigger is not really being used as a plugin, is it? Or is this how it should be used?

When you try to use a gsap.to or a gsap.from it does not work anymore.

For example: 

gsap.from(numbers, {
textContent: 0,
duration: 2,
snap: { textContent: 1 },
scrollTrigger: { trigger: section, start: 'top bottom' },
});
Link to comment
Share on other sites

Hi @avizmarques,

 

Indeed ScrollTrigger is being used in the Stackblitz example posted in the thread:

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

 

Check the index and about pages and you'll see that is being used there and you can also scroll up/down to see the boxes moving as you do.

 

Unfortunately based on the code snippet you posted there is no way for me to know exactly what you're dealing with. Please provide a minimal demo (you can fork the one I posted if you want) to see what the problem could be.

 

Happy Tweening!!!

Link to comment
Share on other sites

Thanks a lot!!

 

I managed to make it work by using gsap.context() inside a useLayoutEffect (it was not working with a normal useEffect), and by importing  ScrollTrigger in the _app file. The example was very useful.

 

  • Like 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.
×