How to Animate a Mobile Bottom Sheet or Drawer
A technical guide to bottom sheet animation: drag tracking, velocity inheritance, snap points, rubber-banding, backdrop dimming, and gesture dismissal.
Core Takeaway
An intuitive bottom sheet couples real-time finger tracking with spring physics. As the user drags downward, the sheet translates directly with the touch coordinates. Upon release, the animation evaluates touch velocity: if flung downwards with momentum, it dismisses; otherwise, it snaps to the nearest stable height breakpoint using a critically damped spring.
Snap points and state architecture
Modern bottom sheets have multiple discrete states: peek (collapsed), expanded (partial screen), full (fullscreen modal), and closed. The animation between these snap points must calculate both current finger position and fling velocity to decide the target state.
Rubber-banding past the boundaries
When a user drags upward past the maximum expanded height, the sheet should not stop rigidly. Applying logarithmic resistance (rubber-banding) communicates physical elasticity before snapping smoothly back to the limit upon release.
- Track pointer coordinates in real-time on pointermove
- Inherit touch release velocity into the spring simulation
- Fade backdrop opacity proportional to current sheet height percentage
- Lock background scroll while sheet is active
Backdrop dimming and dismiss gestures
The scrim behind the sheet should animate its opacity in lockstep with the sheet translation. Clicking or tapping the backdrop must immediately trigger dismissal.
Accessibility requirements
Implement dialog semantics with aria-modal="true". Ensure focus traps inside the expanded sheet and pressing the Escape key dismisses the sheet and returns focus to the trigger button.
Key Principles to Remember
- Use velocity-aware springs to determine snap target on touch release
- Apply logarithmic rubber-banding when dragged beyond limits
- Link backdrop opacity directly to sheet progress percentage
- Maintain complete keyboard and focus trap accessibility
Frequently Asked Questions
Sources
- Bottom Sheets Pattern — Material Design 3
- Sheets Presentation — Apple Human Interface Guidelines