Créer des animations avec AOS

Comment créer des animations avec AOS

J’avais déjà rédigé un mini tuto pour créer des animations avec wow.js et animate.css. Aujourd’hui on va voir comment faire la même chose avec AOS, plus facile d’utilisation. C’est une librairie js qui permet d’appliquer tout type d’animation css au scroll, sur n’importe quel type de balise html.

L’appel des scripts

Dans le header de votre page, placez l’appel au script css.

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Si ce n’est pas fait, incluez jquery et bien sûr n’oubliez pas ensuite d’inclure également le js:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Activer le plugin

Dans la même page entre des balises script, ou dans un fichier à part, on active le plugin avec ce bout de code:

<script>
    AOS.init();
  </script>

Si jamais ca bugue sur mobile…

AOS semble buguer sur mobile, une solution consiste donc à annuler les animations sur petit écran. Voici le code

<script>
      AOS.init({
         disable: function() {
            var maxWidth = 768;
            return window.innerWidth < maxWidth;
         }
      });
   </script>

Les animations

Ensuite dans la page, vous pouvez appliquer les animations sur n’importe quel type de balise  avec l’attribut data-aos= » » :

<div data-aos="fade-in"></div>

Quelques options sont possibles :

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

Retrouvez la liste complète des options.

Voilà c’est à peu près tout ce qu’il faut savoir pour lancer de belles animations sur ses pages.. Attention à ne pas trop en mettre, ca complique la lecture parfois.. Rendez vous sur le github pour en savoir plus, ou l’article de l’auteur sur css trciks.