tween 3D property "z" not taking effect

[espeigeltmsw]

I've been working on porting a shattering/explosion effect from vanilla js (

See the Pen XomeQZ by elitmsw (@elitmsw) on CodePen

) to react. I think I have most everything working, but unfortunately the z property, which provides the explosion, doesn't take effect anymore. Both are using v2.0.2, and fiddle as I might, I can't seem to figure out why it won't work. I found I can simulate the z effect with a negative custom easing and moving the shatterFragmentRefs to the top and left, but it isn't really what I want. Any idea what might be blocking the z from kicking in?

 

Notes for navigation: the timelines are located in the Explosion Component in componentDidUpdate

 

Let me know if I'm leaving out any important info.

 

Thank You,

espeigeltmsw

 

See the Pen by s (@s) on CodePen

[GreenSock]

I don't have time at the moment to pull the whole project apart to see what's going on, but this sounds like maybe you just forgot to put a perspective on the container. Remember, browsers won't render the 3rd dimension of 3D effects without a perspective set (typically on the containing/parent element). 

[Dipscom]

I'll second what Jack's said.

[espeigeltmsw]

I think y'all are right but I haven't gotten it to work yet. Thank you!

[Jonathan]

Hi @espeigeltmsw and Welcome to the GreenSock forum!

 

I tried to pull up your codesandbox.io link from above but the browser tab kept spinning and would not load fully.

 

Looks like your using canvas in that codesandbox link whereas the codepen one your trying to port over is CSS transforms and DOM. Based on the canvas context your using it is 2d. So z (translateZ) property does not exist for you to animate:

 

 const ctx = canvasNode.getContext("2d");

 

Keep in mind for canvas, that it is basically 2D not 3D, and will only support translate, rotate, scale, and skew. But z (translateZ) is part of the 3D context webgl (see this link) if using a canvas 3D context.  It is possible to mimic a 3D effect with canvas but it relies on heavy math to calculate that. For canvas that is 3D you have to look into WebGL.

 

[espeigeltmsw]

@Jonathan

 

Actually it just ended up begin the lack of perspective. It worked fine with `getContext("2d")`. Thanks for the advice though!