Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flowen

drawsvg duration 'bug'

Go to solution Solved by Cassie,

Recommended Posts

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 post
Share on other sites

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 post
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 post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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 post
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 post
Share on other sites

Craig is the ultimate SVG wizard. 🙌

  • Like 6
Link to post
Share on other sites

ahh ok I see!

 

Really thought I would improve everything by having a single path to draw vs small pieces. 

 

Thanks for explaining!

  • Like 2
Link to post
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.

×