Swap Text

Two strings swap on hover: the first slides up and out, the second slides in from above. AnimatePresence mode='wait'.

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.

Swap TextTwo strings swap on hover: the first slides up and out, the second slides in from above. AnimatePresence mode='wait'.

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

type SwapTextProps = {
  from: string;
  to: string;
};

export function SwapText({ from, to }: SwapTextProps) {
  const [hovered, setHovered] = useState(false);

  return (
    <span
      className="mp-swap-text"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ display: "inline-block", position: "relative", cursor: "default" }}
    >
      <AnimatePresence mode="wait" initial={false}>
        {!hovered ? (
          <motion.span
            key="from"
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 10 }}
            transition={{ duration: 0.18, ease: "easeOut" }}
            style={{ display: "inline-block" }}
          >
            {from}
          </motion.span>
        ) : (
          <motion.span
            key="to"
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 10 }}
            transition={{ duration: 0.18, ease: "easeOut" }}
            style={{ display: "inline-block" }}
          >
            {to}
          </motion.span>
        )}
      </AnimatePresence>
    </span>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
fromrequired	string	—	Text shown by default
torequired	string	—	Text shown on hover