[Liquify Filter on image effect]

Thank u so much @Shrug ¯\_(ツ)_/¯ , and all of you guys. You have saved me hours and hours of research that would not have led me to the results obtained thanks to you and this forum. I will update you soon with my work.

[Liquify Filter on image effect]

glfx.js is very simple to use,  but I believe that gl-transition is much more performing. I'm trying to figure out how to implement it, I thought it was javascript but apparently it's something different and I don't find much on the documentation.

[Liquify Filter on image effect]

8 hours ago, Shrug ¯\_(ツ)_/¯ said:

Interesting discussion. *

 

You can find related examples on these two sites that you could animate with GSAP & ScrollTrigger.

• https://gl-transitions.com/editor/Swirl
• https://www.shadertoy.com/view/Xscyzn

I also recall an older library called glfx.js with such an effect, though I don’t remember seeing it mentioned on the forum before.

• https://evanw.github.io/glfx.js/demo/#swirl

* @OSUblake where are you?  ¯\_(ツ)_/¯

Thank you @Shrug ¯\_(ツ)_/¯! I think these examples are right for me. What I was looking for was exactly this effect called swirl. I will try to study it and adapt it to what I need, but still it seems the closest solution to my need.

[Liquify Filter on image effect]

@akapowl it's fun but it's not for me, I tried to insert two images as I imagined I would do but the result is not what I expected. Maybe this codepen that I'm studying could be my case but in this case it is a loop, I would only need to start with a distorted image and for the scroll to return to normal.

 

See the Pen XWdzdmO by robertox85 (@robertox85) on CodePen

[Liquify Filter on image effect]

Yes you are right. I hope to find a solution close to my need.

[Liquify Filter on image effect]

Thank u @ZachSaucier for your suggestion. But if I wanted to simplify by using two images, one with the filter applied and one original, and a library for morphing do you think I would get the same result?

[Liquify Filter on image effect]

Hi everyone, I'm looking for a way to replicate this effect of this website prototype. It seems like a liquify filter is applied to the images, and when the page scrolls the image is restored. I searched both on this forum and on google but I did not find solutions that could do for me. I'm not a javascript expert, I don't know how to reproduce it. I saw that beyond gsap there are libraries like webgl or curtains.js or pixi.js. Do you have any idea how this can be done? Thank you.

 

https://dribbble.com/shots/6749793-Supreme-Landing-Load-States