What the Frontend? Open the interactive gallery →
Page & Layout

Drawer / panel slide

A side panel that slides in from the edge of the screen — overlaying content rather than replacing it.

What you're seeing

A menu, filter panel, or detail view that slides in from the right or left.

Where you'll see it

Mobile navigation, filter panels, detail views, settings.

Difficulty

Very low — 1/5

Libraries that build it

MotionGSAPCSS

From the toolbox

shadcn/uiNot a component library — a component vendor. You copy the source and own the code; the reason half the internet suddenly ships polished UI.

Ready to prompt — paste this into your AI coding tool

"Slide drawer in from translateX(100%) to translateX(0) using Motion with spring config, add overlay with opacity 0 to 0.5"

Related Page & Layout effects

Page transitionSmooth scrollGrid revealStaggered card entranceFLIP transitionClip-path reveal
See the animated preview in the dictionary →