TweenLabsMIT License

Installation & Setup

Pick any animation from the gallery. Install it in seconds via the CLI, or copy-paste it manually — no build step, no config.

The TweenLabs CLI installs any component directly into your project with a single command. It downloads the file and all required dependencies automatically.

1Run the CLI

Replace ComponentName with the exact name from the gallery (e.g. KineticText, FlipCards, MorphingText).

npx tweenlabs@latest add ComponentName

→No global install needed — the runner fetches the latest version every time.

2Done

The CLI places the component file in your project and installs gsap and @gsap/reactif they aren't already present. Import and use it immediately.

⚠️
CLI Notice

Run in your project's root directory. The CLI creates the file under src/components/tweenlabs/ and resolves dependencies automatically.

Examples & Requirements

Examples

KineticTextWave text animation
npx tweenlabs@latest add KineticText
FlipCards3D flip card grid
npx tweenlabs@latest add FlipCards
MorphingTextColour-morphing headline
npx tweenlabs@latest add MorphingText
ScrollCardsScroll-pinned card deck
npx tweenlabs@latest add ScrollCards

Requirements

✓Node.js 18+ — check with node --version
✓Next.js App Router — components use the App Router file convention
✓Tailwind CSS — all styles use inline Tailwind classes
✓TypeScript — components are fully typed
✓pnpm (recommended) — install via npm i -g pnpm
✓Git — for cloning and version control
Verify & Troubleshoot
✅Verify Your Setup
  • node --version → 18.x or 20.x
  • pnpm --version → 8.x or 9.x
  • Dev server starts on port 3000
  • /components shows the animation gallery
  • No TypeScript errors in the console
  • Animations play on hover / scroll
🔧Common Issues

GSAP animation not running?

Make sure the component has "use client" at the top — GSAP requires a browser environment.

ScrollTrigger not firing?

Call gsap.registerPlugin(ScrollTrigger) outside any component or hook.

Port 3000 already in use?

Run pnpm dev -- -p 3001 to use a different port.

Hydration mismatch errors?

Wrap animated elements in a useEffect-guarded mount check or use suppressHydrationWarning.

📖GSAP Quick Reference

Basic Tween

tsx
import { useGSAP } from "@gsap/react";
import { useRef } from "react";
import gsap from "gsap";

export default function Box() {
  const ref = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    gsap.to(ref.current, {
      x: 100,
      duration: 1,
      ease: "power2.out",
    });
  }, { scope: ref });

  return <div ref={ref} />;
}

ScrollTrigger

tsx
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

useGSAP(() => {
  gsap.from(".card", {
    y: 60,
    opacity: 0,
    stagger: 0.1,
    scrollTrigger: {
      trigger: ".card",
      start: "top 80%",
    },
  });
}, { scope: containerRef });
🔗Full GSAP docs at gsap.com/docs/v3/ · useGSAP hook at gsap.com/docs/v3/Packages/@gsap/react

ready?

Browse the components →

🎨 Components🛠 Contribute