Bootstrap 5 Modal Remove Animation

Bootstrap 5 Modal is used to show dialogues to the frontend user using bootstrap's JavaScript library. The Modal used Bootstrap's fade animation when it is opened and closed. The animations can be removed by removing the fade class from the modal component or by manually setting the transition and transform properties of the modal and modal dialog to none.

Bootstrap 5 Modal Remove Animation Class

• fade: This class is used to apply the fade animation when the modal is shown or hidden. By just removing this class you can withdraw the animation.

Syntax:

<div class="modal fade" id="...">
 ...
</div>

Example 1: In this example, the fade animation of the modal is removed removing the fade class from the modal.

Output:

Example 2: In the below example, we can set the transition and transform properties for the modal and modal-dialog to "none" to remove the modal animation. But here we will just removing the fade animation. 

Output:

Remove: https://getbootstrap.com/docs/5.2/components/modal/#remove-animation