Jump to content
Search Community

Animation of 3D cube in IE10 working with CSS, but need help to convert to GSAP

Jonathan test
Moderator Tag

Go to solution Solved by Jonathan,

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

There was a previous post about this. But this is focused more on IE10 transform-style: preserve-3d workaround, so i started it as a separate topic.

 

IE10 does not support transform-style preserve-3d. So to get around it in IE10, you cant just transform the cubes parent... you have to transform each child (face) of the cube separately.

 

I looked at the MSDN Transforms docs (scroll down to transform-style):

 

http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx

 

On the above Microsoft's Transforms link, Microsoft states:

 

"At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform."

 

So there is a workaround..  for modern browsers that support transform-style: preserve-3d, you instead apply the CSS perspective function to the cubes parent. But for IE10 that does not support transform-style: preserve-3d.. you have to apply the perspective as a property inside the transform css function. I got it working in IE10.

 

I made an example 3d cube using CSS animation and transform perspective, that does work in IE10 (test this below link in IE10):

 

See the Pen xiJLn by jonathan (@jonathan) on CodePen

 

So problem solved.. Yes :) and No :(

 

Yes this workaround works, but No, because, it has to manually be applied with CSS animation keyframes and transform perspective. I dont want to write all this CSS every time i want a 3d cube... So i'm trying to do this with GSAP, and let GSAP do the heavy lifting.

 

Ive been trying to convert this over to GSAP.. but am having issues, due to trying to animate all the faces together. They have to animate in just the right way in unison.

 

Here is a codepen trying to use GSAP and get each face to move as one cube

 

See the Pen CbFEo by jonathan (@jonathan) on CodePen

 

As you can see the sides move out of sync.

 

Just seeing if i can get some help from some of the GREAT minds here, to see if we can all come up with a way to get a 3D cube to work in IE10 with GSAP.. due to the none support of transform-style preserve-3d.

 

It can be done in straight CSS using the perspective property inside the Transform property, using CSS animation keyframes. But i think it would be better to have it all done with GSAP, and make it more dynamic.

 

Thank you to all that can help with this!  :)

See the Pen FEbzA by jonathan (@jonathan) on CodePen

Link to comment
Share on other sites

Hi Jonathan,

 

Indeed making this kind of stuff work in our beloved IE world can be quite a thorn in the side.

 

For this one the first thing I'll try would be to start simple, just like I commented in your codepen, and use relative values instead of absolute ones, that can be quite a knot. Also keep track of the _gsTransform object in order to check some of the faces' angles in order to see where they are at some points of the animation. That'll give you a better idea of how things are working.

TweenMax.to($(".box div"), 2, {rotationY:'+=360'});
TweenMax.to($(".box div"), 2, {rotationX:'+=360'});

Also try setting the box's sides initial position with GSAP, therefore the _gsTransform object gets into action right away.

 

In this codepen, that is quite more simple than yours, I made every object rotate with some set instances inside a timeline, like I said is not the same but can give you some ideas:

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

 

Hope this helps,

Rodrigo.

Link to comment
Share on other sites

Thank You Rodrigo, I will try just rotating around the X axis first, and get it to first work on one axis, and then build it up for the y and z axis.

 

How did the IE10 CSS only version look in IE10 for you..

See the Pen xiJLn by jonathan (@jonathan) on CodePen

.. were you able to see the 3D Cube animate around its axis with that workaround?? I fixed for Chrome so it should work in chrome now!

 

I will test more with your advise, and try to post back here once i play around with the GSAP version more.. Thanks again Rodrigo! :)

Link to comment
Share on other sites

Hi,

 

Am I the only one that consider this behaviour strange?. Click the button to rotate along the X axis:

 

See the Pen 41be6c2b63e7860d97d2a378594e9b66 by rhernando (@rhernando) on CodePen

 

Shouldn't the behaviour be the same of the CSS animations above, or I'm missing something big and making a fool out of myself here ^_^?

 

The rotate in the Y axis gives what's intended.

 

Also I've uploaded a more complete sample, it has all the faces of the cube so you can see that the only ones with trouble are the left and right ones:

 

https://docs.google.com/file/d/0B-0o-ayjhl3nZWtMV0JqMl92cTA/edit?usp=sharing

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

nice examples Rodrigo..

 

I was noticing that same behavior last night when i was testing. The Y axis would rotate around its access from the correct transform origin... but the X axis would inter-cross each and not keep the same distance from each other..

 

It almost looks like its rotating around the Z axis, and the faces are rotating in different clockwise (one going counter clockwise and the other clockwise)

 

maybe we could try the directionalRotation from the css plugin to have the Left and Right faces rotate the same direction...

 

but that still weird how the rotation is rotating around the Z axis instead of the X axis 

 

also on your downloaded example .. i noticed that the Left and Right face have that weird behavior and the other faces dont..

 

on your codepen, when i change inside your .btn1 event for the tween rotationX axis to rotationZ like this:

btn1.click(function()
{
  TweenLite.to($("div.face2"), 2, {rotationZ:'+=360', ease:Linear.easeNone});
});

since the behavior is rotating X like Z... so i figure that that by setting the rotation to the opposite of the behavior... i changed the rotationX to rotationZ ..  so now the left and right faces rotate like the Y axis

 

its like its rotating the parent of the face instead of the faces itself..

 

still weird behavior though.. why X acts likes Z and Z acts like X  :P

Link to comment
Share on other sites

  • 3 months later...

Hey Rodrigo,

 

Do you still have that codepen link that you setup with the strange behavior you noticed with rotation?

 

the links to the code pen seem to be all garbled up now. I was gonna try something to see if we can try to find out why that strange rotation behavior happens.

 

Thanks! :)

Link to comment
Share on other sites

  • 4 weeks later...
  • Solution

Alright... i took your advice Rodrigo and just tried animating one face at a time until i had all 6 faces animating in unison on Y axis.

 

Example - Test in IE10 & IE11 - preserve-3D GSAP workaround:

 

GSAP version:

 

CSS only version:

See the Pen xiJLn by jonathan (@jonathan) on CodePen

 

You can make it work if you are just rotating 360 degrees all the time but if you choose to be very specific with your rotations than you will need to account for when you rotate on the y axis and then rotate on the x axis... then you will get the rotate happen on the z axis. But you just need to rotate the nested divs for the left and right face instead.

 

:)

  • Like 2
Link to comment
Share on other sites

  • 10 months later...

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