Anima gli elementi durante lo scorrimento con animazioni con scorrimento

Scopri come utilizzare le sequenze temporali di scorrimento e la visualizzazione delle sequenze temporali per creare animazioni con scorrimento in modo dichiarativo.

Animazioni con scorrimento

Le animazioni con scorrimento sono un modello UX comune sul web. Un'animazione con scorrimento è collegata alla posizione di scorrimento di un contenitore di scorrimento. Ciò significa che, quando scorri verso l'alto o verso il basso, l'animazione collegata scorre in avanti o indietro in risposta diretta. Alcuni esempi sono effetti come immagini di sfondo con parallasse o indicatori di lettura che si muovono mentre scorri il dito.

Un tipo simile di animazione con scorrimento è collegata alla posizione di un elemento all'interno del relativo contenitore di scorrimento. Ad esempio, gli elementi possono dissolversi in entrata quando vengono visualizzati.

Il modo classico per ottenere questo tipo di effetti è rispondere agli eventi di scorrimento sul thread principale, il che genera due problemi principali:

• I browser moderni eseguono lo scorrimento in un processo separato e, di conseguenza, pubblicano gli eventi di scorrimento in modo asincrono.
• Le animazioni dei thread principali sono soggette a jank.

Per questo motivo, è impossibile o molto difficile creare animazioni ad alte prestazioni sincronizzate con lo scorrimento.

A partire dalla versione 115 di Chrome è disponibile un nuovo insieme di API e concetti che puoi utilizzare per attivare animazioni dichiarative basate sullo scorrimento: Scorri le sequenze temporali e Visualizza le sequenze temporali.

Questi nuovi concetti si integrano con l'API Web Animations (WAAPI) e l'API CSS Animations esistenti, consentendo loro di ereditare i vantaggi offerti da queste API esistenti. Ciò include la possibilità di eseguire animazioni con scorrimento dal thread principale. Sì, leggi bene: ora puoi creare animazioni fluide e fluide, guidate da scorrimento, in esecuzione fuori dal thread principale, con poche righe di codice in più. Cosa non piace?!

Animazioni sul web, un piccolo riepilogo

Animazioni sul web con CSS

Per creare un'animazione in CSS, definisci un insieme di fotogrammi chiave utilizzando la regola at @keyframes. Collegalo a un elemento utilizzando la proprietà animation-name e impostando anche un animation-duration per determinare la durata dell'animazione. Sono disponibili più proprietà animation-* di lunga durata (animation-easing-function e animation-fill-mode, solo per citarne alcune), che possono essere tutte combinate nella forma abbreviata animation.

Ad esempio, di seguito è riportata un'animazione che scala un elemento sull'asse X modificandone anche il colore di sfondo:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

Animazioni sul web con JavaScript

In JavaScript, è possibile usare l'API Web Animations per ottenere esattamente lo stesso risultato. Puoi farlo creando nuove istanze Animation e KeyFrameEffect oppure utilizzare il metodo Element animate() molto più breve.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Questo risultato visivo dello snippet JavaScript riportato sopra è identico alla versione CSS precedente.

Sequenze temporali dell'animazione

Per impostazione predefinita, un'animazione associata a un elemento viene eseguita nella sequenza temporale del documento. L'ora di origine inizia da 0 quando la pagina viene caricata e continua ad andare avanti con l'avanzamento dell'orologio. Questa è la sequenza temporale dell'animazione predefinita che, finora, era l'unica a cui avevi accesso.

La specifica delle animazioni a scorrimento definisce due nuovi tipi di sequenze temporali che puoi utilizzare:

• Sequenza temporale di avanzamento dello scorrimento: una sequenza temporale collegata alla posizione di scorrimento di un contenitore di scorrimento lungo un determinato asse.
• Visualizzazione della sequenza temporale di avanzamento: una sequenza temporale collegata alla posizione relativa di un particolare elemento all'interno del relativo contenitore di scorrimento.

