<div class="container">
      <div class="row justify-content-center mt-5" style="max-height:100px">
        <div class="col-auto d-flex flex-column timer-part text-center" id="hh1">
          <h1 class="display-3">9</h1>
          <h1 class="display-3">8</h1>
          <h1 class="display-3">x</h1>
          <h1 class="display-3">7</h1>
          <h1 class="display-3">5</h1>
          <h1 class="display-3">a</h1>
          <h1 class="display-3">4</h1>
          <h1 class="display-3">3</h1>
          <h1 class="display-3">2</h1>
          <h1 class="display-3">b</h1>
          <h1 class="display-3">1</h1>
          <h1 class="display-3">0</h1>
          <h1 class="display-3">!</h1>
          <h1 class="display-3">*</h1>
          <h1 class="display-3">:</h1>
          <h1 class="display-3 mb-3" id="hh1-main">&nbsp;</h1>
        </div>
        <div class="col-auto d-flex flex-column timer-part text-center" id="hh2">
          <h1 class="display-3">9</h1>
          <h1 class="display-3">8</h1>
          <h1 class="display-3">7</h1>
          <h1 class="display-3">5</h1>
          <h1 class="display-3">!</h1>
          <h1 class="display-3">*</h1>
          <h1 class="display-3">:</h1>
          <h1 class="display-3">z</h1>
          <h1 class="display-3">q</h1>
          <h1 class="display-3">x</h1>
          <h1 class="display-3">b</h1>
          <h1 class="display-3">9</h1>
          <h1 class="display-3">8</h1>
          <h1 class="display-3">7</h1>
          <h1 class="display-3">5</h1>
          <h1 class="display-3">4</h1>
          <h1 class="display-3">3</h1>
          <h1 class="display-3">2</h1>
          <h1 class="display-3">1</h1>
          <h1 class="display-3 mb-3" id="hh2-main">4</h1>
        </div>
        <div class="col-auto d-flex flex-column timer-part text-center" id="symbol">
          <h1 class="display-3">!</h1>
          <h1 class="display-3">*</h1>
          <h1 class="display-3">:</h1>
          <h1 class="display-3">z</h1>
          <h1 class="display-3">q</h1>
          <h1 class="display-3">x</h1>
          <h1 class="display-3">b</h1>
          <h1 class="display-3">9</h1>
          <h1 class="display-3">8</h1>
          <h1 class="display-3">7</h1>
          <h1 class="display-3">5</h1>
          <h1 class="display-3">4</h1>
          <h1 class="display-3">3</h1>
          <h1 class="display-3">2</h1>
          <h1 class="display-3">1</h1>
          <h1 class="display-3 mb-3" id="symbol-main">0</h1>
        </div>
        <div class="col-auto d-flex flex-column timer-part text-center" id="mm1">
          <h1 class="display-3">9</h1>
          <h1 class="display-3">8</h1>
          <h1 class="display-3">7</h1>
          <h1 class="display-3">5</h1>
          <h1 class="display-3">*</h1>
          <h1 class="display-3">:</h1>
          <h1 class="display-3">z</h1>
          <h1 class="display-3">q</h1>
          <h1 class="display-3">x</h1>
          <h1 class="display-3">b</h1>
          <h1 class="display-3">9</h1>
          <h1 class="display-3">8</h1>
          <h1 class="display-3">7</h1>
          <h1 class="display-3">4</h1>
          <h1 class="display-3">3</h1>
          <h1 class="display-3">2</h1>
          <h1 class="display-3">1</h1>
          <h1 class="display-3 mb-3" id="mm1-main">8</h1>
        </div>
        <div class="col-auto d-flex flex-column timer-part text-center" id="mm2">
          <h1 class="display-3">1</h1>
          <h1 class="display-3">2</h1>
          <h1 class="display-3">3</h1>
          <h1 class="display-3">!</h1>
          <h1 class="display-3">a</h1>
          <h1 class="display-3">d</h1>
          <h1 class="display-3">:</h1>
          <h1 class="display-3">u</h1>
          <h1 class="display-3">i</h1>
          <h1 class="display-3">p</h1>
          <h1 class="display-3">*</h1>
          <h1 class="display-3">4</h1>
          <h1 class="display-3">5</h1>
          <h1 class="display-3">6</h1>
          <h1 class="display-3">7</h1>
          <h1 class="display-3 mb-3" id="mm2-main">&nbsp;</h1>
        </div>
      </div>
      <div class="row justify-content-center mt-5">
        <div class="col-auto mt-5">
          <h1 class="font-weight-normal" id="requestText">Requesting</h1>
        </div>
      </div>
    </div>

.timer-part{
  overflow-y:hidden;
  background-image: linear-gradient(white, #e0e0e0);
  border: 1px solid #dfdfdf !important;
  height: 100px;
}
@keyframes fade-out{
  from{
    opacity: 1
  }
  to{
    opacity: 0
  }
}
.fade-out{
  animation-name: fade-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes fade-in{
  from{
    opacity: 0
  }
  to{
    opacity: 1
  }
}
.fade-in{
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

$(function() {
  var intervalID = setInterval(function(){
    document.getElementById('requestText').innerHTML += '.'
  }, 500)
  var animationTime = 5000;
  setTimeout(main(), 250);
  function main(){
    $('#hh1').animate({scrollTop:$("#hh1-main").offset().top}, animationTime, 'swing', function() {
  });
    setTimeout(function(){
      $('#hh2').animate({scrollTop:$("#hh2-main").offset().top}, animationTime, 'swing', function() { 
  });
    }, 100);
    setTimeout(function(){
      $('#symbol').animate({scrollTop:$("#symbol-main").offset().top}, animationTime, 'swing', function() { 
  });
    }, 200);
    setTimeout(function(){
      $('#mm1').animate({scrollTop:$("#mm1-main").offset().top}, animationTime, 'swing', function() { 
  });
    }, 300);
    setTimeout(function(){
      $('#mm2').animate({scrollTop:$("#mm2-main").offset().top}, animationTime, 'swing', function() {
  });
    }, 400);
    setTimeout(function(){
      $('#requestText').addClass('fade-out');
        clearInterval(intervalID);
        setTimeout(function(){
        document.getElementById('requestText').innerHTML = 'Request Timed Out!' ;
          $('#requestText').addClass('fade-in');
        }, 1001)
    },animationTime-1250)
  }
});