Il ventaglio di foto che sale

Intro, ImmaginiGSAPMediaPeso compresso: Demo 5,5 KBGSAP 28 KBGratisScarica lo zip

Intro in stile minimal per il sito di un fotografo di moda: cinque stampe salgono una alla volta su un arco, sempre più inclinate verso i lati, e si posano con un pixel di cedimento; sotto, una parola dice il genere di lavoro. Poi le stampe se ne vanno sfocandosi e al loro posto si compone il nome dello studio.

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>Velure, the opening fan of photos</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a fashion photographer's site: five prints rise one at a time onto an arc while the word below
       names each kind of work, then the prints go soft and the name of the studio is set in their place -->
  <main class="stage" data-stage aria-label="Velure, fashion photography. Five prints rise onto an arc, then the studio name appears.">
    <div class="fan" data-fan aria-hidden="true"></div>

    <div class="caption" data-caption aria-hidden="true">
      <div class="word" data-word></div>
      <div class="rule" data-rule><span class="rule-mark" data-mark></span></div>
    </div>

    <div class="brand" data-brand>
      <h1 class="brand-name" data-brand-name></h1>
      <p class="brand-line" data-brand-line></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.

39 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 ventaglio di foto che sale» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina bianco caldo, vuota. Sotto il centro si allunga un filo sottile con cinque tacche. Poi, una alla volta da destra a sinistra, cinque stampe con il bordo bianco salgono dal basso al loro posto su un arco: la più alta sta dritta in mezzo, le altre scendono verso i lati sempre più inclinate, fino a 23 gradi. Ogni stampa arriva un po’ più piccola e trasparente, sale con una frenata morbida, supera il suo posto di un pixel e ci torna; dentro ha solo un campo di colore con una luce morbida e la linea dove il fondale dello studio incontra il pavimento, e in basso il nome della serie, Linen, Chalk, Rouge, Noir, Silk. Una sola è vermiglia. A ogni stampa la parola grande sotto cambia: la vecchia sale e sparisce, la nuova arriva da sotto lettera per lettera prendendo peso (Editorial, Beauty, Campaigns, Portraits, Music), e un segno vermiglio cammina sul filo fino alla tacca giusta. A ventaglio completo tutto sta fermo un momento; poi le stampe si staccano una dopo l’altra, da destra a sinistra, salendo appena, il ventaglio si sfoca e svanisce, il filo si ritira, e al centro si compone dal mezzo verso i lati il nome dello studio, Velure, con sotto la riga Fashion photography che si stringe. Dopo un respiro il nome se ne va e si ricomincia.

Come funziona

I posti sull’arco

Le cinque stampe hanno un posto ciascuna, scritto come frazione della larghezza e dell’altezza dello schermo, con una rotazione e una scala: in mezzo 0,5 e 0,19, dritta, scala 0,9; ai lati fino a 0,22 e 0,78, inclinate di 23 gradi, scala 0,8. Sono i posti del sito da cui viene l’idea, con una seconda serie per gli schermi stretti o bassi, dove l’arco scende e si stringe. L’altezza di una stampa è una parte dell’altezza dello schermo per la sua scala. Ogni stampa sta in uno slot che lo script mette al suo posto in pixel; dentro, la stampa vera è quella che muove GSAP, così il ricalcolo al resize non cancella il movimento.

La salita con un pixel di troppo

Le stampe salgono nell’ordine del sito, da destra a sinistra, posto per posto: la prima subito, poi una ogni 0,87 secondi. Ognuna parte spostata in basso di un quarto della sua altezza, a scala 0,88 e trasparente, e in 0,527 secondi con power3.out arriva un niente oltre il posto, meno 0,9 per cento e scala 1,006; poi in 0,38 secondi con sine.inOut si posa. L’opacità arriva un po’ prima della fine della salita.

La parola e il segno sul filo