Scorri la cronologia dei progressi

Una sequenza temporale di avanzamento dello scorrimento è una sequenza temporale di animazione collegata all'avanzamento nella posizione di scorrimento di un contenitore di scorrimento, chiamata anche scrollport o scroller, su un determinato asse. Converte una posizione in un intervallo di scorrimento in una percentuale di avanzamento.

La posizione di scorrimento iniziale rappresenta l'avanzamento dello 0%, mentre la posizione di scorrimento finale rappresenta l'avanzamento al 100%. Nella visualizzazione seguente, puoi vedere che l'avanzamento viene conteggiato dallo 0% al 100% mentre scorri la barra di scorrimento dall'alto verso il basso.

✨ Fai una prova

Una sequenza temporale di avanzamento dello scorrimento viene spesso abbreviata semplicemente in "Scorri cronologia".

Visualizza cronologia dei progressi

Questo tipo di sequenza temporale è collegata all'avanzamento relativo di un particolare elemento all'interno di un contenitore di scorrimento. Proprio come la sequenza temporale di avanzamento dello scorrimento, viene registrato l'offset di scorrimento. A differenza della sequenza temporale di avanzamento dello scorrimento, è la posizione relativa di un soggetto all'interno dello scorrimento che determina l'avanzamento.

Questo metodo è in qualche modo paragonabile al funzionamento di IntersectionObserver, che può monitorare quanto è visibile un elemento nello scorrimento. Se l'elemento non è visibile nello scorrimento, significa che non si interseca. Se è visibile all'interno dello scorrimento, anche per la parte più piccola, si interseca.

La sequenza temporale della visualizzazione dei progressi inizia nel momento in cui un soggetto inizia ad intersecarsi con la barra di scorrimento e termina quando il soggetto smette di incrociare la barra di scorrimento. Nella visualizzazione seguente, puoi vedere che l'avanzamento inizia a contare dallo 0% quando il soggetto entra nel contenitore di scorrimento e raggiunge il 100% nel momento in cui il soggetto ha lasciato il contenitore.

✨ Fai una prova

La visualizzazione della cronologia dei progressi viene spesso abbreviata semplicemente in "Visualizza sequenza temporale". È possibile scegliere come target parti specifiche di una visualizzazione della cronologia in base alle dimensioni del soggetto, ma è possibile approfondire questo argomento in seguito.

Esercitarsi con le sequenze temporali dei progressi di scorrimento

Creazione di una sequenza temporale di avanzamento dello scorrimento anonima in CSS

Il modo più semplice per creare una sequenza temporale di scorrimento in CSS è utilizzare la funzione scroll(). Viene creata una sequenza temporale di scorrimento anonima che puoi impostare come valore per la nuova proprietà animation-timeline.

Esempio:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

La funzione scroll() accetta un argomento <scroller> e un argomento <axis>.

I valori accettati per l'argomento <scroller> sono i seguenti:

• nearest: utilizza il contenitore di scorrimento dei predecessori più vicino (valore predefinito).
• root: utilizza l'area visibile del documento come contenitore di scorrimento.
• self: utilizza l'elemento stesso come contenitore di scorrimento.

I valori accettati per l'argomento <axis> sono i seguenti:

• block: utilizza la misura dell'avanzamento lungo l'asse dei blocchi del contenitore di scorrimento (impostazione predefinita).
• inline: utilizza la misura dell'avanzamento lungo l'asse in linea del contenitore di scorrimento.
• y: utilizza la misura dell'avanzamento lungo l'asse y del contenitore di scorrimento.
• x: utilizza la misura dell'avanzamento lungo l'asse x del contenitore di scorrimento.

Ad esempio, per associare un'animazione allo scorrimento principale sull'asse dei blocchi, i valori da trasmettere a scroll() sono root e block. Riassumendo, il valore è scroll(root block).

Demo: indicatore di avanzamento della lettura

