DrawSVG and non-scaling-stroke

[PointC]

I'm seeing some strange behavior with the DrawSVG plugin and vector-effect="non-scaling-stroke". On page load everything seems fine, but if you resize the window the problem becomes obvious. I tried a standard circle element, a circle converted to path with MorphSVG and a closed path. All display the same behavior if "non-scaling stroke" is applied to the element.

 

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

I'm using circles in the example, but I'm seeing this on all primitive elements and paths in all browsers.

[GreenSock]

Ah, very interesting - that's because the browser actually changes the length of the path when you resize with non-scaling-stroke. That definitely complicates things, but I think I've got a solution in place now. Please check out the updated codepen "trial" version (just clear your cache and you should see it work in your demo). Better? 

 

Notice that if you tried doing that animation with CSS or some other JS library, it'd have that same problem. But now GSAP works around yet another browser quirk

 

Thanks for pointing this out, Craig. 

[PointC]

Perfect! ?

 

It's funny that I even came across this issue as I rarely set the stroke to non-scaling. I only stumbled upon it as I was answering another forum question. Coincidentally, a two year old thread mentioning the same thing popped up again while I was preparing my demo. Weird. Anyway, it looks great now. Well done.

 

For anyone following this, I highly recommend joining Club GreenSock for access to the DrawSVG (and many other) bonus plugins as they will save you time and headaches dealing with browser inconsistencies. More info:

https://greensock.com/club 

 

Happy tweening everyone.