SimpleReveal - A simple scroll animation library in React

Last update: May 29, 2022

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

$ yarn add simple-reveal

How to use

If you have a component like this:

{ return (

I want to put a reveal animation here

); };">
import React from "react";

const MyComponent: React.FC = () => {
  return (
    <div>
      <h1 className="title">I want to put a reveal animation here</h1>
    </div>
  );
};

You can add animations using component like this:

{ return (
(

I want to put a reveal animation here

)} // options (optional) duration={500} delay={0} initialTransform="translateY(1rem)" />
); };">
import "simple-reveal/index.css";

import React from "react";
import { SimpleReveal } from "simple-reveal";

const MyComponent: React.FC = () => {
  return (
    <div>
      <SimpleReveal
        render={({ ref, cn, style }) => (
          <h1 ref={ref} className={cn("title")} style={style}>
            I want to put a reveal animation here
          </h1>
        )}
        // options (optional)
        duration={500}
        delay={0}
        initialTransform="translateY(1rem)"
      />
    </div>
  );
};

Or you can use animation using useSimpleReveal() hook like this:

{ const { ref, cn, style } = useSimpleReveal({ duration: 500, delay: 0, initialTransform: "translateY(1rem)", }); return (

I want to put a reveal animation here

); };">
import "simple-reveal/index.css";

import React from "react";
import { useSimpleReveal } from "simple-reveal";

const MyComponent: React.FC = () => {
  const { ref, cn, style } = useSimpleReveal({
    duration: 500,
    delay: 0,
    initialTransform: "translateY(1rem)",
  });

  return (
    <div>
      <h1 ref={ref} className={cn("title")} style={style}>
        I want to put a reveal animation here
      </h1>
    </div>
  );
};

Contributors

GitHub

https://github.com/daangn/simple-reveal
You might also like...

Simple animation libraries for delightful user interfaces

Simple animation libraries for delightful user interfaces

The animator's toolbox Popmotion is: Powerful: It supports keyframe and spring animations for numbers, colors and complex strings. Low level: It's des

Jun 24, 2022

Scroll-based actions and animations for react

react-spark-scroll React port of spark-scroll. The future! This repo has been around for a little while now. However, recently I re-created the demo u

May 22, 2022

Animate Scroll React Component

Animate Scroll React Component

rc-scroll-anim React ScrollAnim Component Browser Support IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔ Development npm install

Jun 5, 2022

Scroll, Refraction and Shader Effects in Three.js and React

Scroll, Refraction and Shader Effects in Three.js and React

Scroll, Refraction and Shader Effects in Three.js and React Discover how to use react-three-fiber and combine some common techniques to create a Three

Jun 21, 2022

Easiest way to add scroll parallax effect on the component

Easiest way to add scroll parallax effect on the component

React Parallax Component Easiest way to add scroll parallax effect on the component. Installation npm install react-parallax-component Usage import Pa

May 22, 2022

React components for the Web Animations API - http://react-web-animation.surge.sh

React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

May 22, 2022

Animation engine designed for React

Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

May 22, 2022

React particles animation background component

React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

Jun 23, 2022

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Jun 13, 2022
react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Jun 25, 2022
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what

Jun 15, 2022
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Jun 19, 2022
Open source, production-ready animation and gesture library for React
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Jun 18, 2022
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

Jun 24, 2022
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

Jun 18, 2022
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Jun 22, 2022
🎰 Library showing animation of number changes in react-native
🎰  Library showing animation of number changes in react-native

react-native-animated-numbers Library showing animation of number changes in react-native If you want web version in react.js download react-animated-

Jun 17, 2022
A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance

A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js

May 31, 2022
Simple typing text animation in React component

react-typing-text-animation - Simple typing text animation in React component

Jan 3, 2022