Position "sticky" does not work with luxy.js

Design help Custom code
25

Hi, to everyone that facing this problem, yes, luxy.js doesn’t support sticky element that we made in webflow, you can try locomotive.js that was mentioned by @George_Ershov , but I’ve found something new that I believe is better for this situation, it’s called Lenis.js, I read an amazing article about it here Smooth Scrolling Using Lenis.js ,

You can visit Lenis.js GitHub here Lenis.js GitHub,

Here is the code to apply it on 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 : just copy and paste that code to your page, and publish, all the native animation we made in webflow won’t be affected

Hope this helps anyone that needed it :grin:

3 Likes