Color theme change (dark/bright), but color values are not updating, scrollTrigger

[marxcie@gmail.com]

Sorry, I need to ask for help. I'm changing the theme of the website (dark/bright), and I'm using css variables. But when there is a color animation, GSAP grabs the css var, and tweens it as a simple rgb object. 
I tried to store the new variables in an object, and change it when the theme changes, but because I create the tween at the beginning, those GSAP variables are already set, and GSAP overwrites the new css variables. I tried to refresh the scrollTrigger, but I guess I should recreate the tweens instead, but I don't know what approach would be good here. 

The problem appears with the animation after I changed the theme with the button.

Probably it's very ugly javascript, I tried to clean it up, comment is, but I'm still just learning JS, and not a developer by profession, so sorry about that. 

See the Pen JjbqyQy by marxcie (@marxcie) on CodePen

[ZachSaucier]

Hey marxcie. You've got a lot of code there, much more than I'd expect for this sort of thing.

 

How about you try explaining the end goal and then we can help you get there? What's the goal? 

 

From what I can tell, you want to stagger in reveal some columns of text, then change the color of most of them so that some are highlighted. Is that correct? Am I missing something? 

[iDad5]

I read your post two times now and I'm still not sure what you need help with.

Do you want a smooth transition between the color schemes? But what would you need the ScrollTrigger for? Or are they two separate problems?

Also I feel your (S)CSS is a bit over-engineered why not just work with SCSS variables? They would compile to static color values, which in your case should (as far as I understand) do the job, are still better supported and probably easier to handle in transitions.

 

[marxcie@gmail.com]

Yep, sorry, my english is still not really good.
 

Ok, so every color in my project comes from css variables. I'm using this method: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ to change between dark and bright theme. When it's changed, the body gets a .dark or .bright class, and dom elements like headings inheriting the colors from it. 
 

:root { 
  --color-dark: #000000; 
  --color-bright: #ffffff; 
}
body.bright { 
  --headline-color: var(--color-dark); 
}
body.dark { 
  --headline-color: var(--color-bright ); 
}
h1 {
  color: var(--headline-color);
}

I did in this way, using intermediate color tokens, because it helps with the maintainability, for me at least. I had this problem before with design systems and dark mode, it can't be just inverted, the contrast is completely different. Using intermediate tokens help me to pick the right colors from a bigger palette, and the code still stays consistent. Anyways, that's an another topic. 
 

So, this is how the animation looks like:

• the div enters to the viewport, scrollTrigger plays the animation: 
  • the whole block animates in
  • and the headings are animating to an another color variable, while the span items are keeping their color.
• and onLeave it reverses the animation

 

This is the color animation:
 

h3.forEach(function(target) {
	anim.to(target, {
    	duration: 0.6,
        color: jQuery('body').css('--ui-secondary-color'),
        ease: "expo"
    }, "-=0.3");
});

This is working, no issues.

 

When the div is in the viewport, and I'm changing the color mode, I have to change the color as well, keeping the after animation status. So now when I click on the color change button, a script removes the color inline style from these element, replacing with the actual css variables. 

This is still working. And here comes the problem.

 

When I change the color mode, scroll away and back, since the anim object already created, I don't know how to refresh the animation with the new values. I tried to reset the animation with the ScrollTrigger.refresh(), but it didn't help. 

I still don't know if I explained the problem properly. The easies is just to look at the pen, scroll through the section 2 to the bottom, change the color mode, and scroll back to the second section, with the headings animation. After the color change, the animation is not smooth anymore, it's flickering. 

So, I guess I have to watch these things:
- does the animation played already? where is the playhead? 
- did the theme changed before, during or after the animation?
and change the animation accordingly. 

 

 

[ZachSaucier]

Hey marxcie. I still think you're focusing too much on the code. Could you please try to answer my questions from my last post? 

1 hour ago, ZachSaucier said:

What's the goal?  From what I can tell, you want to stagger in reveal some columns of text, then change the color of most of them so that some are highlighted. Is that correct? Am I missing something? 

 

[marxcie@gmail.com]

1 hour ago, ZachSaucier said:

