Lenis Smooth Scroll : guide d’intégration étape par étape dans Webflow

Introduction

Le smooth scrolling est une technique qui - comme son nom l’indique - permet de fluidifier le défilement d’une page web. Concrètement, l’effet rendra le scroll de la page beaucoup plus doux et sans à-coups.

S’il est difficile à décrire, le smooth scrolling peut en tout cas permettre de créer une expérience de navigation beaucoup plus agréable, et mémorable. C’est n’est pas par hasard si on retrouve cet effet sur beaucoup de sites Awwwards.

Lenis, dont on parle aujourd’hui, est une bibliothèque Javascript qui permet justement d’ajouter un tel effet dans vos projets. Solution ultra-légère et très performante, elle s’implémente facilement dans l’écosystème Webflow tout en éliminant un inconvénient majeur des autres bibliothèques de smooth scrolling.

Dans l’article d’aujourd’hui, on verra :

• Pourquoi choisir Lenis pour ajouter du smooth scroll dans vos projets Webflow,
• Quelle propriété CSS devient enfin utilisable avec du smooth scroll grâce à Lenis,
• Comment implémenter Lenis étape par étape dans votre projet Webflow.

Découvrons comment créer des expériences web captivantes dans vos projets Webflow grâce au défilement fluide de Lenis. C’est parti !

Pourquoi choisir le smooth scrolling avec Lenis

Pour ajouter un défilement fluide à un projet Webflow, il existe plusieurs bibliothèques Javascript, mais Lenis est l’option de premier choix pour plusieurs raisons :

• Performances et légèreté : Les performances ont longtemps été un compromis à faire pour ajouter un effet de défilement fluide à un projet. L’avantage principal de Lenis est le fait qu’il s’agisse d’une bibliothèque ultra-légère (3Ko) qui assure donc d’excellentes performances.
• Position sticky enfin utilisable :L’autre avantage majeur de Lenis est le fait qu’elle permette l’utilisation de la propriété CSS position: sticky, parfois indispensable dans un design mais incompatible avec les autres bibliothèques de smooth scrolling.
• Expérience adaptée et accessible : De par sa légèreté et ses performances, Lenis offre une expérience homogène peu importe l’environnement de l’utilisateur. Lenis se positionne aussi comme une solution accessible, ce qui n’est pas nécessairement le cas avec d’autres bibliothèques.
• Personnalisation de l’expérience :Enfin, un autre point positif est la possibilité de personnaliser l’expérience de défilement : vous pouvez contrôler le niveau de fluidité ajouté, la rapidité du scroll et d’autres options selon les besoins spécifiques du projet.

Pour résumer, Lenis se positionne comme une solution complète : légère, performante et personnalisable selon vos besoins. Ceci ajouté à la facilité d’implémentation en font une solution idéale pour vos projets Webflow.

Dans la prochaine section, on se penche justement sur ce dernier point : comment implémenter Lenis étape par étape dans un projet Webflow.

Comment intégrer Lenis étape par étape dans un projet Webflow

L'intégration de Lenis dans un projet Webflow est à la fois simple et rapide. Suivez les étapes suivantes pour donner à votre site web une expérience de défilement optimale.

1) Ajoutez le CSS recommandé

Pour commencer, Lenis recommande l’ajout de quelques lignes de CSS pour garantir une bonne compatibilité, offrir une utilisation optimale de la bibliothèque, et débloquer quelques fonctionnalités grâce à des attributs HTML (dont on parle plus tard dans cet article).

Pour ajouter ce code CSS :

• Rendez vous dans les paramètres de votre projet Webflow (Project Settings),
• Ouvrez ensuite l’onglet Custom Code,
• Collez le code CSS suivant dans la partie Head Code :

<style>

html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

</style>

La première étape est déjà terminée. Passons à la suivante pour découvrir comment installer la bibliothèque sur votre projet Webflow.

2) Ajoutez le script d’installation

Pour installer la bibliothèque Lenis sur votre projet Webflow, ajoutez le script d’installation dans les paramètres de votre projet Webflow (Project Settings) :

<script src="https://unpkg.com/@studio-freight/lenis@1.0.33/dist/lenis.min.js"></script>

