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.

Animations liées au défilement

Les animations basées sur le défilement sont un modèle UX 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 recule en réponse directe. Il peut s'agir, par exemple, d'images de fond parallaxes ou d'indicateurs de lecture qui se déplacent lorsque vous faites défiler l'écran.

<ph type="x-smartling-placeholder">

</ph>

Une animation liée au défilement est un type similaire d'animation liée au défilement. Elle est liée à la position d'un élément dans son conteneur de défilement. Avec lui, par exemple, les éléments peuvent apparaître en fondu à mesure qu'ils entrent dans le champ de vision.

<ph type="x-smartling-placeholder">

</ph>

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 récents effectuent le défilement selon un processus distinct et diffusent donc des événements de défilement de manière asynchrone.
• Les animations du thread principal sont soumises à 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, un nouvel ensemble d'API et de concepts vous permet d'activer les animations déclaratives liées au défilement: les timelines de défilement et les timelines d'affichage.

Ces nouveaux concepts s'intègrent aux API Web Animations (WAAPI) et CSS Animations existantes, ce qui leur permet d'hériter des avantages qu'apportent ces API. Cela inclut la possibilité d'exécuter des animations liées au défilement à partir du thread principal. Vous pouvez désormais avoir des animations fluides, déclenchées par le défilement et exécutées à partir du thread principal, avec seulement quelques lignes de code supplémentaires. Pourquoi ne pas aimer ?

Petit récapitulatif des animations sur le Web

Animations sur le Web avec CSS

Pour créer une animation au format CSS, définissez un ensemble d'images clés à l'aide de la règle @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 longues 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 redimensionne 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 la même chose. Pour ce faire, créez des instances Animation et KeyFrameEffect, ou utilisez 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',
   }
);

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

Chronologies des animations

Par défaut, une animation associée à un élément s'exécute sur la chronologie du document. Son heure d'origine commence à 0 au chargement de la page et avance à mesure que 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 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 liée à la position de défilement d'un conteneur de défilement le long d'un axe particulier.
• Timeline de progression d'affichage: 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 associée à la progression de la position de défilement d'un conteneur de défilement (également appelé scrollport ou scroller) le long d'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.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par vous-même

Une timeline de progression de défilement est souvent abrégée "Chronologie 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, le décalage de défilement d'un conteneur de défilement 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 au fonctionnement 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 constater que la progression commence à 0% lorsque le sujet entre dans le conteneur de défilement et atteint 100% au moment précis où il quitte ce conteneur.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par vous-même

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

Se mettre en pratique 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(). Cela crée une timeline de défilement anonyme que vous pouvez définir comme valeur pour 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 de 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. Au total, cette 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, 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 lancer l'animation.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par vous-même

L'indicateur de progression de la lecture est positionné en haut de la page à l'aide de la position fixe. Pour exploiter les animations composites, le width n'est pas 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'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 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. Même s'il est un peu plus détaillé, il 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 du conteneur de défilement sur l'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;

Démonstration: Indicateur d'étape horizontal du carrousel

Cette démonstration comporte 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 la première image sur trois. Lorsque la dernière image est visible (en fonction du défilement effectué jusqu'à la fin du conteneur de défilement), l'indicateur occupe toute sa largeur. Une timeline de progression de défilement nommée est utilisée pour lancer l'animation.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par 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 absolument positionné 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 contenus horizontalement et correspond à l'élément qui défile. En suivant sa position de défilement, .gallery__progress s'anime. Pour ce faire, vous devez faire référence à la timeline de progression de défilement --gallery__scrollcontainer nommée.

@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é 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 toute duration s'il y en a.

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

Démonstration: indicateur de progression de la 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 le conteneur de défilement racine et adapte #progress sur l'axe X de 0% à 100% lorsque vous faites défiler la page.

✨ Essayez par 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 selon qu'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 croise son conteneur de défilement sur l'axe de bloc, utilisez view(block). Comme pour scroll(), définissez-la 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 fera un fondu lorsqu'elle 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 les plages de la chronologie

Par défaut, une animation liée à la timeline d'affichage est associée à toute la plage de la timeline. Elle 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 le lier à une partie spécifique de la timeline de la vue en spécifiant la plage à laquelle il doit être associé. 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.

<ph type="x-smartling-placeholder">

</ph>

Vous pouvez cibler les plages de timeline d'affichage suivantes:

• cover: représente la plage complète de la chronologie 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 complètement) 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 un début et une fin de plage. Chaque nom de plage est composé d'un nom de plage (voir la liste ci-dessus) et d'un décalage de plage permettant de déterminer la position à l'intérieur de ce nom. 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 apparaît, choisissez entry 0% comme début de plage. Pour qu'elle se termine au moment où l'objet a saisi, choisissez entry 100% comme valeur de fin de plage.

