Back to Motion Prompt examples
UI component names · #02
Drawer (Off-canvas)
A menu panel slides in from the side of the screen. Clicking "Menu" slides a tall panel in from the left; clicking outside slides it back.
Opening & overlaysdraweroff-canvasoffcanvasside-menunavigation-drawersheetsidebarslide-in
Full motion specification
How the movement works
Use it to keep navigation or filters off screen until needed, especially on mobile.
- 014.5 s cycle on a 542×191 card. The cursor clicks the "Menu" button (110×34, top left) at 1.0 s.
- 02Open amount a: 0→1 over 1.0–1.38 s with easeOutCubic. Full-card scrim rgba(18,20,28) at opacity 0.36·a.
- 03Panel: white, 210 wide, full card height, x = −210 + 210·a so it slides in from the left edge. Shadow blur 22, alpha 0.25.
- 04Inside: an avatar (radius 14) and name at the top, then four menu rows 32 px apart; the first row is selected with a light-blue band.
- 05Close: the cursor clicks outside at (420, 120) at 3.3 s; a is multiplied by (1 − easeInOutCubic over 3.3–3.65 s) and the panel slides back.
Prompt
Open a drawer from the left when the menu button is pressed: 40% of the screen wide, sliding in over 0.4 s, with the page slightly dimmed.