[Mask a <div> with text inside.]

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.

[Mask a <div> with text inside.]

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

[Handwritng and typewriter animation on path in svg]

2 minutes ago, GreenSock said:

Ah, special characters like that weren't supported on SVG elements, but I just implemented a workaround for the next release which you can preview at:

https://assets.codepen.io/16327/TextPlugin3.min.js

 

And it seems to resolve things: 

 

 

 

Better? 

 

Awesome. Tested on my own code and works perfect. Thanks a lot, outstanding support.

[Handwritng and typewriter animation on path in svg]

Sorry @GSAP Helper, I quote a pen but doesn't appear. This is a valid example. I want to show ">>cat" but it escapes it.

See the Pen PoLywXO by darorck (@darorck) on CodePen

 

An easier one:

See the Pen NWJOqde by darorck (@darorck) on CodePen

 

This one looks good but doesn't animate correctly

See the Pen VwRELpM by darorck (@darorck) on CodePen

Thanks.

[Handwritng and typewriter animation on path in svg]

On 1/30/2023 at 4:52 PM, Rodrigo said:

Hi,

 

Regarding this effect, how can I add ">>" to the svg text. It always escape it as &amp;gt
. For example to write <text x="40" y="35" class="heavy">->>cat<<-</text>

Thanks a lot.

 

 

 

For animating handwriting check this tutorials by @PointC:

https://www.motiontricks.com/animated-handwriting-effect-part-1/

https://www.motiontricks.com/animated-handwriting-effect-part-1/

 

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

Let us know if you have more questions.

Happy Tweening!