Mouvement et narration
Scrollytelling : comment synchroniser un récit et des animations avec le défilement ?
Le scrollytelling associe le défilement à une progression narrative : une image évolue, une couche apparaît ou un objet change de point de vue pendant que le texte avance. Pour le réussir, il faut écrire les étapes du récit avant de synchroniser les animations. Chaque transformation doit correspondre à quelque chose que le visiteur comprend.
L'essentiel.
Le scrollytelling relie la progression d’un récit au défilement de la page. Il fonctionne lorsque chaque portion de parcours correspond à une idée claire, que le lecteur garde le contrôle et que l’information reste disponible sans la chorégraphie complète.
- Découpez le récit en étapes qui portent chacune une idée distincte.
- Choisissez ce qui suit directement le défilement et ce qui se déclenche simplement à l'entrée d'une zone.
- Réservez les séquences fixes aux moments qui ont besoin d'un même cadre visuel.
- Testez le retour en arrière, le défilement rapide et les contenus plus longs.
Le défilement reste une action de navigation. Il ne doit pas devenir une série de gestes imprévisibles nécessaires pour débloquer le contenu. Le lecteur doit pouvoir accélérer, revenir en arrière et accéder à l'information même si la séquence animée est simplifiée.
Écrire les états avant les transitions
Dessinez d'abord les états stables de la séquence. Le premier montre la situation initiale ; les suivants ajoutent une information ou révèlent une relation ; le dernier permet de regarder le résultat. Si ces états ne sont pas compréhensibles, les transitions ne corrigeront pas le problème.
Associez un texte à chaque état. Il doit expliquer ce qui compte à ce moment, sans décrire inutilement tout ce que l'image montre. Prévoyez aussi les éléments qui restent constants : titre de chapitre, légende, objet principal ou repère de progression.
Cette écriture peut se faire sur des images fixes. Elle permet de valider le récit et les contenus avant de consacrer du temps à la précision du mouvement.
Choisir le rapport entre scroll et animation
Deux comportements sont souvent utiles. Une animation peut démarrer lorsqu'une section entre dans la zone visible, puis suivre sa propre durée. Elle peut aussi être directement liée à la progression du défilement, ce qui permet de la parcourir dans les deux sens.
Dans ScrollTrigger, l'option scrub relie la progression d'une animation à celle du défilement ; pin permet de maintenir un élément pendant une zone définie. Ces possibilités sont des moyens de réalisation. Le scénario doit préciser pourquoi chaque zone a besoin de l'un ou l'autre comportement.
| Situation narrative | Comportement à examiner | Point de vigilance |
|---|---|---|
| Révéler une étape | Déclenchement à l'entrée | Le texte ne doit pas disparaître trop vite |
| Montrer une transformation continue | Progression liée au scroll | Sens clair dans les deux directions |
| Comparer dans un même cadre | Élément maintenu | Sortie de zone compréhensible |
| Lire une explication longue | État visuel stable | Temps de lecture laissé au visiteur |
Exemple fictif : un rangement modulaire
Une marque souhaite expliquer comment un rangement se construit à partir de quelques éléments. Le récit commence avec l'objet complet. En avançant, le visiteur voit les modules se séparer, puis découvre leur mode d'assemblage et une configuration différente.
L'objet reste dans un cadre stable pendant les explications courtes. Les transformations correspondent aux changements de chapitre. Une section plus détaillée laisse l'image immobile pour permettre de lire les contraintes de montage. La fin montre de nouveau un ensemble complet, avec un accès aux dimensions et aux variantes.
Le retour en arrière remet les états dans l'ordre inverse sans lancer des effets contradictoires. Sur mobile, certaines transformations peuvent être remplacées par des vues successives. L'idée d'assemblage demeure compréhensible même si le dispositif visuel change.
Écrire les états, puis les relier
- EnsembleL’objet complet donne un point de départ reconnaissable.
- ModulesLe défilement révèle les pièces et leurs relations.
- AssemblageUn état stable laisse lire l’explication du montage.
- VarianteUne nouvelle configuration montre la portée du système.
- RetourLe parcours inverse retrouve des états cohérents, sans effets concurrents.
Ajuster les distances au contenu
Une séquence liée au scroll demande une distance de parcours. Celle-ci doit être proportionnée à ce qu'il faut examiner ou lire. Étendre une animation sur plusieurs écrans sans information supplémentaire peut donner une impression de résistance inutile.
Les textes variables changent cette relation. Une traduction plus longue, une police différente ou une largeur réduite peut modifier l'espace nécessaire. Le système doit recalculer ou adapter ses zones au lieu de dépendre d'une hauteur imaginée pour un seul écran.
Les WCAG demandent un ordre de lecture pertinent lorsque la séquence influence le sens. Une version textuelle cohérente aide à vérifier que le récit existe au-delà de la mise en scène.
Tester les comportements qui cassent les démonstrations
Faites défiler très vite, puis lentement. Arrêtez-vous entre deux étapes, revenez en arrière et redimensionnez la fenêtre. Vérifiez l'arrivée directe au milieu de la page et le retour après une interruption. Ces situations révèlent les états incomplets que la lecture idéale peut masquer.
Contrôlez aussi les zones maintenues. Le visiteur doit comprendre qu'il peut continuer à faire défiler et qu'il n'est pas enfermé. Les interactions locales ne doivent pas capturer les gestes nécessaires à la navigation générale sans raison claire.
Enfin, préparez une version réduite en mouvement et une version sans les médias lourds. Les étapes, les descriptions et les accès utiles doivent rester présents. Le scrollytelling devient ainsi une couche narrative au-dessus d'un contenu solide.
Questions fréquentes
Le scrollytelling nécessite-t-il un défilement personnalisé ?
Non. Il est possible de relier des animations à un défilement conservant son comportement habituel. Le choix d'ajouter un lissage est distinct du choix narratif. Il doit être évalué séparément, avec les gestes, les ancres et les usages de navigation prévus.
Faut-il maintenir l'image pendant toute la page ?
Seulement si le récit bénéficie réellement d'un cadre continu. Une zone maintenue peut être utile à une démonstration précise, puis laisser place à une lecture plus simple. Prolonger ce dispositif partout peut créer une longueur artificielle et rendre les transitions de contenu moins claires.
Comment savoir si une séquence est trop longue ?
Repérez les portions où le visiteur fait défiler sans découvrir d'information nouvelle. Demandez-lui aussi ce qu'il a compris de chaque étape. Si plusieurs moments paraissent identiques, il faut resserrer le scénario ou préciser leur rôle avant d'ajuster seulement la vitesse des animations.
Sources
Scénariser le défilement avec LVX
Pour un projet LVX, nous proposons de construire le scrollytelling à partir d'états fixes et de textes déjà cohérents. Une séquence courte permet ensuite de tester le rapport entre la progression, la lecture et le mouvement. Les variantes mobiles, les retours en arrière et les conditions moins favorables font partie de cette conception. L'objectif est une expérience qui rend une idée plus claire par sa transformation, avec un rythme que le visiteur peut contrôler. La technique vient soutenir ce scénario et ses limites explicites. Découvrir notre approche.
