La ricerca che si apre

Ricerca, Transizioni, TestoGSAPImpegnativaPeso compresso: Demo 6,7 KBGSAP 28 KBGratisScarica lo zip

Un cerchio con la lente che si apre in un campo di ricerca: mentre si scrive i luoghi sotto si filtrano, le righe che restano scivolano al loro posto, le altre se ne vanno, le lettere trovate si accendono e una fascia segue le frecce.

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 opening search</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the search: a round button with a lens that opens into a field. Typing, the places below filter as you
         go: the rows that stay slide to their new places, the others leave, the letters found are lit, and a band
         follows the arrow keys or the pointer. The rows are made by the script -->
    <div class="find" data-find data-autoclic>
      <div class="find__bar" data-bar>
        <button class="find__open" type="button" aria-label="Search destinations" aria-expanded="false" data-open>
          <svg viewBox="0 0 24 24" aria-hidden="true" data-lens><path d="M10.5 4.5a6 6 0 1 0 0 12a6 6 0 1 0 0-12zM15 15l4.5 4.5"/></svg>
        </button>
        <input class="find__input" type="search" role="combobox" aria-label="Search destinations" aria-expanded="false" aria-controls="find-list" aria-autocomplete="list" autocomplete="off" autocapitalize="off" spellcheck="false" enterkeyhint="go" tabindex="-1" data-input>
        <span class="find__hint" aria-hidden="true" data-hint><span data-hint-in>Search destinations</span></span>
        <button class="find__close" type="button" aria-label="Close the search" tabindex="-1" data-close>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg>
        </button>
      </div>
      <div class="find__panel" data-panel>
        <span class="find__pick" aria-hidden="true" data-pick></span>
        <ul class="find__list" id="find-list" role="listbox" aria-label="Destinations" data-list></ul>
        <p class="find__none" data-none></p>
      </div>
      <p class="sr" role="status" aria-live="polite" data-said></p>
    </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.

51 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 «La ricerca che si apre» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un cerchio scuro con una lente. Premuto, il cerchio si allunga in un campo a pillola, la lente fa un piccolo giro, in fondo compare una crocetta e il campo vuoto dice Search destinations, poi da solo propone Try “Kyoto”, Try “Porto” e Try “Tallinn”, ogni volta scorrendo. Scrivendo, sotto si apre un pannello coi luoghi che contengono quelle lettere, prima quelli il cui nome comincia così, e le lettere trovate sono verde lime, nel nome o nel paese. A ogni lettera il pannello si allunga o si accorcia, le righe che restano scivolano al posto nuovo, quelle che non valgono più scivolano via svanendo e le nuove entrano dall’alto. Una fascia grigia sta sulla prima riga e segue le frecce o il puntatore; Invio o un clic scelgono il luogo, che va nel campo mentre il pannello si chiude e il campo fa un piccolo sobbalzo. Se nulla corrisponde il pannello dice No places match e le lettere scritte. Esc svuota il campo e, a campo vuoto, lo richiude nel cerchio.

Come funziona

Dal cerchio al campo

Il campo è largo 56 pixel da chiuso e si allarga fino a WIDTH in OPEN secondi con expo.out; il testo e la crocetta compaiono un poco dopo, la lente gira di 90 gradi e torna (yoyo), e il fuoco va nel campo. Chiudendo, tutto si stringe di nuovo e il fuoco torna sulla lente.

La ricerca

search() cerca le lettere nel nome e nel paese senza badare a maiuscole e accenti, mette prima i nomi che cominciano così e ne tiene al massimo SHOWN; lit() avvolge in un mark le lettere trovate. È la sola funzione da cambiare per chiedere i risultati a un server.

Le righe che si muovono

Le righe restano le stesse per ogni luogo (una Map). Prima di cambiarle lo script misura dove sono: quelle che se ne vanno escono dal flusso al loro posto (misurate tutte prima di spostarne una) e scivolano via; quelle che restano partono da dove erano e scivolano al posto nuovo; le nuove entrano un attimo dopo. Il pannello si allunga o si accorcia fino alla misura della lista.

La fascia

La fascia è un elemento solo che scivola sulla riga scelta (52 pixel per riga). Il campo ha role combobox e aria-activedescendant sulla riga scelta, che ha aria-selected; le frecce la spostano, Invio sceglie, Esc svuota e poi chiude.

Suggerimenti e anteprima

A campo vuoto il suggerimento cambia ogni 2,4 secondi, fra quelli di TRIES. Un clic da script (detail 0, l’anteprima della libreria) manda avanti la ricerca di un passo: la apre e scrive lis una lettera alla volta, poi sceglie il luogo trovato, poi la richiude.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WIDTH`	script.js	`520`	Quanto si apre al massimo il campo, in pixel.
`OPEN`	script.js	`0.6`	I secondi in cui il cerchio si apre nel campo.
`SHOWN`	script.js	`6`	Quanti luoghi mostra al massimo il pannello.
`TRIES`	script.js	`['Search destinations', 'Try “Kyoto”', 'Try “Porto”', 'Try “Tallinn”']`	Quello che propone il campo vuoto, a turno.
`PLACES`	script.js	`[['Lisbon', 'Portugal'], ['Lyon', 'France'], …]`	I luoghi in cui cercare: nome e paese.

Provali nel Playground

Quando usarla

Per la ricerca di un sito, di un negozio o di un catalogo, per scegliere una città, un prodotto o una persona da un elenco: ovunque si cerca mentre si scrive.

Sul telefono

Il campo si apre fino alla larghezza dello schermo meno un margine; il testo è di 17 pixel, così iPhone non ingrandisce la pagina toccandolo, e la tastiera mostra Vai. Le righe si toccano per scegliere.

Con il movimento ridotto

Il campo si apre e si chiude di colpo, la lente non gira, i suggerimenti non scorrono, le righe compaiono e spariscono senza scivolare e la fascia salta da una riga all’altra.

Trappole

Le righe che se ne vanno vanno misurate tutte prima di toglierne una dal flusso: misurate una alla volta, ogni misura terrebbe conto di quella già tolta e finirebbero tutte nello stesso posto.
Una riga che stava ancora scivolando dal cambio di prima va misurata senza la sua scivolata in corso (gsap.getProperty della y), o ripartirebbe con un piccolo salto.
Scelto un luogo, il campo contiene «Lisbon, Portugal»: cercato com’è non troverebbe niente e direbbe No places match. Lo script ricorda che è stata una scelta e non cerca finché non si scrive di nuovo.
Chiusa la ricerca il fuoco torna sulla lente, ma dopo un tocco Safari ne mostrerebbe il contorno: lo script ricorda se l’ultimo gesto era del dito, del mouse o dei tasti (data-using sull’html) e il contorno si vede solo coi tasti.

Librerie

GSAP 3.15.0, Onest (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,7 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.