Animate Components When Mounted And Unmounted – use-animate-presence

use-animate-presence is a React hook to animate components when they are mounted and unmounted using Web Animation API.

Install & Import:

# NPM
$ npm i use-animation-presence --save

import { useAnimatePresence } from "use-animate-presence";

Basic usage:

const variants = {
  x: { from: -800, to: 0 },
};
export default function App() {
  const animatedDiv = useAnimatePresence({
    variants,
    initial: "visible",
  });
  return (
    <div>
      <button onClick={() => animatedDiv.togglePresence()}>Toggle</button>
      {animatedDiv.isRendered && <div ref={animatedDiv.ref} />}
    </div>
  );
}

All default parameters:

variants: true;
options: false;
duration: 1000;
initial: true;
animateFirstRender: true;
enter: (fn?: () => void) => void;
exit: (fn?: () => void) => void;
wait: (fn?: () => void) => void;
debugName: "unknown";

Preview:

Download Details:

Author: jlkiri

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/jlkiri/use-animate-presence

License: MIT