flowen Posted May 24, 2021 Share Posted May 24, 2021 for some reason, the outline of the logo has to have a very high duration for it to properly animate the svg path. How can I fix this? .from('#logo-stroke', { duration: 12, drawSVG: 0 }, 'start') See the Pen MWpmrEq by flowen (@flowen) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 24, 2021 Solution Share Posted May 24, 2021 This looks like an issue with how the stroke's been calculated - I've never seen this one before though! If you do a fromTo tween you'll see the stroke's fully drawn at 30% - so the additional 70% is happening after the stroke's visibly drawn. I would hedge my bets that this is a weird SVG quirk (maybe something to do with the editor it's been exported from?) and not a drawSVG bug. .fromTo('#logo-stroke', { duration: 2, drawSVG: '0%' },{ duration: 2, drawSVG: '30%' }, 'start') 1 Link to comment Share on other sites More sharing options...
flowen Posted May 24, 2021 Author Share Posted May 24, 2021 Thanks for sharing the solution and how you got there. It's been a while, but it was like this: Drew the shape in illustrator. Imported the svg into figma There I flattened the paths to a single vector and exported from here Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 24, 2021 Share Posted May 24, 2021 I've had some issues with Figma's SVG exports, but I pulled this into another editor and re-exported, and am getting the same results... @GreenSock may want to look at this one. 2 Link to comment Share on other sites More sharing options...
Cassie Posted May 24, 2021 Share Posted May 24, 2021 Maybe it's a compound path issue? 7 minutes ago, flowen said: There I flattened the paths to a single vector and exported from here Link to comment Share on other sites More sharing options...
PointC Posted May 24, 2021 Share Posted May 24, 2021 43 minutes ago, Cassie said: Maybe it's a compound path issue? Bingo. Here's a comparison of a simple path drawing. The clone has some random chunks removed and you can see the difference in the animation and length. See the Pen 4a697e4fd4b04f4876f0d2e2ef1c87bf by PointC (@PointC) on CodePen The same problem is present if you don't use DrawSVG and simply animate them with the CSS path length = 1 trick. See the Pen 8d6932ae660d589790602f11e345eaa8 by PointC (@PointC) on CodePen I don't really know if there's something Jack can add to DrawSVG for this or not. I usually just leave the artwork in pieces and group it to avoid this issue. You could also use a mask over the compound path. 5 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 24, 2021 Share Posted May 24, 2021 Craig is the ultimate SVG wizard. 🙌 6 Link to comment Share on other sites More sharing options...
flowen Posted May 25, 2021 Author Share Posted May 25, 2021 ahh ok I see! Really thought I would improve everything by having a single path to draw vs small pieces. Thanks for explaining! 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