The menu that opens from its button
Menus, Transitions, Text
Free
All components
The toast from a line
In the minimal style: the notification of a save is born from a thin orange line, which stretches out from the middle, opens in height like a slit and becomes the notification, while the words come up one line at a time, narrow and light, and widen as they settle. The line stays on the bottom edge and measures the time to undo; Undo closes it back into the line and opens it again with the new words, and several notifications pile up making room for each other with a real spring.
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, viewport-fit=cover">
<title>The toast from a line</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Save draft button of a writing app and, under it, the room for its notifications. Each notification is
born from a thin line: the line stretches out from the middle, opens like a slit into the notification and
the words come up out of it one line at a time. The orange line along its bottom edge is the time left to
undo. Undo closes it back into the line and it opens again with the new words; a swipe, the cross or Esc
fold it into the line and slide it away. The notifications are made by script.js -->
<div class="desk" data-desk>
<div class="desk__head">
<button class="save" type="button" data-save data-autoclic>
<span class="save__rim" aria-hidden="true"></span>
<span class="save__label">Save draft</span>
</button>
</div>
<ol class="stack" aria-label="Notifications" data-stack></ol>
<p class="sr" role="status" aria-live="polite" aria-atomic="true" data-live></p>
</div>
</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.
22 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 toast from a line” from Animorio and fit it into my siteWhat it does
On a black background a button drawn with a thin line, Save draft, 52 pixels tall; under the pointer the line swells a little with a bounce and the words widen on the width axis. Pressing it, a thin orange line appears underneath and stretches out from the middle to both sides; two small marks spring up at its ends, like a dimension line in a technical drawing. Then the line opens in height like a slit: a grey line goes up, the orange one goes down, and between the two the notification is uncovered, 70 tall. The words come up out of the line one after the other, Draft saved, Slow mornings · 1,221 words, Undo and the cross: they arrive narrow and thin and widen and gain weight as they settle, one pixel too far and back. The orange line stays on the bottom edge and is the time to undo: it draws back towards the middle and the two marks follow it. With the pointer over it, the keyboard’s focus inside or a finger holding it the time stops and the marks grow longer. Undo closes the notification back into the line, the time fills the line again, and the notification opens again with Save undone and Back to 1,204 words. When the time is up the notification closes into the line and the line draws back into the middle. Dragged sideways with a finger or the mouse, with the cross or with Esc, it folds into the line and slides away. Every save makes a new notification on top and the others move down to make room with a spring; when one goes the others move back up. Three at most: one more closes the oldest at once. When the page opens a first notification comes by itself.
How it works
A notification made of a few numbers
Each notification is an object with five numbers: how long the line is, how open, how much time is left, how much the marks show and how much it is being held. GSAP animates only those numbers, and one function turns them into the page: the three thin lines (the top edge, the bottom edge and the orange time) move and stretch with a transform, the face is uncovered by a clip-path in pixels that closes from the middle, the marks always stand at the ends of the time left.
The words that come up out of the line
Each line of words has its own window with hidden overflow; inside it, the text comes up from below with back.out and a STAGGER offset. Meanwhile two CSS variables, --wd and --wg, go from NARROW and 260 to the right width and weight for each line (the title settles wide, at 112): Archivo’s font-variation-settings reads them, and the letters widen and gain weight as they settle. Closing, they go towards the middle, narrow and fade before the two lines meet, so they never lie on each other.
Time and Undo
The time to undo is a GSAP tween of a single number, from 1 to 0 in LIFE seconds, which stops under the pointer, with the focus inside and with a finger on it (a set of the reasons it is being held: while it is not empty the tween stays paused). Undo closes the notification into the line, brings the time back to 1 on the closed line, changes the words and opens it again, with HOLD seconds ahead.
The pile with FLIP and a real spring
Before every change (a notification arriving, one leaving) the script measures where each slot of the list is; then it changes the list, measures again, and each slot starts from where it was and goes to its new place. The motion is a damped spring solved exactly, 1 − e^(−ζωt)(cos ωd t + ζω/ωd sin ωd t), handed to GSAP as an ease: with ζω fixed the spring has always come to rest at the end of the tween, and with DAMPING 0.8 it goes one pixel too far and back.
The finger, Esc and the preview’s round
On pointerdown the notification captures the pointer; after 6 pixels the direction is chosen: sideways it follows the finger, vertically it lets the page scroll (touch-action: pan-y). Let go past 110 pixels or thrown fast it folds and slides away, otherwise it comes back with the spring. Esc sends away the one with the focus or the newest. The click the preview makes by itself (detail 0 and no key pressed) plays a whole round in a GSAP timeline instead: three saves, Undo on the newest, one sent away sideways, the oldest running out of time.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LIFE | script.js | 5 | The seconds to undo: the orange line under the notification (it waits under the pointer). |
HOLD | script.js | 1.8 | The seconds the notification stays after Undo. |
DRAW | script.js | 0.42 | The seconds the line takes to stretch out from the middle. |
OPEN | script.js | 0.55 | The seconds the line takes to open into the notification. |
STAGGER | script.js | 0.08 | The seconds between one line of words coming up and the next. |
DAMPING | script.js | 0.8 | The spring of the pile making room: 1 no overshoot, 0.4 a few bounces. |
NARROW | script.js | 66 | The width of the letters as they come up out of the line (62 narrowest, 100 normal). |
MAX | script.js | 3 | The most notifications at once: one more closes the oldest. |
FIRST | script.js | 0.7 | The seconds before a first notification comes by itself (0: none). |
TITLE | script.js | Draft saved | The notification’s title. |
UNDONE | script.js | Save undone | The title after Undo. |
DOC | script.js | Slow mornings | The name of the draft. |
WORDS | script.js | 1204 | The words in the draft at the start. |
When to use it
For an action that can still be undone for a few seconds: a save, an archive, a moved email, an edit in a writing app or a dashboard. The line measuring the time says how much is left with no numbers, and being born from a line suits sober, typographic interfaces on a dark background.
On phones
The column takes the width of the screen minus 32 pixels (358 at 390). Notifications are sent away by dragging them sideways with a finger, while vertically the page scrolls; a finger on one stops the time, Undo is 30 pixels tall and the cross has a touch area bigger than the drawn one.
With reduced motion
No stretching line and no opening slit: the notification fades in already open, the words fade in in their places, and the pile changes at once with no spring. The time line still draws back, because it is information; Undo changes the words in a fade and the notifications leave by fading.
Pitfalls
- A clip-path in percent does not animate well with GSAP, which does not read percentages back from the CSS: the face opens with an inset in pixels worked out every frame from the measured height, and the measures are taken again on resize, even halfway through an animation.
- Closing, the title goes down and the line under it goes up: in the first try they crossed halfway and for a moment lay on each other. Now they fade in little more than half the time and go only half the way, so the two lines meet when the words are gone.
- With FLIP every slot has to be measured where it really is, even while it is still moving: getBoundingClientRect is read with the transform in progress, then the transform is cleared, measured again and the slot starts from the difference, so two changes on top of each other do not make the pile jump.
- A spring used as an ease has to be at rest at the end of the tween, or the last frame jumps: the damping times the frequency (ζω) is fixed, so with any DAMPING less than a ten-thousandth is left at the end.
- Enter on the button also gives a click with detail 0, like the preview’s click: a keydown of Enter or Space marks the click as real, so from the keyboard it saves and the demo round does not start.
- Each line of words’ window also cuts the focus ring of Undo: once the words are up the window opens (overflow visible) and closes again only when the words go back down.
Libraries
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressed with gzip, the three demo files weigh 9.3 KB; the libraries: GSAP 28 KB.
Testing
Tested on 16 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
