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 d'affichage pour créer des animations pilotées par le défilement de manière déclarative.

Bramus

Publié le 5 mai 2023

Animations liées au défilement

Browser Support

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

Source

Les animations déclenchées par le défilement sont un modèle UX courant sur le Web. Une animation liée au défilement est associée à la position de défilement d'un conteneur de défilement. Autrement dit, lorsque vous faites défiler la page vers le haut ou vers le bas, l'animation associée avance ou revient en arrière en réponse directe. Par exemple, les images de fond en parallaxe ou les indicateurs de lecture qui se déplacent lorsque vous faites défiler la page.

Indicateur de lecture en haut d'un document, basé sur le défilement.

Un type d'animation liée au défilement similaire est une animation associée à la position d'un élément dans son conteneur de défilement. Par exemple, les éléments peuvent apparaître en fondu lorsqu'ils deviennent visibles.

Les images de cette page apparaissent progressivement à mesure qu'elles deviennent visibles.

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 entraîne deux problèmes principaux :

  • Les navigateurs modernes effectuent le défilement dans un processus distinct et fournissent donc des événements de défilement de manière asynchrone.
  • Les animations du thread principal sont sujettes aux saccades.

Il est donc impossible ou très difficile de créer des animations performantes basées sur le défilement et synchronisées avec celui-ci.

À partir de la version 115 de Chrome, vous pouvez utiliser un nouvel ensemble d'API et de concepts pour activer les animations déclaratives basées sur le défilement : les timelines de défilement et les timelines de vue.

Ces nouveaux concepts s'intègrent aux API Web Animations (WAAPI) et CSS Animations existantes, ce qui leur permet d'hériter des avantages de ces API. Cela inclut la possibilité d'exécuter des animations basées sur le défilement en dehors du thread principal. Oui, vous avez bien lu : vous pouvez désormais créer des animations fluides, déclenchées par le défilement et exécutées en dehors du thread principal, en ajoutant seulement quelques lignes de code. Que demander de plus ?

Animations sur le Web, petit 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 @@keyframes. Associez-le à 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. Il existe d'autres propriétés de forme longue animation-*, comme animation-easing-function et animation-fill-mode, pour n'en citer que quelques-unes, qui peuvent toutes être combinées dans la forme abrégée animation.

Par exemple, voici une animation qui met à l'échelle 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 peut être utilisée pour obtenir exactement le même résultat. Pour ce faire, vous pouvez créer des instances Animation et KeyFrameEffect, ou utiliser la méthode Element animate(), 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 de code JavaScript ci-dessus est identique à la version CSS précédente.

Chronologies d'animation

Par défaut, une animation associée à un élément est exécutée sur la timeline du document. Son heure d'origine commence à 0 lorsque la page se charge et progresse au fur et à mesure que l'heure avance. 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 des animations liées au défilement définit deux nouveaux types de timelines que vous pouvez utiliser :

  • Timeline de progression de défilement : timeline associée à la position de défilement d'un conteneur de défilement sur un axe particulier.
  • Timeline de progression d'affichage : timeline associé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 associé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 barre jusqu'en bas, la valeur de progression augmente 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. Comme pour la timeline de progression de défilement, c'est le décalage de défilement d'un conteneur de défilement qui est suivi. Mais contrairement à une timeline de progression de défilement, c'est ici la position relative d'un objet dans cette zone de défilement qui détermine la progression.

Ce comportement est comparable à celui de IntersectionObserver, qui peut 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 passe de 0 % à 100 %, entre le moment où le sujet entre dans le conteneur de défilement et celui où il le quitte.

Visualisation d'une timeline de progression d'affichage. La progression augmente de 0 % à 100 % lorsque le sujet (la boîte verte) traverse la barre de défilement.

✨ Essayez vous-même

Une timeline de progression d'affichage est souvent abrégée en "timeline d'affichage". 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.

Mettre en pratique 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(). Cela permet de créer 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 d'alignement 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. La valeur totale est donc scroll(root block).

Démo : Indicateur de progression de lecture

