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!

@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.

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.

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.

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.

Hi @ZachSaucier, perfect, thank you. Honestly, I thought I've read it through, but obviously I did not. Or I was lost among my many GSAP tabs, and eventually skipped it, I don't know. ?‍♂️ Anyways, thanks for your help, and I will try to pay more attention to docs and how-to's before I post. ? Hi @GreenSock yep, exactly. I was playing around with the toggleActions, but somehow I didn't work for me, I think I messed up the loop, and it didn't call the the right elements. Thanks again, I think I can pick it up from here, build the basic animations, and I have to start to think about more complex animation sequences. Ahh, btw, it's good to be back, and I'm excited to learn GSAP, again. I used your library a long time ago when Flash websites and banners were a thing. I haven't done too much development since then, but looks like GS never lost its awesomeness!

Thank you for your quick reply. I swear I've read this, but now I don't know anymore. And no, I didn't meant to post this to the freelancer topic. Sorry, I'm struggling with this too long, and I'm very tired. I'll delete this post ASAP. Only if I could. Please delete it for me.

Hey! I tried to read through the documentation (well, I tried to research hard and RTFM), looked for the common mistakes, watch the video, etc... Still, I can't build what I'm trying to. What I'm trying achieve is to simply have an object containing basic in/out animation setup for repeating elements, like headers, a paragraphs, dividers, etc., and trigger the animation when the element enters to the viewport, and reverse it when leaves it. When the start/end set to the top/bottom of the viewport, it works ok, but when not, weird things start to happen. Somehow I can't make it work. I could write more what is wrong, but I think it's just easier to show: https://codepen.io/marxcie/pen/jOVEmVM