Feature Request: Implement Counting Animation for Hero Section Stats #393
Description
Currently, the "About Us" page's hero section displays static numbers for "Notes Shared," "Contributors," and "Available." While informative, these numbers could be more engaging with a dynamic counting animation, where they visually increment from 0 to their final value when the user scrolls the section into view. This would enhance the user experience and make the page feel more interactive and lively.
I propose adding a JavaScript-based counting animation to the .stat-number elements within the .hero-stats section of the about.html page.
Specifically:
When the .hero-stats section (or specifically the .stat-item elements) enters the user's viewport, the numbers inside the .stat-number spans should animate.
For numeric values (e.g., "500+", "100+"), the animation should count up from 0 to the target number over a short duration (e.g., 1.5-2 seconds).
The animation should only trigger once per page load when the element first becomes visible.
The "24/7" stat should remain as static text or be handled gracefully if it's not a numeric count.
The existing styling and layout of the "About Us" page should remain unchanged.
Pure CSS animation: Not feasible for dynamic number counting.
Libraries: Could use a dedicated counting animation library, but for this simple use case, a custom JavaScript solution is preferred to keep the project lightweight and reduce external dependencies.
The data-target attribute can be used to store the final number. An IntersectionObserver would be ideal for detecting when the elements are in view.
Expected Outcome:
When a user visits the "About Us" page and scrolls down to the hero section, they should see the numbers "500+", "100+", and "24/7" animate into view, with the numeric values counting up smoothly.