Tween float values in svg path

[Jayanth]

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

[ZachSaucier]

Hey Jayanth. Those are some extremely small values  Just replace them with 0.

See the Pen RwaMyrj?editors=1000 by GreenSock (@GreenSock) on CodePen

[Jayanth]

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?

[ZachSaucier]

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.

[Jayanth]

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

[Dipscom]

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.

[GreenSock]

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? 

[Jayanth]

Wow!! Thanks Jack. This works. Definitely didn't expect that you would actually incorporate this into gsap. Amazing.