Dialog · Animation
Built-in JS animation, instant mode, and custom Motion-driven transitions.
Playground
Playground
Dialog JS animation uses only opacity and scale on the content.
Instant
Instant
Native show and hide without JS transitions.
<.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>
Custom (Motion)
Custom
Motion animates open and close.
<.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" },
)
}
}
})