Smooth Scrolling of a Web Page

In this guide, I’ll show you how to achieve smooth scrolling on a website by installing Leni, a lightweight and high-performance JavaScript library, directly into Elementor.

What is Lenis?

Lenis is an open-source library developed by Studio Freight.
It allows you to replace classic scrolling with a smooth and controlled scroll, while maintaining compatibility with your animations and SEO.

👉 Benefits:

• Smooth and consistent scrolling.
• Speed and inertia effects control.
• Compatible with GSAP, Locomotive Scroll, and most animation scripts.
• Very simple to implement.

Where to Place the Code in Elementor

1. In the WordPress dashboard, go to Elementor → Custom Code.
2. Click on Add New.
3. Name it, for example, “Lenis Smooth Scroll”.
4. Paste the code below.
5. Set the location to </body> – End (important).
6. Publish.

Full Code to Add

<!-- Script Lenis -->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>

<script>
const lenis = new Lenis({
  duration: 1.2, // Durée de l'animation (plus grand = plus lent)
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Courbe d'accélération/décélération
  direction: 'vertical', // Sens du défilement : vertical ou horizontal
  gestureDirection: 'vertical', // Détection du geste : vertical, horizontal ou les deux
  smooth: true, // Active le scroll fluide
  mouseMultiplier: 1, // Vitesse du scroll souris
  smoothTouch: false, // Désactive le scroll fluide sur mobile par défaut
  touchMultiplier: 2, // Vitesse du scroll tactile
  infinite: false, // Défilement infini désactivé
});

// Debug (optionnel) : permet de voir les données du scroll dans la console
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
  console.log({ scroll, limit, velocity, direction, progress });
});

// Boucle d’animation
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

Conflict Resolution (Optional)

Sometimes, Elementor or certain themes already enable native smooth scrolling, which can cause bugs (latency, scroll rollback).
To avoid this, add this small CSS fix:

<style>
html {
  scroll-behavior: auto !important; /* Désactive le scroll fluide natif du navigateur/Elementor */
}
</style>

Also add it in Custom Code → Body – End (after the Lenis script).

Important Settings

• Scroll speed (duration)
  • 1.2 = smooth and fluid.
  • 0.8 = faster.
  • 2.0 = very slow and elegant.
• Mobile (smoothTouch)
  • false = native scrolling (recommended to avoid breaking touch functionality).
  • true = enables smooth scrolling on mobile as well.
• Easing (transition)
  • The default formula provides a natural effect.
  • You can test with t => t (linear) or t => Math.pow(t, 0.7) for a more dynamic effect.

Best Practices

✅ Test on mobile: sometimes smooth scrolling can hinder the touch experience.
✅ Monitor your animations (e.g., Lottie, GSAP, ScrollTrigger): Lenis is compatible, but sometimes animations need to be synchronized with lenis.raf().
✅ Check performance: on very long pages, slightly increase the value of duration for better comfort.

Practical Example

• Before Lenis: scrolling is jerky, especially on long sections with images.
• After Lenis: scrolling becomes fluid, with slight inertia. This gives a high-end feel, similar to a premium showcase website.

Conclusion

Thanks to Lenis, you can instantly transform the user experience of your Elementor site.
A few lines of code are enough to achieve smooth scrolling that is modern and high-performing.

👉 In summary:

• Add the code in Elementor → Custom Code (Body – End).
• Adjust duration and smoothTouch according to your needs.
• Add the CSS fix if you encounter bugs.