Jump to content
Search Community

Wave animation with gsap

Giuliano Maria Lodi test
Moderator Tag

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

  • Like 1
Link to comment
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 comment
Share on other sites

  • Solution

 

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