Add a Fade when a button appears

Questions
1

I have a button that appears when two meshes collide, I want to apply a Fade but I can’t.
Here is a part of my code ( be nice I’m a beginner )

const plane = BABYLON.Mesh.CreatePlane(“plane”, 1);
plane.parent = boxInv1;
plane.position.y = 0.05;
plane.position.x = 0.5;
plane.position.z = 0.1;

const advancedTexture =
BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);

const button1 = BABYLON.GUI.Button.CreateSimpleButton(“but1”, “Click Me”);
button1.width = 0.3;
button1.height = 0.1;
button1.color = “white”;
button1.fontSize = 30;
button1.background = “blue”;
button1.isVisible = false;

const modal = document.getElementById(“my-modal”);
const closeModalButton = document.getElementById(“close-modal-button”);

function showModal() {
modal.style.display = “block”;
modal.style.animation = “fadeIn 2s”;
}

function hideModal() {
modal.style.display = “none”;
modal.style.animation = “fadeOut 2s”;
}

closeModalButton.addEventListener(“click”, hideModal);

button1.onPointerUpObservable.add(function () {
button1.style.animation = “fadeIn 1s”;
showModal();
});

scene.registerBeforeRender(function () {
  if (balloon.intersectsMesh(boxInv1, false)) {
     button1.style.animation = "fadeIn 1s";
    button1.isVisible = true;
  } else {
    button1.isVisible = false;
  }
});

advancedTexture.addControl(button1);

The Fade works on the modal but not on the button
Thank you !

2

This is more of a HTML/CSS question than a Babylon question :slight_smile: You can also create fades with the Babylon GUI, there’s an example here: Canvas Accessibility and GUI Animations with Babylon.js | by Babylon.js | Dec, 2022 | Medium

1 Like