MadG Posted March 10, 2022 Share Posted March 10, 2022 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 More sharing options...
mikel Posted March 10, 2022 Share Posted March 10, 2022 Hey @MadG, Instead of lines (seemingly a problem - will be checked) use paths and put the value directly into the path data. See the Pen RwWOKmy?editors=1010 by mikeK (@mikeK) on CodePen Happy drawing ... Mikel 2 Link to comment Share on other sites More sharing options...
mikel Posted March 10, 2022 Share Posted March 10, 2022 And: If the path is on edge, the SVG set overflow:visible. See the Pen ExbqGVX by mikeK (@mikeK) on CodePen 1 Link to comment Share on other sites More sharing options...
PointC Posted March 10, 2022 Share Posted March 10, 2022 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. 2 Link to comment Share on other sites More sharing options...
MadG Posted March 10, 2022 Author Share Posted March 10, 2022 Awesome, thanks @mikel and @PointC . After looking into it more I may just go with some absolutely positioned spans to create the edges, especially after what you're saying with FF. This is all super helpful though. 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