Jump to content
peacepostman

SVG wave animation

Recommended Posts

Hello,

 

I've adapted an existant codepen to a jquery plugin in order to animate a svg into a random wave effect. I managed to use tweenMax in order to smooth the animation but i dont know if i've done that properly or if something can be improved or re-writed in a more clever way.

 

Feel free to copy the jquery plugin if you need it :)

 

Best regards,

See the Pen jBavvN by peacepostman (@peacepostman) on CodePen

  • Like 5

Share this post


Link to post
Share on other sites

Hello peacepostman, and welcome to the GreenSock Forum!

 

Thank you for sharing this! I would just change a couple things, which are just minor observations.

 

On Line 56 change this where you use jQuery attr() method:

wave.attr('fill', settings.color);

To this using GSAP set() method so it can record that initial value.

TweenLite.set(wave, {attr:{fill: settings.color}});

When you use jQuery attr() method to set the fill you are setting it outside of GSAP. Its always best to set with GSAP ;)

 

GSAP set() method: https://greensock.com/docs/#/HTML5/GSAP/TweenLite/set/

 

Also instead of just using the resize() event you can make it so you do a resize with debounce and throttle. So this way your resize event doesn't fire multiple times which can cause layout thrashing.

 

See the following:

 

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

https://www.html5rocks.com/en/tutorials/speed/animations/

https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

 

Other than that, Great job and thanks again for sharing!

 

Happy Tweening :)

  • Like 4

Share this post


Link to post
Share on other sites

Thanks for your feedback, i've edited the codepen in order to apply your suggestion. My main concern was around the draw() function, i was asking myself if there was a way to avoid calling requestAnimationFrame(draw) and do it with a pure tweenMax alternative.

 

Thanks again for your feedback :)

Share this post


Link to post
Share on other sites

Nice job, PeacePostman. Had fun adjusting the values and seeing the results. Thanks for the contribution!

  • Like 1

Share this post


Link to post
Share on other sites

Very nice peacepostman. Thanks for sharing.

 

For some reason we've had several wave questions around here lately so I think this could be really helpful. 

 

Happy tweening and waving.

:)

  • Like 2

Share this post


Link to post
Share on other sites

I'm glad this pen could spread joy around the world :D

 

I've updated the pen to implement a native debounce function, it is way better when resizing, thanks @Jonathan

 

Nevertheless i'm more than interested of finding a way to optimize the animation. Im encountering bad slow down on mac using Firefox or Safari. Chrome is doing just fine but together we are better so if someone has an idea, please share :)

  • Like 1

Share this post


Link to post
Share on other sites

Hello again peacepostman,

 

Have you looked at the GSAP MorphSVGPlugin it does all the hard work for you.

 

MorphSVGPlugin usage:

 

https://greensock.com/morphSVG

 

MorphSVGPlugin Docs:

 

https://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

 

MorphSVGPlugin is a bonus plugin for all Club GreenSock members.

 

Try MorphSVGPlugin for free on Codepen!

 

http://codepen.io/collection/naMaNQ/#

 

:)

  • Like 2

Share this post


Link to post
Share on other sites

Hi @peacepostman,

 

Looks like you're using some code from this Paper.js example:-)

 

To animate sine waves, you can use a Sine.easeInOut ease along with some other optional eases. Check out this post...

https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401

 

But rendering stuff with SVG can be slow. Canvas drawing commands are hardware accelerated, so that might be a better option. Check out this version. You can add as many waves as you want, and even animate stuff like the height and amplitude of each wave. Sine is cyclic going from -1 to 1, so that's what I'm using for the y-value in my points. And check out the wave resizing. It's throttled by the ticker.

 

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

 

  • Like 5

Share this post


Link to post
Share on other sites

Hi @OSUblake,

 

Wow that's an epic codepen you bring here :D

 

I like it, i miss the chaotic random wave effect but the smoothness is real !

 

Didn't know about paperJS, i found a codepen which was probably copy from this lib too, ahh internet :)

 

Anyway, thanks for your reply, i will try to build something smoother upon it.

  • Like 1

Share this post


Link to post
Share on other sites

One thing PaperJS excels in is making smooth curves. Did you see this example? Move your mouse around. Now that's a nice wave!

http://paperjs.org/examples/future-splash/

 

