Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Setting gsap's matrix transform data to match that defined in an SVG?

Go to solution Solved by GreenSock,

Recommended Posts

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


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 post
Share on other sites

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 post
Share on other sites

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


  • Like 1
Link to post
Share on other sites

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? 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites

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? 

  • Like 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.