Questa demo ha un indicatore di avanzamento della lettura fisso nella parte superiore dell'area visibile. Mentre scorri la pagina verso il basso, la barra di avanzamento si ingrandisce fino a occupare l'intera larghezza dell'area visibile una volta raggiunta la fine del documento. Per l'animazione viene utilizzata una sequenza temporale di avanzamento dello scorrimento anonima.

✨ Fai una prova

L'indicatore di avanzamento della lettura è posizionato nella parte superiore della pagina con la posizione fissa. Per utilizzare animazioni composte, non viene animata width, ma l'elemento viene ridimensionato sull'asse x utilizzando un transform.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

La sequenza temporale dell'animazione grow-progress nell'elemento #progress è impostata su una sequenza temporale anonima creata utilizzando scroll(). Nessun argomento viene assegnato a scroll(), quindi tornerà ai valori predefiniti.

Lo scorrimento predefinito da monitorare è nearest, mentre l'asse predefinito è block. In questo modo viene scelta come target lo scroller principale, in quanto è lo scorrimento più vicino dell'elemento #progress, mentre ne viene tracciata la direzione del blocco.

Creazione di una sequenza temporale di avanzamento dello scorrimento denominata in CSS

Un modo alternativo per definire una sequenza temporale di avanzamento dello scorrimento è utilizzarne una con nome. È un po' più dettagliato, ma può tornare utile quando non hai scelto come target un dispositivo di scorrimento principale o principale oppure quando la pagina utilizza più sequenze temporali o quando le ricerche automatiche non funzionano. In questo modo puoi identificare una sequenza temporale di avanzamento dello scorrimento in base al nome assegnato.

Per creare una sequenza temporale di avanzamento dello scorrimento denominata su un elemento, imposta la proprietà CSS scroll-timeline-name nel contenitore di scorrimento su un identificatore di tuo gradimento. Il valore deve iniziare con --.

Per modificare l'asse da monitorare, dichiara anche la proprietà scroll-timeline-axis. I valori consentiti corrispondono all'argomento <axis> di scroll().

Infine, per collegare l'animazione alla sequenza temporale dello scorrimento, imposta la proprietà animation-timeline per l'elemento che deve essere animato sullo stesso valore dell'identificatore utilizzato per scroll-timeline-name.

Esempio di codice:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

Se vuoi, puoi combinare scroll-timeline-name e scroll-timeline-axis nell'uso breve di scroll-timeline. Ad esempio:

scroll-timeline: --my-scroller inline;

Demo: indicatore dei passi del carosello orizzontale

Questa demo presenta un indicatore di passaggio mostrato sopra ogni carosello di immagini. Quando un carosello contiene tre immagini, la barra dell'indicatore ha una larghezza del 33% per indicare che stai visualizzando l'immagine una di tre. Quando viene visualizzata l'ultima immagine, determinata dallo scorrimento che lo scorrimento ha raggiunto fino alla fine, l'indicatore occupa l'intera larghezza della barra di scorrimento. Per l'animazione viene utilizzata una sequenza temporale di avanzamento dello scorrimento denominata.

✨ Fai una prova

Il markup di base per una galleria è il seguente:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

L'elemento .gallery__progress è assolutamente posizionato all'interno dell'elemento wrapper .gallery. Le sue dimensioni iniziali sono determinate dalla proprietà personalizzata --num-images.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

L'elemento .gallery__scrollcontainer dispone orizzontalmente gli elementi .gallery__entry contenuti ed è l'elemento che scorre. Monitorando la sua posizione di scorrimento, .gallery__progress si anima. facendo riferimento alla sequenza temporale di avanzamento dello scorrimento denominata --gallery__scrollcontainer.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

Creazione di una sequenza temporale di avanzamento dello scorrimento con JavaScript

Per creare una sequenza temporale di scorrimento in JavaScript, crea una nuova istanza di classe ScrollTimeline. Passa in un bagaglio di proprietà insieme ai source e ai axis che vuoi monitorare.

