Jump to content

Jeff S

Transforming already transformed matrix

Moderator Tag
Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I am trying to apply a matrix transformation to an SVG group element which already has a matrix transformation applied to it. 


So, the current transformation is:


the TweenMax.to transform being applied is:

matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861)

the result I am expecting is:

matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861)

but the result is that the transform attribute is gone and a new style attribute exists as follows:

style="transform: matrix(2.03492, -0.46932, 0.455, 0.51068, 19.2763, 121.028);"

The result is very close.  The first 4 numbers in the matrix are great.  The last two, I am confused about.


I don't mind doing some preprocessing to get the matrix into the right form, but I am unsure what adjustments need to be made in order to get the last two values to line up correct, while preserving the first 4 values in the matrix.


Any advice for solving this problem to shed some light on what is happening and what I need to do to adjust my tween would be greatly appreciated.






See the Pen EPGZLp by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

interesting - I never anticipated someone setting a matrix string directly on an SVG element like that (usually people define properties like rotation, scaleX, scaleY, x, y, etc.) but it's an entirely valid request. 


The problem simply has to do with the fact that GSAP does some advanced adjustments under the hood to make SVG transforms easier to work with in terms of the origin (more consistent with the way it works on regular DOM elements), like being able to spin an SVG element around its center (or wherever). So there are some intentional offsets applied, but they weren't being factored into the raw matrix that you were passing in.


I have applied a fix to the upcoming release so that it'll "just work" in your scenario - you can see an uncompressed version at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js


In the mean time, you can use this script to adjust your matrix:

TweenMax.to('#g32459', 3, {transform: fixMatrix(document.getElementById("g32459"), "matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861)")});

function fixMatrix(element, matrix) {
    var version = CSSPlugin.version.split("."),
        m = matrix.match(/(?:(-|\+)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig),
        transform = element._gsTransform;
    if (m.length !== 6 || +version[0] > 2 || +version[1] > 18 || +version[2] > 2) { //skip the "fix" if an updated CSSPlugin is already loaded. 
        return matrix;
    if (!transform) {
        TweenLite.set(element, {x:"+=0"}); //forces creation and population of the _gsTransform object
        transform = element._gsTransform;
    m[4] -= (transform.xOrigin - (transform.xOrigin * m[0] + transform.yOrigin * m[2]) + transform.xOffset);
    m[5] -= (transform.yOrigin - (transform.xOrigin * m[1] + transform.yOrigin * m[3]) + transform.yOffset);
    return "matrix(" + m.join(",") + ")";
Does that help?
  • Like 2
Link to comment
Share on other sites

It helps a lot actually.  


Thanks Jack!

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.