Animer des éléments lors du défilement avec des animations liées au défilement

Découvrez comment utiliser les timelines de défilement et les timelines d'affichage pour créer des animations liées au défilement de manière déclarative.

Bramus

Animations liées au défilement

Navigateurs pris en charge

  • 115
  • 115
  • x

Source

Les animations liées au défilement sont un modèle d'expérience utilisateur courant sur le Web. Une animation liée au défilement est liée à la position de défilement d'un conteneur de défilement. Cela signifie que lorsque vous faites défiler l'écran vers le haut ou vers le bas, l'animation associée avance ou revient en arrière en réponse directe. Il peut s'agir, par exemple, d'images de fond en parallaxe ou d'indicateurs de lecture qui se déplacent lorsque vous faites défiler l'écran.

Indicateur de lecture affiché en haut d'un document, accessible par le défilement.

Un type similaire d'animation liée au défilement est une animation liée à la position d'un élément dans son conteneur de défilement. Ainsi, les éléments peuvent apparaître en fondu à mesure qu'ils apparaissent.

Les images de cette page apparaissent en fondu à mesure qu'elles s'affichent.

La méthode classique pour obtenir ce type d'effets consiste à répondre aux événements de défilement sur le thread principal, ce qui pose deux problèmes principaux:

  • Les navigateurs récents effectuent le défilement selon un processus distinct et affichent donc les événements de défilement de manière asynchrone.
  • Les animations du thread principal sont soumises à des à-coups.

Cela rend la création d'animations performantes liées au défilement et synchronisées avec le défilement impossible ou très difficile.

À partir de la version 115 de Chrome, vous disposez d'un nouvel ensemble d'API et de concepts pour activer les animations déclaratives basées sur le défilement : "Faire défiler les timelines" et "Afficher les timelines".

Ces nouveaux concepts s'intègrent aux API existantes Web Animations (WAAPI) et CSS Animations, ce qui leur permet d'hériter des avantages de ces API. Cela inclut la possibilité d'exécuter des animations liées au défilement en dehors du thread principal. Bonne lecture: vous pouvez désormais obtenir des animations fluides, générées par le défilement et exécutées à partir du thread principal, avec seulement quelques lignes de code supplémentaire. Qu'est-ce qu'il ne faut pas aimer ?!

Animations sur le Web, bref récapitulatif

Animations sur le Web avec CSS

Pour créer une animation en CSS, définissez un ensemble d'images clés à l'aide de la règle at @keyframes. Associez-la à un élément à l'aide de la propriété animation-name tout en définissant un animation-duration pour déterminer la durée de l'animation. D'autres propriétés de longue durée animation-* sont disponibles (animation-easing-function et animation-fill-mode, pour n'en citer que quelques-unes), qui peuvent toutes être combinées dans le raccourci animation.

Par exemple, voici une animation qui augmente la taille d'un élément sur l'axe X tout en modifiant sa couleur d'arrière-plan:

@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;
}

Animations sur le Web avec JavaScript

En JavaScript, l'API Web Animations permet d'obtenir exactement le même résultat. Pour ce faire, créez des instances Animation et KeyFrameEffect, ou utilisez la méthode Element animate(), qui est beaucoup plus courte.

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

Le résultat visuel de l'extrait JavaScript ci-dessus est identique à celui de la version CSS précédente.

Chronologies des animations

Par défaut, une animation associée à un élément s'exécute sur la timeline du document. Son heure d'origine commence à 0 lors du chargement de la page et avance à mesure que l'heure de l'horloge progresse. Il s'agit de la timeline d'animation par défaut et, jusqu'à présent, elle était la seule que vous pouviez utiliser.

La spécification d'animations liées au défilement définit deux nouveaux types de timelines que vous pouvez utiliser:

  • Scroll Progress Timeline (Timeline de progression de défilement) : timeline associée à la position de défilement d'un conteneur de défilement le long d'un axe particulier.
  • Afficher la timeline de progression: une timeline liée à la position relative d'un élément particulier dans son conteneur de défilement.

