BenjaminO Posted April 14, 2022 Share Posted April 14, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted April 14, 2022 Share Posted April 14, 2022 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. 1 1 Link to comment Share on other sites More sharing options...
PointC Posted April 14, 2022 Share Posted April 14, 2022 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 4 Link to comment Share on other sites More sharing options...
BenjaminO Posted April 15, 2022 Author Share Posted April 15, 2022 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 More sharing options...
OSUblake Posted April 15, 2022 Share Posted April 15, 2022 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. 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 15, 2022 Share Posted April 15, 2022 Yep, Blake is right. I've updated the CodePen-only script so it only gives one warning, FYI: https://assets.codepen.io/16327/DrawSVGPlugin3.min.js That'll be in the next official patch as well. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now