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

Publié le 5 mai 2023

Animations basées sur le défilement

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

Les animations déclenchées par le défilement sont un modèle d'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 au-dessus d'un document, basé sur le défilement.

Un type d'animation similaire est une animation lié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 entrent dans le champ de vision.

Les images de cette page apparaissent progressivement.

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 envoient donc des événements de défilement de manière asynchrone.
  • Les animations du thread principal sont sujettes à des à-coups.

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

À 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 chronologies de défilement et les chronologies 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 existantes. 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, basées sur le défilement, exécutées sur le thread principal, avec seulement quelques lignes de code supplémentaires. Que ne faut-il pas aimer ?

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 d'instruction @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. D'autres propriétés animation-* manuscrites sont disponibles (animation-easing-function et animation-fill-mode, par exemple), et peuvent toutes être combinées dans la sténographie 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, vous pouvez utiliser l'API Web Animations 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 animate() Element, 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 à la version CSS précédente.

Timelines des animations

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 commence à avancer au fur et à mesure que le temps passe. 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 basées sur le 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 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 de défilement jusqu'en bas, la valeur de progression augmente de 0% à 100%.

✨ Essayez-le 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 une 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 ici la position relative d'un objet dans cette zone de défilement qui détermine la progression.

Cela est quelque peu comparable au fonctionnement 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 commence à partir de 0% lorsque le sujet entre dans le conteneur de défilement et atteint 100% au moment où il le quitte.

Visualisation d'une timeline de progression d'affichage. La progression passe de 0% à 100% lorsque le sujet (cadre vert) traverse la barre de défilement.

✨ Essayez-le 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 de l'objet, mais nous y reviendrons plus tard.

Utiliser des 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 est donc scroll(root block).

Démonstration: Indicateur de progression de la lecture

Cette démonstration comporte un indicateur de progression de la lecture fixé en haut de la fenêtre d'affichage. Lorsque vous faites défiler la page, 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 animer l'animation.

Démonstration: Indicateur de progression de la lecture.

✨ Essayez-le vous-même

L'indicateur de progression de la lecture est positionné en haut de la page à l'aide de la propriété "position: fixed". Pour exploiter les animations composées, ce n'est pas le width qui est animé, mais l'élément est réduit à l'échelle 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'est fourni à scroll(). Il utilisera donc ses valeurs par défaut.

Le contrôleur de défilement par défaut à suivre est nearest, et l'axe par défaut est block. Cela cible 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 de son 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 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 l'abréviation scroll-timeline. Exemple :

scroll-timeline: --my-scroller inline;

Cette démonstration présente un indicateur de progression 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 image sur trois. Lorsque la dernière image est visible (déterminé par le fait que la barre de défilement est arrivée en fin de défilement), l'indicateur occupe toute la largeur de la barre de défilement. Une timeline de progression de défilement nommée est utilisée pour piloter l'animation.

Démonstration: Indicateur de progression du carrousel horizontal.

✨ Essayez-le vous-même

Voici le balisage de base d'une galerie:

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

Le .gallery__scrollcontainer organise les éléments .gallery__entry contenus horizontalement et est l'élément qui défile. En suivant sa position de défilement, l'.gallery__progress est animé. Pour ce faire, reportez-vous à 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 chronologie 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 omettez tout duration, le cas échéant.

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

✨ Essayez-le vous-même

Utiliser 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 déterminant si un élément est considéré dans l'affichage 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 croise son conteneur de défilement sur l'axe de bloc, utilisez view(block). Comme pour scroll(), définissez-le comme valeur de la propriété animation-timeline et n'oubliez pas de définir animation-duration sur auto.

Avec le code suivant, chaque img apparaîtra progressivement lorsqu'il traversera le viewport pendant le défilement.

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

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

Intermezzo: Plage 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 la quitte complètement.

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.

Une timeline d'affichage définie pour suivre la plage d'entrée de l'objet. 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 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 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 des valeurs de début et de fin. Chacune d'elles 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, par exemple 20em.

Par exemple, si vous souhaitez exécuter une animation à partir du moment où un sujet entre dans la scène, choisissez entry 0% comme début de plage. Pour que la tâche soit terminée au moment où l'objet est saisi, choisissez entry 100% comme valeur pour la fin de la plage.

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

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

