Framer Motion Animated Number Counter

animated-number.md

Just a really simple animated number made in framer-motion, inspired by https://motion.dev/docs/react-animate-number

AnimatedNumber.tsx

import {motion} from 'framer-motion';
import classes from './AnimatedText.module.scss';
import classNames from 'classnames';

function AnimatedNumber({
  value,
  className,
  ...props
}: {value: number} & React.HTMLProps<HTMLSpanElement>) {
  const numbers = value.toString().split('').map(Number);
  return (
    <span className={classNames(classes.animatedNumber, className)} {...props}>
      {numbers.map((number, index) => (
        <motion.span
          key={index}
          animate={{y: `-${number}em`}}
          transition={{duration: 0.5, delay: index * 0.1, ease: [0.6, 0.05, -0.01, 0.99]}}>
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </motion.span>
      ))}
    </span>
  );
}

export default AnimatedNumber;

AnimatedNumber.module.scss

.animatedNumber {
  display: flex;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}