Draggable Bottom Sheet
Mobile-style bottom sheet that slides up, drags with the finger or pointer, and dismisses when pulled past a threshold.
About This Component
Mobile-style bottom sheet that slides up, drags with the finger or pointer, and dismisses when pulled past a threshold. Ships in three looks, vault, soft and corporate, switched by one data-variant attribute and defined entirely in CSS custom properties, so the same script serves all three. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework.
What's Included
- Slides up with power3 easing and a dimmed, blurred backdrop
- Drag the handle or the sheet; edge resistance on the way up
- Dismisses past a distance threshold, springs back otherwise
- Backdrop tap closes it
- Start state set by GSAP, not CSS, so it opens correctly every time
- Three shipped variants: vault, soft, corporate
Perfect For
- Filter and sort panels on mobile listings
- Action sheets and settings
- Cart and checkout summaries
How It Works
Drag to dismiss
Draggable.create with type y and bounds keeps the sheet on its rail; onDragEnd reads this.y and either closes with a yPercent tween or springs back with back.out. The pixel y is reset on close so the next open starts clean.