Liquify effect with GSAP

[emilychews 17 Likes (Newbie)]

Hi,

 

It is possible with Greensock to create something similar to this:

 

https://www.studiotreble.com/

 

From what I know GSAP doesn't do effects and filters? I've looked at pixi.js this morning, but I don't really want to have over 400kb of JS for one effect and I am a bit pushed in terms of learning an entirely new library (I'm currently having to learn React / Vue as well). And besides I love Greensock and find it to be the only library where the learning is actually fun.

 

Is a liquid animation effect possible with just SVG / Greensock? Or does anyone have any pointers how to learn this natively (would it fall under webGL? Which is something I haven't really looked at yet).

Thanks in advance for any tips or pointers.

Emily

[PointC 8,599 Likes (Superhero)]

You could possibly use a displacement filter with a SVG, but Pixi would be my recommendation. Blake has a few nice examples here:

 

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

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

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

Happy tweening.

 

[Dipscom 2,815 Likes (Superhero)]

On 3/11/2019 at 4:45 PM, emilychews said:

Is a liquid animation effect possible with just SVG / Greensock? Or does anyone have any pointers how to learn this natively (would it fall under webGL? Which is something I haven't really looked at yet).

 

Hi Emily,

 

For that sort of effect your best choice is webGL but unless you go on and write the shaders yourself you will be having to include a library to handle it, like Pixi or ThreeJS.

 

You can, of course, still build it natively with just Canvas and the WebGL context but it will be quite hard and a steep learning curve. In another words, you are in between a rock and a hard place if you must get this effect going.

[bdrtsky 29 Likes (Newbie)]

Take a look at this - https://tympanus.net/codrops/2019/03/12/image-distortion-effects-with-svg-filters/

 

Pure SVG filters. I believe this is maximum that you can get from SVG. But, to tell the truth effect is not so smooth as with WebGL, and it makes my CPU fry. I wouldn't use it in production.

[emilychews 17 Likes (Newbie)]

Thanks for the pointers.