• source: un riferimento all'elemento di cui vuoi monitorare lo scorrimento. Usa document.documentElement per scegliere come target lo scorrimento principale.
• axis: determina l'asse da tracciare. Analogamente alla variante CSS, i valori accettati sono block, inline, x e y.

const tl = new ScrollTimeline({
  source: document.documentElement,
});

Per allegarlo a un'animazione web, passalo come proprietà timeline e ometti qualsiasi duration, se presente.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Demo: indicatore di avanzamento della lettura, rivisitato

Per ricreare l'indicatore di avanzamento della lettura con JavaScript, utilizzando lo stesso markup, utilizza il seguente codice JavaScript:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Il risultato visivo è identico a quello della versione CSS: l'oggetto timeline creato monitora lo scroller principale e aumenta lo scorrimento di #progress sull'asse x da 0% a 100% mentre scorri la pagina.

✨ Fai una prova

Esercitarsi con Visualizza la cronologia dei progressi

Creazione di una cronologia dei progressi di visualizzazione anonima in CSS

Per creare una visualizzazione della cronologia dei progressi, utilizza la funzione view(). I relativi argomenti accettati sono <axis> e <view-timeline-inset>.

• <axis> è uguale a quello della sequenza temporale di avanzamento dello scorrimento e definisce quale asse monitorare. Il valore predefinito è block.
• Con <view-timeline-inset>, puoi specificare un offset (positivo o negativo) per regolare i limiti quando un elemento viene considerato visibile o meno. Il valore deve essere una percentuale o auto, dove auto è il valore predefinito.

Ad esempio, per associare un'animazione a un elemento che si interseca con il relativo cursore sull'asse del blocco, utilizza view(block). Come per scroll(), imposta questo valore come valore per la proprietà animation-timeline e non dimenticare di impostare animation-duration su auto.

Usando il seguente codice, ogni elemento img presenterà una dissolvenza in entrata quando attraversa l'area visibile mentre scorri.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: visualizzare gli intervalli di Spostamenti

Per impostazione predefinita, un'animazione collegata a Visualizza cronologia viene collegata all'intero intervallo della sequenza temporale. L'operazione inizia nel momento in cui il soggetto sta per accedere alla porta di scorrimento e termina quando il soggetto ha abbandonato completamente la porta.

Puoi anche collegarlo a una parte specifica della Visualizzazione cronologia specificando l'intervallo a cui deve essere collegato. Ciò può accadere, ad esempio, solo quando il soggetto entra nella barra di scorrimento. Nella visualizzazione seguente, l'avanzamento inizia a contare da 0% quando il soggetto entra nel contenitore di scorrimento, ma raggiunge già il 100% dal momento in cui si interseca completamente.

I possibili intervalli di visualizzazione della cronologia che puoi scegliere come target sono i seguenti:

• cover: rappresenta l'intero intervallo della sequenza temporale di avanzamento della visualizzazione.
• entry: rappresenta l'intervallo durante il quale la casella entità entra nell'intervallo di visibilità dell'avanzamento della visualizzazione.
• exit: rappresenta l'intervallo durante il quale la casella principale esce dall'intervallo di visibilità dell'avanzamento della visualizzazione.
• entry-crossing: rappresenta l'intervallo durante il quale la casella dell'entità supera il bordo del bordo finale.
• exit-crossing: rappresenta l'intervallo durante il quale la casella dell'entità supera il bordo del bordo iniziale.
• contain: rappresenta l'intervallo in cui la casella principale è compatta o interamente coperta dall'intervallo di visibilità di avanzamento della visualizzazione all'interno della finestra di scorrimento. a seconda che il soggetto sia più alto o più corto rispetto al cursore.

Per definire un intervallo, devi impostare un intervallo-inizio e fine-intervallo. Ciascuno è costituito da un nome intervallo (vedi elenco sopra) e da un offset di intervallo per determinare la posizione all'interno di quel nome-intervallo. L'offset di intervallo è in genere una percentuale che va da 0% a 100%, ma puoi anche specificare una lunghezza fissa, ad esempio 20em.

