Presentation
Action Sheets
Compact, touch-first action choices — the same full-height sheet transition used by Instagram's brand menu, reframed as a choice list.
Findings
What's actually in /ig
- ._a96f{position:fixed;height:100%;width:100%;z-index:400} with transform:translateY(100%) → translateY(0), transitioned over .5s cubic-bezier(0,.61,.28,.92) — the exact mechanism documented as Ease Settle on Motion.
Usage
When to use it
Use when
Use for a contextual action list triggered from the bottom of the screen; reserve it for 3+ destructive, irreversible, or high-attention actions.
Avoid when
Avoid for one-off inline commands, persistent navigation, or pointer-first flyouts; use Buttons, Tab Bars, or Menus instead.
Anatomy
Anatomy
- 01
Full-height fixed surface
- 02
Slide-up transform
- 03
Action rows
- 04
Dismiss
Specification
Spacing, colour, type, and motion
- Entrance
- translateY(100%) → translateY(0)
- Timing
- 0.5s cubic-bezier(0,.61,.28,.92)
- Backdrop
- rgba(0,0,0,0.5)
- Position
- position: fixed; height: 100%; width: 100%
- Layer
- z-index: 400
States
States
| State | Behaviour |
|---|---|
| Hidden | Sheet is translated fully off the bottom of the viewport. |
| Opening | Sheet animates upward from translateY(100%) to 0 over the documented Ease Settle curve. |
| Visible | Action rows are available over the dimmed backdrop. |
| Row pressed | The tapped row applies a pressed overlay while the action is held. |
| Closing | Sheet animates down to translateY(100%) before being removed or hidden. |
Examples
Real interface compositions
Stories
Story action choices
Mute, Report, Hide story, and Copy link slide up as stacked touch targets over a full-height fixed surface, then dismiss along the same translateY path.
position fixed, z-index 400, translateY(100%) to 0, Ease Settle ~500ms
Guidance
Usage guidance
- Reuse the documented slide-up mechanism verbatim (translateY(100%) → 0, Ease Settle, ~500ms) rather than inventing a new entrance for a sheet-style surface.
Do / Don't
Do / Don't
Do
- Use position: fixed with z-index 400 and the documented Ease Settle transform.
Don’t
- Fade a sheet in with opacity alone — every sheet-like surface found uses a translate transform.
See also