Jump to content
Search Community

Oozing Drippy Animation

heagar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.
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.

See the Pen doLKGO by rkgttr (@rkgttr) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

This is a fairly ambitious effect, which would probably take fairly advanced folks some time to create and look good.

If SVG is an option you might want to look into MorphSVG. There may be a good chance that you can draw 3 or 4 states of the drip and just morhp between them.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...