Jump to content
GreenSock

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

DrawSVG Interlocking Letters

Recommended Posts

Is it possible to use GSAP to animate a handwriting effect with a break or gap in the stroke to replicate the interlocking letter effect seen in the attached image between the tail of the "g" and the "a"?

interlocking-letters.png

Share this post


Link to post
Share on other sites

Hey Christopher. @PointC is probably the best person to talk to about this. He wrote a post on the subject

 

In short, it's possible but difficult to do because you have to perfectly line up and time mask animations. 

  • Like 2

Share this post


Link to post
Share on other sites

Yep - Zach is absolutely right. Using multiple masks is the way to go with this one. @mikel has a nice example there for you and here's one of the letters from my tutorial. 

 

See the Pen ba382ee79baa22bfd47028edd4e9247e by PointC (@PointC) on CodePen

 

Good luck and happy tweening.

:)

 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks to everyone who replied. I'm looking forward to investigating those codepens.

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.

×