I've managed to modify an animated progress bar to my specific requirements, but would like the additional feature of the animation effect being delayed until that section of the page is scrolled to.

Here is a fiddle of my current setup: Fiddle using the following Javascript:

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

});

I've come across a similar post from 8 years ago: Previous Post, but when I try to incorporate this code into my setup, the animation stops working completely.

Can anyone point me in the right direction to achieve the effect I'm looking for?

Thanks

P.S.

To clarify, I would only want the animation to play once. Once all the sliders have slid across, I would want them to stay there.

For how far into the view, I would say around when the bottom item "Copper" appears on the screen.