react-animate-with-css v1.2.3

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.

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