Rotate 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 Rotate In Animation"
      animationType="rotate"
      duration={0.7}
      stagger={0.04}
    />
  );
}

Examples

Default

Open in

<SplitTextAnimation
  text="Smooth Rotate In Animation"
  animationType="rotate"
  duration={0.7}
  stagger={0.04}
/>

Fast Rotate

Open in

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

Slow Rotate

Open in

<SplitTextAnimation
  text="Slow Rotate In Animation"
  animationType="rotate"
  duration={1.2}
  stagger={0.06}
/>

API Reference

Prop

Type

Credits

GSAP: greensock.com
GitHub: greensock/GSAP