Timeline de progression de défilement

Une timeline de progression de défilement est une timeline d'animation qui est liée à la progression de la position de défilement d'un conteneur de défilement (également appelé scrollport ou scroller) sur un axe particulier. Elle convertit une position dans une plage de défilement en un pourcentage de progression.

La position de défilement de début représente 0 % de progression et la position de défilement de fin représente 100 % de progression. Dans la visualisation suivante, vous pouvez voir que la progression augmente de 0% à 100% lorsque vous faites défiler la barre de défilement de haut en bas.

Visualisation d'une timeline de progression de défilement. Lorsque vous faites défiler la page jusqu'en bas, la valeur de progression passe de 0% à 100%.

✨ Essayez vous-même

Une timeline de progression de défilement est souvent abrégée en "Timeline de défilement".

Timeline de progression d'affichage

Ce type de timeline est associé à la progression relative d'un élément particulier dans un conteneur de défilement. Tout comme la timeline de progression de défilement, c'est le décalage de défilement d'un conteneur de défilement qui est suivi. Contrairement à une timeline de progression de défilement, c'est la position relative d'un sujet dans cette zone de défilement qui détermine la progression.

Ce fonctionnement est comparable à celui de IntersectionObserver, qui permet de suivre la visibilité d'un élément dans le conteneur de défilement. Si l'élément n'est pas visible dans le conteneur de défilement, il n'y a pas d'intersection. S'il est visible dans le conteneur de défilement, même s'il s'agit d'une toute petite partie, il y a intersection.

La timeline de progression d'affichage démarre dès qu'il y a intersection entre le sujet et le conteneur de défilement et se termine lorsqu'il n'y a plus d'intersection. Dans la visualisation suivante, vous pouvez voir que la progression commence à partir de 0% lorsque le sujet entre dans le conteneur de défilement et atteint 100% au moment précis où le sujet a quitté le conteneur de défilement.

Visualisation d'une timeline de progression d'affichage. La progression est comptabilisée de 0% à 100% lorsque le sujet (encadré vert) traverse la zone de défilement.

✨ Essayez vous-même

Une timeline de progression d'affichage est souvent abrégée en "Afficher la timeline". Il est possible de cibler des parties spécifiques d'une timeline d'affichage en fonction de la taille du sujet, mais nous y reviendrons plus tard.

Se familiariser avec les timelines de progression de défilement

Créer une timeline de progression de défilement anonyme en CSS

Le moyen le plus simple de créer une timeline de défilement en CSS consiste à utiliser la fonction scroll(). Vous créez ainsi une timeline de défilement anonyme que vous pouvez définir comme valeur de la nouvelle propriété animation-timeline.

Exemple :

@keyframes animate-it { … }

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

La fonction scroll() accepte les arguments <scroller> et <axis>.

Les valeurs acceptées pour l'argument <scroller> sont les suivantes :

  • nearest: utilise le conteneur de défilement qui est l'ancêtre le plus proche (par défaut).
  • root: utilise la fenêtre d'affichage du document comme conteneur de défilement.
  • self: utilise l'élément lui-même comme conteneur de défilement.

Les valeurs acceptées pour l'argument <axis> sont les suivantes :

  • block: utilise la mesure de la progression sur l'axe de bloc du conteneur de défilement (par défaut).
  • inline: utilise la mesure de la progression sur l'axe intégré du conteneur de défilement.
  • y: utilise la mesure de la progression sur l'axe Y du conteneur de défilement.
  • x: utilise la mesure de la progression sur l'axe X du conteneur de défilement.

Par exemple, pour lier une animation au conteneur de défilement racine sur l'axe de bloc, les valeurs à transmettre dans scroll() sont root et block. Résumé, la valeur est scroll(root block).

Démonstration: indicateur de progression de la lecture

