Jump to content
Search Community

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

TreeGsaP test
Moderator Tag

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

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

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

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

  • Solution

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 comment
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 comment
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 comment
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.
×
×
  • Create New...