
The dinosaur-bitten logo
Intro, SVG, Text
NewFree
The loader of a made-up burger bar, STAKK, rebuilt from scratch on the one at Crav Burgers: on red, the six layers of a burger drop in one after another, bun, patty, cheddar, tomato, lettuce and the sesame top bun, and the stack squashes and springs back at every hit while a line says what the kitchen is doing and a mustard bar fills up. Once the burger is ready crumbs burst out, the stack hops and three curtains with a curved edge, red, orange and maroon, lift away and uncover the page, whose title pops in letter by letter.
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 burger that stacks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the gradients every layer shares -->
<svg class="sr" aria-hidden="true" focusable="false">
<defs>
<radialGradient id="g-cupola" cx="0.36" cy="0.22" r="0.85">
<stop offset="0" class="s-pane-luce" />
<stop offset="0.42" class="s-pane" />
<stop offset="0.82" class="s-pane-ombra" />
<stop offset="1" class="s-pane-tostato" />
</radialGradient>
<linearGradient id="g-base" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="s-pane" />
<stop offset="0.7" class="s-pane-ombra" />
<stop offset="1" class="s-pane-tostato" />
</linearGradient>
<linearGradient id="g-carne" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="s-carne-luce" />
<stop offset="0.45" class="s-carne" />
<stop offset="1" class="s-carne-scura" />
</linearGradient>
<linearGradient id="g-formaggio" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="s-formaggio-luce" />
<stop offset="0.55" class="s-formaggio" />
<stop offset="1" class="s-formaggio-ombra" />
</linearGradient>
<radialGradient id="g-polpa" cx="0.5" cy="0.45" r="0.6">
<stop offset="0" class="s-polpa-luce" />
<stop offset="1" class="s-polpa" />
</radialGradient>
<linearGradient id="g-insalata" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="s-insalata-luce" />
<stop offset="1" class="s-insalata" />
</linearGradient>
<linearGradient id="g-legno" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="s-legno-luce" />
<stop offset="1" class="s-legno" />
</linearGradient>
<radialGradient id="g-ombra" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" class="s-ombra" stop-opacity="0.55" />
<stop offset="1" class="s-ombra" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
<!-- the page of the burger bar, under the loader -->
<main class="pagina" data-page>
<header class="testa">
<p class="logo" data-brand>STAKK</p>
<p class="testa__ordina">Order</p>
</header>
<div class="nastro" aria-hidden="true"><div class="nastro__corsa" data-ticker></div></div>
<h1 class="titolo" data-title>
<span class="titolo__riga" data-line>Smashed</span>
<span class="titolo__riga titolo__riga--due" data-line>daily</span>
</h1>
<p class="adesivo"><span data-sticker>Flat top<br>since 2009</span></p>
<p class="sotto" data-sub>Two thin patties, crisp edges, soft bun. Order in two taps.</p>
<button class="pillola" type="button" data-replay data-autoclic>
<span class="pillola__scritta" data-testo="Replay">Replay</span>
</button>
</main>
<!-- the loader: three curtains of sauce with a curved, dripping edge, the burger that stacks on its board, the status line and the bar -->
<div class="carica" data-loader role="progressbar" aria-label="Loading" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<svg class="teli" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<g class="telo telo--tre" data-curtain><path data-fill /><path data-drips /><path class="telo__luce" data-shine /></g>
<g class="telo telo--due" data-curtain><path data-fill /><path data-drips /><path class="telo__luce" data-shine /></g>
<g class="telo telo--uno" data-curtain><path data-fill /><path data-drips /><path class="telo__luce" data-shine /></g>
</svg>
<!-- the wooden board the burger lands on, with its soft shadow -->
<svg class="tagliere" data-board viewBox="0 0 260 50" aria-hidden="true">
<path class="legno-lato" d="M10 22 Q10 6 40 6 H220 Q250 6 250 22 V30 Q250 50 220 50 H40 Q10 50 10 30 Z" />
<path class="legno" d="M10 22 Q10 6 40 6 H220 Q250 6 250 22 Q250 38 220 38 H40 Q10 38 10 22 Z" />
<path class="venatura" d="M34 14 Q90 10 150 14 T236 16 M30 24 Q80 20 130 25 T230 26 M46 32 Q110 29 170 32" />
<ellipse class="nodo" cx="206" cy="21" rx="7" ry="3" />
<ellipse class="ombra" data-shadow cx="130" cy="16" rx="104" ry="11" />
<path class="bordo" d="M10 22 Q10 6 40 6 H220 Q250 6 250 22 V30 Q250 50 220 50 H40 Q10 50 10 30 Z" />
<circle class="foro" cx="240" cy="22" r="3.4" />
</svg>
<div class="pila" data-stack aria-hidden="true">
<div class="briciole" data-crumbs></div>
<!-- steam off the hot patty -->
<svg class="vapore" viewBox="0 0 200 80">
<path data-steam d="M70 78 Q60 62 70 48 Q80 34 70 18" />
<path data-steam d="M100 78 Q112 60 100 44 Q88 28 100 10" />
<path data-steam d="M130 78 Q120 62 130 48 Q140 34 130 20" />
</svg>
<!-- bottom bun: the toasted cut face with its crumb, the crust under it -->
<svg class="strato strato--pane-sotto" data-layer viewBox="0 0 200 66">
<path fill="url(#g-base)" d="M8 12 Q8 6 16 6 H184 Q192 6 192 12 V26 Q192 60 150 60 H50 Q8 60 8 26 Z" />
<path class="f-pane-tostato" d="M8 34 Q10 60 50 60 H150 Q190 60 192 34 Q172 50 100 50 Q28 50 8 34 Z" opacity="0.55" />
<rect class="f-mollica" x="11" y="7" width="178" height="10" rx="4" />
<path class="tostatura" d="M13 17 H187" />
<g class="buchi">
<ellipse cx="30" cy="11" rx="3" ry="1.4" /><ellipse cx="52" cy="13" rx="2" ry="1" /><ellipse cx="74" cy="10" rx="3.4" ry="1.5" />
<ellipse cx="98" cy="12.5" rx="2.2" ry="1.1" /><ellipse cx="121" cy="10.5" rx="3" ry="1.3" /><ellipse cx="146" cy="13" rx="2.4" ry="1.1" />
<ellipse cx="168" cy="10.5" rx="3.2" ry="1.4" />
</g>
<path class="luce" d="M28 28 Q60 38 96 35" />
<path class="luce luce--piccola" d="M150 30 Q164 30 174 26" />
<path class="bordo" d="M8 12 Q8 6 16 6 H184 Q192 6 192 12 V26 Q192 60 150 60 H50 Q8 60 8 26 Z" />
</svg>
<!-- the smashed patty: lacy edges, caramelised crust, grill marks, juice -->
<svg class="strato strato--carne" data-layer viewBox="0 0 200 58">
<path class="f-carne-scura" d="M4 24 Q0 20 6 18 L10 22 Z M194 22 Q200 22 197 28 L190 27 Z M2 34 Q-2 38 4 40 L10 36 Z M196 36 Q201 40 194 42 L190 38 Z" />
<path class="sugo" data-drip d="M58 48 Q60 56 62 60 Q64 64 66 60 Q67 54 68 48 Z M146 48 Q147 53 149 55 Q151 57 152 54 Q153 51 154 48 Z" />
<path fill="url(#g-carne)" d="M10 20 Q8 8 24 8 Q40 4 60 8 Q80 3 100 7 Q120 3 140 8 Q160 4 176 8 Q192 8 190 22 V34 Q192 50 174 50 Q156 54 138 50 Q118 55 100 51 Q80 55 62 50 Q42 54 26 50 Q8 50 10 34 Z" />
<path class="carne-crosta" d="M20 14 Q42 8 60 12 Q80 7 100 11 Q120 7 140 12 Q160 8 180 14" />
<path class="carne-ombra" d="M14 40 Q56 52 100 47 Q144 52 186 40" />
<path class="carne-segni" d="M30 20 L46 40 M58 18 L74 42 M86 17 L102 42 M114 17 L130 42 M142 18 L158 41 M168 20 L180 36" />
<g class="grana">
<circle cx="24" cy="30" r="1.4" /><circle cx="40" cy="26" r="1" /><circle cx="52" cy="35" r="1.3" /><circle cx="68" cy="28" r="1" />
<circle cx="82" cy="36" r="1.4" /><circle cx="95" cy="25" r="1.1" /><circle cx="108" cy="33" r="1.4" /><circle cx="122" cy="27" r="1" />
<circle cx="136" cy="36" r="1.3" /><circle cx="150" cy="26" r="1.1" /><circle cx="164" cy="33" r="1.4" /><circle cx="178" cy="27" r="1" />
</g>
<g class="grana grana--chiara">
<circle cx="33" cy="33" r="1" /><circle cx="61" cy="24" r="0.9" /><circle cx="90" cy="31" r="1" /><circle cx="117" cy="38" r="0.9" />
<circle cx="144" cy="30" r="1" /><circle cx="172" cy="38" r="0.9" />
</g>
<path class="lucido" d="M36 15 Q50 12 62 14 M118 14 Q132 11 146 14" />
<path class="bordo" d="M10 20 Q8 8 24 8 Q40 4 60 8 Q80 3 100 7 Q120 3 140 8 Q160 4 176 8 Q192 8 190 22 V34 Q192 50 174 50 Q156 54 138 50 Q118 55 100 51 Q80 55 62 50 Q42 54 26 50 Q8 50 10 34 Z" />
</svg>
<!-- cheddar: the sheet folds over the patty, drips hang and stretch after it lands -->
<svg class="strato strato--formaggio" data-layer viewBox="0 0 200 56">
<g class="gocce" data-drip>
<path d="M64 16 Q62 30 63 38 Q65 47 70 47 Q75 47 76 38 Q77 28 76 16 Z" />
<path d="M140 16 Q139 26 140 32 Q142 38 145.5 38 Q149 38 150 32 Q151 25 150 16 Z" />
<path d="M10 14 Q8 24 9 30 Q10 35 13.5 35 Q17 35 17.5 29 Q18 22 18 14 Z" />
</g>
<path fill="url(#g-formaggio)" d="M6 8 H194 L192 18 Q186 22 182 30 Q178 44 172 30 L166 18 H122 Q114 24 112 38 Q109 52 103 38 Q100 26 94 18 H54 Q46 22 42 32 Q38 46 32 32 L26 18 H8 Z" />
<path class="formaggio-piega" d="M10 15 Q60 18 100 15 Q150 12 190 16" />
<path class="luce" d="M18 11 H70" />
<path class="luce luce--piccola" d="M106 26 Q106 34 108 38 M37 28 Q37 33 38 36" />
<path class="bordo" d="M6 8 H194 L192 18 Q186 22 182 30 Q178 44 172 30 L166 18 H122 Q114 24 112 38 Q109 52 103 38 Q100 26 94 18 H54 Q46 22 42 32 Q38 46 32 32 L26 18 H8 Z" />
<path class="bordo bordo--sottile" d="M64 18 Q62 30 63 38 Q65 47 70 47 Q75 47 76 38 Q77 28 76 18 M140 18 Q139 26 140 32 Q142 38 145.5 38 Q149 38 150 32 Q151 25 150 18 M10 16 Q8 24 9 30 Q10 35 13.5 35 Q17 35 17.5 29 Q18 22 18 16" data-drip />
<path class="luce luce--piccola" d="M66 26 Q66 34 67 38 M142 24 Q142 30 143 33" data-drip />
</svg>
<!-- two tomato slices with translucent flesh and seeds, red onion rings on top -->
<svg class="strato strato--pomodoro" data-layer viewBox="0 0 200 46">
<g>
<ellipse class="f-pomodoro bordo-pieno" cx="144" cy="23" rx="50" ry="17" />
<ellipse class="f-carne-pomodoro" cx="144" cy="22.5" rx="43" ry="13.5" />
<path fill="url(#g-polpa)" d="M110 22 Q112 13 138 12 Q140 22 110 22 Z M150 12 Q176 13 178 22 Q148 22 150 12 Z M110 24 Q112 33 138 34 Q140 24 110 24 Z M150 34 Q176 33 178 24 Q148 24 150 34 Z" />
<ellipse class="cuore" cx="144" cy="23" rx="6" ry="4" />
<g class="semi"><path d="M124 17 q3 -2 5 1 q-3 2 -5 -1 Z" /><path d="M130 19 q3 -2 5 1 q-3 2 -5 -1 Z" /><path d="M158 16 q3 -1 5 2 q-3 1 -5 -2 Z" /><path d="M164 19 q3 -1 5 2 q-3 1 -5 -2 Z" />
<path d="M122 27 q3 -1 5 2 q-3 1 -5 -2 Z" /><path d="M129 29 q3 -1 5 2 q-3 1 -5 -2 Z" /><path d="M158 28 q3 -2 5 1 q-3 2 -5 -1 Z" /><path d="M165 26 q3 -2 5 1 q-3 2 -5 -1 Z" /></g>
<path class="luce luce--piccola" d="M112 16 Q122 9 136 8" />
</g>
<g>
<ellipse class="f-pomodoro bordo-pieno" cx="56" cy="23" rx="50" ry="17" />
<ellipse class="f-carne-pomodoro" cx="56" cy="22.5" rx="43" ry="13.5" />
<path fill="url(#g-polpa)" d="M22 22 Q24 13 50 12 Q52 22 22 22 Z M62 12 Q88 13 90 22 Q60 22 62 12 Z M22 24 Q24 33 50 34 Q52 24 22 24 Z M62 34 Q88 33 90 24 Q60 24 62 34 Z" />
<ellipse class="cuore" cx="56" cy="23" rx="6" ry="4" />
<g class="semi"><path d="M36 17 q3 -2 5 1 q-3 2 -5 -1 Z" /><path d="M42 19 q3 -2 5 1 q-3 2 -5 -1 Z" /><path d="M70 16 q3 -1 5 2 q-3 1 -5 -2 Z" /><path d="M76 19 q3 -1 5 2 q-3 1 -5 -2 Z" />
<path d="M34 27 q3 -1 5 2 q-3 1 -5 -2 Z" /><path d="M41 29 q3 -1 5 2 q-3 1 -5 -2 Z" /><path d="M70 28 q3 -2 5 1 q-3 2 -5 -1 Z" /><path d="M77 26 q3 -2 5 1 q-3 2 -5 -1 Z" /></g>
<path class="luce luce--piccola" d="M24 16 Q34 9 48 8" />
</g>
<g class="cipolla">
<ellipse cx="12" cy="21" rx="15" ry="5.4" transform="rotate(-8 12 21)" /><ellipse cx="12" cy="21" rx="10" ry="3.4" transform="rotate(-8 12 21)" />
<ellipse cx="188" cy="19" rx="14" ry="5" transform="rotate(10 188 19)" /><ellipse cx="188" cy="19" rx="9" ry="3" transform="rotate(10 188 19)" />
</g>
</svg>
<!-- curly lettuce, two greens with veins, and a pickle slice peeking out -->
<svg class="strato strato--insalata" data-layer viewBox="0 0 210 52">
<path class="f-insalata-dietro" d="M2 30 Q6 14 18 22 Q26 10 38 20 Q50 8 62 18 Q74 8 84 18 Q96 6 108 18 Q120 8 130 18 Q142 8 152 19 Q164 8 174 20 Q188 10 198 24 Q210 30 202 38 Q198 50 184 44 Q170 52 156 46 Q140 54 126 46 Q110 54 96 46 Q80 54 66 46 Q50 54 36 46 Q22 52 14 44 Q0 46 2 30 Z" />
<g class="cetriolo">
<ellipse cx="190" cy="30" rx="16" ry="9" />
<ellipse class="cetriolo-polpa" cx="190" cy="29.5" rx="11.5" ry="6" />
<circle cx="184" cy="28" r="1.2" /><circle cx="190" cy="26.5" r="1.2" /><circle cx="196" cy="28" r="1.2" /><circle cx="187" cy="32" r="1.2" /><circle cx="194" cy="32" r="1.2" />
</g>
<path fill="url(#g-insalata)" d="M4 26 Q10 10 22 18 Q30 6 42 16 Q52 4 64 14 Q76 4 86 14 Q98 2 110 14 Q122 4 132 14 Q144 4 154 15 Q166 4 176 16 Q186 8 190 20 Q196 26 188 32 Q184 44 172 38 Q162 48 150 40 Q138 50 126 40 Q114 50 102 40 Q90 50 78 40 Q66 50 54 40 Q42 50 32 40 Q20 48 14 38 Q2 40 4 26 Z" />
<path class="insalata-ombra" d="M14 34 Q60 44 106 38 Q150 44 186 30" />
<path class="venature" d="M42 16 Q44 26 48 36 M44 24 L36 28 M46 30 L54 32 M86 14 Q88 24 92 36 M88 22 L80 26 M90 28 L98 30 M132 14 Q134 24 138 36 M134 22 L126 26 M136 28 L144 30 M168 16 Q170 24 172 32" />
<path class="frangia" d="M22 18 Q26 14 30 13 M64 14 Q68 9 72 9 M110 14 Q114 8 118 8 M154 15 Q158 10 162 10" />
<path class="bordo" d="M4 26 Q10 10 22 18 Q30 6 42 16 Q52 4 64 14 Q76 4 86 14 Q98 2 110 14 Q122 4 132 14 Q144 4 154 15 Q166 4 176 16 Q186 8 190 20 Q196 26 188 32 Q184 44 172 38 Q162 48 150 40 Q138 50 126 40 Q114 50 102 40 Q90 50 78 40 Q66 50 54 40 Q42 50 32 40 Q20 48 14 38 Q2 40 4 26 Z" />
<path class="bordo bordo--sottile" d="M174 22 Q174 40 190 39 Q206 39 206 30 Q206 21 190 21" />
</svg>
<!-- top bun: a glossy dome, toasted rim, sesame seeds with their shadows, sauce that drips out from under it -->
<svg class="strato strato--pane-sopra" data-layer viewBox="0 0 200 124">
<g class="salsa" data-sauce>
<path d="M28 100 Q28 116 32 122 Q36 128 40 120 Q43 110 45 100 Z" />
<path d="M82 102 Q82 122 87 130 Q92 136 96 126 Q99 114 101 102 Z" />
<path d="M134 102 Q135 114 138 118 Q141 122 144 116 Q146 109 148 102 Z" />
<path d="M166 100 Q166 112 169 116 Q172 120 175 113 Q177 106 178 100 Z" />
</g>
<path class="salsa-bordo" d="M14 102 Q100 112 186 102" />
<path fill="url(#g-cupola)" d="M8 98 Q6 70 20 48 Q48 8 100 8 Q152 8 180 48 Q194 70 192 98 Q192 106 182 106 H18 Q8 106 8 98 Z" />
<path class="f-pane-tostato" d="M8 88 Q8 106 18 106 H182 Q192 106 192 88 Q150 98 100 98 Q50 98 8 88 Z" opacity="0.7" />
<path class="luce luce--grande" d="M40 46 Q60 24 92 19" />
<path class="luce luce--piccola" d="M104 17 Q112 16 118 18" />
<g class="sesamo-ombra">
<ellipse cx="72" cy="41" rx="6" ry="3.2" transform="rotate(-24 72 41)" /><ellipse cx="104" cy="31" rx="5.6" ry="3" transform="rotate(4 104 31)" />
<ellipse cx="134" cy="43" rx="6.2" ry="3.3" transform="rotate(22 134 43)" /><ellipse cx="88" cy="61" rx="5" ry="2.8" transform="rotate(12 88 61)" />
<ellipse cx="120" cy="65" rx="6" ry="3.2" transform="rotate(-16 120 65)" /><ellipse cx="154" cy="67" rx="5.4" ry="3" transform="rotate(30 154 67)" />
<ellipse cx="54" cy="69" rx="5.8" ry="3.2" transform="rotate(-34 54 69)" /><ellipse cx="102" cy="83" rx="6.2" ry="3.3" transform="rotate(-4 102 83)" />
<ellipse cx="142" cy="87" rx="5.4" ry="3" transform="rotate(14 142 87)" /><ellipse cx="68" cy="87" rx="5.6" ry="3" transform="rotate(-12 68 87)" />
<ellipse cx="160" cy="45" rx="4.6" ry="2.6" transform="rotate(40 160 45)" /><ellipse cx="44" cy="51" rx="4.8" ry="2.6" transform="rotate(-44 44 51)" />
<ellipse cx="170" cy="79" rx="4.8" ry="2.6" transform="rotate(26 170 79)" /><ellipse cx="34" cy="83" rx="4.6" ry="2.6" transform="rotate(-20 34 83)" />
</g>
<g class="sesamo">
<ellipse cx="70" cy="38" rx="6" ry="3.2" transform="rotate(-24 70 38)" /><ellipse cx="102" cy="28" rx="5.6" ry="3" transform="rotate(4 102 28)" />
<ellipse cx="132" cy="40" rx="6.2" ry="3.3" transform="rotate(22 132 40)" /><ellipse cx="86" cy="58" rx="5" ry="2.8" transform="rotate(12 86 58)" />
<ellipse cx="118" cy="62" rx="6" ry="3.2" transform="rotate(-16 118 62)" /><ellipse cx="152" cy="64" rx="5.4" ry="3" transform="rotate(30 152 64)" />
<ellipse cx="52" cy="66" rx="5.8" ry="3.2" transform="rotate(-34 52 66)" /><ellipse cx="100" cy="80" rx="6.2" ry="3.3" transform="rotate(-4 100 80)" />
<ellipse cx="140" cy="84" rx="5.4" ry="3" transform="rotate(14 140 84)" /><ellipse cx="66" cy="84" rx="5.6" ry="3" transform="rotate(-12 66 84)" />
<ellipse cx="158" cy="42" rx="4.6" ry="2.6" transform="rotate(40 158 42)" /><ellipse cx="42" cy="48" rx="4.8" ry="2.6" transform="rotate(-44 42 48)" />
<ellipse cx="168" cy="76" rx="4.8" ry="2.6" transform="rotate(26 168 76)" /><ellipse cx="32" cy="80" rx="4.6" ry="2.6" transform="rotate(-20 32 80)" />
</g>
<g class="sesamo-luce">
<path d="M67 37 l4 -2" /><path d="M100 27 l4 0" /><path d="M129 38 l4 2" /><path d="M115 61 l4 -1" /><path d="M49 65 l4 -2" /><path d="M97 79 l4 0" />
</g>
<path class="bordo" d="M8 98 Q6 70 20 48 Q48 8 100 8 Q152 8 180 48 Q194 70 192 98 Q192 106 182 106 H18 Q8 106 8 98 Z" />
</svg>
</div>
<p class="stato" data-status aria-live="polite">Firing up the grill...</p>
<div class="barra" data-bar-wrap><div class="barra__piena" data-bar></div></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>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.
51 values to change
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The stacking burger loader and loading screen” from Animorio and fit it into my siteEach layer is its own svg, with its fill, its shades, its highlights and the maroon outline drawn last on top of everything. The layers sit in a box as wide as the smallest of 62vw, 44vh and 380 pixels, and the place of each one is worked out in parts of that width: so the burger keeps the same proportions on a computer and in the phone frame.
One timeline: each layer starts 0.22 seconds after the one before and falls from above the screen in 0.32 seconds with power1.in. When it lands its rotation goes back to its angle with back.out(2.5), and the box of the whole stack takes three steps in 0.26 seconds: it squashes (scaleY 0.88 and scaleX 1.06), goes a little past (1.03 and 0.98) and comes back to 1, with the origin at the bottom.
The three curtains are three paths in a 0 to 100 svg stretched over the whole screen (preserveAspectRatio none). The bottom edge is a quadratic curve: two numbers move the corners in 0.8 seconds with power2.inOut, a third moves the control point in the middle in 1.1 seconds with power4.inOut. The middle gets there later, so the edge bends; each curtain starts 0.12 seconds after the one above.
script.js splits the title into letters. Each one starts at scale 0, 18 to 40 pixels lower and turned up to 16 degrees, and reaches its place in 0.72 seconds with back.out(2.35), one every 0.055 seconds, with the origin at 90% of its height: these are the numbers of Crav’s pop-in text.
| Name | File | Default | What it changes |
|---|---|---|---|
BRAND | script.js | 'STAKK' | The name of the burger bar, top left and in the browser tab title. |
SPEED | script.js | 1 | 2 is twice as fast, 0.5 half as fast. |
DROP_GAP | script.js | 0.22 | How many seconds between one layer and the next. |
FALL_TIME | script.js | 0.32 | How many seconds each layer takes to fall. |
SQUASH | script.js | 0.12 | How much the stack squashes when a layer lands. |
CRUMBS | script.js | 14 | How many crumbs burst out when the burger is ready. |
CURTAIN_TIME | script.js | 1.1 | How many seconds the middle of a curtain takes to lift (the sides in a little under three quarters of that). |
CURTAIN_GAP | script.js | 0.12 | How many seconds between one curtain and the next. |
HOLD | script.js | 3 | How many seconds the page stays before it all starts again. |
For the loader of a burger bar, a fast food place, a sandwich shop or a food truck, the opening of an ordering page, the step between the menu and the cart of a restaurant.
The same loader: the burger is sized on both width and height, so in the short, wide frame it stays whole above the line and the bar; the sticker never leaves the right edge.
Nothing falls and nothing hops: the burger is already stacked, the bar fills, then the red screen fades out and the page fades in, with the Replay button.
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Big Shoulders Display (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.
Tested on 23 October 2026
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.
With your account’s email and password.
or with your email
You’re signed in as .
With your account, you can download the zip of every animation and every pack, for free.