Source Code

<div class="stage">
  <div class="backdrop" id="backdrop"></div>

  <button class="fab" id="fab" aria-label="Compose">
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
  </button>

  <div class="sheet" id="sheet">
    <div class="sheet-header">
      <h3>New Note</h3>
      <button class="close-btn" id="closeBtn" aria-label="Close">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="5" x2="19" y2="19"></line><line x1="19" y1="5" x2="5" y2="19"></line></svg>
      </button>
    </div>
    <textarea placeholder="Start typing..." class="sheet-body"></textarea>
    <button class="send-btn">Save Note</button>
  </div>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Material Container Transform — FAB to Sheet CSS JS

FAB Container Transform Sheet · Animations · Plain HTML, CSS & JS · Live preview

TagsKeyboard NavigationSVGForms & Validation

What's included

Features

Genuine container transform: one element grows from a 56px circle into a full rounded panel
Five properties animate together — width, height, border-radius, right, bottom — with shared easing
requestAnimationFrame-delayed class toggle guarantees the starting box paints before growth begins
Staggered opacity + transition-delay reveal on header/body/button prevents content clipping mid-grow
FAB fades and shrinks out in sync with the sheet appearing, reinforcing the "becomes" illusion
Backdrop click, close button, Escape key, and save button all reverse the transform identically
Reverse (close) animation reuses the exact same CSS transitions — no separate close keyframes needed
Zero dependencies — pure CSS transitions and a handful of class toggles
Textarea auto-focuses once the sheet finishes opening
Mobile (375px), Tablet (768px), Desktop device preview buttons

About this UI Snippet

FAB-to-Sheet Container Transform — Morphing One Element's Box Into a Full Panel

Screenshot of the FAB Container Transform Sheet snippet rendered live

The "container transform" pattern — popularized by Material Design — is a shared-element transition where one small element visibly grows into a completely different, much larger surface, rather than the larger surface fading in from nothing. This snippet builds the canonical example: a circular floating action button that morphs, in place, into a full compose sheet.

One element, two shapes

The key decision is that .fab and .sheet are two separate elements, but only .sheet ever animates its box — it starts already positioned exactly where the FAB sits (right: 28px; bottom: 28px; width: 56px; height: 56px; border-radius: 50%), invisible-in-practice because it is a plain white circle the same size as the FAB sitting right on top of it. The FAB itself simply fades out at the same moment. This is what makes the transform read as "the button becoming the sheet" rather than "a button disappearing while an unrelated panel appears".

What actually animates

