0

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.

neilwhitedesign
  • 15
  • 5
  • this could be helpful (Intersection Observer API) https://stackoverflow.com/questions/1462138/event-listener-for-when-element-becomes-visible the old way was using the onshow event. – Diego D Jun 13 '22 at 09:58
  • Could you describe what you want to happen when the section goes out of view. Do you want the animation to be removed so that it will play again if the section comes back into view. And how far into view do you want the section to be before the animation is played? A small runnable snippet which allows for scrolling would be helpful. – A Haworth Jun 13 '22 at 10:39
  • First of all, thanks very much for the replies. 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. – neilwhitedesign Jun 13 '22 at 12:53

0 Answers0