Slow Scroll

Description

• slow scroll
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. You can use this code to Code Injection > Footer

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #2.1

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>
<script>
(function () {
  let lenis = null;

  function initLenis() {
    if (lenis) {
      lenis.destroy();
      lenis = null;
    }

    lenis = new Lenis({
      duration: 1.4,
      easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
      smoothWheel: true,
      wheelMultiplier: 1,
      lerp: 0.1,
      autoRaf: true,
      anchors: true,
      allowNestedScroll: true
    });
  }

  initLenis();
  window.addEventListener('mercury:load', initLenis);
})();
</script>

#2. Customize

#2.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer.

Add a Block > Choose Markdown.

Then paste this code into Markdown.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>
<script>
(function () {
  let lenis = null;

  function initLenis() {
    if (lenis) {
      lenis.destroy();
      lenis = null;
    }

    lenis = new Lenis({
      duration: 1.4,
      easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
      smoothWheel: true,
      wheelMultiplier: 1,
      lerp: 0.1,
      autoRaf: true,
      anchors: true,
      allowNestedScroll: true
    });
  }

  initLenis();
  window.addEventListener('mercury:load', initLenis);
})();
</script>