Animate rotate3d angle from 0 to 360 deg

[Sirisha Pendem]

Hi,

I want to achieve animation similar to https://animista.net/play/entrances/rotate-in/rotate-in-diag-2

If I give the following properties to gsap, I expect the object to a complete rotation. But in this case the animation doesn't even start playing

{
    transform: "rotate3d(-4.9, 1, 0, 0deg)"
  },
  {
    transform: "rotate3d(-4.9, 1, 0, 360deg)",
    duration: 1
  }

 

Any help is appreciated. Thank you.

 

See the Pen ZEpQPMb by cjayanth95 (@cjayanth95) on CodePen

[ZachSaucier]

Hey Sirisha. Why would you expect it to make a full rotation? The start and end values are effectively the same, so by definition there's nothing that needs to be done. You should try values like 280, 320, and 330 to see that each time as you near 360 the rotation gets less and less until it's 0 at 360. This has nothing to do with GSAP, it's simply how rotate3D works  

 

With that being said, we don't recommend animating the transform property directly. Instead we encourage you to stick to just rotateX and rotateY to do the rotations that you need to do. That way you can combine them with other transforms if necessary (and I think it's easier to work with).

[Sirisha Pendem]

 

10 hours ago, ZachSaucier said:

With that being said, we don't recommend animating the transform property directly. Instead we encourage you to stick to just rotateX and rotateY to do the rotations that you need to do. That way you can combine them with other transforms if necessary (and I think it's easier to work with).

Hey Zach, thanks for your reply. With rotate3d, it's possible to specify the axis of rotation, where as rotateX,rotateY only rotate about x,y axes.

In my case , I want to achieve one full rotation of an element about the diagonal axis.(https://animista.net/play/entrances/rotate-in/rotate-in-diag-2) . Using rotate3d, I could specify the diagonal axis easily like rotate3d(width/height, 1, 0, rotationAngle). And varying the rotation angle from 0 to 360 deg would give me the correct animation.

Do you suggest any other way of achieving one full rotation about the diagonal axis using gsap?

 

[ZachSaucier]

There's two ways you could create this sort of thing:

1. Use a container element as this thread covers.
2. Animate CSS variables instead:
   

   See the Pen MWjyjpj?editors=0110 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Just one more option - you could leverage GSAP's ability to animate complex string values and then an onUpdate to apply accordingly: 

See the Pen a0cf09600942e1f37c323598f8d52fdc by GreenSock (@GreenSock) on CodePen