How can i achieve this liquid effect.

[midnightgamer 2 Likes (Newbie)]

I am trying to learn GSAP by creating new project. I chose to recreate https://dribbble.com/shots/14108886-Sculpture-Homepage-Concept this animation. I need help to recreate the liquid effect on video and image reveal.

[Ihatetomatoes 323 Likes (Leader)]

Hi @midnightgamer, great inspiration and a beautiful effect you are trying to recreate. There is not much help I can offer without you posting a Codepen demo or anything to start with.

 

In other words the effect would not involve only GSAP but most likely also a canvas library such as Three.js, Pixi.js or WebGL.

 

You mentioned that you are trying to learn GSAP, but I don't think this effect is the easiest for a beginner.

 

Here are some other forum threads that might steer you in the right direction:

 

 

If you have any questions specific to GreenSock and the syntax, please ask.

[midnightgamer 2 Likes (Newbie)]

17 minutes ago, Ihatetomatoes said:

Hi @midnightgamer, great inspiration and a beautiful effect you are trying to recreate. There is not much help I can offer without you posting a Codepen demo or anything to start with.

 

In other words the effect would not involve only GSAP but most likely also a canvas library such as Three.js, Pixi.js or WebGL.

 

You mentioned that you are trying to learn GSAP, but I don't think this effect is the easiest for a beginner.

 

Here are some other forum threads that might steer you in the right direction:

 

 

If you have any questions specific to GreenSock and the syntax, please ask.

Thanks for  sharing , Liquid effect is just one part of it. I will try to recreate page transition effect and I think that is achievable with GSAP.

[midnightgamer 2 Likes (Newbie)]

10 hours ago, midnightgamer said:

Thanks for  sharing , Liquid effect is just one part of it. I will try to recreate page transition effect and I think that is achievable with GSAP.

 

10 hours ago, Ihatetomatoes said:

Hi @midnightgamer, great inspiration and a beautiful effect you are trying to recreate. There is not much help I can offer without you posting a Codepen demo or anything to start with.

 

In other words the effect would not involve only GSAP but most likely also a canvas library such as Three.js, Pixi.js or WebGL.

 

You mentioned that you are trying to learn GSAP, but I don't think this effect is the easiest for a beginner.

 

Here are some other forum threads that might steer you in the right direction:

 

 

If you have any questions specific to GreenSock and the syntax, please ask.

Is there any platform where I can learn Farmer Motion?

[ZachSaucier 7,048 Likes (Superhero)]

That liquid effect is done using a WebGL fragment shader. I recommend reading The Book of Shaders and looking at Codrops tutorials for WebGL.

 

1 hour ago, midnightgamer said:

Is there any platform where I can learn Farmer Motion?

Farmer Motion sounds like a cool dance  

 

As for Framer Motion, I don't know of anyone who uses it. Nor do I know a good place to learn about it.