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 basées sur le défilement

Les animations déclenchées par le défilement sont un modèle d'expérience utilisateur 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.

Un type d'animation similaire est une animation 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.

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 liées au défilement qui sont 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 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. Pourquoi ne pas aimer ?

Animations sur le Web, petit récapitulatif

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-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 notation 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 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 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, 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.

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

✨ Essayez !

Une timeline de progression d'affichage est souvent abrégée "Afficher la timeline". Il est possible de cibler des parties spécifiques d'une timeline de progression 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 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 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 animer l'animation.

✨ 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 l'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;

Démonstration: Indicateur de progression du carrousel horizontal

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 (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 piloter l'animation.

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

.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, 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 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 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 !

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

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 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 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, telle que 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 qu'elle se termine au moment où l'objet a saisi, choisissez entry 100% comme valeur de fin de 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.

Regarder un enregistrement

Comme vous pouvez le remarquer en jouant avec ces outils "Afficher les plages de la timeline", 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 "start" et "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é modifiée de sorte que chaque image soit en pleine opacité lorsqu'elle est à mi-chemin du conteneur de défilement.

✨ 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 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 vue 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

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.

✨ 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 que cela fonctionne, 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 comprend de nombreuses autres 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 cette liste de pochettes d'albums. Chaque couverture tourne en 3D lorsqu'elle est mise en avant.

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

É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 la section Nouveautés en termes d'animations Web de Google I/O 2023.