Logo Studio Riviello

Il sito deve avere la stessa cura del progetto.

Cliente

Studio Riviello

Industry/Mercati

Servizi

Anno

2025

Servizi attivati

Sito Web · Animazioni GSAP

Cover — Il sito deve avere la stessa cura del progetto.

[ 01. OVERVIEW ]

Un sito animato per uno studio di architettura d'autore.

Studio Riviello è uno studio di architetti associati a Roma che lavora su residenziale e commerciale di fascia alta, con progetti che attraversano anche Parigi. Per uno studio che vende progettazione su misura, il sito non è un accessorio commerciale: è esso stesso un progetto. L'obiettivo era costruire un'esperienza digitale in cui il movimento, la sequenza e i transitori tra scene raccontassero l'attenzione al dettaglio che lo studio porta sui suoi cantieri. Abbiamo sviluppato il sito usando GSAP come motore di animazione, progettando transizioni, parallax e micro-interazioni che dessero al portfolio un ritmo cinematografico senza compromettere prestazioni e accessibilità.

[ HIGHLIGHTS ]

Highlights.

Animazioni GSAP al servizio del progetto, non al contrario

Le animazioni di un sito d'architettura possono cadere in due errori opposti: assenza totale, che appiattisce il racconto visivo, o eccesso decorativo che distrae dal progetto. Abbiamo usato GSAP — ScrollTrigger, timeline, micro-interazioni — dove serviva enfatizzare un passaggio narrativo (apertura di un progetto, rivelazione di un dettaglio, hover su una scheda) lasciando il resto alle immagini degli scatti architettonici.

Portfolio come archivio navigabile

Le pagine progetto sono il cuore del sito. Le abbiamo strutturate come archivi visivi — sequenze di immagini gerarchizzate, testi brevi di contesto, nessuna interfaccia inutile — con transizioni tra un progetto e l'altro che mantengono il visitatore nell'esperienza senza costringerlo a ricaricare. Il sito si comporta come un book, non come un database.

Performance curata quanto l'estetica

GSAP permette animazioni complesse, ma una cattiva implementazione può rendere un sito pesante su mobile o lento al primo caricamento. Abbiamo lavorato sul lazy-loading delle immagini ad alta risoluzione, sulla priorità degli asset above-the-fold e sulla separazione tra animazioni critiche (caricate subito) e animazioni di dettaglio (caricate su richiesta), mantenendo il sito rapido senza rinunciare alla resa visiva.

Progetti correlati

Potrebbe interessarti.