The easiest way to add reveal animations to your React applications as the elements enter viewport. it includes Both on scroll and simple reveal animations.
npm install react-swift-revealreact-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
with npm:
``bash`
npm install react-swift-reveal@latest
with yarn:
`bash`
yarn add react-swift-reveal@latest
with pnpm:
`bash`
pnpm add react-swift-reveal@latest
`javascript
import { Fade } from "react-swift-reveal";
const App = () => {
return (
hello world
);
};
`
or
`javascript
import { Fade } from "react-swift-reveal";
import MyComponent from "./MyComponent"; // component to be animated
const App = () => {
return (
);
};
`
`javascript
"use client";
import { Fade } from "react-swift-reveal";
const App = () => {
return (
hello world
);
};
``
both examples will fade in the element as it enters the viewport.
- Fade
- Bounce
- Slide
- Zoom
- Flip
- Rotate
- Roll
- LightSpeed
- Flash
- Jello
- Pulse
- RubberBand
- Shake
- Swing
- Tada
- Wobble
- HeadShake
- Pop
- Spin
- Jump