Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
espeigeltmsw

tween 3D property "z" not taking effect

Recommended Posts

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×