Jump to content


different translation duration for each circle

Recommended Posts

Currently, all circles will update their direction (repeatRefresh) at the same time, after the set duration. Is there any way I can get a more organic feel and have the update in direction happen at different times for each circle? In other words, the circles would start moving at the same time but would update direction at different (random?) times. I tried 'staggerTo' but couldn't manage to get it to work. 


Thanks for your help once again!

See the Pen wvzWbWa?editors=0010 by carolineportugal (@carolineportugal) on CodePen

Link to comment
Share on other sites

when I want a bunch of things to move with random values for duration, repeatDelay, and end values I'll create a function that creates a tween for any element that is passed into the function. When the tween is done I pass the target of the tween back into that function using onComplete and onCompleteParams.


In the example below I loop through all my bugs and pass them into the moveMe() function.


See the Pen GRjqbjN?editors=0010 by snorkltv (@snorkltv) on CodePen


Using this same approach you have a ton of flexibility to add things like "rotate to new direction" and "constant speed regardless of distance travelled"


See the Pen jOrKwwX by snorkltv (@snorkltv) on CodePen


A more advanced approach would be to use some Object Oriented Programming (OOP) and create Bug class that has its own moveMe method, but that would be for another day :)


Hopefully these demos help you understand the basic concept concept. They are taken directly from my courses (link below).



  • Like 5
Link to comment
Share on other sites

Yep - I'd recommend @Carl's approach. Solid. 👍


Another option would be a wiggle. 

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


It's pretty much the same technique I use on the header of my training site except those are Pixi sprites. I also have them magnetically pulled to links on hover.



Hopefully that gives you some ideas.


Happy tweening.



PS You'll probably want to upgrade to the new GSAP 3 syntax. 


  • Like 4
Link to comment
Share on other sites

This is great, thanks so much for taking the time to point me to 2 different, and equally great, solutions!

Link to comment
Share on other sites

Happy to help. However you choose to proceed, the important takeaway is giving each element its own tween/timeline so it can do its own thing and repeat accordingly. If you need to control all of them at once, you can also add them to a master timeline. 


Happy tweening.



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