DrawSVG progress 50%?

[clieee]

Hi,

 

I'm working on a animation for a circle that shows a "progress" between 0% and 100%. 

What I cannot understand is why 50% is not showing half the circle, it is going a bit further? 

Seems like I'm missing something obvious.

 

https://codesandbox.io/s/heuristic-grass-puxwu

 

Thanks

See the Pen by s (@s) on CodePen

[PointC]

I think this is caused by a small SVG scaled up to 28 times its original size.

 

If I get the length of your path with the getLength() method and then tween to half that, it's perfect. If I tween to 50%, it does look like it goes a bit further. The inline styles seem to be off by 1/2 pixel.
 

<!-- Tweening to half the length  -->
style="stroke-dashoffset: 15.9226; stroke-dasharray: 30.8451px, 40.8451px;"

<!-- Tweening to 50%  -->
style="stroke-dashoffset: 15.4226; stroke-dasharray: 30.8451px, 40.8451px;"

I'm guessing @GreenSock adds a half pixel for safety when using percentages? But since you're scaling this up so much, that half pixel seems pretty big.

 

That's my best guess anyway. @GreenSock can confirm.

 

For now, you can tween to half the length and you should be good to go.

 

Happy tweening.

 

[clieee]

Great, thanks. I got it working fine 😃

[GreenSock]

On 8/19/2020 at 6:22 PM, PointC said:

I'm guessing @GreenSock adds a half pixel for safety when using percentages? But since you're scaling this up so much, that half pixel seems pretty big.

Yep, we add a tiny fraction to avoid a bug in Firefox.