Penyelesaian gsap.ticker untuk Animasi Beku Lenis ScrollTrigger

Masalahnya: Kenapa Lenis dan ScrollTrigger Tidak Selalu Serasi

Jika anda membina laman web moden, anda mungkin pernah menggabungkan GSAP (GreenSock Animation Platform) untuk animasi dan pustaka smooth scrolling seperti Lenis. Kedua-duanya adalah alat yang hebat. Plugin ScrollTrigger dari GSAP sangat bagus untuk mencipta animasi yang dipacu oleh skrol, tetapi apabila anda memperkenalkan Lenis, anda mungkin akan hadapi isu yang menjengkelkan: animasi scrub menjadi beku.

Animasi berjalan lancar semasa laman dimuatkan, tetapi sebaik sahaja anda mula skrol, ia tersekat pada bingkai pertamanya. Animasi berasaskan picu (trigger) yang tidak di-scrub mungkin masih berfungsi, tetapi apa-apa yang terikat terus pada kedudukan skrol akan gagal.

Ini berlaku kerana kedua-dua Lenis dan GSAP mahu mengawal gelung requestAnimationFrame — mekanisme pelayar untuk menjalankan animasi yang lancar. Lenis mengambil alih fungsi skrol asal untuk mencipta kesan licinnya. Dalam proses itu, ia secara efektif merampas gelung kemas kini utama. Ticker dalaman GSAP, yang menjadi sandaran ScrollTrigger untuk mengemas kini animasi bingkai demi bingkai semasa skrol, tidak lagi menerima kemas kini yang diperlukannya. Ia umpama jam yang berhenti berdetik; animasi tidak tahu bahawa masa (atau kedudukan skrol) telah berubah.

Ini adalah halangan biasa, dan mujurlah, terdapat satu penyelesaian gsap.ticker untuk Lenis ScrollTrigger yang standard dan boleh dipercayai untuk menyegerakkan kedua-duanya dengan betul.

Penyelesaiannya: Baiki dengan gsap.ticker yang Mudah

Untuk memastikan Lenis dan ScrollTrigger GSAP berfungsi bersama, anda perlu memberitahu GSAP untuk mendapatkan kemas kini masanya daripada gelung animasi Lenis. Daripada dua gelung berasingan yang tidak segerak, anda cipta satu gelung bersepadu yang dikawal oleh Lenis.

Caranya melibatkan penambahan listener pada acara 'scroll' Lenis dan mengemas kini ScrollTrigger secara manual, kemudian menyambungkan ticker utama GSAP ke fungsi requestAnimationFrame Lenis. Berikut adalah coretan kod penting:

const lenis = new Lenis()

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

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

gsap.ticker.lagSmoothing(0)

Mari kita huraikan kod ini:

• const lenis = new Lenis(): Kita mulakan Lenis seperti biasa.
• lenis.on('scroll', ScrollTrigger.update): Ini memberitahu ScrollTrigger untuk mengemas kini pengiraan kedudukannya setiap kali Lenis melaporkan acara skrol. Ini penting untuk animasi berasaskan picu (bukan scrub).
• gsap.ticker.add((time)=>{...}): Inilah teras penyelesaiannya. Kita menyambung kepada ticker GSAP sendiri.
• lenis.raf(time * 1000): Di dalam ticker GSAP, kita memanggil fungsi raf (requestAnimationFrame) Lenis pada setiap detik. Argumen time dari GSAP adalah dalam saat, manakala Lenis menjangkakan milisaat, jadi kita darab dengan 1000. Ini menjadikan Lenis pemacu kemas kini bingkai animasi.
• gsap.ticker.lagSmoothing(0): Baris ini tidak wajib tetapi disyorkan untuk membantu mengelakkan animasi daripada melompat jika tab pelayar menjadi tidak aktif dan kemudian aktif semula.

Dengan menambah kod ini selepas anda memulakan Lenis dan GSAP, anda memastikan kedua-dua sistem disegerakkan dengan sempurna.

