DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A React component library for animating elements as they enter the viewport

react-swift-reveal

A React component library for animating elements as they enter the viewport

React-swiftReveal is a React component library and animation framework for animating elements as they enter the viewport.

for more, check the documentation

Installation

with npm:

npm install react-swift-reveal
Enter fullscreen mode Exit fullscreen mode

with yarn:

yarn add react-swift-reveal
Enter fullscreen mode Exit fullscreen mode

with pnpm:

pnpm add react-swift-reveal
Enter fullscreen mode Exit fullscreen mode

Usage

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

const App = () => {
  return (
    <Fade>
      <h1>hello world</h1>
    </Fade>
  );
};
Enter fullscreen mode Exit fullscreen mode

or

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

const App = () => {
  return (
    <Fade>
      <MyComponent /> //component to be animated
    </Fade>
  );
};
Enter fullscreen mode Exit fullscreen mode

both examples will fade in the element as it enters the viewport.

Available Animations

  • Fade
  • Bounce
  • Slide
  • Zoom
  • Flip
  • Rotate
  • Roll
  • LightSpeed

Simple animations

  • Flash
  • Jello
  • Pulse
  • RubberBand
  • Shake
  • Swing
  • Tada
  • Wobble
  • HeadShake
  • Pop
  • Spin
  • Jump

Support

If you like this project, please consider supporting it by giving it a star.

GitHub

View Github

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post