Native dialog slide-over

modal · motion — trigger: open a panel, then Escape or click the backdrop

A panel in the top layer that still animates on the way out.

A <dialog> opened with showModal() gets the top layer, the backdrop pseudo-element, focus trapping and Escape for free — but it also disappears the instant it closes, because display and overlay are discrete properties. transition-behavior: allow-discrete makes both transitionable, and @starting-style supplies the values to animate from on entry. No JavaScript is involved in the motion at all.

This browser does not support @starting-style or allow-discrete, so the panel will appear and disappear without motion. Everything else still works.

Direction is an attribute on the dialog, not a separate component: the closed transform and its matching @starting-style are selected by [data-direction]. Timing lives in custom properties, so a page can retune every panel from one place.

scroll behind the panel is contained by overscroll-behavior: contain

Panel

Item one$—
Item two$—
Item three$—

Escape closes it, focus is trapped while it is open and returns to the trigger afterwards — all of that is the platform, not this file.

this panel scrolls independently
600ms
400ms
0px
42vw
state: closed