Jump to content
Search Community

Liquify Filter on image effect

robertox85 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites


@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

Link to comment
Share on other sites

Interesting discussion. *

 

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

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.

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

  • Like 1
Link to comment
Share on other sites

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

Interesting discussion. *

 

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

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.

* @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.

Link to comment
Share on other sites

As yourself and others have mentioned you can use libraries like Three.js, Pixi.js, Babylon.js, TWGL.js, Curtains.js, etc., etc. I suggest that you pick one, learn it and run with it. Let them do the heavy logic unless you are prepared to take a generalized deep dive and potentially reinvent the wheel. Either way there is gonna be a learning experience ahead of you. But in doing so it will open your possibilities for development and creativeness going forward. So don't get discouraged and press onward.

 

The following tutorial might help you learn some things for the effect using Three.js, you may also find the site helpful overall.

https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/

 

GSAP of course can animate most anything on its own. But if you were not aware GSAP has an official Pixi plugin and an unofficial plugin for Three.js. Each of those might help you at some point on your journey. Most of this topic however is beyond the direct scope of GSAP and this forum. If you have specific GSAP questions members are always of course happy to assist. You can also consider hiring someone through the Jobs & Freelance section if that would become necessary to achieve what you are after.

 

You should now have plenty of materials that you can move forward with. Best wishes with your project also welcome to the forum. 😉

  • Like 8
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...