Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
robertox85

Liquify Filter on image effect

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 post
Share on other sites

Hey robertox85 and welcome to the GreenSock forums.

 

This sort of effect is done using WebGL, specifically fragment shaders in WebGL. I highly recommend curtains.js like you mentioned. If you need a custom fragment shader then it will take a good bit of learning because it's not the most trivial thing to write :) 

Link to post
Share on other sites

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?

Link to post
Share on other sites

You can't just "morph" two images. You could fade one in on top of the other. Or use clip paths or masks to do some effect. Or you could use some filter on an image. But anything past that you need to use a shader. 

Link to post
Share on other sites


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

Link to post
Share on other sites
2 hours ago, ZachSaucier said:

You can't just "morph" two images.

 

...unless you use Andreas Borgen's HyperMorph 3000™ 😋

 

 

See the Pen pZQRGB by Sphinxxxx (@Sphinxxxx) on CodePen

 

Note: Just kidding - Not Mine - And Sorry for crashing the thread - but I had to 😁

 

  • Like 4
  • Haha 2
Link to post
Share on other sites
2 hours ago, akapowl said:

...unless you use Andreas Borgen's HyperMorph 3000™ 😋

Animorphs_21_The_Threat.jpg

  • Haha 2
Link to post
Share on other sites

 

Got to the actual image via dev-tools.

Something's off with that image-link you were posting - or maybe you have a secret @ZachSaucier !? 

 

I'm glad, not everything from the US makes its way over to Europe 😅 ...not that I know of at least.

 

 

Link to post
Share on other sites
22 minutes ago, akapowl said:

Got to the actual image via dev-tools.

Something's off with that image-link you were posting - or maybe you have a secret @ZachSaucier !? 

I think I fixed the URL.

Link to post
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 post
Share on other sites

@robertox85

 

Maybe SVG-Filters ( displacement / turbulance ) could be a way to go for you:

 

See the Pen gqjqWr by danbrady (@danbrady) on CodePen

 

 

See the Pen ExjXvNG by Flothus (@Flothus) on CodePen

 

 

Also check this basic tutorial on youtube also using GSAP (although only v2.0.2) to animate the turbulance on images

 

 

 

  • Like 5
Link to post
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 post
Share on other sites
5 minutes ago, Shrug ¯\_(ツ)_/¯ said:

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

 

Well, I don't want to explain shaders, so the best I can recommend is to use something prebuilt. PIXI has a twist filter.

https://pixijs.io/pixi-filters/tools/demo/

 

You can animate the filter properties like the angle and radius.

 

  • Like 2
  • Haha 1
Link to post
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 post
Share on other sites

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.

Link to post
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 7
Link to post
Share on other sites

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.

  • Like 2
Link to post
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.

×