Applications pratiques (partie 2) —

Tout d’abord, un récapitulatif :

Les animations ambiantes sont le genre de mouvements passifs que vous ne remarquerez peut-être pas au début. Cependant, ils donnent vie à un design de manière subtile. Les éléments peuvent passer subtilement d’une couleur à l’autre, se déplacer lentement ou changer progressivement de position. Les éléments peuvent apparaître et disparaître, changer de taille ou tourner lentement, ajoutant de la profondeur à la personnalité d’une marque.

Dans Partie 1j’ai illustré le concept d’animations ambiantes en recréant la couverture d’une bande dessinée Quick Draw McGraw sous forme d’animation CSS/SVG. Mais je sais que tout le monde n’a pas besoin d’animer des personnages de dessins animés, donc dans la deuxième partie, je vais partager le fonctionnement de l’animation ambiante dans trois projets très différents : Reuven Herman, Mike Worth et EPD. Chacun démontre comment le mouvement peut améliorer l’identité de la marque, personnalitéet narration sans dominer une page.

Reuven Herman

Le compositeur Reuven Herman, basé à Los Angeles, ne souhaitait pas seulement qu’un site Web présente son travail. Il voulait que cela transmette sa personnalité et l’expérience que les clients vivent lorsqu’ils travaillent avec lui. Travailler avec des musiciens est toujours stimulant sur le plan créatif : ils sont critiques, engagés et pleins d’idées.

Le parcours classique et jazz de Reuven m’a rappelé le travail de concepteur de pochettes d’album. Alex Steinweiss.

J’ai été inspiré par la profondeur et la texture qu’Alex a apportées à ses créations pour plus de 2 500 couvertures uniques, et je voulais intégrer ses techniques dans mes illustrations pour Reuven.

Pour donner vie aux illustrations de Reuven, j’ai suivi quelques principes fondamentaux de l’animation ambiante :

• Conserver les animations lent et lisse.
• Bouclez en toute transparence et évitez les changements brusques.
• Utiliser superposition pour construire la complexité.
• Évitez les distractions.
• Considérer accessibilité et performance.

Vous pouvez voir cette animation ambiante dans mon laboratoire. Pour le site de Reuven :

• Les lignes des portées des partitions se transforment entre des états ondulés et droits.
• Les notes dérivent à différentes vitesses pour créer une profondeur semblable à une parallaxe.
• Les touches du piano semblent flotter.

Ma première étape est toujours de optimiser mes SVG pour l’animation en exportant et en optimisant un ensemble d’éléments à la fois – toujours dans l’ordre dans lequel ils apparaîtront dans le fichier final et en construisant progressivement le SVG principal. En partant de l’arrière-plan, j’ai exporté les lignes de portées de la partition, d’abord dans leur état ondulé.

…suivi de leur état hétéro :

La première étape de mon animation consiste à transformer les lignes de portées entre les états. Ils sont composés de six parcours aux traits multicolores. J’ai commencé par les lignes ondulées :

<!-- Wavy state -->
<g fill="none" stroke-width="2" stroke-linecap="round">
<path id="p1" stroke="#D2AB99" d="[…]"/>
<path id="p2" stroke="#BDBEA9" d="[…]"/>
<path id="p3" stroke="#E0C852" d="[…]"/>
<path id="p4" stroke="#8DB38B" d="[…]"/>
<path id="p5" stroke="#43616F" d="[…]"/>
<path id="p6" stroke="#A13D63" d="[…]"/>
</g>

Bien que CSS permet désormais l’animation entre les points du cheminle nombre de points dans chaque état doit correspondre. GSAP n’a pas cette limitation et peut animer entre des états ayant un nombre de points différent, ce qui le rend idéal pour ce type d’animation. J’ai défini le nouvel ensemble de chemins droits :

<!-- Straight state -->
const Waves = {
  p1: "[…]",
  p2: "[…]",
  p3: "[…]",
  p4: "[…]",
  p5: "[…]",
  p6: "[…]"
};

Ensuite, j’ai créé un Chronologie du GSAP qui se répète d’avant en arrière pendant six secondes :

const waveTimeline = gsap.timeline({
  repeat: -1,
  yoyo: true,
  defaults: { duration: 6, ease: "sine.inOut" }
});

Object.entries(Waves).forEach(([id, d]) => {
  waveTimeline.to(`#${id}`, { morphSVG: d }, 0);
});

Un autre principe d’animation ambiante consiste à utiliser la superposition pour créer de la complexité. Pensez-y comme si vous construisiez un mixage sonore. Vous voulez une variation du rythme, du ton et du timing. Dans mon animation, trois rangées de notes de musique se déplacent à des vitesses différentes :

<path id="notes-row-1"/>
<path id="notes-row-2"/>
<path id="notes-row-3"/>

La durée de l’animation de chaque ligne est également définie à l’aide de GSAP, à partir de 100 à 400 secondes pour donner à l’animation globale un effet de style parallaxe :

