Every GSAP code used on this template is here. How to edit them and find them is explain on this page. In every code block on this page, we added additional explanation to help you understand everything.
You can find the code in (Site settings) Footer Code.
<!-- Lenis Smooth Scroll -->
<script src="https://unpkg.com/lenis@1.3.1/dist/lenis.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Register necessary plugins (required for validation)
gsap.registerPlugin(ScrollTrigger);
// Initialize Lenis
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // expo.out
smooth: true,
smoothTouch: false,
touchMultiplier: 2
});
// Sync ScrollTrigger with Lenis
lenis.on("scroll", ScrollTrigger.update);
// Use GSAP's ticker to drive Lenis — this is required to pass GSAP validation
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
// Optional: Fire custom event to trigger delayed animations
window.dispatchEvent(new CustomEvent("GSAPReady", {
detail: { lenis }
}));
});
</script>
Lenis Smooth Scroll is a lightweight JavaScript library that enables buttery-smooth, hardware-accelerated scrolling for websites. It works by intercepting the browser’s native scroll behavior and applying eased, customizable motion, creating a more fluid and refined browsing experience. Lenis supports vertical and horizontal scroll, inertia effects, and syncs seamlessly with animations from libraries like GSAP or ScrollTrigger.