Scale 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="Dynamic Scale In Animation"
      animationType="scale"
      duration={0.6}
      stagger={0.04}
    />
  );
}

Examples

Default

Open in

<SplitTextAnimation
  text="Dynamic Scale In Animation"
  animationType="scale"
  duration={0.6}
  stagger={0.04}
/>

Fast Scale

Open in

<SplitTextAnimation
  text="Fast Scale In Animation"
  animationType="scale"
  duration={0.3}
  stagger={0.02}
/>

Slow Scale

Open in

<SplitTextAnimation
  text="Slow Scale In Animation"
  animationType="scale"
  duration={1.0}
  stagger={0.06}
/>

API Reference

Prop

Type

Credits

GSAP: greensock.com
GitHub: greensock/GSAP