The send button
Buttons, Transitions, SVG
NewFree
All components
The dialog from its button
A card’s Delete button becomes itself the window that asks to confirm: its surface travels to the middle, widening and turning white, with a small overshoot, and on cancelling goes back into the button; confirming, the button fills like a bar, says Deleted and the window closes into the card, which makes way for Undo.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The dialog from its button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/libre-franklin@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the dialog from its button: Delete grows into the window that asks to confirm, and goes back into it; deleting,
the button fills up, the window closes into the card and the card gives way to an undo -->
<section class="project" aria-label="Project" data-project data-autoclic>
<div class="project__card" data-card>
<div class="project__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M6 3.5h8l4 4V20a.5.5 0 0 1-.5.5h-11A.5.5 0 0 1 6 20z"/><path d="M14 3.5v4h4M9 12h6M9 15.5h6"/></svg>
</div>
<div class="project__text">
<h2 class="project__title">Summer menu</h2>
<p class="project__meta">12 dishes · 8 photos · edited today</p>
</div>
<div class="project__actions">
<button class="btn btn--plain" type="button">Open</button>
<button class="btn btn--danger" type="button" aria-haspopup="dialog" data-open>Delete</button>
</div>
</div>
<div class="project__gone" hidden data-gone>
<p class="project__gone-text">Summer menu was deleted.</p>
<button class="btn btn--plain" type="button" data-undo>Undo</button>
</div>
</section>
<div class="layer" hidden data-layer>
<div class="layer__dim" data-dim></div>
<div class="layer__shell" data-shell></div>
<div class="dialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-text" data-dialog>
<div class="dialog__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M4.5 7h15M10 4h4M6.5 7l.8 12.2a1 1 0 0 0 1 .8h7.4a1 1 0 0 0 1-.8L17.5 7M10.3 10.5v6M13.7 10.5v6"/></svg>
</div>
<h3 class="dialog__title" id="dialog-title">Delete “Summer menu”?</h3>
<p class="dialog__text" id="dialog-text">Its 12 dishes and 8 photos go with it. You can still undo it straight after.</p>
<div class="dialog__actions">
<button class="btn btn--plain" type="button" data-cancel>Cancel</button>
<button class="btn btn--solid" type="button" data-confirm>
<span class="btn__fill" aria-hidden="true" data-fill></span>
<span class="btn__label" data-label>Delete</span>
</button>
</div>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
21 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The dialog from its button” from Animorio and fit it into my siteWhat it does
On a white background a project’s card: a document icon, Summer menu, 12 dishes · 8 photos · edited today and two buttons, Open and Delete in light red. Pressing Delete, the button itself grows: its surface moves to the middle of the screen, widening and rounding, goes from pink to white and lands with a small overshoot, while the page darkens and in come, one after another, the bin icon, Delete “Summer menu”?, the explanation and the buttons Cancel and Delete. Cancel, Esc or a click outside take the contents out and shrink the window until it is the button again. Delete fills from the left with a darker red and Deleting…, then says Deleted with a tick that draws itself; the window empties, shrinks towards the middle of the card and disappears, while the card fades and in its place stays Summer menu was deleted with Undo, which brings it back.
How it works
A single surface
The window has a background of its own, a layer drawn from its middle and its size: it starts from the button’s size and place (the button hides meanwhile) and goes to the window’s, so it grows the same on every side. The middle gets there with power3.out, the size with back.out(BOUNCE): the window lands with a small overshoot without swinging sideways. The colour goes from the button’s pink to white.
The contents
The window’s contents come in when the surface is a little under halfway, one after another (0.05 seconds), rising by 10 pixels; the page behind darkens up to DIM. The window answers its buttons as soon as it has landed, even while the contents are still coming in.
Back into the button
Closing, the contents leave from the last to the first and the surface goes back to the button’s size and place in SHRINK seconds with power3.inOut, turning pink again; then the button shows again and takes the focus back.
Deleting
The confirm button holds a bar (scaleX from 0 to 1 in LOAD seconds), then the words become Deleted with a tick drawn with stroke-dashoffset. The surface shrinks towards the middle of the card, fading, the card fades and the box goes from its height to that of the line with Undo (a height animated and then removed).
Keys and the preview
It is an alertdialog with aria-modal: opening, it takes the focus to Cancel, Tab goes round its two buttons, Esc closes it, the card behind is inert, and closing, the focus goes back to Delete (or to Undo). An aria-live region says the project was deleted or is back. A click from a script (the library’s preview) opens the window and cancels, opens it again and deletes, then undoes the deleting, without touching the focus.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
GROW | script.js | 0.5 | The seconds the button takes to grow into the window. |
SHRINK | script.js | 0.36 | The seconds the window takes to go back into its button. |
DIM | script.js | 0.32 | How dark the page goes behind the window, from 0 to 1. |
LOAD | script.js | 1.1 | The seconds the deleting takes (here a pretend one). |
BOUNCE | script.js | 1.25 | How far the window goes past its size as it lands (back.out). |
When to use it
For confirmations before an action that cannot be undone: deleting, emptying a cart, leaving a page with changes, cancelling a booking; or for a button that opens a short form.
On phones
The window takes the whole width less 16 pixels a side and there too it grows from the button; a tap outside closes it.
With reduced motion
The window appears and disappears in its place, without growing from the button or going back into it, and the page darkens at once; the deleting bar still fills, because it tells how far it has got, and the card makes way for the line with Undo without fading.
Pitfalls
- Scaling the whole window distorts the text and the corners: only an empty surface grows (real width, height and radius) and the contents come in afterwards, in the window already in place.
- With back.out on the size, a surface held by its top left corner overshoots only to the right and downwards: it is drawn from its middle, so the overshoot is the same on every side.
- An element with display grid in the CSS does not disappear with the hidden attribute: it needs a [hidden] { display: none } rule.
- If the buttons answer only at the end of the whole entrance, a quick click is lost: the window is open as soon as the surface has landed.
- Safari on iPhone tints its bars with the colour of a layer covering the screen: a black made faint with opacity would make them almost black, a see-through colour (rgba) leaves them grey like the darkened page.
Libraries
GSAP 3.15.0, Libre Franklin (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.8 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
