Sliding Text

"use client"

import {
  SlidingText,
  type SlidingTextDirection,
  type SlidingTextTrigger,
} from "@animate-ui/react/primitives/texts/sliding"

export default function SlidingTextDemo({
  direction = "down",
  trigger = "hover",
}: {
  direction?: SlidingTextDirection
  trigger?: SlidingTextTrigger
}) {
  return (
    <SlidingText
      key={`${direction}-${trigger}`}
      direction={direction}
      trigger={trigger}
      className="cursor-pointer text-4xl font-semibold"
      text="Sliding Text"
    />
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import { SlidingText } from '@animate-ui/react/primitives/texts/sliding';

export function NavLink() {
  return (
    <a href="/docs">
      <SlidingText text="Docs" />
    </a>
  );
}

AnimationCopy Anchor Link

• The text sits in a box that clips it. On hover, it slides out by its own height plus a small gap (0.6em) while a copy of it slides in from the other side, in 0.25s on an ease-in-out.
• direction="down" sends the text down and brings the copy from above; direction="up" does the opposite.
• With trigger="hover", leaving slides it back the other way. Left halfway, it turns back from where it is.
• With trigger="click", each click slides it once more in the same direction. A click during a slide carries it on without a jump.
• The box keeps the text's size and baseline, so it fits inside a line, a link or a button. A text on several lines slides as a whole.
• <AnimateUIProvider tempo> paces the default transition.
• Under reduced motion, the text doesn't move.
• Screen readers read the text once: the copy is hidden from them.

API ReferenceCopy Anchor Link

SlidingTextCopy Anchor Link