clieee Posted August 19, 2020 Share Posted August 19, 2020 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 Link to comment Share on other sites More sharing options...
PointC Posted August 19, 2020 Share Posted August 19, 2020 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. 4 Link to comment Share on other sites More sharing options...
clieee Posted August 20, 2020 Author Share Posted August 20, 2020 Great, thanks. I got it working fine 😃 Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2020 Share Posted August 22, 2020 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. 3 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