Easy React mount/unmount animations with react-mount-animation 🏃🏽‍♀️🚀

Add animations as you would from CSS (using keyframes) when mounting and unmounting React components with a very clear and easy syntax. The 'react-mount-animation' component takes care of mounting and unmounting the component through the 'show' attribute and executing the animations.

Simple Example

Instead of this (mount/unmount without animation):

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
   <>
      {isMounted && (
        <div>
          Hi World!
        </div>
      )}
   </>
)
...

We do this (same with animation):

import Animated from "react-mount-animation";

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
      <Animated.div //You can use any HTML element here
        show={isMounted}
        mountAnim={` 
            0% {opacity: 0}
            100% {opacity: 1}
        `}
      >
        Hi World!
      </Animated.div>
)
...

Composite Example

import Animated from "react-mount-animation";

const mountAnimation1 = `
            0% {border-radius: 4px}
            0% {opacity: 0}
            0% {font-size: 12px}
            10% {opacity: 0}
            35% {font-size: 12px}
            60% {font-size: 24px}
            70% {border-radius: 4px}
            70% {box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), inset 0px 0px 2px 2px rgba(255,255,255,0)}
            100% {opacity: 1}
            100% {box-shadow: 0px 0px 13px 4px rgba(0,0,0,1), inset 0px 0px 2px 2px rgba(255,255,255,0.2)}
          `

const unmountAnimation1 = `
            0% { opacity: 1; }
            10% { transform: rotate(-20deg); }
            100% {opacity: 0;}
          `

const mountAnimation2 = `
    60% {transform: translate(0px, 0)}
    85% {transform: translate(10px, 0)}
`

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
      <>
      <button onClick={() => setIsMounted(!isMounted)}>
        Mount/Unmount
       </button>
      <Animated.div
          show={isMounted}
          mountAnim={mountAnimation1}
          unmountAnim={unmountAnimation1}
          style={{
            fontSize: 24,
            color: "white",
            backgroundColor: "black",
            padding: 20,
            borderRadius: 20,
            boxShadow:
              "0px 0px 13px 4px rgba(0,0,0,1), inset 0px 0px 2px 2px rgba(255,255,255,0.2)",
          }}
        >
          <Animated.div
            show={isMounted}
            mountAnim={mountAnimation2}
            time={1.1}
          >
            Hi! This is a test component 😝
          </Animated.div>
        </Animated.div>
        </>
)
...

Props

name	type	description
show*	boolean	Used to indicate when the component has to be mounted and unmounted.
time	number	The total duration of the mount animation. Default 1.
unmountTime	number	The total duration of the unmount animation. By default it takes the time prop.
delay	number	The total delay of the mount animation. Default 0.
unmountDelay	number	The total delay of the unmount animation. By default it takes the delay prop.
mountAnim*	string	Mount animation indicated as string just like CSS keyframes.
unmountAnim	string	Unmount animation indicated as string just like CSS keyframes. If this prop is not filled, the component will execute the mountAnim reversed when unmount.
mountAnimId	string	If you don't want to use mountAnim, you can specify the name of a keyframe defined in a CSS file. This will override mountAnim.
unmountAnimId	string	If you don't want to use unmountAnim, you can specify the name of a keyframe defined in a CSS file. This will override unmountAnim.
onAnimationEnd	function	Callback fired when the component ends its animation (mount or unmount).
onMountEnd	function	Callback fired when the component ends its mount animation
onUnmountEnd	function	Callback fired when the component ends its unmount animation

You are invited to collaborate 😋, if you are interested, you can contact me through migueljimenezbenajes@gmail.com.