Animation

useReveal

Animate any given component with satisfying reveal animations.

Overview

useReveal provides smooth scroll-based animations for React components. It supports multiple animation types (slide, fade, scale, blur) with customizable directions, delays, and durations. Built with Framer Motion, it automatically triggers animations when elements enter the viewport.

Hook Implementation

The complete hook source code

useRevealtypescript
jsx

Usage Example

See how to use this hook in your components

Example Componenttypescript
jsx

Best Practices

  • →Always memoize or stabilize dependencies to prevent unnecessary re-renders
  • →Consider the performance implications when dealing with frequently updated values
  • →Test edge cases like null values, rapid updates, and component unmounting