ScrollTrigger not working after context change

[Wixxtorr]

After changing the dark light mode, stops working ScrollTrigger.

 

https://codesandbox.io/s/gatsby-gsap-loco-forked-uzcpz0

Can someone tell me what I did wrong?

[alig01]

Hey.

I skimmed it briefly and saw that in the class useLocoScroll.js useEffect executes on every re-render.

Once you change line 69, the issue should be fixed.

 }, [])

Good look

 

[Rodrigo]

Hi @Wixxtorr,

 

On top of @alig01 great advice, there are a few things that are quite peculiar in your setup.

 

You are creating ScrollTrigger instances in your layout file. Normally a layout in this type of systems (Gatsby, Next, Nuxt, SvelteKit, etc) is a container that will be reused for different routes (URLs) so I wouldn't do any of that in there unless there is no other choice, in which case you should also do some route checking to see if in the current route that code should run, otherwise you'll find yourself in a lot of problems because that code will be executed in every page and probably will return some errors. That code should go in the DemoIntroBlock component.

 

You are also including everything in one sitting, GSAP animations,  ScrollTrigger, CSS, theme switching, Locomotive, etc. You should go step by step, otherwise you end up with situations like this where is quite difficult to track where everything starts to go wrong. Watch this video by @Cassie to get a grasp of a more correct flow plus some really handy tips about working with ScrollTrigger:

 

I remove Locomotive completely and I'm creating the ScrollTrigger instances in the DemoIntroBlock.js file:

https://codesandbox.io/s/gatsby-gsap-loco-forked-wbc1m3?file=/src/components/DEMO/DemoIntroBlock.js

 

Hopefully this helps and provides a good starting point for your project.

 

Let us know if you have any other question.

 

Happy Tweening!