Lenis

Notre point de vue sur Lenis

Le smooth scroll est l'une de ces fonctionnalités qu'on remarque seulement quand elle est bien faite. Mal implémentée, elle casse la navigation, perturbe les utilisateurs et flingue l'accessibilité. Bien implémentée, elle ajoute une couche de qualité perçue qui fait la différence sur un site premium.

Lenis est notre choix actuel parce qu'elle résout les problèmes de Locomotive Scroll : compatibilité avec les API natives du navigateur (scrollTo, anchors, prefers-reduced-motion), poids minimal, intégration native avec GSAP ScrollTrigger. C'est le smooth scroll qui ne casse rien.

Quand on choisit Lenis

• Projet premium avec scroll-driven animations. Quand le scroll est le vecteur principal du storytelling. La fluidité Lenis amplifie GSAP ScrollTrigger.
• Site avec design soigné. Le smooth scroll est cohérent avec une exigence de qualité globale. Sur un site brut, c'est superflu.
• Couplage avec GSAP. Quand le projet utilise déjà GSAP, ajouter Lenis coûte presque rien et apporte beaucoup.
• Direction artistique qui le demande. Certains designers le considèrent comme un standard. À discuter pour valider la cohérence avec le reste du projet.

Quand on déconseille Lenis

• Site informatif simple. Pour un site corporate ou administratif, le smooth scroll est inutile et peut perturber des utilisateurs habitués au scroll natif.
• Projet où l'accessibilité est centrale. Le smooth scroll peut interférer avec certaines aides techniques. Toujours respecter prefers-reduced-motion, mais sur des contextes critiques on peut décider de ne pas l'activer du tout.
• Mobile-first avec contraintes perf fortes. Sur des marchés émergents ou des terminaux faibles, on retire le smooth scroll pour ne pas dégrader l'expérience.
• Contenu très long avec besoin de saut rapide. Sur de la doc, des articles très longs, le scroll natif est plus rapide pour retrouver une info.

Comment on l'utilise concrètement chez Justa

1. Setup minimal dans Webflow

Script Lenis ajouté dans le head ou le footer Webflow via Custom Code. Configuration par défaut sur la majorité des projets : duration 1.2s, easing standard. Quelques lignes suffisent.

2. Intégration avec GSAP ScrollTrigger

Lenis émet un event scroll que GSAP peut écouter. La synchronisation entre smooth scroll et déclenchement d'animations devient parfaite. Notre boilerplate Webflow inclut directement cette intégration.

3. Gestion des anchors et navigation

Les liens d'ancre Webflow (scroll to section) doivent passer par l'API Lenis pour rester fluides. On override le comportement par défaut avec une fonction utilitaire qui appelle lenis.scrollTo().

4. Respect strict de prefers-reduced-motion

Au boot, on détecte la préférence OS de l'utilisateur. Si reduced motion est activé, Lenis est désactivé et le scroll natif reprend la main. Non négociable côté accessibilité.

Les limites qu'on gère

• Conflits avec certains scripts. Modals, lightboxes, popups peuvent réagir étrangement au smooth scroll. À tester systématiquement et patcher au cas par cas.
• Position fixe et scroll lock. Quand on lock le scroll (modal ouverte par exemple), Lenis demande un appel explicite à lenis.stop() puis lenis.start(). À ne pas oublier.
• Performance sur très long contenu. Au-delà de plusieurs milliers de pixels de hauteur, le smooth scroll peut sembler moins réactif. À évaluer projet par projet.
• Compatibilité avec scroll natif des navigateurs. Les outils dev (Cmd+F, raccourcis page-down) sont préservés, mais à tester sur les édge cases.

Alternatives qu'on connaît aussi

• CSS scroll-behavior smooth. Solution native, sans JS. Simpliste mais suffisante sur certains projets. À utiliser quand on n'a pas besoin de couplage GSAP.
• GSAP ScrollSmoother. Inclus dans GSAP depuis sa gratuité (=rachat par Webflow). Bonne alternative, on évalue selon le projet. Lenis reste plus léger.