Regarder un enregistrement

Comme vous pouvez le constater lorsque vous utilisez ces outils, certaines périodes peuvent être ciblées par deux combinaisons nom de période + décalage de période différentes. Par exemple, entry 0%, entry-crossing 0% et cover 0% ciblent tous la même zone.

Lorsque les valeurs "range-start" et "range-end" ciblent le même nom de plage 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 remplacé par animation-range: entry, qui est beaucoup plus court.

Démonstration: révéler une image

Cette démonstration fait apparaître les images en fondu 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 pour que chaque image soit totalement opaque lorsqu'elle est à mi-chemin du défilement.

Démonstration: Révélation d'image

✨ Essayez-le vous-même

L'effet d'expansion est obtenu à l'aide d'un clip-path animé. Voici le code CSS utilisé pour cet effet:

@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 versions nommées des timelines de défilement, vous pouvez également créer des timelines d'affichage nommées. Au lieu des propriétés scroll-timeline-*, vous 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 chronologie nommée s'appliquent.

Démonstration: Image mystère, revisitée

Après avoir retravaillé la démonstration 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%;
}

Avec view-timeline-name: revealing-image, l'élément sera suivi dans son contrôleur de défilement 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-le vous-même

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

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

  • subject: référence à l'élément que vous souhaitez suivre dans son propre barre de défilement.
  • axis: axe à suivre. Comme pour la variante CSS, les valeurs acceptées sont block, inline, x et y.
  • inset: ajustement du conteneur de défilement en insérant (positif) ou en extrudant (négatif) pour déterminer si la zone 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 omettez tout duration, le cas échéant. Vous pouvez également transmettre des informations de plage à l'aide des propriétés rangeStart et rangeEnd.

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

✨ Essayez-le vous-même

Autres suggestions

Associer plusieurs plages de la timeline de la vue avec un ensemble d'images clés

Voyons cette démonstration de liste de contacts dans laquelle 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 s'affiche en fondu, et lorsqu'elle la quitte en haut, elle glisse et s'efface en fondu.

Démonstration: Liste de contacts

✨ Essayez-le vous-même

Pour cette démonstration, chaque élément est décoré d'une timeline d'affichage qui le suit lorsqu'il traverse son scrollport, mais deux animations basées sur le 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 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-le vous-même

Associer à une timeline de défilement qui n'est pas un ancêtre

Le mécanisme de recherche des timelines de défilement et d'affichage nommées est limité aux ancêtres de défilement uniquement. Cependant, bien souvent, l'élément à animer n'est pas un enfant du défileur à suivre.

Pour ce faire, la propriété timeline-scope entre en jeu. Vous utilisez cette propriété pour déclarer une chronologie avec ce nom sans la créer. La chronologie portant ce nom aura ainsi une portée plus large. En pratique, vous utilisez la propriété timeline-scope sur un élément parent partagé afin qu'une chronologie de défilement enfant puisse s'y associer.

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 avec le nom --tl. Tout enfant de celui-ci 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 avec 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 son arbre généalogique et trouve --tl sur .parent. Avec le --tl sur le .parent pointant vers le --tl de .scroller, le .subject suit essentiellement la timeline de progression de défilement de .scroller.

En d'autres termes, vous pouvez utiliser timeline-root pour déplacer une chronologie vers un ancêtre (également appelé hissage), 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 abordées dans cet article sont disponibles sur le mini-site scroll-driven-animations.style. Le site Web inclut de nombreuses autres démonstrations pour mettre en avant les possibilités offertes par les animations basées sur le défilement.

L'une des démonstrations supplémentaires est cette liste de pochettes d'albums. Chaque couverture tourne en 3D lorsqu'elle est mise en avant.

Démonstration: Cover Flow

✨ Essayez-le vous-même

ou cette démonstration de cartes empilées qui exploite position: sticky. À mesure que les cartes se superposent, celles déjà collées sont réduites, ce qui crée un bel effet de profondeur. À la fin, l'ensemble de la pile disparaît de l'écran.

Démonstration: empiler des cartes.

✨ Essayez-le vous-même

Vous trouverez également sur scroll-driven-animations.style un ensemble d'outils tels que la visualisation de la progression de la plage de la timeline d'affichage, qui a été incluse plus tôt dans cet article.

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