Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Icewolf

Rotation issue (order of rotations)

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

Hey, I have one quick question to ask.

 

I've already rotated my 3D object with rotateX so that it's a bit angled up.

 

Next I want to rotate around my 3D object on the Y axis, so I use rotateY, but the problem is that it's already affected by rotateX that I set previously, so it rotates around the Y axis of the 3D object it self.

 

Is it possible to use rotateY by specifying an UP vector it should rotate around?

 

Thanks!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

What you're experiencing is expected behaviour and, IMO, what you should expect, otherwise it'd look very unnatural.

 

The rotation of an element is considered based on it's own axis (X-Y-Z) so when the element is rotated in a specific axis the whole coordinate system is rotated as well. Then if a new rotation is specified in a different angle, it's based on the element as it is right now, which is already rotated in another axis.

 

What you could do is wrap the element and rotate the parent element. All you have to do is add a transform-style property to the parent with "preserve-3d" as the value. Keep in mind though that this wont work in any version of internet explorer.

 

CSS

#parent
{
  transform-style:preserve-3d;
  width:100px;
  height:100px;
}
#child
{
  width:100px;
  height:100px;
  position:relative;
}

JS

var tl = new TimelineLite();

tl
.to("#child", 1, {rotationY:45}, 1)
.to("#parent", 1, {rotationX:45}, 3);

You can see it here:

 

See the Pen sdGLJ by rhernando (@rhernando) on CodePen

 

Feel free to fork and adapt it to your scenario.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Ah, thank you! That's exactly what I ended up doing. I wrapped the object into 2 containers that represent each axis, x and y.

 

Thank you for the great explanation and help. I'm looking forward to use GSAP a lot more in the future :) I'll make sure to share what I'm working on once it's done!

 

BTW, it would be extra cool feature if you could specify a vector to rotate around ;)

 

Thanks again!

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