const noteRows = [
  { id: "#notes-row-1", duration: 300, y: 100 }, // slowest
  { id: "#notes-row-2", duration: 200, y: 250 }, // medium
  { id: "#notes-row-3", duration: 100, y: 400 }  // fastest
];

[…]

Le calque suivant contient une ombre projetée par les touches du piano, qui tourne lentement autour de son centre :

gsap.to("shadow", {
  y: -10,
  rotation: -2,
  transformOrigin: "50% 50%",
  duration: 3,
  ease: "sine.inOut",
  yoyo: true,
  repeat: -1
});

Et enfin, les touches du piano elles-mêmes, qui tournent en même temps mais dans le sens inverse de l’ombre :

gsap.to("#g3-keys", {
  y: 10,
  rotation: 2,
  transformOrigin: "50% 50%",
  duration: 3,
  ease: "sine.inOut",
  yoyo: true,
  repeat: -1
});

L’animation complète peut être visionnée dans mon laboratoire. En superposant judicieusement les mouvements, le site semble vivant sans jamais dominer le contenu, ce qui correspond parfaitement à l’énergie de Reuven.

Mike Worth

Comme je l’ai mentionné plus tôt, tout le monde n’a pas besoin d’animer des personnages de dessins animés, mais je le fais occasionnellement. Mike Worth est un compositeur de films, de jeux vidéo et de télévision primé aux Emmy Awards qui m’a demandé de concevoir son site Web. Pour le projet, j’ai créé et illustré le personnage de l’aventurier orang-outan Orango Jones.

Orango s’est avéré être le sujet idéal pour les animations d’ambiance et les fonctionnalités de chaque page du site Web de Mike. Il emmène le lecteur dans une aventure et, en chemin, il découvre la musique de Mike.

Pour la page « À propos » de Mike, je voulais combiner des animations ambiantes avec des interactions. Orango est dans une grotte où il a trouvé une tablette de pierre avec de légères marques qui servent d’aide à la navigation ailleurs sur le site Web de Mike. L’illustration contient une fonctionnalité cachée, un œuf de Pâques, comme lorsque quelqu’un appuie sur la loupe d’Orango, déplaçant des rayons de lumière dans la grotte et sur la tablette.

Mon SVG est délibérément structuré, et de l’arrière vers l’avant, il comprend la grotte, le puits de lumière, Orango et la navigation :

<svg data-lights="lights-off">
  <g id="cave">[…]</g>
  <path id="light-shaft" d="[…]"></path>
  <g id="orango">[…]</g>
  <g id="nav">[…]</g>
</svg>

J’ai également ajouté une ancre autour d’un cercle caché, que j’ai positionné sur la loupe d’Orango, comme une grande cible tactile pour activer et désactiver les puits de lumière en changeant le data-lights valeur sur le SVG :

<a href="https://smashingmagazine.com/2025/10/ambient-animations-web-design-practical-applications-part2/javascript:void(0);" id="light-switch" title="Lights on/off">
  <circle cx="700" cy="1000" r="100" opacity="0" />
</a>

Ensuite, j’ai ajouté deux sélecteurs descendants à mon CSS, qui ajustent l’opacité des puits de lumière en fonction du data-lights valeur:

[data-lights="lights-off"] .light-shaft {
  opacity: .05;
  transition: opacity .25s linear;
}

[data-lights="lights-on"] .light-shaft {
  opacity: .25;
  transition: opacity .25s linear;
}

Une rotation lente et subtile ajoute un mouvement naturel aux puits de lumière :

@keyframes shaft-rotate {
  0% { rotate: 2deg; }
  50% { rotate: -2deg; }
  100% { rotate: 2deg; }
}

Ce qui n’est visible que lorsque la bascule lumineuse est active :

[data-lights="lights-on"] .light-shaft {
  animation: shaft-rotate 20s infinite;
  transform-origin: 100% 0;
}

Lors du développement d’une animation ambiante, la prise en compte des performances est cruciale, car même si les animations CSS sont légères, des fonctionnalités telles que les filtres de flou et les ombres portées peuvent toujours mettre à rude épreuve les appareils moins puissants. Il est également essentiel de prendre en compte l’accessibilité. respecter quelqu’un prefers-reduced-motion préférences:

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

Lorsqu’une fonctionnalité d’animation est purement décorative, pensez à ajouter aria-hidden="true" pour l’empêcher d’encombrer l’arborescence d’accessibilité :

<a href="https://smashingmagazine.com/2025/10/ambient-animations-web-design-practical-applications-part2/javascript:void(0);" id="light-switch" aria-hidden="true">
  […]
</a>

Avec Orango Jones de Mike, l’animation ambiante passe d’une atmosphère subtile à une narration ludique. Des puits de lumière et des interactions douces intègrent la narration dans la conception sans détourner l’attention, prouvant que l’animation peut soutenir à la fois l’identité de la marque et l’expérience utilisateur. Voir cette animation dans mon laboratoire.

ÉPD

