Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo che trova la bolla
Intro di un marchio nello stile minimal, presa da una livella a bolla: una trave sottile si disegna storta sulla pagina, con sotto la fiala e la bolla vermiglia spinta in alto. Le lettere del nome cadono sulla trave una alla volta, strette e leggere, e scivolano giù fino a urtarsi in fondo. Poi la trave oscilla: le lettere risalgono e si distribuiscono, la trave si assesta su una molla finché la bolla sta fra le due tacche, e il nome, finalmente in bolla, prende peso e larghezza; la lettura sotto dice 0.0°.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The logo that finds the bubble</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-stage>
<p class="marca">Trueline <span>Surveying instruments</span></p>
<h1 class="sr" data-label>Trueline</h1>
<!-- the spirit level: a thin beam with the name standing on it and the vial with its bubble underneath; the whole
group tilts until the bubble sits between the two marks -->
<div class="banco" data-bench aria-hidden="true">
<div class="livella" data-level>
<div class="parola" data-word></div>
<span class="trave" data-beam>
<span class="trave__tacca trave__tacca--a" data-end></span>
<span class="trave__tacca trave__tacca--b" data-end></span>
</span>
<span class="fiala" data-vial>
<span class="fiala__segno fiala__segno--a" data-mark></span>
<span class="fiala__segno fiala__segno--b" data-mark></span>
<span class="bolla" data-bubble><span class="bolla__luce"></span></span>
</span>
</div>
<p class="lettura" data-readout><span data-readout-label>Tilt</span> <span class="lettura__valore" data-readout-value>0.0°</span></p>
</div>
<p class="motto" data-tagline>Every line, true.</p>
<button class="pillola" type="button" data-replay>
<span class="pillola__scritta" data-testo="Replay">Replay</span>
</button>
</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.
25 valori da cambiare
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 che trova la bolla» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo. Dal centro si disegna una trave sottile, già storta di sette gradi, con due tacche alle estremità; sotto compare la fiala della livella, di vetro, con due segni nel mezzo e la bolla vermiglia schiacciata verso l’estremità alta, e sotto ancora la lettura dell’inclinazione. Le lettere di Trueline cadono sulla trave una dopo l’altra, strette e leggere: toccando si schiacciano un attimo, si piegano sul pendio, poi scivolano giù accelerando e si fermano contro la lettera prima con un piccolo colpo, un pixel indietro e di nuovo giù. Quando sono tutte ammucchiate in fondo, la trave oscilla dall’altra parte: le lettere risalgono, la prima a partire è quella più a destra, e si distribuiscono ognuna al suo posto prendendo peso e larghezza; la trave si assesta su una molla, la bolla la segue con un piccolo ritardo allungandosi quando corre e si ferma fra i due segni. In quell’istante il nome è in bolla: ogni lettera fa un piccolo cenno, dal centro verso i lati, la trave vibra, i segni della fiala lampeggiano in vermiglio e la lettura passa da Tilt a Level 0.0° in vermiglio. Arrivano il motto e il tasto Replay. Dopo, il puntatore (o il dito che trascina) inclina appena la trave e le lettere scivolano un poco verso il basso; lasciata, torna in bolla con una molla. Dopo una pausa l’entrata ricomincia da sola.
Come funziona
Un angolo solo per tutta la livella
Trave, parola e fiala stanno in un gruppo che ruota attorno al centro: GSAP anima solo un numero, l’angolo, e ogni fotogramma lo scrive sul gruppo. La bolla va dalla parte opposta di quanto il gruppo è inclinato, con un piccolo ritardo calcolato a ogni fotogramma, e si allunga un poco mentre corre.
Le lettere misurate due volte
Ogni lettera viene misurata stretta e leggera (wdth 70, wght 260) e larga e pesante (wdth 100, wght 760). Dalle prime misure viene il mucchio in fondo alla trave, dalle seconde il posto finale, centrato. Le lettere cadono sul loro posto, poi scivolano al mucchio con power2.in, che accelera come su un piano inclinato, e rimbalzano di un pixel.
Lo spostamento e il peso insieme
Quando la trave oscilla, un secondo numero, s, va da 0 a 1: ogni lettera sta fra il mucchio e il suo posto in proporzione a s, con un piccolo ritardo diverso per ognuna, e prende peso e larghezza nella stessa proporzione, così non si urtano mai mentre si allargano. L’angolo torna a zero con elastic.out: la trave si assesta e la bolla si ferma fra i segni.
In bolla, e poi da toccare
Il cenno delle lettere parte dal centro verso i lati, i segni della fiala lampeggiano e la lettura diventa Level 0.0°. Dopo, la posizione orizzontale del puntatore inclina la trave di qualche grado con quickTo e le lettere scivolano verso il basso; al rilascio tutto torna a zero con una molla. Col movimento ridotto il marchio compare già in bolla, in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Trueline' | Il nome: corto, da sei a nove lettere. |
TILT | script.js | 7 | Di quanti gradi è storta la trave all’inizio. |
DROP_GAP | script.js | 0.08 | Secondi fra una lettera che cade e la successiva. |
SETTLE | script.js | 1.7 | In quanti secondi la trave si assesta sulla molla. |
LIGHT | script.js | 260 | Il peso delle lettere mentre scivolano. |
HEAVY | script.js | 760 | Il peso delle lettere in bolla. |
NARROW | script.js | 70 | La larghezza (asse wdth) mentre scivolano. |
WIDE | script.js | 100 | La larghezza in bolla. |
NUDGE | script.js | 2.5 | Di quanti gradi il puntatore può inclinare la trave alla fine. |
HOLD | script.js | 3 | Quanti secondi resta il marchio finito prima che l’entrata ricominci. |
SPEED | script.js | 1 | 2 è il doppio più veloce, 0.5 la metà. |
Quando usarla
Per l’apertura del sito di chi fa strumenti di misura, di un geometra, di uno studio di architettura o di un’impresa edile, il caricamento di un marchio di una parola, la presentazione di un prodotto che deve sembrare preciso.
Sul telefono
La stessa animazione: il nome e la trave sono più piccoli, e alla fine la trave si inclina trascinando il dito di lato.
Con il movimento ridotto
Niente cade né scivola: il marchio compare già in bolla, con la trave, la fiala e la lettura a 0.0°, in dissolvenza; poi il motto e il tasto Replay.
Trappole
- Le lettere cambiano larghezza mentre si spostano: se il posto e il peso andassero ognuno per conto suo si sovrapporrebbero. Tutte e due dipendono dallo stesso numero, e il mucchio è misurato con le lettere strette.
- GSAP anima numeri su oggetti semplici e un solo giro di disegno a ogni fotogramma scrive trasformazioni e assi: così il transform della lettera e quello del suo figlio (lo schiacciamento) non si cancellano.
- Il tasto Replay e il giro automatico partono solo a entrata finita, e il giro aspetta se si sta trascinando la trave.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 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.
