mado1 Posted June 7, 2020 Share Posted June 7, 2020 Hello, I am trying to create an effect as in the gif below. I've searched all over the 'ol internet but cannot figure it out. How can I randomize it for all dots though? See the Pen bGEdaLB by monsmado (@monsmado) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted June 7, 2020 Share Posted June 7, 2020 Hey @mado1, The classic from @OSUblake: Animate our properties individually See the Pen BRpgpR?editors=1010 by osublake (@osublake) on CodePen See the Pen 98fe725351a56836078b8ef60bb1d573?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
mado1 Posted June 7, 2020 Author Share Posted June 7, 2020 Thank you @mikel, That was exactly what I was looking for. Sometimes it's hard to find what you're looking, especially if the effect does not have a very defined name. But this will help me a lot. 1 Link to comment Share on other sites More sharing options...
mado1 Posted June 7, 2020 Author Share Posted June 7, 2020 Quick question though, In your example you use utils.toArray("circle") To target <circle cx="50" cy="50"/> <circle cx="100" cy="80"/> etc. How can I target only circles that have a class or id? for example:<circle id="circleS" cx="100" cy="80"/> <circle id="circleS" cx="200" cy="120"/> <circle cx="300" cy="50"/> <circle cx="300" cy="130"/> <circle cx="250" cy="100"/> Never mind, just add #circle to utils.toArray("circle") 1 Link to comment Share on other sites More sharing options...
mado1 Posted June 7, 2020 Author Share Posted June 7, 2020 Hello @mikel, How can I make it more floating/hovering in your example the dots move around the x and y one after each other. In the example they float more and move around the z and y simultaneously. Link to comment Share on other sites More sharing options...
mikel Posted June 8, 2020 Share Posted June 8, 2020 Hey MADO1, Take a close look at the code: the key is the tweenProperty function, which generates an individual, randomized tween (for all props plus duration and delay) for each target and that in a loop (onComplete: tweenProperty), each time with new ones min / max values. 1 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