GitHub
Librairie JS d'animation au scroll ~12 KB gzippé

Taille de la lib seule (hors GSAP et Lenis) · pour réduire le bundle

Des animations au scroll
sans écrire de JS

Attributs HTML pour aller vite, classes JavaScript pour tout contrôler.
Une seule librairie, deux façons de faire.

Voir sur GitHub Installation

Installation

Installe la librairie. GSAP et Lenis sont installés automatiquement. 

npm install akyos-animation

Puis dans votre code :

import { AkyosAttributeLoader, AkyosScroll } from 'akyos-animation';
import 'akyos-animation/styles';

new AkyosScroll();
new AkyosAttributeLoader();

Deux modes d'utilisation

Choisissez selon votre workflow : attributs déclaratifs dans le HTML ou classes JavaScript pour un contrôle total.

Déclaratif

Attributs HTML

Déclarez vos animations directement dans le HTML. Une seule initialisation et le loader charge automatiquement les animations utilisées.

  • Aucun JS à écrire par élément
  • Import granulaire automatique
  • Idéal pour intégrateurs et projets rapides
HTML 
<h1 akyos-animation-name="translate"
    akyos-animation-direction="left"
    akyos-animation-distance="100">
  Mon titre animé
</h1>
JS (une fois) 
import { AkyosAttributeLoader } from 'akyos-animation';

new AkyosAttributeLoader();
Impératif

Classes JavaScript

Importez et instanciez les classes directement. Contrôle total des options et import granulaire explicite.

  • Import granulaire explicite
  • Options précises par instance
  • Idéal pour développeurs et tree-shaking
JS 
import { AkyosTranslate } from 'akyos-animation/animations/translate';

new AkyosTranslate(element, {
  direction: 'left',
  distance: 200,
  duration: 1.5
});

Animations disponibles

AkyosTranslate

Apparition avec translation et fondu (haut, bas, gauche, droite)

top
bottom
left
right

Paramètres

Option Type Défaut Description
direction string 'top' Direction : top, bottom, left, right
distance number 100 Distance en pixels
duration number 1 Durée en secondes
delay number 0 Délai en secondes
fade boolean true Effet de fondu
ease string 'none' Courbe GSAP
start string 'top bottom-=10%' Début ScrollTrigger
end string 'bottom bottom-=20%' Fin ScrollTrigger
scrub number 1 Sync avec le scroll

AkyosMask

Révélation avec effet de masque directionnel

Masque → droite
Masque ← gauche

Paramètres

Option Type Défaut Description
direction string 'right' Direction du masque
duration number 1 Durée en secondes
delay number 0 Délai en secondes
fade boolean true Fondu progressif
ease string 'power2.out' Courbe GSAP
start string 'top 85%' Début ScrollTrigger

AkyosTextOverflow

Texte avec effet de débordement animé

Texte depuis le bas

Texte depuis le haut

Paramètres

Option Type Défaut Description
from string 'down' Direction : up ou down
duration number 0.6 Durée en secondes
delay number 0 Délai en secondes
easing string 'power2.out' Courbe GSAP
start string 'top 80%' Début ScrollTrigger

AkyosParallax

Effet parallaxe sur les images pour créer de la profondeur

Montagne
Paysage

Paramètres

Option Type Défaut Description
speed number 1 Vitesse de l'effet
distance number 200 Distance en pixels
start string 'top bottom' Début ScrollTrigger
end string 'bottom top' Fin ScrollTrigger

AkyosBackground

Changement de couleur de fond au scroll

Cette section déclenche un changement de classe sur le body. Scrollez pour voir l'effet.

Paramètres

Option Type Défaut Description
className string 'bg-primary' Classe CSS à ajouter
elementToAnimate HTMLElement document.body Élément cible
start string 'top 80%' Début ScrollTrigger
end string 'bottom 20%' Fin ScrollTrigger

AkyosScroll

Défilement doux (smooth scroll) avec Lenis

Le smooth scroll est actif sur cette page. Vous le ressentez en scrollant.

Paramètres (JavaScript uniquement)

Option Type Défaut Description
lerp number 0.1 Lissage (0-1)
duration number 0.7 Durée du scroll
wheelMultiplier number 0.7 Vitesse de la molette

Playground

Modifiez les paramètres puis scrollez la page pour voir l'animation.

Glissez les lignes pour ajuster start et end

start
end
Bloc animé