Dans cette démonstration, un indicateur de progression de la lecture est fixé en haut de la fenêtre d'affichage. Lorsque vous faites défiler la page vers le bas, la barre de progression s'agrandit jusqu'à ce qu'elle occupe toute la largeur de la fenêtre d'affichage jusqu'à la fin du document. Une timeline de progression de défilement anonyme est utilisée pour piloter l'animation.

Démonstration: Indicateur de progression de la lecture

✨ Essayez vous-même

L'indicateur de progression de la lecture est positionné en haut de la page avec une position fixe. Pour exploiter les animations composées, l'élément width n'est pas animé, mais il est réduit sur l'axe des abscisses à l'aide d'un élément 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 timeline de l'animation grow-progress sur l'élément #progress est définie sur une timeline anonyme créée à l'aide de scroll(). Aucun argument n'est fourni à scroll(). Les valeurs par défaut seront donc rétablies.

Le conteneur de défilement par défaut à suivre est nearest, et l'axe par défaut est block. Cela permet de cibler efficacement le conteneur de défilement racine, car il s'agit du conteneur de défilement le plus proche de l'élément #progress, tout en suivant la direction du bloc.

Créer une timeline de progression de défilement nommée en CSS

Une autre façon de définir une timeline de progression de défilement consiste à en utiliser une nommée. Elle est un peu plus détaillée, mais elle peut s'avérer utile lorsque vous ne ciblez pas un conteneur de défilement parent ou racine, ou lorsque la page utilise plusieurs timelines ou lorsque les recherches automatiques ne fonctionnent pas. Vous pouvez ainsi identifier une timeline de progression de défilement par le nom que vous lui donnez.

Pour créer une timeline de progression de défilement nommée sur un élément, définissez la propriété CSS scroll-timeline-name sur le conteneur de défilement avec un identifiant de votre choix. La valeur doit commencer par --.

Pour modifier l'axe à suivre, déclarez également la propriété scroll-timeline-axis. Les valeurs autorisées sont les mêmes que pour l'argument <axis> de scroll().

Enfin, pour lier l'animation à la timeline de progression de défilement, définissez la propriété animation-timeline de l'élément à animer sur la valeur utilisée pour l'identifiant de scroll-timeline-name.

Exemple de code:

@keyframes animate-it { … }

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

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

Si vous le souhaitez, vous pouvez combiner scroll-timeline-name et scroll-timeline-axis dans le raccourci scroll-timeline. Exemple :

scroll-timeline: --my-scroller inline;

Cette démonstration présente un indicateur de pas affiché au-dessus de chaque carrousel d'images. Lorsqu'un carrousel contient trois images, la barre d'indicateur commence à 33% de la largeur pour indiquer que vous consultez actuellement l'image 1 sur 3. Lorsque la dernière image est dans la vue (ce qui est déterminé par le défilement jusqu'à la fin du conteneur de défilement), l'indicateur occupe toute la largeur de la zone de défilement. Une timeline de progression de défilement nommée est utilisée pour piloter l'animation.

Démonstration: Indicateur de pas du carrousel horizontal

✨ Essayez vous-même

Le balisage de base d'une galerie est le suivant:

<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'élément .gallery__progress est placé de manière absolue dans l'élément wrapper .gallery. Sa taille initiale est déterminée par la propriété personnalisée --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 dispose horizontalement les éléments .gallery__entry contenus et c'est l'élément qui défile. En suivant sa position de défilement, .gallery__progress s'anime. Pour ce faire, faites référence à la timeline de progression de défilement nommée --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;
}

Créer une timeline de progression de défilement avec JavaScript

Pour créer une timeline de défilement en JavaScript, créez une instance de la classe ScrollTimeline. Transmettez un bagage de propriété avec les éléments source et axis que vous souhaitez suivre.

  • source: référence à l'élément dont vous souhaitez suivre le conteneur de défilement. Utilisez document.documentElement pour cibler le conteneur de défilement racine.
  • axis: détermine l'axe à suivre. Comme pour la variante CSS, les valeurs acceptées sont block, inline, x et y.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

