Special 3d animation rendering issue.

[RolandSoos]

I have a special case, where I would like to rotate 90 degree a cuboid. It all works fine in Chrome, but there are some glitch in latest Firefox and I'm not able to find out what could cause this:

This happens lot of time for me, also when you resize the lower pane of codepen, it sometime renders fine.

 

Also before the animation finish, the red pane is false rendering it's rotation and also another glitch happen. You can see it in codepen, by commenting out timeline.play(); and uncomment: timeline.progress(0.93);

 

Is there any way to solve this issue?

See the Pen yyYWXV by anon (@anon) on CodePen

[RolandSoos]

Hmm, It seems like this bug only happens on Firefox 33. Firefox 34 works as expected, strange...

[Jonathan]

Hello RolandSoos, and Welcome to the GreenSock Forum!

 

Are you seeing this in Firefox on Windows (PC) or an Apple device?

 

I could only see what you were seeing in your images above, by viewing your codepen example in Full Page mode.

 

You can try adding force3D:true to your tween so it uses hardware acceleration for your CSS 3D transforms.

 

I tested in both Firefox 33 and 34 .. and force3D:true solves the bug.

 

Check out this example of yours i forked (copied) and added force3D:true

 

Full page mode (fixed):

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

 

Editor mode (fixed):

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

 

You should remove the backface-visibility property off of the .background class since it is already on its parent div. Since backface-visibility was on both the parent and its child, it was causing this render issue in Firefox.

 

Also you will notice i removed (commented out) your transform-style and backface-visibility  CSS properties in the CSS panel in codepen. I am using GSAP to add those properties so they get applied with the proper vendor prefix if needed, for cross browser.
:

// use GSAP to apply your CSS properties for full cross browser compatibility
TweenLite.set([".tile-0-0",".side-bar"], {transformStyle: "preserve-3d"});
// only set backface-visibility on your cube faces  
TweenLite.set([".bar-0",".side-bar"], {backfaceVisibility: "hidden"});  

// then i added force3D to your to() tween
timeline.to(tile.get(0), 5, {
                    rotationX: -90,
                    x: 0,
                    y: 579 / 2,
                    z: -579 / 2,
                    force3D:true // added force3D
}, 0);

:

This way GSAP handles the heavy lifting for cross browser CSS properties that require a vendor prefix.

 

force3D is part of the CSSPlugin:

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.

 

I hope this helps!

[Diaco]

Hi RolandSoos , Jonathan 

 

Jonathan is right , and in addition ; the glitch at the end , is a FireFox's issue/bug , not GSAP 

pls check this out ( Carl answer ) for the FireFox glitch issue :

 

http://greensock.com/forums/topic/10951-firefox-transform-perspective-and-rotation-glitch/?p=43874

[Jonathan]

Hello Diaco and thanks! .. I know this is not a GSAP bug, but a Firefox bug. 

 

That issue Carl was referring too in your link above.. was when perspective was used.. but in this case perspective isn't being used.

 

But this bug in Firefox can be fixed by using force3D:true and also by removing the backface-visibility off of the .background class since it is already on its parent div. Since backface-visibility was on both parent and child it was causing this render issue in Firefox.

 

MDN backface-visibility: https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

 

[RolandSoos]

Thank you guys for the great answers. Also I'm stuck with my new example which derived from this project.

 

Here is my new codepen:

See the Pen EaPaeg by anon (@anon) on CodePen

 

On the JS panel I can give in the width, height and depth of the cuboids, then just animating them to each of the side of the cube/cuboid.

 

The problem is that it has some main rendering glitches in Firefox and also in Chrome on Windows. In Chrome the Left side panel (the panel which is on the left side from the actual front panel). Firefox just produce random glitches with the same panel.

 

Could you give me some tips for this example too?

[Jonathan]

Hello RolandSoos, and Welcome to the GreenSock Forum!

 

What you need to do is add the CSS property transform-style: preserve-3d on your faces.

 

Check out this working example fixing the issue. View in Firefox (tested in Firefox 33 and 34)

 

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

:

TweenLite.set(".tile", {
    backfaceVisibility: "hidden",
    transformStyle: "preserve-3d"
 });

:

