Quiero que mi animación se ejecute después de que la pantalla haya dejado de desplazarse en Javascript; de lo contrario, el usuario no podrá verla. Desafortunadamente, la velocidad de desplazamiento en Chrome puede variar mucho y no sé cómo calcular la velocidad.
En lugar de calcular la duración del desplazamiento, ¿por qué no simplemente iniciar la animación una vez que detecte que la página está en la ubicación de desplazamiento correcta? Puede usar window.scrollY para obtener el desplazamiento vertical actual de la página y element.offsetTop para obtener la posición superior del elemento.
Puede hacer una función para verificar si el elemento está visible en la página con algo como el siguiente código.
function elementInScrolledView(element) { const pageTop = window.scrollY; const pageBottom = pageTop + window.innerHeight; const elementTop = element.offsetTop; const elementBottom = elementTop + element.offsetHeight; return ((elementBottom <= pageBottom) && (elementTop >= pageTop)); }Este código puede necesitar algunas ediciones si el elemento es más alto que la ventana; ¿Podrías comparar solo la parte superior de los elementos?
Podría iniciar un intervalo comprobando cada fotograma una vez que se iniciara el desplazamiento hasta que la función se volviera verdadera, momento en el que podría borrar el intervalo y comenzar la animación.