Jump to content
GreenSock

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

Warning DrawSVGPlugin and vector-effect property in Safari, Chrome and Firefox

Recommended Posts

Hello folks, 🙂

 

I wanted to point out a small problem I have with DrawSVGPlugin and the property :

vector-effect="non-scaling-stroke"

This causes warnings ⚠️ in Safari, Chrome and Firefox. Paired with ScrollTrigger, DrawSVG creates a lot of warnings, it's a bit annoying 😅.

 

However I must say that the animation is working as expected !

 

Thank you in advance.

Capture d’écran 2022-04-14 à 22.10.37.jpg

Link to comment
Share on other sites

  • BenjaminO changed the title to Warning DrawSVGPlugin and vector-effect property in Safari, Chrome and Firefox

Howdy, @BenjaminO - that's actually very intentional. It's warning you about something that may affect your animation. It only happens when the artwork is scaled non-proportionally. But those are only warnings - you can ignore them if the animation is working fine. The user would never see that unless they open Dev Tools. 

 

I'll add some code to the next release to limit that to one warning, though. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

I'd recommend caution using non-scaling-stroke and preserveAspectRatio="none" as they can deliver some pretty unexpected results. It's not a GSAP thing. Here's a quick example animating a stroke with CSS and the path length = "1" trick. Stretch this out pretty wide and you can see how it's not what we'd like. Just my two cents. YMMV.

 

See the Pen 3a5f6d39321cfaeb0db4802485adb8c7 by PointC (@PointC) on CodePen

  • Like 4
Link to comment
Share on other sites

Hello ! 👋 

 

Thank you for your responses ! I attached a little demo of my animation (see in the console the warnings ⚠️) ! Maybe there is something to improve to avoid this warning with a CSS trick (or maybe a gsap parameter/function to disable warnings just for this animation) ? My goal is to keep the stroke the same width and I want my svg to scale up or down depending on the dimensions of its parent.

 

Thank you 😊!

 

See the Pen qBpJvbP by benjamOD2 (@benjamOD2) on CodePen

Link to comment
Share on other sites

If your animation works the way you want, then don't worry about those warnings. If not, I'm pretty sure the only way to do a non-scaling stroke like that would be to recreate the path on every resize by transforming every single point the path. Definitely not trivial.

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