Liquify effect with PixiJS and Gsap

[SWALKER]

I am trying to implement a water effect with pixi.JS and GSAP

I have looked through all the similar questions on here and codepen but ,any are for slider and I just want one scene.

Essentially what I am trying to achieve is this (which I love):

https://tympanus.net/Development/LiquidDistortion/ 

Tutorial here
https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/

But NOT as a slider and with the amplified effect on page load not slide click.

I did actually manage to sort of get this working here  

https://staging-chfp.shereewalker.com/

But I really want the amplified effect that you get when you click to the next slide in the first link - but for this to happen on page load. So on page load it's intense but gradually dies down - though never stops moving. And even better it would speed up again (I think it's called 'wacky' in Pixi) when scrolling.

 

Even their 'non-amplified' wobble settings are better but I can't seem to replicate them. I could probably manage to strip out the slider but I can't get the intense wobble on page load or scroll.

I couldn't seem to get anywhere so I started again using the basic displacement filter demo in Pixi which is where I am at now in codepen. Oddly, when i try to add my own images, it doesn't work - but it does on my site.

I am okay with gsap and scrolltrigger and trying to get my head around Pixi, but I don't know how to merge the two together.

Any help would be greatly appreciated.

See the Pen dyarzXM?editors=1111 by shereewalker (@shereewalker) on CodePen.

[Rodrigo]

Hi,

 

Your codepen doesn't have any GSAP code in it

 

The demo from codrops you linked has a Github link on it that takes you to the code:

https://github.com/codrops/LiquidDistortion/tree/master

 

Here is the click part of one of the demos:

https://github.com/codrops/LiquidDistortion/blob/master/js/main.js#L349-L384

 

Here @OSUblake has a demo of PIXI's displacement filter using GSAP:

See the Pen gmPQWX by osublake (@osublake) on CodePen.

 

Finally when it comes to this type of things you always have to make sure that the images are loaded before creating the GSAP instances.

 

Hopefully this helps.

Happy Tweening!

[SWALKER]

Hi there,

This is amazing thank you - I haven't got it quite right but I'm getting there.

This is where I am at - on my dev site the image covers the whole thing but for some reason does not on my codepen.

See the Pen zYbMmzO by shereewalker (@shereewalker) on CodePen.

The only thing I cant replicate, is I want it to wobble more on page load then end up at the speed I have it - the same as the co-drops demo but on page load, not click. I also can't seem to get it seamless.

Also - sorry fr all the questions! But is there a way to do object-fit cover for a canvas? 

Any help would be  much appreciated!

Thanks
Sheree

[Rodrigo]

Hi Sheree,

 

I believe that you can create responsive elements with PIXI, but that's a question best fitted for PIXI's forums or discord channel rather than here

Discussions page on github:

https://github.com/pixijs/pixijs/discussions

 

PIXI's Discord channel:

https://discord.gg/CPTjeb28nH

 

To make the effect faster you have to make the duration of the displacement sprite smaller:

gsap.to(displacementSprite, {
  ease: "none",
  duration: 2.5,
  repeat: -1,
  x: 512,
  y: 512
});

Finally I strongly recommend you to switch to the latest versions of both GSAP and PIXI, since the demo you're using as a base is a bit old and out-dated.

 

Hopefully this helps.

Happy Tweening!