Jump to content


DrawSVG help

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

i zoomed into your SVG




and it appears you have a thick stroke on a fill instead of just a single stroke for each segment of each letter. 

Unfortunately I don't think your artwork lends itself to be easily revealed by DrawSVG..


I think it would still be tedious, but here is a demo that uses DrawSVG on a mask that reveals a complicated brush stroke:


  • Like 2
Link to comment
Share on other sites

Hi cwiens@shutterfly.com :)


Yeah - that lettering is a tough one for drawSVG and a mask is going to be a lot of work.


The only other thought I had was changing your stroke to something quite thin like 0.25 and then animating the fill of each path as the stroke finishes. It may not be even close to what you wanted, but here's a fork of your pen:


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


Hopefully that helps a little or you may have a lot of masking ahead of you. Good luck.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

Thanks guys, yeah I put the thicker stroke on to see if I could use fill:none and animate the stroke. I figured this was too complex. Thanks for the feedback so I can take a different approach!

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.