# FadeInOutBehavior problem with edges and colors overlapping

**URL:** <https://forum.babylonjs.com/t/fadeinoutbehavior-problem-with-edges-and-colors-overlapping/30784>\
**Category:** Questions\
**Created:** [May 27, 2022, 1:12pm UTC](https://forum.babylonjs.com/t/fadeinoutbehavior-problem-with-edges-and-colors-overlapping/30784 "2022-05-27T13:12:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yamamoo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yamamoo/32/21359_2.png) [@Yamamoo](https://forum.babylonjs.com/u/Yamamoo)\
**Post date:** [May 27, 2022, 1:12pm UTC](https://forum.babylonjs.com/t/fadeinoutbehavior-problem-with-edges-and-colors-overlapping/30784/1 "2022-05-27T13:12:54Z")

</div>

Hello, I ran into a problem when trying to animate node (with meshes inside) using `FadeInOutBehavior` and I’m not sure if there is a way to solve this problem.  
I’ve created playground with the issue - [https://playground.babylonjs.com/#Q8MIGE#1](https://playground.babylonjs.com/#Q8MIGE#1)

In my app I have a meshes that are occluded, have edges rendering enabled and materials are half way transparent to see image in the background through mesh. Sometimes I need to hide the node with all colliders inside but I want to add a smooth animation to it.  
When fade animation is not playing then everything looks fine. But when I run `fadeInOutBehavior.fadeIn(true)` then, for the time when animation is playing, edges that shouldn’t be visible are visible and materials from 2 boxes in not occluded part are overlapping.

Is there any possible solution for this or any simple alternative?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [May 30, 2022, 3:28pm UTC](https://forum.babylonjs.com/t/fadeinoutbehavior-problem-with-edges-and-colors-overlapping/30784/2 "2022-05-30T15:28:53Z")

</div>

Hello! When the alpha of a material is less than 1, the edge renderer will render all edges, and blending will occur, making the materials appear overlapped: [Edges renderer and alpha | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#9VI7NP) 🙂

---

<div class="post-metadata">

**Author:** ![Yamamoo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yamamoo/32/21359_2.png) [@Yamamoo](https://forum.babylonjs.com/u/Yamamoo)\
**Post date:** [June 5, 2022, 7:20pm UTC](https://forum.babylonjs.com/t/fadeinoutbehavior-problem-with-edges-and-colors-overlapping/30784/3 "2022-06-05T19:20:46Z")

</div>

Hey, thanks for answer. Yeah I just though that there is a way to prevent that.

I’ve solved my problem with just css opacity transition on canvas, and after opacity transition is done, then I’m changing `isEnabled` state of container node to `false`. It’s pretty simple solution (that I didn’t think about before asking the question) and it was good enough for me.