StealThis .dev

Drawer Slide Effect

Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.

Open in Lab
css vanilla-js
Targets: JS HTML

Code

Drawer Slide Effect

Slide-in drawer panel from the left or right edge with backdrop overlay. Reference patterns from bottom-sheet, sheet-drawer, and hamburger-menu.

Features

  • CSS transform: translateX() slide with smooth easing
  • Backdrop overlay with fade
  • Click outside or close button to dismiss
  • prefers-reduced-motion respected