The needle gauge
Counters, Physics, SVG
NewFree
All components
The falling leaf button
A newsletter's Unsubscribe, with a twig and a single gold ginkgo leaf in the round end of the pill. Under the pointer a breeze stirs it on its stalk; at a click the wind gets up, the stalk lets go and the leaf falls under the pill gliding from side to side like a sinking pendulum, turns over showing its paler back, lands and lies down with its shadow. The pill says You're unsubscribed · Come back any season, and a moment later a new leaf opens on the twig.
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 falling leaf button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the falling leaf button: the Unsubscribe of a newsletter, with a twig and one gold ginkgo leaf in the round right
end of the pill. Under the pointer a breeze stirs the leaf on its stalk; a click and the wind takes it: the
stalk lets go and the leaf falls under the pill, gliding from side to side like a pendulum, and lands. A moment
later a new leaf opens on the twig -->
<div class="leaf" data-leaf>
<div class="leaf__unit">
<button class="leaf__btn" type="button" data-btn data-autoclic>
<span class="leaf__fill" aria-hidden="true"></span>
<span class="leaf__faces">
<span class="leaf__face" data-face="rest">
<span class="leaf__word" data-rest-text>Unsubscribe</span>
</span>
<span class="leaf__face leaf__face--two" data-face="busy" aria-hidden="true">
<span class="leaf__small" data-busy-small>The Sunday Letters</span>
<span class="leaf__big" data-busy-text>Letting you go</span>
</span>
<span class="leaf__face leaf__face--two" data-face="done" aria-hidden="true">
<span class="leaf__big" data-done-text>You’re unsubscribed</span>
<span class="leaf__small" data-done-small>Come back any season</span>
</span>
</span>
</button>
<!-- the twig and the leaf, drawn by script.js; the pointer goes through them to the button -->
<svg class="leaf__art" viewBox="-60 -50 120 220" aria-hidden="true" data-art></svg>
</div>
<p class="sr" aria-live="polite" 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.
20 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 falling leaf button” from Animorio and fit it into my siteWhat it does
On a white background a dark moss-green pill 60 pixels tall, with a thread of light along the top, a soft shadow under it and a warm glow towards the right; on the left Unsubscribe in cream Newsreader. In the round right end, where the icon would be, a thin bark-coloured twig with a side shoot and at its tip, hanging from its stalk, a gold ginkgo leaf: a fan with fine straight veins and the notch in the middle of its rim. Passing over the pill the words grow fuller and airier, the fill swells with a bounce and a breeze stirs the leaf to and fro on its stalk, in gusts. At a click the pill says The Sunday Letters and Letting you go, the wind gets up and the leaf tugs at its stalk; a moment later the stalk lets go, the twig springs back and the leaf falls under the pill: it glides to one side, slows, rises a hair at the end of the glide and comes back the other way, tilting with every glide, and now and then turns over showing its paler back. A shadow gathers under it; it lands, lies down, slides a breath and stays there. The pill says You're unsubscribed · Come back any season. A moment later the fallen leaf fades and a new one opens on the twig: it grows from the bud and its fan spreads on a spring. With the keyboard the focus shows a ring and stirs the leaf like the breeze; Enter or Space make it fall. On a phone a tap shakes the leaf and makes it fall.
How it works
The twig and the leaf in an SVG
A single SVG lies over the right end of the pill and reaches below it (pointer-events: none, so the click reaches the button); its origin is the middle of the end. The twig is three strokes with a bark gradient. The leaf is a fan-shaped path with the notch in its rim, a gold radial gradient that takes its colours from var(--gold), thirteen straight veins clipped inside the fan and a pale back that shows only when it turns over. There are two leaves: the hanging one and the falling one.
On the twig: a pendulum on a springy stalk
The hanging leaf has an angle and a speed, and a spring brings it back to its resting angle (1.6 swings a second, lightly damped). The breeze is the sum of three slow waves with different periods, which never repeat the same, times a strength that rises and falls slowly: under the pointer 0.45 × BREEZE, at a click 1.5. When the stalk lets go, the leaf starts from where it is, with the speed it had.
The fall: a sinking pendulum
A falling leaf does not drop straight: it glides to one side, loses speed, rises a hair and comes back the other way. Here the leaf is the bob of a pendulum 34 pixels long hanging from a point that sinks at the leaf's speed (SINK) and drifts a little with the wind: φ'' = −(g / L) sin φ − c φ'. So that it neither dies out nor runs wild, the pendulum's energy is held near the energy of a swing as wide as SWING: when it swings too little it gets a push the way it is going, when it swings too much it is held back. The leaf tilts with its glide, and a slow roll, quicker when it glides hard, turns it over.
The landing and the new leaf
As the leaf nears the ground its shadow, a soft ellipse, widens and darkens. When it touches, a GSAP timeline lays it down (it turns and flattens as if seen edge-on) and slides it five pixels. After HOLD seconds the fallen leaf fades and a new one is born on the twig: it scales up from nothing with a back.out and its fan opens in width with an elastic.out, like a leaf unfolding.
The states
Three faces on top of each other, as wide as their words (at rest, letting go, unsubscribed); the pill is measured once on the widest. The button is a real button with aria-disabled until the new leaf has opened, an aria-live region that says Letting you go… and then You're unsubscribed. Come back any season., and an aria-label that changes with the state. The cycle takes about 4.6 seconds, less than the 5.6 of two clicks of the preview.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LABEL | script.js | Unsubscribe | The words at rest. |
LIST | script.js | The Sunday Letters | The small line while the leaf lets go: the newsletter's name. |
LEAVING | script.js | Letting you go | The words while the wind tugs at the leaf; the aria-live region says them too. |
DONE | script.js | You’re unsubscribed | The words once the leaf has gone. |
PARTING | script.js | Come back any season | The small line under them, the goodbye. |
WAIT | script.js | 0.8 | The seconds the stalk holds before it lets go: in a real site, the time the server takes to answer. |
HOLD | script.js | 3 | The seconds from the leaf letting go to the new one opening. |
SINK | script.js | 72 | How fast the leaf falls, in pixels a second. |
SWING | script.js | 0.75 | How wide it glides from side to side, as the pendulum's angle in radians: 0.2 it drops nearly straight, 1 it glides wide. |
BREEZE | script.js | 1 | How hard the breeze under the pointer stirs the leaf: 0 it stays still. |
When to use it
For a newsletter's Unsubscribe, a subscription's Cancel or Pause plan, a waiting list's Leave the list, a gentle Delete account: a way out that says goodbye instead of punishing. The new leaf says you can come back. The button fakes the unsubscribing: in a real site the click calls the server and the stalk lets go when it answers.
On phones
The pill is about 250 pixels wide and the leaf falls to some hundred pixels under its right end, gliding some twenty pixels each way: at 390 pixels it fits. A tap shakes the leaf and makes it fall; the leaf keeps its size.
With reduced motion
The leaf does not fall or move: when the stalk lets go it fades from the twig, and a moment later the new leaf fades in. The words fade in, the pill does not swell and the words do not change weight (under the mouse the fill only lightens a little).
Pitfalls
- A true aerodynamic model of a falling plate (drag, lift and moment worked out from its speed) either tumbled for ever or dropped flat like a stone depending on the numbers, and the middle way, the gliding leaf, came only for a few numbers, which the Playground would break at once. The sinking pendulum with its energy held near one level glides right for any value of the knobs.
- With a pendulum 22 pixels long the leaf fell nearly straight, gliding some ten pixels. Now it is 34 long and glides some twenty each way, with a swing of about a second and a half.
- At the start the leaf jumped from the angle it had on the twig to the angle of its glide. Now the difference starts equal to what is needed and dies away in half a second.
- A leaf 23 pixels wide in the end of the pill touched its right edge. Now it is a little larger but hangs further left and less tilted, with all of its fan inside the curve.
Libraries
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 9.2 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
