React.js simple-reveal Example to Implement Smooth Scrolling Animation for Lists & Arrays in Browser

 

 

SimpleReveal

A simple scroll animation library in React

  • Zero-dependency
  • No additional DOM element
  • Simple and predictable API
  • SSR Support (Next.js, Gatsby)
  • Automatically compensates transition delay
    • The delay only works when it is first revealed, and disables the delay when it is revealed when scrolling.
  • TypeScript Support
  • Respect @media (prefers-reduced-motion)

Demo

Edit SimpleReveal Demo

Getting started

How to use

If you have a component like this:

 

You can add animations using <SimpleReveal /> like this:

 

 

Leave a Reply