Pour l'associer à une animation Web, transmettez-la en tant que propriété timeline et omettez les duration s'il y en a une.

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

Démonstration: Indicateur de progression de la lecture, revisitée

Pour recréer l'indicateur de progression de la lecture avec JavaScript, tout en utilisant le même balisage, utilisez le code JavaScript suivant:

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,
    }),
  }
);

Le résultat visuel est identique dans la version CSS: le timeline créé suit le conteneur de défilement racine et redimensionne #progress sur l'axe X de 0% à 100% lorsque vous faites défiler la page.

✨ Essayez vous-même

Se familiariser avec la timeline de progression d'affichage

Créer une timeline de progression d'affichage anonyme en CSS

Pour créer une timeline de progression d'affichage, utilisez la fonction view(). Les arguments acceptés sont <axis> et <view-timeline-inset>.

  • <axis> est le même argument que pour la timeline de progression de défilement. Il définit l'axe à suivre. La valeur par défaut est block.
  • Avec <view-timeline-inset>, vous pouvez spécifier un décalage (positif ou négatif) pour ajuster les limites lorsqu'un élément est considéré comme visible ou non. La valeur doit être un pourcentage ou auto, auto étant la valeur par défaut.

Par exemple, pour lier une animation à un élément qui présente une intersection avec son conteneur de défilement sur l'axe de bloc, utilisez view(block). Comme pour scroll(), définissez cette valeur comme valeur de la propriété animation-timeline et n'oubliez pas de définir animation-duration sur auto.

À l'aide du code suivant, chaque img apparaît en fondu lorsqu'il traverse la fenêtre d'affichage pendant que vous faites défiler la page.

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

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

Intermezzo: afficher des plages de chronologie

Par défaut, une animation liée à la timeline d'affichage est associée à l'intégralité de la plage de la timeline. Le processus commence dès que le sujet est sur le point d'entrer dans la zone de défilement et se termine lorsqu'il l'a complètement quittée.

Vous pouvez également associer l'animation à une partie spécifique de la timeline d'affichage en indiquant la plage à laquelle elle doit être associée. Par exemple, il peut s'agir de la phase d'entrée du sujet dans la zone de défilement. Dans la visualisation suivante, la progression commence à partir de 0 % lorsque le sujet entre dans le conteneur de défilement, mais elle atteint déjà 100 % dès que l'intersection est complète.

Chronologie d'affichage définie pour suivre la plage d'entrée du sujet. L'animation ne s'exécute que lorsque le sujet entre dans la zone de défilement.

Vous pouvez cibler les périodes d'affichage suivantes:

  • cover: représente la plage complète de la timeline de progression d'affichage.
  • entry: représente la plage pendant laquelle la zone principale entre dans la plage de visibilité de la progression d'affichage.
  • exit: représente la plage pendant laquelle la zone principale quitte la plage de visibilité de la progression d'affichage.
  • entry-crossing: représente la plage pendant laquelle la zone principale croise le bord de la bordure finale.
  • exit-crossing: représente la plage pendant laquelle la zone principale croise le bord de la bordure de début.
  • contain: représente la plage pendant laquelle la zone principale est entièrement incluse dans (ou couvre entièrement) sa plage de visibilité de la progression d'affichage dans la zone de défilement. Cela dépend si le sujet est plus grand ou plus petit que le conteneur de défilement.

Pour définir une plage, vous devez définir le début et la fin de la plage. Chacune se compose d'un nom de plage (voir la liste ci-dessus) et d'un décalage de plage pour déterminer la position au sein de ce nom. Le décalage de la plage est généralement un pourcentage compris entre 0% et 100%, mais vous pouvez également spécifier une longueur fixe, telle que 20em.

