Masks within masks question.

[SBURR]

Hey all,

 

I made an animation in After Effects, and I tried to export the animation using the bodymovin plugin, so that I could use the animation on my site.  Sadly however, bodymovin doesn't support inverted masks, and so I'm unable to use the animation from AE.

 

So I've been having trouble trying to figure out how I would go about making the animation using SVG, and GSAP.  Being new to animated SVGs, and especially GSAP, I've been trying to Google my answer into figuring out how to have a circular mask that's filled with color at the beginning, but then the animation begins to play after a second.  

 

I've attached a GIF of the animation that I made in AE, and I was wondering if anyone could point me in the right direction in making this animation using GSAP?

 

Thanks, and apologies for the newbie question.

  

[mikel]

Hi @SBURR,

 

Welcome to GreenSock Forums.

 

This can be one way:

 

See the Pen qPqjeP by mikeK (@mikeK) on CodePen

 

Or: https://codepen.io/mikeK/pen/OxbjWe

 

Happy tweening ...

Mikel

[Dipscom]

Hello! 

 

I've been meaning to drop a pen here but it took me forever to find some spare time and then another eternity to conceptualize the bits needed for the animation.

 

 

See the Pen 348ac4e8396c1f52d9e6dcf60985a2ae?editors=1010 by dipscom (@dipscom) on CodePen

 

[SBURR]

Thank you both for your helpful codepens!

[Dipscom]

'Meta' version now online

 

I'll be doing some styling at some point to make it pretty but the JS magic is all there now.