gareth Posted November 19, 2020 Share Posted November 19, 2020 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 More sharing options...
Carl Posted November 19, 2020 Share Posted November 19, 2020 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 Link to comment Share on other sites More sharing options...
gareth Posted November 19, 2020 Author Share Posted November 19, 2020 ah neat! thanks working great. Link to comment Share on other sites More sharing options...
PMWLTD Posted August 22, 2021 Share Posted August 22, 2021 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! Link to comment Share on other sites More sharing options...
Carl Posted August 22, 2021 Share Posted August 22, 2021 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now