Jump to content
GreenSock

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

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.
×