Le cinque parole sono già nella pagina, una sopra l’altra, ognuna divisa in lettere dentro una fascia che taglia quello che esce. A ogni stampa la parola vecchia sale via con power2.in e la nuova sale da sotto con expo.out, una lettera ogni tre centesimi, passando dal peso 200 al 380 di Fraunces variabile. Il segno vermiglio sul filo è un numero da 0 a 4 animato da GSAP: a ogni aggiornamento diventa una posizione in percento, così non dipende dalla larghezza.

L’uscita nella sfocatura

Come sul sito, ogni stampa si stacca con un ritardo di (0,04 più 0,11 per la sua posizione) diviso 1,1: in 0,2545 secondi con power2.in sfuma, sale e scende a scala 0,97. Intanto tutto il ventaglio va a opacità zero e a blur di 8 pixel in 0,6545 secondi con power2.inOut, partendo dopo 0,164 secondi. Il nome dello studio si compone dal centro verso i lati con expo.out e passa dal peso 200 al 520; la riga sotto si stringe da 0,4 a 0,22 em di spaziatura.

Una timeline sola

Tutta la regia è una timeline GSAP con repeat -1: all’inizio di ogni giro una serie di set rimette stampe, parole, filo e nome al punto di partenza, quindi il giro ricomincia sempre uguale. Con il movimento ridotto la stessa timeline usa solo dissolvenze: niente salita, niente scala, niente sfocatura.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PRINTS`	script.js	`[{ name: 'Linen', … }, …]`	Le cinque stampe da destra a sinistra, nell’ordine in cui salgono: il nome della serie, i due toni del campo e dove sta la linea del pavimento.
`WORDS`	script.js	`['Editorial', 'Beauty', 'Campaigns', 'Portraits', 'Music']`	Una parola per ogni stampa, nell’ordine in cui salgono.
`BRAND`	script.js	`'Velure'`	Il nome dello studio che prende il posto delle stampe.
`BRAND_LINE`	script.js	`'Fashion photography'`	La riga piccola sotto il nome.
`STEP`	script.js	`0.87`	I secondi fra una stampa e la successiva (sul sito 0,96 diviso 1,1).
`RISE`	script.js	`0.527`	I secondi della salita di una stampa sull’arco.
`SIZE`	script.js	`0.27`	Quanto è alta una stampa, in parte dell’altezza dello schermo.
`BLUR`	script.js	`8`	Quanto si sfoca il ventaglio uscendo, in pixel.
`HOLD`	script.js	`1.6`	I secondi in cui il ventaglio completo sta fermo prima di staccarsi.

Provali nel Playground

Quando usarla

Per l’apertura del sito di un fotografo, di uno studio di moda, di una rivista o di un’agenzia di modelle: un caricamento che mostra subito il lavoro e dice i generi in cui è diviso, poi lascia il posto al nome. Anche per la prima schermata di un portfolio di immagini o di una collezione.

Sul telefono

La stessa animazione con l’arco del telefono, come sul sito: le stampe ai lati scendono più in basso e il ventaglio si stringe, la parola e il nome si misurano anche sull’altezza, così tutto sta nella casella.

Con il movimento ridotto

Niente si sposta e niente si sfoca: le stampe compaiono in dissolvenza una dopo l’altra, le parole si scambiano sfumando, poi il ventaglio svanisce e il nome compare in dissolvenza.

Trappole

Se il posto della stampa e la sua salita stanno sullo stesso elemento, il transform di GSAP cancella quello scritto dal layout: lo slot ha il posto e la rotazione, la stampa dentro ha solo la salita, in percento della sua altezza.
Il segno sul filo animato in pixel restava indietro quando la finestra cambiava misura: si anima un numero da 0 a 4 e si scrive come percento a ogni aggiornamento.
Una timeline che si ripete deve rimettere tutto a posto da sola: i set all’inizio del giro, al tempo zero, valgono anche per i giri dopo.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

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

Collaudo

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