Ad esempio, se vuoi eseguire un'animazione dal momento in cui un soggetto entra, scegli entry 0% come inizio intervallo. Per fare in modo che termini entro il momento in cui l'oggetto è stato inserito, scegli entry 100% come valore per la fine dell'intervallo.

Nel CSS, puoi impostarlo utilizzando la proprietà animation-range. Esempio:

animation-range: entry 0% entry 100%;

In JavaScript, utilizza le proprietà rangeStart e rangeEnd.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Utilizza lo strumento incorporato di seguito per vedere cosa rappresenta ciascun nome intervallo e in che modo le percentuali influiscono sulle posizioni iniziali e finali. Prova a impostare il valore di inizio intervallo su entry 0% e la fine dell'intervallo su cover 50%, quindi trascina la barra di scorrimento per vedere il risultato dell'animazione.

Guardare una registrazione

Come avrai notato nell'utilizzo dello strumento Visualizza intervalli di Spostamenti, alcuni intervalli possono essere scelti come target da due diverse combinazioni nome-intervallo + offset intervallo. Ad esempio, i criteri entry 0%, entry-crossing 0% e cover 0% hanno tutti come target la stessa area.

Quando inizio e fine dell'intervallo hanno come target lo stesso nome dell'intervallo e coprono l'intero intervallo, dallo 0% al 100%, puoi abbreviare il valore fino al nome dell'intervallo. Ad esempio, animation-range: entry 0% entry 100%; può essere riscritto nel valore animation-range: entry molto più breve.

Demo: rivelazione immagine

Questa demo sbiadisce le immagini quando entrano nella porta di scorrimento. A tale scopo, utilizza la Visualizzazione cronologia anonima. L'intervallo dell'animazione è stato modificato in modo che ogni immagine sia completamente opaca quando si trova a metà della barra di scorrimento.

✨ Fai una prova

L'effetto di espansione si ottiene utilizzando un clip-path animato. Il CSS utilizzato per l'effetto è il seguente:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Creazione di una cronologia dei progressi denominata Visualizza cronologia dei progressi in CSS

In modo simile alle versioni con nome delle sequenze temporali dello scorrimento, puoi anche creare Visualizza cronologia. Al posto delle proprietà scroll-timeline-*, utilizzi varianti che portano il prefisso view-timeline-, ovvero view-timeline-name e view-timeline-axis.

Vengono applicati gli stessi tipi di valori e le stesse regole per la ricerca di una sequenza temporale denominata.

Demo: rivelazione immagine, rivisitata

Rielaborando la demo di rivelazione dell'immagine di cui sopra, il codice rivisto ha il seguente aspetto:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

Con view-timeline-name: revealing-image, l'elemento verrà monitorato all'interno dello scorrimento più vicino. Lo stesso valore viene quindi utilizzato come valore per la proprietà animation-timeline. L'output visivo è esattamente lo stesso di prima.

✨ Fai una prova

Creazione di una visualizzazione della cronologia dei progressi in JavaScript

Per creare una Visualizzazione cronologia in JavaScript, crea una nuova istanza della classe ViewTimeline. Passa in un bagaglio di proprietà con il subject che vuoi monitorare, axis e inset.

• subject: un riferimento all'elemento che vuoi monitorare all'interno del relativo cursore.
• axis: l'asse da monitorare. Analogamente alla variante CSS, i valori accettati sono block, inline, x e y.
• inset: una regolazione interna (positiva) o (negativa) integrata della porta di scorrimento quando determina se la casella è visibile.

const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Per allegarlo a un'animazione web, passalo come proprietà timeline e ometti qualsiasi duration, se presente. Se vuoi, puoi trasferire le informazioni sull'intervallo utilizzando le proprietà rangeStart e rangeEnd.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ Fai una prova

Altre cose da provare

Collegamento a più intervalli della sequenza temporale della visualizzazione con un insieme di fotogrammi chiave

