The send button
Buttons, Transitions, SVG
NewFree
All components
The sticker button
A die-cut sticker to peel from its corner: pulled, it folds back over itself along a line half way between the corner and the hand and shows its back, and let go early it lies flat again with a bounce. Pulled far enough, or tapped once, it comes right off and falls away turning, and underneath there is the code to copy; Stick it back puts a new one in its place.
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 sticker button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sour-gummy@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/google-sans-code@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sticker button: a die-cut sticker that peels from its corner, folding back over itself; peeled off, it
falls away and the code printed underneath is there to copy -->
<div class="peel" data-peel data-autoclic>
<div class="peel__spot" data-spot>
<div class="peel__under" data-under>
<span class="peel__off">20% off your first order</span>
<span class="peel__code" data-code>SPRING20</span>
<button class="peel__copy" type="button" tabindex="-1" data-copy>Copy code</button>
</div>
<svg class="peel__art" aria-hidden="true" data-art>
<text class="peel__label" data-label>Peel for 20% off</text>
</svg>
<button class="peel__hit" type="button" aria-label="Peel for 20% off" data-hit></button>
</div>
<div class="peel__row">
<p class="peel__hint"><span data-hint>Pull the corner, or just tap</span></p>
<button class="peel__back" type="button" hidden data-back>Stick it back</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.
18 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 sticker button” from Animorio and fit it into my siteWhat it does
On a white background a coral sticker with rounded corners, the white rim of the die cut and the words Peel for 20% off; its bottom right corner is lifted a little and shows the cream back. Below, the line Pull the corner, or just tap. On arrival the sticker comes up from below and the corner lifts and falls back. The mouse near the corner lifts it more the closer it gets. Pulling the corner the sticker folds: the part past the fold turns over and shows its back, lighter near the fold, with a shadow under it, and the fold casts a soft shadow on the part still stuck. Let go before half way it lies flat again with a bounce; pulled further, it comes right off, falls turning to the left and fades. Underneath were 20% off your first order, the code SPRING20 and the Copy code button; the line says Your code is ready and Stick it back appears. Copy code copies the code and says Copied for a moment. Stick it back brings a new sticker down from above, a little turned, which straightens and is pressed flat with a small bounce.
How it works
A fold is a reflection
The sticker's outline is a rounded rectangle made of 36 points. The fold is the line half way between the corner and the point it has been pulled to, at right angles to them: the outline is cut along that line, the part on the corner's side is reflected onto the other (each point minus twice its distance from the line) and becomes the turned flap, while the rest is shown through a clip-path, so the words are cut too.
The back and the shadows
The flap is filled with a gradient that starts white on the fold and turns cream further away, and has its own shadow (feDropShadow); on the part still stuck a 22 pixel band along the fold goes from 24% dark to clear. All the gradients are set again every frame on the new fold.
The hand
The button over the sticker captures the pointer: the corner follows the hand keeping its distance from the point grabbed, but only inwards and no further than 2.2 times the diagonal. Moving less than 6 pixels is a tap. On letting go, if the corner has travelled at least GIVE of the diagonal the sticker comes off, otherwise it goes back to 16 pixels of lift with elastic.out(1, BOUNCE). The mouse within 120 pixels of the corner lifts it up to PEEK pixels more, with quickTo.
Coming off
To come off the corner travels to 2.12 times the diagonal, where the fold has crossed the whole sticker. Then the sticker drops 520 pixels with power2.in in the time a fall with gravity FALL takes, turning 38 degrees and moving 60 pixels left, and fades in the second half. Only then does Copy code join the Tab order and Stick it back show.
Keys, clipboard and the preview
Enter and Space on the button peel the sticker in one go; the click that follows a hand is skipped, or a drag would peel it twice. Copy code uses navigator.clipboard.writeText; with the keys, the focus moves to Copy code once the sticker is off and back to the sticker once it is back, and an aria-live region says what happens. A click from a script (the library's preview) is a pretend hand: once it pulls the corner and lets go, the next time it peels the sticker off, and once it is off it puts it back.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
GIVE | script.js | 0.45 | How far the corner must be pulled to peel the sticker off, as a share of its diagonal. |
PEEK | script.js | 24 | How far the corner lifts when the mouse comes near it, in pixels. |
BOUNCE | script.js | 0.45 | How the sticker settles when it falls back flat: lower is bouncier. |
FALL | script.js | 1500 | The gravity on the sticker peeled off, in pixels a second each second. |
When to use it
For discount codes and rewards to uncover: money off a first order, a welcome gift, a contest code, a reward after a level, an invitation to an event.
On phones
The sticker is 300 pixels wide, or the screen minus 64, and 104 tall; the finger pulls it without scrolling the page, selecting or opening the long-press menu (touch-action none, user-select none, -webkit-touch-callout none and contextmenu cancelled). A tap peels it in one go.
With reduced motion
The corner still follows the hand, since the hand moves it, but it does not lift on arrival, the mouse near it does not raise it and let go it lies flat in 0.2 seconds with no bounce. Peeled, the sticker fades where it is instead of falling, Stick it back puts it back at once and the words change without moving.
Pitfalls
- The drawing reaches 160 pixels past the sticker on every side (the viewBox has this margin): the turned flap leaves its box and would be cut.
- The part still stuck is shown through a clip-path, not redrawn: so the words and the white rim are cut exactly along the fold.
- A tap fires both the pointer events and a click: the click that follows the hand is skipped, and a click on its own (keys, screen readers) peels the sticker.
- Copy code stays out of the Tab order (tabindex -1) while the sticker covers it: otherwise the key would land on a hidden button.
- The sticker coming back is solid almost at once (0.1 seconds): half see-through it would show the code underneath. First the transforms left from the fall are cleared (clearProps), or it would come back turned.
Libraries
GSAP 3.15.0, Sour Gummy (font variabile) 5.3.0, Google Sans Code (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.5 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.
