Tiles that rise
SVG, Hover, Physics
NewFree
Back to the library
The footer with the ingredients in the air
The footer of a burger bar, the colour of a bun: the links, the copyright, a thin rule and the huge name in red with a white outline. From the bottom edge four ingredients (lettuce, tomato, cheese, patty) are thrown one at a time like a juggler would: they rise fast, slow down at the top and fall back more slowly, spinning. Above, the wavy edge of the red section breathes; a click on the name throws all four together.
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 footer with the ingredients in the air</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the red section above the footer, the last call to order, ending in a wavy edge that breathes over the
bun-coloured footer -->
<section class="call">
<p class="last" data-pop-words>Still hungry? The grill stays on till midnight.</p>
<svg class="edge" viewBox="0 0 1536 300" preserveAspectRatio="none" aria-hidden="true">
<path data-edge d="M1536,0 H-1 V135 S184.32,65 460.8,155 S860.16,105 1121.28,137 S1413.12,105 1536,105 V0"/>
</svg>
</section>
<!-- the footer of an invented burger bar on the bun-coloured paper: the links and the small print, a thin rule,
a line about the bar and the brand name huge across the bottom; four ingredients (lettuce, tomato, cheese,
patty) are thrown up from below the edge one at a time, like a juggler, in front of the name -->
<footer class="foot">
<div class="row">
<nav class="links" aria-label="Footer navigation">
<a href="#" data-link><svg class="dollop" viewBox="-60 -34 120 68" aria-hidden="true"><path d="M-46,-6 C-50,-24 -26,-31 -8,-27 C8,-35 34,-30 44,-16 C56,-2 50,20 30,25 C14,32 -6,30 -20,26 C-38,26 -54,14 -46,-6 Z"/></svg><span class="label">Home</span></a>
<a href="#" data-link><svg class="dollop" viewBox="-60 -34 120 68" aria-hidden="true"><path d="M-48,-2 C-52,-20 -30,-30 -12,-26 C6,-33 32,-31 46,-18 C58,-4 50,18 32,24 C12,32 -10,31 -26,27 C-42,24 -50,12 -48,-2 Z"/></svg><span class="label">Burgers</span></a>
<a href="#" data-link><svg class="dollop" viewBox="-60 -34 120 68" aria-hidden="true"><path d="M-44,-10 C-46,-26 -22,-30 -4,-28 C14,-33 38,-26 46,-12 C54,4 46,22 28,26 C10,31 -12,29 -28,25 C-46,20 -52,6 -44,-10 Z"/></svg><span class="label">Sauces</span></a>
<a href="#" data-link><svg class="dollop" viewBox="-60 -34 120 68" aria-hidden="true"><path d="M-50,-4 C-50,-22 -28,-29 -10,-27 C10,-32 36,-28 46,-14 C56,0 48,20 28,25 C10,30 -12,30 -28,26 C-44,22 -52,10 -50,-4 Z"/></svg><span class="label">Contact</span></a>
</nav>
<p class="copy copy--top" data-pop-words>© 2026 STAKK Burger Bar</p>
</div>
<span class="rule" data-rule aria-hidden="true"></span>
<p class="tag" data-pop-words>Smashed to order · potato buns · open till midnight</p>
<div class="brand-wrap">
<h2 class="brand" data-brand role="button" tabindex="0" aria-label="STAKK, toss the ingredients">STAKK</h2>
</div>
<p class="copy copy--bottom">© 2026 STAKK Burger Bar</p>
</footer>
<!-- the ingredients fly over everything; the script draws them -->
<div class="air" aria-hidden="true" data-air></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.
37 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 footer with the ingredients in the air” from Animorio and fit it into my siteWhat it does
At the top of the stage is the last red section of the page, with the line “Still hungry? The grill stays on till midnight.”; its bottom edge is a wave of three curves that each breathe at their own pace (1, 2 and 1.8 seconds) over the bun-coloured footer. Below: on the left the links Home, Burgers, Sauces and Contact, on the right the copyright, a thin rule that draws itself from the left, the bar’s line and, at the bottom across the whole width, the name STAKK, huge, red with a thick white outline. On arrival the words and the links pop up from small, turned and a little lower, with a bounce; the letters of the name follow one at a time. Then the juggler starts: each of the four drawn ingredients (the curly lettuce leaf with its veins, the tomato slice with its seeds, the cheddar slice with holes and a drip, the patty with grill marks) has its own lane, starts below the edge, rises fast to a random height, slows down, falls back more slowly (the fall lasts a third longer than the rise), drifts a little sideways and spins; at the end it vanishes and after a moment it is thrown again. Pointing at a link drops a dollop of mustard behind it that swells with a bounce, and the word squashes and springs back like jelly. A click on the name throws all four together and squashes the letters.
How it works
A throw is a timeline
Each throw is a GSAP timeline with five tweens together: the rise with power2.out (fast, then it slows), the fall with power2.in (slow, then it speeds up) starting when the rise ends, the sideways drift with sine.inOut and the linear spin for the whole length, and the fade in the last quarter of a second. A rise quicker than the fall is what makes the gravity feel real.
Chance, measured
Height, length, drift, turns and direction are picked at random on every throw with gsap.utils.random, inside tight limits: the juggler never repeats itself but stays composed. When the timeline ends, a gsap.delayedCall waits a random moment and throws the same ingredient again.
Sizes are shares of the stage
The height of a throw is a share of the stage height and the drift a share of the width, and the size of the ingredients follows the shorter side: the juggler fits a phone window as well as a desktop one. On a phone the ingredients spin a third and drift less, and the drift is always kept inside the edges.
The three-pace wave
The edge of the red section is one path with three S curves. Seven numbers decide its points, and three tweens of different length (1, 2 and 1.8 seconds, starting at 0, 0.3 and 0.6) move them in a timeline that runs back and forth forever, rewriting the path on every frame: the three curves never come back to the same place together.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BRAND | script.js | 'STAKK' | The name at the bottom of the footer. |
APEX_MIN | script.js | 0.38 | The lowest height of a throw, as a share of the stage height. |
APEX_MAX | script.js | 0.6 | The highest height of a throw, as a share of the stage height. |
RISE | script.js | 1.1 | The seconds of the rise. |
GRAVITY | script.js | 1.3 | How many times longer the fall lasts than the rise. |
SPIN | script.js | 400 | The degrees an ingredient turns in a throw, on average (a third on a phone). |
PAUSE | script.js | 0.55 | The seconds an ingredient waits before it is thrown again, on average. |
SIZE | script.js | 1 | The size of the ingredients. |
When to use it
For the footer of a burger bar, a pizzeria, a food truck, an ice cream shop or a takeaway: anywhere a page should end with some fun and with the things on sale, instead of a still footer.
On phones
Same juggler, adapted sizes: the heights of the throws are shares of the stage, the ingredients spin a third and drift less, the links go to the centre and the copyright moves to the bottom under the name. A tap drops a dollop of mustard behind the link touched.
With reduced motion
No throws and no wave: the ingredients fade in and hang still over the name, slightly turned; the words and the dollop of mustard fade instead of popping.
Pitfalls
- Throw heights in vh work on a full page but not in a short window: they are measured on the real stage height and recalculated on resize, starting the throws over.
- The sideways drift has to be kept inside the edges: an ingredient on the 80% lane with a 24% drift would leave the screen.
- The next throw uses gsap.delayedCall rather than setTimeout, so GSAP stops it together with the timelines, even when the name is clicked halfway through a throw.
Libraries
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 23 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.
