TreeGsaP

Thank you for the prompt fix, @GreenSock! Based on the codepen you linked, and the codepen I am including now (a fork of the first one I posted, but with the new cdn), everything is working perfectly! A couple of quick questions: 1) Is there an estimated date for the next release? 2) Is there a way to install the latest version via npm? https://codepen.io/treesap/pen/VwmEaEQ

Here is a codepen illustrating the issue with setting the transform matrix to the same values it has in the DOM (please scroll down in the codepen, sorry about not spacing it better). https://codepen.io/treesap/pen/XWNPYdm The start matrix is (1, 2, 3, 1, 2, 3) and, clicking the button at the bottom, the matrix is set to (1, 2, 3, 1, 2, 3) using GSAP. However, it is clear that the ellipse has moved. In fact, the new matrix has negative numbers in it, so it's not replacement nor composition that is happening. Any ideas?

Edit 2: The problem has been resolved and GreenSock has posted a version of gsap fixing the issue below! Edit: New codepen illustrating the issue at the bottom. I have an SVG object which has some matrix defined in the transform tag. When I try to animate this using some basic to/from methods, the object makes a sudden change in scale/rotation/location before the animation. If I were to take a guess, it's because GSAP doesn't account for the previously existing transform, as mentioned here in https://greensock.com/svg-tips#tips. Specifically, this tip My attempt at fixing this (although I'm not sure if this is the source of the problem to begin with) and adhering to the tip above was to extract the matrix from the DOM and, before doing any animations, use the "set" method to synchronize the transform data GSAP has with the existing values. Something like this gsap.set(element, { transform: "matrix(a, b, c, d, e, f"), // matrix extracted from existing SVG in the DOM }); However, the results were weird. I would expect the element to stay in the same location, but instead it moves far away. I thought that maybe using the code above composes the transformation with the existing one (as opposed to setting it), but the element inspector in the browser displays the matrix with the same a, b, ..., f values as before (despite moving)! I am not sure where to look next, so I came here for guidance. (Side question, why doesn't gsap.getProperty(element, "transform") work? I did the extracting using non-gsap methods) I think the codepen displays the issue I have (although I'm not sure because it's a very simplified SVG). First we apply some transform matrix in the DOM. Then we wait 3 seconds (to make the effect clear) and begin animating an x translation (x: "+=20"). Once the animation starts, the ellipse jumps up as if part of the initial matrix transform has not been accounted for. Thank you!