Vue animation example
Vue Number Animation: Rolling Odometer Counter
Count-up numbers are common; rolling digits are more satisfying. Each digit here sits on its own wheel and rolls the shortest way to its new value, settling with a tiny overshoot, while digits that do not change stay still. Click to jump to a new random value, or set the value input from your data.
- 4.3 KB file
- 5 live inputs
- Vue runtime
How this odometer counter works
- Each digit position is an independent spring on a continuous wheel from 0 to 9.
- Thousand separators are static, and only digits whose value changes start moving.
- Digits above and below fade with a mask, giving the window-of-a-wheel look.
Add it to your Vue app
Install exodeui-vue, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
<script setup>
import { ExodeUICanvas } from 'exodeui-vue';
</script>
<template>
<ExodeUICanvas
src="/vue-number-animation.exode"
fit="Layout"
style="width: 100%; height: 420px"
/>
</template>Inputs
| Input | Type | Default | Range |
|---|---|---|---|
value | Number | 48210 | 0 – 9999999 |
label | Text | Monthly active users | — |
accent | Text | #42b883 | hex colour |
ink | Text | #f8fafc | hex colour |
bg | Text | #0b1220 | hex colour |
More Vue animations
Bouncing Dots SpinnerThree dots bouncing with real gravity, squashing on landing, with shadows that shrink as they rise.Slide and Fade Route TransitionDirection-aware route transitions: pages slide and fade toward the tab you chose, with a sliding indicator.Starfield Parallax HeroA space hero with three star layers, a planet and a rocket moving at different depths.