Anima gli elementi durante lo scorrimento con animazioni con scorrimento

Scopri come utilizzare le sequenze temporali di scorrimento e le sequenze temporali di visualizzazione per creare animazioni basate sullo scorrimento in modo dichiarativo.

Bramus

Data di pubblicazione: 5 maggio 2023

Animazioni basate sullo scorrimento

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Le animazioni basate sullo scorrimento sono un pattern UX comune sul web. Un'animazione basata sullo scorrimento è collegata alla posizione di scorrimento di un contenitore di scorrimento. Ciò significa che, man mano che scorri verso l'alto o verso il basso, l'animazione collegata viene riprodotta in avanti o indietro in risposta diretta. Esempi sono effetti come immagini di sfondo parallasse o indicatori di lettura che si muovono mentre scorri.

Un indicatore di lettura nella parte superiore di un documento, basato sullo scorrimento.

Un tipo simile di animazione basata sullo scorrimento è un'animazione collegata alla posizione di un elemento all'interno del relativo contenitore di scorrimento. Ad esempio, gli elementi possono apparire gradualmente quando entrano nella visualizzazione.

Le immagini di questa pagina vengono visualizzate gradualmente man mano che diventano visibili.

Il modo classico per ottenere questi tipi di effetti è rispondere agli eventi di scorrimento sul thread principale, il che porta a due problemi principali:

  • I browser moderni eseguono lo scorrimento in un processo separato e pertanto forniscono eventi di scorrimento in modo asincrono.
  • Le animazioni del thread principale sono soggette a jank.

In questo modo, la creazione di animazioni basate sullo scorrimento performanti e sincronizzate con lo scorrimento è impossibile o molto difficile.

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

Questi nuovi concetti si integrano con le API Web Animations (WAAPI) e API CSS Animations esistenti, consentendo loro di ereditare i vantaggi offerti da queste API. Ciò include la possibilità di eseguire animazioni basate sullo scorrimento al di fuori del thread principale. Sì, hai letto bene: ora puoi avere animazioni fluide e scorrevoli, basate sullo scorrimento, eseguite al di fuori del thread principale, con poche righe di codice aggiuntive. Cosa c'è di meglio?!

Animazioni sul web, un breve riepilogo

Animazioni sul web con CSS

Per creare un'animazione in CSS, definisci un insieme di fotogrammi chiave utilizzando la regola @@keyframes. Collega l'animazione a un elemento utilizzando la proprietà animation-name e impostando anche un valore animation-duration per determinare la durata dell'animazione. Sono disponibili altre proprietà abbreviate, come animation-*, animation-easing-function e animation-fill-mode, solo per citarne alcune, che possono essere combinate nell'abbreviazione animation.

Ad esempio, ecco un'animazione che aumenta la scala di un elemento sull'asse X e ne cambia 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, l'API Web Animations può essere utilizzata per ottenere esattamente lo stesso risultato. Puoi farlo creando nuove istanze Animation e KeyFrameEffect oppure utilizzando 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 delle animazioni

Per impostazione predefinita, un'animazione allegata a un elemento viene eseguita nella sequenza temporale del documento. Il tempo di origine inizia da 0 quando la pagina viene caricata e avanza man mano che il tempo dell'orologio procede. Questa è la sequenza temporale dell'animazione predefinita e, finora, era l'unica a cui avevi accesso.

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

  • Cronologia di avanzamento dello scorrimento: una cronologia collegata alla posizione di scorrimento di un contenitore di scorrimento lungo un determinato asse.
  • Visualizza cronologia avanzamento: una cronologia collegata alla posizione relativa di un determinato elemento all'interno del relativo contenitore di scorrimento.

Scorrere la cronologia di avanzamento

Una sequenza temporale di avanzamento dello scorrimento è una sequenza temporale di animazione collegata all'avanzamento della posizione di scorrimento di un contenitore di scorrimento, chiamato anche area di scorrimento o scroller, lungo un determinato asse. Converte una posizione in un intervallo di scorrimento in una percentuale di avanzamento.

La posizione di scorrimento iniziale rappresenta lo 0% di avanzamento, mentre quella finale il 100%. Nella visualizzazione seguente, puoi notare che l'avanzamento aumenta da 0% a 100% man mano che scorri il cursore dall'alto verso il basso.

Visualizzazione di una cronologia di avanzamento dello scorrimento. Man mano che scorri verso il basso, il valore di avanzamento aumenta da 0% a 100%.

✨ Prova anche tu

Una cronologia di avanzamento dello scorrimento viene spesso abbreviata semplicemente in "Cronologia di scorrimento".