The algorithm to draw a smooth curve like is pretty complicated, but you can get close to that using only GSAP. The BezierPlugin.bezierThrough() method can draw pretty decent curves. Check this out.

 

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

 

And you can still get some chaotic motion going on using a secondary/custom ease. I didn't include that feature in the canvas demo, but I show how to do that in the post I linked to. Chris Gannon took that to the extreme in this demo. Everytime you click, it generates a random type of wave. 

 

See the Pen dOEGwv by chrisgannon (@chrisgannon) on CodePen

 

.

  • Like 4

Share this post


Link to post
Share on other sites

Hi,

 

Waves over waves ...

 

An inspiration for me to practice this animation:  

See the Pen EmjdEX by mikeK (@mikeK) on CodePen

 

Paper.js (great examples) and canvas are highly interesting - but not yet (= for years) my level.

 

Manfred

  • Like 3

Share this post


Link to post
Share on other sites

That's pretty good! I was kind of waiting for the person to drown.

  • Like 3

Share this post


Link to post
Share on other sites

Hi Blake,

 

in that case you should better set the process on reverse.

 

We all can find a lot of buttons to click - in real life.

 

All the best  ...

 

Manfred

Share this post


Link to post
Share on other sites

Great work on this @peacepostman !

 

I'm trying to modify this to have the curve path on the side of the wave instead of on the top. Something like the attached screenshot. Any ideas how to modify the existing plugin to achieve this?

 

Much appreciated!

 

Graham

Screen Shot 2017-05-15 at 7.01.11 PM.png

Share this post


Link to post
Share on other sites

@grahamd Hello and thanks for your feedback :D

 

To reproduce your desired effect you have in my opinion two solutions. 

 

First the easy one : rotate .wave in my codepen with the following css rule 

 

.wave {
  transform: rotate(-90deg); 
}

 

Second one, the tricky but proper one, alter the javascript in order to affect the wave on the X axis and not on the Y axis. If you make this changes on the javascript sides, please submit me a PR on github (https://github.com/peacepostman/wavify)

 

Good luck !

  • Like 1

Share this post


Link to post
Share on other sites

lovestoned,

 

it appears the climber wave effect is just 2 wave shapes moving vertically at the same time in opposing horizontal directions.

 

watch this gif loop closely

waves.gif

 

I drew 2 scrappy wave shapes in illustrator to illustrate:

 

tl.to("#wave", 3, {x:-1600, y:-1200, repeat:100, yoyo:true, ease:Linear.easeNone})
.to("#wave2", 3, {x:1600, y:-1200, repeat:100, yoyo:true, ease:Linear.easeNone}, 0)

 

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

 

I think if you take the time to draw better, more consistent waves you can get the same results as climber

  • Like 2

Share this post


Link to post
Share on other sites
On 27/03/2017 at 9:18 AM, OSUblake said:

Hi @peacepostman,

 

Looks like you're using some code from this Paper.js example:-)

 

To animate sine waves, you can use a Sine.easeInOut ease along with some other optional eases. Check out this post...

https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401.

 

 

 

Is it possible to make this effect circles? I'd love to animate something a bit like this. If not I'm gonna try the morph SVG way :D

 

 

See the Pen WMzvxE by smallio (@smallio) on CodePen

 

 

Share this post


Link to post
Share on other sites

Hi @smallio

 

Are you trying to do that with SVG or canvas? Either way, the path needs to be closed. This demo is setup for SVG, but it show how to make a smooth, closed path with a Catmull-Rom curve.

 

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

 

 

  • Like 3

Share this post


Link to post
Share on other sites
15 minutes ago, OSUblake said:

Hi @smallio

 

Are you trying to do that with SVG or canvas? Either way, the path needs to be closed. This demo is setup for SVG, but it show how to make a smooth, closed path with a Catmull-Rom curve.

 

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

 

Damn, that's crazy. I was actually looking to adapt your waves plugin to work on svg circles. I love the pen you just posted, but I feel I'm not quite at the level yet to be able to then adapt that to a circle *googles catmull rom* 

 

I'm a designer in my first year of learning JS which gets frustrating because I can do this easily in after effects, yet when I look at the code you've written on this example I feel like a lost child. I'm unworthy of your logic atm senpai, sorry :(

 

Can that first waves plugin adapt to circles? If not I guess i can just make it via after effects then export as json and whack it in a timeline. I guess I just like trying to do things the hard way to learn faster, aha :)

 

 

  • Like 1

