Le cornici dell’appartamento

Scroll, Immagini, TransizioniGSAP, Solo CSSMediaPeso compresso: Demo 7,7 KBGSAP + ScrollTrigger 45 KBGratisScarica lo zip

Scorri dentro l’anteprima

Scorrendo, una fila di barre color crema si ritira come i denti di un pettine, poi la foto di una casa cresce fino allo schermo intero mentre due cornici verdi crescono più in fretta intorno a lei; a metà strada le case cominciano a cambiare da sole.

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 frames of the apartment</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-condensed@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the projects of a made-up interior studio. Scrolling, a row of cream bars pulls back from the green, the picture
       of a home grows from small to the whole screen, and two green frames grow faster around it, like rooms opening
       one inside the other. When the picture is big enough, the homes start changing on their own -->
  <main>
    <section class="apertura">
      <p class="etichetta">Selected homes</p>
      <h1 class="apertura__titolo">Five rooms,<br>one quiet idea.</h1>
      <p class="apertura__testo">Each home is drawn around how it will be lived in, then finished down to the last hinge. Scroll to step inside.</p>
    </section>

    <section class="case" data-case>
      <div class="scacchi" data-scacchi aria-hidden="true"></div>
      <div class="palco">
        <div class="cornice cornice--lontana" data-cornice="lontana" aria-hidden="true"></div>
        <div class="cornice cornice--vicina" data-cornice="vicina" aria-hidden="true"></div>

        <div class="vetrina" data-vetrina>
          <article class="casa" data-casa>
            <div class="casa__stanza" data-stanza="11"></div>
            <div class="casa__velo" data-velo></div>
            <div class="casa__maschera"><h2 class="casa__nome" data-nome>Calle Olmo<br>Apartment</h2></div>
            <ul class="casa__dati" data-dati>
              <li><span class="dato"><small>Delivered</small><span>in 58 days</span></span></li>
              <li><span class="dato"><small>Area</small><span>132 m<sup>2</sup></span></span></li>
              <li><span class="dato"><small>City</small><span>Seville, Spain</span></span></li>
            </ul>
          </article>
          <article class="casa" data-casa>
            <div class="casa__stanza" data-stanza="27"></div>
            <div class="casa__velo" data-velo></div>
            <div class="casa__maschera"><h2 class="casa__nome" data-nome>Ribera<br>Loft</h2></div>
            <ul class="casa__dati" data-dati>
              <li><span class="dato"><small>Delivered</small><span>in 74 days</span></span></li>
              <li><span class="dato"><small>Area</small><span>96 m<sup>2</sup></span></span></li>
              <li><span class="dato"><small>City</small><span>Valencia, Spain</span></span></li>
            </ul>
          </article>
          <article class="casa" data-casa>
            <div class="casa__stanza" data-stanza="45"></div>
            <div class="casa__velo" data-velo></div>
            <div class="casa__maschera"><h2 class="casa__nome" data-nome>Patio Nueve<br>House</h2></div>
            <ul class="casa__dati" data-dati>
              <li><span class="dato"><small>Delivered</small><span>in 103 days</span></span></li>
              <li><span class="dato"><small>Area</small><span>210 m<sup>2</sup></span></span></li>
              <li><span class="dato"><small>City</small><span>Granada, Spain</span></span></li>
            </ul>
          </article>

          <nav class="nomi" data-nomi aria-label="Homes">
            <button type="button" data-vai="0">Calle Olmo</button>
            <button type="button" data-vai="1">Ribera</button>
            <button type="button" data-vai="2">Patio Nueve</button>
          </nav>
          <div class="piede" data-piede>
            <a class="tasto tasto--scuro" href="#">View home</a>
            <a class="tasto" href="#">All homes</a>
          </div>
        </div>
      </div>
    </section>

    <section class="chiusura">
      <p class="etichetta">Next</p>
      <h2 class="apertura__titolo">Calm by design.</h2>
    </section>
  </main>

  <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.

58 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 «Le cornici dell’appartamento» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

I progetti di uno studio d’interni inventato. Dopo una pagina crema arriva una sezione verde, e mentre arriva una fila di barre crema, una alta e una bassa a turno, si ritira verso l’alto come un pettine. Poi lo schermo si ferma e lo scorrimento lavora dentro: la foto di una casa, Calle Olmo Apartment, cresce da due terzi allo schermo intero, e dietro di lei due cornici verdi, partite dalla stessa misura, crescono più in fretta. Per un tratto si vede la casa dentro una cornice dentro un’altra cornice, come stanze in infilata. A metà strada il nome della casa scende al suo posto da dietro un bordo, i dati arrivano di lato, compaiono i nomi delle tre case e i due pulsanti, che scendono, e la foto si scurisce. Da lì le case cambiano da sole ogni cinque secondi: la nuova entra da destra sopra la vecchia. Tornando su, sotto quel punto, si fermano sulla prima.

