react-animate-with-css

React library to animate elements using Animate.css or your own CSS animation.

Github repository

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 },
}