Jump to content
Search Community

Vector-Effect: Non-Scaling-Stroke messing with DrawSVG

MadG test
Moderator Tag

Recommended Posts

Hey all, 

 

Got kind of a weird one for you today. I'm working on a site with a bunch of offset borders that need to be drawn in from bottom left on scrollTrigger. I want these borders to be 2px regardless of screeen size or SVG scale, so I'm using the vector-effect: non-scaling-stroke property. However, as you can see in the pen, that's causing a funky effect where drawSVG is segmenting the line into 100px segments and drawing them. Anyone know of a different way I can accomplish what I'm trying to do here? Thanks!

See the Pen MWONqVm by kslaton (@kslaton) on CodePen

Link to comment
Share on other sites

Yeah, I've bumped into that before. I'm not sure why setting the vector effect as a CSS property messes with it like that, but @mikel is right. Adding it as a presentation attribute seems to make it go away. It's not a GSAP thing. You'll see the same problem animating with CSS and setting the property rather than the presentation attribute.

 

You can set the effect with GSAP like this:

gsap.set("line", { attr: { "vector-effect": "non-scaling-stroke" } });

 

See the Pen 465ba9feb6e661c9eb79ac590e2c17ec by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

PS non-scaling strokes can be a little funky in Firefox when resizing. Just an FYI.

  • Like 2
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.
×
×
  • Create New...