[Trigger css animation ] using intersection observer api ?

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
here is a website which use intersection observer api to animate things

https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/

https://coolcssanimation.com/scroll-animation-handbook/

here i have shared some example of intersection observer api and css animation

    <div class="box ">
      <div class="main_div">
        <span class="text_anime">Hello there</span>
        <div class="drop-shadow-container">
          <span class="text_box">This is text box </span>
        </div>
      </div>
    </div>

/* text anime start */
  .text_anime{
    position: relative;
    z-index: 2;
  }
  .text_anime.active:before {
    transform: none;
  }
  .text_anime:before {
    position: absolute;
    content: "";
    top: 0;
    left: -4px;
    right: -4px;
    bottom: 0;
    background: #c7ff86;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: 0;
    transition: transform calc(1s) ease-in-out;
  }
/*  text anime end */

/* text box anime start */

.drop-shadow-container .text_box {
    position: relative;
    z-index: 2;
    transform: none;
    transition: transform .9s ease;
    display: flex;
    background: purple;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    padding: 32px;
}
.active.drop-shadow-container .text_box {
    transform: translate(-8px,-8px);
}
.drop-shadow-container{
  position: relative;
}
.active.drop-shadow-container:before {
    transform: translate(16px,16px);
}
.drop-shadow-container:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background-color: #c50011;
    content: "";
    color: #d11616;
    z-index: 1;
    transform: none;
    transition: transform .9s ease;
}
/* text box anime end */

    // Create the observer
const observer = new IntersectionObserver(entries => {
      // We will fill in the callback later...    
    entries.forEach(entry => {
        const square = entry.target.querySelector('.drop-shadow-container');
        const txt = entry.target.querySelector('.text_anime');
        if (entry.isIntersecting) {
            square.classList.add('active');
            txt.classList.add('active');
            return; // if we added the class, exit the function
         }
              // We're not intersecting, so remove the class!
         square.classList.remove('active');
         txt.classList.remove('active');
    });    
 });

    // Tell the observer which elements to track
    observer.observe(document.querySelector('.main_div'));