Visualizzare la cronologia dei progressi

Questo tipo di sequenza temporale è collegato all'avanzamento relativo di un determinato elemento all'interno di un contenitore di scorrimento. Come in una cronologia di avanzamento dello scorrimento, viene monitorato l'offset di scorrimento di uno scroller. A differenza di una sequenza temporale di avanzamento dello scorrimento, è la posizione relativa di un soggetto all'interno dello scorrimento a determinare l'avanzamento.

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

Una cronologia di avanzamento della visualizzazione inizia dal momento in cui un soggetto inizia a intersecarsi con lo scorrimento e termina quando il soggetto smette di intersecarsi con lo scorrimento. Nella visualizzazione seguente, puoi vedere che l'avanzamento inizia a essere conteggiato a partire dallo 0% quando il soggetto entra nel contenitore di scorrimento e raggiunge il 100% nel momento esatto in cui il soggetto esce dal contenitore di scorrimento.

Visualizzazione di una cronologia dei progressi di visualizzazione. Il progresso aumenta da 0% a 100% man mano che il soggetto (riquadro verde) attraversa lo scorrimento.

✨ Prova anche tu

Una sequenza temporale di visualizzazione viene spesso abbreviata in "Sequenza temporale di visualizzazione". È possibile scegliere come target parti specifiche di una sequenza temporale di visualizzazione in base alle dimensioni del soggetto, ma ne parleremo più avanti.

Prendere confidenza con le sequenze temporali di avanzamento dello scorrimento

Creare una sequenza temporale anonima di avanzamento dello scorrimento in CSS

Il modo più semplice per creare una sequenza temporale di scorrimento in CSS è utilizzare la funzione scroll(). In questo modo viene creata una cronologia 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 predecessore più vicino (impostazione predefinita).
  • root: Utilizza la finestra 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 di avanzamento lungo l'asse del blocco 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 dei progressi lungo l'asse Y del contenitore di scorrimento.
  • x: utilizza la misura dei progressi lungo l'asse x del contenitore di scorrimento.

Ad esempio, per associare un'animazione allo scorrimento principale sull'asse del blocco, i valori da passare a scroll() sono root e block. Il valore totale è scroll(root block).

Demo: indicatore di avanzamento della lettura

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

Demo: indicatore di avanzamento della lettura.

✨ Prova anche tu

L'indicatore di avanzamento della lettura è posizionato nella parte superiore della pagina utilizzando la posizione fissa. Per sfruttare le animazioni composite, non viene animato 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 per l'animazione grow-progress sull'elemento #progress è impostata su una sequenza temporale anonima creata utilizzando scroll(). Non vengono forniti argomenti a scroll(), quindi verranno utilizzati i valori predefiniti.

Lo scroller predefinito da monitorare è nearest e l'asse predefinito è block. In questo modo, viene scelto come target lo scroller principale, in quanto è lo scroller più vicino dell'elemento #progress, mentre viene monitorata 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 denominata. È un po' più dettagliato, ma può essere utile quando non scegli come target uno scorrimento principale o lo scorrimento principale oppure quando la pagina utilizza più sequenze temporali o quando le ricerche automatiche non funzionano. In questo modo, puoi identificare una cronologia di avanzamento dello scorrimento in base al nome che le assegni.

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

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

Infine, per collegare l'animazione alla sequenza temporale di avanzamento dello scorrimento, imposta la proprietà animation-timeline sull'elemento da animare 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'abbreviazione scroll-timeline. Ad esempio:

scroll-timeline: --my-scroller inline;

Questa demo include un indicatore di passaggio mostrato sopra ogni carosello di immagini. Quando un carosello contiene tre immagini, la barra dell'indicatore inizia con una larghezza del 33% per indicare che stai attualmente visualizzando la prima immagine su tre. Quando l'ultima immagine è visibile, ovvero quando lo scorrimento è arrivato alla fine, l'indicatore occupa l'intera larghezza dello scorrimento. Per controllare l'animazione viene utilizzata una sequenza temporale di avanzamento dello scorrimento denominata.

Demo: indicatore di passaggio del carosello orizzontale.

✨ Prova anche tu

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 è posizionato in modo assoluto all'interno dell'elemento contenitore .gallery. Le 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)));
}

.gallery__scrollcontainer dispone orizzontalmente gli elementi .gallery__entry contenuti ed è l'elemento che scorre. Il .gallery__progress viene animato monitorando la posizione di scorrimento. A questo scopo, viene fatto 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 cronologia di avanzamento dello scorrimento con JavaScript

