CSS transforms, transform origins, positioning and their order.

[Mr Pablo]

I have a complex situation that I need to find a solution for.

 

I'll try to explain:

 

I am using FabricJS to build animations in a HTML5 Canvas. It uses a "center center" origin for everything.

 

I am translating the positions, rotations, scaling etc into GSAP. I am setting the transform-origin on my assets (text & images) to also be "center center", so that when something rotates, it rotates around the central point, and looks "correct".

 

However, the position is still dealt with using the "top left" point of the asset.

 

For the most part, I can handle this, and correctly position assets.

 

Now, an issue arises when assets are rotated.

 

In FabricJS, I store the assets "bounding box" dimensions, so if a square is rotated 45 degrees, the bounding box is larger then the normal height and width, and I can again correctly position it using the new bounding box dimensions.

 

This works for the most part with rotated assets, until you rotate an asset so its bounding box width is smaller then the height.

 

This all comes back to the fact that GSAP/CSS uses the top left point for positioning, and the transform-origin for the rotation.

 

Another factor is that it seems GSAP moves the asset to its xy (top/left) coords, THEN applies the rotation.

 

So, is there a way to disconnect the xy coords and the rotation transform?

 

Or, tell GSAP to use the center center origin for positioning?

 

In the CodePen, the first piece of text is rotated, but the bounding width is greater then the bounding height. It is in roughly the right position.

 

If you comment out the first "objectArray[0]" and uncomment the one below it, the text is rotated to about 90 degrees. It should be off the screen, but isn't.

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

[Diaco]

Hi Mr Pablo 

 

if i understood correctly 

 

the position is still dealt with using the "top left" point of the asset

 

 

, i think you need this : 

TweenLite.set("#myDiv",{xPercent:-50 , yPercent:-50});

[Mr Pablo]

 

Hi Mr Pablo 

 

if i understood correctly  

 

the position is still dealt with using the "top left" point of the asset

 

 

, i think you need this : 

TweenLite.set("#myDiv",{xPercent:-50 , yPercent:-50});

 

Should this be set regardless, or only in the even the bounding width is less then the bounding height?

[GreenSock]

If I understood correctly, Diaco is exactly right. In fact, the whole "xPercent/yPercent" feature came out of a request by a user who was doing precisely what you're attempting. He wanted to plot coordinates based on the elements' center and yet layer "regular" transforms on top of those. Setting xPercent and yPercent to -50 puts its center right on top of where the native top/left corner. This isn't a special case for when the width/height are in a certain ratio/configuration - it delivers consistency across the board. 

 

Or I may have misunderstood what you're asking.

[Mr Pablo]

I wonder if that user was me? haha!

[GreenSock]

Ha ha. No, it wasn't you, but hopefully you can benefit from it.