easy-scroll | Lightweight Scroll Animations

Getting Started

Get up and running with Easy Scroll in under 5 minutes.

Installation

Install the package using npm, yarn, or pnpm:

bash

npm install @chemmangat/easy-scroll

Quick Start

Import components and start animating:

tsx

import { RevealOnScroll } from '@chemmangat/easy-scroll';

export default function Page() {
  return (
    <RevealOnScroll animation="fadeInUp">
      <h1>Hello World!</h1>
    </RevealOnScroll>
  );
}

Next.js Setup

For Next.js projects, import in your root layout:

tsx

// app/layout.tsx or pages/_app.tsx
import '@chemmangat/easy-scroll/dist/styles.css'; // If styles are needed

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Key Features

✓ 21 built-in animations
✓ Zero dependencies
✓ TypeScript support
✓ 9.3KB bundle size
✓ React 18+ compatible
✓ Server-side rendering support
✓ Intersection Observer API

Browser Support

Easy Scroll works in all modern browsers that support Intersection Observer:

✓ Chrome 51+
✓ Firefox 55+
✓ Safari 12.1+
✓ Edge 15+