The crumpling button

Buttons, SVG, TransitionsGSAPAdvancedCompressed weight: Demo 6.2 KBGSAP 28 KBFreeDownload the zip

Pressed, the button crumples into a ball of paper: its edge is pulled in towards the middle, unevenly, creases appear and the words shrink away. A bin comes up beside it with its lid open, the ball goes in with an arc, the lid slams and the bin goes away; in its place Draft deleted and Undo, which fishes the ball out and smooths it back into the button.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The crumpling button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/red-hat-text@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the crumpling button: pressed, it crumples into a ball of paper, which is thrown into a bin that comes up for
         it; Undo fishes the ball out and smooths it back into the button -->
    <div class="crumple" data-crumple data-autoclic>
      <div class="crumple__spot" data-spot>
        <svg class="crumple__art" aria-hidden="true" data-art></svg>
        <button class="crumple__btn" type="button" data-btn>
          <svg class="crumple__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3"/></svg>
          <span data-label>Delete draft</span>
        </button>
        <div class="crumple__gone" data-gone hidden>
          <span>Draft deleted</span>
          <button class="crumple__undo" type="button" data-undo>Undo</button>
        </div>
      </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.

14 values to change

Open the Playground

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 crumpling button” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background a light pink pill button with a red edge, a bin drawing and Delete draft. Pressed, the paper gives a little and comes back with a bounce; on the click the drawing and the words shrink and fade, and the pill's edge is pulled in towards the middle trembling a little, unevenly, into a turned ball, with the light at its top left, the shadow on its edge and broken red creases. Half way, on the button's right a dark grey bin comes up from below and its lid lifts. The ball gives a little hop, flies in an arc over the bin making one turn and drops inside, behind its front; the lid closes, the bin wobbles and sinks out of sight. Where the button was, Draft deleted and the Undo button remain. With Undo the bin comes up again, the ball comes out of its mouth, flies back to its place turning and there smooths back into the pill with a bounce, while the drawing and the words come back.

How it works

One edge, two shapes

The paper's edge is made of 64 points, one for each direction from the middle: on the flat button each is where that ray meets the pill's edge (a straight side or a round end), on the ball it is a radius of 23 pixels times 1 plus ROUGH times three waves at random phases and a little noise. Crumpling is going from one to the other (from 0 to 1), with a tremble that is strongest half way.

Light, shadow and creases

The same outline is filled a second time with a radial gradient, white at the top left, clear in the middle and the edge colour at 38% on the rim, whose opacity is the crumpling squared; seven broken lines of three strokes each, from the middle outwards, show in the second half. The chance comes from a generator with a fixed seed, so the paper crumples the same way every time.

The bin

The bin is in the same SVG, on the button's right: the back, a group for what goes inside, the front with three lines and the lid in its own group, turning round its left hinge (svgOrigin). It comes up from 46 pixels lower with back.out and the lid opens 72 degrees; on a very narrow screen it comes closer to the button to stay inside the window.

The throw

A little 12 pixel hop, then a quadratic Bézier curve to 14 pixels above the mouth, with the control point TOSS pixels higher, while the ball makes a full turn. At the mouth its group moves inside the bin, behind the front, and drops 30 pixels below the mouth; the lid closes, the bin wobbles (rotation keyframes 0, −5, 4, −2, 0) and sinks.

Undo, keys and the preview

Undo tells the story backwards: the bin comes up, the ball comes out, flies home and smooths out with elastic.out(1, 0.6). With the keys the focus moves to Undo once the draft is deleted and back to the button once it returns; an aria-live region says Deleting the draft, Draft deleted and Draft back. A click from a script (the library's preview) deletes, the next one undoes.

Values to change

Name	File	Default	What it changes
`CRUSH`	script.js	`0.55`	The seconds the button takes to crumple into a ball.
`TOSS`	script.js	`90`	How high the ball flies before it drops into the bin, in pixels.
`ROUGH`	script.js	`0.16`	How lumpy the ball is: how far its edge goes in and out.

Try them in the Playground

When to use it

For deleting with a gesture that is understood at a glance and can be undone: a draft, a note, an item in the cart, a photo, a message, a file in a list.

On phones

The button is 220 by 56 pixels; under 520 pixels of width it moves left as far as needed for the bin, which comes up on its right, to fit the screen, and on an even narrower screen the bin comes closer to it. The tap does not wait for a double tap (touch-action manipulation).

With reduced motion

No crumpling and no throw: the paper fades where it is in 0.2 seconds, the bin does not appear, and with Undo the button is back whole at once; a press does not squeeze the paper and the button does not come up on arrival.

Pitfalls

The two shapes must have the same points in the same directions: that is why the pill is measured by rays from its middle (where each ray meets a side or a round end) instead of taking its outline as it is.
The chance must be pinned down with a seed: with Math.random the ball would change shape at every new window size.
The ball goes behind the front of the bin by moving its group inside the bin's (appendChild) at the right moment, and comes back out with Undo: drawn twice, there would be two balls.
The drawing reaches past the button, up for the throw and right for the bin: without that margin in the viewBox the arc and the bin would be cut.
The bin must stay on screen: on a phone the button moves left (margin-right in a media query) and the bin's place is worked out from the room really left on the right.

Libraries

GSAP 3.15.0, Red Hat Text (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.2 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.