Crystal Posted February 2, 2022 Share Posted February 2, 2022 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 2, 2022 Share Posted February 2, 2022 Hi Crystal, It's hard to troubleshoot without a minimal demo. You don't have to use CodePen, here's a next.js template you can fork on codesandbox. Thanks! https://codesandbox.io/s/gsap-next-js-starter-jekrn?file=/pages/index.js 1 Link to comment Share on other sites More sharing options...
avizmarques Posted September 22, 2022 Share Posted September 22, 2022 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 More sharing options...
GreenSock Posted September 23, 2022 Share Posted September 23, 2022 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 More sharing options...
avizmarques Posted September 23, 2022 Share Posted September 23, 2022 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) View Problem 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 More sharing options...
Rodrigo Posted September 23, 2022 Share Posted September 23, 2022 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!!! 1 Link to comment Share on other sites More sharing options...
joshu_a Posted September 23, 2022 Share Posted September 23, 2022 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 Screen Recording 2022-09-23 at 2.10.59 PM.mov Link to comment Share on other sites More sharing options...
Rodrigo Posted September 23, 2022 Share Posted September 23, 2022 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 More sharing options...
avizmarques Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
Rodrigo Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
avizmarques Posted September 26, 2022 Share Posted September 26, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now