Presentation
Sheets
A full-height or bottom-up surface that temporarily takes over the viewport — the broader form of the Action Sheet transition.
Findings
What's actually in /ig
- Same evidence as Action Sheets: ._a96f's translateY(100%) → 0 over .5s cubic-bezier(0,.61,.28,.92). The about-page brand menu is the clearest full, non-action-list example of this mechanism.
Usage
When to use it
Use when
A bottom-up surface hosting richer content than a simple action list — a share tray, a comment section, a media browser, a filter panel.
Avoid when
The content is a short list of contextual actions (use Action Sheets). Or the content requires a full navigational context (use a new page/route).
Anatomy
Anatomy
- 01
Backdrop (rgba scrim)
- 02
Sheet surface (full-width, bottom-anchored)
- 03
Handle pill (optional — drag affordance)
- 04
Scrollable content
- 05
Dismiss control
Specification
Spacing, colour, type, and motion
- Entry animation
- translateY(100%) → translateY(0) over 0.5s cubic-bezier(0,.61,.28,.92) — identical to Action Sheets
- Exit animation
- translateY(0) → translateY(100%) over 0.5s, same curve
- Backdrop
- rgba(0,0,0,0.5) — same as Modals & Panels
- Surface
- background:rgb(var(--ig-elevated-background)), border-radius top-left/top-right var(--radius-lg) 12px
- Shadow
- --shadow-8: 0 -6px 16px rgba(0,0,0,.18) — the confirmed upward-facing sheet shadow
States
States
| State | Behaviour |
|---|---|
| Hidden | translateY(100%) — fully offscreen below the viewport. |
| Opening | Animating from translateY(100%) to translateY(0) over 0.5s with --ease-settle curve. |
| Visible | translateY(0) — sheet occupies bottom of viewport; backdrop is opaque; content is interactive. |
| Dragging (optional) | User drags the handle pill; sheet follows the pointer. On release: snap to open or snap to dismissed based on velocity. |
| Closing | Animating from translateY(0) to translateY(100%) — same curve, same duration. |
Examples
Real interface compositions
Composer
Create menu sheet
Post, Story, Reel, and Live choices slide up from the bottom using the same full-height mechanism as the brand menu, with rows composed from existing lockup anatomy.
full-height fixed surface, translateY entrance, Ease Settle, lockup rows
Guidance
Usage guidance
- Treat this as the same component as Action Sheets at a larger scale — don't invent a second, different transition for a 'sheet' versus an 'action sheet'.
Do / Don't
Do / Don't
Do
- Use the confirmed --ease-settle curve (cubic-bezier(0,.61,.28,.92)) — it gives the bottom-up spring feel consistent with every other Instagram sheet.
- Apply --shadow-8 (upward-facing shadow) to the sheet top edge.
Don’t
- Invent a different animation curve — Action Sheets and Sheets share exactly the same timing.
- Open a Sheet for a simple 2–3 item action list — that's the Action Sheet use case.
See also