Lenis Smooth Scroll Webflow Master
A convenient and Webflow friendly patch for the Lenis Smooth Scroll library.
Setup
Before </body> tag
<script
data-id-scroll
data-autoinit="true"
data-duration="1"
data-orientation="vertical"
data-smoothWheel="true"
data-smoothTouch="false"
data-touchMultiplier="1.5"
data-easing="(t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))"
data-useOverscroll="true"
data-useControls="true"
data-useAnchor="true"
data-useRaf="true"
data-infinite="false"
defer
src="https://uploads-ssl.webf...lenis-master-offbrand.txt">
</script>
data-id-scroll
data-autoinit="true"
data-duration="1"
data-orientation="vertical"
data-smoothWheel="true"
data-smoothTouch="false"
data-touchMultiplier="1.5"
data-easing="(t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))"
data-useOverscroll="true"
data-useControls="true"
data-useAnchor="true"
data-useRaf="true"
data-infinite="false"
defer
src="https://uploads-ssl.webf...lenis-master-offbrand.txt">
</script>
Place this code in <script> tags either on the Footer code or the before </body> tag on individual page code if you require different set ups per page.
Please note that the opening <script tag contains the modifiers>.
This will be where you adjust the settings / preferences of your lenis instance.
If in doubt you can copy the code directly from this page's before </body> tag. Please refer to the Studio Freight documentation if you are unsure what each of these modifiers do:
Lenis by Studio Freight on Github
IMPORTANT: Lenis specific CSS is auto-added by the script.
Controls
Stop Scroll
Add data-scroll="stop" attribute to popup or trigger open button
Start Scroll
Add data-scroll="start" attribute to popup or trigger close button
Toggle Scroll
Add data-scroll="toggle" attribute to popup or trigger close button
You can also call these events to be part of GSAP interactions / event chains, just include the following:
<script>
// your gsap/js
window.SScroll.call.stop()
// or...
window.SScroll.call.start()
</script>
// your gsap/js
window.SScroll.call.stop()
// or...
window.SScroll.call.start()
</script>
Prevent Scroll
Add data-lenis-prevent attribute to any overflow scroll element
Lorem ipsum dolor sit amet. Sed similique quia ad consequatur sequi et inventore iusto. Aut esse magnam ut beatae suscipit qui ipsum rerum! Et dicta molestiae aut maiores provident in rerum deleniti sed consectetur accusantium.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
Lorem ipsum dolor sit amet. Sed similique quia ad consequatur sequi et inventore iusto. Aut esse magnam ut beatae suscipit qui ipsum rerum! Et dicta molestiae aut maiores provident in rerum deleniti sed consectetur accusantium.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
Lorem ipsum dolor sit amet. Sed similique quia ad consequatur sequi et inventore iusto. Aut esse magnam ut beatae suscipit qui ipsum rerum! Et dicta molestiae aut maiores provident in rerum deleniti sed consectetur accusantium.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
Lorem ipsum dolor sit amet. Sed similique quia ad consequatur sequi et inventore iusto. Aut esse magnam ut beatae suscipit qui ipsum rerum! Et dicta molestiae aut maiores provident in rerum deleniti sed consectetur accusantium.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
Lorem ipsum dolor sit amet. Sed similique quia ad consequatur sequi et inventore iusto. Aut esse magnam ut beatae suscipit qui ipsum rerum! Et dicta molestiae aut maiores provident in rerum deleniti sed consectetur accusantium.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
Lorem ipsum dolor sit amet. Sed similique quia ad consequatur sequi et inventore iusto. Aut esse magnam ut beatae suscipit qui ipsum rerum! Et dicta molestiae aut maiores provident in rerum deleniti sed consectetur accusantium.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
Lorem ipsum dolor sit amet. Sed similique quia ad consequatur sequi et inventore iusto. Aut esse magnam ut beatae suscipit qui ipsum rerum! Et dicta molestiae aut maiores provident in rerum deleniti sed consectetur accusantium.
A architecto iste quo culpa voluptatem et quis commodi eum quae labore?Ea consectetur ducimus ut debitis corrupti et labore eaque rem autem enim qui dolorum distinctio At officia quasi! Est numquam suscipit est impedit nulla aut distinctio nemo et ullam doloremque aut nulla quaerat.
Qui reiciendis consectetur qui placeat possimus ex sequi voluptatem sed autem quaerat ea aperiam esse et maxime sequi. Qui soluta quas qui voluptatem Quis et quae incidunt ex natus veritatis id vitae minus.Vel neque galisum id quasi minus ut odio quisquam ut quam labore ut voluptatibus aspernatur vel fuga laborum sit perspiciatis explicabo.
Qui sint obcaecati sit labore sunt vel officia quos et tempore optio eum quis nihil. Nam sint rerum est magni debitis et inventore debitis. Quo expedita culpa sit architecto voluptatem a culpa iste et atque ipsa qui impedit fuga et dolor consequatur in amet beatae.
Anchor / Section Links
Add data-scrolllink="#value" attribute to any link element
Our code prevents the default section scrolling and lets lenis scroll to the desired element.
IMPORTANT:
This can be any element you want to act as an anchor link, and does not explicitly need to be a link element.
You can apply this on any <div> / <button> / <a> / <p>
There is a hacky workaround in the page code for detecting
.w--current, you can see this in action in our floating nav.
This can be any element you want to act as an anchor link, and does not explicitly need to be a link element.
You can apply this on any <div> / <button> / <a> / <p>
There is a hacky workaround in the page code for detecting
.w--current, you can see this in action in our floating nav.
Infinite Scroll
Set data-infinite="true" in the script block
IMPORTANT: Your first and last element must be identical and minimum 100vh
Scroll Container
Add indata-selector="#scrollContent" in the script block
<style>
body {
padding: 0;
margin: 0;
}
#scrollWrapper {
width: 100%;
height: 100vh;
overflow: hidden;
}
#scrollContent {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
body {
padding: 0;
margin: 0;
}
#scrollWrapper {
width: 100%;
height: 100vh;
overflow: hidden;
}
#scrollContent {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
ADVANCED: This feature allows you to specify a scroll container, this has multiple purposes but a common one is restricting mobile browsers like chrome from creating layout shift when removing the address bar.
IMPORTANT: You must add the additional attribute on the <script> tag, the CSS in your stylesheet and ID's to enable this.
IMPORTANT: You must ensure your content does not change in size after load, for instance lazy loading images can cause the page to be longer than the ScrollTrigger is expecting and animations will be skewed.
Structure
ScrollTrigger