Share this post


Link to post
Share on other sites
44 minutes ago, smallio said:

I'm a designer in my first year of learning JS which gets frustrating because I can do this easily in after effects, yet when I look at the code you've written on this example I feel like a lost child. I'm unworthy of your logic atm senpai, sorry :(

 

That made me chuckle a bit because I feel your pain @smallio.  I've been using GSAP and JS for a few years now and I'm much better than I used to be, but I'm also still in awe of @OSUblake. At least I can now read his alien language. :D

 

I have more experience in After Effects just like you so I know exactly how you're feeling some days. You're on the right track though. Just try to learn a little bit each day and you'll start to feel more confident and knowledgeable as time goes by. I promise you'll start to have more and more 'ah-ha' moments and things will really start clicking. If you've never read my 1 year anniversary post, it may give you some encouragement.

 

Good luck and happy tweening.

:)

 

  • Like 2
  • Haha 1

Share this post


Link to post
Share on other sites

Well, I wouldn't expect anybody to understand how those catmull rom functions work unless they're really good at math. Good news though, I already did the hard part for you. So it's really an exercise in trusting me, copying and pasting the code, and then calling one of those functions on every update from something like a timeline.

 

path.setAttribute("d", cardinal(points, true));

 

 

I'll make a demo with a circle, but the major concepts will based on this thread. Animating an array of points.

 

 

 

  • Like 4

Share this post


Link to post
Share on other sites

How's this @smallio

 

Create your blob like so. The options should be easy enough to understand.

 

var blob1 = createBlob({
  element: document.querySelector("#path1"),
  numPoints: 20,
  centerX: 500,
  centerY: 500,
  minRadius: 300,
  maxRadius: 325,
  minDuration: 1,
  maxDuration: 2
});

 

 

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

 

 

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites
1 hour ago, OSUblake said:

How's this @smallio

 

Create your blob like so. The options should be easy enough to understand.

 

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

 

 

 

Your a god holy cow. Thank you so much! Now it's in context it makes total sense. I'm gonna study the heck out of this code. Just wondering how long have you been using JS and what's your background in math?

 

1 hour ago, PointC said:

 

That made me chuckle a bit because I feel your pain @smallio.  I've been using GSAP and JS for a few years now and I'm much better than I used to be, but I'm also still in awe of @OSUblake. At least I can now read his alien language. :D

 

I have more experience in After Effects just like you so I know exactly how you're feeling some days. You're on the right track though. Just try to learn a little bit each day and you'll start to feel more confident and knowledgeable as time goes by. I promise you'll start to have more and more 'ah-ha' moments and things will really start clicking. If you've never read my 1 year anniversary post, it may give you some encouragement.

 

 

 

Aha thanks @PointC. My day will come I promise :) I'm putting in the hours so hopefully with the help of my pet Rosetta Stone I might be able to start deciphering some of this. Funnily enough your post actually inspired me to take GASP seriously! Big love from the UK man. Can't say enough about how cool this forum is, I just can't wait to be able to give back on here.

  • Like 2

Share this post


Link to post
Share on other sites

I've been using JS for like 8 years. I started out making games with canvas, which I think really helped me out. Once you understand JS better, it's more about problem solving than anything else.

 

Some people think I'm really good at math, and I don't know how to respond to that. Maybe at one point in time. I took a lot of math classes in college, but I also forgot everything. Almost all of the math I use revolves around a couple trig functions and the Pythagorean theorem, and I've used them enough to where they are burned into my memory.

 

When I need a refresher, I turn to Keith Peters and his coding math videos. He uses canvas, but the concepts will work the same with HTML and SVG.

https://www.youtube.com/user/codingmath/videos

 

Here's some really good advice on math and JavaScript. You don't have to be a whiz, you just need to know how to google. 

https://codepen.io/rachsmith/post/hack-physics-and-javascript-part-3-springs-and-some-other-things

 

And don't be afraid to experiment. Everybody writes bad code, and everybody starts out at the same level. I was a total n00b at one point in time.

  • Like 6

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.