# 2D animation in Zdepth

**URL:** <https://forum.8thwall.com/t/2d-animation-in-zdepth/1429>\
**Category:** Technical Support\
**Created:** [May 22, 2024, 1:39am UTC](https://forum.8thwall.com/t/2d-animation-in-zdepth/1429 "2024-05-22T01:39:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kosuke\_yanagi](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/kosuke_yanagi/32/1606_2.png) [@kosuke\_yanagi](https://forum.8thwall.com/u/kosuke_yanagi)\
**Post date:** [May 22, 2024, 1:39am UTC](https://forum.8thwall.com/t/2d-animation-in-zdepth/1429/1 "2024-05-22T01:39:14Z")

</div>

Is there a way to place 2D animations with alpha channels in layers along the Z-axis to create depth?  
When using alpha videos, the animations placed in the back are also masked.

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [May 22, 2024, 1:44am UTC](https://forum.8thwall.com/t/2d-animation-in-zdepth/1429/2 "2024-05-22T01:44:55Z")

</div>

Make sure your material has `transparent: true`

Or you may also need to set `depthTest: false` on your entity.

Please reference the A-frame materials documentation here:

> **[A-Frame – Make WebVR](https://aframe.io/docs/1.5.0/components/material.html#properties_depthtest)**
>
> A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

You may also need to move the entity either higher up or lower in your DOM as A-frame renders from top to bottom.

---

<div class="post-metadata">

**Author:** ![kosuke\_yanagi](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/kosuke_yanagi/32/1606_2.png) [@kosuke\_yanagi](https://forum.8thwall.com/u/kosuke_yanagi)\
**Post date:** [May 22, 2024, 2:05am UTC](https://forum.8thwall.com/t/2d-animation-in-zdepth/1429/3 "2024-05-22T02:05:01Z")

</div>

Thank you. Is this the same when using video file like mp4 ? can’t use PNG sequences, right?

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [May 22, 2024, 4:48am UTC](https://forum.8thwall.com/t/2d-animation-in-zdepth/1429/4 "2024-05-22T04:48:06Z")

</div>

If you want to use a .mp4 file you can try using a green screen like this sample project

> **[Green Screen Video + World Tracking | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/alpha-video-slam-aframe)**
>
> Example of a green screen video placed on a surface using SLAM.

---

<div class="post-metadata">

**Author:** ![kosuke\_yanagi](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/kosuke_yanagi/32/1606_2.png) [@kosuke\_yanagi](https://forum.8thwall.com/u/kosuke_yanagi)\
**Post date:** [May 23, 2024, 12:45am UTC](https://forum.8thwall.com/t/2d-animation-in-zdepth/1429/5 "2024-05-23T00:45:47Z")

</div>

What I’m asking is whether there is a way to layer 2D animations on the same axis, like in this video.With the green screen video method, the overlapping parts are not displayed.  
 ![1 (2) (1)](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/8c4bc9694daac026611a0781e2188f6895160b59.gif)