Jump to content
Search Community

SVG Sine Wave - emulate audio equalizer

tsimenis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

 

  • Like 5
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 6 years later...
On 4/24/2017 at 8:16 PM, OSUblake said:

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...

 

 

 

Hey Blake, how would i go about replicating this with react?

Link to comment
Share on other sites

Hi @qgatss and welcome to the GSAP Forums!

 

The first thing you should check is our Documentation regarding using GSAP in React environments:

https://gsap.com/resources/React

 

The rest is just about when and where exactly (react-wise that is) you should call your JS code.

 

If you have a GSAP related question/issue, be sure to create a minimal demo so we can take a better look. You can use one of our starter templates on Stackblitz:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

5 hours ago, Rodrigo said:

Hi @qgatss and welcome to the GSAP Forums!

 

The first thing you should check is our Documentation regarding using GSAP in React environments:

https://gsap.com/resources/React

 

The rest is just about when and where exactly (react-wise that is) you should call your JS code.

 

If you have a GSAP related question/issue, be sure to create a minimal demo so we can take a better look. You can use one of our starter templates on Stackblitz:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Hopefully this helps.

Happy Tweening!

I'm trying to create this animation in a button, the ideal goal would be to call this animation on click, it will be used to toggle the background sound of my site. Right now i've been able to replicate the animation but it doesn't quite fit in the button and looks weird. I'll really appreciate some help.

 

See the Pen qBvPegB by qgatss (@qgatss) on CodePen

Link to comment
Share on other sites

15 minutes ago, qgatss said:

Right now i've been able to replicate the animation but it doesn't quite fit in the button and looks weird.

Yeah, this looks more like an SVG/setup issue rather than a GSAP related one. This kind of looks better but I'm not really well versed in SVG to give you a better solution:

See the Pen ZEPaEWO by GreenSock (@GreenSock) on CodePen

 

The few things I can notice is your SVG's viewbox is not defined. That's always a good idea as far as I know plus the fact that you need more segments for creating a softer line and less frequency to make it work better. Beyond that there is not a lot I can add. Sorry I can't be of more assistance.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

36 minutes ago, Rodrigo said:

Yeah, this looks more like an SVG/setup issue rather than a GSAP related one. This kind of looks better but I'm not really well versed in SVG to give you a better solution:

 

 

 

The few things I can notice is your SVG's viewbox is not defined. That's always a good idea as far as I know plus the fact that you need more segments for creating a softer line and less frequency to make it work better. Beyond that there is not a lot I can add. Sorry I can't be of more assistance.

 

Hopefully this helps.

Happy Tweening!

Thank you Rodrigo, i'm trying to tweak it to my taste. The wave line is currently joining together on my local, it's the exact same code. Do you know what might be wrong?

Screenshot 2024-01-25 at 11.09.44 PM.png

Screenshot 2024-01-25 at 11.12.17 PM.png

Link to comment
Share on other sites

Sorry, an image doesn't really tell me anything.

 

As I mentioned before this is more about the SVG setup, viewbox, path dimensions, etc. You should focus on that first and then add GSAP to the mix.

 

This remains solely an SVG issue, IMHO at least.

 

Good luck with your project!

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.
×
×
  • Create New...