Basically what you want to do is place transformStyle:"preserve-3d" on each face, that have the transform, so it can render correctly.

 

transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

 

Hope this helps!

[RolandSoos]

Thanks Jonathan, it works fine in Firefox, but it still has the same rendering error in Chrome. Could you check it in Chrome?

[Jonathan]

Hello again RolandSoos,

 

From what i see looking at your code.. you will have to adjust your HTML markup. You have float:left on your .cuboid class. That float left is causing the issue. Its best to use absolute position for lining up your cubes, instead of floating them left. That is what is causing the overlap on the last couple of cube faces.

 

Basically anytime making a cube, you want to have the faces parent, in this case .cuboid, to have a CSS position of absolute. And its faces can be absolute as well. The faces would fill its parent .cuboid. But you have like 12 cubes (.cuboid) as children of your main .container div.

 

If i were doing this i would make each .cuboid have its own .container class, and and then wrap all your .container divs with another div.

 

So i would have the markup like this:

<div id="cubes">
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
    <div class="container">
        <div class="cuboid"></div>
    </div>
</div>

:

#cubes should have: width:1200px; height: 400px;

(CSS properties should be the width and height of all cubes)

 

.container should have: position:relative; perspective:1000px; width:200px; height:200px;

(align .container divs by using the left CSS property, to get them in a 2 row 6 column grid)

 

.cuboid should have position:absolute; transform-style:preserve-3d; width:100%; height:100%;

 

.tile should have position:absolute; transform-style:preserve-3d; width:200px; height:200px;

 

You make sure you first create each cube and then you can work on aligning them in columns and rows. When aligning and using transforms try and stay away from floating, and just use the CSS position property (absolute or relative). Floats can be calculated wrong. A floated box is positioned within the normal flow of the document, then it is taken out of the flow, and then shifted to the right or left as far as possible. But when you use position relative and absolute the element is taken out of the flow of the document. That is why CSS transforms work better when using position absolute and position relative. Keep in mind that position relative will not be taken out of the document flow until you explicitly set its left and top property. The position relative property makes sure that its children are absolutely positioned, relative to its parent.

 

You also might have to add z-inde to your cubes to make sure all your .cuboid have the right stacking order.

 

The point Im trying to make is if you first setup your HTML markup and CSS to get your elements positioned the way you want..  then it makes animating the cubes so much more easy and with less cross browser issues.

 

[RolandSoos]

Thanks Jonathan! It looks like a great explanation which explain a lot of things for me. I will rewrite my code with your suggestion on Monday and update the post with my result.

[RolandSoos]

I have followed your suggestions and implement everything from your post, but still no luck. It looks like the same. You can check the new here:

See the Pen KwVXMp by anon (@anon) on CodePen

 

Am I still missing something?

[RolandSoos]

Here is a different approach which solves the rotation issue in the previous post also I have added a z-index fix. I don't really like this z-index fix, so it could be great to hear your opinion to my previous post.

 

Here is the z-index fixed codepen:

See the Pen bNEoWb by anon (@anon) on CodePen

[Jonathan]

Hello Again RolandSoos,

 

Good job getting your blocks HTML and CSS organized. Now it looks like all you need to do is adjust z-index on the last 3 cube .container divs of each row (4, 5, 6, 9, 10, 11, 12).

 

Fixed example:

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

:

// add z-index to the last 3 cube .containers in each row
TweenLite.set(['.container4','.container10'], {zIndex:4});
TweenLite.set(['.container5','.container11'], {zIndex:3});
TweenLite.set(['.container6','.container12'], {zIndex:2});

:

I added additional classes to your markup:

:

<div class="cubes">
     <div class="container container1"></div>
     <div class="container container2"></div>
     <div class="container container3"></div>
     <div class="container container4"></div>
     <div class="container container5"></div>
     <div class="container container6"></div>
     <div class="container container7"></div>
     <div class="container container8"></div>
     <div class="container container9"></div>
     <div class="container container10"></div>
     <div class="container container11"></div>
     <div class="container container12"></div>
</div>

Just a side note.. Anytime you absolutely position something next to each other, make sure to adjust the z-index... to fix overlapping and stacking order.

 

Hope this helps!