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

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

damn, I was hoping to be able to keep the svg and the script as independent as possible. But thanks for the quick help!

I would like to INDIVIDUALLY animate some bars. If I create those bars with cut-copy-paste, it works fine, but it's a nightmare to manage. If I define them as a "defs" and then insert them using "use", they seem to become "ganged". I assume that is, because GSAP is actually modifying the underlying base object, not the virtual copies? Is there a way to get to the properties of the instanced copies instead of the base object? I'd like to avoid having to paste them (there are a lot of them).

Great! Thx. Codepen updated to reflect solution.

Hi all I'm trying to animate the "writing" of random text on repeat. Here's what I came up with so far: gsap.to('#text', {duration:10, repeat:-1, repeatRefresh:true, text:{value:rndstr(27)}}) rndstr(x) is a custom function that returns a random string of lenght x. This works fine the first time it's running (it fills the div with a random 27-char string as expected, however it doesn't seem to repeat (or at least it won't fetch a new string on repeat). Is my use of "repeatRefresh" not sufficient to have gsap fetch a new string? What am I missing?