Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Giuliano Maria Lodi

Wave animation with gsap

Go to solution Solved by akapowl,

Recommended Posts

Hi, I'm trying to create an animation where the effect should be similar to waves appearing from the center in a loop like this example. 

 

I tried to put together an animation with gsap but I'm not succeeding on doing it.

Maybe someone can point me to the right direction to follow.

 

The animation should be similar to this one https://www.instagram.com/p/CJrYX60AYqS/

 

Thank in advance for your help...

See the Pen VwPOyQg by giulianomlodi (@giulianomlodi) on CodePen

Link to post
Share on other sites

Hi,

 

I honestly don't know how to achieve that with SVG, perhaps our svg wizards @Cassie and @PointC could share some wisdom on the subject.

 

I know that this could be achieved with PIXI and the displacement filter, using WebGL:

See the Pen 94c6a32a3faa30808dc507b1fa809d74?editors=0010 by rhernando (@rhernando) on CodePen

 

This is the image the displacement map uses to create the effect:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/ripple-03.png

 

https://en.wikipedia.org/wiki/Displacement_mapping

 

Happy Tweening!!!

  • Like 3
Link to post
Share on other sites

 

Hello Giuliano,

 

I think it is all about the initial setup with that animation - I took the two 'frames' mentioned in that Instagram post as guidelines here - frame 1 for the initial setup and frame 2 as an indicator where to scale the cirlces to.

 

Of course you'd have to style your SVG so it has that neumorphism look to it, but animation-wise this seems to come pretty close.

I added some circles with borders to it just to have a better visual clue.

 

Don't stare at it for too long, though 😅

 

See the Pen 66bdcb34358ddd62f1a6091b7bc8048a by akapowl (@akapowl) on CodePen

 

  • Like 5
  • Thanks 1
Link to post
Share on other sites

That's GREAT man! Thank you so much! 

I would like to hug you right now! Have a great day you help me learn a lot

  • Like 1
Link to post
Share on other sites
8 hours ago, Rodrigo said:

I honestly don't know how to achieve that with SVG, perhaps our svg wizards @Cassie and @PointC could share some wisdom on the subject.

 

How come I didn't make the list? I've been making SVG waves since 2015.

 

See the Pen WQyBJb by osublake (@osublake) on CodePen

 

 

 

 

  • Like 2
Link to post
Share on other sites
18 minutes ago, OSUblake said:

How come I didn't make the list? I've been making SVG waves since 2015.

DOH!!!! Just ignorance on my end my fried.

 

Although in my list you're our Canvas/PIXI/WebGL wizard and also on other categories as well :D:D:D

  • Like 2
Link to post
Share on other sites
10 hours ago, Rodrigo said:

Although in my list you're our Canvas/PIXI/WebGL wizard and also on other categories as well :D:D:D

 

I originally made that ripple/wave animation in Pixi, but then I stumbled across a site that showed how SVG filters work basically the same, so it was pretty easy to convert.

 

http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm

http://srufaculty.sru.edu/david.dailey/svg/newstuff/Newlist.htm

http://srufaculty.sru.edu/david.dailey/svg/texture/texturepage.htm

 

 

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

×