$ show inorganik/countUp.js
CountUp.js is a dependency-free, lightweight JavaScript library that animates numerical values by counting to them. It provides a CountUp class that can be initialized with a target element and end value, then animated using requestAnimationFrame with configurable easing, formatting, and duration. The library supports counting in both directions, smart easing for large numbers, auto-animation when elements become visible via IntersectionObserver, and a plugin system for custom rendering animations (like odometer effects). It's implemented in TypeScript with comprehensive tests and produces distributable ES module, UMD, and minified formats.
The LLM identified 3 files worth highlighting for reuse:
The smart easing algorithm in determineDirectionAndSmartEasing() creates more visually pleasing animations by breaking large number animations into two phases: linear motion for the bulk of the change, followed by eased motion for the remainder. This prevents the easing effect from being imperceptible on large value changes. The pattern is self-contained and could be extracted for use in other animation systems.
The plugin system allows developers to completely customize how animated values are rendered by implementing a simple CountUpPlugin interface with a render(elem, formattedString) method. This decouples the animation logic from the display mechanism, enabling alternative animations like odometer effects without modifying the core library. The pattern demonstrates excellent extensibility principles.
The auto-animate feature properly implements IntersectionObserver with automatic cleanup, delay handling, and once-only triggering options. It includes robust resource management: timeouts are cleared, observers are disconnected, and the implementation avoids memory leaks. This serves as a good pattern for safely integrating browser observation APIs in reusable components.