Cette démo comporte un indicateur de progression de lecture fixé en haut de la fenêtre d'affichage. À mesure que vous faites défiler la page vers le bas, la barre de progression s'agrandit jusqu'à occuper toute la largeur de la fenêtre d'affichage lorsque vous atteignez 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 lecture est positionné en haut de la page à l'aide de la position fixe. Pour exploiter les animations composées, ce n'est pas width qui est animé, mais l'élément est réduit sur l'axe X à l'aide d'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 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'étant fourni à scroll(), il utilisera ses valeurs par défaut.

Le scroller à suivre par défaut est nearest et l'axe par défaut est block. Cela cible efficacement le scroller racine, car il s'agit du scroller le plus proche de l'élément #progress, tout en suivant sa direction de 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. Bien qu'un peu plus détaillée, cette approche peut être 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 avec un identifiant de votre choix la propriété CSS scroll-timeline-name sur le conteneur de défilement. La valeur doit commencer par --.

Pour ajuster 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émo présente un indicateur d'étape au-dessus de chaque carrousel d'images. Lorsqu'un carrousel contient trois images, la barre d'indicateur commence à 33 % de largeur pour indiquer que vous regardez actuellement la première des trois images. Lorsque la dernière image est visible (c'est-à-dire lorsque le lecteur a défilé jusqu'à la fin), l'indicateur occupe toute la largeur du lecteur. Une timeline de progression de défilement nommée est utilisée pour piloter l'animation.

Démonstration : indicateur d'étape 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 positionné 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 les éléments .gallery__entry qu'il contient horizontalement et est l'élément qui défile. Le .gallery__progress est animé en fonction de sa position de défilement. 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 sac de propriétés avec les source et axis que vous souhaitez suivre.

  • source : référence à l'élément dont vous souhaitez suivre le défilement. Utilisez document.documentElement pour cibler le scroller 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-le en tant que propriété timeline et supprimez tout duration s'il y en avait.

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

Démonstration : indicateur de progression de lecture, revisité

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 : l'élément timeline créé suit le défilement racine et met à l'échelle l'élément #progress sur l'axe X de 0 % à 100 % lorsque vous faites défiler la page.

✨ Essayez vous-même

Utiliser la timeline de progression d'affichage de manière pratique

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 déterminant si un élément est considéré dans l'affichage ou non. La valeur doit être un pourcentage ou auto (valeur par défaut).auto

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

En utilisant le code suivant, chaque img s'affichera progressivement à mesure qu'il traversera 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 : plages de la timeline d'affichage

Par défaut, une animation liée à la timeline d'affichage est associée à l'intégralité de sa plage. 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 portion de plage concerné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.

Timeline 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 plages de timeline d'affichage suivantes :

  • cover : représente la plage complète de la timeline de progression de la vue.
  • 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 cadre de la bordure de fin.
  • exit-crossing : représente la plage pendant laquelle la zone principale croise le cadre de la bordure de début.
  • contain : représente la plage pendant laquelle la zone principale est entièrement incluse dans (ou couvre complètement) sa plage de visibilité de la progression d'affichage dans le conteneur 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 un début et une fin. Chacun se compose d'un nom de plage (voir la liste ci-dessus) et d'un décalage de plage pour déterminer la position dans ce nom de plage. Le décalage de plage est généralement un pourcentage compris entre 0% et 100%, mais vous pouvez également spécifier une longueur fixe, comme 20em.

Par exemple, si vous souhaitez exécuter une animation à partir du moment où un sujet entre, choisissez entry 0% comme début de plage. Pour que l'animation se termine au moment où le sujet entre dans le champ, choisissez entry 100% comme valeur de fin de plage.

En CSS, vous définissez cette propriété à l'aide de 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 à quoi correspond chaque nom de plage, et comment les pourcentages affectent les positions de début et de fin. Essayez de définir range-start sur entry 0% et range-end sur cover 50%, puis faites glisser la barre de défilement pour voir le résultat de l'animation.

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

Regarder un enregistrement

Comme vous l'aurez peut-être remarqué en utilisant ces outils, certaines plages peuvent être ciblées par deux combinaisons différentes de nom de plage et de décalage de plage. Par exemple, entry 0%, entry-crossing 0% et cover 0% ciblent tous la même zone.

Lorsque range-start et range-end ciblent le même range-name et couvrent toute la plage (de 0 % à 100 %), vous pouvez raccourcir la valeur en indiquant simplement 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éler une image

