Jump to content


Circle illusion with GSAP motion path plugin.

Go to solution Solved by Rodrigo,

Recommended Posts

  • Solution



That was fun!!!!! 🥳


There were a few problems with your initial setup. First the easing, linear easing makes he balls kind of bounce on each repeat, you need an in-out ease so the animation starts and ends slowly to create the feeling of deceleration. Second is the time difference between each circle start, it should somehow match the start of each circle in the global timing but it should always be two times the duration of the animation plus 0.25 seconds.


I did change the order in the example in order to make it easier to complete, but hopefully is enough to get you started so you can see how to set it up correctly:

See the Pen bGMPWNP by GreenSock (@GreenSock) on CodePen


I can bet vital parts of my anatomy that there is some math behind this, but now I don't have the time to figure it out, so I went the good ol' trial and error route.


Thanks for providing the demo it was super helpful and for bringing this to us. It's always incredibly rewarding helping users in the forums and as I was watching this getting into the right shape a big smile started to appear in my face :D


Let us know if you have more questions.


Happy Tweening!

  • Like 2
  • Thanks 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.