Anime.js : Créez des animations SVG réactives aux interactions utilisateur

Synchronisation des animations SVG avec les interactions utilisateur

Dans l'article précédent, nous avons exploré l'animation des éléments SVG avec Anime.js, en passant par le morphing de formes, les tracés progressifs et le suivi de trajectoires. Aujourd'hui, nous allons pousser cette approche un cran plus loin en synchronisant ces animations avec les interactions utilisateur. Cette technique permet de créer des expériences plus immersives et engageantes pour le web moderne.

Pourquoi synchroniser les animations avec les interactions ?

Les animations déclenchées par des interactions utilisateur améliorent considérablement l'expérience utilisateur en rendant une interface plus fluide et réactive. Voici quelques exemples d’interactions courantes :

• Survol de la souris : Un effet visuel qui se déclenche lorsqu’un utilisateur passe la souris sur un élément.
• Clics : Démarrer, interrompre ou inverser une animation sur un clic.
• Défilement de page : Synchroniser des animations en fonction du scrolling.
• Entrée dans le champ de vision : Lancer des animations lorsqu’un élément devient visible à l’écran.

Anime.js nous permet d’écouter ces événements et d’ajuster les animations en conséquence.

1. Animer un SVG au survol de la souris

Le code suivant fait en sorte qu’un élément SVG change de couleur et de taille lorsque l’utilisateur passe la souris dessus.

<svg width="200" height="200">
  <circle id="hover-circle" cx="100" cy="100" r="50" fill="blue" />
</svg>

<script>
  var circleAnimation = anime({
    targets: '#hover-circle',
    scale: 1.5,
    fill: 'red',
    easing: 'easeInOutQuad',
    duration: 500,
    autoplay: false
  });

  document.querySelector('#hover-circle').addEventListener('mouseenter', () => {
    circleAnimation.play();
  });
  
  document.querySelector('#hover-circle').addEventListener('mouseleave', () => {
    circleAnimation.reverse();
    circleAnimation.play();
  });
</script>

Ce qu’il fait :

• Le code définit une animation circleAnimation pour un .
• L’animation modifie la taille (scale) et la couleur (fill) du cercle.
• Au survol de la souris, l’animation démarre. Lorsqu’on quitte l’élément, l’animation s’inverse.

Points clés :

• anime({ ... }) crée une animation configurée pour la cible #hover-circle.
• scale: 1.5 agrandit le cercle.
• fill: 'red' change la couleur du cercle en rouge.
• autoplay: false désactive la lecture automatique (l’animation n’est pas lancée immédiatement).
• circleAnimation.play() lance l’animation.
• circleAnimation.reverse() inverse l’animation, puis on la relance avec play().

Résultat : Le cercle grossit et devient rouge quand la souris passe dessus, puis retrouve sa taille et sa couleur initiales quand la souris s’en va.

2. Déclencher une animation SVG au clic

Nous allons maintenant voir comment animer un SVG uniquement lorsque l’utilisateur clique dessus.

<svg width="200" height="200">
  <rect id="click-rect" x="50" y="50" width="100" height="100" fill="green" />
</svg>

<script>
  document.querySelector('#click-rect').addEventListener('click', function () {
    anime({
      targets: '#click-rect',
      rotate: '1turn',
      backgroundColor: '#FF5733',
      duration: 1000,
      easing: 'easeInOutExpo'
    });
  });
</script>

Ce qu’il fait :

• L’exemple montre un qui se met à tourner et change de couleur lors d’un clic.
• L’animation est déclenchée uniquement quand l’utilisateur clique sur le rectangle.

Points clés :

• Un écouteur d’événement (addEventListener('click', ...)) est placé sur l’élément #click-rect.
• Dès que l’utilisateur clique, la fonction anime({ ... }) s’exécute.
• rotate: '1turn' indique une rotation complète (360°).
• backgroundColor: '#FF5733' change la couleur d’arrière-plan du rectangle.
• duration: 1000 signifie que l’animation dure 1 seconde.
• easing: 'easeInOutExpo' offre un mouvement fluide qui accélère puis décélère.

Résultat : Au clic, le rectangle exécute une rotation complète et change de couleur.

3. Synchronisation des animations SVG avec le défilement de la page

