How can I achieve this attached animations.

[Afaq Rashid]

Hi guys, this is my first experience with GSAP. I found this library extremely easy to use. As I am a beginner to the world of animations, I don't understand how can I achieve a certain animation in the files attached.

I have implemented the icon circles moving down or appearing above, but the main issue is how do they blend into white color? I can't think of anything to achieve this. 
Thanks in advance.

[PointC]

Hi @Afaq Rashid

 

Welcome to the forum.

 

I'd think a mask or clip-path would work. You could possibly make it work by cleverly stacking up some circles and scaling/transforming them at the right time. Those are just the first few things that popped into my head. 

 

We're happy to help with any GSAP related problems or questions as you work though your project. Best of luck.

 

Happy tweening.

[Cassie]

Ha. Nice Christmas hat Craig!

[Afaq Rashid]

On 11/28/2021 at 3:00 AM, PointC said:

Hi @Afaq Rashid

 

Welcome to the forum.

 

I'd think a mask or clip-path would work. You could possibly make it work by cleverly stacking up some circles and scaling/transforming them at the right time. Those are just the first few things that popped into my head. 

 

We're happy to help with any GSAP related problems or questions as you work though your project. Best of luck.

 

Happy tweening.

Hi Craig, thank you for such a quick response. But I am still confused, I have never worked with clip-paths or masks, I guess it would be helpful if you just point me into the right direction and give me some headstart. Thanks again.

[Cassie]

It would be handy for us if you could provide a minimal demo so we can see if you're working with SVG or HTML elements!

If you're in SVG land here's a great thread where Craig's provided an example of a circle mask ✨
 

 

[PointC]

Yeah - we'd need to see a minimal demo to give you the best advice. You mentioned that you had the circles moving up and down working correctly so maybe you could put that into a demo for us?

 

If we're talking SVG, here are the basic mechanics of masks.

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

 

Here's a little more complicated example which may work in your project.

See the Pen 260a98913ffa77df57218cdc063df52f?editors=1010 by PointC (@PointC) on CodePen

 

I also have a short tutorial explaining masks and clip-paths here:

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Happy tweening.