Animated Number

An animated number using framer-motion

100
Drag

Prerequisites

This component requires the package framer-motion .

npm i framer-motion

Globe

animated-number.tsx
'use client'
 
import { motion, useSpring, useTransform } from 'framer-motion'
import { useEffect } from 'react'
 
export function AnimatedNumber({ value, className }: { value: number, className?: string }) {
  const spring = useSpring(value, { mass: 0.8, stiffness: 75, damping: 15 })
  const display = useTransform(spring, current =>
    Math.round(current).toLocaleString())
 
  useEffect(() => {
    spring.set(value)
  }, [spring, value])
 
  return <motion.span className={className}>{display}</motion.span>
}
Info
You can try to reduce stiffness to slow down animation numbers a bit

Props

PropTypeDefault
value
number
100
className
string
-

Previous

Introduction

Next

Animated Tabs

On this page

PrerequisitesGlobeProps