Dialog with Framer Motion
Using Framer Motion to add initial and exit animations to a modal Dialog and its backdrop
element.
import "./style.css";
import * as Ariakit from "@ariakit/react";
import { AnimatePresence, motion } from "framer-motion";
export default function Example() {
const mounted = dialog.useState("mounted");
return (
<>
Show modal
<AnimatePresence>
{mounted && (
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 }}
/>
}
>
Success
<p className="description">
Your payment has been successfully processed. We have emailed your
receipt.
</p>
)}
</AnimatePresence>
</>
);
}
Components
DialogOpen a new window that can be either modal or non-modal and optionally rendered in a React portal. This component is based on the WAI-ARIA Dialog Pattern.
ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.
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 && (
<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 mounted = dialog.useState("mounted");
You can learn more about reading state from the store on the Component stores guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.