Liquid Distortion Slider in Next.js

[Ignacio Gramajo Feijoo]

Hi! I'm trying to make a Liquid Distortion Slider as the demo attached but in Next.js. The demo is made in HTML but in Next.js the library seems not to work in this environment and also seems to be deprecated. Reading the documentation they use GSAP, Pixi and Image Loader. I searched in the whole Internet but I couldn't find any thread or video explaining how to get this to work. Can you help me please? If someone can get this to work is GSAP Team! 😎

 

 

Thank you in advance!

See the Pen QWbLpzW by hmongouachon (@hmongouachon) on CodePen

[Rodrigo]

Hi @Ignacio Gramajo Feijoo and welcome to the GSAP Forums!

 

The heart of that demo is here:

https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/rgbKineticSlider.js

 

As you can see that is a lot of code and unfortunately we don't have the time resources to provide free general consulting or create complex solutions for our users.

 

For what I see that demo is using version 2 of GSAP and version 5 of PIXI, so I would strongly recommend using the latest versions.

 

Here is a GSAP Migration Guide:

https://gsap.com/resources/3-migration

 

This is how the displacement filter works in the latest version of PIXI:

https://pixijs.com/8.x/examples/filters-basic/displacement-map-flag

 

Finally in order to port this to Next/React, we have a useGSAP hook that is super handy:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!

[Ignacio Gramajo Feijoo]

Rodrigo! Thank you so much for your help! After seeing the resources you sent is a little more clear. If you have time would be a great help for lot of developers, I saw a lot search for this particular demo as well, could you show us how to combine GSAP and PIXI to create that effect on an Image Hover? Not the complete Slider but just that. And how to implement it in Next.js. Only if you have time of course, if not I understand!

 

Again, thank you very much!