react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.

1,117

View on GitHub View on NPM

Top Related Projects

animate.css

80,706

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

scrollreveal

22,379

Animate elements as they scroll into view.

WOW

9,901

Reveal CSS animation as you scroll down a page

Quick Overview

React Awesome Reveal is a React library that provides easy-to-use components for adding reveal animations to your web applications. It leverages the Intersection Observer API to trigger animations when elements enter the viewport, offering a smooth and performant way to enhance user experience with animated content reveals.

Pros

Easy integration with React applications
Customizable animation options and durations
Lightweight and performant, using Intersection Observer
Supports server-side rendering (SSR)

Cons

Limited to reveal animations only
May require additional setup for complex animation sequences
Dependency on React ecosystem
Potential accessibility concerns if not implemented carefully

Code Examples

Basic Fade Animation:

import { Fade } from "react-awesome-reveal";

function App() {
  return (
    <Fade>
      <h1>This content will fade in</h1>
    </Fade>
  );
}

Customized Slide Animation:

import { Slide } from "react-awesome-reveal";

function App() {
  return (
    <Slide direction="left" delay={300} duration={1500}>
      <p>This content will slide in from the left</p>
    </Slide>
  );
}

Cascading Animation for List Items:

import { Fade } from "react-awesome-reveal";

function App() {
  const items = ["Item 1", "Item 2", "Item 3"];
  return (
    <ul>
      {items.map((item, index) => (
        <Fade key={index} cascade damping={0.1}>
          <li>{item}</li>
        </Fade>
      ))}
    </ul>
  );
}

Getting Started

To use React Awesome Reveal in your project:

Install the package:
```
npm install react-awesome-reveal
```

Import and use the components in your React application:

import { Fade, Slide, Zoom } from "react-awesome-reveal";

function App() {
  return (
    <div>
      <Fade>
        <h1>Welcome to my app!</h1>
      </Fade>
      <Slide>
        <p>This content will slide in</p>
      </Slide>
      <Zoom>
        <button>Click me!</button>
      </Zoom>
    </div>
  );
}

Customize animations using props like direction, duration, delay, and cascade as needed.

Competitor Comparisons

animate.css

80,706

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Pros of animate.css

Lightweight and easy to implement without additional JavaScript
Works with any HTML element, not limited to React components
Extensive library of pre-defined animations

Cons of animate.css

Lacks fine-grained control over animation timing and behavior
Requires manual class management for more complex animations
No built-in support for scroll-triggered animations

Code Comparison

animate.css:

<div class="animate__animated animate__fadeIn">
  This element will fade in
</div>

react-awesome-reveal:

import { Fade } from "react-awesome-reveal";

<Fade>
  <div>This element will fade in</div>
</Fade>

Key Differences

react-awesome-reveal is specifically designed for React applications, while animate.css is framework-agnostic
react-awesome-reveal offers more programmatic control over animations, including scroll-triggered effects
animate.css relies on CSS classes, while react-awesome-reveal uses React components to apply animations
react-awesome-reveal provides better performance optimization through lazy loading and on-demand animation

Use Cases

Choose animate.css for simple, quick animations in any web project
Opt for react-awesome-reveal in React applications requiring complex, scroll-based, or dynamically controlled animations

aos

26,486

Animate on scroll library

Pros of AOS

Framework-agnostic, works with vanilla JavaScript and various frameworks
Simpler setup and usage, especially for non-React projects
Larger community and longer development history

Cons of AOS

Less performant due to reliance on scroll events
Limited animation options compared to React Awesome Reveal
Not optimized for React applications

Code Comparison

AOS:

<div data-aos="fade-up" data-aos-duration="1000">
  <h1>Animated element</h1>
</div>

React Awesome Reveal:

import { Fade } from "react-awesome-reveal";

<Fade duration={1000}>
  <h1>Animated element</h1>
</Fade>

Key Differences

AOS uses data attributes for configuration, while React Awesome Reveal uses props
React Awesome Reveal is specifically designed for React, offering better integration and performance
AOS animations are triggered by scroll events, whereas React Awesome Reveal uses the Intersection Observer API

Use Cases

Choose AOS for non-React projects or when simplicity is preferred
Opt for React Awesome Reveal in React applications for better performance and integration

Performance Considerations

React Awesome Reveal generally offers better performance due to its use of the Intersection Observer API
AOS may have a higher impact on scroll performance, especially with many animated elements

scrollreveal

22,379

Animate elements as they scroll into view.

Pros of ScrollReveal

Vanilla JavaScript library, usable with any framework
Smaller bundle size (11.2kB vs 33.7kB for React Awesome Reveal)
More customizable animation options

Cons of ScrollReveal

Requires more manual setup for React projects
Less React-specific optimizations
No built-in TypeScript support

Code Comparison

ScrollReveal:

