kadams277

SVG Masks and Animation

Recommended Posts

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 this pen 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!

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
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.