Anima gli elementi durante lo scorrimento con animazioni con scorrimento

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

Bramus

Data di pubblicazione: 5 maggio 2023

Animazioni basate sullo scorrimento

Supporto dei browser

  • Chrome: 115.
  • Edge: 115.
  • Firefox: dietro un flag.
  • Safari: non supportato.

Origine

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 scorrevole. Ciò significa che, mentre scorri verso l'alto o verso il basso, l'animazione collegata scorre in avanti o indietro in risposta diretta. Alcuni esempi sono gli effetti come le immagini di sfondo in parallasse o gli indicatori di lettura che si spostano durante lo scorrimento.

Un indicatore di lettura in cima a 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 scorrevole. Ad esempio, gli elementi possono apparire gradualmente man mano che entrano nel campo visivo.

Le immagini di questa pagina vengono visualizzate gradualmente.

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

  • I browser moderni eseguono lo scorrimento in un processo separato e quindi inviano gli eventi di scorrimento in modo asincrono.
  • Le animazioni del thread principale sono soggette a scatti.

Ciò rende impossibile o molto difficile creare animazioni basate sullo scorrimento performanti e 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: schemi di scorrimento e schemi di visualizzazione.

Questi nuovi concetti si integrano con le API Web Animations (WAAPI) e CSS Animations esistenti, consentendo di ereditare i vantaggi offerti da queste API esistenti. Ciò include la possibilità di eseguire animazioni basate sullo scorrimento nel thread principale. Sì, hai letto bene: ora puoi avere animazioni fluide, basate sullo scorrimento, in esecuzione nel thread principale, con solo poche righe di codice aggiuntivo. Che cosa c'è da non amare?

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 at @keyframes. Collega l'animazione a un elemento utilizzando la proprietà animation-name e impostando un animation-duration per determinare la durata dell'animazione. Esistono altre proprietà animation-* in forma estesa, ad esempio animation-easing-function e animation-fill-mode, che possono essere combinate nella forma abbreviata animation.

Ad esempio, di seguito è riportata un'animazione che aumenta le dimensioni di un elemento sull'asse X e ne modifica contemporaneamente 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 di 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 collegata a un elemento viene eseguita nella sequenza temporale del documento. Il tempo di origine inizia a 0 quando la pagina viene caricata e inizia a scorrere in avanti con il passare del tempo. Si tratta della sequenza temporale di animazione predefinita e, finora, era l'unica a cui avevi accesso.

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

  • Spostamento della cronologia di avanzamento: 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 dell'avanzamento

Una sequenza temporale di avanzamento dello scorrimento è una sequenza temporale dell'animazione collegata all'avanzamento della posizione di scorrimento di un contenitore di scorrimento, chiamato anche scrollport 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 stato di avanzamento pari allo 0%, mentre la posizione di scorrimento finale rappresenta lo stato di avanzamento pari al 100%. Nella seguente visualizzazione, puoi vedere che l'avanzamento aumenta da 0% a 100% quando scorri lo scorrevole dall'alto verso il basso.

Visualizzazione di una sequenza temporale di avanzamento dello scorrimento. Quando scorri verso il basso fino alla fine dello scorrevole, il valore di avanzamento aumenta da 0% a 100%.

✨ Provalo anche tu

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

Visualizza sequenza temporale dei progressi

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

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

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

Visualizzazione di una cronologia di avanzamento della visualizzazione. Il progresso viene conteggiato da 0% a 100% quando l'oggetto (riquadro verde) attraversa lo scorrevole.

✨ Provalo anche tu

Una cronologia di avanzamento della visualizzazione è spesso abbreviata in "Cronologia visualizzazione". È possibile scegliere come target parti specifiche di una cronologia visualizzazione in base alle dimensioni dell'oggetto, ma di seguito parleremo più in dettaglio.

Informazioni pratiche sulle soglie di avanzamento dello scorrimento

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

Il modo più semplice per creare una cronologia 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 dell'antenato più vicino (impostazione predefinita).
  • root: utilizza il viewport 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 del blocco del contenitore di scorrimento (valore predefinito).
  • inline: utilizza la misura dell'avanzamento lungo l'asse in linea del contenitore di scorrimento.
  • y: utilizza la misura del progresso lungo l'asse Y del contenitore di scorrimento.
  • x: utilizza la misura del progresso lungo l'asse x del contenitore di scorrimento.

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

Demo: indicatore di avanzamento della lettura

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

Demo: indicatore di avanzamento della lettura.

✨ Provalo anche tu

L'indicatore dell'avanzamento della lettura è posizionato nella parte superiore della pagina utilizzando la posizione fissa. Per sfruttare le animazioni composite, non viene animato il 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(). Non vengono forniti argomenti a scroll(), pertanto verranno utilizzati i valori predefiniti.

Il cursore predefinito da monitorare è nearest e l'asse predefinito è block. In questo modo, viene scelto come target lo scorrevole principale, ovvero lo scorrevole più vicino all'elemento #progress, e viene monitorata la direzione del blocco.