ScrollReveal().reveal('.element', {
  delay: 200,
  distance: '50px',
  origin: 'bottom',
  duration: 1000
});

React Awesome Reveal:

import { Fade } from "react-awesome-reveal";

<Fade delay={200} direction="up" duration={1000}>
  <div>Content to reveal</div>
</Fade>

Summary

ScrollReveal is a versatile vanilla JavaScript library for scroll animations, offering more customization and a smaller bundle size. It's framework-agnostic but requires more setup for React projects. React Awesome Reveal is specifically designed for React, providing easier integration and TypeScript support out of the box, but with a larger bundle size and fewer animation options. The choice between the two depends on the specific project requirements, framework preferences, and desired level of customization.

WOW

9,901

Reveal CSS animation as you scroll down a page

Pros of WOW

Lightweight and easy to implement
Works with vanilla JavaScript, no framework dependencies
Supports a wide range of browsers, including older versions

Cons of WOW

Less actively maintained compared to react-awesome-reveal
Limited to scroll-based animations
Lacks built-in TypeScript support

Code Comparison

WOW:

new WOW().init();

<div class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
  Animated content
</div>

react-awesome-reveal:

import { Fade } from "react-awesome-reveal";

<Fade duration={1000} delay={500}>
  <div>Animated content</div>
</Fade>

WOW uses class-based animations with data attributes, while react-awesome-reveal employs React components with props for configuration. react-awesome-reveal offers a more React-friendly approach and better TypeScript integration, but WOW provides broader compatibility across different web technologies.

Both libraries aim to add scroll-based animations to web pages, but they cater to different ecosystems and development preferences. The choice between them depends on the specific project requirements, such as framework usage, browser support needs, and desired level of customization.

anime

49,575

JavaScript animation engine

Pros of anime

Lightweight and flexible animation library
Supports a wide range of animation types (CSS properties, SVG, DOM attributes)
Can be used with any JavaScript framework or vanilla JS

Cons of anime

Requires more manual setup and configuration
Less React-specific optimizations
May require additional wrapper components for React integration

Code Comparison

react-awesome-reveal:

import { Fade } from "react-awesome-reveal";

<Fade>
  <h1>This will fade in</h1>
</Fade>

anime:

import anime from 'animejs';

useEffect(() => {
  anime({
    targets: '.element',
    opacity: [0, 1],
    duration: 1000
  });
}, []);

Summary

react-awesome-reveal is specifically designed for React applications, offering easy-to-use components with pre-configured animations. It integrates seamlessly with React's component lifecycle and provides a declarative approach to animations.

anime, on the other hand, is a more versatile animation library that can be used in various JavaScript environments. It offers greater flexibility and control over animations but requires more manual setup and integration when used with React.

The choice between the two depends on the specific needs of your project, with react-awesome-reveal being more suitable for quick and easy React animations, while anime is better for complex, custom animations across different platforms.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React Awesome Reveal

[!TIP] If you like this library, please consider supporting its creator.

React Awesome Reveal is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by Emotion and implemented as CSS Animations to benefit from hardware acceleration.

Features
Installation
Quick Start
Supported Effects
Custom Animations
- Other Props
Intersection Observer
- Polyfill
Past Releases
License

Features

ð Modern stack â It is built for modern React and supports React 18
ð· TypeScript support â It is written in TypeScript to improve the DX
ð Lightweight â Very little footprint on your project
âï¸ Uses native APIs â Intersection Observer and CSS Animations are now supported by all browsers
ð Fast â Buttery smooth experience thanks to the use of native asynchronous APIs and hardware acceleration
ð Fully customizable â Define custom animations and let the library render them
ð» SSR support â Server Side Rendering works out-of-the-box
ð³ Tree-shakeable â Only the parts you use will be included in your final bundle

Installation

To add this package as a dependency to your app, simply run

npm install react-awesome-reveal @emotion/react --save

or, if you are using Yarn:

yarn add react-awesome-reveal @emotion/react

or, if you are using PNPM (as I strongly suggest):

pnpm add react-awesome-reveal @emotion/react

Quick Start

Import effects from React Awesome Reveal to your React component, for example the Fade effect:

import { Fade } from "react-awesome-reveal";

Then simply wrap the components you want to animate:

<Fade>
  <p>I will gently appear as I enter the viewport</p>
</Fade>

Supported Effects

The effects currently supported are Bounce, Fade, Flip, Hinge, JackInTheBox, Roll, Rotate, Slide and Zoom. Refer to the Animate.css documentation for the details.

Attention Seekers

