SVG Sine Wave - emulate audio equalizer

[tsimenis 10 Likes (Newbie)]

Hi guys, 

 

this is the first time I write to the forum, mostly because I've always found really helpful topics in the past.

I want to create an svg animation that will resemble an audio equalizer, with some random spikes on the curves and be able to control the timeline. It needs to start with a straight line animate to some curves and return to a straight line.

The effect I would be going for would be similar to this https://www.youtube.com/watch?v=bpOSxM0rNPM (does not need to be 100% same of course )

 

My initial tryout was to use the MorphSVG plugin, which seems to be close to what I want but I am not 100% sure, I mean it looks ok but that's it, you can see it here 

 

But then I found this example from @OSUblake

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

as well as this post that explains how it works https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401 and it looks really awesome and smooth. 

 

The thing is though that I don't know if there is any way to modify this example to create a timeline in which I will be able to change the amplitude/frequency, or should I stick to morphSVG? 

 

Any help/advice would be highly appreciated, thanks!

See the Pen yMzWwv by tsimenis (@tsimenis) on CodePen

[Carl 11,325 Likes (Superhero)]

Welcome to the forums.

 

My gut instinct would be that MorphSVG would be the way to go for this. Nice job on your example.

I suspect that all of the point tweens Blake is creating could be thrown into a timeline, and you would have all the control you need. I'm not exactly sure how that would look but I have a hunch he may offer some advice.

[OSUblake 18,534 Likes (Superhero)]

Hi @tsimenis,

 

The waves in that video work a little different than the demos I posted, but can definitely be done. You just need to change how the values get set on the point as the amplitude is being modified. I don't have time right now, but I'll make a demo for you later.

 

 

.

[tsimenis 10 Likes (Newbie)]

Hey @OSUblake,

 

thank you for your reply.

Yeah it doesn't need to be the same as in the video. I just want to have an effect as a beat or pulsing sine ( similar to my codepen but better, if I am making any sense )

 

If you could make a demo it would be awesome!

 

thanks again

[OSUblake 18,534 Likes (Superhero)]

I didn't forget about you. Just kind of busy.

 

Understanding how this animation works is relatively easy. Everything is essentially a ratio, a percent in the range of [0,1]. Even Sine is a ratio, but is in the range of [-1,1]. No matter what number you put into Sine, it will return a number in that range, which is where the up and down motion comes from. The contour of a wave can be created by using a CustomEase, getting a ratio from it, and multiplying it by the height and Sine ratio. 

 

Just a little example of what's possible...

 

See the Pen VbKXyz by osublake (@osublake) on CodePen

 

 

[tsimenis 10 Likes (Newbie)]

This is amazing work Blake!

 

Well it is easy for you to say... I had quite a few new things to learn from your example ( e.g. the ticker listener ) but I am deconstructing it and I'll get to the result I wanted soon. 

 

Before your reply I was working on your initial codepen with modifiers plugin to change to the y value of a point based on a value I was tweening ( from 0 to 1 ). But your example is way better.  

 

I will post here my finished results as soon as I have time, both my first attempt and the final version, for anyone to see. 

 

Thanks again!

[OSUblake 18,534 Likes (Superhero)]

Yeah, the modifiers plugin will work great for animating the amplitude. Not so much for animating stuff like the frequency and different wave contours.

 

The example I just posted works pretty much same as the other one. The only real difference is how the points are set, which is done in the ticker callback. The ticker callback is called after GSAP updates everything, which in this case is just a simple JavaScript object. The reason for manually updating each individual point in the ticker is because there is no easy way to combine constantly changing amplitudes, frequencies, and wave contours in a single point tween. I initially tried it using the modifiers plugin, but it ended up creating a bunch of artifacts when there is a lot of motion.

 

If you need any more help, just ask.