Creazione di una cronologia 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ù descrittivo, ma può essere utile quando non scegli come target uno scroller principale o lo scroller principale, quando la pagina utilizza più schemi temporali o quando le ricerche automatiche non funzionano. In questo modo, puoi identificare una sequenza temporale di avanzamento dello scorrimento dal nome che le assegni.

Per creare una sequenza temporale di avanzamento dello scorrimento denominata in 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 che deve essere animato allo 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 nella rappresentazione abbreviata scroll-timeline. Ad esempio:

scroll-timeline: --my-scroller inline;

Questa demo mostra un indicatore del passaggio 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 visualizzando la prima delle tre immagini. Quando è visibile l'ultima immagine, determinata dallo scorrimento fino alla fine, l'indicatore occupa l'intera larghezza dello scorrevole. Per gestire l'animazione viene utilizzata una sequenza temporale di avanzamento dello scorrimento denominata.

Demo: Indicatore del passaggio del carosello orizzontale.

✨ Provalo 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 wrapper .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 gli elementi .gallery__entry contenuti in orizzontale ed è l'elemento che scorre. Monitorando la posizione di scorrimento, il .gallery__progress viene animato. Per farlo, fai riferimento alla sequenza temporale di avanzamento dello scorrimento --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;
}

Creare una sequenza temporale di avanzamento dello scorrimento con JavaScript

Per creare una cronologia scorrevole in JavaScript, crea una nuova istanza della classe ScrollTimeline. Passa un bag di proprietà con source e axis che vuoi monitorare.

  • source: un riferimento all'elemento di cui vuoi monitorare lo scorrimento. Usa document.documentElement per scegliere come target lo scorrevole principale.
  • axis: determina l'asse da monitorare. Come per la 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 dell'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 nella versione CSS: il timeline creato monitora lo scorrimento principale e aumenta la scala del #progress sull'asse x dal 0% al 100% mentre scorri la pagina.

✨ Provalo anche tu

Informazioni pratiche sulla visualizzazione della cronologia dei progressi

Creazione di una cronologia di avanzamento della visualizzazione anonima in CSS

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

  • <axis> è lo stesso parametro della cronologia 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 è 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 interseca il relativo dispositivo di 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 codice seguente, ogni img verrà visualizzato gradualmente man mano che attraversa l'area visibile durante lo scorrimento.

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

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

Intermezzo: visualizza gli intervalli di Spostamenti

Per impostazione predefinita, un'animazione collegata alla sequenza temporale della visualizzazione si applica all'intero intervallo della sequenza temporale. Inizia dal momento in cui il soggetto sta per entrare nell'area visibile e termina quando il soggetto ha completamente abbandonato l'area visibile.

È anche possibile collegarlo a una parte specifica della sequenza temporale della visualizzazione specificando l'intervallo a cui deve essere collegato. Ad esempio, può accadere solo quando l'oggetto entra nello scorrevole. Nella seguente visualizzazione, l'avanzamento inizia a conteggiare dal 0% quando l'oggetto entra nel contenitore di scorrimento, ma raggiunge già il 100% dal momento in cui è completamente intersecato.

Una visualizzazione Spostamenti impostata per monitorare l'intervallo di voci del soggetto. L'animazione viene eseguita solo quando il soggetto entra nello scrollport.

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

  • cover: rappresenta l'intera sequenza temporale dell'avanzamento della visualizzazione.
  • entry: rappresenta l'intervallo durante il quale la casella principale 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 principale attraversa il bordo del bordo di fine.
  • exit-crossing: rappresenta l'intervallo durante il quale la casella principale attraversa il bordo del bordo iniziale.
  • contain: rappresenta l'intervallo durante il quale la casella principale è completamente contenuta o copre completamente l'intervallo di visibilità dell'avanzamento della visualizzazione all'interno dell'area di scorrimento. Questo dipende da se il soggetto è più alto o più basso dello scorrevole.

