#
ScrollInView
This animates content on scroll using Framer Motion and react-intersection-observer.
React / Next.js
🔒
https://localhost:3000/preview

Loading preview...

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.

Loading...
localhost:3000
ScrollInView
A utility wrapper that animates children when they come into view during scroll.
PropDescriptionValue(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`