Jump to content
Search Community

Need help with properties in _gsTransform object

Praney Behl 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

Sorry to bother again guys, there is another quick question if you don't mind me asking.

I had a look under the hood into the _gsTransform object and it has a few properties. I was able to relate some properties but it would be great to know better about which _gsTransform property are related to what CSS property.

 

Here it is:

perspective: ?
rotation: ?
rotationX: ?
rotationY: ?
scaleX: ?
scaleY: ?
scaleZ: ?
skewX: ?
skewY: ?
x: ?
y: ?
z: ?
zOrigin: ? 

I am sorry if this has been asked before, but I couldn't find any reference to these. Some light on this will be really helpful.

 

Thanks,

Praney

Link to comment
Share on other sites

hello Praney Behl,

  • perspective =  perspective()  ( standalone perspective )
  • rotation = rotate()
  • rotationX = rotateX()
  • rotationY = rotateY()
  • scaleX = scaleX()
  • scaleY = scaleY()
  • scaleZ = scaleZ()
  • skewX = skewX()
  • skewY = skewY()
  • x = translateX()
  • y = translateY()
  • z =  translateZ()
  • zOrigin = ?

I'm not sure what zOrigin is ?? ..  It might mean transform-origin ??? .. but Jack or Carl would be the best to answer that, unless someone else knows ?

 

:)

Link to comment
Share on other sites

ok cool.. I also forgot to mention that if it is perspective that is used within the CSS transform function, then it is transformPerspective:

 

Like so:

// perspective, applies perspective to the elements children
perspective = perspective(600);
// transform perspective, applies perspective to only the element
transformPerspective = transform: perspective(600);

:)

  • Like 3
Link to comment
Share on other sites

That's great  :)

 

Although if I look at my sample code created in another thread :

 

css:

@keyframes flyanimation {
0% {
opacity: 0;
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}

30% {
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}

100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(1, 1) rotate(0deg) translateY(0%);
}
} 

and the gsap code:

TweenMax.fromTo(item, .6, {
transformOrigin: "0% 100%",
scale:0,
rotation:470,
x:"100%",
autoAlpha:0
},
{
transformOrigin: "50% 0%",
scale:1, rotation:0,
x:"0%",
autoAlpha:1
}
); 

Here: 

See the Pen pImHz by praneybehl (@praneybehl) on CodePen

 

To recreate similar animation 'x' in GSAP represents 'translateY' in CSS. This is quite contradictory though.

 

Similarly, while using transformOrigin: "x, y" in GSAP acts as transform-origin: "y, x" in CSS.

Or maybe I am doing something wrong.

 

I am hoping maybe Jack or Carl can explain why this is.

 

Praney

Link to comment
Share on other sites

Hi Praney,

 

zOrigin is the point along the z-axis that an object is transformed around as specified as the third string value in the transformOrigin property:

//set zOrigin to -200
TweenLite.set("#gsapbox",  {transformOrigin:"50% 50% -200", transformPerspective:600})

http://codepen.io/GreenSock/pen/BsHuf

 

 

--

 

Also, in GSAP you can not use percentage values for 2D transforms. So x:200% will not work, that value will be converted to pixels which may explain some of the odd behavior your are experiencing.

 

--

 

Can you please create a super simple example showing x:someValue moving along the y-axis? I'm not quite sure how those values would get mixed up. 

  • Like 3
Link to comment
Share on other sites

  • 4 years later...

Hi,

 

The gsTransform object is used primarily to store properties related to CSS transform values so that you as a developer do not need to read values from a 2D or 3D matrix. Originally it was intended to be a private property for internal use.

 

Please see the list at the bottom of the page: https://www.w3schools.com/css/css3_2dtransforms.asp

width and height are not related to transforms and I don't think xOrigin and yOrigin are css properties. 

 

These are the values stored using a more recent version of TweenMax

 

Object {
  force3D: "auto",
  perspective: 0,
  rotation: 10,
  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: 100,
  yOffset: 0,
  yPercent: 0,
  z: 0,
  zOrigin: 0
}

open this demo in a new window and open js console

See the Pen aYayNw?editors=1011 by GreenSock (@GreenSock) on CodePen

 

If you inspect the box you will see that the transform-origin is part of the inline style.

  • Like 3
Link to comment
Share on other sites

OK, yeah that's sensible. I will echo the sentiment that a .get() type of method for that kind of stuff would be nice. Maybe width is not in the transform but I set it and change it all the time through GSAP so a getter prop would be quite helpful! Thank you for all that you guys do!

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