[rotationX !== transform: rotateX]

Thanks guys using the TweenMax.to onUpdate function I was able to apply the CSS as suggested by Jack

[rotationX !== transform: rotateX]

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?

[rotationX !== transform: rotateX]

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?

 

[rotationX !== transform: rotateX]

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.

 

[rotationX !== transform: rotateX]

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

 

[rotationX !== transform: rotateX]

Thanks alot!  I created a quick pen from this for anyone wanting to use this as a calculator.

 

See the Pen ZxXxYM?editors=0012 by blowsie (@blowsie) on CodePen

 

[rotationX !== transform: rotateX]

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?

[rotationX !== transform: rotateX]

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

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