Side Drawer Panel
Right-hand slide-in panel with a dimmed backdrop, a fixed header, a scrollable body, and drag-to-close on the x axis.
About This Component
A settings or cart drawer that slides in from the right over a dimmed backdrop, with a fixed header, a scrollable body and a footer that stays put. It closes on the backdrop, on Escape, on the close button, or by dragging the panel to the right past a third of its own width.
Read the full effect overview
Ships in three looks, vault, glass and brutal, switched by one data-variant attribute and defined entirely in CSS custom properties, so the same script serves all three. One HTML file, one stylesheet, one script, GSAP plus Draggable.
What's Included
- Slides in on power3 easing with a backdrop that fades to its own variant colour
- Drag the panel right past a third of its width to dismiss, or it springs back
- Fixed header and footer with a body that scrolls independently
- Closes on backdrop click, Escape, the close button and the footer action
- Focus moves into the panel, is trapped while open, and returns to the trigger
- Start state set by GSAP, not CSS, and the drag offset is reset on close
- Setting groups stagger in behind the panel as it lands
- Three shipped variants: vault, glass, brutal
Perfect For
- Settings and preferences panels in an app shell
- Cart and checkout drawers on a store
- Filter panels on a listing or search page
- Detail inspectors in a dashboard, opened from a table row
How It Works
GSAP owns the start state
The panel carries no CSS transform. gsap.set(panel, { xPercent: 100, x: 0 }) puts it off-screen, so opening is a plain xPercent tween. A CSS translateX(100%) would be read by GSAP as a pixel x that an xPercent tween can never undo, which is the bug that breaks most hand-rolled drawers on their second open.
Drag to close
Draggable.create with type x, bounds from zero to the panel's own width and edge resistance keeps the panel on its rail. onDragEnd reads this.x and either closes or springs back on back.out. Closing folds the leftover pixel x into the percentage the tween owns so nothing jumps, then resets x to zero and calls update() so the next open starts clean.
Backdrop and focus
The backdrop tweens its backgroundColor to the value read from the --backdrop custom property at the call site, so a variant change needs no JavaScript. Opening moves focus to the close button, a keydown handler cycles Tab and Shift+Tab inside the panel, and closing hands focus back to the trigger.