Per definire un intervallo, devi impostare intervallo-inizio e intervallo-fine. Ognuno è costituito da nome-intervallo (vedi l'elenco sopra) e da un offset-intervallo per determinare la posizione all'interno di quel nome-intervallo. L'offset 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 un soggetto entra, scegli entry 0% come intervallo iniziale. Per completare l'operazione entro il momento in cui il soggetto è entrato, scegli entry 100% come valore per la fine dell'intervallo.

In CSS, lo imposti 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 intervallo e in che modo le percentuali influiscono sulle posizioni iniziale e finale. Prova a impostare range-start su entry 0% e range-end su cover 50%, quindi trascina la barra di scorrimento per vedere il risultato dell'animazione.

Visualizzatore degli intervalli di Spostamenti, disponibile all'indirizzo https://goo.gle/view-timeline-range-tool

Guardare una registrazione

Come potresti notare mentre utilizzi questi strumenti per visualizzare gli intervalli di tempo, alcuni intervalli possono essere scelti come target da due diverse combinazioni di nome intervallo + 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 nome intervallo e coprono l'intero intervallo, dal 0% al 100%, puoi abbreviare il valore semplicemente con il nome dell'intervallo. Ad esempio, animation-range: entry 0% entry 100%; può essere riscritto come animation-range: entry, molto più breve.

Demo: rivelazione dell'immagine

Questa demo attenua le immagini quando entrano nell'area di scorrimento. Per farlo, utilizza una cronologia delle visualizzazioni anonime. L'intervallo di animazione è stato modificato in modo che ogni immagine sia completamente opaca quando si trova a metà dello scorrevole.

Demo: Rivelazione dell'immagine

✨ Provalo anche tu

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

Creazione di una cronologia di avanzamento della visualizzazione denominata in CSS

Analogamente alle versioni denominate delle schede Scorrimento, puoi anche creare schede Visualizzazione cronologia denominate. Anziché le proprietà scroll-timeline-*, utilizza le varianti con il prefisso view-timeline-, ovvero view-timeline-name e view-timeline-axis.

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

Demo: rivelazione dell'immagine, rivisitata

Se rielaboriamo la demo di visualizzazione dell'immagine di cui sopra, il codice rivisto sarà il seguente:

.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%;
}

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

✨ Provalo anche tu

Creazione di una cronologia di avanzamento della visualizzazione in JavaScript

Per creare una visualizzazione della cronologia in JavaScript, crea una nuova istanza della classe ViewTimeline. Passa un bag di proprietà con il subject da monitorare, axis e inset.

  • subject: un riferimento all'elemento che vuoi monitorare all'interno del relativo dispositivo di scorrimento.
  • axis: l'asse da monitorare. Come per la variante CSS, i valori accettati sono block, inline, x e y.
  • inset: un aggiustamento dell'area di scorrimento incassata (positivo) o aggettante (negativo) per determinare 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 passare le informazioni sull'intervallo utilizzando le proprietà rangeStart e rangeEnd.

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

✨ Provalo anche tu

Altre cose da provare

Collegamento a più intervalli della sequenza temporale della visualizzazione con un 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 nello scrollport dal basso, viene visualizzata con un effetto di scorrimento e dissolvenza, mentre quando esce dallo scrollport in alto, viene visualizzata con un effetto di scorrimento e dissolvenza in uscita.

Demo: Elenco contatti

✨ Provalo anche tu

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

✨ Provalo anche tu

Collegamento a una sequenza temporale di scorrimento non principale

Il meccanismo di ricerca per le schemi di scorrimento e le schemi di visualizzazione denominati è limitato solo agli antenati di scorrimento. Molto spesso, però, l'elemento che deve essere animato non è un elemento secondario dello scroller da monitorare.

Per farlo funzionare, entra in gioco la proprietà timeline-scope. Utilizza questa proprietà per dichiarare una sequenza temporale con quel nome senza crearla effettivamente. In questo modo, la sequenza temporale con quel nome avrà un ambito più ampio. In pratica, utilizzi la proprietà timeline-scope su un elemento principale condiviso in modo che la sequenza temporale di uno scorrevole 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 scorrevole con il nome --tl. Per impostazione predefinita, sarebbe visibile solo ai suoi figli, ma poiché .parent lo ha impostato come scroll-timeline-root, si attacca.
  • L'elemento .subject utilizza la sequenza temporale --tl. Esamina l'albero genealogico e trova --tl su .parent. Con il --tl su .parent che punta al --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 elemento principale (ovvero sollevazione), in modo che tutti gli elementi secondari dell'elemento principale possano accedervi.

La proprietà timeline-scope può essere utilizzata sia con le visualizzazioni Timeline (Cronologia) sia con le visualizzazioni di scorrimento delle relative schede.

Altre demo e risorse

Tutte le demo trattate in questo articolo sono disponibili sul mini sito scroll-driven-animations.style. Il sito web include molte altre dimostrazioni per mettere in evidenza cosa è possibile fare con le animazioni basate sullo scorrimento.

Una delle demo aggiuntive è questo elenco di copertine degli album. Ogni copertina ruota in 3D quando è al centro dell'attenzione.

Demo: Cover Flow

✨ Provalo anche tu

Oppure questa demo di schede impilate che utilizza position: sticky. Man mano che le schede si accumulano, quelle già bloccate si riducono di dimensioni, creando un piacevole effetto di profondità. Alla fine, l'intera serie scompare dalla visualizzazione come gruppo.

Demo: Impilare le schede.

✨ Provalo anche tu

Disponibile anche su scroll-driven-animations.style è una raccolta di strumenti come la visualizzazione dell'avanzamento dell'intervallo di sequenza temporale della visualizzazione inclusa in questo post.

Le animazioni basate sullo scorrimento sono trattate anche nella sezione Novità di Animate web di Google I/O '23.