Circle illusion with GSAP motion path plugin.

[SpiritedMan 1 Likes (Newbie)]

I wanted to code this illusion with GSAP but i don't know why circles are not syncing way i expect them to with " +=0.5 ", timing is off. can someone help?

https://tiphero.com/rolling-motion-illusion more about it...

 

See the Pen LYmvqxX?editors=1010 by alexander1369 (@alexander1369) on CodePen

[Rodrigo 5,064 Likes (Superhero)]

Hi,

 

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

 

Let us know if you have more questions.

 

Happy Tweening!

[SpiritedMan 1 Likes (Newbie)]

Thank you so much Rodrigo!!!