Quiero que mi elemento aparezca a través de la animación de fotogramas clave si están visibles en la ventana gráfica actual.

Funciona a medias, pero mi classList.remove('current') anula mi classList.add('current') por lo que el comportamiento durante el desplazamiento no es tan fluido.

Mi código

CSS

 section.section{ &.current{ animation:expand 1s ease-in-out; } } @keyframes expand { from { transform: scale(0); display: block; } }

JS

 const elements = document.querySelectorAll('section.section'); window.addEventListener('scroll', function (e) { elements.forEach(el => { let elTopPos = el.getBoundingClientRect().top + window.scrollY; let elBottomPos = el.getBoundingClientRect().bottom + window.scrollY; let windowBottomPos = window.innerHeight + window.pageYOffset; let windowTopPos = window.scrollY; if (el.classList.contains('current') === false) { if ((windowBottomPos > elTopPos && windowBottomPos < elBottomPos) || (windowTopPos < elBottomPos && windowTopPos > elTopPos)) { el.classList.add('current'); } } else{ if ((windowTopPos > elBottomPos && windowBottomPos > elBottomPos) || (windowBottomPos < elTopPos && windowTopPos < elTopPos)) { el.classList.remove('current'); } } }) },{ passive: true })