Jump to content
Search Community

Difference between setting transform matrix and TweenLite.to()

hemmoleg 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

What is the difference between

TweenLite.to(target, {x:0});

and

target.style.transform = "matrix(1, 0, 0, 1, 0, 0)";

, except that the second line sets more than just x?

The codepen is just there to illustrate the question: if you uncomment the TweenLite.to the seconde tween starts from the same position as the first tween (0,0) whereas otherwise the second tween starts from where the first ended (100,0).

See the Pen ppWExW by hemmoleg (@hemmoleg) on CodePen

Link to comment
Share on other sites

Hello @hemmoleg


By using target.style.transform matrix(), it will just set the transform with that matrix value. Which just applies a static transform.

 

By using TweenLite.to() with your transform x, you are animating it. But in this case if the initial value of translateX() is 0, then using a to() tween to animate x to 0 so there would be no movement to animate. 0 => 0 is 0.

 

Also the syntax is wrong for your to() tween, it is missing the duration parameter. See to() docs: https://greensock.com/docs/TweenLite/static.to()

 

TweenLite.to(target, duration, vars, position);

 

// wrong syntax
TweenLite.to(target, {x:0});

// right syntax
TweenLite.to(target, 1, {x:0});

 

But the equivalent to target.style.transform is really a GSAP set() method. Which is a zero based tween at its core. See set() docs: https://greensock.com/docs/TweenLite/static.set()

 

TweenLite.set(target, {x:0});

 

Also keep in mind that when using GSAP that it does all the heavy lifting for vendor prefixes for various browsers and browser versions.

 

For example if the browser is webkit.. the style.target.transform would be element.style.webkitTransform so you would have to use both. This way you can target both webkit and non webkit browsers.

 

target.style.webkitTransform = "matrix(1, 0, 0, 1, 0, 0)";
target.style.transform = "matrix(1, 0, 0, 1, 0, 0)";

 

But GSAP does all that for you so you worry about animating and not cross browser compatibility. ;)

 

Does that answer your question?

 

Happy Tweening :)

 

UPDATE:

I see you added a codepen thank you.. When GSAP animates i only see transform: matrix(1, 0, 0, 1, 100, 100); on the element inline style attribute.

 

  • Like 2
Link to comment
Share on other sites

I am sorry. What i meant is what is the difference between TwennLite.Set(target, {x: 0}) and target.style.transform?
When running the codepen you can also see that for a split second the div returns to its original position (0, 0) after the first tween is finished, but when the second tween starts it jumps right back to where it ended up after the first tween (100, 0), although i reset its transform property. Why is that?

Link to comment
Share on other sites

One of GSAP's specialties is dealing with transforms. It solves all kinds of problems (browser differences, bugs, SVG quirks, as well as always delivering a consistent order-of-operation). There's actually a lot of work involved in parsing an elements initial transform state (the browser reports it as a matrix() or matrix3d() string, so GSAP must pull apart all the components like x, y, scaleX, scaleY, rotation, skew, etc. from that). It caches those values in order to maximize performance. Typically when someone is using GSAP, they just let it handle all the transform stuff, so this strategy works great. However, it sounds like you're trying to use GSAP for editing/animating the transforms and then you're manually altering them directly (outside of GSAP), thus when GSAP uses its cached values it isn't delivering the results you wanted. 

 

Don't worry, there's an easy fix - you can force GSAP not to use its cached values by adding parseTransform:true to your next tween. However, I strongly recommend just using GSAP to do ALL of your transform-related stuff because it'll maximize performance, minimize bugs that you run into, and save you some headaches. So instead of directly setting transforms like element.transform = "matrix(1,0,0,1,0,0)", I'd do TweenMax.set(element, {x:0, y:0, scale:1, rotation:0}). 

 

Does that help?  

  • Like 4
Link to comment
Share on other sites

And just an FYI if you ever want to know what GSAP has set as the x, y or any other transform related value you can log out myElement._gsTransform.

You will get an object that has all of the properties shown below

 

Object {
  force3D: "auto",
  perspective: 0,
  rotation: 0,
  rotationX: 0,
  rotationY: 0,
  scaleX: 1,
  scaleY: 1,
  scaleZ: 1,
  skewType: "compensated",
  skewX: 0,
  skewY: 0,
  svg: false,
  x: 100,
  xOffset: 0,
  xPercent: 0,
  y: 0,
  yOffset: 0,
  yPercent: 0,
  z: 0,
  zOrigin: 0
}

 

open console to see values...

 

See the Pen VyMmEm?editors=0011 by GreenSock (@GreenSock) on CodePen

 

  • Like 5
Link to comment
Share on other sites

Thank you very much for your answers! Super helpful and easy to understand. It doesnt matter to me if i use element.transform = "matrix(1,0,0,1,0,0)"  or Set(). I just wanted to know whats going on under the hood so i can better understand what is happening.

  • Like 1
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...