Bootstrap 5 Modal Remove Animation

Last Updated : 14 Dec, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
  
    <!-- Bootstrap Javascript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <div> 
            <h1 class="text-success"> 
                GeeksforGeeks 
            </h1> 
            <strong> 
                Bootstrap 5 Modal Remove Animation 
            </strong> 
        </div> 
  
        <div class="modal" id="gfg" tabindex="-1"> 
            <div class="modal-dialog"> 
                <div class="modal-content"> 
                    <div class="modal-header"> 
                        <h1 class="modal-title" id="gfgLabel"> 
                            GeeksforGeeks 
                        </h1> 
                    </div> 
                    <div class="modal-body"> 
                        GeeksforGeeks is a computer science 
                        portal for the geeks. Here you can 
                        consume computer science related content 
                        or share your knowledge with 
                        the world by contributing on the write 
                        portal. 
                    </div> 
                </div> 
            </div> 
        </div> 
  
        <div class="modal fade" id="gfg-fade" tabindex="-1"> 
            <div class="modal-dialog"> 
                <div class="modal-content"> 
                    <div class="modal-header"> 
                        <h1 class="modal-title" id="gfgLabel"> 
                            GeeksforGeeks 
                        </h1> 
                    </div> 
                    <div class="modal-body"> 
                        GeeksforGeeks is a computer science 
                        portal for the geeks. Here you can 
                        consume computer science related 
                        content or share your knowledge with 
                        the world by contributing on the write 
                        portal. 
                    </div> 
                </div> 
            </div> 
        </div> 
  
        <div class="mt-4"> 
            <button class="btn btn-success" 
                          data-bs-toggle="modal" 
                          data-bs-target="#gfg"> 
                Show Modal without fade class 
            </button> 
  
            <button class="btn btn-danger"
                          data-bs-toggle="modal" 
                          data-bs-target="#gfg-fade"> 
                Show Modal with fade class 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
  
    <!-- Bootstrap Javascript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <div> 
            <h1 class="text-success"> 
                GeeksforGeeks 
            </h1> 
            <strong> 
                Bootstrap 5 Modal Remove Animation 
            </strong> 
        </div> 
  
        <div class="modal" id="gfg" tabindex="-1"> 
            <div class="modal-dialog"> 
                <div class="modal-content"> 
                    <div class="modal-header"> 
                        <h1 class="modal-title" id="gfgLabel"> 
                            GeeksforGeeks 
                        </h1> 
                    </div> 
                    <div class="modal-body"> 
                        GeeksforGeeks is a computer science 
                        portal for the geeks. Here you can 
                        consume computer science related 
                        content or share your knowledge with 
                        the world by contributing on the write 
                        portal. 
                    </div> 
                </div> 
            </div> 
        </div> 
  
        <button class="btn btn-success mt-5"
                data-bs-toggle="modal" 
                data-bs-target="#gfg"> 
            Show Modal Without Animation 
        </button> 
    </div> 
</body> 
  
</html>