3) Configurez Lenis

Maintenant que la bibliothèque est installée, vous pouvez configurer le smooth scroll sur votre projet. Après le script d’installation, collez le script suivant dans le Footer Code des paramètres du site :

<script>

const lenis = new Lenis({
  // Valeur entre 0 et 1
  // Valeur par défaut : 0,1
  // Plus la valeur est faible, plus le scroll sera fluide
  lerp: 0.05, 
  // Valeur par défaut : 1
  // Plus la valeur est haute, plus le défilement sera rapide 
  wheelMultiplier: 1, 
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

</script>

Comme indiqué dans le code, vous pouvez configurer le défilement grâce aux deux paramètres suivantes :

• lerp : contrôle la fluidité du défilement.La valeur doit être comprise entre 0 et 1 (0,1 par défaut). Plus cette valeur est faible, plus le scroll sera fluide. D’expérience, on vous recommande une valeur aux alentours de 0,05.
• wheelMultiplier : contrôle la vitesse du défilement.Plus cette valeur est élevée, plus le défilement sera rapide et vice versa (1 par défaut). Sauf besoin très spécifique, on vous recommande de laisser cette valeur telle quelle pour ne pas perturber l’expérience utilisateur.

En suivant ces quelques étapes simples, vous pouvez intégrer facilement Lenis à votre site Webflow pour y proposer une expérience de scroll fluide et agréable.

Pour finir, dans la section suivante, on découvre quelques fonctionnalités simples et pratiques qui reposent sur l’utilisation d’attributs HTML et qui peuvent être utiles dans certaines situations.

4) Débloquez des fonctionnalités avancées avec les attributs HTML

Lenis propose aussi quelques méthodes un peu plus avancées qui peuvent être appelées dans votre code Javascript pour un contrôle précis du comportement de défilement.

Pour tirer partie de ces fonctionnalités, commencez par ajouter le code suivant (partagé par Timothy Ricks) au script de configuration de Lenis :

$("[data-lenis-start]").on("click", function () {
  lenis.start();
});
$("[data-lenis-stop]").on("click", function () {
  lenis.stop();
});
$("[data-lenis-toggle]").on("click", function () {
  $(this).toggleClass("stop-scroll");
  if ($(this).hasClass("stop-scroll")) {
    lenis.stop();
  } else {
    lenis.start();
  }
});

Ensuite, ajoutez les attributs suivants à vos éléments en fonction des besoins spécifiques de votre design :

• data-lenis-stop : bloque le scroll au clic sur l’élément,
• data-lenis-start : active le scroll au clic sur l’élément,
• data-lenis-toggle : alterne entre blocage et redémarrage du scroll au clic sur l’élément (peut être utile sur un bouton de menu par exemple),
• data-lenis-prevent : permet de maintenir le défilement dans les éléments avec une propriété overflow: auto ou overflow: scroll.

Découvrez comment fonctionne chacun de ces attributs sur ce cloneable de Timothy Ricks.

Pour rappel, voici comment ajouter des attributs HTML à un élément :

• Depuis le Designer, sélectionnez un élément et accédez à l’onglet Settings du panneau de droite.
• Déroulez le sous-onglet Custom Attribute et cliquez sur l’icône +.
• Renseignez l’attribut dans le champ Name et laissez le champ Value vide.

Publiez ensuite votre projet et la fonctionnalité sera désormais active sur le site publié.

Conclusion

En conclusion, Lenis est la solution de premier choix pour ajouter du smooth scrolling à vos projets Webflow.

Sa légèreté garantit d’excellentes performances, la prise en charge de position: sticky permet enfin de concilier le smooth scrolling avec des designs plus créatifs, et sa simplicité d’implémentation permet de créer des expériences utilisateurs plus mémorables, plus facilement.

Si l'article vous a plu, allez plus loin avec les articles suivants :

• GSAP x Webflow : comment créer facilement vos premières animations GSAP
• 3 tips pour apprendre à créer des animations GSAP en 2024
• Guide Splide JS : créez des sliders avancés avec facilité dans Webflow
• 7 codes personnalisés CSS utiles pour améliorer vos projets Webflow