darorck Posted February 17 Share Posted February 17 I want the text to come out from behind the mask, but I can't find a way to do it. I've seen that it can be done easily with SVG, but I want to keep the text as text so that it can be easily edited in WordPress. Is there any possible way? Thank you. See the Pen abMXPEq by darorck (@darorck) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 17 Solution Share Posted February 17 We really try to keep these forums focused on GSAP-specific questions. What you're asking is much more of an SVG/CSS/markup thing. I'm not super familiar with masking, but you'll probably need to wrap your elements in something that has the mask applied (otherwise the mask will just move with the animating element), and then you'll need to rework your SVG artwork on the <clipPath> so that the shape encompasses the area where you'd want to see the text (currently your <path> is where you DON'T want the text visible). So basically invert it. Here's a quick example that has the mask still inverted (I don't have the time to rework all your SVG): See the Pen PoLVLzQ?editors=1010 by GreenSock (@GreenSock) on CodePen I hope that gets you moving in the right direction. 1 Link to comment Share on other sites More sharing options...
darorck Posted February 17 Author Share Posted February 17 Thank you very much. The truth is that I was trying with that same thing and couldn't find the solution. I read somewhere that clip-path didn't support text, and I thought GSAP could solve it, but I see now the issue was with my handling of positioning. Thank you very much again. 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