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!