Jump to content


Animate Wave On Hover

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

Does anyone have advice on animating the svg in this codepen?



Basically I want to use it as a menu hover effect where when the button is hovered, the wave animates somewhat like this sine example I found:


See the Pen jgxqwx by samandalso (@samandalso) on CodePen


I understand this svg is not really 'even' like the one in the example I found, but want to find out if this is possible or if I should go another route.





See the Pen bXMpWY by samandalso (@samandalso) on CodePen

Link to comment
Share on other sites

Hey sammyg,


There are a couple different ways to do something like this. I'll list the ones I can think of:

  • Put it in a container that has overflow:hidden. Then you can either use a background image and background-repeat along with a translation or make the wave symmetric and a translate of a portion of the wave's width (enough to make it match the next wave).
  • Do the same basic technique but have it completely in SVG (check out this post or if you want something more complex this one).
  • Like 4
Link to comment
Share on other sites

Hey @sammyg,


Waves are welcome guests here in the GreenSock Forum ...


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


Happy tweening ...




  • Like 4
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.