1.0.4 • Published 5 months ago
react-swift-reveal v1.0.4
react-swift-reveal
react-swift-reveal is a React component library and animation framework for animating elements as they enter the viewport or on scroll. you can learn more about the library here(documention) or view stackblitz demo
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";
import MyComponent from "./MyComponent"; // component to be animated
const App = () => {
return (
<Fade>
<MyComponent /> //component to be animated
</Fade>
);
};
with next.js app directory
"use client";
import { Fade } from "react-swift-reveal";
const App = () => {
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