Dialog · Animation

    <.dialog
  class="dialog"
  modal
  animation="instant"
>
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    <.dialog
  class="dialog"
  animation="custom"
  on_open_change_client="my-dialog-open-changed"
>
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    import { animate } from "motion"
import {
  findDialogBackdrop,
  findDialogContent,
  animateScaleOpen,
  animateScaleClose,
} from "corex"

const reducedMotion = () =>
  window.matchMedia("(prefers-reduced-motion: reduce)").matches

document.addEventListener("my-dialog-open-changed", (e) => {
  const { id, open } = e.detail
  const root = document.getElementById(id)
  if (!root) return
  const backdrop = findDialogBackdrop(root)
  const content = findDialogContent(root)
  if (open) {
    if (backdrop)
      animateScaleOpen(backdrop, { animator: animate, duration: 0.5, easing: "ease-out" })
    if (content) {
      animateScaleOpen(content, {
        animator: animate,
        duration: 0.7,
        easing: [0.16, 1, 0.3, 1],
        scaleStart: 0.7,
        scaleEnd: 1,
      })
      if (!reducedMotion())
        animate(
          content,
          { y: [60, 0], filter: ["blur(12px)", "blur(0px)"] },
          { duration: 0.7, easing: [0.16, 1, 0.3, 1] },
        )
    }
  } else {
    if (backdrop)
      animateScaleClose(backdrop, { animator: animate, duration: 0.4, easing: "ease-in" })
    if (content) {
      animateScaleClose(content, {
        animator: animate,
        duration: 0.35,
        easing: "ease-in",
        scaleStart: 0.8,
        scaleEnd: 1,
      })
      if (!reducedMotion())
        animate(
          content,
          { y: [0, 40], filter: ["blur(0px)", "blur(12px)"] },
          { duration: 0.35, easing: "ease-in" },
        )
    }
  }
})