Dans CSS, vous devez définir ce paramètre à l'aide de la propriété animation-range. Exemple :

animation-range: entry 0% entry 100%;

Dans 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 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.

<ph type="x-smartling-placeholder">

</ph>

Regarder un enregistrement

Comme vous pouvez le remarquer en jouant avec ces outils de plages de la timeline d'affichage, 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 les valeurs de début et de fin ciblent le même nom de plage et couvrent l'ensemble de la plage (de 0% à 100 %), vous pouvez raccourcir la valeur pour qu'elle corresponde simplement au 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: Affichage d'images

Cette démonstration apparaît en fondu lorsque les images entrent dans la zone de défilement. Pour ce faire, utilisez une timeline de vue anonyme. La plage d'animation a été modifiée de sorte que chaque image soit en pleine opacité lorsqu'elle est à mi-chemin du conteneur de défilement.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par vous-même

L'effet d'expansion est obtenu en utilisant un chemin d'accès 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 créer des timelines d'affichage nommées. Au lieu des propriétés scroll-timeline-*, vous utilisez des variantes qui comportent le préfixe view-timeline-, à savoir view-timeline-name et view-timeline-axis.

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

Démonstration: Révélation des images

En retravaillant la démo 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 de la propriété animation-timeline. La sortie visuelle est exactement la même qu'avant.

✨ Essayez par 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 sac 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 de décalage (négatif) de la zone de défilement pour déterminer si la zone est bien 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 toute duration s'il y en a. 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 par vous-même

Autres fonctionnalités à essayer

Association à plusieurs plages de timeline d'affichage avec un ensemble d'images clés

Regardons cette démo 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 partant du bas, elle glisse et apparaît en fondu, et lorsqu'elle quitte la zone de défilement située en haut, elle glisse et disparaît en fondu.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par vous-même

Pour cette démonstration, chaque élément est décoré avec 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 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 contenant 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 par vous-même

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

Le mécanisme de recherche pour les timelines de défilement et les timelines d'affichage nommées est limité aux ancêtres de défilement. Très souvent, cependant, l'élément qui doit être animé n'est pas un enfant du conteneur de défilement qui doit être suivi.

Pour que cela fonctionne, la propriété timeline-scope entre en jeu. Cette propriété vous permet de 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 y ê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 timeline nommée --tl. Tous les enfants de celle-ci peuvent la rechercher et l'utiliser comme valeur pour la propriété animation-timeline.
• L'élément .scroller définit en fait une timeline de défilement nommée --tl. Par défaut, il n'est visible que par ses enfants, mais comme .parent l'a défini comme scroll-timeline-root, il s'y associe.
• L'élément .subject utilise la chronologie --tl. Il parcourt son arbre ancêtre et trouve --tl sur le .parent. Le --tl du .parent pointant vers l'--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 (c'est-à-dire un 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 sont abordées dans cet article sur le mini-site drop-driven-animations.style. Le site Web comprend beaucoup plus de démos pour mettre en évidence ce qu'il est possible de faire avec les animations liées au défilement.

L'une des démonstrations supplémentaires est la liste des pochettes d'album. Chaque couverture pivote en 3D lorsqu'elle occupe la zone centrale.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par vous-même

Ou cette démonstration de cartes empilées qui utilise position: sticky. Au fur et à mesure que les cartes s'empilent, les cartes déjà bloquées se réduisent, ce qui crée un joli effet de profondeur. Au final, toute la pile disparaît en tant que groupe.

<ph type="x-smartling-placeholder">

</ph>

✨ Essayez par vous-même

Également disponible sur scroll-driven-animations.style, vous trouverez un ensemble d'outils tels que la visualisation de la progression de la plage de la timeline d'affichage, incluse précédemment dans cet article.

Les animations liées au défilement sont également abordées dans le cours What's new in Web Animations (Nouveautés des animations Web) de Google I/O 2023.