Baiki Animasi GSAP Beku: Penyelesaian Ticker Lenis ScrollTrigger

Punca Masalah: Kenapa Lenis dan ScrollTrigger Tidak Segerak

Jika anda membina laman web moden, anda mungkin pernah menggabungkan GreenSock (GSAP) untuk animasi dan pustaka seperti Lenis untuk skrol lancar (smooth scrolling). Plugin ScrollTrigger dari GSAP sangat berkuasa untuk mencipta animasi yang bertindak balas pada kedudukan skrol. Lenis pula memberikan pengalaman skrol yang licin dan digilap, sesuatu yang tiada pada skrol biasa pelayar web.

Masalah timbul apabila anda menggunakan kedua-duanya sekali, terutamanya untuk animasi jenis scrub—di mana progres animasi terikat terus pada kedudukan bar skrol. Anda akan dapati animasi menjadi tersekat-sekat, melompat-lompat, atau beku sepenuhnya. Ini berlaku kerana konflik asas dalam cara kedua-duanya beroperasi.

• GSAP ScrollTrigger secara lalai mendengar pada event skrol asal pelayar web (scroll event).
• Lenis pula mematikan fungsi skrol asal dan mencipta kitaran skrol lancarnya sendiri menggunakan requestAnimationFrame. Ia mengira kedudukan skrol yang diingini dan mengubah suai style laman secara manual untuk menghasilkan efek licin.

Oleh kerana Lenis yang mengawal skrol, event skrol asal yang didengar oleh ScrollTrigger tidak lagi berjalan serentak dengan apa yang pengguna lihat di skrin. Ketidaksegerakan inilah yang menyebabkan animasi menjadi rosak. Untuk menyelesaikannya, kita perlukan satu penyelesaian ticker Lenis ScrollTrigger gsap yang boleh diharap.

Penyelesaian: Kod gsap.ticker.add

Cara yang betul untuk menyegerakkan kedua-dua pustaka ini adalah dengan menyambungkan kitaran kemas kini Lenis terus ke dalam mekanisme kemas kini pusat GSAP, yang dikenali sebagai ticker. Ticker GSAP ialah satu kitaran requestAnimationFrame yang memacu setiap animasi GSAP di laman tersebut. Dengan menambah Lenis ke dalam ticker ini, anda memastikan kedua-dua pustaka beroperasi pada bingkai (frame) yang sama, setiap masa.

Berikut adalah cebisan kod yang penting:

const lenis = new Lenis()

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

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

gsap.ticker.lagSmoothing(0)

Mari kita fahami setiap baris:

1. const lenis = new Lenis(): Kita memulakan Lenis seperti biasa.
2. lenis.on('scroll', ScrollTrigger.update): Baris ini memberitahu ScrollTrigger untuk menjalankan fungsi kemas kininya setiap kali Lenis mengeluarkan event scroll. Ini membantu untuk titik picu (trigger) asas tetapi selalunya tidak mencukupi untuk animasi scrub yang benar-benar licin.
3. gsap.ticker.add((time)=>{ lenis.raf(time * 1000) }): Inilah teras penyelesaiannya. Kita menambah satu fungsi ke dalam ticker GSAP. Pada setiap tick (iaitu, setiap bingkai), fungsi ini akan memanggil kaedah raf (requestAnimationFrame) Lenis, sambil memberikan masa semasa. Ini menjadikan GSAP sebagai jam utama, dan Lenis akan mengemas kini kedudukan skrolnya dalam harmoni yang sempurna.
4. gsap.ticker.lagSmoothing(0): Ini adalah baris pilihan tetapi amat disyorkan. Ia mematikan ciri pelicinan lag GSAP, yang kadangkala boleh menyebabkan lompatan semasa ia cuba mengejar bingkai yang tercicir. Apabila pustaka skrol lancar seperti Lenis sudah menguruskan pengalaman, ciri ini tidak lagi diperlukan dan boleh mengganggu.

Implementasi Sebenar di JRV Systems

Kami mengaplikasikan teknik ini dalam projek-projek yang memerlukan pengalaman pengguna yang premium. Sebagai contoh, untuk sebuah laman web pemaju hartanah di Malaysia baru-baru ini, kami menggunakan animasi pacuan skrol untuk mendedahkan pelan lantai dan mempamerkan ciri-ciri seni bina apabila pengguna skrol ke bawah. Pada mulanya, tanpa integrasi ticker, pengalaman pada monitor kadar segar semula tinggi (high-refresh-rate) terasa agak kasar.

Setelah melaksanakan penyelesaian ticker Lenis dan GSAP ScrollTrigger, masalah tersebut selesai serta-merta. Animasi menjadi sangat licin, mencipta suasana mewah dan lancar seperti yang dikehendaki oleh klien. Cebisan kod kecil ini adalah sebahagian daripada amalan standard kami apabila kedua-dua pustaka ini digunakan bersama.

Perkara Penting: iOS dan Kebolehcapaian

Walaupun penyelesaian ini mantap, terdapat dua faktor penting yang perlu diingat untuk laman web peringkat produksi.

Kes Terpencil di iOS Safari Pelayar Safari di iOS mempunyai cara uniknya sendiri dalam mengendalikan event skrol dan menjimatkan bateri, yang kadangkala boleh menjejaskan pemasaan requestAnimationFrame. Penyelesaian gsap.ticker berfungsi dengan baik di iOS, tetapi adalah sangat penting untuk menguji animasi skrol anda pada peranti iPhone fizikal. Beri perhatian khusus kepada prestasi semasa skrol laju atau pada halaman yang padat dengan kandungan.

Menghormati Pilihan Pengguna Sesetengah pengguna mengaktifkan tetapan prefers-reduced-motion (kurangkan gerakan) dalam sistem operasi mereka atas faktor kesihatan atau pilihan peribadi. Memaksa pengalaman skrol yang penuh gerakan kepada mereka adalah amalan yang tidak baik. Kita harus sentiasa memeriksa tetapan ini dan mematikan Lenis jika ia aktif.

• Mulakan Lenis secara bersyarat:

let lenis;
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  lenis = new Lenis()
  // ... tambah kod ticker di sini
}

Ini memastikan pengguna yang memilih kurang gerakan mendapat pengalaman skrol standard, yang merupakan satu langkah penting untuk kebolehcapaian (accessibility).

Cara Memastikan Penyelesaian Berfungsi

Jangan hanya bergantung pada mata anda. Gunakan alatan pembangun (developer tools) pelayar web anda untuk mendapatkan data prestasi yang objektif.

1. Buka Chrome DevTools.
2. Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows) untuk membuka Menu Perintah.
3. Taip "Show Rendering" dan tekan Enter.
4. Dalam tab Rendering yang muncul, tandakan kotak "Frame Rendering Stats".

Satu paparan akan muncul di penjuru skrin anda. Apabila anda skrol, perhatikan bacaan "Frames per second" (FPS). Sebelum dibaiki, anda mungkin akan melihat nombor yang tidak menentu dan kerap jatuh di bawah 60 FPS. Selepas menggunakan penyelesaian gsap.ticker, anda sepatutnya melihat bacaan yang stabil, biasanya terkunci pada 60 FPS (atau lebih tinggi, bergantung pada kadar segar semula monitor anda). Ini adalah pengesahan anda bahawa animasi sedang dipaparkan dengan lancar pada setiap bingkai.