blowsie

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

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?

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?

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.

I have ran into another issue : | I created an animation with 4 simple steps; View Isometric Front View Isometric Back View Flat Back 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?

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

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?

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