Le scroll est le geste le plus naturel du web. On ne l’apprend pas — on le fait. Et pourtant, derrière ce geste simple se cache un pouvoir énorme : chaque pixel défilé est une occasion de raconter, de guider, ou de frustrer.
Une animation qui arrive trop tôt. Un parallax qui donne le vertige. Un scroll hijacké qui transforme la navigation en combat. Le scroll mal maîtrisé est invisible pour le développeur — mais viscéral pour l’utilisateur.
Le bon scroll ne se remarque pas. Il accompagne. Il révèle au bon moment, guide le regard, et respecte le rythme de lecture. Voyons comment.
Scrolling is the most natural gesture on the web. You don’t learn it — you just do it. And yet, behind this simple gesture lies enormous power: every scrolled pixel is a chance to narrate, guide, or frustrate.
An animation that fires too early. A parallax that induces vertigo. A hijacked scroll that turns navigation into a fight. Poorly handled scroll is invisible to the developer — but visceral to the user.
Good scroll goes unnoticed. It accompanies. It reveals at the right moment, guides the eye, and respects the reading rhythm. Let’s see how.
Les bases
Les animations qui arrivent au bon moment
Le “quand” compte plus que le “comment”. Une animation parfaitement designée mais déclenchée au mauvais moment est pire qu’aucune animation du tout.
- Trop tôt — Les éléments sont déjà visibles avant que l’utilisateur n’ait scrollé. L’animation a eu lieu en dehors du viewport. Effort gaspillé
- Coupé — Scrollez : les éléments “pop” instantanément, sans transition. L’apparition est brutale
- Parfait — Scrollez : chaque élément se révèle avec un spring naturel et un stagger progressif. C’est fluide
The basics
Animations that arrive on time
The “when” matters more than the “how”. A perfectly designed animation triggered at the wrong time is worse than no animation at all.
- Too early — Elements are already visible before the user scrolled. The animation happened off-screen. Wasted effort
- Cut — Scroll: elements “pop” instantly, no transition. The appearance is brutal
- Perfect — Scroll: each element reveals with a natural spring and progressive stagger. It’s fluid
Montrer la progression
Sur un article long, l’utilisateur veut savoir où il en est. Quatre patterns classiques, chacun adapté à un contexte différent :
- Barre horizontale — Le classique. Discret, universel. Parfait en haut de page
- Cercle — Compact, non-intrusif. Idéal en bottom-right
- Dots latéraux — Indique la section active, pas le pourcentage. Parfait pour les articles structurés
- Titre sticky — La progression intégrée au header. Deux informations en un
Show the progress
On a long article, the user wants to know where they are. Four classic patterns, each suited to a different context:
- Horizontal bar — The classic. Discreet, universal. Perfect at the top
- Circle — Compact, non-intrusive. Ideal in the bottom-right
- Side dots — Shows the active section, not the percentage. Perfect for structured articles
- Sticky title — Progress integrated into the header. Two pieces of information in one
Les effets
Le parallax — entre magie et nausée
Plusieurs couches qui bougent à des vitesses différentes créent une illusion de profondeur. C’est beau — jusqu’au moment où c’est trop. Le seuil entre “wow” et “mal de mer” est fin. Testez-le vous-même : au-delà de 70%, le cerveau commence à lutter.
La règle : le parallax doit être senti, pas vu. Si l’utilisateur remarque l’effet, c’est qu’il est trop fort.
The effects
Parallax — between magic and nausea
Multiple layers moving at different speeds create a depth illusion. It’s beautiful — until it’s too much. The threshold between “wow” and “motion sickness” is thin. Test it yourself: beyond 70%, the brain starts to struggle.
The rule: parallax should be felt, not seen. If the user notices the effect, it’s too strong.
Le reveal progressif
Le texte qui se colore mot par mot au scroll — c’est l’effet Apple. Chaque mot passe de gris à visible à mesure que vous scrollez. L’effet force la lecture séquentielle et crée un rythme. Puissant pour les phrases clés, les slogans, les conclusions.
Progressive reveal
Text that colors word by word on scroll — it’s the Apple effect. Each word transitions from gray to visible as you scroll. The effect forces sequential reading and creates rhythm. Powerful for key sentences, slogans, conclusions.
Scroll snap — le carrousel natif
scroll-snap-type — une ligne de CSS qui remplace des centaines de lignes de JavaScript. Le navigateur gère l’inertie, le snap, le momentum. En horizontal pour les carrousels, en vertical pour les sections pleine page. Zéro librairie, performance native.
Scroll snap — the native carousel
scroll-snap-type — one line of CSS replacing hundreds of lines of JavaScript. The browser handles inertia, snapping, momentum. Horizontal for carousels, vertical for full-page sections. Zero libraries, native performance.
Le CSS prend le relais
animation-timeline: scroll() change la donne. Barres de progression, reveals, animations liées au scroll — tout ça se fait en CSS pur, sans une ligne de JavaScript. La performance est meilleure (pas de JS sur le thread principal), et la syntaxe est déclarative. C’est le futur du scroll animé.
CSS takes over
animation-timeline: scroll() is a game changer. Progress bars, reveals, scroll-linked animations — all in pure CSS, without a single line of JavaScript. Performance is better (no JS on the main thread), and the syntax is declarative. This is the future of animated scroll.
La structure
Le sticky qui sait quand rester
Le header fixe est un classique mobile. Mais un header de 80px qui mange l’écran en permanence, c’est du gaspillage. Deux stratégies intelligentes :
- Shrink — Le header complet se compresse en version minimale au scroll. Le titre disparaît, la barre de recherche reste
- Hide/Show — Le header disparaît au scroll down et réapparaît au scroll up. C’est le pattern iOS/Android natif — l’utilisateur le connaît déjà
The structure
The sticky that knows when to stay
The fixed header is a mobile classic. But an 80px header eating screen space permanently is wasteful. Two smart strategies:
- Shrink — The full header compresses to a minimal version on scroll. Title disappears, search bar remains
- Hide/Show — The header disappears on scroll down and reappears on scroll up. It’s the native iOS/Android pattern — the user already knows it
Infinite scroll vs pagination
Deux philosophies opposées. L’infinite scroll est fluide et addictif — parfait pour les feeds sociaux. Mais l’utilisateur perd ses repères, ne peut pas partager sa position, et le bouton “retour” ne ramène pas où il était. La pagination est prévisible, bookmarkable, et respecte la mémoire du navigateur.
Infinite scroll vs pagination
Two opposing philosophies. Infinite scroll is fluid and addictive — perfect for social feeds. But the user loses their bearings, can’t share their position, and the “back” button doesn’t return where they were. Pagination is predictable, bookmarkable, and respects browser memory.
Les pièges
Le scroll hijacking — l’anti-pattern
Prendre le contrôle du scroll, c’est prendre le contrôle du geste le plus fondamental de l’utilisateur. Vitesse ralentie, snapping forcé, animations bloquantes — le scroll hijacké transforme la navigation en combat. L’utilisateur perd ses repères, son rythme, et souvent sa patience.
Cliquez sur “Libérer le scroll” pour sentir la différence. Le soulagement est immédiat.
The pitfalls
Scroll hijacking — the anti-pattern
Taking control of scroll is taking control of the user’s most fundamental gesture. Slowed speed, forced snapping, blocking animations — hijacked scroll turns navigation into a fight. The user loses their bearings, their rhythm, and often their patience.
Click “Free the scroll” to feel the difference. The relief is immediate.
Le scroll bien mené
| Contexte | Pattern | Pourquoi |
|---|---|---|
| Article long | Barre de progression + reveal au scroll | L’utilisateur sait où il en est, le contenu se révèle naturellement |
| Landing page | Parallax subtil (≤ 50%) + snap vertical | Effet “wow” maîtrisé, sections nettes |
| App mobile | Header hide/show + infinite scroll | Maximum d’espace pour le contenu, flux continu |
| Portfolio | Text reveal + parallax subtil | Narration visuelle, effet d’immersion |
| E-commerce | Pagination + sticky filtres | Retour arrière fiable, repères de navigation |
| Dashboard | Sticky header shrink + scroll progress | Navigation toujours accessible, position claire |
Le meilleur scroll est celui que l’utilisateur ne remarque pas. Il ne “voit” pas les animations — il sent que la page est vivante. C’est la différence entre une vitrine qui bouge et une histoire qui se raconte.
Scroll done right
| Context | Pattern | Why |
|---|---|---|
| Long article | Progress bar + scroll reveal | User knows where they are, content reveals naturally |
| Landing page | Subtle parallax (≤ 50%) + vertical snap | Controlled “wow” effect, clean sections |
| Mobile app | Header hide/show + infinite scroll | Maximum content space, continuous flow |
| Portfolio | Text reveal + subtle parallax | Visual storytelling, immersion effect |
| E-commerce | Pagination + sticky filters | Reliable back navigation, clear landmarks |
| Dashboard | Sticky header shrink + scroll progress | Always-accessible navigation, clear position |
The best scroll is one the user doesn’t notice. They don’t “see” the animations — they feel that the page is alive. That’s the difference between a moving display and a story being told.