S’éloignant des compositeurs, EPD est une foncière. Ils m’ont chargé de concevoir des concepts créatifs pour un nouveau site Web. Une recherche rapide de sociétés d’investissement immobilier vous laissera généralement déçu par leurs conceptions de sites Web interchangeables. Ils comprennent des bannières pleine largeur avec des photos délavées de paysages urbains génériques ou de personnes ethniquement diverses se serrant la main.

Pour EPD, je voulais développer un style visuel distinctif que l’entreprise pourrait s’approprier, j’ai donc proposé des skylines graphiques et stylisées qui reflètent à la fois la marque d’EPD et son portefeuille mondial. Je les ai réalisés à l’aide de cercles de différentes tailles qui rappellent le logo de l’entreprise.

L’intérêt d’une animation ambiante est qu’elle ne domine pas. C’est un élément de fond et non un appel à l’action. Si les yeux de quelqu’un sont attirés par cela, c’est probablement trop, alors je réduis l’animation jusqu’à ce qu’elle ressemble à quelque chose que vous ne capteriez que si vous regardez vraiment. J’ai créé trois designs d’horizon, dont Dubaï, Londres et Manchester.

Dans chacune de ces animations ambiantes, les roues tournent et les grands cercles changent de couleur à intervalles aléatoires.

Pour commencer à optimiser cette illustration pour l’animation, j’ai exporté les chemins de base contenant tous les éléments sauf la roue :

<g id="banner-base>
  <path d="[…]"/>
  <path d="[…]"/>
  <path d="[…]"/>
  […]
</g>

Ensuite, j’ai exporté un calque contenant le circle éléments dont je souhaite changer la couleur.

<g id="banner-dots">
  <circle class="data-theme-fill" […]/>
  <circle class="data-theme-fill" […]/>
  <circle class="data-theme-fill" […]/>
  […]
</g>

Une fois de plus, j’ai utilisé GSAP pour sélectionner des groupes de cercles qui scintillent comme des lumières à travers l’horizon :

function animateRandomDots() {
  const circles = gsap.utils.toArray("#banner-dots circle")
  const numberToAnimate = gsap.utils.random(3, 6, 1)
  const selected = gsap.utils.shuffle(circles).slice(0, numberToAnimate)
}

Puis, à intervalles de deux secondes, le fill la couleur de ces cercles passe de l’accent bleu sarcelle à la même couleur blanc cassé que le reste de mon illustration :

gsap.to(selected, {
  fill: "color(display-p3 .439 .761 .733)",
  duration: 0.3,
  stagger: 0.05,
  onComplete: () => {
    gsap.to(selected, {
      fill: "color(display-p3 .949 .949 .949)",
      duration: 0.5,
      delay: 2
    })
  }
})

gsap.delayedCall(gsap.utils.random(1, 3), animateRandomDots) }
animateRandomDots()

Le résultat est une ligne d’horizon qui scintille doucement, comme si la ville elle-même était vivante. Finalement, j’ai fait tourner la roue. Ici, il n’était pas nécessaire d’utiliser GSAP puisque cela est possible en utilisant CSS rotate seul:

<g id="banner-wheel">
  <path stroke="#F2F2F2" stroke-linecap="round" stroke-width="4" d="[…]"/>
  <path fill="#D8F76E" d="[…]"/>
</g>

#banner-wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rotateWheel 30s linear infinite;
}

@keyframes rotateWheel {
  to { transform: rotate(360deg); }
}

Les animations CSS sont légères et idéales pour les effets simples et répétitifs, comme les fondus et les rotations. Ils sont faciles à mettre en œuvre et ne nécessitent pas de bibliothèques. GSAP, en revanche, offre beaucoup plus de contrôle car il peut gérer le morphing de chemin et les chronologies de séquence. Le choix de celui à utiliser dépend si j’ai besoin du précision du GSAP ou le simplicité du CSS.

En laissant la roue tourner et les cercles brillants, les animations de la ligne d’horizon restent en arrière-plan tout en donnant au design une sensation distinctive. Ils évitent les clichés photographiques tout en renforçant l’identité de marque d’EPD et sont la preuve que, même dans un secteur conservateur comme l’investissement immobilier, l’animation d’ambiance peut ajouter de l’ambiance sans nuire au message.

Conclusion

Des textures musicales de Reuven à l’Orango Jones narratif de Mike et aux horizons lumineux d’EPD, ces projets montrent comment animation ambiante s’adapte au contexte. Parfois, c’est purement atmosphérique, comme des notes flottantes ou des roues en rotation ; d’autres fois, il se fond parfaitement dans l’interaction, récompensant la curiosité sans gêner.

Qu’il fasse écho à l’improvisation d’un compositeur, serve de dispositif narratif ludique ou ajoute une distinction subtile à une industrie conservatrice, les mêmes principes restent vrais :

Gardez le mouvement lent, fluide et ciblé afin qu’il améliore le design plutôt que de le distraire.

(gg, ouais)