Slide Animation

Install the GSAP dependency

npm install gsap

Add the component

npx shadcn@latest add https://glsilk.vercel.app/r/split-text-animation.json

Quick Start

app/page.tsx

import { SplitTextAnimation } from "@/components/ui/split-text-animation";

export default function Home() {
  return (
    <SplitTextAnimation
      text="Smooth Slide Up Animation"
      animationType="slide"
      direction="up"
      duration={0.8}
      stagger={0.03}
    />
  );
}

Examples

Slide Up

Open in

<SplitTextAnimation
  text="Smooth Slide Up Animation"
  animationType="slide"
  direction="up"
  duration={0.8}
  stagger={0.03}
/>

Slide Down

Open in

<SplitTextAnimation
  text="Smooth Slide Down Animation"
  animationType="slide"
  direction="down"
  duration={0.8}
  stagger={0.03}
/>

Slide Left

Open in

<SplitTextAnimation
  text="Smooth Slide Left Animation"
  animationType="slide"
  direction="left"
  duration={0.8}
  stagger={0.03}
/>

Slide Right

Open in

<SplitTextAnimation
  text="Smooth Slide Right Animation"
  animationType="slide"
  direction="right"
  duration={0.8}
  stagger={0.03}
/>

API Reference

Prop

Type

Credits

GSAP: greensock.com
GitHub: greensock/GSAP