Jump to content
Search Community

How to develop SineWave Animation manually with GSAP without Club access

dalisoft test
Moderator Tag

Go to solution Solved by OSUblake,

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


I'm in last time seen some amazing wave SVG with some sine named function, i am interested. But i haven't Club access.




In header as you see this too made with GSAP, so i interested and will be thankful if someone create simple, cleaner codepen demo (please without GSAP premium plug-ins).


Second some wave sine amazing demo in GSAP morphSVG demo plug-in but not sure how to you're did it and how to use.



Link to comment
Share on other sites

  • Solution

Here's the demo for those waves. It looks pretty complicated.

See the Pen ZbOjRO?editors=0010 by waterfallmedia (@waterfallmedia) on CodePen


To create a real sine wave, check out this thread...



I used a polyline, but you can change it to polygon if you want it filled in.

See the Pen 957a0e49b1690d1946cba33e0e52f885?editors=0010 by osublake (@osublake) on CodePen


There's a bunch of different ways you can configure those waves. Chris Gannon came up some pretty nice variations.

See the Pen dOEGwv?editors=0010 by chrisgannon (@chrisgannon) on CodePen

See the Pen ZBabaY?editors=0010 by chrisgannon (@chrisgannon) on CodePen




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