different translation duration for each circle

[Caroline_Portugal]

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!
Caroline

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

[Carl]

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).

 

Carl

[PointC]

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.

https://www.motiontricks.com/

 

Hopefully that gives you some ideas.

 

Happy tweening.

 

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

 

[Caroline_Portugal]

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

[PointC]

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.