Mr Pablo

Seperate transform origin and X, Y coordinates?

  • 9 posts in this topic

9 posts in this topic

I am looking for a way to allow an asset to be rotated about it's centre point, but be positioned as if the transform origin was "top left" (or even "top right" etc)

 

Is this possible?

Share this post


Link to post
Share on other sites

Hello Mr Pablo,

 

Have you looked into the CSS property transform-origin ?

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

 

Default transform-origin is: 50% 50% 0 (X Y Z)

 

So if you want top left then your transform-origin is: 0 0 0

 

You can also try to set the transform-origin on your element in your stylesheet or use the GSAP set() method to apply the transform-origin property, or add this property to your tweens.

var myElement = document.getElementById("myElement");
TweenMax.set(myElement, {transformOrigin:"0 0 0"});

Does this help?

 

If not if you can provide a codepen demo example so we can see your code in context.

 

Thanks :)

Share this post


Link to post
Share on other sites

I have, and it seems I haven't been too clear :P

 

I have a square, 100 x 100. I want to position it (x and y coordinates) as if the origin was set to "top left" (or "0 0").

 

BUT, I want to tween the rotation of the square as if the origin was "center center" (or "50 50" or "50% 50%") WITHOUT the position being compromised.

 

Basically, in an ideal world, there would be two origins, one for position, one for rotation (even one for scaling) but as far as I can see, there is only the one, and it effects both position and rotation.

Share this post


Link to post
Share on other sites

Since your only positioning the square using top and left CSS position, then you can rotate the square using transform-origin.  Because transform-origin will only affect the rotation of the square, not the top left position of your square.

 

So just position the square to the top left. And then rotate the square and use transform-origin to have it rotate in, center center or 50% 50%.. which is the same thing by default.

 

Transform Origin will NOT affect your CSS position of top and left, it only affects transformed elements: scale, rotate, translate, and skew ...

 

The transform-origin property allows you to change the position on transformed elements.

 

Do you know what I mean?

 

If your still having an issue.. please provide a codepen demo example so we can see your code in context, to better help you.

Share this post


Link to post
Share on other sites

Well I am setting the position with X and Y properties, and changing the transformOrigin property does in fact change the way the asset is positioned...

Share this post


Link to post
Share on other sites

Mr. Pablo, it's geometrically and logically impossible to do what you're asking because imagine you have a 100x100 box whose origin is in its top left, and you position it at x:0, y:0, and then you rotate it 90 degrees. If you rotate it as if the origin is in its center, where is its top left corner now? It's not at x:0, y:0 anymore; it's at x:100, y:0! So you cannot have origins in two places. 

 

Maybe if you explain WHY you want to have two origins like that, we could help you come up with some other solution to the real problem. 

 

Ultimately I suspect that any solution is going to require some trigonometry.

 

Or maybe you could just build your elements with a structure that makes this trivial - wrap your element in another element and then do rotation on the inner element and positional transforms on the outer/wrapper one. Just a thought. 

  • 4 people like this

Share this post


Link to post
Share on other sites

Hi Paul,

 

I'm afraid that doing what you're after is not possible.

 

CSS transforms change the property you're tweening from the element's center by default. If you later change that element's transform origin it'll also change the starting point of the first transform you made (I'm pretty sure you already saw that behaviour) in a very abrupt way, like this:

 

http://codepen.io/rhernando/pen/JIsDr

 

Here's also a more detailed explanation:

 

http://forums.greensock.com/topic/7727-unexpected-animation-behaviour-element-moved-before-2nd-animation/

 

Maybe you could take a look at this library and see if you can get something out of it to make it work the way you need:

 

https://github.com/edankwan/PerspectiveTransform.js

 

Unfortunately this is not GSAP related, just the way things are regarding CSS transforms and transform origin.

 

What you could try is nest your element inside as many parents as extra transforms you need.

 

For example you can rotate the target element, then if you need to translate, you can translate a parent element and then scale a grand-parent element.

 

Rodrigo.

  • 1 person likes this

Share this post


Link to post
Share on other sites

Greensock - My reason why are long winded but I'll try to give you a run down :)

 

I have a platform where people can build animations, using Canvas and FabricJS.

 

I then translate the Canvas/FabricJS objects into an animation controlled by GSAP.

 

Each asset (images and text) is added to a container, properties are set and tween transitions added.

 

The issue arises when we have text aligned to the left or right. Using FabricJS, a new property, called "centeredRotation" allows for a "fake" origin when you rotate the object, yet it still keeps its real origin for placement, "top left" in our case.

 

One of the animation presets I built in is to spin the object 360 degrees, but when text spins with an origin of "top left" in GSAP, I'd actually prefer it to rotate about it's centre (a purely aesthetic thing).

 

The idea of using a wrapper might do the trick if I can figure it out!

Share this post


Link to post
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.