Jump to content

Mr Pablo

Transform Origin Issues

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

I have created an animation (using Fabric JS as a building platform) and I am now translating the JSON object to GSAP TweenMax.


In Fabric Js, the objects all use a "center center" registration point, and I have also set the transformOrigin in GSAP to "center center".


EG in Fabric, I have a 1280x720 canvas. A 1280x720 image is loaded to the canvas, having the final coords of 640 x 360 (the middle of the canvas)


Porting this across to GSAP however, with the exact same values, moves the image to show its top left corner at those coordinates.


I have a master <div> of 1280x720 and the image is being held in a child <div>, set to 1280x720 (the image size) with "position: absolute" and "transformOrigin: center center". X and Y are set to the coords fetched form the Fabric Canvas, 640x360.



Any ideas what's going on?


EDIT - just tried the various combinations of transformOrigin and none of them make any difference to the position of my image.

Link to comment
Share on other sites

transformOrigin is a special property that is recognized by our CSSPlugin which is used when modifying certain CSS transforms of DOM elements like rotation, rotationX, scale, scaleX etc. 


FabricJS is a canvas library and canvas objects are not controlled by CSS and thus transformOrigin doesn't apply.


There may be some native FabricJS Object properties or methods that allow you to offset the registration  transformation point: http://fabricjs.com/docs/fabric.Object.html

Link to comment
Share on other sites

Yea, I am aware of the differences etc :)


But the crossover is fairly simple (apart form this issue!) as I am using a JSON object that hold coordinates etc which can easily be translated across the platforms.


I think I found out the cause of the problem: I believe it is due to the CSS3 property "transform-origin" using local coordinates, respective of the element in question.


I tried, with "center center" origin, using the following for the x and y coords: 

x = left - (width / 2)

Where "left" is the Canvas X coord, in px, and width is the width of the object. Left is 640 and width is 1280.


It's not super ideal, because there could be issues down the line, but this seems to fix the issue and my assets are placed correctly.

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.