react-animate-with-css
React library to animate elements using Animate.css or your own CSS animation.
How to use
Install
npm i react-animate-with-css
Wrap your App with AnimationContextProvider
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AnimationContextProvider } from "react-animate-with-css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<AnimationContextProvider>
<App />
</AnimationContextProvider>
</React.StrictMode>
);
Animate when component is first rendering
import { Animation } from "react-animate-with-css";
export default function App() {
return (
<div>
<Animation animateIn={{ name: "backInLeft" }}>
<img src="/logo.svg" alt="" />
</Animation>
</div>
);
}
Important:
- You can't animate the position of components that has a position CSS property fixed or absolute, unless you create your own CSS animation that supports it.
- I strongly recommend you to always use display flex, it will be much easier to make your CSS to work properly.
- Keep in mind that the Animation component will try to mimic its parent inheriting the following CSS properties: width, height, display, justify-content and align-items.
- You can always change this properties passing a style like this:
<Animation style={{ width: "40px", justifyContent: "flex-end" }}></Animation>
Animate using ID
import { Animation, useAnimate } from "react-animate-with-css";
export default function App() {
const { animate } = useAnimate();
return (
<div>
<Animation id="logo-icon">
<img
src="/logo.svg"
alt=""
onClick={() => {
animate({
id: "logo-icon",
name: "tada",
});
}}
/>
</Animation>
<button
onClick={() => {
animate({
id: "logo-icon",
name: "backInLeft",
duration: 1500,
direction: "reverse",
removeAfter: true,
});
}}
>
</button>
</div>
);
}
Properties
animate()
Type: function
A function that allows you to animate any Animation element using its ID.
This is a global function, so it can be called at any line of your code.
[ id ]
Type: string
[ name ]
Type: string
Check Animate.css for demonstrations.
- Attention seekers - | - Back - | - Bouncings - | - Rotating - | - Fading In - | - Fading Out - |
---|---|---|---|---|---|
"bounce" "flash" "pulse" "rubberBand" "shakeX" "shakeY" "headShake" "swing" "tada" "wobble" "jello" "heartBeat"
|
"backInDown" "backInLeft" "backInRight" "backInUp" "backOutDown" "backOutLeft" "backOutRight" "backOutUp"
|
"bounceIn" "bounceInDown" "bounceInLeft" "bounceInRight" "bounceInUp" "bounceOut" "bounceOutDown" "bounceOutLeft" "bounceOutRight" "bounceOutUp"
|
"rotateIn" "rotateInDownLeft" "rotateInDownRight" "rotateInUpLeft" "rotateInUpRight" "rotateOut" "rotateOutDownLeft" "rotateOutDownRight" "rotateOutUpLeft" "rotateOutUpRight"
|
"fadeIn" "fadeInDown" "fadeInDownBig" "fadeInLeft" "fadeInLeftBig" "fadeInRight" "fadeInRightBig" "fadeInUp" "fadeInUpBig" "fadeInTopLeft" "fadeInTopRight" "fadeInBottomLeft" "fadeInBottomRight"
|
"fadeOut" "fadeOutDown" "fadeOutDownBig" "fadeOutLeft" "fadeOutLeftBig" "fadeOutRight" "fadeOutRightBig" "fadeOutUp" "fadeOutUpBig" "fadeOutTopLeft" "fadeOutTopRight" "fadeOutBottomRight" "fadeOutBottomLeft"
|
- Flippers - | - Lightspeed - | - Specials - | - Zooming entrances - | - Zooming exits - | - Sliding entrances - | - Sliding exits - |
---|---|---|---|---|---|---|
"flip" "flipInX" "flipInY" "flipOutX" "flipOutY"
|
"lightSpeedInRight" "lightSpeedInLeft" "lightSpeedOutRight" "lightSpeedOutLeft"
|
"hinge" "jackInTheBox" "rollIn" "rollOut"
|
"zoomIn" "zoomInDown" "zoomInLeft" "zoomInRight" "zoomInUp"
|
"zoomOut" "zoomOutDown" "zoomOutLeft" "zoomOutRight" "zoomOutUp"
|
"slideInDown" "slideInLeft" "slideInRight" "slideInUp"
|
"slideOutDown" "slideOutLeft" "slideOutRight" "slideOutUp"
|
[ duration? ]
Type: number
[ delay? ]
Type: number
[ repeat? ]
Type: number
[ direction? ]
Type: "normal" | "reverse" | "alternate" | "alternate-reverse"
[ timing? ]
Type: string | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end"
[ removeAfter? ]
Type: boolean
animations
Type: object
An object that contains all Animation elements and their current state props.
Example:
{
icon: { element: <img src="./logo" alt="" />, isAnimating: false, isRemoved: false },
headerTxt: { element: <p>Title</p>, isAnimating: true, isRemoved: false },
}