Share Posted January 9, 2019 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 Link to comment Share on other sites More sharing options...
Share Posted January 9, 2019 Welcome to the forums, @kadams277. Is this what you're looking for?: See the Pen 6617f2a0ac6617431b46d5aec34e5fdb by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted January 9, 2019 That's exactly it! Thank you so much! Guess I need to study up GSAP attributes now haha Link to comment Share on other sites More sharing options...
Share Posted January 9, 2019 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now