Timing issue when animating a circle

[JPM]

Hi,

I am trying to animate a circle (pie chart) with a duration of x seconds.

 

The result is that the pie chart is filled 3 seconds before the onComplete callback is triggered.

 

How can I sync the actual pie chart with the duration?

 

See the Pen MWzNVge by jaypm (@jaypm) on CodePen

[mvaneijgen]

That probably has to do with that the calculations are not 100% accurate and I have the feeling that DrawSVG solves a lot of those bugs, so that you don't have to worry about it. 

 

I've forked your pen and add the DrawSVG plugin then with a simple .to() tween, everything works as expected. I've also given your tween a name and called .restart() on it on mouse click, instead of creating a new tween each time. I'll mark the topic, maybe another SVG guru has some notes on it.

 

Hope it helps and happy tweening! 

 

Note that the codepen preview has something weird going on, better view it on the codepen site it self.

 

See the Pen JjegLze?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[JPM]

Thanks I adapted your suggestion to use restart on the animation.

I noticed that reducing the stroke-dasharray value by PI in the css file will fix my issue.

Should have thought of it before xD

 

See the Pen oNQKMpa?editors=0110 by jaypm (@jaypm) on CodePen