Jayanth Posted September 10, 2020 Share Posted September 10, 2020 How do I tween float values in svg path using gsap? gsap doesn't seem to recognise values like 4.3e-10 while animating svg path values. See the Pen yLOvPwm by cjayanth95 (@cjayanth95) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 10, 2020 Share Posted September 10, 2020 Hey Jayanth. Those are some extremely small values Just replace them with 0. See the Pen RwaMyrj?editors=1000 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Jayanth Posted September 11, 2020 Author Share Posted September 11, 2020 16 hours ago, ZachSaucier said: Hey Jayanth. Those are some extremely small values Just replace them with 0. Thanks for the reply Zach. My code deals with a lot of float values. I can indeed replace these small float values with 0. Just want to know if there's a way to specify to gsap that the path attribute has float values. My issue is that while tweening to values like 4e-10, the intermediate values generated by gsap are something like this: ......,4e90,4e89,4e88,....4e-7,4e-8,4e-9,4e-10, which is not right. Is replacing the float values with plain numbers the only solution? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 11, 2020 Share Posted September 11, 2020 6 hours ago, Jayanth said: Is replacing the float values with plain numbers the only solution? At the moment, yes. 4e-10 is 0.0000000004 which is indistinguishable to 0 in almost every case. What is generating these numbers for you? I am betting it has some setting that will allow you to change what it rounds to to avoid this crazy level of detail. Link to comment Share on other sites More sharing options...
Jayanth Posted September 11, 2020 Author Share Posted September 11, 2020 2 hours ago, ZachSaucier said: At the moment, yes. 4e-10 is 0.0000000004 which is indistinguishable to 0 in almost every case. What is generating these numbers for you? I am betting it has some setting that will allow you to change what it rounds to to avoid this crazy level of detail. For eg: Math.cos(Math.PI/2) = 6.123233995736766e-17. The library that I'm using gives me floating point values such as this. When I'm trying to animate values from say matrix(1,0,0,1,0,0) to matrix( 1,0,0,1,0,4e-10) it gives me weird in between values Link to comment Share on other sites More sharing options...
Dipscom Posted September 11, 2020 Share Posted September 11, 2020 Is there a particular reason why you need such tiny numbers? Could you not work with a viewport that is orders of magnitudes bigger and, thus, give you room to manouver without having to go to such small decimal places? Instead of having your working viewport be 300 by 350, you could be using something like 300000000 by 350000000. Visually, there would be no difference but it would help on the math. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 11, 2020 Share Posted September 11, 2020 While I'd agree that it's a bit wasteful to use tiny numbers like that (0 would be better), I was able to find a way to tweak the regular expression for complex string values so that they accommodate those complex numbers that are both decimal and use scientific notation. It should work in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js Does that work better for you? 3 Link to comment Share on other sites More sharing options...
Jayanth Posted September 14, 2020 Author Share Posted September 14, 2020 Wow!! Thanks Jack. This works. Definitely didn't expect that you would actually incorporate this into gsap. Amazing. 1 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