Start typewriter effect when element is in the viewport

Question

I need to start a typewriter effect of a text element when it's visible in the viewport. I tried with getBoundClientRect but I think that I'm missing something. It starts always when the document is ready, so if you don't go fast to the element you can't see the effect. I tried also with a scroll event listener but the effect runs with the movement of the scroll.

This is the code that I'm using:

let i = 0;
let txt = 'Natural . Imperfecto . Extraordinario';
let speed = 150;

function sectionActive () {
  let section = document.getElementById('typewriter');
  const boxPlace = section.getBoundingClientRect();
  
  if (boxPlace.top = 200) {
    function typeWriter() {  
      if (i < txt.length) {
        section.innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
      }
    }
    typeWriter();
  }
}

jQuery(document).ready(sectionActive);

thanks!!!