Dialog with Framer Motion

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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
import * as Ariakit from "@ariakit/react";
import { AnimatePresence, motion } from "framer-motion";
import "./style.css";

export default function Example() {
  const dialog = Ariakit.useDialogStore();
  const mounted = Ariakit.useStoreState(dialog, "mounted");
  return (
    <>
      <Ariakit.Button onClick={dialog.show} className="button">
        Show modal
      </Ariakit.Button>
      <AnimatePresence>
        {mounted && (
          <Ariakit.Dialog
            store={dialog}
            alwaysVisible
            className="dialog"
            backdrop={
              <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
            </Ariakit.DialogHeading>
            <p className="description">
              Your payment has been successfully processed. We have emailed your
              receipt.
            </p>
            <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
          </Ariakit.Dialog>
        )}
      </AnimatePresence>
    </>
  );
}

import * as Ariakit from "@ariakit/react";
import { AnimatePresence, motion } from "framer-motion";
import "./style.css";

export default function Example() {
  const dialog = Ariakit.useDialogStore();
  const mounted = Ariakit.useStoreState(dialog, "mounted");
  return (
    <>
      <Ariakit.Button onClick={dialog.show} className="button">
        Show modal
      </Ariakit.Button>
      <AnimatePresence>
        {mounted && (
          <Ariakit.Dialog
            store={dialog}
            alwaysVisible
            className="dialog"
            backdrop={
              <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
            </Ariakit.DialogHeading>
            <p className="description">
              Your payment has been successfully processed. We have emailed your
              receipt.
            </p>
            <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
          </Ariakit.Dialog>
        )}
      </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.

View all 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 && (
    <Ariakit.Dialog
      store={dialog}
      alwaysVisible
      backdrop={
        <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>
<AnimatePresence>
  {mounted && (
    <Ariakit.Dialog
      store={dialog}
      alwaysVisible
      backdrop={
        <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 = Ariakit.useStoreState(dialog, "mounted");
const dialog = Ariakit.useDialogStore();
const mounted = Ariakit.useStoreState(dialog, "mounted");