Animated waveform

[Black Ducas]

Hi friends

I need your help. I need to create an animated waveform, this one:  

 

 

There's some flexibility so the 3 shape can be symmetric respect the axis X (like the 3 red oval I draw on it).

The little bars that make up the shapes have the height animated randomly but not too much so we can recognize the oval shapes.

(In a step 2: we need to do an animated transition the reduce the amplitude of the shapes).

 

I know I should post a minimal codepen but I really have some hard time to get what's the way to do it.

Please, someone that give me an idea?

Thanks

 

 

[Cassie]

Heya!

 

Maybe this pen by @OSUblake will help set you in a good direction?

See the Pen gOMKNmx?editors=0010 by GreenSock (@GreenSock) on CodePen

If you set up a rough codepen with the bars (maybe SVG) we can take a look at it - it could possibly be achieved with some staggering and the right ease? Maybe someone more maths-y can jump in though.

[Black Ducas]

11 hours ago, Cassie said:

Heya!

 

Maybe this pen by @OSUblake will help set you in a good direction?
 

 

If you set up a rough codepen with the bars (maybe SVG) we can take a look at it - it could possibly be achieved with some staggering and the right ease? Maybe someone more maths-y can jump in though.

 

 

 

Hi @Cassie

Thanks for the help. I already saw that codepen but the animation I have to do is completely different. I have these bars (that are separated elements) that should animate changing their height randomly but keeping the oval shapes. My thought brought me to see this animation as animating separately those bars but I really don't know if it makes sense! Any idea?

Here is a codepen with the SVG so you can see what I mean:

 

See the Pen ZEXKKGX by gooogooo (@gooogooo) on CodePen

 

Thanks

[Cassie]

So this is actually working similarly to the pen I linked to . Blake's pen has lots of 'points'  which are set touching each other so that it looks like a line.

This one had SVG ellipses, spaced apart. But both of them are using easing curves to create a sine wave.

The one thing I noticed in your graphic is that the center of origin is different for each of the shapes - it also kind of forms a wave. I tried to implement that too but it's not quite right. Probably needs some math. 🙃

 

Should be a start though.

FYI - you don't need SVG.js here I just used it to quickly set up some lines

See the Pen rNGmYrN?editors=0111 by GreenSock (@GreenSock) on CodePen