How to make a wavy/floating animation on multiple elements

[mado1 9 Likes (Newbie)]

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

[mikel 4,775 Likes (Superhero)]

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

 

[mado1 9 Likes (Newbie)]

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.

[mado1 9 Likes (Newbie)]

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

[mado1 9 Likes (Newbie)]

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 

See the Pen bGEdaLB by monsmado (@monsmado) on CodePen

 they float more and move around the z and y simultaneously. 

[mikel 4,775 Likes (Superhero)]

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.