Desain web premium tidak cukup hanya berupa tampilan statis. Dengan memadukan smooth scrolling Lenis serta kekuatan GSAP (GreenSock Animation Platform) dan ScrollTrigger, kita bisa menciptakan transisi visual mengesankan yang merespons geseran kursor (*scroll*) pengguna.

1. Konfigurasi Smooth Scroll Lenis

Smooth scroll menyelaraskan kecepatan pergerakan roda mouse di berbagai sistem operasi, membuat gerak kamera halaman terasa halus dan nyaman dilihat di berbagai perangkat. Kuncinya adalah menyinkronkan Lenis dengan ScrollTrigger milik GSAP menggunakan loop RAF (requestAnimationFrame).

// Sinkronisasi requestAnimationFrame dengan ScrollTrigger
const lenis = new Lenis({ lerp: 0.1 });
lenis.on('scroll', ScrollTrigger.update);

function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

2. Orkestrasi ScrollTrigger

Gunakan ScrollTrigger untuk memicu animasi masuk hanya saat elemen visual masuk ke layar pandang pengguna. Pola ini menghemat beban performa browser secara signifikan. Dengan menggunakan nilai `stagger`, elemen dalam satu bagian dapat muncul secara berurutan, menciptakan efek kaskade yang terasa profesional dan terencana.

3. Tips Optimasi Performa

Performa sangat penting saat menangani animasi. Selalu gunakan `gsap.context()` bersama pembersihan useEffect React untuk mencegah kebocoran memori. Hindari menganimasi properti CSS yang memicu perhitungan ulang tata letak seperti `width` atau `top` — lebih baik gunakan `transform` dan `opacity` (properti yang hanya diproses oleh kompositor).

Untuk halaman dengan banyak elemen animasi, pertimbangkan menggunakan utilitas `batch()` GSAP atau menerapkan intersection observer untuk memicu animasi hanya saat elemen mendekati viewport. Ini sangat penting untuk situs portofolio dengan banyak bagian, di mana menganimasi semua elemen saat muat halaman akan boros dan menyebabkan kegagapan (jank).

4. Pertimbangan Perangkat Seluler

Smooth scrolling terkadang dapat berbenturan dengan perilaku scroll asli perangkat seluler. Di iOS, efek overscroll dan rubber-banding perlu ditangani dengan hati-hati. Saya sarankan untuk menonaktifkan smooth scroll pada perangkat seluler dengan layar lebih kecil atau daya pemrosesan terbatas. Anda dapat mendeteksinya melalui `window.innerWidth` atau media query CSS untuk mengaktifkan/menonaktifkan Lenis secara kondisional.

Selain itu, event sentuh harus ditangani secara native di perangkat seluler daripada dicegat oleh library smooth scroll. Ini memastikan pengguna mendapatkan pengalaman scroll yang familier dan responsif di ponsel mereka, sementara pengguna desktop menikmati efek smooth scrolling premium.

5. Manajemen Memori Animasi

Selalu lakukan pembersihan objek (cleanup) saat komponen React dicopot (*unmount*) dengan memanggil `ctx.revert()` atau `tl.kill()` agar tidak terjadi kebocoran memori pada browser. Untuk animasi timeline yang kompleks, pertimbangkan menggunakan metode `ScrollTrigger.refresh()` setelah konten dinamis dimuat untuk menghitung ulang posisi pemicu.

Terakhir, gunakan metode `kill()` pada tween dan timeline saat tidak lagi diperlukan, dan hindari menumpuk terlalu banyak ScrollTrigger pada elemen yang sama. Pengaturan animasi yang dioptimalkan dengan baik harus mempertahankan 60fps bahkan pada perangkat kelas menengah, memberikan pengalaman yang mulus bagi semua pengguna terlepas dari perangkat keras mereka.