Анимация блоков, при достижении определенной высоты

У меня есть определенный набор блоков

<div class="mission" id="mission_block">
            <div class="mission__img">
                <img src="img/phone90.png" alt="">
            </div>
            <div class="mission__text">
                <h1>Our mission and vision</h1>
                <p>While technology is our sweet spot, we’ve developed our vision alongside
                    our customers to ensure your everyday problems are solved through simplistic tools. And as your
                    business grows, we’ll grow right alongside with you. </p>
            </div>
        </div>

И когда окно будет на середине блока mission, необходимо сделать некоторую анимацию. Подскажите как это реализовать на чистом js. У меня есть некоторый набросок кода, но как сделать триггер на то, когда видимая часть оказывается посредине блока не знаю.

((window, document) => {
   window.onload = () => {
      const missionBlock = document.getElementById('mission_block');

      const sizes = missionBlock.getBoundingClientRect();

      const {height, top} = sizes
      const scrollTriggerHeigth = top + height / 2

   }
})(window, document, undefined)