[FEATURE] - Animated Counter To Stats section #405
Description
✨ Feature Description
Add an animated counter component to stats section, that smoothly counts numbers from a starting value to a target value when it comes into view. This will be used to showcase stats like researchers, paper organised, etc. in a more engaging way.
🎯 Why is this Needed?
-Makes important stats stand out instead of looking static.
-Creates a more dynamic and polished user experience.
-Helps highlight achievements or growth in a way that draws attention.
📋 Possible Implementation
-
Add data-target, data-suffix, and data-decimals to each .stat-number.
-
Style numbers bold and labels muted so stats stand out.
-
Use IntersectionObserver to trigger counting only when stats scroll into view.
-
Animate numbers from 0 → target with requestAnimationFrame and easing.
-
Format values with toLocaleString() for commas/decimals.
-
Use suffixes like + / % from data-* attributes.
-
Run once per element, add a .done class when finished.
-
Respect reduced motion (show final instantly).
-
Fallback: show final number if JS is disabled.