Par exemple, si vous voulez exécuter une animation à partir du moment où un sujet entre, choisissez entry 0% comme début de la plage. Pour qu'elle soit terminée au moment où l'objet est entré, choisissez entry 100% comme valeur de fin de plage.

En CSS, vous définissez cet élément à l'aide de la propriété animation-range. Exemple :

animation-range: entry 0% entry 100%;

En JavaScript, utilisez les propriétés rangeStart et rangeEnd.

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

Utilisez l'outil intégré ci-dessous pour voir ce que chaque nom de plage représente et comment les pourcentages affectent les positions de début et de fin. Définissez le début de la plage sur entry 0% et la fin de la plage sur cover 50%, puis faites glisser la barre de défilement pour voir le résultat de l'animation.

Visualiseur des plages de chronologie d'affichage, disponible à l'adresse https://goo.gle/view-timeline-range-tool

Regarder un enregistrement

Comme vous pouvez le remarquer, lorsque vous vous amusez avec les outils d'affichage des plages de la timeline, certaines plages peuvent être ciblées par deux combinaisons nom de plage + décalage de plage différentes. Par exemple, entry 0%, entry-crossing 0% et cover 0% ciblent tous la même zone.

Lorsque les valeurs de début et de fin ciblent le même nom de plage et s'étendent sur toute la plage (de 0% à 100 %), vous pouvez raccourcir la valeur pour n'utiliser que le nom de la plage. Par exemple, animation-range: entry 0% entry 100%; peut être réécrit en animation-range: entry, qui est beaucoup plus court.

Démonstration: révélation d'images

Cette démonstration s'efface en fondu dans les images lorsqu'elles entrent dans la zone de défilement. Pour ce faire, utilisez une timeline d'affichage anonyme. La plage d'animation a été modifiée de sorte que chaque image présente une opacité totale à la moitié du conteneur de défilement.

Démonstration: Affichage d'une image

✨ Essayez vous-même

L'effet d'expansion est obtenu à l'aide d'un chemin de rognage animé. Le CSS utilisé pour cet effet est le suivant:

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

Créer une timeline de progression d'affichage nommée en CSS

De la même manière que les timelines de défilement ont des versions nommées, vous pouvez également créer des timelines d'affichage nommées. Au lieu des propriétés scroll-timeline-*, vous utilisez des variantes comportant le préfixe view-timeline-, à savoir view-timeline-name et view-timeline-axis.

Le même type de valeurs s'applique et les mêmes règles pour la recherche d'une chronologie nommée s'appliquent.

Démonstration: révélation d'images, revisitée

En retravaillant la démonstration de révélation d'images précédente, le code révisé se présente comme suit:

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

Avec view-timeline-name: revealing-image, l'élément est suivi dans le conteneur de défilement le plus proche. La même valeur est ensuite utilisée comme valeur pour la propriété animation-timeline. La sortie visuelle est exactement la même qu'avant.

✨ Essayez vous-même

Créer une timeline de progression d'affichage en JavaScript

Pour créer une timeline d'affichage en JavaScript, créez une instance de la classe ViewTimeline. Transmettez un bagage de propriété avec le subject que vous souhaitez suivre, axis et inset.

  • subject: référence à l'élément que vous souhaitez suivre dans son propre conteneur de défilement.
  • axis: axe à suivre. Comme pour la variante CSS, les valeurs acceptées sont block, inline, x et y.
  • inset: ajustement d'encart (positif) ou (négatif) de début de la zone de défilement pour déterminer si la zone est visible.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Pour l'associer à une animation Web, transmettez-la en tant que propriété timeline et omettez les duration s'il y en a une. Vous pouvez également transmettre des informations sur la plage à l'aide des propriétés rangeStart et rangeEnd.

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

✨ Essayez vous-même

Autres suggestions

Associer à plusieurs plages de la timeline d'affichage avec un seul ensemble d'images clés

