Il logo nella bolla di sapone

Intro, SVG, TestoGSAPImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

L’intro di un logo dentro una bolla di sapone: un anello la soffia in tre respiri, la bolla si stacca con un tremolio di gelatina e galleggia col logo sospeso dentro, fra i colori cangianti della pellicola; poi scoppia in una pioggia di gocce e il logo resta, con qualche goccia che gli scivola addosso. Nel Playground ci metti il tuo nome o carichi il tuo logo.

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 soap-bubble logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/nunito@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, builds the wand, the bubble and the logo, and runs the story -->
    <svg class="palco" data-stage role="img" aria-label="Opaline" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the colours of the soap film: soft round patches that fade out at their edge -->
        <radialGradient id="film-a"><stop offset="0" class="film-stop film-stop--a" /><stop offset="1" class="film-stop film-stop--a film-stop--via" /></radialGradient>
        <radialGradient id="film-b"><stop offset="0" class="film-stop film-stop--b" /><stop offset="1" class="film-stop film-stop--b film-stop--via" /></radialGradient>
        <radialGradient id="film-c"><stop offset="0" class="film-stop film-stop--c" /><stop offset="1" class="film-stop film-stop--c film-stop--via" /></radialGradient>
        <radialGradient id="film-d"><stop offset="0" class="film-stop film-stop--d" /><stop offset="1" class="film-stop film-stop--d film-stop--via" /></radialGradient>
        <radialGradient id="film-e"><stop offset="0" class="film-stop film-stop--e" /><stop offset="1" class="film-stop film-stop--e film-stop--via" /></radialGradient>
        <!-- the thin rainbow band that runs round the edge of the film; the script turns it -->
        <linearGradient id="rim-band" x1="0" y1="0" x2="1" y2="1" data-rim-band>
          <stop offset="0" class="banda banda--a" />
          <stop offset="0.25" class="banda banda--b" />
          <stop offset="0.5" class="banda banda--c" />
          <stop offset="0.75" class="banda banda--d" />
          <stop offset="1" class="banda banda--a" />
        </linearGradient>
        <!-- the film is thicker at the bottom, where the soap runs down -->
        <linearGradient id="rim-heavy" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="pesante pesante--via" />
          <stop offset="0.62" class="pesante pesante--via" />
          <stop offset="1" class="pesante" />
        </linearGradient>
        <!-- the film still in the ring, before it is blown -->
        <linearGradient id="ring-film" x1="0" y1="0" x2="1" y2="0" data-ring-film-grad>
          <stop offset="0" class="banda banda--b" />
          <stop offset="0.35" class="banda banda--c" />
          <stop offset="0.65" class="banda banda--a" />
          <stop offset="1" class="banda banda--d" />
        </linearGradient>
        <!-- the outline of the bubble: the film, the rims and the reflections are cut by it -->
        <clipPath id="film-clip"><path data-film-clip /></clipPath>
        <!-- the hole that opens when it pops -->
        <mask id="hole" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" data-hole-mask>
          <rect fill="#fff" data-hole-all />
          <circle fill="#000" cx="0" cy="0" r="0" data-hole />
        </mask>
        <!-- the swirls of colour are softened -->
        <filter id="soften" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="6" data-soften />
        </filter>
        <!-- the last of the film on the letters: shown only where the logo is -->
        <mask id="on-logo" maskUnits="userSpaceOnUse" style="mask-type: alpha" data-on-logo>
          <use href="#logo-glyphs" />
        </mask>
      </defs>

      <g data-world>
        <!-- the wand: its stick, the back of the ring, the film in the ring and the air that rushes through it -->
        <g data-wand-back></g>

        <!-- the logo, floating inside the bubble -->
        <g data-logo>
          <g id="logo-glyphs" class="logo" data-glyphs></g>
          <g mask="url(#on-logo)" data-sheen></g>
          <g data-drips></g>
        </g>

        <!-- the bubble: 0 0 is its middle; the film, its rims and the reflections of a window -->
        <g data-bubble>
          <g clip-path="url(#film-clip)">
            <g data-film>
              <circle class="film-fondo" r="100" data-film-base />
              <g class="film-colori" data-blobs></g>
              <g class="film-vortici" filter="url(#soften)" data-swirls></g>
            </g>
            <path class="orlo-morbido" data-rim-soft />
            <path class="orlo-pesante" stroke="url(#rim-heavy)" data-rim-heavy />
            <path class="orlo-banda" stroke="url(#rim-band)" data-rim-band-path />
            <g data-shine></g>
            <circle class="strappo" r="0" data-tear />
          </g>
          <path class="orlo" data-rim-line />
        </g>

        <!-- the front of the ring, in front of the film -->
        <g data-wand-front></g>

        <g data-fx></g>
      </g>
    </svg>
    <p class="nota">Click or tap to see it again</p>
  </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.

