EN IT
Home Chi sono Learn Blog

Ancora un video allo scroll in Webflow (Picture-in-Picture)

Avanzato 35:35 webflowgsapscrollvariabilivideo

Costruisci un video picture-in-picture che si ancora nell'angolo allo scroll in Webflow, con scroll trigger GSAP, sticky positioning e una singola variabile animata.

Guarda su YouTube

Punti chiave

  • Un effetto "si ancora, poi rimpicciolisce nell'angolo" è un trigger di scroll discreto, non uno scrub — usa trigger actions con leave → play e enter-back → reverse, con soglie su top/top.
  • Lo sticky positioning richiede tre proprietà insieme (position: sticky, un offset top e uno z-index alto) — raggruppale in una combo class e fai il toggle della classe con una set action.
  • Anima tre transform (moveX, moveY, scale) con una singola variabile numerica che va 0 → 1: moltiplica ogni formula calc per la variabile, e scrivi lo scale come calc(1 - 0.6 * factor) così va da 1 giù a 0.4.
  • Posiziona con calc, non a occhio: un translateX di 50vw - 50% - padding porta il bordo destro nell'angolo, e transform-origin: top right rende naturale il rimpicciolimento.
  • translateY più sticky sballa il layout finale — compensa con un bottom margin pari all'altezza scalata, annullalo con un top margin negativo sull'elemento successivo, poi disabilita da tablet in giù e per il reduced motion.

Capitoli del video

  1. 00:00 Intro
  2. 01:04 Anatomia della struttura della sezione
  3. 03:38 Anatomia del comportamento dell'interazione
  4. 06:37 Costruire l'interazione: controlli e soglie
  5. 11:30 Costruire l'interazione: le action necessarie
  6. 19:43 Portare le variabili Webflow nel setup
  7. 24:32 Le action Set e Animate Variable
  8. 26:12 Compensazione dello shift verticale
  9. 32:39 Responsività e accessibilità
  10. 34:34 Outro

Ecco una piccola interazione che rende i contenuti long-form molto più coinvolgenti: un video che segue il lettore mentre scorre, rimpicciolendo dolcemente nell’angolo in basso a destra come un player picture-in-picture. Lo costruiamo con le interazioni scroll GSAP di Webflow, lo sticky positioning, un po’ di calc e una variabile Webflow ingegnosa che tiene tutto pulito.

La parte interessante non è l’effetto — è la tecnica dietro: guidare tre transform separati con una sola variabile animata, e compensare i capricci di layout che lo sticky positioning introduce. Padroneggiali e questo pattern diventa riutilizzabile ovunque.

Come funziona

È un trigger di scroll discreto, non uno scrub. Non vogliamo che la forma del video sia legata in continuazione alla posizione di scroll; vogliamo che cambi stato una volta, al superamento di una soglia. Quindi l’interazione scroll sul wrapper del video usa trigger actions (non scrub on scroll), con leave → play (parte quando il wrapper inizia a lasciare il viewport) e enter back → reverse (annulla quando rientra del tutto). Le soglie sono impostate così che il cambio avvenga quando il bordo superiore del wrapper raggiunge il bordo superiore del viewport (soglia end: top/top).

Sticky sono tre proprietà, quindi fanne una classe. Rendere sticky il video non è solo position: sticky — servono anche un offset top (0) e uno z-index alto (100) così resta sopra il contenuto su cui scorre. Dato che devono cambiare insieme, raggruppale in una combo class (is-sticky) e invertila con una action set. (Tieni una copia del wrapper con quella classe nello style guide così Webflow non la elimina.)

Una variabile guida tre transform. Il transform finale è un translateX, un translateY e uno scale(0.4), tutti scritti come espressioni calc in una proprietà transform custom (i controlli transform del pannello stile non accettano calc), con transform-origin: top right così rimpicciolisce verso l’angolo. La posizione orizzontale è calc(50vw - 50% - 2rem) (spingi al centro del viewport, tira indietro di metà della sua larghezza, poi il padding di pagina); quella verticale è calc(100vh - 40% - 2rem). Animare tre variabili separate con calc è fragile, quindi creiamo una sola variabile numerica (transform-factor, 0 → 1) e moltiplichiamo ogni formula per essa: translateX((…) * factor), translateY((…) * factor), e — il trucco elegante — scale(calc(1 - 0.6 * factor)) così lo scale va da 1 (factor 0) a 0.4 (factor 1). Una singola action animate variable da 0 a 1 guida tutti e tre.

