The slide-to-confirm button
Buttons, Physics, Transitions
NewFree
All components
The shredder delete button
The Delete file button turns into a shredder: the page above it slides into the slot and comes out underneath cut into strips, with the lines really cut; the strips hang, curl at the end, twist to show the back of the paper, then drop and fade. Undo rewinds the whole thing and the page rises out whole.
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 shredder delete button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the shredder: the page above is drawn in a canvas; pressed, the button turns into a shredder, the page goes
into its slot and comes out underneath cut into strips (slices of the same drawing) that curl, fall and fade.
Undo plays the whole thing backwards -->
<div class="shred" data-shred data-autoclic>
<canvas class="shred__canvas" aria-hidden="true" data-canvas></canvas>
<div class="shred__sheet" role="img" data-sheet>
<span class="shred__ghost" data-ghost></span>
</div>
<div class="shred__box" data-box>
<button class="shred__btn" type="button" data-btn>
<span class="shred__face shred__face--delete" data-face="delete"></span>
<span class="shred__face shred__face--machine" data-face="machine">
<span class="shred__slot"></span>
<span class="shred__teeth"></span>
<span class="shred__state">
<span data-busy>Shredding</span>
</span>
</span>
<span class="shred__face shred__face--undo" data-face="undo">
<span class="shred__timer" data-timer></span>
</span>
<span class="shred__label" data-label="delete" aria-hidden="true">
<svg class="shred__icon" viewBox="0 0 24 24"><g class="shred__lid"><path d="M4 6.5h16"/><path d="M9.5 6.5V4.25h5V6.5"/></g><path d="M6.2 6.5l.9 13.25h9.8l.9-13.25"/><path d="M10.25 10.5v5.5M13.75 10.5v5.5"/></svg>
<span>Delete file</span>
</span>
<span class="shred__label shred__label--undo" data-label="undo" aria-hidden="true">
<svg class="shred__icon" viewBox="0 0 24 24"><path d="M9 14.5L4.5 10 9 5.5"/><path d="M4.75 10h9.5a5 5 0 0 1 0 10H11"/></svg>
<span>Undo</span>
</span>
</button>
</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.
33 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 shredder delete button” from Animorio and fit it into my siteWhat it does
On a white background there is a white page with a thin grey edge and its shadow: an invoice without words, its lines of text drawn as grey bars, the items with their amounts, the pale green box of the total and a green band at the bottom. Below it, a red button with a bin and Delete file. With the mouse over the button the lid of the bin lifts and the page leans a little towards it. Clicking, the words drop away, the button widens into a graphite shredder with the slot along the top, the cutters along the bottom and the word Shredding; the page slides down to the slot and goes in at a steady pace, and underneath thirteen strips come out, each with its own piece of the page and a thin grey line along both cut edges: the lines are cut into pieces. The strips come out a little out of step, hang, curl at the tip and turn to show the grey back; a little paper dust falls from the cutters. When the last edge is through the strips come loose, fall swaying and fade, a dashed outline stays where the page was and the button becomes a dark pill with Undo and a thin line that shortens. Clicking Undo the machine says Restoring and everything goes backwards: the strips rise from where they fell, go back into the machine and the page rises out of it whole, then the button turns red again. Left alone for five seconds, the file is gone for good and the next page drops into the outline: a letter, then a report with a bar chart.
How it works
The page drawn once
Each page (an invoice, a letter, a report) is drawn only once in an offscreen canvas, with roundRect and colours taken from the CSS variables, at the screen's density: the lines of text are rounded bars, the shape of the words without the words. On screen there is a single fixed canvas as big as the window: above the slot it draws the whole page, with a hairline round its edge so that white paper shows on the white background, clipped at the height of the slot as it goes in.
The strips are chains of points
Each strip is a chain of 51 points 5.4 pixels apart, moved by hand with Verlet integration in steps of 1/120 of a second: gravity, the air holding it back, a sway from side to side and three rounds of constraints keeping each piece's length. The points still inside the machine follow the page straight down; those that are out are free. A second constraint bends each joint towards the tip by CURL radians: the strip curls at the end, and once it is let go the bend runs up the whole strip.
Every piece is a slice of the page
Each piece of a strip is drawn with drawImage from its own slice of the page's canvas (column i, row j), with a setTransform that lays one axis along the piece and squeezes the other by the cosine of the twist: so the lines of the page are really cut and the strip seems to turn in 3D. When the cosine is negative the back shows (a grey rectangle), and a dark veil grows as the piece turns edge on. Two grey lines along the edges of every piece show the cut on the white background.
Undo is the recording backwards
Every frame of the cutting and the fall, the whole state (the page, every point of every strip with its twist, the dust) is copied into a Float32Array. Undo does not run the physics backwards: a GSAP tween runs the time from the end to zero with power2.inOut, in a time divided by REWIND, and the drawing takes the frame interpolated between the two nearest recorded ones.
The button and its states
The real button has three faces on top of each other (red, machine, Undo) that swap with a fade, while GSAP changes its width, height and radius. The time to undo is a timeline of UNDO seconds that shortens a line; when it ends the file is gone and the next one is drawn. aria-label and an aria-live region tell each step; Ctrl+Z or Cmd+Z undo.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
STRIPS | script.js | 13 | How many strips the page is cut into. |
FEED | script.js | 1.5 | The seconds the page takes to go through the machine. |
CURL | script.js | 0.2 | How much the tip of each strip curls: the bend at each joint near the tip, in radians. |
TWIST | script.js | 1.5 | How much the strips twist and show the back of the paper. |
FALL | script.js | [1100, 3.6] | The strips falling: gravity, in pixels a second squared, and how much the air holds them back. |
UNDO | script.js | 5 | The seconds Undo stays before the file is gone for good. |
REWIND | script.js | 1.7 | How many times faster than the cutting Undo rewinds it. |
FILES | script.js | [['Invoice.pdf', '84 KB', 'invoice'], …] | The files to delete one after the other: name and size (read out by screen readers) and drawing (invoice, letter or report). |
When to use it
For the action that deletes a document, a draft, an attachment or a conversation, where a slightly theatrical gesture makes clear what happens and Undo stays there for a few seconds. Better on a single, deliberate action than in a list where things are deleted often.
On phones
The page and the machine keep their size and fit a 390 pixel screen; the canvas follows the screen's density (up to 2) and the cut lines stay sharp. A touch does what the mouse over it does: the lid lifts and the page leans towards the button.
With reduced motion
No cutting and no fall: the page fades away, the dashed outline stays in its place and the button becomes Undo at once; undoing, the page fades back in its place. The lid of the bin does not move.
Pitfalls
- The first curl bent the whole strip: once loose the strips turned into rings and spirals. The bend goes only on the last joints while it hangs, and once loose it spreads slowly to the whole strip with a small angle.
- A sideways sway different for every point (sin of the time plus the index) made the strips snake like an S: it must change little along the strip, so the whole strip sways together like paper.
- Running the physics backwards never gets back to the start (the damping loses the information): Undo only works by recording every frame and reading it back in reverse.
- With the faces of the button crossfading, halfway through the red showed through the two half transparent faces: the new face comes in on top at full opacity and only then the old one goes, and the red goes too, or its edge stays round the corners.
- The time step is capped at 1/30 of a second and split into steps of 1/120: after a tab left in the background a jump in time broke the constraints and the strips flew off.
Libraries
GSAP 3.15.0, Onest (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.
Testing
Tested on 4 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.
