Galleria cubo 3D da CMS allo scroll in Webflow

È il build più ambizioso della serie: una galleria cubica interamente guidata dal CMS dove le immagini si dissolvono l’una nell’altra mentre un vero cubo 3D ruota e viaggia nello spazio mentre scorri. Sembra qualcosa che Webflow “non può fare” — e si compone da pezzi che già conosci: un’interazione scroll scrubbed, transform guidati dal CMS, split text e un po’ di CSS 3D.

Dato che è impegnativo, questo companion si concentra sul modello mentale — le quattro idee che lo fanno funzionare — invece che su ogni click. Abbinalo al cloneable e all’articolo di Codrops per costruire insieme.

Come funziona

La distanza di scroll diventa tempo di animazione. La sezione è volutamente alta (500vh — un valore arbitrario che imposta la velocità complessiva; più alta = più lenta). Al suo interno, un container a tutto viewport è position: sticky; top: 0, così si ancora e fa da finestra fissa mentre il resto della sezione scorre. Un’interazione scroll GSAP scrubbed mappa quanto hai scrollato nella sezione sul progresso dell’animazione. È scrub-on-scroll, non trigger actions: il cubo ruota e le immagini si dissolvono mentre scorri, avanti o indietro.

Il cubo è costruito dal CMS. La parte ingegnosa è che la posizione di ogni faccia è dato. La collezione pictures ha i campi ovvi (image, un breve text per l’etichetta split-text, un intero order limitato a 6 — perché un cubo ha sei facce) più otto campi numerici “misteriosi”: origin-left, origin-top, move-x/y/z e rotate-x/y/z. Corrispondono esattamente a transform-origin CSS e ai transform move/rotate. Lega il transform di ogni item ai suoi campi (via CSS custom guidato dai dati dell’item) e i sei item della collezione si dispongono in un cubo — ogni faccia ruotata e spinta lungo un asse. Nota i tipi di campo: i rotate sono interi, i move decimali, perché posizionare le facce in 3D richiede quella precisione — piccoli errori si leggono come facce visibilmente disallineate.

Due collection list, due compiti. Una collection list renderizza le immagini di sfondo (impilate una sull’altra, ordinate per order decrescente così l’item 1 sta in cima all’inizio) per la transizione dissolvenza + split-text. Una seconda usa gli stessi dati per costruire le facce del cubo. Separare il lavoro tiene ogni animazione focalizzata.

Il 3D vero ha bisogno di due proprietà CSS. Un “cubo” CSS sembra piatto se la scena non ha profondità: imposta una perspective sul genitore (quanto forte è lo scorcio 3D) e transform-style: preserve-3d sull’elemento cubo, così le sue facce mantengono le loro posizioni 3D individuali invece di essere appiattite sul piano del genitore. Con queste in atto, i transform rotate/move muovono davvero le facce attraverso lo spazio.

Come si usa

1. CMS. Una collezione pictures con image, un breve text, un intero order (max 6) e otto campi numerici: origin-left, origin-top, move-x, move-y, move-z, rotate-x, rotate-y, rotate-z (rotate interi, move decimali).

2. Impalcatura per lo scroll. Sezione a 500vh. Dentro, un main-container a 100vh, position: sticky, top: 0, max-width: none — la finestra ancorata. Dentro, un content wrapper a 100%×100%.

3. Due liste. Una collection list di sfondo (immagini impilate, ordinate per order decrescente) per la transizione immagine + split-text, e una seconda collection list per le facce del cubo. Lega transform-origin e transform move/rotate di ogni item cubo ai suoi campi CMS via CSS custom (dal cloneable). Aggiungi perspective al genitore del cubo e transform-style: preserve-3d al cubo.

4. Prima animazione — immagine & split text. Un’interazione scroll scrubbed che dissolve le immagini impilate ed esegue uno stagger split-text su ogni text col progredire dello scroll.

5. Seconda animazione — cubo. Un’interazione scroll scrubbed che anima rotazione e posizione del cubo nella scena, sincronizzata sullo stesso scroll. Chiudi con aggiustamenti responsive per gli schermi più piccoli.

Il CSS custom che lega i campi numerici CMS al transform di ogni item (e i valori esatti delle facce) sta nel cloneable, con una spiegazione scritta completa nell’articolo di Codrops collegato. Costruisci la matematica 3D da quelli invece di ricostruirla a mano.