Text mask animation

[Laurie 3 Likes (Newbie)]

Hi,

 

I'm wondering how I can create a text mask animation. 

Actually, I don't know if it's possible to create something like this without SVG.

Here's a preview of what I'd like to make :

https://ibb.co/C50cJ4b

I would like to animate the mask (that is black in the picture). 

 

I saw this post in the forum, but actually I'm a beginner and I don't know how to create what I want.

 

Thanks a lot ! 

 

Laurie

 

[ZachSaucier 7,132 Likes (Superhero)]

Hey Laurie. Why not use SVG? You'll get better support with SVG than you would with any CSS only approach (whether or not you use GSAP). 

 

Here's another thread with a related approach: 

 

41 minutes ago, Laurie said:

I'm a beginner and I don't know how to create what I want.

What, specifically, are you having trouble with? We're here to help but don't have the capacity to do every project that people ask for here in the forums  

[Laurie 3 Likes (Newbie)]

Hi Zach, 

 

Thanks for the answer! Yes, SVG is probably the best way to create what I want.

I saw the thread, and found

See the Pen ZxKymB by PointC (@PointC) on CodePen

 : this is almost what I try to create.

But is this possible to insert the background directly in the text area to reproduce the image I linked in my first post ? I never used SVG before.

 

Thanks again,

 

Laurie

 

[ZachSaucier 7,132 Likes (Superhero)]

Sure, just change the fill and stroke as needed. I recommend that you do some reading about SVG  

See the Pen bGdvGoo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You might as well upgrade to GSAP 3 while you're at it.

[Laurie 3 Likes (Newbie)]

Thanks a lot Zach! 😃