Smooth scrolling with sticky elements

Design help Animations & Interactions
6

Hi, I’ve recently facing similar problem, usually most of us facing the same problem which is :

  • wants to create a smooth experience while scrolling
  • trying to implement luxy.js or locomotive.js but the animation that related to page view (sticky, etc.) is no longer working because of those code.

I’ve tried using locomotive.js for sticky and for some reason, idk why but it won’t work (but this should have work, idk why it doesn’t on my project), but my other animation such as show/hide Nav bar while scrolling is affected and it became not working.

after searching for hours I’ve found this magnificent code, it’s called Lenis.js, this code is different than the other two mentioned before because this doesn’t need a div block with a class wrapping all the content of the page. This code is very easy to use and also doesn’t affect any of the animation we built in webflow.

The downside of Locomotive Scroll is that tools such as Webflow don’t receive the correct scroll position. A correct scroll position is required in order to correctly display scroll animations. Hence the oftentimes buggy results.

However, Lenis doesn’t seem to hijack the user’s native scroll at all, but instead (in some genius way that I haven’t been able to identify how) seems to put an easing or smoothing on the native scroll while still delivering the correct scroll position to whatever software or code that needs it.

This quote above is a great summary of Lenis, from the writer of the blog that I found this treasure information, you can read it here Smooth Scrolling Using Lenis

Here is the GitHub of Lenis, Lenis GitHub

and if you want to just copy and paste the code on webflow, you can use this code that I’ve modify a little bit for webflow :

<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,
  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,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false,
})

//get scroll value
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
  console.log({ scroll, limit, velocity, direction, progress })
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)
</script>

How to use it : just copy and paste on the page you want to scrolled smoothly!

Hope this help anyone that needed it :grin:

5 Likes