Count up

A number counts up to its value when it scrolls into view, in the page's own format.

enhancer
number
entrance
scroll
stats
since 0.1

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Count up example

2,048 pixels 98.6 degrees

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<p class="demo-stats"><span class="demo-num" data-motion="count-up">2,048</span> pixels <span class="demo-num" data-motion="count-up" data-duration="2400">98.6</span> degrees</p>

import { CountUp } from "./motion/react/CountUp";

<CountUp>Your content</CountUp>

<script setup lang="ts">
import CountUp from "./motion/vue/CountUp.vue";
</script>

<template>
  <CountUp>Your content</CountUp>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "count-up";
// run the entrance again: axi0Motion.play(el, "count-up")

The wrappers: CountUp.tsx (React, TypeScript) and CountUp.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-from`	`0`	the starting number
`data-motion-duration`	`1800`	milliseconds
`data-motion-delay`	`0`	milliseconds before it starts

The page holds the real number, so it reads correctly without JavaScript, to screen readers and under reduced motion (no counting then). Decimals, a thousands comma, a prefix and a suffix are kept. The final text keeps the width while it counts: nothing beside it moves.

Size

count-up.js is 0.9 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.