Jump to content
GreenSock

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

How to develop SineWave Animation manually with GSAP without Club access

Recommended Posts

Hi.

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

 

https://bannerwave.com/

 

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.

 

Thanks.

Link to comment
Share on other sites

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

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

 

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

My two cents ... using the onUpdate callback of a to() tween

 

Here is one just a simple sine wave

 

See the Pen lFiBt by jonathan (@jonathan) on CodePen

 

And this one like an EKG sine wave

 

See the Pen cqvJe by jonathan (@jonathan) on CodePen

 

:)

  • Like 1
Link to comment
Share on other sites

I really like that EKG demo Sir Jonathan. Nice!

:)

Link to comment
Share on other sites

You are very nice and best guys. Thanks. I love gsap not only for best performance, for best help forum.

  • Like 2
Link to comment
Share on other sites

Thank you Craig .. I miss the good old days of onUpdate! But Jack made it more simple, by creating DrawSVG. :)

  • Like 2
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.
×