React GSAP Animations

A React library for smooth scrolling and GSAP-powered text animations with stunning falling word effects.

Features

• 🎨 FallWords Component: Animated text with falling colored boxes effect on scroll
• 🖱️ SmoothScroll Component: Buttery smooth scrolling using Lenis
• ⚡ Performance Optimized: Built with GSAP and optimized for React 18+
• 🎯 TypeScript Ready: Works seamlessly with TypeScript projects
• 📦 Lightweight: Minimal bundle size with peer dependencies

Installation

npm install react-gsap-animations

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom gsap lenis

Usage

SmoothScroll

Add smooth scrolling to your entire application:

import { SmoothScroll } from 'react-gsap-animations';

function App() {
  return (
    <>
      <YourContent />
      <SmoothScroll />
    </>
  );
}

FallWords

Create animated text with falling colored boxes:

import { FallWords } from 'react-gsap-animations';

function MyComponent() {
  return (
    <FallWords delay={0} color="#ededed">
      <h1>Your animated text here</h1>
    </FallWords>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | required | The text content to animate | | delay | number | 0 | Delay before animation starts (in seconds) | | color | string | '#ededed' | Color of the falling boxes |

Complete Example

import { FallWords, SmoothScroll } from 'react-gsap-animations';

export default function Page() {
  return (
    <div>
      <section className="h-screen flex items-center justify-center">
        <FallWords color="#587E67" delay={0.2}>
          <h1 className="text-6xl font-bold">
            Welcome to My Site
          </h1>
        </FallWords>
      </section>

      <section className="h-screen flex items-center justify-center">
        <FallWords color="#ededed">
          <p className="text-2xl">
            Beautiful scroll animations
          </p>
        </FallWords>
      </section>

      <SmoothScroll />
    </div>
  );
}

Requirements

• React 18.0.0 or higher
• GSAP 3.0.0 or higher
• Lenis 1.0.0 or higher

Browser Support

Works in all modern browsers that support:

• ES6+
• CSS transforms
• RequestAnimationFrame

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.