Modern Web Motion: GSAP and Lenis Scroll

The feeling of smooth, fluid inertia on scroll has become a hallmark of premium, state-of-the-art web design. Creating this effect requires a robust smooth scrolling implementation coupled with an advanced animation timeline engine.

Why Smooth Scroll?

Browsers handle scroll updates in discrete chunks, leading to a "stepped" look that can disrupt smooth animation timelines. By intercepting scroll events and applying an inertial decay curve, we can achieve silky smooth scrolling that matches high-refresh-rate monitors.

We use Lenis for smooth scroll alongside GSAP for animations.

import Lenis from 'lenis';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
});

// Update ScrollTrigger on Lenis tick
lenis.on('scroll', ScrollTrigger.update);

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

gsap.ticker.lagSmoothing(0);

Performance Principles

When animating on scroll, keep these three key principles in mind to avoid page stutter:

1. Use Hardware-Accelerated Properties: Only animate properties like transform (x, y, scale, rotation) and opacity. Animating properties that trigger layout re-calculations (margin, top, height) will drop frames.
2. Batch ScrollTriggers: Combine close scroll-triggers into single GSAP timelines to reduce active listener counts.
3. Disable Cursors on Touch: Custom cursors and hover displacement maps should be disabled on mobile/touch viewports using CSS media queries (@media (pointer: coarse)). This saves substantial processor cycles on mobile GPUs.