'How To Make Bootstrap Modal Animation Smooth

Hello Guys I'm using Bootstrap 4 Modal on my website which slides from the left side of the screen but the problem is that the animation is not so smooth, it feels very laggy in mobile devices. How can I make the animation very smooth like a mobile notification panel for both In & Out Animations with the same In & Out time?

Thanks for your valuable time.

.modal.left_modal {
  position: fixed;
  z-index: 99999;
}


.modal.left_modal .modal-dialog {
  position: fixed;
  margin: auto;
  width: 350px;
  max-width: 90%;
  height: 100%;    

   -webkit-transform: translate3d(50%);
      -ms-transform: translate3d(50%);
       -o-transform: translate3d(50%);
          transform: translate3d(50%);

}

.modal.left_modal .modal-content {
    height: 100vh !important;
}

.modal.left_modal.fade .modal-dialog{
  left: -100%;
  -webkit-transition: opacity 0.6s linear, left 0.6s ease-out;
  -moz-transition: opacity 0.6s linear, left 0.6s ease-out;
  -o-transition: opacity 0.6s linear, left 0.6s ease-out;
  transition: opacity 0.6s linear, left 0.6s ease-out;
}

.modal.left_modal.fade.show .modal-dialog{
  left: 0%;
  box-shadow: 0px 0px 19px rgba(0,0,0,.5);
}

.modal_outer .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
}


.modal_outer .modal-body::-webkit-scrollbar {
    display: none;
}

 
.fa-arrow-circle-right {
   color: #e8576f;
}

.c-m-h {
   border-bottom: 2px solid #e8576f; 
   background: #1f2236;
}

.c-m-f {
   border-top: 2px solid #e8576f;
   background: #1f2236;
}

.card-li li {
   color: #fff;
}

.cards-body {
   background: #2b2f4b;

}

.web-card {
   background: #1f2236;
   border: 2px solid #e8576f; 
   border-radius: 15px;
}

.m-c-l { 
   border: 4px solid #e8576f;
   border-left: none;
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
   background: #1f2236;
}

.m-l-dialog {
   border-left: none;
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
}


.card-category {
   font-size: 1.4rem;
   font-weight: 580;
   color: #fff;
}

.card-title {
   font-size: 1.2rem;
   font-weight: 520;
   color: #e8576f;
}

.card-price {
   font-size: 1.2rem;
   font-weight: 520;
   color: #e8576f;
}


.web-card-btn {
   padding: 0px 12px;
   background: #e8576f;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   border-radius: 50px;
   transition: 0.5s;
}

.web-card-btn:hover {
   background: #fff;
   color: #e8576f;
   transition: 0.5s;
}

.card-hr {
   margin: 0px; 
   border-top: 2px solid #e8576f;
   max-width: 90%; 
   margin: auto;
}  
.card-li li:not(:last-child) { 
   padding-bottom: 5px;  
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<button class="btn  btn-primary  mt-3" id="modal_view_left" data-toggle="modal"  data-target="#left-modal">Open left modal</button>


<div class="modal modal_outer left_modal fade" id="left-modal" tabindex="-1" role="dialog" aria-labelledby="left-side-modal" >
   <div class="modal-dialog m-l-dialog" role="document">
      <div class="modal-content m-c-l">

         <div class="modal-header c-m-h text-center">
            <p class="modal-title card-category w-100"><i class="fas fa-code"></i> Project Plans</p>
         </div>
           
            <div class="modal-body cards-body">
               <div class="row">
                  <div class="col-12 mb-4 mt-2">
                     <div class="web-card">
                        <div class="cards-inner">
                           <p class="text-center card-title mt-3 mb-2">SST Projects</p>
                              <hr class="card-hr">
                              <span class="d-flex justify-content-center mt-3 mb-3">
                                 <ul class="card-li">
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                                 </ul>
                              </span>
                              <hr class="card-hr">
                           <p class="text-center card-price mt-2 mb-3"><i class="fas fa-rupee-sign"></i> Rs 1,999/-</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-12 mb-4">
                     <div class="web-card">
                        <div class="cards-inner">
                           <p class="text-center card-title mt-3 mb-2">Science Projects</p>
                              <hr class="card-hr">
                              <span class="d-flex justify-content-center mt-3 mb-3">
                                 <ul class="card-li">
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                                 </ul>
                              </span>
                              <hr class="card-hr">
                           <p class="text-center card-price mt-2 mb-3"><i class="fas fa-rupee-sign"></i>Rs  1,299/-</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-12 mb-2">
                     <div class="web-card">
                        <div class="cards-inner">
                           <p class="text-center card-title mt-3 mb-2">CS Projects</p>
                              <hr class="card-hr">
                              <span class="d-flex justify-content-center mt-3 mb-3">
                                 <ul class="card-li">
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                            <li><i class="fas fa-arrow-circle-right"></i> Lorem ipsum dolor sit amet</li>
                                 </ul>
                              </span>
                              <hr class="card-hr">
                           <p class="text-center card-price mt-2 mb-3"><i class="fas fa-rupee-sign"></i>Rs 1,499/-</p>
                        </div>
                     </div>
                  </div> 
               </div>
            </div>  

         <div class="modal-footer c-m-f">
            <button class="web-card-btn" data-dismiss="modal">Close</button>
         </div>

      </div>
   </div>
</div>
htmlcssbootstrap-4bootstrap-modalcss-animations


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions