Membangun Animasi GSAP yang Mulus di Next.js 14

Animasi yang terasa premium bukan soal menambahkan semakin banyak efek. Tantangan sebenarnya adalah menjaga scrolling, timeline animasi, React lifecycle, dan rendering browser tetap selaras.

1. Mengelola React Lifecycle dengan Benar #

Di Next.js App Router, pengelolaan lifecycle sangat penting. Instance ScrollTrigger dan event listener harus memiliki scope serta cleanup yang jelas agar animasi tidak terduplikasi dan memory leak dapat dihindari.

Gunakan integrasi resmi @gsap/react dengan useGSAP untuk membatasi scope timeline ke container ref:

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. Menyelaraskan Lenis dengan GSAP #

Jalankan pembaruan Lenis melalui GSAP ticker agar keduanya menggunakan clock animasi yang sama. Dengan begitu, smooth scrolling dan ScrollTrigger tetap sinkron:

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

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

gsap.ticker.lagSmoothing(0);

3. Memilih Properti yang Ramah Rendering #

Untuk sebagian besar animasi, prioritaskan transform dan opacity. Hindari animasi pada properti seperti top, left, dan height jika tidak benar-benar diperlukan:

Dengan lifecycle yang bersih, ticker yang tersinkron, dan properti yang tepat, Anda dapat membangun pengalaman scroll yang terasa mulus tanpa menjadikan performa sebagai pekerjaan belakangan.