Guest Posted October 4, 2022 Share Posted October 4, 2022 Hi!  This is my first post. I'm Luigi and I found out GSAP and this forum recently. 🙂  I want to reproduce the page transition animation triggered by the user when clicks on "Previous" or "Next" areas at this website: https://headline.vision/2022_08_29_B  Debugging the frontend code, I discovered that the animation was created with GSAP. So I started to search code snippets on websites such as Codepen but right now the most similar (but not enough for my desiderata) stuff I discovered it's this: https://greensock.com/forums/topic/17845-melting-background-animation  Do you know how to get the code for a similar animation or recreate it from scratch?  Thank you in advance! Link to comment Share on other sites More sharing options...
Cassie Posted October 4, 2022 Share Posted October 4, 2022 Hi there! Â I'm afraid that's not a simple animation at all. It's making use of shaders. Shaders are beyond the help we can offer in these forums but here's a collection of resources to get you started if you want to do a deep dive. It's likely to be a big learning journey rather than a copy-paste though.https://www.awwwards.com/awwwards/collections/shaders-are-easy/ 2 Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 4, 2022 Solution Share Posted October 4, 2022  And if you search for WebGL on codrops you can find articles (some shorter, some longer) on effects that come pretty close to your reference.  https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/ https://tympanus.net/codrops/2020/10/07/webgl-video-transitions-with-curtains-js/   1 Link to comment Share on other sites More sharing options...
Guest Posted October 5, 2022 Share Posted October 5, 2022 Thanks @Cassie and @akapowl for the response.  Eventually I found a very similar animation and the related source code at this link https://www.curtainsjs.com/examples/multiple-textures/index.html 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