26 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 logo nella bolla di sapone» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo blu notte entra dal basso un soffiatore di plastica arancione, un anello con il manico, con la pellicola di sapone ancora tesa dentro: si assesta con un’oscillazione elastica, un luccichio passa sulla pellicola e una goccia cade dall’anello. Poi l’anello viene tirato piano verso il basso e la pellicola si gonfia: prima una cupola, poi una bolla che cresce in tre respiri, ondeggiando sul collo elastico che la tiene all’anello, mentre l’aria passa attraverso l’anello e due bollicine scappano di lato. Dentro la bolla, man mano che cresce, compaiono le lettere del logo di un marchio inventato, Opaline, dal centro verso i bordi. Il collo si stringe, si allunga e cede: la bolla salta via con un tremolio da gelatina, la coda si ritira, il soffiatore cade fuori scena con un ultimo lampo di pellicola. La bolla sale al centro, riscende un poco e rimbalza leggera sull’aria, poi galleggia col logo sospeso dentro: sulla pellicola scorrono macchie di magenta, ciano, oro, menta e viola, un filo d’arcobaleno gira sul bordo, in basso il bordo è più spesso e in alto a sinistra si riflette una finestra ad arco. Dopo un attimo la pellicola trema, i colori accelerano e la bolla scoppia: da un punto si apre un buco che corre su tutta la pellicola, il bordo strappato brilla, le gocce partono una dopo l’altra man mano che il buco le raggiunge e poi cadono, e un anello di luce si allarga. Il logo, libero, fa un piccolo salto e si assesta a grandezza piena; sulle lettere resta l’iridescenza della pellicola, che si spegne piano, e qualche goccia ci cade sopra, scivola giù lungo le aste lasciando una scia bagnata e si stacca dal fondo. Dopo qualche secondo le lettere se ne vanno e si soffia una bolla nuova. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine.

Come funziona

Una sola misura

Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Le lettere si misurano su una canvas con lo stesso carattere (measureText, actualBoundingBoxAscent per l’altezza vera) e la bolla nasce dal logo: il suo raggio è la mezza diagonale del logo, rimpicciolito a nove decimi, più mezza lettera. La grandezza si sceglie perché la bolla stia nella finestra col soffiatore sotto, alla fine del soffio, sia sul computer sia sul telefono.

La sagoma della bolla

La bolla è un tracciato riscritto a ogni fotogramma: due archi per il tondo, due curve di Bézier per il collo, che lasciano il cerchio tangenti (il punto di controllo segue la tangente del cerchio) e scendono all’anello, e mezza ellisse sotto, il bordo dell’anello visto un po’ dall’alto. Raggio, distanza dell’anello, stretta del collo e inclinazione sono numeri in un solo oggetto che la timeline anima; quando la bolla si stacca, il collo diventa una coda che si ritira con elastic.out. Il tremolio da gelatina è una scala opposta su x e y, girata nella direzione voluta.

La pellicola

Dentro il tracciato, usato come clipPath, ci sono sei macchie con un gradiente radiale (colore pieno al centro, trasparente al bordo) in mix-blend-mode screen, che girano intorno al bordo a velocità diverse; tre vortici sfumati con feGaussianBlur; e tre tratti dello stesso tracciato: uno chiaro e largo per il bordo morbido, uno con un gradiente verticale che è pieno solo in basso (il sapone che cola), uno sottile con un gradiente arcobaleno che gira con gradientTransform. Sopra, il riflesso di una finestra ad arco con la croce sottile, stretta e allungata, coi lati piegati dalla curva della sfera, e un arco di luce sul bordo.

