Jayanth

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

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

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?

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.

Thank you. I've added the codepen now. So basically, I use draft JS editor in react (https://draftjs.org/) to generate the html. Using draft js, I can apply inline styles to span elements. That's how I add the 'animation-property' to individual span elements. Now if I just define the keyframes inside the CSS, it starts animating. How do I achieve something like this using gsap so that I can control the animation.

I have a few divs which have animation-name property. I also have the object that defines the keyframes for that animation-name. How do I animate these divs using greensock?