{"id":983,"date":"2025-08-19T10:52:35","date_gmt":"2025-08-19T10:52:35","guid":{"rendered":"https:\/\/laywow.com\/animation\/smooth-scrolling-of-a-web-page\/"},"modified":"2025-09-17T15:11:04","modified_gmt":"2025-09-17T15:11:04","slug":"smooth-scrolling-of-a-web-page","status":"publish","type":"post","link":"https:\/\/laywow.com\/en\/animations\/smooth-scrolling-of-a-web-page\/","title":{"rendered":"Smooth Scrolling of a Web Page"},"content":{"rendered":"\n<p>In this guide, I&#8217;ll show you how to achieve smooth scrolling on a website by installing Leni, a lightweight and high-performance JavaScript library, directly into <strong>Elementor<\/strong>.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">What is Lenis?<\/h2>\n\n<p><a href=\"https:\/\/lenis.darkroom.engineering\/\" data-type=\"link\" data-id=\"https:\/\/lenis.darkroom.engineering\/\" target=\"_blank\" rel=\"noopener\">Lenis<\/a> is an open-source library developed by <strong>Studio Freight<\/strong>.<br\/>It allows you to replace classic scrolling with a <strong>smooth and controlled<\/strong> scroll, while maintaining compatibility with your animations and SEO.<\/p>\n\n<p>\ud83d\udc49 Benefits:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Smooth and consistent scrolling.<\/li>\n\n\n\n<li>Speed and inertia effects control.<\/li>\n\n\n\n<li>Compatible with GSAP, Locomotive Scroll, and most animation scripts.<\/li>\n\n\n\n<li>Very simple to implement.<\/li>\n<\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Where to Place the Code in Elementor<\/h2>\n\n<ol class=\"wp-block-list\">\n<li>In the WordPress dashboard, go to <strong>Elementor \u2192 Custom Code<\/strong>.<\/li>\n\n\n\n<li>Click on <strong>Add New<\/strong>.<\/li>\n\n\n\n<li>Name it, for example, <em>\u201cLenis Smooth Scroll\u201d<\/em>.<\/li>\n\n\n\n<li>Paste the code below.<\/li>\n\n\n\n<li>Set the location to <strong><strong><code>&lt;\/body&gt;<\/code> \u2013 End<\/strong><\/strong> (important).<\/li>\n\n\n\n<li>Publish.<\/li>\n<\/ol>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Full Code to Add<\/h2>\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Script Lenis --&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/gh\/studio-freight\/lenis@0.2.28\/bundled\/lenis.js\"&gt;&lt;\/script&gt;\n\n&lt;script&gt;\nconst lenis = new Lenis({\n  duration: 1.2, \/\/ Dur\u00e9e de l'animation (plus grand = plus lent)\n  easing: (t) =&gt; Math.min(1, 1.001 - Math.pow(2, -10 * t)), \/\/ Courbe d'acc\u00e9l\u00e9ration\/d\u00e9c\u00e9l\u00e9ration\n  direction: 'vertical', \/\/ Sens du d\u00e9filement : vertical ou horizontal\n  gestureDirection: 'vertical', \/\/ D\u00e9tection du geste : vertical, horizontal ou les deux\n  smooth: true, \/\/ Active le scroll fluide\n  mouseMultiplier: 1, \/\/ Vitesse du scroll souris\n  smoothTouch: false, \/\/ D\u00e9sactive le scroll fluide sur mobile par d\u00e9faut\n  touchMultiplier: 2, \/\/ Vitesse du scroll tactile\n  infinite: false, \/\/ D\u00e9filement infini d\u00e9sactiv\u00e9\n});\n\n\/\/ Debug (optionnel) : permet de voir les donn\u00e9es du scroll dans la console\nlenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) =&gt; {\n  console.log({ scroll, limit, velocity, direction, progress });\n});\n\n\/\/ Boucle d\u2019animation\nfunction raf(time) {\n  lenis.raf(time);\n  requestAnimationFrame(raf);\n}\nrequestAnimationFrame(raf);\n&lt;\/script&gt;<\/code><\/pre>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Conflict Resolution (Optional)<\/h2>\n\n<p>Sometimes, Elementor or certain themes already enable <strong>native smooth scrolling<\/strong>, which can cause bugs (latency, scroll rollback).<br\/>To avoid this, add this small CSS fix:<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\nhtml {\n  scroll-behavior: auto !important; \/* D\u00e9sactive le scroll fluide natif du navigateur\/Elementor *\/\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n<p>Also add it in <strong>Custom Code \u2192 Body \u2013 End<\/strong> (after the Lenis script).<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Important Settings<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><strong>Scroll speed (duration)<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>1.2<\/code>  = smooth and fluid.<\/li>\n\n\n\n<li><code>0.8<\/code>  = faster.<\/li>\n\n\n\n<li><code>2.0<\/code>  = very slow and elegant.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Mobile (smoothTouch)<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>false<\/code>  = native scrolling (recommended to avoid breaking touch functionality).<\/li>\n\n\n\n<li><code>true<\/code>  = enables smooth scrolling on mobile as well.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Easing (transition)<\/strong>\n<ul class=\"wp-block-list\">\n<li>The default formula provides a natural effect.<\/li>\n\n\n\n<li>You can test with <code>t =&gt; t<\/code> (linear) or <code>t =&gt; Math.pow(t, 0.7)<\/code> for a more dynamic effect.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Best Practices<\/h2>\n\n<p>\u2705 Test on mobile: sometimes smooth scrolling can hinder the touch experience.<br\/>\u2705 Monitor your animations (e.g., Lottie, GSAP, ScrollTrigger): Lenis is compatible, but sometimes animations need to be synchronized with <code>lenis.raf()<\/code>.<br\/>\u2705 Check performance: on very long pages, slightly increase the value of <code>duration<\/code> for better comfort.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Practical Example<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><strong>Before Lenis<\/strong>: scrolling is jerky, especially on long sections with images.<\/li>\n\n\n\n<li><strong>After Lenis<\/strong>: scrolling becomes fluid, with slight inertia. This gives a high-end feel, similar to a premium showcase website. <\/li>\n<\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n<p>Thanks to <strong>Lenis<\/strong>, you can instantly transform the user experience of your Elementor site.<br\/>A few lines of code are enough to achieve <strong>smooth scrolling<\/strong> that is modern and high-performing.<\/p>\n\n<p>\ud83d\udc49 In summary:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Add the code in <strong>Elementor \u2192 Custom Code (Body \u2013 End)<\/strong>.<\/li>\n\n\n\n<li>Adjust <code>duration<\/code> and <code>smoothTouch<\/code> according to your needs.<\/li>\n\n\n\n<li>Add the CSS fix if you encounter bugs.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, I&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":934,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[22],"class_list":["post-983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animations","tag-scroll"],"acf":[],"_links":{"self":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":1,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/983\/revisions"}],"predecessor-version":[{"id":984,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/983\/revisions\/984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media\/934"}],"wp:attachment":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media?parent=983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/categories?post=983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/tags?post=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}