# Random duration to each element

## Recommended Posts

I have a series of svg ellipse's that I want to rotate at diffrent speeds, I thought I could do this, but I guess this just picks a random duration for all of them?

`gsap.to("#rad ellipse", {rotation: 360, duration:"random(140, 1500)",repeat:-1,transformOrigin:"50% 50%"});`

##### Share on other sites

the trick here is to use function-based values. the demo below shows random duration and x value for each bug

See the Pen yLJWgdy?editors=1010 by snorkltv (@snorkltv) on CodePen

• 4
##### Share on other sites

ah neat! thanks working great.

##### Share on other sites

• 9 months later...

Is there any good solution to the following:

I have an exploding particle system (I can't use canvas because it's a 3d scene and needs to coincide with CSS perspective of the page).

The values x and z are being animated, but they are interpendent. So I can't do something like {x: () => randomFunction(), y () => randomFunctionTwo()}

Basically each particle moves in a random direction, but the distance is constant. So x and z  are calculated using trignonometry based on that random angle. I originally had it set up that individual particles were individually animated. I'm trying to group them in with stagger to hopefully save the cost of destroy and re-creating elements. But it seems that I can't get "x" and "z" to talk to each other if I'm grouping them all with stagger.

Wonder if GSAP has some hidden feature I don't know about.

Thanks!

##### Share on other sites

hi and welcome to the GreenSock forums,

The demo below is from one of my courses. Feel free to study and borrow what you need.

The basics idea is that 2 tweens are created using the same duration. One of them has an onComplete that passes the target into a function that creates a new set of tweens.

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

• 3