Building Smooth GSAP Animations in Next.js 14

Premium motion isn't about adding more effects. The real challenge is keeping scrolling, animation timelines, React lifecycle, and browser rendering in sync.

1. Managing React Lifecycle Correctly #

In the Next.js App Router, lifecycle management matters. ScrollTrigger instances and event listeners should be scoped and cleaned up correctly to avoid duplicated animations and memory leaks.

Use the official @gsap/react package with useGSAP to scope timelines to container refs:

import { useGSAP } from "@gsap/react";
import { useRef } from "react";
import { gsap, ScrollTrigger } from "@/lib/gsapConfig";

export function Hero() {
  const container = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    gsap.from(".headline-char", {
      yPercent: 100,
      opacity: 0,
      stagger: 0.02,
      ease: "expo.out",
      duration: 1,
    });
  }, { scope: container });

  return <div ref={container}>...</div>;
}

2. Synchronizing Lenis with GSAP #

Let Lenis update through the GSAP ticker so both systems observe the same animation clock. This keeps smooth scrolling and ScrollTrigger synchronized:

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

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

gsap.ticker.lagSmoothing(0);

3. Choosing Rendering-Friendly Properties #

Prefer transform and opacity for most motion. Avoid animating layout-heavy properties such as top, left, and height when they aren't necessary:

With clean lifecycle management, a synchronized ticker, and rendering-friendly properties, you can build scroll experiences that feel fluid without making performance an afterthought.