Jump to content
GreenSock

g.legenty

2 Faces box rotation problem

Recommended Posts

Hi! i can't  rotate a two faces box correctly with TweenMax but with pure CSS it works fine.

 

TweenMax version

 

CSS only version

See the Pen VeNpwE by glegenty (@glegenty) on CodePen

 

i don't see what i'm missing.

 

Thanks for you help

See the Pen adxpQy by glegenty (@glegenty) on CodePen

Link to comment
Share on other sites

Hey g.lenty and welcome.

 

It seems the JS version is messing up due to some render layering issues. You can use the following to correct it (I did it in the JS so GSAP does the prefixes for me) and removing the transform-style on .box-card

TweenLite.set($('.joinUsBox'), {css:{
    transformPerspective:1000, 
    transformStyle:"preserve-3d", 
    backfaceVisibility: "hidden"
}});

You probably also want to remove the CSS transitions because they cause jank and use .reverse and .play to toggle between the states to avoid creating new timelines each time. In

See the Pen KVYXOJ?editors=0010 by Zeaklous (@Zeaklous) on CodePen

I made these changes for you as well as some other CSS cleanup.

 

For more information about the cause, Jonathan's post here can likely provide some insight.

  • Like 2
Link to comment
Share on other sites

Hello g.legenty and welcome to the GreenSock Forum!

 

This has to do with the order of operations of the CSS transform function.

GSAP will always first move (translate) the element and then secondly rotate, this way you always get consistent results. Whereas with CSS transitions or CSS animation will always first rotate and then secondly translate an element. Which can cause different behavior cross browser.

See GreenSocks response about the CSS transform order of operations here:

http://greensock.com/forums/topic/11779-precedence-for-translate-and-transform-css/#entry48096
http://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/#entry29803
http://greensock.com/forums/topic/13673-svg-gsap-workflow/#entry57376
http://greensock.com/forums/topic/13673-svg-gsap-workflow/#entry57379

 

To make it full cross browser including IE10 and IE11 you would have to change the markup of your cube and animate each face separately. This is to get around IE not supporting CSS property transform-style with a value of preserve-3d. And also to help with some gimbal lock issues when animating left and right face of a 3d cube.

 

So here is an example of a cross browser 3D cube with only rotateX, click the toggle button:

 

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

 

I only modified one of my previous codepens so it would animate rotateX (rotationX) for you in the above codpeen.

 

And here is another way to rotateX with some mini 3D cubes ( no IE due to no preserve-3d support and different markup )

 

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

 

I hope this helps! :)

 

:)

  • Like 6
Link to comment
Share on other sites

Thanks you very much for your help guys!
I used your solution Jonathan, and it works really well.

  • Like 1
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.
×