Come funziona

Il pettine

In cima alla sezione verde c’è una fila di BARS barre color crema. Una timeline con ScrollTrigger, da quando la sezione entra dal fondo a quando la sua cima è al 35% dello schermo, con scrub SCRUB, porta a zero l’altezza delle barre: le une partono da TALL centesimi dello schermo, le altre da SHORT, con la stessa curva EASE.

Tre pezzi dalla stessa misura

Il palco è sticky e alto 100lvh. Dentro, la cornice lontana, la cornice vicina e la vetrina con la casa sono grandi quanto il palco, e partono tutte a scale START. Una seconda timeline, da quando la cima della sezione è mezzo schermo sopra lo schermo fino alla fine, porta la lontana a FAR in 3 tempi, la vicina a NEAR un decimo dopo e la vetrina a 1 due decimi dopo: crescendo a velocità diverse, le cornici spuntano una dopo l’altra intorno alla casa.

Il nome, i dati e i pulsanti

Il nome sta dentro una maschera con overflow: hidden e parte da yPercent: -120 e 40 pixel a destra; ogni dato sta nella sua maschera e parte da -85% e 40 pixel a sinistra. Tutti arrivano a mezzo tempo, in un tempo. A 1 compaiono di colpo i nomi delle case e i pulsanti, che scendono di 48 pixel in due tempi; a 1,5 compare il velo scuro sulla foto.

Le case che cambiano

Il callback onUpdate guarda a che punto è lo scorrimento: sopra UNLOCK_AT le case si sbloccano e un gsap.delayedCall porta alla successiva ogni EVERY secondi; sotto, si bloccano e tornano alla prima senza animazione. Il cambio è un clip-path da inset(0 0 0 100%) a zero in SPEED secondi, con la stanza nuova che intanto torna da 1,08 a 1. I nomi in basso portano a una casa e fanno ripartire il conto.

Le stanze

Le case sono disegni SVG fatti dallo script da un numero: muro, pavimento, finestra con il giardino, la luce sul pavimento, divano, quadro, lampada e pianta, con i colori presi da poche tavolozze calde. Al telefono il disegno tiene divano, lampada e finestra vicino al centro, perché la vetrina alta ne mostra solo una fetta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`START`	script.js	`0.65`	Da che misura partono foto e cornici (nel sito 0,65).
`FAR`	script.js	`1.5`	Dove arriva la cornice lontana (nel sito 1,5).
`NEAR`	script.js	`1.25`	Dove arriva la cornice vicina (nel sito 1,25).
`SCRUB`	script.js	`0.8`	Quanto ci mette l’animazione a raggiungere lo scorrimento (nel sito 0,8).
`EASE`	script.js	`'power2.inOut'`	La curva di ogni passo (nel sito power2.inOut).
`TALL`	script.js	`65`	Le barre alte, in centesimi dello schermo (nel sito 65 e 25).
`UNLOCK_AT`	script.js	`0.48`	Da dove le case cambiano da sole (nel sito 1,5 su 3,12).
`EVERY`	script.js	`5`	I secondi fra una casa e l’altra (nel sito 5).
`SPEED`	script.js	`0.6`	Quanto dura il cambio (nel sito 0,6).

Provali nel Playground

Quando usarla

Per mostrare i progetti di uno studio, gli appartamenti di un costruttore, le camere di un albergo: il momento in cui una foto diventa protagonista e poi lascia posto alle sorelle.

Sul telefono

Uguale: la vetrina è alta come lo schermo, il nome sta in alto, i dati in fila sopra i pulsanti, che si allargano su tutta la riga.

Con il movimento ridotto

Le cornici e la foto sono già al loro posto, senza pettine né crescita; le case cambiano da sole con una dissolvenza.

Trappole

Le cornici devono essere sorelle della vetrina, non sue madri: con la vetrina dentro la cornice, la scala della cornice si moltiplica con la sua e la foto diventa enorme.
Il nome che scende da -120% si vede sopra la foto se non sta in una maschera; e ogni dato vuole la sua, perché un dato che sale dell’85% finisce sopra quello di prima.
Il cambio di casa va bloccato anche quando si torna su a metà di un cambio: si porta il cambio alla fine con progress(1) prima di tornare alla prima, o restano due case mezze tagliate.
Le altezze del pettine in centesimi dello schermo vanno date come funzioni con invalidateOnRefresh, o ruotando il telefono restano quelle di prima.

Librerie

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Instrument Serif 5.3.0, Roboto Condensed (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,7 KB; le librerie: GSAP + ScrollTrigger 45 KB.

Collaudo

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