How to trigger animations on visibility and scroll

<div class="project">
        <div class="goals animate-on-scroll">
            <div class="goals-contain">
                <h1>Projected Goals</h1>
                <div class="stats">
                    <div class="numbers">
                        <h3> <span class="million"></span> million</h3>
                        <p>in assets managed</p>
                    </div>
                    <div class="numbers">
                        <h3 class="managed"></h3>
                        <p>properties managed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

.active {
    animation: counter 3s forwards alternate ease;
    counter-reset: num var(--num);
}

.active::after {
    content: counter(num);
}

@keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 20;
    }
  }

  .million {
    animation: next 3s forwards alternate ease;
    counter-reset: num var(--num);
  }

  .million::after {
    content: counter(num);
  }

  @keyframes next {
    from {
      --num: 0;
    }
    to {
      --num: 5;
    }
  }

const animateElement = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate');
        } else {
            entry.target.classList.remove('animate');
        }
    })
}, {
    threshold: 0.5
});

for (let i = 0; i < animateElement.length; i++) {
    const el = animateElement[i];

    observer.observe(el);
}