Drawer Slide In
A side drawer travels in over the page, and the page eases back a little to hand it the foreground.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Drawer Slide In
*
* A side drawer travels in over the page, and the page eases back a
* little to hand it the foreground. Escape or the scrim sends it away.About this pattern
The panel for work that belongs beside the page rather than instead of it — filters, details, a settings pane. The drawer covers one edge on a spring damped hard enough that a surface that size never overshoots, and the page underneath gives way by a few pixels as it arrives. That give is the part most implementations get wrong: they scale the page down, which scales its text, and resizing type for a passing overlay is the tell of a cheap transition. Here the page translates and dims instead, so every glyph behind the scrim stays exactly the size it was. Dismissal is quicker than arrival and plainly eased, because a drawer that leaves as slowly as it came feels reluctant.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Filter and detail panels arrive from the edge over the current list.
Related patterns
- Bottom Sheet PresentA sheet rises from the bottom edge over a dimming backdrop and settles once.
- Modal Scale InA dialog grows the last few percent into place behind a darkening scrim, and leaves the same way.
- Stack Push PageA new screen arrives over the current one, which holds back and dims to signal depth.