How do I make an animation start on scroll down?

I made an animation inside a section on a page, but it starts when I reload the page. How do I make it start only when I scroll down to that section?

I want something like if (scrolls to skills) start animation

.o1 {
  fill: none;
  stroke: rgb(94, 217, 250);
  stroke-width: 20px;
  stroke-dasharray: 472;
  stroke-dashoffset: 472;
  animation: anim 2s linear forwards;
}

@keyframes anim {
  100% {
    stroke-dashoffset: 70;
  }
}

<section id="skills">
  <div class="skill">
    <div class="outer">
      <div class="inner">
        <div id="number">
        </div>
      </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" `height="160px">
      <circle class="o1" cx="80" cy="80" r="70" stroke-linecap="round" />
    </svg>
  </div>
  <script>
    let number = document.getElementById("number");
    let counter = 0;
    setInterval(() => {
      if (counter == 95) {
        clearInterval();
      } else {
        counter += 1;
        number.innerHTML = counter + "%";
      }
    }, 20)
  </script>
</section>

How do I make an animation start on scroll down?

0 Answers