Count Up

0

Motion makes creating a tick on a curve a cinch, we’ll use the tick to update p#count.

import { animate } from "https://esm.sh/motion";

Create the curve over time and hook into the onUpdate function to set the value.

animate(0, amount, {
  duration: duration,
  ease: "circOut",
  onUpdate: (latest) => count.innerHTML = Math.round(latest),
});

Don’t forget!

.non-wiggly-count-ups {
  font-variant-numeric: tabular-nums;
}

Bonus

Looking for something that animates each digit that changed? I gotchu: Codepen, X.