Fade 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="Beautiful Fade In Animation"
      animationType="fade"
      duration={0.8}
      stagger={0.03}
    />
  );
}

Examples

Default

Open in

<SplitTextAnimation
  text="Beautiful Fade In Animation"
  animationType="fade"
  duration={0.8}
  stagger={0.03}
/>

Fast Fade

Open in

<SplitTextAnimation
  text="Fast Fade In Animation"
  animationType="fade"
  duration={0.4}
  stagger={0.02}
/>

Slow Fade

Open in

<SplitTextAnimation
  text="Slow Fade In Animation"
  animationType="fade"
  duration={1.2}
  stagger={0.05}
/>

API Reference

Prop

Type

Credits

GSAP: greensock.com
GitHub: greensock/GSAP