Le storie a cubo

Storie, 3D, TransizioniGSAPImpegnativaPeso compresso: Demo 7,4 KBGSAP 28 KBGratisScarica lo zip

Le storie di un forno, una dopo l’altra: le barre in alto si riempiono, un tocco a destra va avanti e uno a sinistra torna indietro girando le storie come le facce di un cubo, tenere premuto mette in pausa e nasconde tutto tranne la storia, e chiudendo la storia si stringe nel cerchio del suo avatar.

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 stories</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/league-spartan@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the stories: the bars fill one after another, a tap goes on or back turning the stories like the faces of a
         cube, holding pauses and hides everything but the story, and closing shrinks it into its circle -->
    <section class="stories" aria-label="Stories from Forno Lupo" data-stories data-autoclic>
      <div class="viewer" tabindex="0" aria-roledescription="stories" aria-describedby="stories-help" data-viewer>
        <div class="viewer__stage" data-stage></div>
        <div class="viewer__chrome" data-chrome>
          <div class="viewer__bars" aria-hidden="true" data-bars></div>
          <div class="viewer__head">
            <span class="viewer__avatar" aria-hidden="true">FL</span>
            <span class="viewer__name">Forno Lupo</span>
            <span class="viewer__time">2 h</span>
            <button class="viewer__close" type="button" aria-label="Close the stories" data-close>
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
            </button>
          </div>
        </div>
        <p class="sr" id="stories-help">Arrows to go on or back, space to pause, Escape to close.</p>
      </div>
      <button class="ring" type="button" aria-label="Watch the stories from Forno Lupo again" hidden data-ring>
        <span class="ring__avatar" aria-hidden="true">FL</span>
        <span class="ring__name">Forno Lupo</span>
      </button>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </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.

34 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 «Le storie a cubo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una storia nelle proporzioni di un telefono: in alto quattro barre sottili, il tondo FL, Forno Lupo, 2 h e una croce; sotto, la prima storia, gialla, con una pagnotta che sale dal basso, tre fili di vapore e le parole Out of the oven at 7 che salgono una dopo l’altra. La barra della storia si riempie in cinque secondi, poi si passa alla seguente: Today: rye and fennel (verde, con le spighe che crescono e ondeggiano), Sold out by 11 (rossa, con le lancette che girano), Sunday we rest (blu, con la luna che sale e una nuvola che passa). Un tocco sul terzo sinistro torna indietro, altrove va avanti: le storie girano come le facce di un cubo, e quella che se ne va si scurisce. Tenendo premuto la storia si ferma e le barre e la testata spariscono; trascinandola in giù la storia scende e rimpicciolisce, e lasciata abbastanza in basso si chiude. Chiudendosi (anche con la croce, o finite le storie) la storia diventa un quadrato, poi un cerchio, e vola rimpicciolendo nel cerchio dell’avatar con Forno Lupo sotto; il cerchio la riapre facendola ricrescere.

Come funziona

Le barre

Ogni storia ha una barra, riempita da un tween di scaleX da 0 a 1 in DURATION secondi senza ease (il tempo scorre uguale); alla fine il tween passa alla storia dopo, e dopo l’ultima le storie si chiudono. Andando avanti o indietro le barre di prima sono piene e quelle dopo vuote.

Il cubo

Le due storie girano attorno all’asse del cubo, mezza larghezza dietro di loro (transformOrigin con la terza coordinata negativa): quella che se ne va da 0 a −90 gradi e quella che arriva da 90 a 0, in TURN secondi con power2.inOut, con la prospettiva DEPTH sul contenitore e backface-visibility hidden; un velo nero su quella che se ne va la scurisce.

Ogni storia si muove

Ogni storia ha una sua timeline che riparte quando si mostra: le parole salgono una dopo l’altra e il disegno fa la sua parte (la pagnotta sale con back.out e il vapore va su e giù, le spighe crescono e ondeggiano, le lancette girano per tutta la storia, la luna sale e galleggia). La pausa ferma anche lei.

Tenere, trascinare, chiudere

Una pressione che dura più di HOLD secondi mette in pausa, e lasciando si riparte; un trascinamento in giù sposta e rimpicciolisce la storia, che oltre 70 pixel si chiude. Chiudendo, un clip-path (numeri su un oggetto a parte) la taglia a un quadrato e lo arrotonda fino al cerchio, mentre x, y e scale la portano sul cerchio dell’avatar, misurata come sta nella pagina, senza il trascinamento in corso.

Tasti e anteprima

Le storie si raggiungono col Tab: le frecce vanno avanti e indietro, lo spazio mette in pausa, Esc chiude e porta la focalizzazione sul cerchio, che con Invio le riapre; una regione aria-live dice a quale storia si è. Un clic da script (l’anteprima della libreria) è un pollice finto: va avanti, tiene premuta una storia, torna indietro, chiude le storie nel cerchio e le riapre.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATION`	script.js	`5`	I secondi che dura ogni storia.
`TURN`	script.js	`0.65`	I secondi in cui il cubo gira da una storia all’altra.
`HOLD`	script.js	`0.22`	I secondi che deve durare una pressione per mettere in pausa invece di andare avanti.
`DEPTH`	script.js	`900`	La prospettiva, in pixel: più è piccola, più il cubo è profondo.
`STORIES`	script.js	`[['Out of the oven at 7', 'Every morning, every loaf', 'loaf', '#f4b450', '#3a1e05'], …]`	Le storie: le parole, quelle più piccole, il disegno (loaf, wheat, clock, moon), lo sfondo e il colore delle parole.

Provali nel Playground

Quando usarla

Per le novità di un negozio o di un ristorante, i momenti di un evento, le offerte del giorno, i passi di una ricetta, la presentazione di un prodotto, raccontati in poche schermate.

Sul telefono

Le storie prendono l’altezza dello schermo meno un margine; si toccano, si tengono premute e si trascinano in giù col dito senza che la pagina scorra (touch-action none), e il tocco lungo non apre il menu del sistema.

Con il movimento ridotto

Le storie cambiano di colpo, senza cubo, e i disegni e le parole restano fermi; le barre si riempiono lo stesso, perché dicono quanto manca, e chiudere o riaprire avviene senza il cerchio che si stringe o cresce.

Trappole

Una costante chiamata chrome in cima a uno script classico si scontra, in Chrome, con window.chrome (altrove no): lo script non parte solo lì. Qui si chiama overlay.
Le parole messe in span inline-block perdono lo spazio all’inizio di ogni span: gli spazi vanno fuori, fra uno span e l’altro.
Un cubo vero gira attorno al suo centro, non attorno a un lato: transformOrigin con la profondità (50% 50% e meno metà larghezza) fa girare le due facce insieme, senza fessure.
Chiudendo durante un trascinamento la storia è già spostata e rimpicciolita: la sua posizione va misurata togliendo il trascinamento, o finirebbe lontano dal cerchio.
Un from() in una timeline prende come arrivo i valori del momento in cui nasce: il nome sotto il cerchio, appena nascosto, sarebbe rimasto nascosto. Serve un fromTo con immediateRender false.

Librerie

GSAP 3.15.0, League Spartan (font variabile) 5.3.0.

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

Collaudo

Provata il 3 ottobre 2026

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

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.