Jump to content
Search Community

Animated waves effect

pati test
Moderator Tag

Go to solution Solved by PointC,

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

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