Per creare una sequenza temporale a scorrimento in JavaScript, crea una nuova istanza della classe ScrollTimeline. Trasmetti un property bag con source e axis che vuoi monitorare.

  • source: Un riferimento all'elemento di cui vuoi monitorare lo scorrimento. Utilizza document.documentElement per scegliere come target lo scorrimento principale.
  • axis: determina l'asse da monitorare. 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 eventuali duration.

$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, usa 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 nella versione CSS: la timeline creata tiene traccia dello scroller principale e ridimensiona la #progress sull'asse x da 0% a 100% mentre scorri la pagina.

✨ Prova anche tu

Prendere confidenza con la visualizzazione della cronologia dei progressi

Creare una cronologia di avanzamento della visualizzazione anonima in CSS

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

  • <axis> è uguale a quello della sequenza temporale di avanzamento dello scorrimento e definisce l'asse da 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 in visualizzazione 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 interseca il relativo scorrimento sull'asse del blocco, utilizza view(block). Come per scroll(), imposta questo valore per la proprietà animation-timeline e non dimenticare di impostare animation-duration su auto.

Utilizzando il seguente codice, ogni img apparirà gradualmente quando attraversa la finestra di visualizzazione mentre scorri.

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

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

Intermezzo: visualizzare gli intervalli della cronologia

Per impostazione predefinita, un'animazione collegata alla visualizzazione della sequenza temporale viene allegata all'intero intervallo della sequenza temporale. Inizia dal momento in cui il soggetto sta per entrare nella scrollport e termina quando il soggetto è uscito completamente dalla scrollport.

È anche possibile collegarlo a una parte specifica della sequenza temporale della visualizzazione specificando l'intervallo a cui deve essere allegato. Ad esempio, solo quando il soggetto entra nello scorrimento. Nella visualizzazione seguente, l'avanzamento inizia a essere conteggiato da 0% quando il soggetto entra nel contenitore di scorrimento, ma raggiunge già il 100% dal momento in cui si interseca completamente.

Una sequenza temporale della visualizzazione impostata per monitorare l'intervallo di voci del soggetto. L'animazione viene eseguita solo mentre il soggetto entra nella finestra di visualizzazione.

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

  • cover: rappresenta l'intera gamma della cronologia dei progressi di visualizzazione.
  • entry: rappresenta l'intervallo durante il quale il riquadro principale entra nell'intervallo di visibilità dell'avanzamento della visualizzazione.
  • exit: rappresenta l'intervallo durante il quale il riquadro del soggetto principale esce dall'intervallo di visibilità dell'avanzamento della visualizzazione.
  • entry-crossing: rappresenta l'intervallo durante il quale il box principale attraversa il bordo finale.
  • exit-crossing: rappresenta l'intervallo durante il quale il rettangolo principale attraversa il bordo iniziale.
  • contain: rappresenta l'intervallo durante il quale la casella principale è completamente contenuta o copre completamente il suo intervallo di visibilità dello stato di visualizzazione all'interno della finestra di visualizzazione. Dipende se il soggetto è più alto o più basso dello scorrimento.

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

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

Nel CSS, questa impostazione viene definita 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 ogni nome dell'intervallo e in che modo le percentuali influiscono sulle posizioni iniziale e finale. Prova a impostare l'inizio dell'intervallo su entry 0% e la fine dell'intervallo su cover 50%, quindi trascina la barra di scorrimento per visualizzare il risultato dell'animazione.

Visualizzatore intervalli della cronologia, disponibile all'indirizzo https://goo.gle/view-timeline-range-tool

Guardare una registrazione

Come potresti notare mentre provi questi strumenti per visualizzare gli intervalli della cronologia, alcuni intervalli possono essere presi di mira da due diverse combinazioni di nome intervallo e offset intervallo. Ad esempio, entry 0%, entry-crossing 0% e cover 0% hanno tutti come target la stessa area.

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

Demo: rivela immagine

Questa demo mostra le immagini in dissolvenza man mano che entrano nella finestra di visualizzazione. Questa operazione viene eseguita utilizzando una cronologia delle visualizzazioni anonima. L'intervallo di animazione è stato modificato in modo che ogni immagine sia completamente opaca quando si trova a metà dello scorrimento.

Demo: rivela immagine

✨ Prova anche tu

L'effetto di espansione viene ottenuto utilizzando un clip-path animato. Il CSS utilizzato per questo 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%;
}

Creare una cronologia dello stato di visualizzazione denominata in CSS

