Logo masking/clipping?

[Afplaktape]

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

[PointC]

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.

 

 

[Afplaktape]

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!:)

[PointC]

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.