Circle Counter Animation Starts on Page load - Not on Scroll

[Shepdesign]

The Circle Counter animation starts and ends on page load, and doesn't start animation automatically when the user comes into view of the element.

v1.4

Google Chrome (happens in every browser)

macOS

Reproduction Steps

1. Open the website with the Circle Counter animation.
2. The animation will start and end on page load.
3. Scroll the page so that the Circle Counter element is in the viewport.
4. The Circle Counter will show as played through.
5. The animation should not start automatically on page load but rather when the user is in viewport.

To fix this bug, you can add the following code to the Circle Counter element:

var circleCounter = document.getElementById("circle-counter");

circleCounter.addEventListener("scroll", function() {
  if (circleCounter.isIntersectingViewport()) {
    circleCounter.startAnimation();
  }
});

Not sure if this code is exact for Breakdance, but it works in other frameworks. Basically, the code should listen for the scroll event on the Circle Counter element. When the element is scrolled into view, the startAnimation() function will be called. This function will start the animation again.

Im really tired though so take the code with a grain of salt. Either way, what's the point of an animated circle counter if it doesn't animate when the user comes into view of it.

Reproduction Video

https://github.com/soflyy/breakdance-bugs/assets/97276735/0d98ce8c-ceee-49a2-9aa7-775097a7d853

[Shepdesign]

Did this get updated? I noticed the new design set - Travel Trip, is utilizing this element and it seems to work appropriately.

[louisreingold]

https://github.com/soflyy/breakdance-bugs/issues/1047

[breakdancemoderator]

Thanks for the report. This has been addressed in Breakdance 2.0.