Rotation help needed

[Lehmann]

Hi. 

 

I hope you can help me with some rotation issues.

 

See the codepen here: 

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

 

Thanks.

 

[Carl]

Something like this might work for you: http://codepen.io/GreenSock/pen/scBmr

The main thing to understand is the transformOrigin property lets you set the point that the object will rotate around.

[Rodrigo]

You can make it a bit better (not that there's something wrong with master Schooff's solution ). In order to avoid the extra translation you can set the transform origin based on the element's height, like this:

$("#restart").on("click", function() {
  var mytarget = $('#redBox'),
      transformPoint = mytarget.height()/2+"px "+mytarget.height()/2+"px";
  
  TweenLite.to(mytarget, 1, {rotation:"90",top:"0", transformOrigin:transformPoint});
})

Here's a fork of Carl's codepen:

 

See the Pen cqkhj?editors=001 by rhernando (@rhernando) on CodePen

 

Like that it doesn't matter the height of the element, the rotation will end up as you want.

[Lehmann]

Thank you both for such a quick reply. Both work for the 90 degree rotation and I understand thet transformOrigin is my best friend in that matter. Unfortunatly neither will work with a rotation of 45 degree. I made a fork of Rodrigos Codepen and added the needed translation for 45 degrees.

 

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

 

I guess I will have to somehow calculate the bounding box of the element in its final rotation before actually doing the rotation, then calculate the first x and y intersection of the element in its bounding box and use these values as left and top values in the in the translation.... and I need to do that before actually calling the tween-class since I need the values in the tween....

[Rodrigo]

Yep, you're going to need help from a Mathematician-Philosopher that died almost 2500 years ago

 

http://en.wikipedia.org/wiki/Pythagorean_theorem

 

a² + b² = c²

 

Basically you know the value of c and in this case the values of a and b are equal, so the expression reduces to this:

 

2*a² = c²

 

Now with some mathemagics...

 

a = c / 1.4142

 

In this case c is the height of the element and to make it work you need to use the standard transform origin point, which is the top left corner and translate the element the value of a in the x axis or left.

[Carl]

Nice work, Rodrigo!

[Lehmann]

Thanks Rodrigo. That was pure enlightment . I just didn't "see" the triangle...

 

So... I have two angles (90 and element-rotation) and the "c²" with "c²" either being the width or the height of the element, depending on the current element rotation. That way I'm able to calculate "a" and "b" for any rotation.

 

Thanks for such a great help!!!