Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
remopini

Inconsistency between duration and rotate randomness

Go to solution Solved by Cassie,

Recommended Posts

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

Link to post
Share on other sites

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

 

  • Like 5
Link to post
Share on other sites

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

  • Like 3
Link to post
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.

×