TreeGsaP
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by TreeGsaP
-
-
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).
See the Pen XWNPYdm by treesap (@treesap) on CodePen
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
QuoteAlways set transforms of elements with GSAP (not just CSS). There are quite a few browser bugs related to getting transform values of elements which GSAP can't fix or work around so you should always set the transform of elements with GSAP if you're going to animate that element with GSAP.
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!
Setting gsap's matrix transform data to match that defined in an SVG?
in GSAP
Posted
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?
See the Pen VwmEaEQ by treesap (@treesap) on CodePen