HOME /INSTRUCTION

Instructions

It’s designed to help you quickly build a modern,
responsive website with ease—no complex setup required.
SCROLL

Lenis Smooth Scrolling

This provides smooth scrolling across the entire template. To turn off just comment out this code.

<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.20/dist/lenis.css" />
<script src="https://unpkg.com/lenis@1.3.20/dist/lenis.min.js"></script> 
<script>
  gsap.registerPlugin(ScrollTrigger);

  const lenis = new Lenis({
    duration: 1.5,
    easing: (t) => 1 - Math.pow(1 - t, 3),
    smooth: true,
    smoothTouch: false, // ✅ important
  });

  // sync
  lenis.on('scroll', ScrollTrigger.update);

  // raf loop
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);

  // ✅ correct scroller
  ScrollTrigger.scrollerProxy(document.documentElement, {
    scrollTop(value) {
      return arguments.length ? lenis.scrollTo(value, { immediate: true }) : lenis.scroll;
    },
    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      };
    },
  });

  // ✅ important
  ScrollTrigger.defaults({
    scroller: document.documentElement,
  });

  // refresh fix
  ScrollTrigger.addEventListener('refresh', () => lenis.resize());

  ScrollTrigger.refresh();
</script>

Get the Protection You Need In Minutes

cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image
cta image