Animated Number

Easily animate numbers.

Examples

Basic

Basic counter

1,000

With useInView

Code

'use client';
import { cn } from '@/lib/utils';
import { motion, SpringOptions, useSpring, useTransform } from 'framer-motion';
import { useEffect } from 'react';

type AnimatedNumber = {
  value: number;
  className?: string;
  springOptions?: SpringOptions;
};

export function AnimatedNumber({
  value,
  className,
  springOptions,
}: AnimatedNumber) {
  const spring = useSpring(value, springOptions);
  const display = useTransform(spring, (current) =>
    Math.round(current).toLocaleString()
  );

  useEffect(() => {
    spring.set(value);
  }, [spring, value]);

  return (
    <motion.span className={cn('tabular-nums', className)}>
      {display}
    </motion.span>
  );
}

Please add:

Component API

Prop	Type	Description
value	number	The number to be animated.
className	string	Optional CSS class for styling the number item container.
springOptions	SpringOptions	Spring options from framer-motion for the animation.