title: How To Make Bootstrap Modal Animation Smooth
body: <p>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 &amp; Out Animations with the same In &amp; Out time?</p>
  <p>Thanks for your valuable time.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;button class="btn  btn-primary  mt-3" id="modal_view_left" data-toggle="modal"  data-target="#left-modal"&gt;Open left modal&lt;/button&gt;
  
  
  &lt;div class="modal modal_outer left_modal fade" id="left-modal" tabindex="-1" role="dialog" aria-labelledby="left-side-modal" &gt;
     &lt;div class="modal-dialog m-l-dialog" role="document"&gt;
        &lt;div class="modal-content m-c-l"&gt;
  
           &lt;div class="modal-header c-m-h text-center"&gt;
              &lt;p class="modal-title card-category w-100"&gt;&lt;i class="fas fa-code"&gt;&lt;/i&gt; Project Plans&lt;/p&gt;
           &lt;/div&gt;
             
              &lt;div class="modal-body cards-body"&gt;
                 &lt;div class="row"&gt;
                    &lt;div class="col-12 mb-4 mt-2"&gt;
                       &lt;div class="web-card"&gt;
                          &lt;div class="cards-inner"&gt;
                             &lt;p class="text-center card-title mt-3 mb-2"&gt;SST Projects&lt;/p&gt;
                                &lt;hr class="card-hr"&gt;
                                &lt;span class="d-flex justify-content-center mt-3 mb-3"&gt;
                                   &lt;ul class="card-li"&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                                   &lt;/ul&gt;
                                &lt;/span&gt;
                                &lt;hr class="card-hr"&gt;
                             &lt;p class="text-center card-price mt-2 mb-3"&gt;&lt;i class="fas fa-rupee-sign"&gt;&lt;/i&gt; Rs 1,999/-&lt;/p&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-12 mb-4"&gt;
                       &lt;div class="web-card"&gt;
                          &lt;div class="cards-inner"&gt;
                             &lt;p class="text-center card-title mt-3 mb-2"&gt;Science Projects&lt;/p&gt;
                                &lt;hr class="card-hr"&gt;
                                &lt;span class="d-flex justify-content-center mt-3 mb-3"&gt;
                                   &lt;ul class="card-li"&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                                   &lt;/ul&gt;
                                &lt;/span&gt;
                                &lt;hr class="card-hr"&gt;
                             &lt;p class="text-center card-price mt-2 mb-3"&gt;&lt;i class="fas fa-rupee-sign"&gt;&lt;/i&gt;Rs  1,299/-&lt;/p&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-12 mb-2"&gt;
                       &lt;div class="web-card"&gt;
                          &lt;div class="cards-inner"&gt;
                             &lt;p class="text-center card-title mt-3 mb-2"&gt;CS Projects&lt;/p&gt;
                                &lt;hr class="card-hr"&gt;
                                &lt;span class="d-flex justify-content-center mt-3 mb-3"&gt;
                                   &lt;ul class="card-li"&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                              &lt;li&gt;&lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet&lt;/li&gt;
                                   &lt;/ul&gt;
                                &lt;/span&gt;
                                &lt;hr class="card-hr"&gt;
                             &lt;p class="text-center card-price mt-2 mb-3"&gt;&lt;i class="fas fa-rupee-sign"&gt;&lt;/i&gt;Rs 1,499/-&lt;/p&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt; 
                 &lt;/div&gt;
              &lt;/div&gt;  
  
           &lt;div class="modal-footer c-m-f"&gt;
              &lt;button class="web-card-btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
           &lt;/div&gt;
  
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>