Lightweight fade-in animation component using Intersection Observer
npm install react-fade-in-viewreact-fade-in-view is a lightweight React fade-in animation library
that triggers smooth scroll-based animations when elements enter the viewport
using the Intersection Observer API.
Ideal for React & Next.js applications, landing pages, portfolios,
blogs, and content-heavy websites that need performant viewport animations.
---
- Lightweight: No extra animation libraries
- Intersection Observer: Animates elements on viewport enter
- Simple API: Easy to use, fully customizable
- Directional animations: Up, down, left, right, fade, zoom
- Optional repeat: Animate every time or just once
- React & Next.js compatible
- TypeScript ready
---
``bash`
npm install react-fade-in-view
or
`bash`
yarn add react-fade-in-view
---
`tsx
import { FadeIn } from "react-fade-in-view";
import "react-fade-in-view/dist/index.css";
export default function FadeInWithChildElement() {
return (
Hello World
);
}
export default function FadeInAsHTMLTag() {
return (
Hello World
);
}
`
---
`tsx`
---
| Prop | Type | Default | Description |
| ----------- | --------------------------------------------------------- | ------- | --------------------------------------------------- |
| as | React.ElementType | div | Element or component to render instead of div |direction
| | "up" \| "down" \| "left" \| "right" \| "fade" \| "zoom" | up | Animation style / direction |className
| | string | "" | Optional custom CSS classes |immediate
| | boolean | false | Animate immediately instead of waiting for viewport |children
| | React.ReactNode | — | Content to animate |...rest
| | any | — | Pass extra props to the rendered element |
---
`tsx`
This fades in slowly with a delay
---
`tsx`
This will animate every time it enters the viewport
---
`tsx
import { FadeIn } from "react-fade-in-view";
import "react-fade-in-view/dist/index.css";
export default function Page() {
return (
Next.js Page with FadeIn
);
}
``
---
- Better performance than animation-heavy libraries
- Zero runtime dependencies
- Ideal replacement for simple Framer Motion use-cases
- Works perfectly with SSR & Next.js
---
React fade animation, fade in on scroll React,
Intersection Observer React animation,
Next.js scroll animation,
lightweight React animation library
---
Love using react-fade-in-view?
Support the project by buying me a coffee ☕ and helping future development.
alt="UPI Donation QR"
width="220"
/>
alt="PayPal Donation QR"
width="220"
/>
UPI ID: ayushpatel5659-1@okhdfcbank
---
MIT © Aayush Daboriya