I want to trigger the animation of the progress bar whenever I scroll down to a particular section of the website – Jquery

$( ".progress-bar" ).mouseleave(function() {
  $( this ).find(".bar").removeClass('bar').addClass('animClass');
});

body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-self: center;
  font-size: 0.625rem;
}

.progress-bar:hover .bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

.animClass {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="title">My Skills</h1>
<div class="right">
  <h2>Builder Reliability</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
</div>