react-swift-reveal

react-swift-reveal 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

with yarn:

yarn add react-swift-reveal

with pnpm:

pnpm add react-swift-reveal

Usage

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

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

or

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

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

with next.js app directory

"use client";

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

export default function Home() {
  return (
    <Fade>
      <h1>hello world</h1>
    </Fade>
  );
}

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.