Unmount Basics

Conditional rendering ({isOpen && <div>...}) removes elements from the DOM instantly, so there's no chance to animate them out. Unmount keeps an exiting child mounted until its unmount animation finishes, then removes it.

Usage

import { Unmount, animate, withTiming, withSpring } from 'react-ui-animate';

function Toggle() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      <button onClick={() => setIsVisible((v) => !v)}>Toggle</button>
      {/* Unmount keeps the child mounted until unmount finishes */}
      <Unmount>
        {isVisible && (
          <animate.div
            animate={{ opacity: withSpring(1), scale: withSpring(1) }}
            unmount={{ opacity: withTiming(0), scale: withSpring(0.85) }}
            style={{ opacity: 0, scale: 0.85, width: 100, height: 100 }}
          />
        )}
      </Unmount>
    </>
  );
}

Preview

note

Each direct child of Unmount needs a unique key if there's more than one (e.g. a modal's backdrop + panel). That's how Unmount tracks which child is entering/exiting across renders.

<Unmount>
  {isOpen && (
    /* Unique keys let Unmount track each exiting child */
    <>
      <animate.div key="backdrop" unmount={{ opacity: withTiming(0) }} />
      <animate.div key="panel" unmount={{ opacity: withTiming(0), scale: withSpring(0.9) }} />
    </>
  )}
</Unmount>

Enter + exit together

animate (mount) and unmount (unmount) compose on the same element: mount target in animate, leave target in unmount, and keep the initial hidden values in style.

Next steps

• The animate Component: the animate/unmount props themselves.
• useUnmount & useIsUnmounting: drive an exit animation manually instead of via the unmount prop.
• recipes: ready-made unmountFade/unmountSlideUp/etc. values for the unmount prop.