Ariakit
/

Dialog with Framer Motion

Using Framer Motion to add initial and exit animations to a modal Dialog and its backdrop element.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
import { AnimatePresence, motion } from "framer-motion";
export default function Example() {
const dialog = Ariakit.useDialogStore();
const mounted = dialog.useState("mounted");
return (
<>
<Ariakit.Button onClick={dialog.show} className="button">
Show modal
<AnimatePresence>
{mounted && (
store={dialog}
className="dialog"
<motion.div
className="backdrop"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
}
render={
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
}
>
<Ariakit.DialogHeading className="heading">
Success
<p className="description">
Your payment has been successfully processed. We have emailed your
receipt.
</p>
<Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
)}
</AnimatePresence>
</>
);
}

Components

AnimatePresence

We use the AnimatePresence component from Framer Motion to animate the Ariakit Dialog component when it gets mounted and unmounted from the DOM.

<AnimatePresence>
{mounted && (
store={dialog}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
}
render={
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
}
/>
)}
</AnimatePresence>

To dynamically render the dialog component, you can use the mounted state that can be retrieved from the store:

const dialog = Ariakit.useDialogStore();
const mounted = dialog.useState("mounted");

You can learn more about reading state from the store on the Component stores guide.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue