Logré modificar una barra de progreso animada según mis requisitos específicos, pero me gustaría que la función adicional del efecto de animación se retrase hasta que se desplace a esa sección de la página.

Aquí hay un violín de mi configuración actual: Fiddle usando el siguiente Javascript:

 $(".animated-progress span").each(function () { $(this).animate( { width: $(this).attr("data-progress") + "%", }, 2000 ); });

Me encontré con una publicación similar de hace 8 años: Publicación anterior , pero cuando intento incorporar este código en mi configuración, la animación deja de funcionar por completo.

¿Alguien puede indicarme la dirección correcta para lograr el efecto que estoy buscando?

Gracias

PD

Para aclarar, solo me gustaría que la animación se reproduzca una vez. Una vez que todos los controles deslizantes se hayan deslizado, me gustaría que se quedaran allí.

Para saber qué tan lejos en la vista, diría alrededor de cuándo aparece el elemento inferior "Cobre" en la pantalla.