Rotation help needed

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

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.

Share on other sites

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.

Share on other sites

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.

Share on other sites

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

Share on other sites

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

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

a2 + b2 = c2

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*a2 = c2

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.

• 3
Share on other sites

Nice work, Rodrigo!

Share on other sites

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

So... I have two angles (90 and element-rotation) and the "c2" with "c2" 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!!!