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

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 esegue lo scrubbing in avanti o indietro nella 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 posizionato sopra un documento, guidato dallo 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 man mano che entrano nel campo visivo.

Le immagini in questa pagina spariscono man mano che vengono visualizzate.

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 ad alte prestazioni basate sullo scorrimento 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 attuali API Web Animations (WAAPI) e CSS Animations, consentendo loro di ereditare i vantaggi offerti da queste API. Ciò include la possibilità di far funzionare animazioni basate sullo scorrimento dal thread principale. Sì, leggi bene: ora puoi avere animazioni fluide e fluide, guidate dallo scorrimento, che vengono eseguite dal thread principale, con poche righe di codice extra. Cosa c'è di no?

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 Animation e KeyFrameEffect o 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. L'ora di origine inizia da 0 quando viene caricata la pagina e inizia a scorrere in avanti man mano che l'orologio avanza. Si tratta della sequenza temporale di animazione predefinita e, finora, era l'unica a cui avevi accesso.

La specifica delle animazioni basate su scorrimento definisce due nuovi tipi di sequenze 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 sequenza temporale collegata alla posizione relativa di un determinato elemento all'interno del relativo contenitore di scorrimento.

Scorrere la cronologia dell'avanzamento

Una sequenza temporale dell'avanzamento di scorrimento è una sequenza temporale dell'animazione collegata all'avanzamento nella posizione di scorrimento di un contenitore di scorrimento, detta 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 visualizzazione seguente, puoi vedere che l'avanzamento passa da 0% a 100% mentre scorri la barra di scorrimento 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 è 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 dello scorrevole, anche per la parte più piccola, è incrociato.

La sequenza temporale dell'avanzamento della visualizzazione inizia dal momento in cui un soggetto inizia a intersecarsi con la barra di scorrimento e termina quando il soggetto smette di intersecarsi con la barra di scorrimento. 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.

✨ Fai una prova

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.

Fare pratica con le sequenze temporali dell'avanzamento di 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 (valore predefinito).
  • 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 dell'avanzamento 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. Insieme, il valore è 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 di avanzamento dello scorrimento anonima.

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, in quanto è 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 è utilizzare una sequenza temporale denominata. È un po' più dettagliato, ma può tornare utile quando non hai scelto come target un dispositivo di scorrimento principale o uno di scorrimento principale oppure se 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 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 dell'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 necessario, puoi combinare scroll-timeline-name e scroll-timeline-axis nella forma 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 è visualizzata l'ultima immagine, determinata dallo scorrimento fino alla fine da parte della barra di scorrimento, l'indicatore occupa l'intera larghezza della barra di scorrimento. 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. La sua dimensione iniziale è determinata 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. Monitorando la posizione di scorrimento, il .gallery__progress viene animato. Per farlo, fai riferimento alla cronologia dell'avanzamento di 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 dell'avanzamento di scorrimento con JavaScript

Per creare una sequenza temporale di scorrimento in JavaScript, crea una nuova istanza della classe ScrollTimeline. Passa un bag di proprietà con i valori 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, trasmettilo 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 quando 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 visualizzazione della cronologia si applica all'intero intervallo di tempo. L'azione inizia dal momento in cui il soggetto sta per entrare nell'area di scorrimento e termina quando il soggetto ha lasciato completamente l'area di scorrimento.

È anche possibile collegarlo a una parte specifica della sequenza temporale della visualizzazione specificando l'intervallo a cui deve essere collegato. Questo può accadere, ad esempio, solo quando il soggetto sta entrando nella barra di scorrimento. Nella seguente visualizzazione, l'avanzamento inizia a conteggiare dall'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 visualizzazione della cronologia 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 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 il campo fine 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 come le percentuali influiscono sulle posizioni iniziali e finali. Prova a impostare range-start su entry 0% e range-end su cover 50%, quindi trascina la barra di scorrimento per visualizzare il risultato dell'animazione.

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

Guardare una registrazione

Come puoi notare, mentre giochi con gli strumenti Visualizza intervalli cronologia, alcuni intervalli possono essere scelti come target da due diverse combinazioni 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 a come le sequenze temporali di scorrimento hanno un nome di versioni, puoi anche creare sequenze temporali denominate Visualizza sequenze temporali. Al posto delle proprietà scroll-timeline-*, utilizzi varianti che includono 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 dell'immagine, rivisitata

Rielaborando la demo sull'immagine mostrata in precedenza, 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 dello scorrimento 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. Facoltativamente, trasmetti 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 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.

Demo: Elenco contatti

✨ Provalo anche tu

Per questa demo, ogni elemento viene decorato con una sequenza temporale delle visualizzazioni che tiene traccia dell'elemento mentre attraversa la relativa area di scorrimento, ma vi sono collegate 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;
}

Invece di eseguire due animazioni diverse associate a due intervalli diversi, è anche possibile creare un set 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 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 in realtà definisce 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, 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 rimanda al --tl del .scroller, .subject in pratica monitorerà la sequenza temporale dell'avanzamento di 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 Scorri schemi temporali sia con quelle Visualizza schemi temporali.

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 mentre prende il centro dell'area in evidenza.

Demo: Cover Flow

✨ Provalo anche tu

Oppure questa demo di schede impilate che utilizza position: sticky. Man mano che le schede vengono impilate, 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

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

Le animazioni basate sullo scorrimento sono trattate anche nella pagina Novità delle animazioni web al Google I/O '23.