Jump to content


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"?


Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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

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.