Une petite bibliothèque d’animations au scroll : une classe sur un élément HTML suffit pour qu’il s’anime en entrant à l’écran.
L’origine
Des animations que je refaisais sans cesse.
Sur presque tous mes sites, je refaisais les mêmes apparitions au scroll, comme un titre qui glisse, une image qui se dévoile ou une liste qui arrive élément par élément.
Charger GSAP pour si peu me semblait excessif, alors j’ai rassemblé ces animations dans ma propre bibliothèque.
Utilisation
Une classe par animation.
Une classe comme blockanim-slide-up sur un élément, et il s’anime en entrant à l’écran, sans configuration ni JavaScript à écrire.
La bibliothèque s’installe avec npm ou avec les liens CDN, et pèse environ 2 ko compressée.
Nouveau en v2
Cascade et Repeat.
Avec Cascade, une seule classe sur une liste suffit : ses éléments arrivent l’un après l’autre, sans délai à écrire pour chacun.
Repeat rejoue l’animation à chaque retour à l’écran, utile sur les longues pages où l’on remonte souvent.
Démo
Plus de 35 animations à essayer.
Sur le site de démo, on rejoue chaque animation et on copie sa classe d’un clic.
Sous le capot
Uniquement des API du navigateur.
IntersectionObserver détecte l’entrée à l’écran et des variables CSS gèrent les délais de la cascade. Pour les séquences plus complexes, c’est la Web Animations API qui prend le relais.
Je l’utilise en production sur mes propres projets.