Afplaktape Posted November 10, 2021 Share Posted November 10, 2021 Hi all, Very new to Gsap (digging it!!) and I've been struggling with this one for quite some time now. I'm trying to get this wordmark to animate from the center line in both directions to both end points. I only get it to work with the outline but not with a fill. I've watched a lot of tutorials about masking but I just don't seem to get it. Hope there is somebody around here that can get me going... See the Pen eYEjNbB by Afplaktape (@Afplaktape) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted November 10, 2021 Share Posted November 10, 2021 Hi @Afplaktape Welcome to the forum. The secret here is to draw a mask or masks over your artwork with a stroke just wide enough to cover it. Here's an example with two masks starting at the center of the logo. See the Pen LYjBpqv by PointC (@PointC) on CodePen Another option is a single mask and start drawSVG from the center. See the Pen eYEjJJP by PointC (@PointC) on CodePen I have some tutorials to explain these techniques in more detail. The first one is about handwriting but applies to any underlying path you wish to reveal with a variable width stroke. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-masks-and-clippaths/ All of the above methods require the DrawSVG plugin which is a club perk. https://greensock.com/club/ Hopefully that helps. Happy tweening and welcome aboard. 5 Link to comment Share on other sites More sharing options...
Afplaktape Posted November 10, 2021 Author Share Posted November 10, 2021 Wow! Thank you very much! I'm definitely going to check your tutorials! Just out of curiosity: Is one of both options considered best practice or are they equally good? And I guess none of this is possible without the payed version of gsap? Thanks again!:) 1 Link to comment Share on other sites More sharing options...
PointC Posted November 10, 2021 Share Posted November 10, 2021 38 minutes ago, Afplaktape said: Is one of both options considered best practice or are they equally good? Either way is fine. For this piece I'd probably go with the single path. That allows you to start from the middle or either end. Multiple paths offers some cool possibilities when you want to stagger the reveal in segments. 39 minutes ago, Afplaktape said: And I guess none of this is possible without the payed version of gsap? You can play with any of the paid plugins on CodePen without a Club membership but yes, to use DrawSVG in the wild you'd need to join Club GreenSock. Lots of great stuff in there along with DrawSVG that will save you a ton of time and cross browser headaches. Happy tweening. 2 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