Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Afaq Rashid

How can I achieve this attached animations.

Recommended Posts

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.
Link to comment
Share on other sites

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.

:)

  • Like 4
Link to comment
Share on other sites

Ha. Nice Christmas hat Craig!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
 

 

  • Like 2
Link to comment
Share on other sites

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.

:)

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×