Sliding Number

Slot-machine style digit animation. Each digit slides in from below when the value changes using AnimatePresence.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Sliding NumberSlot-machine style digit animation. Each digit slides in from below when the value changes using AnimatePresence.

"use client";
import { useState, useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";

type SlidingNumberProps = {
  value: number;
};

function Digit({ digit, position }: { digit: string; position: number }) {
  return (
    <span className="mp-sliding-number-col">
      <AnimatePresence mode="popLayout">
        <motion.span
          key={digit + "-" + position}
          className="mp-sliding-number-digit"
          initial={{ y: "100%", opacity: 0 }}
          animate={{ y: "0%", opacity: 1 }}
          exit={{ y: "-100%", opacity: 0 }}
          transition={{ duration: 0.22, ease: "easeOut" }}
        >
          {digit}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}

export function SlidingNumber({ value }: SlidingNumberProps) {
  const str = String(Math.abs(Math.round(value)));
  return (
    <span className="mp-sliding-number">
      {value < 0 && <span className="mp-sliding-number-digit">-</span>}
      {str.split("").map((d, i) => (
        <Digit key={i} digit={d} position={i} />
      ))}
    </span>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
valuerequired	number	—	Number to display with sliding digits