Chenge timeline color value depending on Dark Mode Switch

[Maria Ferraro]

Hello! I'm new with Gsap and I'm trying to change the background color of a section and it works great, the thing is when I switch to dark mode it doesn't chenge the default background color to the darker one, only happens if I switch it before going to that section. (I'm using React Switch)

 

The colors are a variable that checks if dark mode is activated or not, but timeline doesn't change with it. Already tried with toggleActions. I think I might have to do a function to change the color when the dark mode is active or inactive, but I'm not sure how...

 

This is how it looks like when I get there 

 

this is how it looks if I change the theme 

 

This is how should look (and how it looks when I go to other page and come back)

 

I tried to put it into a CodePen but not really working

 

See the Pen gOjLEdx by mariaferraro (@mariaferraro) on CodePen.

[GreenSock]

Welcome to the forums, @Maria Ferraro!

 

Unfortunately it looks like your demo is completely broken and not showing anything at all. Would you mind providing a minimal demo that isn't throwing errors like that so we can poke around and see what's going on? 

 

One thing you should definitely do is wrap your code in a gsap.context() - it's your new best friend in React because it makes cleanup super easy (and selector scoping too). This article is a must-read: 

 

 

React 18 actually calls useEffect()/useLayoutEffect() TWICE in strict mode which means you might be creating multiple competing animation/ScrollTriggers accidentally that are fighting with eachother because you didn't do proper cleanup (revert/kill the old one before creating the new one). The article explains it all.  

 

Once we see a minimal demo that shows the issue, we'll gladly answer any GSAP-specific questions. ?

[GreenSock]

By the way, here's a React-based Stackblitz demo with ScrollTrigger that you can just fork if that's easier: 

https://stackblitz.com/edit/react-cxv92j