Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
I passi a pillole
Scorri dentro l’anteprima
Un metodo in quattro passi in una sezione che resta ferma mentre si scorre: a ogni passo il testo cambia, il disegno esce a destra e il nuovo entra da lì, due stelle fanno tre giri, e nella barra di pillole quella del passo in corso si allarga fino a metà barra e si riempie mentre si scorre.
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>Pill steps</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/dm-serif-display@5.3.0/400-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bar">
<a class="brand" href="#">Greenfold Gardens</a>
<nav class="bar__nav" aria-label="Sections">
<a href="#">Gardens</a>
<a href="#">Method</a>
<a href="#">Contact</a>
</nav>
</header>
<section class="intro">
<h1 class="intro__title">Gardens that grow <em>with you.</em></h1>
<p class="intro__hint">Scroll through how we work.</p>
</section>
<!-- the steps: the section holds still while you scroll, and changes step every window height -->
<section class="steps" data-steps>
<div class="steps__inner">
<div class="copy">
<p class="copy__kicker">How we work</p>
<div class="copy__texts">
<div class="copy__text" data-text>
<h2>We <em>plan</em> on paper first.</h2>
<p>A visit, a tape measure and a cup of tea: we draw the garden you have, then the one you want, bed by bed.</p>
</div>
<div class="copy__text" data-text>
<h2>Then we <em>plant</em>, by hand.</h2>
<p>Native plants for the shade, hardy ones for the wind, and the soil turned before anything goes in.</p>
</div>
<div class="copy__text" data-text>
<h2>We come back to <em>tend</em>.</h2>
<p>Every season for the first two years: watering, pruning, and a list of what to watch out for.</p>
</div>
<div class="copy__text" data-text>
<h2>And you <em>harvest</em>.</h2>
<p>Beans in June, tomatoes in August, and a garden that by now knows how to look after itself.</p>
</div>
</div>
<!-- the pills: the step you are on is wide, the others narrow; inside each one a bar fills while you scroll its step -->
<div class="pills" role="list" aria-label="Steps">
<button class="pill" type="button" role="listitem" data-pill><i class="pill__fill" data-fill></i><span>Plan</span></button>
<button class="pill" type="button" role="listitem" data-pill><i class="pill__fill" data-fill></i><span>Plant</span></button>
<button class="pill" type="button" role="listitem" data-pill><i class="pill__fill" data-fill></i><span>Tend</span></button>
<button class="pill" type="button" role="listitem" data-pill><i class="pill__fill" data-fill></i><span>Harvest</span></button>
</div>
</div>
<div class="stage" aria-hidden="true">
<!-- the two stars that spin at every change -->
<svg class="star star--a" data-star viewBox="0 0 100 100"><path d="M50 2c5 24 14 33 38 38-24 5-33 14-38 38-5-24-14-33-38-38C36 35 45 26 50 2z" fill="#f2b84b"/></svg>
<svg class="star star--b" data-star viewBox="0 0 100 100"><path d="M50 2c5 24 14 33 38 38-24 5-33 14-38 38-5-24-14-33-38-38C36 35 45 26 50 2z" fill="#e2683c"/></svg>
<!-- plan: a sheet with the beds drawn on it, and a pencil -->
<svg class="art" data-art viewBox="0 0 400 400">
<g transform="rotate(-6 200 200)">
<rect x="70" y="60" width="260" height="290" rx="14" fill="#fbf6ea"/>
<rect x="96" y="90" width="92" height="62" rx="10" fill="#9bd18a"/>
<rect x="204" y="90" width="100" height="62" rx="10" fill="#58a36b"/>
<rect x="96" y="168" width="208" height="20" rx="10" fill="#e9dcc2"/>
<rect x="96" y="204" width="60" height="118" rx="10" fill="#58a36b"/>
<circle cx="214" cy="248" r="30" fill="#2f6b4f"/>
<circle cx="274" cy="282" r="22" fill="#9bd18a"/>
<path d="M96 336h208" stroke="#d9c7a4" stroke-width="3" stroke-dasharray="8 8"/>
</g>
<g transform="rotate(34 320 300)">
<rect x="300" y="190" width="26" height="170" rx="6" fill="#f2b84b"/>
<path d="M300 360h26l-13 30z" fill="#f3dcb0"/>
<path d="M309 380h8l-4 10z" fill="#2a2620"/>
<rect x="300" y="190" width="26" height="22" rx="6" fill="#e2683c"/>
</g>
</svg>
<!-- plant: a mound of soil, a seedling and a trowel -->
<svg class="art" data-art viewBox="0 0 400 400">
<ellipse cx="200" cy="300" rx="150" ry="46" fill="#8a5a3c"/>
<ellipse cx="200" cy="290" rx="120" ry="30" fill="#a8714b"/>
<path d="M200 290c0-60 4-100 0-140" fill="none" stroke="#2f6b4f" stroke-width="10" stroke-linecap="round"/>
<path d="M200 200c-40 0-70-20-80-56 40-4 72 14 80 56z" fill="#58a36b"/>
<path d="M202 170c34-6 64-32 70-66-38 0-66 22-70 66z" fill="#9bd18a"/>
<g transform="rotate(-28 300 220)">
<rect x="288" y="120" width="22" height="90" rx="10" fill="#e2683c"/>
<path d="M282 206h34l-4 70c-2 14-24 14-26 0z" fill="#b9c3c6"/>
</g>
</svg>
<!-- tend: a watering can with its drops -->
<svg class="art" data-art viewBox="0 0 400 400">
<g transform="rotate(-14 200 200)">
<path d="M120 150h150l-12 140c-2 16-14 26-30 26h-66c-16 0-28-10-30-26z" fill="#3f8ab0"/>
<path d="M270 190l80-56 10 14-74 64z" fill="#3f8ab0"/>
<rect x="340" y="120" width="34" height="22" rx="6" transform="rotate(-36 357 131)" fill="#2d6f90"/>
<path d="M140 150c0-50 36-70 64-70s64 20 64 70" fill="none" stroke="#2d6f90" stroke-width="16" stroke-linecap="round"/>
<rect x="120" y="150" width="150" height="20" fill="#2d6f90"/>
</g>
<g fill="#7cc4e6">
<path d="M330 220c8 14 12 22 12 28a12 12 0 0 1-24 0c0-6 4-14 12-28z"/>
<path d="M360 262c6 10 9 16 9 21a9 9 0 0 1-18 0c0-5 3-11 9-21z"/>
<path d="M318 290c6 10 9 16 9 21a9 9 0 0 1-18 0c0-5 3-11 9-21z"/>
</g>
<path d="M290 360c0-24 4-40 0-56M340 362c0-18 3-30 0-42" fill="none" stroke="#58a36b" stroke-width="8" stroke-linecap="round"/>
<path d="M290 330c-20 0-30-10-34-26 18-2 32 8 34 26zM340 338c16-2 26-12 28-26-16 0-26 10-28 26z" fill="#9bd18a"/>
</svg>
<!-- harvest: a basket with carrots and tomatoes -->
<svg class="art" data-art viewBox="0 0 400 400">
<path d="M120 150l24-50h22l-16 50zM280 150l-24-50h-22l16 50z" fill="#2f6b4f"/>
<path d="M150 150l-30-70 18-6 26 76zM248 150l14-74 18 4-16 70z" fill="#58a36b"/>
<path d="M120 140l40 118 14-118zM206 140l34 120 30-120z" fill="#e2683c"/>
<circle cx="196" cy="168" r="40" fill="#d43d2f"/>
<path d="M196 132l8 10 12-4-6 12 10 8-14 2-2 12-8-10-8 10-2-12-14-2 10-8-6-12 12 4z" fill="#58a36b"/>
<circle cx="272" cy="182" r="30" fill="#e8553f"/>
<path d="M70 180h260l-26 150c-4 18-18 30-36 30H132c-18 0-32-12-36-30z" fill="#c89257"/>
<path d="M84 220h232M92 260h216M100 300h200" stroke="#a87439" stroke-width="7"/>
<path d="M130 180l14 180M200 180v180M270 180l-14 180" stroke="#a87439" stroke-width="7"/>
<rect x="62" y="168" width="276" height="26" rx="13" fill="#b07a42"/>
</svg>
</div>
</div>
</section>
<section class="outro">
<h2 class="outro__title">Ready when <em>the soil is.</em></h2>
<a class="outro__link" href="#">Book a garden visit</a>
</section>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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.
42 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 «I passi a pillole» da Animorio e adattala al mio sitoCosa fa
La home di uno studio inventato che progetta giardini, Greenfold Gardens, su un fondo color carta. Dopo la frase «Gardens that grow with you.», la pagina si ferma su quattro passi: Plan, Plant, Tend, Harvest. A sinistra il titolo del passo, con un verbo in corsivo, due righe di testo e sotto una barra di quattro pillole; a destra un tondo verde chiaro con il disegno del passo: un foglio con le aiuole e una matita, una piantina con la paletta, un annaffiatoio con le gocce, un cesto di carote e pomodori. Ogni altezza di finestra di scorrimento è un passo: il testo vecchio sale e sparisce mentre il nuovo sale al suo posto, il disegno vecchio esce verso destra e il nuovo arriva da lì, due stelle intorno al tondo fanno tre giri, e nella barra la pillola del passo in corso si allarga fino a metà, scura e con il nome, mentre le altre si stringono. Dentro la pillola una barra verde si riempie da sinistra mentre si scorre il passo, e resta piena quando lo si lascia. Premendo una pillola si va al suo passo.
Come funziona
La sezione ferma
Uno ScrollTrigger tiene ferma la sezione per LENGTH altezze di finestra per ogni passo dopo il primo, più mezza. Il passo è il progresso per il numero dei passi, arrotondato in giù: cambia solo quando si attraversa il confine, e ogni cambio fa partire dei tween.
Il testo
I quattro testi stanno uno sopra l’altro nella stessa cella di una griglia, così la sezione non salta quando cambiano. Quello che se ne va sale di 20 pixel e sparisce in 0,3 secondi; il nuovo arriva da 24 pixel più in basso in 0,55, con power3.out, un attimo dopo.
Il disegno
I disegni sono quattro SVG uno sopra l’altro. Quello che se ne va scivola di SLIDE pixel verso destra sparendo, con power2.in; il nuovo arriva dalla stessa distanza in 0,75 secondi con power3.out. Sono i 400 pixel dell’originale, dove però l’unicorno compare sul posto e solo per uscire scivola a destra.
Le stelle
A ogni cambio le due stelle girano di SPIN gradi, 1080 come sul sito, in 1,1 secondi con power2.inOut, una in un verso e una nell’altro, e intanto ripartono da 0,6 della loro misura con un piccolo rimbalzo.
Le pillole
La larghezza delle pillole è in percentuale della barra: WIDE per quella del passo in corso, NARROW per le altre, in PILLS secondi con expo.in, come l’originale (49%, 15%, mezzo secondo). Il nome compare nella pillola larga quando ha finito di allargarsi. Dentro ogni pillola una barra ha la scala orizzontale legata allo scorrimento: piena per i passi alle spalle, vuota per quelli davanti, e per il passo in corso tanto piena quanto se n’è scorso. Una pillola premuta fa scorrere la pagina al centro del tratto del suo passo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WIDE | script.js | 49 | La larghezza della pillola del passo in corso, in percentuale della barra. |
NARROW | script.js | 15 | La larghezza delle altre pillole, in percentuale. |
PILLS | script.js | 0.5 | I secondi che impiegano le pillole a cambiare. |
SLIDE | script.js | 400 | Da quanto lontano a destra arrivano e verso dove se ne vanno i disegni, in pixel. |
SPIN | script.js | 1080 | Di quanto girano le stelle a ogni cambio, in gradi. |
LENGTH | script.js | 1 | Quanto scorrimento serve per ogni passo, in altezze di finestra. |
Quando usarla
Per un metodo, un percorso o un servizio a tappe: quattro passi brevi, ognuno con il suo disegno. Con più di cinque passi le pillole strette diventano troppo piccole e la sezione troppo lunga.
Sul telefono
Il disegno va sopra e il testo sotto, il titolo è più piccolo e le pillole più basse. Scorrere col dito cambia passo come la rotella, e le pillole si possono toccare.
Con il movimento ridotto
Niente scivolate e niente giri: testo e disegno cambiano in dissolvenza, le stelle stanno ferme e le pillole cambiano larghezza di colpo. La barra dentro le pillole segue comunque lo scorrimento: dice a che punto sei, non è un movimento in più.
Trappole
- Le larghezze sono percentuali della barra: con 49 e tre volte 15 restano 6 punti per gli spazi fra le pillole. Con più passi i due numeri vanno ridotti, o la barra trabocca.
- Scorrendo in fretta si attraversano più passi in un attimo: ogni tween del cambio usa overwrite, altrimenti quelli del passo prima e quelli del passo dopo si contendono gli stessi elementi.
- Per andare a un passo dalla sua pillola si scorre al centro del suo tratto, non al suo inizio: sul confine il passo cambierebbe avanti e indietro.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, DM Serif Display 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,3 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 2 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.
