Last active
April 28, 2024 16:09
-
-
Save diegoliv/8662d72607e7c5f5ad25536799dbb5d7 to your computer and use it in GitHub Desktop.
Lenis + Webflow (with anchor links workaround)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@v0.2.26/bundled/lenis.js"></script> | |
<script> | |
if (!document.querySelector("html").classList.contains('w-editor')){ | |
const lenis = new Lenis({ | |
duration: 1.2, | |
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou | |
direction: 'vertical', // vertical, horizontal | |
gestureDirection: 'vertical', // vertical, horizontal, both | |
smooth: true, | |
smoothTouch: false, | |
touchMultiplier: 2, | |
infinite: false, | |
}) | |
// Get scroll value. This is just for testing purposes. Delete this if you're not using the scroll value for anything. | |
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => { | |
console.log({ scroll, limit, velocity, direction, progress }) | |
}) | |
function raf(time) { | |
lenis.raf(time) | |
requestAnimationFrame(raf) | |
} | |
// Grab all elements that have a "data-target" attribute | |
const scrollButtons = document.querySelectorAll('[data-target]'); | |
// For each element, listen to a "click" event | |
scrollButtons.forEach(button => { | |
button.addEventListener('click', e => { | |
e.preventDefault(); | |
// get the DOM element by the ID (data-target value) | |
var target = button.dataset.target, | |
$el = document.getElementById(target.replace('#', '')); | |
// Use lenis.scrollTo() to scroll the page to the right element | |
lenis.scrollTo($el, { | |
offset: 0, | |
immediate: false, | |
duration: 3, | |
easing: (x) => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2), // https://easings.net | |
}); | |
}); | |
}); | |
requestAnimationFrame(raf) | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I used your code and I love it! Worked perfectly, I'm not a coding expert and my concern is, how to automatically hide the native scrollbar on the right side after scrolling? I want to hide it like the default on Webflow. Please help me with the code. Highly appreciate!