troyst Posted June 29, 2023 Share Posted June 29, 2023 (edited) 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 Link to comment Share on other sites More sharing options...
Solution SteveS Posted June 29, 2023 Solution Share Posted June 29, 2023 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 1 1 Link to comment Share on other sites More sharing options...
troyst Posted June 29, 2023 Author Share Posted June 29, 2023 That was exactly it @SteveS - thank you for the reply. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now