Jump to content
Search Community

drawsvg duration 'bug'

flowen test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

  • Solution

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')

 

  • Thanks 1
Link to comment
Share on other sites

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

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.

:)

 

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