From what I can tell, you want to stagger in reveal some columns of text, then change the color of most of them so that some are highlighted. Is that correct? Am I missing something? 

That part is working. What is not working, is to update the colors with the new vars before or after the animation, if the theme is changed. 
Actually after the animation update is working with removing the inline color styles the tween applied, but when it plays again, it plays with the color values loaded in the beginning, and not with the changed colors. 

[iDad5]

@marxcie@gmail.com that's what I thought. Really you might have change your css variables.

 

[iDad5]

I've looked it over again (and again)...
Please forgive me if I ask a question that may sound patronising but isn't meant that way: Is all this really necessary?

 

If it was my project I probably would opt for setting the theme once and leave it that way. (It's really not a feature people expect to be changeable.) 
Or I'd go for 'let it flicker' only a very very small percentage of users will ever encounter that problem if at all, an of those moste won't notice. (I'm a perfectionist too, but hey at some point ist might be better to ask for forgiveness than working overtime for ages...)

Also the percentage of users that use systems that have don't fully support all the features off pure css variable might be larger than the group that might ever notice the flicker.

But all those thoughts put aside, I think you are at the right track with your last comment. Maybe reading the color values set inline before thy are removed ant applying the via a GSAP.set method could do the trick? 

[marxcie@gmail.com]

@iDad5 😅 Well... you're right with that maybe I'm overthinking and engineering the problem. 

 

The css variables part is nice. I like work with it, not just because it feels convenient (it does), but it helps me refining the details on the fly. Not just colors, but baseline, line heights, spacing, different font sizes for different viewports, base cap height, etc. It saves me a lot of browser reload. And by caniuse, around 95% of the browsers supports css variables. That enough for me.  

And this color issue? Maybe you're right. I was looking for a holistic approach, how to handle exceptions, color changes. It's like a problem is front of me, and it annoys me if I can't solve it, and during finding a solution, I tend to overcomplicate the whole issue, and to write tons of code just to solve a problem maybe only theoretical. It's like the carrot and the goat, or more like the bull and the red color (although bulls are by fact almost completely colorblind), you know. And not having enough JS experience definitely doesn't help. Well, I'm learning by doing at least. 

 

Now I'm thinking of storing the animations using color values in an object, and when the theme is changed, removing and adding them again. Invalidating, I think that's the function I have to use.

But for now I will put this problem aside a bit, and trying to focus to more important problems. 

[ZachSaucier]

At the core, the issue is that the old animation still exists. You could remedy that in several ways. One is to animate the actual CSS variable(s) with GSAP. Another is to recreate the animations that were created earlier. 

 

Or you could avoid the whole issue by using fade outs instead of animating the color values themselves. Like this:

See the Pen ExNzpVd?editors=1010 by GreenSock (@GreenSock) on CodePen

 

In any case you should avoid using <br>s for making elements appear separate. It's much better practice to use a <ul> and remove the bullet points than to use <br>s for layout.

[marxcie@gmail.com]

@ZachSaucier Absolutely true. I was so fixated on animating to the right color, actually I've completely forgot to consider other options, like to play with the opacity. /huge facepalm.

 

I would avoid to animate the css vars. I know it's possible, but it goes against my approach of the design/color system, because, well, it would change the color of all the elements using the same variable. Or then I would have to create a custom vars just for this animation, what is again, goes against the Atomic Design System approach. But transparency is not, and I can find the same transparency percentage giving the same color brightness at the end, as the original color I wanted to have.   

 

You're right with the <br>s of course. The reason it looks like this, it's coming from WP Gutenberg. These are basically 3 columns next to each other, with 3 Heading elements, and I just applied the accent color to the selected words, this is why those have this .has-something span Wordpress class style. And this is why I didn't use stagger. I wanted to keep it simple, something any non technical user can do in Gutenberg, having a heading with line breaks, select some words, apply the highlight, bamm the highlight is animated. 

 

So, my options of styling, and which elements I'm using are a bit limited to what tools WP gives me. Of course I could edit the code directly, but I wanted to keep it user friendly in some ways, limit to the possibilities of the Gutenberg text editor. Well, I can find an another way, or create my own block elements or something. 

 

Anyways, again, thanks for the idea, let's see what I can do with transparency!