Instructions

Guide for using your template.

GSAP Custom Code

All GSAP code used in this template is included here for understanding, customizing, and managing this website template.  Each code block comes with additional explanations to help you understand everything.
Open the relevant Page Settings and scroll to the Custom Code section. Most animation scripts are located inside the “Before </body> tag” field.
SMOOTH SCROLL LENIS
This script adds smooth and controlled vertical scrolling using Lenis. It also provides custom attributes to start, stop, or toggle page scrolling, making it useful for menus, overlays, and modal interactions.
<!-- =========================================================
SMOOTH SCROLL LENIS
========================================================= -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.css" />
<script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>
<script>

  const lenis = new Lenis();

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

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);
</script>