Il piè di pagina con gli ingredienti in aria

Fisica, SVGGSAPMediaPeso compresso: Demo 8,1 KBGSAP 28 KBGratisScarica lo zip

Il piè di pagina di una hamburgeria, color panino: i link, il copyright, una riga sottile e il nome enorme in rosso col contorno bianco. Dal bordo di sotto quattro ingredienti (insalata, pomodoro, formaggio, carne) vengono lanciati uno alla volta come da un giocoliere: salgono svelti, frenano in cima, ricadono più lenti girando su sé stessi. Sopra, il bordo ondulato della sezione rossa respira; un clic sul nome li lancia tutti insieme.

Il codice

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.

Scarica lo zip

<!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>&copy; 2026 STAKK Burger Bar</p>
      </div>
      <span class="rule" data-rule aria-hidden="true"></span>
      <p class="tag" data-pop-words>Smashed to order &middot; potato buns &middot; 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">&copy; 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

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.

37 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

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 piè di pagina con gli ingredienti in aria» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

In cima al palco c’è l’ultima sezione rossa della pagina, con la frase «Still hungry? The grill stays on till midnight.»; il suo bordo di sotto è un’onda di tre curve che respirano ognuna al suo passo (1, 2 e 1,8 secondi) sul fondo color panino del piè di pagina. Sotto: a sinistra i link Home, Burgers, Sauces e Contact, a destra il copyright, una riga sottile che si disegna da sinistra, la frase del locale e, in basso per tutta la larghezza, il nome STAKK enorme, rosso col contorno bianco spesso. All’arrivo le parole e i link saltano su da piccoli, girati e un po’ più in basso, con un rimbalzo; le lettere del nome li seguono una alla volta. Poi comincia il giocoliere: ognuno dei quattro ingredienti disegnati (la foglia d’insalata arricciata con le venature, la fetta di pomodoro coi semi, la fetta di cheddar coi buchi e la goccia che cola, la polpetta con le righe della griglia) ha la sua corsia, parte da sotto il bordo, sale svelto fino a un’altezza a caso, frena, ricade più lento (la caduta dura una volta e un terzo la salita), scivola un po’ di lato e gira su sé stesso; alla fine sparisce e dopo un attimo viene rilanciato. Passando su un link gli cade dietro una goccia di senape che si gonfia con un rimbalzo e la scritta si schiaccia e torna come gelatina. Un clic sul nome lancia tutti e quattro insieme e le lettere si schiacciano.

Come funziona

Un lancio è una timeline

Ogni lancio è una timeline di GSAP con cinque tween insieme: la salita con power2.out (veloce e poi frena), la discesa con power2.in (lenta e poi accelera) che parte quando la salita finisce, la deriva di lato con sine.inOut e la rotazione lineare per tutta la durata, e la dissolvenza nell’ultimo quarto di secondo. Salita più lenta della caduta: è quello che fa sembrare vera la gravità.

Il caso, misurato

Altezza, durata, deriva, giri e verso si pescano a caso a ogni lancio con gsap.utils.random, dentro limiti stretti: così il giocoliere non si ripete mai ma resta composto. Quando la timeline finisce, un gsap.delayedCall aspetta un attimo a caso e rilancia lo stesso ingrediente.

Le misure sono quote del palco

L’altezza del lancio è una quota dell’altezza del palco e la deriva una quota della larghezza, e la grandezza degli ingredienti segue il lato più corto: il giocoliere sta nella finestra del telefono come in quella del computer. Sul telefono gli ingredienti girano un terzo e scivolano meno, e la deriva è sempre tenuta dentro i bordi.

L’onda a tre tempi

Il bordo della sezione rossa è un solo path con tre curve S. Sette numeri ne decidono i punti, e tre tween di durata diversa (1, 2 e 1,8 secondi, partiti a 0, 0,3 e 0,6) li muovono in una timeline che va avanti e indietro all’infinito, riscrivendo il path a ogni fotogramma: le tre curve non tornano mai insieme nello stesso punto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BRAND`	script.js	`'STAKK'`	Il nome in fondo al piè di pagina.
`APEX_MIN`	script.js	`0.38`	L’altezza più bassa di un lancio, in quota dell’altezza del palco.
`APEX_MAX`	script.js	`0.6`	L’altezza più alta di un lancio, in quota dell’altezza del palco.
`RISE`	script.js	`1.1`	I secondi della salita.
`GRAVITY`	script.js	`1.3`	Quante volte la caduta dura più della salita.
`SPIN`	script.js	`400`	I gradi che un ingrediente gira in un lancio, in media (sul telefono un terzo).
`PAUSE`	script.js	`0.55`	I secondi che un ingrediente aspetta prima di essere rilanciato, in media.
`SIZE`	script.js	`1`	La grandezza degli ingredienti.

Provali nel Playground

Quando usarla

Per il piè di pagina di una hamburgeria, una pizzeria, un food truck, una gelateria o un negozio di cibo da asporto: ovunque si voglia chiudere la pagina con un po’ di allegria e con le cose che si vendono, al posto di un piè di pagina fermo.

Sul telefono

Stesso giocoliere, misure adattate: le altezze dei lanci sono quote del palco, gli ingredienti girano un terzo e scivolano meno di lato, i link vanno al centro e il copyright scende in fondo sotto al nome. Col dito una goccia di senape cade dietro il link toccato.

Con il movimento ridotto

Niente lanci né onda: gli ingredienti compaiono con una dissolvenza e restano sospesi sopra il nome, appena girati; le parole e la goccia di senape si dissolvono invece di saltare.

Trappole

Le altezze dei lanci in vh vanno bene a pagina intera ma non in una finestra bassa: si misurano sull’altezza vera del palco e si ricalcolano al resize, ripartendo da capo coi lanci.
La deriva di lato va tenuta dentro i bordi: un ingrediente nella corsia all’80% con una deriva del 24% uscirebbe dallo schermo.
Il rilancio va con gsap.delayedCall e non con setTimeout: così GSAP lo ferma insieme alle timeline, anche quando si clicca il nome a metà di un lancio.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,1 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 23 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

Licenza d’uso

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.