Adding the .open class to .sheet changes five properties at once — width, height, border-radius, right, and bottom — each with its own transition entry sharing a cubic-bezier(0.4, 0, 0.2, 1) curve (Material's standard "emphasized" easing). Animating border-radius alongside the size is what sells the effect: a 56px circle with border-radius: 50% smoothly relaxes into a 420px panel with border-radius: 20px, so the corners visibly soften as the box grows rather than snapping between a circle and a rounded rectangle.

Staggering the content reveal

The sheet's header, body, and save button are given opacity: 0 at rest with a transition-delay — 0.18s, 0.22s, 0.22s — so they only start fading in once the box has grown enough to actually have room for them. Without this stagger, the header text would visibly overflow and clip inside a barely-open circle for the first several frames, breaking the illusion.

Why the class is added on the next animation frame

openSheet() calls requestAnimationFrame(() => sheet.classList.add('open')) instead of adding the class synchronously. This guarantees the browser has painted the sheet's starting 56×56 circle box at least once before the transition-triggering class lands — without that one-frame delay, some browsers can coalesce the "before" and "after" states into a single paint and the growth transition never becomes visible, snapping straight to the open size instead.

Closing back into the FAB

closeSheet() simply removes .open, which reverses every property back to its starting circle values along the same transitions, and restores the FAB's visibility on a short setTimeout timed to roughly when the sheet has shrunk back down. A backdrop click, close button, save button, or the Escape key all route through this one function, so the reverse transform is always available from the same three places a user would expect to be able to dismiss a sheet.

Where this differs from a typical modal

A standard modal fades a fixed-size box in over a backdrop with no relationship to what triggered it. A container transform keeps a literal spatial connection between the trigger and the result — the sheet visibly originates from the FAB's exact position, which reads as much more responsive and grounded, especially for actions like "compose", "add", or "expand" that conceptually grow out of a single button press.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet into an AI coding assistant like Claude and ask it to explain exactly why the sheet element starts already positioned and sized like the FAB rather than being created fresh when clicked — that "already-there, just animating" setup is the core trick behind every container transform. From there, ask the assistant to help you build a full focus trap for accessibility, or to adapt the same pattern so the sheet grows out of a list item's position instead of a fixed-position FAB.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "container transform" component in plain HTML, CSS, and JavaScript where a small circular floating action button visibly morphs into a full compose sheet panel, in the style of Material Design's container transform pattern — no animation library.

Requirements:
- A fixed-position circular FAB button in the corner of the screen, and a separate sheet element that starts pinned to the exact same position and size as the FAB (same width, height, and border-radius forming a circle).
- Clicking the FAB fades/shrinks the FAB out and adds an "open" class to the sheet on the next animation frame (not immediately) so the starting circle box is guaranteed to paint first.
- The open class must change the sheet's width, height, border-radius, and position together with CSS transitions on all of them, so it visibly grows from a small circle into a large rounded rectangle panel anchored near the same corner.
- The sheet's header, content area, and action button should be invisible at rest and fade in with a transition-delay so they only appear once the panel has grown large enough not to clip them.
- Provide at least three ways to close the sheet (a close button, clicking a backdrop, and the Escape key) that all remove the open class and restore the FAB, reversing the same transition.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Click the + floating action buttonIt fades out as the sheet grows from its exact position into a full panel with softening corners.
  2. 2
    Close the sheetClick the X, click the backdrop, press Escape, or click Save Note — all four reverse the transform back into the FAB.
  3. 3
    Change the open sizeEdit the width/height values on .sheet.open (currently min(420px, ...) and min(480px, ...)).
  4. 4
    Adjust the growth speedChange the 0.4s duration shared by the width/height/border-radius/position transitions on .sheet.
  5. 5
    Retime the content staggerAdjust the transition-delay values (0.18s, 0.22s) on .sheet-header, .sheet-body, and .send-btn.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Compose/quick-add actions
Notes, tasks, comments, or messages — anywhere a small "+" action should visibly grow into its own editing surface instead of popping open a disconnected modal.
Mobile-first web apps
A FAB-to-sheet transform is a extremely common native-app pattern; this snippet brings the same motion language to the web without a framework.
Product tours and empty states
Draw attention to a single entry-point action by making it visibly transform into the feature it unlocks, reinforcing what the button does.
Learn Material container transform
A compact, from-scratch reference for the shape/size/position animation recipe behind Material Design's container transform pattern.
Focus-managed sheets
The textarea receives focus automatically once open, and Escape closes it — a solid base to extend with a full focus trap for accessibility.
Related: FAB Speed Dial Menu
See the FAB Speed Dial Menu for a different floating-action-button expansion pattern worth comparing against this one.

Got questions?

Frequently Asked Questions

A regular modal appears as an unrelated fixed-size box with no visual connection to what opened it. Here, the sheet element starts already sized and positioned exactly like the FAB (a 56px circle in the same spot) and animates its own width, height, border-radius, and position into the open panel, so it visibly grows out of the button rather than appearing separately.

Adding the class immediately risks the browser combining the starting and ending styles into one paint, so the transition never becomes visible and the sheet just snaps open. Waiting one animation frame guarantees the starting circle has been painted first, so the following class change is guaranteed to trigger a visible transition.

If the content faded in at the same instant the box starts growing, it would visibly overflow and clip inside the still-tiny circle for the first several frames. Delaying each piece's opacity transition until the box has grown enough to contain it keeps the reveal looking clean.

Yes — change the starting right/bottom (or left/top) values on .sheet to match wherever the trigger element sits, and update openSheet()/closeSheet() to hide/show that trigger element instead of the FAB.

No. Every part of the transform is a plain CSS transition on width, height, border-radius, and position properties, toggled by adding or removing one class in JavaScript.

On open, capture the currently focused element, move focus into the sheet (already done for the textarea), and intercept Tab/Shift+Tab to cycle only within the sheet's focusable elements until it closes, at which point restore focus to the FAB.