Since version 3, attention seeker animations are wrapped by the AttentionSeeker component, which accepts a prop called effect that specifies the animation to render (defaults to "bounceâ). The supported effects are: âbounce", "flash", "headShakeâ, "heartBeat", "jelloâ, "pulse", "rubberBand", âshakeâ, âshakeX", "shakeYâ, "swingâ, "tada" and âwobbleâ.

Again, refer to the Animate.css documentation for the details.

Props

You can pass the following props to the animation components to customize the behavior:

Prop	Description	Values	Default
`cascade`	If set, each child of a reveal animation automatically get assigned a delay that takes into account their predecessor (child `i` enters the viewport after `i * delay * damping` milliseconds) â useful for animating list items.	`true` or `false`	`false`
`damping`	Factor that affects the delay that each animated component in a cascade animation will be assigned. If `damping = 1` then the delay will be equal to the animation duration; if `damping < 1` then the delay will be lower than the animation duration; if `damping > 1` then the delay will be greater than the animation duration.	`number`	`0.5` (meaning that the delay will be half of the animation duration)
`direction`	Origin of the animation (where applicable).	Usually `"down"`, `"left"`, `"right"` or `"up"`, with some exceptions documented in the code	`undefined`
`delay`	Time to wait before the animation starts (in milliseconds).	`number`	`0`
`duration`	The animation duration (milliseconds).	`number`	`1000`
`fraction`	How much an element should be in viewport before the animation is triggered.	`number` between `0` and `1`	`0`
`triggerOnce`	Specifies if the animation should run only once or everytime an element enters/exits/re-enters the viewport.	`true` or `false`	`false`
`className`	The class names to add to the container element.	`string`	`undefined`
`style`	The inline styles to add to the container element.	`React.CSSProperties`	`undefined`
`childClassName`	The class names to add to the child element.	`string`	`undefined`
`childStyle`	The inline styles to add to the child element.	`React.CSSProperties`	`undefined`
`onVisibilityChange`	Callback executed when the element enters or leaves the viewport. If more than one element is being animated, this function is called on each element.	`(inView: boolean, entry: IntersectionObserverEntry) => void`	`undefined`

Example

To trigger the animation only the first time an element enters the viewport:

<Slide triggerOnce>
  <p>I will animate only the first time you see me</p>
</Slide>

Chaining Multiple Animations

To chain together multiple animations, set the cascade prop to true:

<Fade cascade>
  <p>I enter first...</p>
  <p>...then comes my turn...</p>
  <p>...and finally you see me!</p>
</Fade>

Play with the damping prop to alter the delay by which each child will progressively appear:

<Fade cascade damping={0.1}>
  <p>I enter first...</p>
  <p>...then comes my turn...</p>
  <p>...and finally you see me!</p>
</Fade>

Custom Animations

Starting from version 3.2.0, you can define custom animations! Simply import the Reveal component (which is the default export of the library â give it the name you want) and pass it a keyframes prop:

import React from "react";
import Reveal from "react-awesome-reveal";
import { keyframes } from "@emotion/react";

const customAnimation = keyframes`
  from {
    opacity: 0;
    transform: translate3d(-200px, -100px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
`;

function CustomAnimation({ children }) {
  return <Reveal keyframes={customAnimation}>{children}</Reveal>;
}

If no keyframes prop is passed, the default rendered animation is a fading entrance from the left (equivalent to <Fade direction="left">...</Fade>).

Other Props

You can also pass these props to Reveal:

cascade
damping
delay
duration
fraction
triggerOnce
className and childClassName
style and childStyle
onVisibilityChange

Intersection Observer

Intersection Observer is the API used to determine if an element is inside the viewport or not. Browser support is really good â with Safari adding support in 12.1, all major browsers now support Intersection Observers natively.

If you need to support old browsers, add the polyfill for the Intersection Observer API.

Polyfill

You can add the polyfill directly or use a service like polyfill.io to add it when needed.

yarn add intersection-observer

Then import it in your app:

import "intersection-observer";

If you are using Webpack (or similar) you could use dynamic imports to load the polyfill only if needed. A basic implementation could look something like this:

/**
 * Do feature detection, to figure out which polyfills needs to be imported.
 **/
async function loadPolyfills() {
  if (typeof window.IntersectionObserver === "undefined") {
    await import("intersection-observer");
  }
}

Past Releases

To see the documentation for previous versions, navigate through past tags in the GitHub's project repository and read the README for that specific version.

License

Project source code is licensed under the MIT license. You are free to fork this repository, edit the code, share and use it both for non-commercial and commercial purposes.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of animate.css

Cons of animate.css

Code Comparison

Key Differences

Use Cases

Pros of AOS

Cons of AOS

Code Comparison

Key Differences

Use Cases

Performance Considerations

Pros of ScrollReveal

Cons of ScrollReveal

Code Comparison

Summary

Pros of WOW

Cons of WOW

Code Comparison

Pros of anime

Cons of anime

Code Comparison

Summary

Convert designs to code with AI

README

React Awesome Reveal

Table Of Contents

Features

Installation

Quick Start

Supported Effects

Attention Seekers

Props

Example

Chaining Multiple Animations

Custom Animations

Other Props

Intersection Observer

Polyfill

Past Releases

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days