Tod Gibb Posted February 10, 2023 Share Posted February 10, 2023 I have some text with a gradient in it and I was wondering how I can fade it in without having it snappy like in that codepen? Thanks, Tod See the Pen wvxLXGX by TodGibb (@TodGibb) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted February 10, 2023 Share Posted February 10, 2023 From what I can tell, that actually has nothing to do with GSAP or animation - the browser won't render that text at all as the clip if it's partially transparent. Here's a fork of your demo that removes GSAP and just makes your text opacity: 0.5. Notice it's gone: See the Pen zYLVLOZ?editors=0110 by GreenSock (@GreenSock) on CodePen I don't have time to do a lot of experimenting, but you'd probably need to animate the whole thing. In other words, leave the text as fully opaque, but but it in a container that you animate instead, so the clipping is already done in the child and you're animating the entire thing. In short, this is a browser/CSS thing. Maybe someone else here has some ideas for you. 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