Analogamente alle sequenze temporali di scorrimento, che hanno versioni denominate, puoi creare anche sequenze temporali di visualizzazione denominate. Anziché le proprietà scroll-timeline-*, utilizzi varianti con il prefisso view-timeline-, ovvero view-timeline-name e view-timeline-axis.

Vengono applicati lo stesso tipo di valori e le stesse regole per la ricerca di una sequenza temporale denominata.

Demo: rivelare l'immagine, rivisitata

Rielaborando la demo di visualizzazione dell'immagine precedente, 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%;
}

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

✨ Prova anche tu

Creare una cronologia dello stato di visualizzazione in JavaScript

Per creare una cronologia delle visualizzazioni in JavaScript, crea una nuova istanza della classe ViewTimeline. Inserisci un contenitore di proprietà con subject che vuoi monitorare, axis e inset.

  • subject: Un riferimento all'elemento che vuoi monitorare all'interno del proprio scorrimento.
  • axis: l'asse da monitorare. Analogamente alla variante CSS, i valori accettati sono block, inline, x e y.
  • inset: un aggiustamento interno (positivo) o esterno (negativo) della finestra di visualizzazione quando si 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 eventuali duration. Se vuoi, puoi trasmettere le informazioni sull'intervallo utilizzando le proprietà rangeStart e rangeEnd.

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

✨ Prova anche tu

Altre cose da provare

Allegare a più intervalli della sequenza temporale di visualizzazione con un unico set di fotogrammi chiave

Diamo un'occhiata a questa demo dell'elenco contatti in cui le voci dell'elenco sono animate. Quando una voce dell'elenco entra nel riquadro di scorrimento dal basso, scorre e appare gradualmente, mentre quando esce dal riquadro di scorrimento dall'alto, scorre e scompare gradualmente.

Demo: elenco contatti

✨ Prova anche tu

Per questa demo, ogni elemento viene decorato con una sequenza temporale di visualizzazione che lo monitora mentre attraversa la porta di scorrimento, ma sono associate due animazioni basate sullo scorrimento. L'animazione animate-in è collegata all'intervallo entry della sequenza temporale, mentre 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 animazioni diverse associate a due intervalli diversi, è anche possibile creare un set di fotogrammi chiave che contenga 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 le informazioni sull'intervallo, non è necessario specificare animation-range. Il risultato è esattamente lo stesso di prima.

✨ Prova anche tu

Collegamento a una cronologia degli scorrimenti non antenata

Il meccanismo di ricerca per le tempistiche di scorrimento e le tempistiche di visualizzazione denominate è limitato solo agli elementi di scorrimento principali. Molto spesso, però, l'elemento da animare non è un elemento secondario dello scroller da monitorare.

Per far funzionare questa funzionalità, entra in gioco la proprietà timeline-scope. Utilizzi questa proprietà per dichiarare una sequenza temporale con quel nome senza crearla effettivamente. In questo modo, la cronologia con quel nome ha un ambito più ampio. In pratica, utilizzi la proprietà timeline-scope su un elemento principale condiviso in modo che la sequenza temporale di uno scorrimento secondario possa essere collegata.

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 suoi figli, ma poiché .parent lo ha impostato come scroll-timeline-root, viene allegato.
  • L'elemento .subject utilizza la sequenza temporale --tl. Risale il suo albero genealogico e trova --tl il giorno .parent. Con --tl su .parent che punta a --tl di .scroller, .subject monitorerà essenzialmente la cronologia di avanzamento dello scorrimento di .scroller.

In altre parole, puoi utilizzare timeline-root per spostare una sequenza temporale fino a un antenato (operazione nota anche come innalzamento), in modo che tutti i discendenti dell'antenato possano accedervi.

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

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 le possibilità offerte dalle animazioni basate sullo scorrimento.

Una delle demo aggiuntive è questo elenco di copertine di album. Ogni copertina ruota in 3D mentre si sposta al centro.

Demo: Cover Flow

✨ Prova anche tu

Oppure questa demo di carte impilate che sfrutta position: sticky. Man mano che le carte si impilano, quelle già bloccate si riducono, creando un piacevole effetto di profondità. Alla fine, l'intera pila scompare dalla visualizzazione come gruppo.

Demo: schede impilate.

✨ Prova anche tu

Also featured on scroll-driven-animations.style è una raccolta di strumenti come la visualizzazione dell'avanzamento dell'intervallo della sequenza temporale della visualizzazione inclusa in precedenza in questo post.

Le animazioni basate sullo scorrimento sono trattate anche nella sezione Novità delle animazioni web di Google I/O 2023.