espeigeltmsw

tween 3D property "z" not taking effect

Recommended Posts

I've been working on porting a shattering/explosion effect from vanilla js (https://codepen.io/elitmsw/pen/XomeQZ) 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

 

https://codesandbox.io/s/p785lzj6qj

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

I'll second what Jack's said.

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

  • Like 2

Share this post


Link to post
Share on other sites

@Jonathan

 

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

  • Like 1

Share this post


Link to post
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.