Animations

Animations d'entrée au scroll, de sortie, et au clic. Respect automatique de prefers-reduced-motion.

Animations d'entrée (scroll)

Ajoutez simplement une classe CSS. L'élément s'anime quand il entre dans le viewport :

<div class="anim-fade-in-up">Je m'anime au scroll</div>

Éléments above-the-fold

Les éléments déjà visibles dans le viewport au chargement de la page sont rendus visibles immédiatement, sans transition. Cela évite un flash invisible (l'élément commence en opacity: 0) et garantit un bon score Largest Contentful Paint (LCP) pour les performances Lighthouse.

Ce comportement est automatique — aucune configuration nécessaire. Les éléments hors viewport s'animent normalement au scroll. Si l'élément a l'attribut data-anim-exit, il reste observé pour les ré-entrées.

Implémentation technique : la détection above-the-fold est exécutée par animations.js immédiatement à son chargement (script defer), c'est‑à‑dire avant DOMContentLoaded. Dès que le body est parsé, la fonction collecte les éléments visibles au premier rendu et déclenche leur animation via requestAnimationFrame : le navigateur peint d'abord l'état initial (opacity 0) puis joue la transition vers .anim--visible, ce qui ramène le LCP des éléments hero animés très près du FCP tout en gardant l'animation visible.

Protection contre les conflits CSS : les classes anim-* définissent leurs transition-property, transition-duration, transition-timing-function et transition-delay avec !important. Sans cela, n'importe quelle règle CSS projet définissant transition: <autre-prop> <duration> en shorthand reseterait les 4 sous-propriétés et casserait silencieusement les animations framework — l'élément sauterait instantanément à opacity: 1 sans fade. Les modificateurs .anim--delay-*, .anim--duration-* et .anim--ease-* sont eux aussi en !important pour pouvoir surcharger la base.

Modificateurs

Délai

Durée

Easing

<div class="anim-fade-in-up anim--delay-3 anim--ease-bounce">
  Fondu + montée, délai 300ms, rebond
</div>

Animations de sortie

Ajoutez data-anim-exit="true" pour que l'animation se redéclenche quand l'élément sort et revient dans le viewport :

<div class="anim-fade-in-up" data-anim-exit="true">
  Animation re-déclenchable
</div>

Animations au clic

<button class="btn btn--primary anim-click-ripple">
  Cliquez-moi
</button>

Animations SVG

Animez vos SVG au scroll avec des classes simples. Idéal pour les icônes, graphiques et illustrations.

Dessin de tracé (stroke)

Utilisez --svg-length pour définir la longueur du tracé (approximative, en pixels) :

<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="3">
  <circle class="anim-svg-draw" style="--svg-length: 283;"
          cx="60" cy="60" r="45" />
  <path class="anim-svg-draw anim--delay-3" style="--svg-length: 60;"
        d="M40 60 L55 75 L80 45" />
</svg>

Variable --svg-length

Définissez la longueur approximative du tracé SVG pour que l'animation fonctionne correctement. Vous pouvez obtenir cette valeur avec path.getTotalLength() dans la console.

Pour trouver cette valeur : ouvrez votre navigateur, faites F12 (outils développeur), allez dans l'onglet Console, collez document.querySelector('svg path').getTotalLength() et appuyez sur Entrée. Copiez le nombre affiché.

Modificateurs SVG

Les modificateurs de délai standards (anim--delay-1 à anim--delay-10) fonctionnent également avec les animations SVG.

Animations Variable Font

Animez le poids des polices variables (comme Inter). Si la police n'est pas variable, l'animation est ignorée.

<h2 class="anim-font-weight-hover">Survolez-moi</h2>
<h2 class="anim-font-weight-scroll">Au scroll</h2>
<h2 class="anim-font-weight-loop">Boucle</h2>

<!-- Custom -->
<h2 class="anim-font-weight-loop"
    data-font-from="200"
    data-font-to="900"
    data-font-duration="3s">
  Boucle custom
</h2>

Animations de texte

Animez du texte caractère par caractère au scroll. Compatible avec tous les éléments texte : h1–h6, p, span, a, etc.

Fade : fondu progressif

Chaque caractère apparaît avec un fondu d’opacité (0 → 1). L’effet est doux et subtil, idéal pour les sous‑titres et paragraphes :

<h2 data-text-anim="fade" data-text-anim-stagger="50">Fondu progressif</h2>

Scale : effet zoom

Chaque caractère apparaît avec un effet de zoom (scale 0 → 1). L’effet est plus marqué, idéal pour les titres percutants :

<h3 data-text-anim="scale" data-text-anim-stagger="25">Effet zoom</h3>

Utilisation

Ajoutez data-text-anim sur n'importe quel élément texte :

<h1 data-text-anim>Mon titre animé</h1>

<!-- Avec type spécifique -->
<h2 data-text-anim="fade">Fondu progressif</h2>

<!-- Avec options -->
<p data-text-anim="rise"
   data-text-anim-stagger="40"
   data-text-anim-duration="800">
  Texte animé personnalisé
</p>

Types d'animation

Attributs

Séquencer plusieurs éléments

Utilisez data-text-anim-delay pour décaler les animations et créer un effet de séquence :

<h1 data-text-anim="rise">Premier titre</h1>
<h2 data-text-anim="rise" data-text-anim-delay="500">Deuxième titre</h2>
<p data-text-anim="fade" data-text-anim-delay="1000">Puis le paragraphe</p>

Inclure dans une page

<link rel="stylesheet" href="core/css/text-anim.css">
<script src="core/js/text-anim.js" defer></script>

Créateur d'animations

Configurez visuellement vos animations et copiez le code généré :

Ouvrir le constructeur Animations dans le configurateur →

Accessibilité

Toutes les animations (y compris SVG) respectent prefers-reduced-motion: reduce. Si l'utilisateur a désactivé les animations dans son système, tous les éléments apparaissent immédiatement sans animation.