MotionPresence

Keeps content mounted while it animates in and out.

WebReact NativeContent and size

Try it

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useState } from 'react';
import { MotionPresence } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const exits = {
  rise: { opacity: 0, translateY: -16 },
  fall: { opacity: 0, translateY: 16 },
  shrink: { opacity: 0, scale: 0.9 },
};

export default function App({ exit = 'rise', duration = 320 }) {
  const [visible, setVisible] = useState(true);
  const [saved, setSaved] = useState(1);

  const save = () => {
    setSaved(saved + 1);
    setVisible(true);
  };

  return (
    <div className="stage">
      <div className="slot">
        <MotionPresence
          present={visible}
          exit={exits[exit]}
          transition={{ duration, easing: 'easeOut' }}
          className="notice"
        >
          <span>Draft {saved} saved</span>
          <button onClick={() => setVisible(false)}>Dismiss</button>
        </MotionPresence>
      </div>
      <div className="buttons">
        <button onClick={save}>Save draft</button>
        <button onClick={() => setVisible(!visible)}>{visible ? 'Hide' : 'Show'} notice</button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 40px 20px;
}

.slot {
  display: grid;
  place-items: center;
  min-height: 64px;
  width: min(100%, 420px);
}

.notice {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-radius: 14px;
  background: #0e2e24;
  color: #fff;
}

.notice button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: none;
  color: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons button:first-child {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

Shortest usage

Notice.jsx

<MotionPresence present={visible} exit={{ opacity: 0, translateY: -12 }}>
  Draft saved
</MotionPresence>;

What it handles for you

Change present instead of unmounting; the content leaves before it is removed.
Restoring during an exit continues from the current values.
Content that appears again enters from the exit pose.
The first render shows it at rest, so content that is already there does not flash.

Use it for

A saved-draft notice.
A coupon message in a checkout.
An error message under a field.

Props

Prop	Type	Default	Description
`present`	`boolean`	`—`required	Show or hide the content. Change this instead of unmounting.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	The pose at rest.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	The pose the content leaves with and enters from.
`as`	`element`	`'div'`	The element to render.
`transition`	`Transition`	`spring`	A timing curve `{ duration, easing }` or a spring `{ tempo: 'spring', spring }`. Springs keep their momentum when interrupted.
`onExitComplete`	`() => void`		Runs after the content has left and been removed.

Other props go to the rendered element, so className, style and event handlers work as usual.

Web and React Native

Poses use opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width and height. onExitComplete runs after the content has left.

The same poses and props work on React Native.

Used in these examples

Checkout summaryQuantities, line totals and the total roll as the cart changes; the coupon notice enters and leaves; paying takes a deliberate hold.MotionListMotionNumberMotionPresenceMotionHold