Content Transition

Smooth number transitions for Expo.

A NumericText for Expo. When the value changes, only the characters that differ move, each on its own spring.

Get started
Open the playground
npx expo install expo-content-transition

How it works

A diff, not a crossfade.

Most animated text fades the old value out and the new one in. NumericText lines the two up and moves each glyph on its own spring, in the spirit of SwiftUI's numericText transition.

Only what changed moves

Old and new text are compared glyph by glyph. 123.45 to 123.46 rolls one digit; the rest hold perfectly still.

Aligned at the decimal

Digits keep their place around the separator, with prefixes and suffixes held apart, so $9.99 to $10.49 grows a digit instead of shuffling.

Direction from the value

Bigger numbers roll up and smaller ones roll down, worked out from the values themselves. Force it for clocks and countdowns.

Playground

Every prop, live.

Drag a slider and the next change uses it. The code updates with you, down to the props you can leave out.

Full screen

Transition

direction
duration
bounce
enterScale
travel

Blur and clipping

blurIntensity

Typography

fontSize
fontWeight
alignment
Preview.tsx
import { NumericText } from 'expo-content-transition';

<NumericText
  value={value}
  fontSize={72}
  fontWeight="600"
  monospacedDigits
  alignment="center"
/>

Only props that differ from the defaults are written. The preview runs the package's own web renderer, so this is the motion you get on the web; iOS and Android follow the same springs.

Examples

For the numbers in your app.

Balances, prices, timers, counts and labels. Each one is a few lines, and every one below is running now.

All examples
Wallet balanceFormatted money that converts between currencies. Symbols and separators animate like any other glyph.
AAPLApple Inc.
Stock tickerA live price with its daily change. The colour follows the direction the number moved.
CountdownA timer that should only ever tick one way, so the direction is forced.
Like countCompact notation from Intl. When 999 becomes 1K, the whole number changes shape and every glyph rolls.
Status labelWords work too. Without digits, glyphs line up from the start and swap in place.
Downloading…
Download progressA percentage that climbs quickly. A shorter duration keeps up with frequent updates.

Platforms

Native where it runs.

The same diff and the same springs, ported to each platform's own renderer. Only the new string crosses the bridge; on iOS and Android the motion never touches the JavaScript thread.

iOSCore Animation
  • Each glyph is its own layer, driven by the display link
  • System fonts, custom families and PostScript names
  • iOS 16.4 and later
AndroidJetpack Compose
  • Glyphs drawn and transformed in a single composable
  • Feathered clipping at the line edges
  • Blur on Android 12 (API 31) and later
WebDOM
  • One element per glyph, moved with CSS transforms
  • Follows prefers-reduced-motion by itself
  • Through react-native-web, no extra setup

Questions

The short ones are here. For anything else, the docs go deeper.

Read the docs

Start with one line.

Add the package, rebuild your development client, and put NumericText anywhere you’d put a Text.

npx expo install expo-content-transition
Read the installation guide