Text-Shadow Animation with Stagger

[troyst]

I'm playing around with text-shadows to create a glow effect. What I'm seeing when animating is that the text-shadow will start from black and animate to the desired color and then animate back to black and ending on text-shadow: none. I'm wondering if there is a way to only animate the opacity of the text-shadow in rgba(). I'm sure it is obvious but I'm not seeing it. The code pen should help give an example. I have it paused to show the black text-shadow along with the desired text-shadow. Ideally, the text-shadow would begin animating from 0 opacity to .8 or whatever the opacity is set to in the glowShadow variable.

 

 

EDIT: You know, I just realized that I can still use fromTo with stagger to animate from a specific starting text-shadow to an ending text-shadow. I think I answered my own question here. Open to other ideas of course!

See the Pen jOKdbbM by troystarwalt (@troystarwalt) on CodePen

Edited June 29, 2023 by troyst
Added a follow up note for clarification on additional research

[SteveS]

I'm not sure I understand the question or the desired effect. From what I think I understand, it looks like you are animating from the default text-shadow to your custom value. To be more precise, when you tween to rgba(255, 158, 158), it starts from some default that happens to be black.

A solution to this is to set its starting value to the color and opacity that you want. Here is an example using fromTo instead of to.

See the Pen WNYjvKr by StevenStavrakis (@StevenStavrakis) on CodePen

[troyst]

That was exactly it @SteveS - thank you for the reply.