Animate UI

Scrolling Number

A scrolling number animation.

Made by imskyleen
Edit on GitHub
Open in
1,200
1,100
1,000
900
800
700
600
500
400
300
200
100
0

Installation

Usage

<ScrollingNumberContainer number={1000} step={100}>
  <ScrollingNumberHighlight />
  <ScrollingNumber>
    <ScrollingNumberItems />
  </ScrollingNumber>
</ScrollingNumberContainer>

API Reference

ScrollingNumberContainer

PropTypeDefault
number
number
-
step
number
-
itemsSize?
number
30
sideItemsCount?
number
2
direction?
"btt" | "ttb" | "ltr" | "rtl"
btt
onNumberChange?
(value: number) => void
-
inView?
boolean
false
inViewOnce?
boolean
true
inViewMargin?
string
0px
...props?
React.ComponentProps<"div">
-

ScrollingNumberHighlight

PropTypeDefault
...props?
React.ComponentProps<"div">
-

ScrollingNumber

PropTypeDefault
delay?
number
0
onCompleted?
() => void
-
transition?
SpringOptions
{ stiffness: 90, damping: 30 }
...props?
HTMLMotionProps<"div">
-

ScrollingNumberItems

PropTypeDefault
...props?
React.ComponentProps<"div">
-

Built by Skyleen. The source code is available on GitHub.