Jump to content


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%"});


Link to comment
Share on other sites

ah neat! thanks working great. 

Link to comment
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.



Link to comment
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

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