Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Afplaktape

Logo masking/clipping?

Recommended Posts

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

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.

:)

 

 

  • Like 5
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
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.
×