# Issue with fade animations

**URL:** <https://discourse.threejs.org/t/issue-with-fade-animations/41744>\
**Category:** Questions\
**Tags:** materials, animation\
**Created:** [August 23, 2022, 5:20am UTC](https://discourse.threejs.org/t/issue-with-fade-animations/41744 "2022-08-23T05:20:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rahul\_Khande](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rahul_khande/32/12543_2.png) [@Rahul\_Khande](https://discourse.threejs.org/u/Rahul_Khande)\
**Post date:** [August 23, 2022, 5:20am UTC](https://discourse.threejs.org/t/issue-with-fade-animations/41744/1 "2022-08-23T05:20:24Z")

</div>

We are creating multiple animations for fading in and fade out parts of an assembly in three.js using animation clip and action.  
At first selecting the overall assembly and applying fade to it  
below fade Value will is 1 for fade in and 0 for fade out.

KF = new THREE.NumberKeyframeTrack(‘.opacity’, [StartTime,EndTime], [mesh.material.opacity, fadeValue]);  
let clip = new THREE.AnimationClip(cId.toString(), actualTimes[cId].aEndTime, [KF]);  
mClips[cId].push({ clip: clip, material: mesh.material[i] });  
let animation\_action = Mixer.clipAction(clip, mesh.material[i]);

Later after having 4 different animations like this when we play the actions we notice a transperacy in the parts.  
the complete part is not visible in the animation .

After some investigation we found that the issue might be related to depth right and depth test property of the material  
 ![Screenshot (187)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/e/fea4235070075c65b3b97ef1bfce95a01f2c81c8.png)

but we could fix that for parts that are present at the top of the assembly.

In below case a rod is present under the cube. Using the depth right approach the issue for the square is fixed but the parts that are  
present under the surface of the square are still not visible. Is it the issue level of depth these property works.  
any suggestions will be helpful.

![ax](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/a/9a5b2597cfd93fd2cc7e1146aa66b54c576ecc4a.gif)

---

<div class="post-metadata">

**Author:** ![Yin\_Cognyto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yin_cognyto/32/28865_2.png) [@Yin\_Cognyto](https://discourse.threejs.org/u/Yin_Cognyto)\
**Post date:** [August 23, 2022, 10:15pm UTC](https://discourse.threejs.org/t/issue-with-fade-animations/41744/2 "2022-08-23T22:15:38Z")

</div>

Some more detailed explanations regarding `.depthTest` and `.depthWrite` can be found [here](https://stackoverflow.com/a/37651610/8418085), [here](https://stackoverflow.com/a/15995475/8418085), [here](https://stackoverflow.com/a/33812372/8418085) or [here](https://stackoverflow.com/a/20978223/8418085).

The basic idea from those is that, while using them is required in certain situations, combining them with setting other properties of objects (like sorting or rendering order) can sometimes achieve the desired result.

I’m not what you’d call an expert in these properties, but from your previews it seems that the issue is indeed related to either the depth at which the objects are renedered, or maybe to a matter of synchronizing multiple animation clips (if there are more acting in your preview, that is). Other guys here could provide a more informed description, analysis, or solution to this though.