Jump to content
Search Community

rotationX !== transform: rotateX

blowsie 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

Hi, 

 

I was converting my 3d design from being static to animated

My design is isometric and one component of it looks like the one attached.

 

After some fiddling, I got the desired results in the browser using css transform rotate x,y,z

 

When moving from CSS transform, to GreenSock rotateX rotateY and rotateZ , which uses matrix3d I got a different result.

See the demo, I was expecting the blue box to be inline with the red one.

 

Is this by design or a bug? Am i doing something wrong? Should I be using something else? 

 

Many Thanks,

Sam

Photoshop_2018-03-23_15-54-45.png

See the Pen NYvKvg by blowsie (@blowsie) on CodePen

Link to comment
Share on other sites

That's just an order-of-operations thing which I explain here: 

If you NEED that non-standard order-of-operation, you could just animate to the "transform" property instead of the component shortcuts (rotationX, rotationY, etc.), like: 

 

TweenMax.to('.gsap-box', 1.3, {transform: "rotateX(36deg) rotateZ(331deg)"});

 

Just beware that it's typically more efficient (uses fewer resources) and allows rotations beyond 180 degrees if you use the component shortcuts. The "transform" method basically converts things into a matrix3d() under the hood using the browser itself, and parsing those is inherently ambiguous math-wise. 

 

Does that explain things? Let us know if you need anything else. Happy tweening!

  • Like 5
Link to comment
Share on other sites

Thanks for clearing this up, and such a rapid response!

 

I would be happy to use the gsap shortcuts that utilise css matrix3d, If i were able to reproduce the angle / rotation in my design (screenshot).

Perhaps you could point me in the right direction on how I could do this?

  • Like 1
Link to comment
Share on other sites

Sure, GSAP actually records the values in a _gsTransform object attached to the element. So you could temporarily shove your transform string to GSAP, have it do the parsing, and then read back what it got so that you could rewrite your tween values accordingly with the components. Here's a function that'll do it all for you: 

//we'll just log out the results here...
console.log(convertTransforms("rotateX(36deg) rotateY(0deg) rotateZ(331deg)"));

//feed in the transforms string and this function will return an object with the corresponding components broken out, like rotation, rotationX, rotationY, scaleX, etc.
function convertTransforms(transforms) {
  var temp = document.querySelector("#_gsap-temp"), t;
  if (!temp) {
    temp = document.createElement("div");
    temp.setAttribute("id", "_gsap-temp");
    temp.style.cssText = "position: absolute; visibility: hidden;";
    document.querySelector("body").appendChild(temp);
  }
  TweenLite.set(temp, {transform:transforms, immediateRender:true, lazy:false});
  t = temp._gsTransform;
  return {x:t.x, y:t.y, z:t.z, scaleX:t.scaleX, scaleY:t.scaleY, rotation:t.rotation, rotationX:t.rotationX, rotationY:t.rotationY, skewX:t.skewX, skewY:t.skewY};
}

 

So in your particular case, it's:

  • rotation: -24.153747129210508
  • rotationX: 32.43382902141896
  • rotationY: 16.556422776126567

Does that help? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

I have ran into another issue  : | 

 

I created an animation with 4 simple steps;

  1. View Isometric Front
  2. View Isometric Back
  3. View Flat Back
  4. View Flat Front

In CSS keyframes the  animation transitions smoothly as expected, however in GSAP the transition from  "2. View Isometric Back"  to "3. View Flat Back" has an unnecessary spin, why does this happen and how can i prevent it?

 

See the Pen vReaRg?editors=0111 by blowsie (@blowsie) on CodePen

 

Link to comment
Share on other sites

Yep, GSAP is doing exactly what you're asking it to do. But again, this is an order-of-operations issue. If you really need to define your rotations in that order, you could simply tap into GSAP's string-parsing capabilities and use a proxy object like this: 

 

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

 

That circumvents the entire CSSPlugin and lets you apply the string directly. GSAP will find the numeric values inside the string and animate just those. Make sure you've got matching quantities in order for that to work, of course.

 

Does that help? 

 

  • Like 2
Link to comment
Share on other sites

Thanks for your solution. For me its a real shame to have to move away from what makes GSAP great and simple just to achieve such a simple animation. Especially as the same animation on the front side works perfectly.

Knowing when to move away from the CSS plugin to using style.transform will probably be a large obstacle for my project.

 

oE9svgjgzVGw23lu38Rm1MH1F6CTFcGnxwSOuEq6

Link to comment
Share on other sites

1 hour ago, blowsie said:

Knowing when to move away from the CSS plugin to using style.transform will probably be a large obstacle for my project.

 

That's usually not a issue. You've just come across a tricky situation. If you tried to convert your CSS over to three.js it would probably transform it the same way GSAP is doing it.

 

While not ideal, sometimes using a wrapper can help alleviate some of those problems. For example, I converted this animation over to GSAP... well, it originally had the rotateX at 70deg.

http://jsbin.com/xolacasiyu/edit?js,output

 

But doing a straight conversion to GSAP didn't work as expected, so I just applied the rotateX transform to a wrapper element.

 

See the Pen woXQNz by osublake (@osublake) on CodePen

 

Just an idea. I don't know if that will work for everything you are trying to do.

 

  • Like 3
Link to comment
Share on other sites

15 hours ago, GreenSock said:

Yep, GSAP is doing exactly what you're asking it to do. But again, this is an order-of-operations issue. If you really need to define your rotations in that order, you could simply tap into GSAP's string-parsing capabilities and use a proxy object like this: 

 

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

 

That circumvents the entire CSSPlugin and lets you apply the string directly. GSAP will find the numeric values inside the string and animate just those. Make sure you've got matching quantities in order for that to work, of course.

 

Does that help? 

 

 

 

Whilst my animations can be part of a timeline, they are also available as functions which can be called on other events, such as click, over, drag, or from other code. So unfortunately I am unable to use the timeline onUpdate function to apply the transforms.

For example

function envelopeSetViewFlatBack() {
  return TweenMax.to('.env', 1, {
    rotation: 0,
    rotationX: 0,
    rotationY: 180
  });
}

tl.add(envelopeSetViewFlatBack());

 

How could I apply the string approach outside of a timeline?

 

Link to comment
Share on other sites

Sorry to keep posting, just trying to get to the bottom of this.

 

I came a across the directional rotation plugin and decided to try the short suffix it offers.

return TweenMax.to('.env', 1, {
  directionalRotation: {
    rotation: '155.8462528707895_short',
    rotationX: '147.56617097858106_short',
    rotationY: '-16.556422776126567_short'
  }
});

In this case the animation still does an unnecessary spin, does this mean the _short suffix has a bug as it does not take the shortest  possible rotation?

Link to comment
Share on other sites

On 3/27/2018 at 6:43 AM, blowsie said:

In this case the animation still does an unnecessary spin, does this mean the _short suffix has a bug as it does not take the shortest  possible rotation?

 

I doubt it, unless you're saying that it went MORE than 180 degrees in one direction. But you'd still see somewhat of a "flip" even if it was going the shortest direction, like animating from -30 degrees to 220 degrees would technically be a 170 degree change (which is indeed shorter than 250 degrees that it'd normally go). See what I mean? 

 

If you've got a demo that shows it going more than 180 degrees even with the "_short" on the end, I'd love to see it. That'd indeed be a bug. 

 

Glad you got things working with an onUpdate. Happy tweening!

 

(By the way, sorry about the late reply - Gmail started flagging almost all emails from the forums as spam in my account several days ago and I just now discovered it!) 

  • Like 2
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...