Le web a un problème que les apps natives n’ont pas : la coupure. Chaque clic sur un lien est un écran blanc, un rechargement complet, une perte de contexte. L’utilisateur ne sait plus d’où il vient ni où il va.
Sur mobile, c’est encore pire. On swipe, on tap, on attend — et la page suivante apparaît d’un coup, sans lien visuel avec la précédente. Le cerveau doit reconstruire le contexte à chaque navigation. C’est fatigant.
Les apps natives l’ont compris depuis longtemps : chaque transition est une narration. Le contenu glisse, se transforme, se morph. L’utilisateur sent la continuité. Le web peut enfin faire pareil.
The web has a problem native apps don’t: the cut. Every link click is a white screen, a full reload, a loss of context. The user no longer knows where they came from or where they’re going.
On mobile, it’s even worse. You swipe, tap, wait — and the next page appears abruptly, with no visual link to the previous one. The brain must reconstruct context on every navigation. It’s exhausting.
Native apps figured this out long ago: every transition is storytelling. Content slides, transforms, morphs. The user feels continuity. The web can finally do the same.
Le problème : la coupure
À gauche, la navigation par défaut du web : un changement de contenu instantané, sans aucune transition. Le contexte disparaît. À droite, la même navigation avec un slide directionnel — l’utilisateur sent qu’il avance ou recule dans l’app.
The problem: the cut
On the left, the web’s default navigation: an instant content change, with no transition. Context disappears. On the right, the same navigation with a directional slide — the user feels they’re moving forward or backward in the app.
Le catalogue des transitions
Quatre patterns fondamentaux. Chacun a son caractère et son cas d’usage. Tapez dans chaque phone pour naviguer et sentir la différence.
- Fade — Le plus neutre. Changement de contenu sans direction. Parfait pour les onglets ou le contenu qui se remplace
- Slide — Directionnel. Donne le sens de la navigation (avancer/reculer). Le standard mobile
- Scale — Dramatique. Donne l’impression de zoomer dans le contenu. Bon pour les modals ou les expansions
- Flip — Spectaculaire mais rare. Tourne la “page” comme une carte. À utiliser avec parcimonie
The transition catalog
Four fundamental patterns. Each has its character and use case. Tap each phone to navigate and feel the difference.
- Fade — The most neutral. Content change without direction. Perfect for tabs or replacing content
- Slide — Directional. Gives a sense of navigation (forward/backward). The mobile standard
- Scale — Dramatic. Feels like zooming into content. Good for modals or expansions
- Flip — Spectacular but rare. Turns the “page” like a card. Use sparingly
Le shared element — la continuité parfaite
Le graal des transitions. Un élément de la page A morph vers la page B. Le titre de la card devient le titre de l’article. L’avatar grandit. L’utilisateur ne perd jamais le fil — l’élément qui l’a intéressé reste devant ses yeux pendant toute la transition.
Basculez entre “Shared element” et “Fade simple” pour sentir la différence. Le fade coupe — le shared element connecte.
The shared element — perfect continuity
The holy grail of transitions. An element from page A morphs into page B. The card title becomes the article title. The avatar grows. The user never loses the thread — the element that interested them stays in sight throughout the transition.
Toggle between “Shared element” and “Simple fade” to feel the difference. The fade cuts — the shared element connects.
Le flow de navigation
Un slide ne suffit pas — il faut que la direction ait du sens. Avancer dans la hiérarchie (liste → détail → édition) glisse vers la gauche. Revenir en arrière glisse vers la droite. Le cerveau comprend instinctivement la profondeur. Et quand l’action est terminée (sauvegarde), un scale + checkmark brise le flow pour marquer la fin.
The navigation flow
A slide isn’t enough — the direction must have meaning. Moving forward in the hierarchy (list → detail → edit) slides left. Going back slides right. The brain instinctively understands depth. And when the action is complete (save), a scale + checkmark breaks the flow to mark the end.
Le chargement qui ne coupe pas
Le moment le plus critique : le contenu n’est pas encore là. Deux approches. Le spinner centré est honnête mais brutal — un écran vide avec une roue qui tourne. Le skeleton est subtil : il préserve la structure de la page, pulse doucement, puis le vrai contenu remplace chaque bloc avec un fade. L’utilisateur ne sent pas l’attente — il sent la page se construire.
Loading that doesn’t cut
The most critical moment: the content isn’t there yet. Two approaches. The centered spinner is honest but brutal — an empty screen with a spinning wheel. The skeleton is subtle: it preserves the page structure, pulses gently, then real content replaces each block with a fade. The user doesn’t feel the wait — they feel the page building.
Quand NE PAS transitionner
Toute transition n’est pas bonne. Sur un écran de paiement, l’utilisateur attend une réponse immédiate — pas un fade de 400ms qui retarde l’information. L’erreur ou la confirmation doit apparaître instantanément. La transition entre “traitement” et “résultat” est un cas où la rapidité bat l’élégance.
Les cas où il vaut mieux couper :
- Erreurs critiques — L’utilisateur doit voir le problème immédiatement
- Confirmations de paiement — Le résultat (succès/échec) ne doit pas être retardé
- Actions destructives — La suppression doit être ressentie comme définitive
When NOT to transition
Not every transition is good. On a payment screen, the user expects an immediate response — not a 400ms fade delaying the information. The error or confirmation must appear instantly. The transition between “processing” and “result” is a case where speed beats elegance.
Cases where cutting is better:
- Critical errors — The user must see the problem immediately
- Payment confirmations — The result (success/failure) shouldn’t be delayed
- Destructive actions — Deletion must feel definitive