Dans cette démo, les images apparaissent progressivement lorsqu'elles entrent dans la zone de défilement. Pour ce faire, utilisez une timeline de progression d'affichage anonyme. La plage d'animation a été ajustée de sorte que chaque image soit à pleine opacité lorsqu'elle se trouve à mi-chemin du défilement.

Démonstration : Révéler une image

✨ Essayez vous-même

L'effet d'expansion est obtenu à l'aide d'un clip-path animé. Le code 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

Comme pour les timelines de défilement, vous pouvez également créer des timelines d'affichage nommées. Au lieu des propriétés scroll-timeline-*, utilisez des variantes portant 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 de recherche d'une timeline nommée s'appliquent.

Démonstration : Image à révéler, version revisitée

En retravaillant la démo de révélation d'image 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%;
}

En utilisant view-timeline-name: revealing-image, l'élément sera suivi dans son défileur le plus proche. La même valeur est ensuite utilisée comme valeur pour la propriété animation-timeline. Le résultat visuel est exactement le même qu'avant.

✨ Essayez vous-même

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

Pour créer une chronologie de vue en JavaScript, créez une instance de la classe ViewTimeline. Transmettez un sac de propriétés avec le subject que vous souhaitez suivre, axis et inset.

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

Pour l'associer à une animation Web, transmettez-le en tant que propriété timeline et supprimez tout duration s'il y en avait. 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 de vue à un ensemble d'images clés

Prenons l'exemple de cette démo de 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 par le bas, elle glisse et s'affiche progressivement. Lorsqu'elle quitte la zone de défilement par le haut, elle glisse et disparaît progressivement.

Démonstration : Liste de contacts

✨ Essayez vous-même

Pour cette démo, chaque élément est décoré avec une timeline d'affichage qui suit l'élément lorsqu'il traverse son port d'affichage, mais deux animations pilotées par le défilement y 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 différentes 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();
}

Comme 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

S'associer à une timeline de défilement non ancêtre

Le mécanisme de recherche des timelines de défilement et de vue nommées est limité aux ancêtres de défilement uniquement. Toutefois, très souvent, l'élément à animer n'est pas un enfant du scroller à suivre.

Pour que cela fonctionne, la propriété timeline-scope entre en jeu. Vous utilisez cette propriété pour déclarer une timeline portant ce nom sans la créer réellement. La portée de la timeline portant ce nom est ainsi élargie. En pratique, vous utilisez la propriété timeline-scope sur un élément parent partagé afin que la timeline d'un élément enfant de défilement puisse s'y attacher.

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 un calendrier nommé --tl. Tout enfant peut le 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 portant le nom --tl. Par défaut, il ne serait visible que par ses enfants, mais comme .parent l'a défini comme scroll-timeline-root, il s'y attache.
  • L'élément .subject utilise la timeline --tl. Il remonte l'arborescence de ses ancêtres et trouve --tl sur .parent. Avec le --tl sur le .parent pointant vers le --tl de .scroller, le .subject suivra essentiellement la timeline de progression de défilement de .scroller.

En d'autres termes, vous pouvez utiliser timeline-root pour déplacer une timeline vers un ancêtre (également appelé hoisting), afin que tous les enfants de l'ancêtre puissent y accéder.

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

Autres démonstrations et ressources

Toutes les démonstrations présentées dans cet article sur le mini-site scroll-driven-animations.style. Le site Web inclut de nombreuses autres démonstrations pour mettre en évidence ce qui est possible avec les animations pilotées par le défilement.

Cette liste de pochettes d'albums fait partie des démos supplémentaires. Chaque couverture pivote en 3D lorsqu'elle est mise en avant.

Démonstration : Cover Flow

✨ Essayez vous-même

Ou cette démo de cartes empilées qui utilise position: sticky. À mesure que les cartes s'empilent, celles qui sont déjà bloquées diminuent de taille, ce qui crée un bel effet de profondeur. À la fin, toute la pile disparaît de l'écran en tant que groupe.

Démonstration : empiler des cartes.

✨ Essayez vous-même

scroll-driven-animations.style propose également une collection d'outils, comme la visualisation de la progression de la plage de la timeline d'affichage qui a été incluse plus haut dans cet article.

Les animations liées au défilement sont également abordées dans Nouveautés en termes d'animations Web lors de la conférence Google I/O 2023.