Image sequence in scroll stile Apple (Webflow + GSAP)

Puoi ricreare l’iconica animazione in scroll degli AirPods Pro di Apple in Webflow con nient’altro che una sequenza di immagini fisse disegnate su un canvas — niente video, niente WebGL, niente Lottie. Apple l’ha fatto con 147 frame estratti da un clip di circa sei secondi, serviti uno alla volta mentre scrolli per simulare un movimento perfettamente fluido. Questa lezione ricostruisce quell’effetto esatto da zero, guidato da GSAP ScrollTrigger.

Il lavoro si divide nettamente in due metà. Prima, la pipeline degli asset: estrai i frame da un video, li comprimi, li carichi su Webflow e — la parte furba — ne recuperi gli URL nell’ordine giusto usando la Webflow Data API, invece di copiare 144 link a mano. Poi, l’effetto vero e proprio: un piccolo script configurabile che disegna il frame giusto sul canvas man mano che avanza il tuo scroll, controllato interamente da attributi HTML così non devi mai toccare il codice.

Qui è tutto clonabile, e lo script è già pronto per te. Quello che conta davvero è capire i pezzi in movimento, così puoi puntarlo sulla tua animazione e regolarlo finché non ti convince.

Come funziona

L’illusione. Non c’è nessun video in riproduzione. Un elemento <canvas> è una superficie vuota e programmabile, e lo script ci disegna sopra un singolo frame — poi, mentre scrolli, lo sostituisce con il successivo. Fallo abbastanza in fretta su ~150 immagini e il tuo occhio lo legge come movimento fluido. Un clip sorgente di circa sei secondi è ideale: a 24fps sono circa 144 frame, abbastanza progressione visiva per un’animazione fluida legata allo scroll ma con un numero di immagini gestibile.

La pipeline degli asset, e due quirk. Estrai i frame con un tool gratuito impostando un numero di frame e una distanza tra i frame in millisecondi (per 6.000ms con 144 frame, sono ~40ms l’uno dall’altro). Prima di caricare, li comprimi — e non è solo una questione di peso. Webflow scarta in silenzio le immagini visivamente identiche, anche con nomi diversi, cosa che capita di continuo nei tratti fermi all’inizio o alla fine di un’animazione; la compressione cambia i byte di ogni frame quel tanto che basta perché i duplicati sopravvivano. Una volta caricati, lascia che Webflow ricomprima tutto in AVIF e sposta tutti i frame in una cartella chiamata esattamente frames, così puoi isolarli dal resto degli asset più avanti.

Il problema degli URL. Webflow rinomina ogni asset in upload — 00001.png diventa qualcosa di imprevedibile, e solo la parte dopo il trattino basso è quella che gli hai dato tu. Quindi gli URL della CDN non si possono indovinare. Chiedili invece alla Webflow Data API: una chiamata elenca le cartelle degli asset (con dentro gli ID delle immagini di ciascuna), una seconda chiamata elenca gli asset stessi (con i loro URL completi della CDN). Le esegui entrambe con Postman, incolli le risposte JSON nel tool generatore, e ti restituisce un array pulito e ordinato con i soli URL dentro la tua cartella frames. Dato che l’API restituisce solo 100 asset per richiesta, un progetto con ~150 frame ha bisogno di una seconda chiamata con un offset di 100 per prendere il resto — il tool unisce i due blocchi per te.

Il runtime. Sulla pagina, una section alta (es. 300vh) porta i due attributi chiave: fc-image-scrubbing="component" e fc-image-scrubbing-urls con il tuo array. Al suo interno, un container position: sticky a 100vh tiene l’animazione fissa nel viewport mentre scrolli attraverso la section. Il canvas riempie quel container. Al caricamento, lo script trova quei due attributi, spezza la lista di URL in un array, carica le immagini, osserva l’avanzamento dello scroll con ScrollTrigger e disegna il frame corretto a ogni update — gestendo anche schermi ad alta densità e l’adattamento responsive. Poiché il canvas non significa nulla per uno screen reader, è marcato aria-hidden, e un paragrafo visually-hidden accanto porta lo stesso messaggio in forma testuale.

Come usarlo

1. Prepara il video. Tienilo intorno ai sei secondi e a una risoluzione ragionevole (1080p bastano e avanzano). Evita alpha/trasparenza a meno che non ti serva davvero — rende i frame pesanti.

2. Estrai i frame. Nel frame extractor, carica il video e imposta il numero di frame (es. 144) e la distanza tra i frame in millisecondi (≈ durata totale ÷ numero di frame, quindi ~40ms per un clip da 6s). Estrai, poi scarica tutto.

3. Comprimili. Passa l’intero set nel tool di compressione — mantiene i nomi originali dei file e gestisce un grande batch in una volta. Questo alleggerisce il peso e impedisce a Webflow di scartare i frame identici come duplicati.

4. Carica su Webflow. Aggiungi ogni frame al pannello Assets, seleziona tutto e usa Compress selected assets → AVIF per far ridurre ancora le immagini a Webflow. Poi crea una cartella chiamata esattamente frames e spostaci dentro tutte le immagini (il nome conta — il tool ci fa affidamento).

5. Recupera gli URL via API. Nella documentazione della Webflow API, trova list asset folders e copia l’endpoint. In Postman, incollalo, sostituisci site_id con il Site ID del tuo progetto (Site settings → Overview) e, sotto Authorization, aggiungi un token API in sola lettura come Bearer token. Invia, copia la risposta e incollala nel tool generatore. Poi cambia asset_folders in assets nell’URL, invia di nuovo e incolla anche quella risposta; clicca generate array. Per più di 100 asset, aggiungi un parametro query offset = 100, invia e incolla il secondo blocco per unirli.

6. Costruisci il layout. Crea una section a 300vh e dalle fc-image-scrubbing="component" più fc-image-scrubbing-urls con l’array copiato. All’interno, aggiungi un container con padding 0, altezza 100vh e position: sticky; top: 0. Metti dentro un custom element, imposta il tag su canvas con width/height 100% e aria-hidden="true". Aggiungi sotto un paragrafo visually-hidden che descrive l’animazione per gli screen reader.

7. Collega lo script e regolalo. Il progetto clonabile include lo script di scrubbing come embed e carica GSAP + ScrollTrigger — assicurati che siano presenti. Poi regola il comportamento con gli attributi della tabella qui sopra: fit (contain/cover), i fit-landscape / fit-portrait per orientamento, fps, e lo start-point / end-point di ScrollTrigger. Pubblica e scrolla per vedere la sequenza andare in sync.