Compensare lo shift dello sticky. Un translateY insieme a position: sticky porta il layout finale troppo in basso. Il fix è un bottom margin sul wrapper pari alla sua altezza scalata — calc(100vh - 768px * 0.5625 - 2rem), dove 768px è la larghezza del wrapper su desktop e 0.5625 il rapporto d’altezza 16:9 — poi un top margin negativo sull’elemento sotto per annullare il gap che apre. (I margin in percentuale si riferiscono alla larghezza del parent, e il margin si risolve prima dello scale: per questo si usa la forma in pixel.) Infine, questo effetto non ha senso su schermi piccoli o per chi non gradisce il movimento, quindi il conditional playback lo disabilita da tablet in giù e quando è attivo prefers-reduced-motion.

Come si usa

  1. Prepara il wrapper. Video in un wrapper con max width, margin-inline: auto, aspect-ratio: 16/9 e transform-origin: top right. Crea una combo class is-sticky con position: sticky, top: 0, z-index: 100 (tieni una copia nello style guide).

  2. Aggiungi la variabile transform. Crea una variabile numerica transform-factor (default 0). Nella proprietà transform custom del wrapper, scrivi translateX((50vw - 50% - 2rem) * factor) translateY((100vh - 40% - 2rem) * factor) scale(calc(1 - 0.6 * factor)).

  3. Costruisci l’interazione scroll. Sul wrapper: interazione scroll, trigger actions, leave → play, enter back → reverse, soglia end top/top. Aggiungi una action set che fa il toggle della classe is-sticky a 0s, e una action animate variable che porta transform-factor da 0 → 1 (es. 0.3s, sine in-out).

  4. Compensa il layout. Aggiungi al wrapper il bottom margin calc(100vh - 768px * 0.5625 - 2rem), e un top margin negativo corrispondente sull’elemento successivo.

  5. Proteggilo. Nel conditional playback, imposta no animation per i breakpoint da tablet in giù e per prefers-reduced-motion. Pubblica e prova sul link live.

Risorse

Domande frequenti

Come faccio ancorare e rimpicciolire un video nell'angolo mentre scrollo in Webflow?
Usa un'interazione scroll GSAP sul wrapper del video impostata su trigger actions (non scrub on scroll). Falla partire quando il wrapper lascia il viewport (leave → play) e invertila quando rientra (enter back → reverse), poi fai il toggle di una combo class sticky e anima i transform di movimento/scala.
Che differenza c'è tra scrub on scroll e trigger actions?
Scrub on scroll lega il progresso dell'animazione direttamente alla posizione di scroll — un'interazione continua. Trigger actions fa partire l'animazione una volta al superamento di una soglia e la lascia andare da sola. Per un effetto di ancoraggio nell'angolo vuoi trigger actions, perché è un cambio di stato discreto, non una timeline scrubbed.
Come animo più transform con le variabili Webflow?
Invece di una variabile per transform, usa una singola variabile numerica (es. transform-factor) che va da 0 a 1, e moltiplica per essa ogni transform basato su calc. moveX e moveY diventano (formula * factor); lo scale diventa calc(1 - 0.6 * factor) così va da 1 a 0.4. Animare quella singola variabile guida tutti e tre insieme.
Perché il mio video sticky finisce nel posto sbagliato dopo averlo scalato e spostato?
Un translateY combinato con position: sticky sposta il layout finale. Compensa aggiungendo al wrapper un bottom margin pari alla sua altezza scalata (es. calc(100vh - 768px * 0.5625 - 2rem)), poi annulla quel gap con un top margin negativo sull'elemento sotto. Il margin viene applicato prima dello scale, quindi si risolve nella quantità giusta.

← Torna al corso