Navigate back to the homepage

React Awesome Reveal

Dennis Morello, 
December 15th, 2019 · 2 min read

I wrote a new library for animating React components when they enter the viewport! It is called React Awesome Reveal and it is already available for you to try 🎉

Introduction

I was a happy user of React Reveal, a full-of-features and mature library for animating React components. It is quite popular (~1.5K ⭐️ on GitHub and ~35K downloads/week from NPM at the time of writing) and there is apparently no need to start writing a similar library.

The fact is, developers are curious by nature (or at least they should), and as a front-end developer I always try to improve myself by studying and experimenting. So, I examined the source code of React Reveal and I realized that it uses synchronous listeners on document scroll and window resize events to determine if each observed element is inside or outside the viewport. This works fine, and when the library was first written this was the only way to handle the problem, but year after year the Web has evolved, and new APIs came out.

With the advent of the Intersection Observer API and CSS Animations the rules have changed, and now that they are officialy supported by almost all Web browsers we can make use of them.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport – MDN

That said, I started writing React Awesome Reveal using these APIs and React Hooks, and the results are quite impressive: in a few lines of code, I have implemented a fully working and performant animation library (see the demo section below).

Features

🎁 Modern Stack

It uses modern Web technologies and it uses tha latest React features.

🏷 TypeScript Support

It is written in TypeScript to make it easier and faster to use the library (type definitions files are included in the package).

🍃 Lightweight

Very little footprint on your project and no other dependencies required.

⚙️ Uses Native APIs

Intersection Observer API and CSS Animations are now supported by all major browsers.

🚀 Fast

Buttery smooth experience thanks to the use of native asynchronous APIs and hardware acceleration (CSS Animations are hardware accelerated).

🌳 Tree-shakeable

Only the parts you use will be included in your final bundle.

Quick Start

Installation

To add this library to your project, simply run

1npm install react-awesome-reveal --save

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

1yarn add react-awesome-reveal

Using Effects

You can wrap any React element in an effect component. For example, to gently fade in an image when it enters the viewport:

1import React from "react";
2import { Fade } from "react-awesome-reveal";
3
4const MyComponent = () => {
5 return (
6 <Fade>
7 <img src="path/to/image" />
8 </Fade>
9 );
10};

You can also customize some animation parameters (refer to the project README file):

1<Fade triggerOnce duration={800} delay={1000}>
2 <img src="path/to/image" />
3</Fade>

The code above tells the Fade component to trigger the animation only the first time the image appears inside the viewport with a delay of one second and to set the duration to 800 milliseconds.

Demo

You can play with all the supported effects on the demo site.

Future Plans

At the moment, I focused on project structure, performances and the demo website. In the future, I will extend the API with more features inspired from React Reveal (such the when, collapse and spy props), and of course some ideas coming from the users.

Feedbacks

Every feedback is more than welcome! If you have feature requests or if you discover bugs, do not hesitate to open an issue on GitHub.

You can also write me if you need help or if you just want to thank me 🙏🏻 In any case, do not forget to follow me on Twitter and to star the project on GitHub!

More articles from Dennis Morello

You Will Stop Using LocalStorage

Goodbye LocalStorage, welcome Key-Value Storage!

April 25th, 2019 · 2 min read

Conditional Rendering In React

A component composition-based approach to conditional rendering.

March 11th, 2019 · 2 min read
© 2019–2020 Dennis Morello
Link to $https://twitter.com/dennismorelloLink to $https://github.com/dennismorelloLink to $https://instagram.com/dennismrlLink to $https://www.linkedin.com/in/dennismorelloLink to $mailto:dennismorello@gmail.com