MineTech Posted March 26 Share Posted March 26 So I tried to do it and got the code in the codepen.io And while it works, it has two issues: At the start of the animation, the edges of the text are visible As it is a gradient, there isn't a clear division between appeared and disappeared Can someone help me solve this issues? See the Pen YzMxyeZ by pedrohcf (@pedrohcf) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted March 26 Share Posted March 26 Hi @MineTech and welcome to the GSAP Forums! The main issue here is that your end point is passed before the start point, so your animation is finished before it starts: See that the end marker has already passed the end point at the bottom of the viewport? I made a fork of your demo with some tweaks: See the Pen zYXdrGB by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
MineTech Posted March 26 Author Share Posted March 26 My problem wasn't the animation endpoints themselves, because in the real site they are correct, although the fork you made helps to visualize in the embed. I wanted to know if there was a fix for the issues I listed before Link to comment Share on other sites More sharing options...
Rodrigo Posted March 26 Share Posted March 26 Yeah I don't really get what's the issue TBH, but it seems mostly related to the CSS mask rather than GSAP. GSAP and ScrollTrigger are doing what they're supposed to. I would recommend you to get your masking working as expected first and then add GSAP to the mix, since that is working as expected. Maybe you could be more explicit and post a URL to a live sample that works the way you intend. Happy Tweening! Link to comment Share on other sites More sharing options...
MineTech Posted March 26 Author Share Posted March 26 I was thinking of making an opacity mask with a circle that effectively makes the whole text transparent and, while you scroll, the circle grows, making the text appear from the middle out. Do you have any links or guides for the css part? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 26 Solution Share Posted March 26 Yeah, this seems more related to the mask setup more than anything else. Check this thread @mvaneijgen (one of the superheroes here in the forums) made on the subject of masks: A quick google search returned these: https://fossheim.io/writing/posts/css-text-gradient/ https://medium.com/@mattkenefick/css-gradient-text-reveal-739e7fe36221 https://cssgradient.io/blog/css-gradient-text/ https://ishadeed.com/article/css-masking/ Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
MineTech Posted March 26 Author Share Posted March 26 Thx, will check them out! 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