
Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Il caricamento di una burgeria inventata, STAKK, rifatto da zero su quello di Crav Burgers: sul rosso cadono uno dopo l’altro i sei strati di un hamburger, pane, carne, cheddar, pomodoro, insalata e il pane col sesamo, e la pila si schiaccia e si rialza a ogni colpo mentre una riga dice cosa fa la cucina e una barra senape si riempie. Pronto il panino, schizzano le briciole, la pila salta e tre teli dal bordo curvo, rosso, arancio e bordeaux, si alzano e scoprono la pagina, col titolo che spunta lettera per lettera.
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!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>Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
51 valori da cambiare
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il caricamento dell’hamburger che si impila» da Animorio e adattala al mio sitoOgni strato è un svg a sé, con la sua forma piena, le ombre, le luci e il contorno bordeaux disegnato per ultimo sopra a tutto. Gli strati stanno in una scatola larga quanto il più piccolo fra 62vw, 44vh e 380 pixel, e il posto di ognuno si calcola in parti di quella larghezza: così il panino ha le stesse proporzioni sul computer e nella casella del telefono.
Una timeline sola: ogni strato parte a 0,22 secondi dal precedente e cade da più in alto dello schermo in 0,32 secondi con power1.in. Quando tocca, la sua rotazione torna al suo angolo con back.out(2.5), e la scatola di tutta la pila fa tre passi in 0,26 secondi: si schiaccia (scaleY 0,88 e scaleX 1,06), va un poco oltre (1,03 e 0,98) e torna a 1, con l’origine in basso.
I tre teli sono tre path in un svg da 0 a 100 tirato su tutto lo schermo (preserveAspectRatio none). Il bordo di sotto è una curva quadratica: due numeri muovono gli angoli in 0,8 secondi con power2.inOut, un terzo muove il punto di controllo al centro in 1,1 secondi con power4.inOut. Il centro arriva dopo, quindi il bordo si piega; ogni telo parte 0,12 secondi dopo quello sopra.
Il titolo è diviso in lettere da script.js. Ognuna parte a scala 0, da 18-40 pixel più in basso e girata fino a 16 gradi, e arriva al suo posto in 0,72 secondi con back.out(2.35), una ogni 0,055 secondi, con l’origine al 90% dell’altezza: sono i numeri del testo che spunta di Crav.
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'STAKK' | Il nome della burgeria, in alto a sinistra e nel titolo della scheda del browser. |
SPEED | script.js | 1 | 2 è il doppio più veloce, 0.5 la metà. |
DROP_GAP | script.js | 0.22 | Quanti secondi fra uno strato e il successivo. |
FALL_TIME | script.js | 0.32 | In quanti secondi cade ogni strato. |
SQUASH | script.js | 0.12 | Quanto si schiaccia la pila quando arriva uno strato. |
CRUMBS | script.js | 14 | Quante briciole schizzano quando il panino è pronto. |
CURTAIN_TIME | script.js | 1.1 | In quanti secondi si alza il centro di un telo (i lati in poco meno di tre quarti). |
CURTAIN_GAP | script.js | 0.12 | Quanti secondi fra un telo e il successivo. |
HOLD | script.js | 3 | Quanti secondi resta la pagina prima che tutto ricominci. |
Per il caricamento del sito di una burgeria, di un fast food, di una paninoteca o di un food truck, l’apertura di una pagina per ordinare, il passaggio fra il menu e il carrello di un locale.
Lo stesso caricamento: il panino si misura sulla larghezza e sull’altezza insieme, così nella casella bassa e larga resta intero sopra la riga e la barra; l’adesivo non esce mai dal bordo destro.
Niente cade e niente salta: il panino è già impilato, la barra si riempie, poi lo schermo rosso sfuma e la pagina compare in dissolvenza, col tasto Replay.
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Big Shoulders Display (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Provata il 23 ottobre 2026
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
Con l’email e la password del tuo account.
oppure con l’email
Hai fatto l’accesso come .
Con l’account scarichi lo zip di ogni animazione e di ogni pacchetto, gratis.