Glitch Heading
Text effects · PasteMotion original
- Original
- No JS
- Reduced-motion ready
Animated Number Counter
Stats that count up when they scroll into view, formatted for the visitor locale. Motion.
- Original
- Motion
- Reduced-motion ready
- Customisable
- 959 B gzip
An original by PasteMotion · MIT License
Code
<dl class="number-counter">
<div class="number-counter__stat">
<dt class="number-counter__label">Downloads</dt>
<dd class="number-counter__value" data-value="128400">128,400</dd>
</div>
<div class="number-counter__stat">
<dt class="number-counter__label">Uptime</dt>
<dd class="number-counter__value" data-value="99.98" data-decimals="2" data-suffix="%">99.98%</dd>
</div>
<div class="number-counter__stat">
<dt class="number-counter__label">Countries</dt>
<dd class="number-counter__value" data-value="142">142</dd>
</div>
</dl>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
- Load Motion from the CDN (see the JS tab), then add the script.
- Adjust the custom properties (--accent) on .number-counter to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Letter Wave Text
Text effects · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready
Shimmer Text
Text effects · PasteMotion original
- Original
- No JS
- Reduced-motion ready
Aurora Mesh Background
Backgrounds · PasteMotion original
- Original
- GPU-friendly
- No JS
- Reduced-motion ready
Success Check Draw
Loaders · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready
Trailing Cursor Ring
Cursors · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready