Share Posted September 3, 2020 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 More sharing options...
Share Posted September 3, 2020 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 comment Share on other sites More sharing options...
Author Share Posted September 3, 2020 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 comment Share on other sites More sharing options...
Share Posted September 3, 2020 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 comment Share on other sites More sharing options...
Author Share Posted September 3, 2020 Yes you are right. I hope to find a solution close to my need. Link to comment Share on other sites More sharing options...
Share Posted September 3, 2020 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 😁 4 2 Link to comment Share on other sites More sharing options...
Share Posted September 3, 2020 2 hours ago, akapowl said: ...unless you use Andreas Borgen's HyperMorph 3000™ 😋 5 Link to comment Share on other sites More sharing options...
Share Posted September 3, 2020 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 comment Share on other sites More sharing options...
Share Posted September 3, 2020 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 comment Share on other sites More sharing options...
Author Share Posted September 4, 2020 @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 More sharing options...
Share Posted September 4, 2020 @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 6 Link to comment Share on other sites More sharing options...
Share Posted September 4, 2020 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? ¯\_(ツ)_/¯ 1 Link to comment Share on other sites More sharing options...
Share Posted September 4, 2020 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. 3 1 Link to comment Share on other sites More sharing options...
Author Share Posted September 5, 2020 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. Link to comment Share on other sites More sharing options...
Author Share Posted September 5, 2020 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 comment Share on other sites More sharing options...
Share Posted September 5, 2020 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. 😉 8 Link to comment Share on other sites More sharing options...
Author Share Posted September 8, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now