Jump to content


Transform chaining in GSAP

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

Is there any way to have multiple transformes chained in a distinct order with GSAP?

With SVG you can write all transforms in the "transform" attribute and they will be executed in the reverse order, like:

<circle r="20" transform="scale(2) rotate(20) translate(-20,0)"/>

this will move the circle 20 units to the left, rotate it by 20° (having it's origin still at 0,0) and then scale it by 2.

a different order of transforms will yield a different result.


I wonder if it would be possible to be able to chain transforms like that in GSAP, but with any element, like this:

TweenMax.to('#element', 2, {
  chainedTransform: [{
      scale: 1.5
    }, {
      x: -100
    }, {
      rotate: 50, transformOrigin:'50% 20%'
    }, {
      scale 1 / 1.5
    }, {
      y: 100, y:-50
    }, {
      matrix: [0.8, 0.4, -0.4, 0.8, 32, -32]
    }, {
      skewX:20, transformOrigin:'0 0'

This way you could do more complex animations and would likely be most suitable for "fromTo" Tweens.

Link to comment
Share on other sites

Hey Ninili,


You can chain transforms using a timeline. For more information about it, check out the post introducing them or a multitude of forum posts on here about how to use them :)

  • Like 1
Link to comment
Share on other sites

Hi Ninili  :)


if i understand correctly , the short answer is nope , the order in which you declare the transform properties makes no difference.


as you can read in CssPlugin Doc : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/


In regular CSS, the order that you list the transforms matters but GSAP always applies them in the same order for consistency: translation (x, y, z), then scale, then rotationX, then rotationY, then skew, thenrotation (same as rotationZ) although in terms of constructing the matrix, the math is technically done in the reverse of that order. 

  • Like 3
Link to comment
Share on other sites

Excellent responses, Jonathan and Diaco. Exactly right. And for the record, GSAP can achieve any transform you want. All transforms ultimately boil down to a computed matrix() anyway. You can also just animate the "transform" property itself so that you can shove whatever you want in there, but that has a higher price up front due to the mushing together of the values to figure out the matrix. I strongly recommend just using the faster, and usually more intuitive shortcuts like x, y, rotation, scaleX, scaleY, skewX, skewY, etc.

  • Like 1
Link to comment
Share on other sites

Thanks for all the responses!

What I was thinking about was actually order of operations, thanks for the links, Jonathan. I searched a lot in the forums, but it was rather hard to find the right terms to describe what I was looking for.

I'll then stick for native translates or nested containers for more complex transforms.

It's actually very rare that I need any other kind of Transform other than those GSAP already provide.

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.