ovanya-animated-wrapper

A lightweight, performant React component for creating beautiful scroll-based animations using Tailwind CSS and Intersection Observer API.

✨ Features

• 🎭 5 Built-in Animations - fade-in, fade-up, fade-down, fade-left, fade-right
• 🎯 Intersection Observer - Efficient scroll detection with zero dependencies
• ⚡ Lightweight - Minimal bundle size
• 🎨 Tailwind CSS - Seamless integration with your Tailwind project
• ⚙️ Customizable - Control delay, duration, and threshold
• 🔄 React 17+ - Compatible with modern React and Next.js
• 📦 TypeScript - Full type safety included

📦 Installation

# npm
npm install ovanya-animated-wrapper

# yarn
yarn add ovanya-animated-wrapper

# pnpm
pnpm add ovanya-animated-wrapper

Note: This component must be used in a "use client" environment (for Next.js 13+ app directory).

🚀 Quick Start

import { AnimatedWrapper } from "ovanya-animated-wrapper";

export default function App() {
  return (
    <AnimatedWrapper animation="fade-up">
      <h1>This will fade up when scrolled into view!</h1>
    </AnimatedWrapper>
  );
}

📖 Usage

Basic Example

import { AnimatedWrapper } from "ovanya-animated-wrapper";

export default function Page() {
  return (
    <div>
      <AnimatedWrapper animation="fade-up">
        <div className="card">
          <h2>Animated Card</h2>
          <p>This content will smoothly fade up into view.</p>
        </div>
      </AnimatedWrapper>
    </div>
  );
}

Next.js App Router (13+)

"use client";

import { AnimatedWrapper } from "ovanya-animated-wrapper";

export default function ClientComponent() {
  return (
    <AnimatedWrapper animation="fade-in" duration={1} delay={0.2}>
      <section>
        <h1>Welcome to Next.js!</h1>
      </section>
    </AnimatedWrapper>
  );
}

Multiple Animations

import { AnimatedWrapper } from "ovanya-animated-wrapper";

export default function Features() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <AnimatedWrapper animation="fade-up" delay={0}>
        <div className="feature-card">Feature 1</div>
      </AnimatedWrapper>

      <AnimatedWrapper animation="fade-up" delay={0.2}>
        <div className="feature-card">Feature 2</div>
      </AnimatedWrapper>

      <AnimatedWrapper animation="fade-up" delay={0.4}>
        <div className="feature-card">Feature 3</div>
      </AnimatedWrapper>
    </div>
  );
}

Custom Styling

import { AnimatedWrapper } from "ovanya-animated-wrapper";

export default function CustomExample() {
  return (
    <AnimatedWrapper
      animation="fade-left"
      duration={0.8}
      delay={0.3}
      className="bg-gradient-to-r from-purple-500 to-pink-500 p-8 rounded-lg"
    >
      <h2 className="text-white text-2xl">Custom Styled Content</h2>
    </AnimatedWrapper>
  );
}

🎨 Animation Types

| Animation | Description | Effect | | ------------ | -------------------------- | --------------------------- | | fade-in | Simple opacity transition | Elements fade in | | fade-up | Fade in while moving up | Elements slide up + fade | | fade-down | Fade in while moving down | Elements slide down + fade | | fade-left | Fade in while moving left | Elements slide left + fade | | fade-right | Fade in while moving right | Elements slide right + fade |

⚙️ API Reference

Props

| Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------ | ----------- | ------------------------------- | | children | ReactNode | required | Content to be animated | | animation | "fade-in" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "fade-up" | Animation type | | delay | number | 0 | Animation delay in seconds | | duration | number | 0.6 | Animation duration in seconds | | className | string | "" | Additional Tailwind CSS classes |

TypeScript

import { AnimatedWrapper, AnimatedWrapperProps } from "ovanya-animated-wrapper";

const props: AnimatedWrapperProps = {
  animation: "fade-up",
  duration: 1,
  delay: 0.2,
  className: "custom-class",
};

🛠️ Advanced Configuration

Custom Intersection Observer Settings

The component uses these default Intersection Observer settings:

{
  threshold: 0.1,        // Trigger when 10% visible
  rootMargin: "0px 0px -50px 0px"  // Trigger 50px before bottom
}

Sequential Animations

Create a staggered effect by incrementing delays:

const items = ["Item 1", "Item 2", "Item 3", "Item 4"];

export default function List() {
  return (
    <div>
      {items.map((item, index) => (
        <AnimatedWrapper
          key={item}
          animation="fade-right"
          delay={index * 0.1}
          duration={0.5}
        >
          <div className="list-item">{item}</div>
        </AnimatedWrapper>
      ))}
    </div>
  );
}

💡 Best Practices

1. Performance: The animation triggers once and removes the observer after activation
2. Tailwind CSS: Make sure Tailwind CSS is installed and configured in your project
3. Client Components: Always use in client components ("use client") for Next.js app directory
4. Accessibility: Respect user preferences with prefers-reduced-motion:

<AnimatedWrapper
  className="motion-reduce:opacity-100 motion-reduce:translate-y-0"
  animation="fade-up"
>
  {/* Content */}
</AnimatedWrapper>

🔧 Requirements

• React 17 or higher
• Tailwind CSS
• Modern browser with Intersection Observer support

📄 License

MIT © [Your Name]

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📝 Changelog

v1.0.2

• Initial release with 5 animation types
• TypeScript support
• Intersection Observer implementation

Made with ❤️ for the React community