Tengo una animación SVG hecha con anime.js en el evento de desplazamiento, el SVG está fijo en la parte inferior de la página, la idea es que cuando termine la animación, muestre contenido nuevo que será básicamente una continuación del SVG.

El problema es que no se cuando mostrar el nuevo contenido.

Las cosas con las que estoy luchando es que no puedo animar la animación en el desplazamiento si no tengo contenido para desplazarme, pero si tengo contenido, no sé cuánto se ha desplazado un usuario y cuándo mostrar el nuevo contenido.

Además, tengo un problema en el que tengo una duración de animación de 1000 ms, pero la animación es más lenta si tengo más contenido en la página, por lo que cuanto más espacio tengo para desplazarme, más lenta es la animación y creo que esto afectará la aparición del nuevo contenido también porque el usuario puede desplazarse demasiado lejos.