I have a project that requires a transitional effect. I need to code ooze expanding from the top of the screen to the bottom, creating a complete wipe. The arcs/drips need to move as realistic as possible resembling a fluid sliding down your screen. This is the closest I could find to the effect I need to create. http://codepen.io/rkgttr/pen/doLKGO Except for it is just one oozing line instead of the loop, and it needs to reach the bottom instead of fading out.
So here is my problem. I need to do this with GSAP and I don't know how to create those curves. I want to be able to control the arcs opposed to just using an image, to make it look like some kind of liquid.
I thought about creating a cluster of dots and just animating their shadows but that wouldn't work with the concave parts.
Is there a way to draw something on a bezier curve and control it? If yes how do I do that?
Or do I need to work with co sin to make sine waves? https://jsfiddle.net/umaar/fWSUk/ Do I need to whip out the quadratic formula to achieve this look? I am a front-end coder and this is a whole new level of brain power for me.
I might be overthinking this. Thanks for any help.