Sliding Number Animation

A component that animates the transition between numbers.

Also used as Counter

Pumki UI

0012345678900123456789.0012345678900123456789

Installation

1import { SlidingNumber } from '@/components/pumki-ui/text/sliding-number';

1<SlidingNumber number={55555} />

Using SlidingNumber component to display the current year with a sliding animation.

Pumki UI

00123456789001234567890012345678900123456789

Prop	Type	Default	Description
`transition?`	`SpringOptions`	`{ stiffness: 200, damping: 20, mass: 0.4 }`	Animation config
`decimalPlaces?`	`number`	`0`	Number of decimal places
`decimalSeparator?`	`string`	`.`	Decimal separator character
`padStart?`	`boolean`	`false`	Pad with leading zeros
`inViewOnce?`	`boolean`	`true`	Animate only once in view
`inViewMargin?`	`string`	`0px`	Margin for viewport detection
`inView?`	`boolean`	`false`	Enable viewport-based animation
`number`	`number \| string`	-	Value to animate
`className?`	`string`	-	Class for root element