brcxyz Posted January 4, 2021 Share Posted January 4, 2021 Hello everyone, newbie here. I'm in the process of changing all of the animations I'd done for my portfolio website from vanilla CSS to GSAP and I'm having some trouble with these text shadows. What I am trying to accomplish is have multiple stacked text shadows seamlessly fan out, following the translation of a bit of text and create a 3D kind of effect (if I'm not making any sense, check out https://animista.net/play/text/shadow-pop/text-shadow-pop-bl). What's actually happening is, well, the text shadows are not animating at all and I can't seem to figure out why. Thanks in advance for any help, and great platform by the way! See the Pen eYdrNbB by brcxyz (@brcxyz) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 4, 2021 Solution Share Posted January 4, 2021 Hey @brcxyz - welcome to the forums. The issue seems to be related to the 'ff' you have at the end of your color-hex-value. Removing that seems to make it animate properly. Does this help? See the Pen 455c0018744be12810859c0b11c30628 by akapowl (@akapowl) on CodePen Cheers, Paul 5 Link to comment Share on other sites More sharing options...
brcxyz Posted January 4, 2021 Author Share Posted January 4, 2021 Been wrestling this for a couple hours! It works great, thanks a bunch. Would this be a problem of GSAP not supporting a transparency element or just not supporting parsing hex codes like that? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 4, 2021 Share Posted January 4, 2021 Last time I checked a few years ago, support wasn't great for hex codes with alpha. Now it's pretty good but still doesn't have complete support on mobile and will never be supported in any IE version. We'll consider whether or not it's worth adding support for it but it might be a little while before we get around to it because we're pretty focused on a couple of more important things right now. Until then, stick with animating the opacity, autoAlpha, or using rgba. 2 Link to comment Share on other sites More sharing options...
brcxyz Posted January 5, 2021 Author Share Posted January 5, 2021 I don't think this is enough to open a new topic so I'll just add on to this. As you can probably tell, stacking shadows underneath the text in the beginning produces a thin (but very visible on a contrast-y background) outline effect. In vanilla CSS, I fixed this by having all of the shadows transparent initially, then making them opaque in the first frame of the animation. What would be an elegant solution to this in GSAP? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 5, 2021 Share Posted January 5, 2021 In general it's best to avoid using text shadows. To create this effect I would create either two SVG paths (each being one version of the text outlines) or two HTML elements layered. Either approach will perform better and likely be less buggy in terms of rendering. 2 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