Would GSAP be able to achieve this easily

[rich8519]

Hello GSAP Community, 

 

I'm brand new to the GSAP would and would appreciate some advice. 

 

Would GSAP be able to achieve the attached rough example as an animation. 

 

Basically I would want the line to appear from nothing and scale centrally, the text left and right would then appear from the left and right of the line. My plan was to use masks and css but as masks have poor support, this looks like my best option. 

 

Any advice on where to start and how would be greatly appreciated. 

 

Thanks, 

Rich

 

[Dipscom]

GSAP will Tween any numeric property of any JavaScript object.

 

But your question is not really about GSAP, it's about masking. And for that, SVG is the one who's got the best support here.

 

There is a few threads in this forums discussing how to animate masks with GSAP, I've done a couple of transitions myself. Do a bit of a search in the forums and you should find plenty of info. 

 

Bellow are a couple of exercises I made myself. See if they help you.

 

See the Pen ZbVdGN by dipscom (@dipscom) on CodePen

See the Pen KrAqxg by dipscom (@dipscom) on CodePen

See the Pen zByqBV by dipscom (@dipscom) on CodePen

 

And a complicated one to confuse you

 

See the Pen yaYQyQ by dipscom (@dipscom) on CodePen

[rich8519]

Hey, 

 

Thanks for the response, will take a look at the links  here and also more in the forums. 

 

Cheers