Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pati

Animated waves effect

Recommended Posts

Hi PointC,

Yes, I've read that article before but I don't know how to apply it to my code... I am just starting with Greensock. 

 

This is what I have at the moment (JS is the one that you just told me):

See the Pen jBwGWY by sonder15478 (@sonder15478) on CodePen

 

Thank you

Link to post
Share on other sites

Hi Sonder,

 

Blake´s wave is a perfect one and super coded.

 

If you want play around with individual waves: 

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

 

Please feel free to

  • clone the SVG wave,
  • vary color and
  • timing and starting,
  • horizontal and vertical animation
  • and easing

Happy tweening

  • Like 3
Link to post
Share on other sites

Yes, I've read that article before but I don't know how to apply it to my code... I am just starting with Greensock. 

If you're just starting with GSAP (& possibly JavaScript?), that pen of Blake's may be a little confusing. mikel has a nice demo for you in his answer and you may also want to look at Dipscom's answer in this thread about animating the points of a SVG.

 

https://greensock.com/forums/topic/15603-getting-control-points-of-a-wave-svg-and-use-it/

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 1
Link to post
Share on other sites

Hi sonder  :)

 

We've had a similar discussion and Blake had a terrific answer here:

 

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

 

I think that should help you.

 

Happy tweening.

:)

 

Hi PointC,

I'm actually working with the first code that you suggested me and I am very close to get what I need. There's only one thing left that I am not able to do...

Do you know hoy can I modify this wave: 

See the Pen 7c235b8b3c2d9bb6cecea6acfff7ff37 by osublake (@osublake) on CodePen

to look much smaller? The width and height? I would like to look like the image attached...

 

Sorry I'm just learning JS

 

Thank you for your help

post-51501-0-06337700-1489426111_thumb.jpg

Link to post
Share on other sites

You can change the size of the SVG and then adjust the width, amplitude and frequency variables to your liking. Here's a quick fork of Blake's pen with a much smaller wave.

 

See the Pen GWExMG by PointC (@PointC) on CodePen

 

Happy tweening.

:) 

  • Like 2
Link to post
Share on other sites

You just saved my day PointC! Thank you very much!!

  • Like 2
Link to post
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.

×