The rocket launch button
Buttons, Physics, Transitions, SVG
NewFree
All components
The cookie banner
A card in the corner with a cookie that rolls in: for every kind of cookie refused the cookie takes a bite and drops a few crumbs, and turned back on the bite grows back; once the choice is made, the card folds around the cookie, which drops into the corner spinning and bouncing and stays there as the button to open it again.
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 cookie banner</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/gabarito@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the cookie banner: a card in the corner with a cookie that loses a bite for every kind of cookie refused. Once
chosen, the card folds around the cookie, which drops into the corner and stays there as the button that
opens the choices again -->
<div class="consent" data-consent>
<section class="card" role="region" aria-labelledby="consent-title" data-card data-autoclic>
<span class="card__surface" aria-hidden="true" data-surface></span>
<div class="card__head">
<span class="card__slot" data-slot></span>
<div class="card__words" data-fade>
<h2 class="card__title" id="consent-title">We use cookies</h2>
<p class="card__text">Some keep the site working, others help us see what you like. You decide which ones.</p>
</div>
</div>
<div class="card__more" id="consent-kinds" hidden data-more>
<ul class="kinds" data-kinds></ul>
</div>
<div class="card__actions" data-fade>
<button class="cbtn cbtn--main" type="button" data-all>Accept all</button>
<button class="cbtn" type="button" data-necessary>Only necessary</button>
<button class="cbtn cbtn--plain" type="button" aria-expanded="false" aria-controls="consent-kinds" data-choose>
<span class="cbtn__clip"><span class="cbtn__label" data-choose-label>Choose</span></span>
</button>
</div>
</section>
<button class="corner" type="button" aria-label="Cookie preferences" hidden data-corner></button>
</div>
<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 cookie banner” from Animorio and fit it into my siteWhat it does
On a white background, in the bottom left corner, a warm white card with a soft shadow: a drawn cookie (golden dough, chocolate chunks, little cracks), We use cookies with a line under it and three buttons, a chocolate Accept all, Only necessary and Choose. When the page opens the card rises from below and the cookie rolls in from the left to its place. With Choose the card grows upwards and shows four kinds of cookies (Necessary, always on, with a lock; Preferences, Statistics and Marketing) with their switches, the word Choose rolls into Save choices and the cookie takes a bite for every kind turned off, one after another, with a shudder and a few crumbs falling. Turning a switch on, the knob stretches as it slides, the track turns caramel and the bite grows back; turning it off, a new bite. Choosing, with Accept all the switches turn on one after another and the cookie gives a hop, with Only necessary they turn off and the cookie gets bitten; then the card’s words fade and its paper folds down to a circle around the cookie, which drops into the corner spinning, squashes as it lands and bounces twice; under the pointer it shakes. Pressed, it crouches, jumps back to its place and the card opens again from it, with the kinds already showing.
How it works
The cookie and the bites
The cookie is an SVG drawn twice (in the card and in the round button); the bites are three black circles in a mask, on the edge at the angle of each kind (36.5 from the middle, 15 degrees apart): their radius goes from 0 to 12 and 9.5 times how far the bite is taken, times BITE. A bite opens with back.out in 0.22 seconds, the cookie shudders (rotation keyframes) and four crumbs, little polygons, fall and fade; a bite grows back with back.in.
The switches
The switches are real checkboxes (role switch) over the track: the knob moves 18 pixels with back.out, stretching (scaleX 1.35, then elastic.out back to 1, from the side it leaves) and the track takes the caramel colour. Necessary is on and disabled, with a lock in the knob.
The card folds
The card’s paper is a layer of its own, and the shadow is a drop-shadow filter on the card, so it follows the shape: the words fade, then in FOLD seconds the paper is cut with a clip-path inset down to the circle of the cookie’s place. The four sides and the radius are tweened as numbers and the clip-path written on every frame.
The drop
At that moment the real round button takes the circle’s place and drops into the corner: down with power2.in, the cookie spinning inside it, squashed (scaleY 0.8 from the bottom) as it lands and round again with elastic.out, then two bounces as high as BOUNCE and BOUNCE² of the drop, in DROP seconds. Pressed, it crouches, jumps back up with back.out turning to a whole turn and the paper opens again.
Keys and the preview
The card is a region with its title, Choose has aria-expanded, and the focus goes to the round button when the card folds and back to Choose when it opens again. A click from a script (the library’s preview) opens the kinds, saves, opens again, turns two on, saves, opens again, accepts all, opens again, keeps only the necessary ones and starts turning them on again.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
KINDS | script.js | [['Preferences', 'Remember your language and the choices you make.'], …] | The kinds of cookies that can be turned off: name and a line about it. |
BITE | script.js | 1 | How big a bite is (0: the cookie stays whole). |
FOLD | script.js | 0.45 | The seconds the card takes to fold around the cookie, and to unfold. |
DROP | script.js | 0.9 | The seconds the cookie takes to drop into the corner. |
BOUNCE | script.js | 0.3 | How high it bounces back, as a share of the drop. |
When to use it
For the cookie consent of any site, but also for a notice chosen once that then stays within reach: notification settings, the language, a welcome tour.
On phones
The card takes nearly the whole width at the bottom and the buttons wrap when needed; the cookie drops straight into the corner, under its place. The switches are big enough for a finger.
With reduced motion
The card is already there without rising and the cookie without rolling; the bites and the switches change at once, without crumbs or springs; once chosen, the card disappears and the round button appears in the corner without folding or dropping, and the card opens again the same way.
Pitfalls
- A shadow made with box-shadow would disappear under the clip-path that folds the card: here the shadow is a drop-shadow filter on the card, which follows the shape of the cut paper.
- A clip-path as a string does not animate: the browser writes inset(0px round 22px) in short and the tween does not find the same numbers on both sides. The sides and the radius are tweened as numbers and written out on every frame.
- Turning the button while it is squashed from the bottom would move it (turning and squashing need different centres): the cookie spins inside the button, and the button is squashed.
- An SVG mask needs a unique id: the cookie drawn twice has two masks, with their own names.
Libraries
GSAP 3.15.0, Gabarito (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.9 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 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.
