Crea card trascinabili in Webflow con GSAP (No Code)

Crea in Webflow uno stack di card trascinabili che chi visita può afferrare, inclinare e scagliare fuori schermo — a sinistra o a destra, come sfogliando una pila di foto istantanee. È una delle interazioni più soddisfacenti che abbia mai messo insieme, e dalla tua parte è completamente no-code: il plugin Draggable di GSAP fa il lavoro pesante, mentre tu guidi tutto dal pannello impostazioni di Webflow con una manciata di attributi custom.

La cosa più bella è quanto sia portabile. La stessa identica struttura funziona sia che le tue card siano statiche sia che arrivino da una collezione CMS, quindi puoi usarla in un portfolio, in una vetrina prodotti o ovunque tu voglia far giocare fisicamente le persone con i tuoi contenuti. E dato che ogni dettaglio — distanza del lancio, rotazione, easing — arriva con un default sensato, puoi pubblicarla così com’è e ritoccarla dopo, solo se vuoi.

Come funziona

Il tutto è guidato dagli attributi. Un unico script, interamente commentato, vive in un embed dentro un componente “draggable card script”. Al caricamento (e di nuovo al reset) prende ogni elemento con FC-draggable-card="wrapper", cerca al suo interno le card con FC-draggable-card="component", poi prende la card in cima, le aggiunge un piccolo suggerimento in hover e inizializza il suo comportamento di drag. Dato che la logica legge dagli attributi, non apri mai il codice — costruisci la struttura in Webflow ed etichetti i pezzi.

Alcune scelte di CSS strutturale la fanno sentire giusta. La sezione riceve overflow: hidden, perché una card lanciata fuori schermo esce tecnicamente dai confini della sezione — senza tagliare quella parte avresti una brutta barra di scroll orizzontale o card che spuntano dal layout. Il container delle card è position: absolute con tutti gli offset a zero, così riempie il genitore; ecco perché il genitore (l’outer wrapper) ha bisogno di position: relative a cui agganciarsi. Il list wrapper è impostato a pointer-events: none e ogni card torna a pointer-events: auto — un abbinamento voluto, così che quando tutte le card sono state lanciate via i tuoi click passino al pulsante di reset che sta sotto lo stack. L’inclinazione giocosa arriva dalle combo class (le card dispari pendono da un lato, le pari dall’altro), lasciando la card in cima perfettamente centrata.

La messa a punto vive in attributi opzionali su ogni card: sensibilità della rotazione, durata del reset, durata e distanza del lancio, rotazione del lancio, la soglia di drag, il ritardo prima che si armi la card successiva e l’easing di GSAP. Nessuno è obbligatorio — ognuno ricade su un default sensato — quindi puoi partire dal minimo indispensabile e ricorrere al riferimento di configurazione qui sopra solo quando vuoi un controllo più fine.

Passare a una versione CMS cambia quasi nulla. Sostituisci le card statiche con una Collection List e metti gli stessi attributi FC-draggable-card sul wrapper, sul pulsante di reset e su ogni Collection Item. L’unica sottigliezza: non puoi aggiungere combo class manuali come “odd” ed “even” dentro una Collection List, quindi usi i selettori di struttura di Webflow — stila l’ultimo item senza inclinazione (è la tua card in cima), gli item pari a un angolo, i dispari all’altro. Due stack indipendenti sulla stessa pagina funzionano benissimo e si resettano in modo separato.

Come si usa

1. Clona il progetto. Prendi il progetto clonabile Webflow — include l’intera struttura, lo stile e il componente commentato draggable card script. Il codice è documentato in fondo alla pagina clonata, con ogni attributo e il suo default.

2. Imposta la zona di drag. Sull’outer wrapper che conterrà le card, aggiungi position: relative, un’altezza (la demo usa 80vh) e l’attributo FC-draggable-card="wrapper". Dai alla sezione intorno overflow: hidden così le card lanciate non creano una barra di scroll.

3. Impila lo stack. Dentro il wrapper, metti un list wrapper in posizione assoluta (tutti gli offset a 0, pointer-events: none) e, al suo interno, le tue card. Ogni card è position: absolute, pointer-events: auto e porta FC-draggable-card="component". Aggiungi combo class odd/even per l’inclinazione, lasciando la card in cima centrata.

4. Aggiungi il pulsante di reset. Inserisci un vero elemento <button> (cambia il tag dal pannello impostazioni) con l’attributo FC-draggable-card="reset". È ciò che riporta indietro tutto il mazzo.

5. Attiva GSAP + Draggable. Come in qualsiasi progetto GSAP in Webflow, carica GSAP e registra il plugin Draggable così lo script ha ciò che gli serve.

6. Configura il feel (opzionale). Vuoi un lancio più lungo, un reset più scattante o un easing diverso? Aggiungi a una card uno qualsiasi degli attributi FC-draggable-card-* dal riferimento di configurazione qui sopra — vedi il riferimento sugli easing di GSAP per i valori di ease. Lasciali stare e ci pensano i default.

7. Passa al CMS se ti serve. Per alimentare le card da una collezione, ricostruisci la stessa struttura con una Collection List, mantieni gli attributi identici e usa i selettori di struttura (last, odd, even) al posto delle combo class manuali per l’inclinazione.