Webflow Tutorial: Lenis Smooth Scroll

In this tutorial, we learn how to setup the Lenis smooth scroll library and use it with Webflow. It's the Best Smooth Scroll library ever for Webflow. We recreate the Ubisoft Quebec website with the help of GSAP and Webflow together!

Grab the codes or clone the template here:

[aniketbhosle]

Which is the Tool you have used to develope the website?

[axh]

Is there a way to make the parallax in image, using lenis scroll?

[ulysse-]

Hey, nice job !

To change 1, 2, 3 colors you can use custom attributes to init() a module and update some dynamique CSS var ( with 1 line of JS more you can put CSS var direct inside the CMS collection and voila, it's automatique :).

I also hack the color system of WF, more contrôle and HSLA magic updrage ! why theyre is somes custom color for the color palette.

var Webflow = Webflow || [];
Webflow.push(function () {

var nav = $('#nav');
var body = $('body');

// set the color :)
var setNavColor = function(color){
console.log("setNavColor ", color);
nav.css("--main-color", "var(--"+color+")");
}

// loop time :)
index ) {

ScrollTrigger.create({
trigger: $( this ),
start: "top top+=100px",
end: "bottom top+=100px",
onEnter: self => {

},
onEnterBack: self => {

},
});

});




});