Jump to content
Search Community

precedence for translate and transform css?

erikb test
Moderator Tag

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 a way to set precedence for translate and transform css calls on an element?


For example, in my pen if I set:

TweenMax.set( '#a', {  
  y: '-50%',
  scale: 2

It results in this css:

translate(0%, -50%) matrix(2, 0, 0, 2, 0, 0)

How would I use greensock to get this result instead:

matrix(2, 0, 0, 2, 0, 0) translate(0%, -50%)

The latter results in a different position of the element.

See the Pen Ejyqxj by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

We very purposefully designed GSAP to always apply transforms in a specific order in order to make things predictable and very stable. With most other animation systems, the order-of-operation thing causes all sorts of problems. Imagine, for example, that you animate the x/y translation with one tween that happens to run first...and then a different tween runs that affects rotation (and it may even start on the same frame, but just barely after the other one) - you get completely different results than if the other one fires first. Not good.


And then what happens if you define one order-of-operation at first, and then in another part of your app you tween that same thing but define a different order of operation? Hm. In some cases, you tween x/y and it behaves one way, but then in another part of your app it behaves a completely different way and to the typical animator, they may not understand why and it'd be super frustrating. 


Of course there are very rare edge cases like this where you could argue that GSAP's consistency isn't what you want but overall hopefully you'll see that it's a better way to handle things. If you need that order, you could always either create your own plugin or use an onUpdate to apply things in whatever way you want. 

  • Like 3
Link to comment
Share on other sites

Thanks for the well reasoned explanation.  


I had hoped that elements' _gsTransform would include settable metadata which dictated the order in which transformation rules were applied.  If I set the precedence rules on an element then I would not be surprised by the behavior.


Alas, this is not an edge case for me.  I need to scale elements and then translate them back 50% of their scaled size.  


I think your suggestion to build my own plugin is not a straightforward suggestion; re-writing your css rules is clearly non-trivial.


Also, I am not sure how I would use onUpdate effectively to handle browser prefixes (the first of many issues which come to mind) which I have come to expect greensock to handle.

Link to comment
Share on other sites

 I need to scale elements and then translate them back 50% of their scaled size.  




Was the .set just an example?  Are you tweening in your actual use-case?  If you're really trying to do it instantly, can't you just do something like (or vice versa depending on your order of operations)


function scaleUp() {
 TweenMax.to('#a', 0, { scale: 2});

TweenMax.to( '#a', 0, {
  y: '-50%', onComplete: scaleUp
Link to comment
Share on other sites

Yes, thanks Jack.  That is what I am trying to accomplish.  It would be appreciated if you and your team could come up with a solution which allows developers to specify non-commutative transformation precedence for specific elements.


Given this is the first time I've bumped my head using your library for transformation precedence, your intuition regarding the most likely order for most projects seems right on.  But for cases like this, it would be nice to be able to specify what elements' preferences are.

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...