Jetons un coup d'œil à cette démonstration de la liste de contacts, où les entrées de la liste sont animées. Lorsqu'une entrée de liste entre dans la zone de défilement en bas, elle glisse et disparaît en fondu et, lorsqu'elle quitte la zone de défilement située en haut, elle glisse et disparaît en fondu.

Démonstration: Liste de contacts

✨ Essayez vous-même

Dans cette démonstration, chaque élément est décoré d'une timeline d'affichage qui suit l'élément lorsqu'il traverse sa zone de défilement, mais deux animations liées au défilement lui sont associées. L'animation animate-in est associée à la plage entry de la timeline, et l'animation animate-out à la plage exit de la timeline.

@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;
}

Au lieu d'exécuter deux animations distinctes associées à deux plages différentes, vous pouvez également créer un ensemble d'images clés qui contient déjà les informations de plage.

@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();
}

Étant donné que les images clés contiennent les informations de plage, vous n'avez pas besoin de spécifier animation-range. Le résultat est exactement le même qu'avant.

✨ Essayez vous-même

Associer à une timeline de défilement non ancêtre

Le mécanisme de recherche des timelines de défilement et des timelines d'affichage nommées se limite aux ancêtres de défilement uniquement. Cependant, la plupart du temps, l'élément à animer n'est pas un enfant de la zone de défilement qui doit faire l'objet d'un suivi.

Pour que cela fonctionne, la propriété timeline-scope entre en jeu. Vous utiliserez cette propriété pour déclarer une chronologie portant ce nom sans la créer. Cela donne à la chronologie portant ce nom une portée plus large. En pratique, vous utilisez la propriété timeline-scope sur un élément parent partagé afin que la timeline d'un conteneur de défilement enfant puisse lui être associée.

Exemple :

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

Dans cet extrait:

  • L'élément .parent déclare une chronologie intitulée --tl. Tout enfant de celle-ci peut la trouver et l'utiliser comme valeur pour la propriété animation-timeline.
  • L'élément .scroller définit en fait une timeline de défilement sous le nom --tl. Par défaut, il n'est visible que par ses enfants. Cependant, comme .parent l'a défini comme scroll-timeline-root, il s'y associe.
  • L'élément .subject utilise la chronologie --tl. Il gravit son arbre ancêtre et trouve --tl sur le .parent. Avec --tl sur .parent pointant vers l'--tl de .scroller, le .subject suit essentiellement la timeline de progression de défilement de .scroller.

Autrement dit, vous pouvez utiliser timeline-root pour déplacer une chronologie vers le haut vers un ancêtre (c'est-à-dire le hissage), afin que tous les enfants de l'ancêtre puissent y accéder.

La propriété timeline-scope peut être utilisée à la fois avec les timelines de défilement et les timelines d'affichage.

Autres démonstrations et ressources

Toutes les démonstrations couvertes dans cet article sur le mini-site Scroll-driven-animations.style Le site Web propose de nombreuses autres démos montrant ce qu'il est possible de faire avec les animations liées au défilement.

L'une des démos supplémentaires est cette liste de pochettes d'albums. Chaque couverture pivote en 3D lorsqu'elle prend le projecteur central.

Démonstration: Flux de couverture

✨ Essayez vous-même

Vous pouvez aussi utiliser cette démonstration d'empilement de cartes qui exploite position: sticky. Lorsque les cartes s'empilent, les cartes déjà collées diminuent, ce qui crée un joli effet de profondeur. Au final, toute la pile disparaît en tant que groupe.

Démonstration: empiler des cartes.

✨ Essayez vous-même

Sur scroll-driven-animations.style, on trouve un ensemble d'outils comme la visualisation de la progression de la plage de la timeline d'affichage, incluse plus tôt dans cet article.

Les animations liées au défilement sont également présentées dans l'article What's new in Web Animations (Nouveautés en matière d'animations Web) de la conférence Google I/O 2023.