Animate on Scroll — Démo

Cette page présente deux façons de déclencher les animations : via anim-in/anim-out (JS) ou via anim-view (Scroll‑Driven CSS). Choisissez l’un ou l’autre : les entrées anim-in ne sont pas compatibles avec anim-view. Avec anim-view, les paramètres duration et delay n’ont pas d’effet car la progression est entièrement synchronisée au pourcentage de scroll.

Déclencheurs et effets disponibles

Il existe 3 déclencheurs: in (entrée), out (sortie), et scroll (anim-view). Chaque déclencheur peut utiliser les effets suivants: fade, scale, slide. Vous pouvez combiner plusieurs effets, par exemple anim-fade + anim-slide-from-bottom + anim-scale.

Trigger: in

Démarre à l'entrée dans le viewport.

anim-fadeanim-slide-from-bottomanim-duration-500

Trigger: out

Se joue à la sortie du viewport.

anim-fade-outanim-slide-out-from-topanim-duration-500

Trigger: scroll (anim-view)

Synchronisé au défilement, sans duration ni delay.

anim-fade-scrollanim-slide-scroll-from-bottomanim-scroll

Effets disponibles:

fade — transparence via anim-fade (+ option anim-fade-50...).
scale — zoom via anim-scale, ou axes anim-scale-x-*/anim-scale-y-*.
slide — déplacement via anim-slide-from-* avec distances (anim-slide-8, anim-slide-full...).

Exemples basiques (JS — anim-in)

Variantes de base côté JS : fade-in, anim-slide-from-top/bottom/left/right, scale-in et scale-out.

Fade

Apparition progressive.

anim-fade-inanim-fadeanim-fade-50

Fade Up

Glisse vers le haut.

anim-fadeanim-slide-from-bottomanim-duration-700

Fade Down

Glisse vers le bas.

anim-fadeanim-slide-leftanim-slide-fullanim-duration-700

Fade Left

Glisse depuis la gauche.

anim-in-fadeanim-slide-from-leftanim-duration-700

Fade Right

Glisse depuis la droite.

anim-fadeanim-slide-from-rightanim-duration-700

scale In

scale avant léger.

anim-scale-inanim-duration-700

scale Out

scale arrière léger.

anim-scale-outanim-duration-700sm:col-span-2lg:col-span-1

Scroll‑Driven (anim-view)

Ces éléments utilisent anim-view et une timeline CSS scroll‑driven. Ils sont synchronisés au scroll : pas de duration ni de delay (ces valeurs sont ignorées).

Scroll — Fade

Progression liée au scroll.

anim-slide-scroll-from-bottom-rightanim-scale-scrollanim-scale-150anim-fadeanim-duration-[2s]anim-slide-fullanim-scrollw-fitstickybottom-0anim-scroll-end-cover-3/4

Durées & Easing (JS — anim-in)

Contrôlez la vitesse et l’interpolation avec les utilitaires : anim-duration-*, anim-ease-*, anim-delay-*.

Rapide (300ms, linear)

Idéal pour des micro-transitions.

anim-fadeanim-slide-from-bottomanim-duration-300anim-ease-linear

Standard (700ms, ease-out)

Courbe douce vers la fin.

anim-fadeanim-slide-from-bottomanim-duration-700anim-ease-out

Lent (1200ms)

Accentue la sensation de fluidité.

anim-fadeanim-slide-from-bottomanim-duration-[1200ms]anim-ease-out

Delay 150ms

Différer l’entrée pour rythmer.

anim-fadeanim-slide-from-rightanim-duration-700anim-delay-150

Delay 300ms

Utilisez des décalages en série.

anim-fadeanim-slide-from-rightanim-duration-700anim-delay-300

Delay 500ms

Pour une chorégraphie plus marquée.

anim-fadeanim-slide-from-rightanim-duration-700anim-delay-500

Listes en cascade (JS — anim-in)

Appliquez des délais croissants pour simuler un effet de cascade.

Élément 1

anim-delay-0

anim-fadeanim-slide-from-bottomanim-duration-700

Élément 2

anim-delay-150

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-150

Élément 3

anim-delay-300

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-300

Élément 4

anim-delay-500

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-500

Élément 5

anim-delay-700ms

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-[700ms]

Élément 6

anim-delay-900ms

anim-fadeanim-slide-from-bottomanim-duration-700anim-delay-[900ms]

Paramètres visuels — exemples

Chaque effet accepte des paramètres. Voici des aperçus concrets pour les régler visuellement.

Scale 125%

anim-scale-125

anim-scaleanim-scale-125anim-duration-700

Scale X 150%

anim-scale-x-150

anim-scaleanim-scale-x-150anim-duration-700

Scale Y 90%

anim-scale-y-90

anim-scaleanim-scale-y-90anim-duration-700

Fade 50%

anim-fade-50

anim-fadeanim-fade-50anim-duration-700

Slide 2rem

anim-slide-from-left anim-slide-8

anim-slide-from-leftanim-slide-8anim-duration-700

Slide full

anim-slide-from-right anim-slide-full

anim-slide-from-rightanim-slide-fullanim-duration-700

Astuce: combinez plusieurs effets. Exemple: anim-fade + anim-slide-from-bottom + anim-scale-105.

Combinaisons (JS — anim-in)

Combinez les variantes pour des mises en scène plus riches.

Bloc A

Titre en fade-down

Contenu en fade-up plus lent, avec un léger délai. Idéal pour raconter une histoire lors du défilement.

fade-left

fade-right

scale-out

scale-in

Entrées JS (sans anim-view)

Ces éléments n’utilisent pas anim-view. Ils sont déclenchés en JavaScript via IntersectionObserver par le composant AnimateOnScroll et démarrent quand ils entrent dans le viewport.

JS — Fade Up

Sans anim-view, déclenché à l’entrée.

anim-fade-50anim-slide-from-bottomanim-duration-700p-6

JS — Fade Left

Purement via observer JS.

anim-fadeanim-slide-from-leftanim-duration-700p-6

JS — scale In

Aucune timeline CSS; déclencheur JS.

anim-scale-inanim-duration-700p-6

Sorties JS (anim-out)

Ces éléments emploient anim-out. Ils jouent leur animation lorsque vous quittez leur zone de vue (en les faisant sortir du viewport). Faites défiler doucement pour voir l’effet.

JS — Exit vers le bas

Se joue lorsque la carte sort de l’écran.

JS — Exit vers le haut

Se joue en remontant, quand la carte quitte le viewport.

JS — Scale Out

Effet de sortie en scale arrière.