Mengesahkan Pembetulan: Adakah Ia Berjalan pada 60fps?

Bagaimana anda tahu penyelesaian ini berfungsi dengan betul? Pelaksanaan yang salah mungkin nampak berfungsi tetapi boleh jadi tidak cekap atau bergegar. Anda boleh sahkan bahawa gsap.ticker anda berjalan lancar dengan menambah console.log ringkas.

Ubah suai fungsi ticker buat sementara waktu:

gsap.ticker.add((time, deltaTime) => {
  lenis.raf(time * 1000)
  console.log(deltaTime)
})

Buka konsol pembangun (developer console) pelayar anda dan skrol halaman. Anda sepatutnya melihat aliran nombor yang stabil dicatatkan. deltaTime mewakili masa dalam milisaat sejak bingkai terakhir. Pada monitor 60Hz standard, 60 bingkai sesaat (fps) yang lancar akan menghasilkan nilai sekitar 16.67 (1000ms / 60fps). Jika anda melihat ini, gelung animasi anda sihat.

Jika nombor tidak menentu atau jauh lebih tinggi, ia mungkin menunjukkan isu prestasi pada halaman anda yang tidak berkaitan dengan penyelesaian ini, tetapi ia mengesahkan ticker itu sendiri sedang berjalan.

Pertimbangan Penting: iOS Safari dan Kurangkan Gerakan

Walaupun penyelesaian gsap.ticker untuk Lenis ScrollTrigger ini berfungsi pada kebanyakan pelayar moden, terdapat beberapa amalan terbaik yang perlu diingat, terutamanya untuk kebolehcapaian dan prestasi mudah alih.

iOS Safari: Pada sesetengah versi iOS, smooth scrolling yang agresif boleh mengganggu momentum asli dan tingkah laku sentuhan pelayar, menyebabkan rasa "melekit" atau tidak responsif. Adalah penting untuk menguji secara menyeluruh pada peranti sebenar. Kadangkala, mengurangkan nilai lerp (interpolasi linear) Lenis atau melumpuhkannya pada peranti sentuh adalah kompromi yang perlu.

Kebolehcapaian: Tidak semua orang mahu atau boleh bertolak ansur dengan laman web yang sarat dengan gerakan. Adalah penting untuk menghormati pertanyaan media prefers-reduced-motion. Anda boleh membungkus kod permulaan Lenis anda dalam satu semakan untuk melumpuhkannya bagi pengguna yang telah mengaktifkan tetapan ini.

Begini cara anda boleh melaksanakannya:

• Periksa jika pengguna memilih untuk kurangkan gerakan.
• Jika ya, jangan mulakan Lenis sama sekali. Laman anda akan kembali kepada skrol pelayar asli.
• Jika tidak, teruskan dengan persediaan Lenis dan ticker GSAP.

Ini memastikan pengalaman yang selesa dan boleh diakses untuk semua pengguna, yang merupakan prinsip teras dalam projek yang kami kendalikan di JRV Systems.

Pengalaman Kami Membina di Malaysia

Kami pertama kali menghadapi isu ini semasa membangunkan sebuah laman e-dagang yang sangat interaktif untuk pelanggan di Kuala Lumpur. Reka bentuknya memerlukan imej produk yang boleh diskala dan berputar berdasarkan kedudukan skrol—satu kes penggunaan klasik untuk GSAP ScrollTrigger dengan nilai scrub. Apabila kami menambah Lenis untuk memberikan rasa yang lebih premium, animasi serta-merta menjadi beku.

Melaksanakan penyelesaian gsap.ticker.add menyelesaikan masalah tersebut dengan kemas. Ia hanyalah secebis kod kecil, tetapi ia menangani konflik asas antara cara kedua-dua pustaka popular ini beroperasi. Memahami interaksi ini adalah kunci untuk membina pengalaman web yang lancar dan boleh dipercayai seperti yang diharapkan oleh perniagaan di Malaysia hari ini.