Diamo un'occhiata a questa demo dell'elenco contatti in cui le voci dell'elenco sono animate. Quando una voce di elenco entra nella porta di scorrimento dal basso, scorre+dissolve in entrata e, quando esce dalla porta di scorrimento in alto, scorre+dissolvenza in uscita.

✨ Fai una prova

In questa demo, ogni elemento viene decorato con una sequenza temporale della visualizzazione che lo tiene traccia mentre attraversa la relativa finestra di scorrimento, ma vi sono allegate due animazioni con scorrimento. L'animazione animate-in è collegata all'intervallo entry della sequenza temporale e l'animazione animate-out all'intervallo exit della sequenza temporale.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

Anziché eseguire due diverse animazioni collegate a due intervalli diversi, puoi anche creare un insieme di fotogrammi chiave che contiene già le informazioni sull'intervallo.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Poiché i fotogrammi chiave contengono informazioni sull'intervallo, non è necessario specificare il animation-range. Il risultato è esattamente lo stesso di prima.

✨ Fai una prova

Collegamento a una sequenza temporale di scorrimento non predecessore

Il meccanismo di ricerca per le linee temporali di scorrimento denominate e per la visualizzazione delle linee temporali denominate è limitato solo ai predecessori a scorrimento. Molto spesso, tuttavia, l'elemento che deve essere animato non è un elemento secondario dello scorrimento che deve essere monitorato.

Affinché funzioni, entra in gioco la proprietà timeline-scope. che puoi utilizzare per dichiarare una sequenza temporale con quel nome senza crearla. In questo modo, la sequenza temporale con quel nome avrà un ambito più ampio. In pratica, puoi usare la proprietà timeline-scope su un elemento principale condiviso in modo che la sequenza temporale di un elemento di scorrimento secondario possa essere collegata all'elemento.

Ad esempio:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

In questo snippet:

• L'elemento .parent dichiara una sequenza temporale con il nome --tl. Qualsiasi elemento secondario può trovarlo e utilizzarlo come valore per la proprietà animation-timeline.
• L'elemento .scroller definisce in realtà una sequenza temporale di scorrimento con il nome --tl. Per impostazione predefinita sarebbe visibile solo ai relativi elementi secondari, ma poiché .parent è impostato come scroll-timeline-root, viene associato.
• L'elemento .subject utilizza la sequenza temporale --tl. sale sul suo albero antenato e trova --tl sul .parent. Con --tl sulla .parent che punta a --tl di .scroller, .subject monitorerà essenzialmente la sequenza temporale di avanzamento dello scorrimento di .scroller.

In altre parole, puoi utilizzare timeline-root per spostare una sequenza temporale fino a un predecessore (ovvero sollevamento), in modo che tutti gli elementi secondari del predecessore possano accedervi.

La proprietà timeline-scope può essere utilizzata sia con le sequenze temporali dello scorrimento sia con la visualizzazione delle sequenze temporali.

Altre demo e risorse

Tutte le demo trattate in questo articolo sul mini-sito scroll-driven-animations.style. Il sito web include molte altre demo per evidenziare ciò che è possibile fare con le animazioni con scorrimento.

Una delle demo aggiuntive è l'elenco delle copertine degli album. Ogni copertina ruota in 3D mentre occupa la lampadina centrale.

✨ Fai una prova

Oppure questa demo sulle schede cumulabili che sfruttano position: sticky. Mentre le carte si accumulano, quelle già bloccate si ridimensionano, creando un piacevole effetto di profondità. Alla fine, l'intera pila scompare come gruppo.

✨ Fai una prova

Inoltre, è presente su scroll-driven-animations.style anche una raccolta di strumenti, come la visualizzazione dell'avanzamento dell'intervallo nella sequenza temporale, inclusa in precedenza in questo post.

Le animazioni con scorrimento sono descritte anche nella sezione Novità delle animazioni web alla conferenza Google I/O '23.