Inconsistency between duration and rotate randomness

[remopini]

I noticed a "weird" inconsistency between using random  values in duration and rotate (see attached codepen).

 

When I apply an animation to several items using their class with a random duration and a random rotation, the rotation is different for each item, but the duration restart (but not the duration itself) seems to be synchronized across all items. This leads to some items being "done" sooner than other and waiting for the others to catch up.

 

I was expecting a completely "non-synchronous" behavior (as in the sample to the right). Is there a way to get that without having to assign individual ids to each item (i.e. control them using a class)?

See the Pen MWppJXV by remo-pini (@remo-pini) on CodePen

[Cassie]

Interesting. Not sure why this is happening - I'm gonna dig into the docs and see if I can understand it a bit more

You can use a forEach loop and target the element in each iteration though - then no need for classes

See the Pen 900f3c97ddc14eb1346c84ab419242d5?editors=0010 by cassie-codes (@cassie-codes) on CodePen

[Cassie]

From the docs -

Setting repeatRefresh: true causes a repeating tween to invalidate() and re-record its starting/ending values internally on each full iteration (not including yoyo's). This is useful when you use dynamic values (relative, random, or function-based). For example, x: "random(-100, 100)" would get a new random x value on each repeat. duration, delay, and stagger do NOT refresh.

So the above solution is probably the way to go! 🙌

 

[remopini]

Great thx! Based on another post, I think it should be:

 

gsap.utils.toArray(".cir").forEach((itm) => {
    gsap.to(
        itm, {
            duration:"random(1, 5, 1)",
            rotate:"random(-360, 360, 10)",
            repeat:-1,
            repeatRefresh:true,
            ease:"none",
            transformOrigin:"center",
            onRepeat: function() { this.duration(gsap.utils.random(1, 5, 1)) }
        }
    )
});

Otherwise, the duration will remain the same for each repetition (as you pointed out from the documentation).