5 JavaScript Counters
This collection is a complete guide to creating counters with JavaScript, from basic interactivity to complex visual effects. It starts with the fundamentals: managing a value via addEventListener and updating the DOM. Next, the popular “count-up” technique is demonstrated - a smooth animation of a number to its target value, triggered on scroll. To create more impressive interfaces, examples that mimic a mechanical odometer via transform are featured, adding tactility and visual interest.
Examples
Sci-Fi Reticule Play Button
This is a Sci-Fi Reticule Play Button. It replaces static interaction states with an immersive, HUD-like sequence. Its function is to trigger a process (like loading data or initializing an app) while providing real-time visual feedback through an animated percentage counter and expanding SVG geometry. (Requires: GSAP, DrawSVGPlugin, ScrambleTextPlugin)
Chrome 55+
Edge 79+
Firefox 54+
Safari 11+
See the Pen Sci-Fi Reticule Play Button.
Incrementing Counter
A dynamic and engaging statistics block that creates a sense of activity and popularity through running numbers and background animation.
See the Pen Incrementing Counter.
Motion Blurred Number Counter
As the slider moves, the numbers change rapidly, blurring horizontally to create a sensation of high-speed motion (motion blur), reminiscent of an old speedometer or a slot machine counter.
See the Pen Motion Blurred Number Counter.
Soft UI Counter Component
This simple counter demonstrates clean vanilla JavaScript functionality: counter management, class switching for instant color scheme change based on the number’s sign. The stylistic focus is on “Soft UI” aesthetics.
See the Pen Soft UI Counter Component.
Bouncy Counter
A technical approach to dynamic UI effects: the counter digits are animated via custom CSS transitions, while the high-contrast “shade” effect during the change is achieved using the contemporary mix-blend-mode: difference property.
See the Pen Bouncy Counter.