Jump to content
Search Community

Rotation help needed

Lehmann test
Moderator Tag

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

You can make it a bit better (not that there's something wrong with master Schooff's solution :D). 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.

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

Link to comment
Share on other sites

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




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.

  • Like 3
Link to comment
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!!!

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.
  • Create New...