Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

Seperate transform origin and X, Y coordinates?

Started by Mr Pablo, Feb 24 2014 12:51 PM

8 replies to this topic
Mr Pablo

Post #1 by Mr Pablo , 24 February 2014 - 12:51 PM

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?


  • Back to top

Jonathan
  • Jonathan
  • 3,195 Likes (Superhero)
  • 2,822 posts

Post #2 by Jonathan , 24 February 2014 - 01:14 PM

Hello Mr Pablo,

 

Have you looked into the CSS property transform-origin ?

 

https://developer.mo...ransform-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 :)


  • Back to top

Mr Pablo

Post #3 by Mr Pablo , 24 February 2014 - 01:18 PM

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.


  • Back to top

Jonathan
  • Jonathan
  • 3,195 Likes (Superhero)
  • 2,822 posts

Post #4 by Jonathan , 24 February 2014 - 02:27 PM

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.


  • Back to top

Mr Pablo

Post #5 by Mr Pablo , 24 February 2014 - 02:28 PM

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


  • Back to top

Jonathan
  • Jonathan
  • 3,195 Likes (Superhero)
  • 2,822 posts

Post #6 by Jonathan , 24 February 2014 - 02:32 PM

Without a code example, its hard to see whats happening in your code.

 

Link to a video by GreenSock on How to Create a Codepen Demo.


  • Back to top

GreenSock

Post #7 by GreenSock , 24 February 2014 - 02:41 PM

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. 


  • Back to top

Rodrigo
  • Rodrigo
  • 1,790 Likes (Superhero)
  • 1,549 posts

Post #8 by Rodrigo , 24 February 2014 - 02:48 PM

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.greens...-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/e...iveTransform.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.


If you have the will, you'll find a way...

  • Back to top

Mr Pablo

Post #9 by Mr Pablo , 24 February 2014 - 03:35 PM

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!


  • Back to top




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

3rd Party Advertisement