Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Black Ducas

Animated waveform

Recommended Posts

Hi friends

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

 

738498759_Frame15.thumb.jpg.21e6dafbf9085658f16eed1650929bff.jpg

 

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

 

 

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
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.
×