Animating Liquid Movement in a Container

[tgczan]

I'm trying to simulate a 2D liquid substance filling a container. The container can be any shape (let's say in the shape of a cup). Liquid should have the wavy appearance but liquid level also moves upwards as it's undulating. There should also be multiple layers (front vs back) of these liquid waves, so there appears to be a some depth.

 

How do I accomplish this in GSAP 3 in the most straightforward manner? Conceptually, would it better to make the shape itself morph as if it were liquid, or just simulate the movement by moving a larger piece horizontally underneath a mask that's shaped as the container?

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If I were you, I'd try that 2nd approach (have a wavy piece of artwork for front/back, and just animate them horizontally inside a mask to get the effect) and if that looks good, you're done. Morphing might be super cool, but I'm not sure it's necessary (it really depends on the effect you're going for). It's definitely simple enough to just animate the "y" value of the liquid in the container in the negative direction to make it look like it's filling up. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.