By default, the alpha property of controls are not taken into account: they are taken into account only when you change their value.
So, when you change the alpha value of the main container (
mainStackPanel), it sets this alpha value to the context. As all other child controls don’t set alpha values, this value is in effect for all the children and the effect is the intended one: everything is fading out.
Now, when you click on one button (say button 1), the alpha value is set by the code handling the “clicked” display effect. So, when rendering button1, the alpha value is taken into account this time and the formula is:
context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;
The button1 does have a parent, but this parent is
mainStackPanel! As the animation changes the value of
mainStackPanel, the alpha value of
buttonStackPanel is still 1, and so the
globalAlpha value ends up being computed as
In your case, the easiest fix is to set
BABYLON.GUI.Control.AllowAlphaInheritance = true;, which leads to this computation for each control instead of the one given above:
context.globalAlpha *= this._alpha;
which is what you want to do.