#
ScrollInView
This animates content on scroll using Framer Motion and react-intersection-observer.
React / Next.js
Start Small
Every expert was once a beginner.
Stay Consistent
Success is the sum of small efforts repeated.
Never Give Up
Winners are not those who never fail but those who never quit.
Dream Big
Aim for the moon. Even if you miss, you’ll land among the stars.
Take Action
A goal without a plan is just a wish.
Embrace Failure
Failure is not the opposite of success, it’s part of success.
ScrollInView
A utility wrapper that animates children when they come into view during scroll.
| Prop | Description | Value(s) |
|---|---|---|
| `children` | The content to animate. | `ReactNode (required)` |
| `animationType` | Animation variant used when in view. | `'fade-up' | 'fade-in' | 'fade-down' | 'slide-left' | 'slide-right' | 'zoom-in' (default: 'fade-up')` |
| `delay` | Delay before the animation starts. | `number (default: 0)` |
| `duration` | Duration of the animation in seconds. | `number (default: 0.6)` |
| `threshold` | Percent of component visibility required to trigger animation. | `number (default: 0.2)` |
| `once` | Whether to animate only once or every time in view. | `boolean (default: true)` |
| `className` | Optional custom class for the wrapper. | `string` |