activate animation when content scroll into view

Is it possible to have an animation play only when the element is in view on the page in vanilla JS? I have the code below for a text reveal animation but I'm not sure what Im asking for is possible or not in vanilla JS. Ive seen multiple options of JQuery but non in vanilla JS. I saw another similar question on Stack here with an answer but it didn't help. Any ideas?

<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap');
 .block-reveal {
     margin-bottom: 25px;
}
 .block-reveal__block {
     background: #389df5 !important;
}
 h1 {
     margin: 0;
     font-weight: 900;
     font-family: barlow;
}
 .block-reveal {
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     display: inline-block;
}
 .block-reveal__text {
     opacity: 0;
     margin: 0.3em 0.5rem;
}
 .block-reveal__block {
     content: "";
     background: #000;
     position: absolute;
     width: 100%;
     height: 1.3rem;
     margin-top: 0.8rem;
     z-index: 0;
     transform: translateX(0%);
}
 .block-reveal--active .block-reveal__text {
     animation: block-reveal-text 0s;
     animation-delay: 0.1s;
     animation-fill-mode: forwards;
}
 .block-reveal--active .block-reveal__block {
     animation: block-rev-block 1.1s;
     animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}
 @keyframes block-rev-block {
     0% {
         transform: translateX(-100%);
         z-index: 1;
         height: 2.1rem;
         background: #ff45d3;
    }
     50% {
         transform: translateX(calc(100% + 1px));
         height: 2.1rem;
    }
     100% {
         height: 1.3rem;
         transform: translateX(calc(0%));
         background: #389df5;
    }
}
 @keyframes block-reveal-text {
     0% {
         opacity: 0;
    }
     50% {
         opacity: 1;
         color: white;
    }
     100% {
         opacity: 1;
         color: white;
    }
}
 
</style>

<div>
  <div class="block-reveal block-reveal--active">
    <span class="block-reveal__block"></span>
    <h1 class="block-reveal__text">TESTIMONIALS</h1> 
  </div>
</div>

from activate animation when content scroll into view