Jump to content
GreenSock

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

DrawSVG and non-scaling-stroke

Recommended Posts

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.

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.

:)

 

  • Like 1
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.
×