Revealing Effects
Overview
React Awesome Reveal provides a rich set of pre-built animation components inspired by Animate.css. These components automatically animate their children when they enter the viewport, creating engaging scroll experiences with minimal code.
Available Effects
Choose from these powerful animation components:
Effect | Description | Best Used For |
---|---|---|
Fade | Smooth opacity transition | Text, images, cards |
Slide | Slides in from a direction | Lists, navigation items |
Bounce | Bouncy entrance animation | Call-to-action buttons |
Flip | 3D flip animation | Cards, reveals |
Rotate | Rotation entrance | Icons, badges |
Zoom | Scale transition | Modal windows, highlights |
Roll | Rolling entrance | Playful elements |
JackInTheBox | Pop-out animation | Attention-grabbing elements |
Hinge | Swinging fall animation | Exit animations |
Basic Usage
Wrap your content with any effect component:
import { Slide } from "react-awesome-reveal";
function Features() { return ( <div> <h2>Our Features</h2>
{/* Items slide in one after another */} <Slide direction="up" cascade triggerOnce> <div className="feature">π Performance</div> <div className="feature">π‘ Simplicity</div> <div className="feature">π¨ Customization</div> </Slide> </div> );}
Customization Options
Fine-tune your animations with these props:
Direction Control
// Choose animation direction<Slide direction="left" /> // Slide from left<Slide direction="right" /> // Slide from right<Slide direction="up" /> // Slide from bottom<Slide direction="down" /> // Slide from top
Timing and Triggers
<Fade delay={200} // Wait before starting duration={1000} // Animation duration fraction={0.5} // Trigger when 50% visible triggerOnce // Animate only once/>
Cascade Effects
The cascade
prop animates children one after another, with a delay between each item. Use damping
to control the delay:
<Fade cascade damping={0.2}> <div>First item (no delay)</div> <div>Second item (0.2s delay)</div> <div>Third item (0.4s delay)</div></Fade>
Animation Props Reference
All animation components accept these common props:
Prop | Type | Default | Description |
---|---|---|---|
direction | "up" | "down" | "left" | "right" | Varies | Animation direction |
delay | number | 0 | Delay before animation (ms) |
duration | number | 1000 | Animation duration (ms) |
fraction | number | 0 | Viewport fraction to trigger |
triggerOnce | boolean | false | Animate only once |
cascade | boolean | false | Cascade to children |
damping | number | 0.5 | Delay between cascaded items |
Best Practices
- Performance: Use
triggerOnce
for elements that donβt need to re-animate - Mobile: Keep animations subtle on mobile devices
- Accessibility: Ensure animations respect user preferences with
prefers-reduced-motion
- Timing: Use appropriate delays and durations for your content type
Examples
Here are some common use cases:
Hero Section
<Fade duration={1500}> <h1>Welcome to Our Site</h1> <Fade delay={500} cascade damping={0.3}> <p>Discover amazing features</p> <button>Get Started</button> </Fade></Fade>
Feature List
<Slide direction="up" cascade damping={0.2} triggerOnce> {features.map((feature) => ( <div key={feature.id} className="feature-card"> {feature.content} </div> ))}</Slide>