Mask a <div> with text inside.

[darorck]

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

[GreenSock]

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. 

[darorck]

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.