Lo scoppio

Una maschera con un cerchio nero che si allarga da un punto del bordo apre il buco; un cerchio uguale, tagliato dalla sagoma, è il bordo strappato che brilla. Ogni goccia parte quando il buco la raggiunge: con ease power1.in il raggio è proporzionale al tempo al quadrato, quindi il momento è la radice della sua distanza dal punto d’origine. Le gocce volano verso l’esterno e via dal buco, poi cadono. Le gocce sulle lettere scendono lungo le aste: su una canvas si disegna ogni lettera e si cerca la colonna con la striscia di inchiostro più lunga.

La regia e il tuo logo

Tutta l’entrata è una timeline sola, con le etichette start, blow, detach, float, pop, reveal, rest e timeScale per la velocità; la scena si ridisegna una volta per fotogramma dall’onUpdate della timeline. L’iridescenza che resta sulle lettere è un gruppo di macchie colorate con una maschera alfa che contiene un use del logo. Se IMAGE ha un indirizzo, il logo diventa quell’immagine; nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Opaline'`	Il logo scritto: cresce dentro la bolla e resta quando la bolla scoppia.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola.
`SHIMMER`	script.js	`1`	Quanto sono vivi i colori della pellicola: 0.3 calmi e pallidi, 2 accesi e veloci.
`HOVER`	script.js	`1`	Quanti secondi la bolla galleggia col logo dentro prima di scoppiare.
`DROPS`	script.js	`40`	Quante gocce volano via quando la bolla scoppia (più una nebbiolina fine).
`DRIPS`	script.js	`3`	Quante gocce cadono sul logo e ci scivolano giù (0 = nessuna).
`SPEED`	script.js	`1`	La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà.
`REST`	script.js	`4`	Quanti secondi il logo resta in mostra prima di ricominciare.
`LOOP`	script.js	`true`	Se si soffia una bolla nuova dopo il riposo. Con false il logo resta, respirando appena.

Provali nel Playground

Quando usarla

Per presentare un logo con leggerezza: l’apertura del sito di un marchio di cosmetici, saponi o profumi, di un negozio di giochi, di una festa o di un evento per bambini, di uno studio con un’identità delicata; l’anteprima per un cliente, un caricamento, un post per i social. Funziona con un marchio scritto e con un’immagine.

Sul telefono

La stessa animazione con le misure adattate: la bolla è larga quasi quanto lo schermo e il soffiatore entra dal basso a destra. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: la bolla ferma col logo dentro compare in dissolvenza, poi svanisce e lascia il logo, con l’iridescenza che si spegne. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.

Trappole

GSAP legge il transform già scritto su un elemento SVG e lo trasforma nei suoi x e y: una goccia messa al suo posto con translate e poi spostata con gsap.set(x) perdeva la posizione di partenza. Le gocce hanno le coordinate nei cerchi e GSAP sposta solo il gruppo.
Un arco SVG con il punto di arrivo uguale a quello di partenza non si disegna: quando la coda della bolla si è ritirata del tutto i due punti di tangenza coincidono in basso. Il tondo si disegna con due archi che passano dalla cima.
Un lampo bianco su tutta la bolla allo scoppio sembrava un disco di vetro rimasto lì: il lampo è solo l’anello che si allarga e il bordo strappato che brilla.
Il soffiatore durante il soffio non ha tempi propri: la sua posizione si calcola dal punto dell’anello nella sagoma della bolla (con la stessa scala e rotazione), altrimenti collo e anello si separavano nei tremolii.
Le gocce sulle lettere scivolano solo dove c’è inchiostro: ogni lettera si disegna su una canvas e si sceglie la colonna con la striscia piena più lunga. Le lettere tonde senza asta (o, e) non ricevono gocce; con un’immagine di un altro sito, che la canvas non può leggere, si usano colonne a distanza uguale.

Librerie

GSAP 3.15.0, Nunito (font variabile) 5.3.0.

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

Collaudo

Provata il 11 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.