Estoy trabajando en una animación de escritura de JavaScript, sin embargo, no quiero recibir un impacto en el rendimiento mientras la animación no está en la pantalla, por lo tanto, solo quiero que se anime cuando está en la pantalla usando Intersection Observer.
Puedo iniciar correctamente la animación con Intersection Observer, pero tengo problemas para encontrar la forma de pausarla cuando está fuera de la pantalla.
Aquí está mi código:
let typingobserver = new IntersectionObserver((elements) => { elements.forEach(element => { if (element.isIntersecting) { console.log ("on screen!!"); typequeries('.target'); } else { console.log ("not on screen!!"); } }); }); let typingobserverelements = document.querySelector('.target'); typingobserver.observe(typingobserverelements); async function typequeries(element) { element = document.querySelector(element); queries = JSON.parse(element.getAttribute('data-queries')); let i = 0; while(true) { await type(queries[i], element); await wait(2000); await (element.innerHTML = ""); i++; if(i >= queries.length) {i = 0;} } } async function type(query, element) { const characters = query.split(""); let i = 0; while (i < characters.length) { await wait(Math.floor(Math.random() * 150) + 50); element.append(characters[i]); i++ } return; } function wait(ms) { console.log (ms); return new Promise(resolve => setTimeout(resolve, ms)); } <span class="target" data-queries='["typed text", "is fun", "to read"]'></span>¿Cómo puedo iniciar la animación cuando se observa con Intersection Observer y luego pausarla cuando está fuera de la pantalla?