Jump to content
Search Community

Gsap animation waves and distorsions

DD77 test
Moderator Tag

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 was wondering if anyone of you had a chace to see this website.  I have a project which will require some of those effects.
- play button which turns into a overlay?
- the effect on the image?

- the wave effect on the text?

Would be great to see if anyone had a chance to creat or see something like it before? Or so kind to share some demo?


Link to comment
Share on other sites

On 1/10/2018 at 10:38 AM, DD77 said:

@Jonathan thanks, yes I've seen it, but not sure I can replicate that with a hover state. Is it possible with gsap? 

I've seen this from @OSUblake https://codepen.io/osublake/pen/WQyBJb?editors=1010 but still on hover? is it possible?


What makes you think animating something on hover would be hard?


You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS.


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



If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. 


? AdjustmentFilter
? CRTFilter
? GlitchFilter
? ReflectionFilter
? KawaseBlurFilter

? RadialBlurFilter
? MotionBlurFilter
? OldFilmFilter 


Go through and play around with all the filters here. You should be able to find several filters that could be used for your project.




And to help out, GSAP has a plugin to make animating things in PixiJS much easier.


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




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