<h1>Défilez pour voir l'animation</h1>
    <div class="svg-container">
        <svg width="300" height="200">
            <text id="scroll-text" x="50" y="50" font-size="20" fill="black" opacity="0">Anime.js</text>
        </svg>

        <svg width="300" height="200">
            <circle id="scroll-circle" cx="150" cy="100" r="40" fill="blue" opacity="0" />
        </svg>

        <svg width="300" height="200">
            <rect id="scroll-rect" x="100" y="50" width="100" height="100" fill="red" opacity="0" />
        </svg>
    </div>

    <script>
        document.addEventListener('scroll', function () {
            var container = document.querySelector('.svg-container');
            var rect = container.getBoundingClientRect();
            if (rect.top < window.innerHeight * 0.8 && rect.bottom > 0) {
                anime({
                    targets: '#scroll-text',
                    translateY: [50, 0],
                    opacity: [0, 1],
                    duration: 1200,
                    easing: 'easeOutCubic'
                });
                anime({
                    targets: '#scroll-circle',
                    scale: [0, 1],
                    opacity: [0, 1],
                    duration: 1500,
                    delay: 300,
                    easing: 'easeOutBack'
                });
                anime({
                    targets: '#scroll-rect',
                    rotate: [0, 360],
                    opacity: [0, 1],
                    duration: 1500,
                    delay: 600,
                    easing: 'easeOutElastic(1, .6)'
                });
                container.style.opacity = "1";
                document.removeEventListener('scroll', arguments.callee);
            }
        });
    </script>

Ce qu’il fait :

• Le code contient un placé plus bas dans la page (grâce à margin-top: 100vh).
• L’animation est déclenchée lorsque le texte entre dans la zone visible de l’écran (viewport).

Points clés :

• Un écouteur d’événement est ajouté sur le scroll de la page.
• On récupère la position du texte via getBoundingClientRect().
• if (rect.top < window.innerHeight && rect.bottom > 0) vérifie si le texte est dans la fenêtre visible.
• Si c’est le cas, l’animation Anime.js démarre, faisant remonter le texte (translateY) et apparaître (opacity).

Résultat : Lorsque l’utilisateur fait défiler la page et que le texte devient visible, il se déplace vers le haut et s’affiche progressivement.

4. Animer un SVG lorsqu'il devient visible

<svg width="200" height="200" style="margin-top: 100vh">
  <circle id="visible-circle" cx="100" cy="100" r="50" fill="purple" opacity="0" />
</svg>

<script>
  function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  document.addEventListener('scroll', function () {
    var circle = document.querySelector('#visible-circle');
    if (isInViewport(circle)) {
      anime({
        targets: '#visible-circle',
        opacity: 1,
        scale: [0, 1],
        duration: 1000,
        easing: 'easeOutBack'
      });
    }
  });
</script>

Ce qu’il fait :

• Il y a un qui est invisible (opacity="0") en dehors de la zone visible.
• L’animation se déclenche uniquement quand l’élément est entièrement dans la fenêtre du navigateur.

Points clés :

• La fonction isInViewport(element) vérifie si l’élément se trouve dans le champ de vision de l’écran.
• Sur l’événement scroll, on vérifie la position du cercle.
• Quand le cercle est détecté à l’écran, l’animation Anime.js se lance :
• opacity: 1 pour rendre le cercle visible,
• scale: [0, 1] pour agrandir le cercle de 0 jusqu’à sa taille normale,
• duration: 1000 et easing: 'easeOutBack' pour donner un effet de ressort fluide.

Résultat : Dès que le cercle devient visible à l’écran, il apparaît avec un effet de zoom progressif (échelle de 0 à 1) et un easing qui ajoute un léger rebond.

Conclusion et perspectives

Synchroniser les animations SVG avec les interactions utilisateur permet d'améliorer l'expérience et de donner plus de dynamisme aux interfaces web. Grâce à Anime.js, ces animations restent faciles à implémenter et optimisées en termes de performance.

Références consultées

• Ivaylo Gerchev : « Getting Started with Anime.js » sur SitePoint, https://www.sitepoint.com/get-started-anime-js/#creatinganimationswithtimelines (page consultée le 1er mars 2025).

• Documentation officielle d'Anime.js, https://animejs.com/documentation/#timelineBasics (page consultée le 1er mars 2025).

• Denis Potschien : « Anime.js Makes Animating CSS and SVG Easy » sur Jotform Blog, https://www.jotform.com/blog/anime-js-css-svg-98489/ (page consultée le 1er mars 2025).

• Maxwell Forbes : « Animating SVGs from Sketch with anime.js », https://maxwellforbes.com/garage/animating-svgs-from-sketch-with-anime.js/ (page consultée le 1er mars 2025).