TranslateZ stacking only working correctly in Safari

[notgettingstabbed 2 Likes (Newbie)]

Hello,

 

I'm trying to animate a series of objects so that they pass behind and then in front of another object. It works as expected in Safari, but not in either Chrome or Firefox (all on OS X). They seem to obey the DOM order instead. It's basically the same problem described here. I've tried everything suggested in the comments there, but it's still only working in Safari.

 

In the Codepen, I've also included a static object to illustrate that the stacking isn't working as desired.

 

Does anyone have any ideas what's wrong?

 

Thanks,

Scott

See the Pen bOymvp by notgettingstabbed (@notgettingstabbed) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Yeah, Safari handles things radically differently than all other browsers in terms of rendering 3D transforms. You can angle things on the 3D axis and it'll chop things in half that overlap. Other browsers just rely on z-index for stacking order, plain and simple. So I think you'll need to resort to that. This isn't an issue related to GSAP - it's just how [most] browsers work. I wish I had a magic bullet for ya. Perhaps someone else has a different solution to offer. 

[notgettingstabbed 2 Likes (Newbie)]

Thanks for the quick response. I figured it was a browser issue, but since I came across that related topic on this forum, I thought I'd check in here. Anyway, for anyone else that's interested, I used the update function to update the z-index to match the z position. While it won't recreate Safari's rendering, it at least fixes the stacking issue. Here's an updated Codepen: 

See the Pen NeZoXP by notgettingstabbed (@notgettingstabbed) on CodePen

 

I have no idea if this is efficient or not, so if anyone has a better idea please share!

[GreenSock 8,117 Likes (Superhero)]

I'd probably use ModifiersPlugin to replace your onUpdate because it's more performant than creating a new set() tween on every single update of every element. And I didn't understand why you were creating paused tweens and then using another tween to tween those....to a progress of 3 (remember, progress can only be between 0 and 1). Here's a cleaned-up version: 

 

See the Pen f712f7e5be720815eeb027bf041a0782?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

 

[notgettingstabbed 2 Likes (Newbie)]

That's perfect! 

 

I started from

See the Pen zcmpo by GreenSock (@GreenSock) on CodePen

, which is where the two tweens came from. For my demo, I eliminated the decreasing progress of the second tween that's in the referenced pen, but I have made use of it in other work. As is probably obvious, I'm not really a programmer so my code may contain unnecessary pieces that I pick up along the way (or just nonsense values). Sigh.

 

Anyway, thank you!

[GreenSock 8,117 Likes (Superhero)]

Nice work! If you're not even a programmer, then my hat's off to you

 

Happy tweening!

[Jonathan 5,176 Likes (Superhero)]

Hello @notgettingstabbed and Welcome to the GreenSock Forum!

 

First off love your forum handle, very funny.

 

Glad you figured it out.

 

Just a handy rule of thumb. Its best practice not to use any negative z-index, since it will cause you cross browser shenanigans due to stacking context of transforms and how z-depth works, aka z-index. You should never go past a value of 0, using z-index: 0 as your most bottom layer.

 

Happy Tweening