Adding Lenis smooth mouse scroll in bricks builder

How To
1

Hi developers,

I need help on how to add Lenis smooth mouse scroll in bricks builder.

I’ve tried adding the Lenis code to my header code block in bricks settings but seems not to work.

I also try adding it via code snippet. Still doesn’t work

Has anyone use the Lenis smooth scroll on mouse scroll to their website to help me out how to go about it.

Thanks

2

Share the code you were adding, it’s probably just missing something or a typo.

1 Like
3

Thanks @wplit

Here is the code which i paste in the Bricks, Settings, Custom Code, Header Scripts

<!-- Lenis Smooth Scroll Library -->
<script src="https://unpkg.com/@studio-freight/lenis@latest/bundled/lenis.js"></script>

<script>
  // Initialize Lenis smooth scroll
  const lenis = new Lenis({
    duration: 2,  // Slow scroll duration for ease-out effect
    easing: t => 1 - Math.pow(1 - t, 4),  // Quartic easing for smooth deceleration
    smooth: true,  // Enable smooth scrolling
    direction: 'vertical',  // Scroll direction
    smoothTouch: true,  // Smooth scroll on touch devices
  });

  // Function to update scroll frame
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  // Start the request animation frame loop
  requestAnimationFrame(raf);
</script>

Also my aim is to have the exact type of scroll on this website “https://interiorbygini.blog/”

Thanks.

4

this file doesn’t exist. it works when replacing with ‘https://unpkg.com/lenis@1.1.14/dist/lenis.min.js’

1 Like
5

Thanks so very much @wplit

Your suggestion work but I later use the locomotive scroll to achieve the exact effect that I wanted.

I really appreciate your time and effort. It really help me alot. Thanks