TreeGsaP Posted March 7, 2021 Share Posted March 7, 2021 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 Quote Always 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! See the Pen vYyzjag by treesap (@treesap) on CodePen Link to comment Share on other sites More sharing options...
TreeGsaP Posted March 7, 2021 Author Share Posted March 7, 2021 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? Link to comment Share on other sites More sharing options...
GreenSock Posted March 7, 2021 Share Posted March 7, 2021 I see what you mean, @TreeGsaP. It's quite an edge case, but let me look into it and get back to you after the weekend. In the meantime, the raw components of the transform would be: gsap.set("#test", { //transform: "matrix(1,2,3,1,2,3)", rotation: 63.435, skewX: -45, scaleX: 2.23607, scaleY: -2.23607, x: 32, y: 23 }); 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 8, 2021 Solution Share Posted March 8, 2021 Alright, that was a fun trip down the matrix math rabbit hole Should be fixed in the upcoming release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js Here's a fork that shows it working: See the Pen 45b0658061d1d8be10416788f2366a6f?editors=0010 by GreenSock (@GreenSock) on CodePen Does that resolve things for you? 2 1 Link to comment Share on other sites More sharing options...
TreeGsaP Posted March 8, 2021 Author Share Posted March 8, 2021 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 8, 2021 Share Posted March 8, 2021 3 hours ago, TreeGsaP said: Is there an estimated date for the next release? Not a finite one. Hopefully not too long but there's some additional changes that we'd like to make before the next release but some other more pressing matters to attend to at the moment. Jack can send you the beta files in the mean time. 3 hours ago, TreeGsaP said: Is there a way to install the latest version via npm? Not via the public or private registry. Jack can send you a .tgz to install from. Link to comment Share on other sites More sharing options...
GreenSock Posted March 8, 2021 Share Posted March 8, 2021 Sure, you can snag a .tgz file here: https://assets.codepen.io/16327/gsap-beta.tgz You can literally npm install that file, like drop it into your project folder, go there with the terminal and: npm install ./gsap-beta.tgz Does that work for you? 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