react-awesome-reveal.md

Overview

React Awesome Reveal is a dead-simple way to add reveal animations to React applications. Built on Intersection Observer API and CSS animations, it provides smooth, performant animations with minimal configuration.

Features

• Intersection Observer based
• CSS animations
• Zero dependencies
• TypeScript support
• SSR compatible
• Customizable animations
• Cascading reveals
• Custom delays
• Trigger once or repeat
• Threshold configuration
• Root margin
• Fraction visible
• Custom keyframes

Built-in Animations

• Fade
• Slide (up, down, left, right)
• Zoom (in, out)
• Flip (x, y)
• Bounce (in, up, down, left, right)
• Roll
• Rotate
• JackInTheBox
• Hinge

Components

• Fade
• Slide
• Zoom
• Bounce
• Flip
• Roll
• Rotate
• Reveal (generic with custom keyframes)
• AttentionSeeker

Configuration

• delay - animation delay
• duration - animation duration
• cascade - stagger children
• damping - cascade damping
• triggerOnce - animate once
• fraction - visible fraction
• direction - slide/bounce direction
• keyframes - custom CSS keyframes

Cascade Effect

• Stagger child animations
• Configurable delay between items
• Works with lists
• Sequential reveals
• Damping control

Performance

• Intersection Observer (native)
• CSS animations (GPU)
• No JavaScript animation
• Minimal re-renders
• Efficient viewport detection

Customization

• Custom keyframes
• Custom easing
• Custom duration
• Custom delays
• CSS classes
• Inline styles

Use Cases

• Landing pages
• Marketing sites
• Portfolio sites
• Feature sections
• List animations
• Card reveals
• Gallery items
• Scroll storytelling

Accessibility

• Respects prefers-reduced-motion
• Screen reader friendly
• Keyboard accessible
• No layout shift

Integration

• Works with any React app
• Next.js compatible
• Gatsby compatible
• Static site generators
• React Router

Pricing

Free and open-source under the MIT license.