SVG Masks and Animation

[kadams277 0 Likes (Newbie)]

I'm new to GSAP and SVG masks, and I'm attempting to make an SVG logo look like it's filling up with water. I've used

See the Pen RPvxGp by lbebber (@lbebber) on CodePen

by Lucas Bebber as a starting point. I've got the animation working, but I can't seem to get it to start from the bottom of the logo. I've tried working with a simpler circle SVG, but I'm having the same issue. I've played around with the different numbers in the attributes, but I can't seem to pinpoint my issue.

Thanks for any help!

See the Pen NeLWZX by kadams277 (@kadams277) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Welcome to the forums, @kadams277. Is this what you're looking for?: 

See the Pen 6617f2a0ac6617431b46d5aec34e5fdb by GreenSock (@GreenSock) on CodePen

 

[kadams277 0 Likes (Newbie)]

That's exactly it! Thank you so much! Guess I need to study up GSAP attributes now haha

[GreenSock 8,117 Likes (Superhero)]

6 minutes ago, kadams277 said:

That's exactly it! Thank you so much! Guess I need to study up GSAP attributes now haha

 

Nah, there shouldn't be a huge learning curve in terms of what GSAP can animate - you pretty much point it at whatever properties you want to animate and it handles them for you. In this case it was just a matter of adjusting the "y" and "height" attributes on the SVG elements (well, animating those). 

 

Let us know if you need anything else. Happy tweening!