Cara Baiki Animasi Beku dengan Lenis ScrollTrigger gsap.ticker

Masalah Utama: Lenis, ScrollTrigger, dan 'Ticker' yang Tidak Selari

Rekaan web moden sering menggabungkan GreenSock Animation Platform (GSAP) untuk animasi yang hebat dan Lenis untuk pengalaman 'scrolling' yang lancar dan berkualiti tinggi. Gabungan ini sangat baik untuk mencipta pengalaman pengguna premium, sesuatu yang sering kami laksanakan untuk klien kami di JRV Systems. Walau bagaimanapun, satu isu biasa timbul apabila menggunakan ScrollTrigger GSAP dengan scrub: true bersama Lenis: animasi menjadi tersekat-sekat atau beku sepenuhnya semasa 'scroll'.

Puncanya adalah konflik dalam cara setiap 'library' mengendalikan kemas kini. Secara lalai, ScrollTrigger GSAP mendengar 'event' scroll asli dari 'browser' untuk mengemas kini progres animasinya. Lenis, untuk mencapai kesan lancarnya, memintas 'event' asli ini. Ia kemudian mengira kedudukan 'scroll' yang telah dilancarkan dan menggunakannya, selalunya melalui CSS 'transforms'. Ini bermakna 'event' scroll asli tidak berjalan secara berterusan semasa pengguna membuat tatalan. Ia mungkin hanya berjalan pada permulaan dan akhir pergerakan 'scroll'.

Oleh kerana ScrollTrigger tidak menerima aliran kemas kini berterusan yang dijangkakan, animasi yang dipautkan pada kedudukan 'scrollbar' (animasi 'scrub') tidak dikemas kini. Ia kelihatan beku sehinggalah 'scroll' Lenis berhenti sepenuhnya, lalu mencipta pengalaman yang kurang menyenangkan.

Penyelesaian: Cara Baiki dengan gsap.ticker.add

Untuk menyelesaikannya, kita mesti mengabaikan kebergantungan ScrollTrigger pada 'event' 'scroll' asli dan sebaliknya menyelaraskannya secara terus dengan kitaran 'render' Lenis. Ini memastikan bahawa untuk setiap 'frame' yang di-'render' oleh Lenis, GSAP juga mendapat peluang untuk mengemas kini. Penyelesaian masalah Lenis ScrollTrigger gsap.ticker ini amat ringkas dan berkesan.

Anda hanya perlu menambah beberapa baris kod JavaScript di tempat anda memulakan Lenis dan GSAP:

// Anggap anda sudah memulakan Lenis, cth. const lenis = new Lenis()

// Baris ini memberitahu ScrollTrigger untuk guna nilai 'scroll' dari Lenis
lenis.on('scroll', ScrollTrigger.update)

// Ini adalah penyelesaian utama: ia menyelaraskan 'update loop' kedua-dua 'library'
gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})

// Pilihan tetapi disyorkan untuk responsiviti
gsap.ticker.lagSmoothing(0)

Mari kita fahami fungsi setiap baris kod ini:

• lenis.on('scroll', ScrollTrigger.update): Ini memberitahu ScrollTrigger untuk melakukan pengiraan kedudukannya setiap kali Lenis mengeluarkan 'event' scroll. Ini adalah langkah pertama yang baik tetapi tidak mencukupi untuk menyelesaikan isu beku.
• gsap.ticker.add(...): Ini adalah bahagian yang paling penting. Kita menggunakan 'loop' requestAnimationFrame dalaman GSAP, yang dikenali sebagai "ticker". Pada setiap 'frame' yang dikemas kini oleh GSAP, kita memanggil fungsi raf (requestAnimationFrame) Lenis secara manual. Ini memaksa Lenis untuk 'render' dalam segerak yang sempurna dengan GSAP. Penukaran time * 1000 adalah perlu kerana 'ticker' GSAP memberikan masa dalam saat, manakala kaedah raf Lenis menjangkakan milisaat.
• gsap.ticker.lagSmoothing(0): Ini menyahaktifkan ciri GSAP yang cuba mengimbangi 'lag'. Dalam persediaan yang disegerakkan seperti ini, lebih baik untuk menyahaktifkannya bagi memastikan pemasaan animasi adalah selangsung dan responsif yang mungkin.

Mengesahkan Pembetulan: Cara Memastikan Kelancaran 60fps

Selepas melaksanakan pembetulan, anda harus mengesahkan bahawa ia berfungsi seperti yang diharapkan. Cara terbaik untuk melakukannya adalah dengan 'developer tools' pada 'browser' anda.

1. Buka DevTools 'browser' anda (biasanya F12 atau Cmd+Option+I).
2. Dalam Chrome atau Edge, cari tab "Rendering". Anda mungkin perlu mengklik menu tiga titik untuk mencarinya.
3. Tandakan kotak untuk "Frame rate (FPS)". Ini akan memaparkan meter FPS di atas halaman anda.

Sekarang, 'scroll' ke atas dan ke bawah halaman di mana animasi ScrollTrigger anda berada. Sebelum pembetulan, anda mungkin akan melihat kaunter FPS menurun dengan ketara atau menunjukkan nombor yang tidak menentu semasa 'scroll'. Selepas melaksanakan pembetulan gsap.ticker.add, anda sepatutnya melihat kadar 'frame' yang stabil, idealnya sekitar 60 FPS (atau lebih tinggi, bergantung pada kadar segar semula monitor anda). Ini adalah pengesahan objektif bahawa animasi anda dikemas kini dengan lancar pada setiap 'frame'.

Kes Terpencil dan Amalan Terbaik

Walaupun pembetulan ini mantap, terdapat dua pertimbangan penting untuk laman web yang sedia untuk produksi.

Kelakuan iOS Safari 'Browser' mudah alih, terutamanya Safari di iOS, mempunyai tingkah laku penjimatan kuasa unik yang boleh menjejaskan animasi berkaitan 'scroll'. Walaupun pembetulan gsap.ticker ini secara amnya berfungsi dengan baik, adalah penting untuk menguji pelaksanaan anda pada iPhone fizikal. Pastikan 'scrolling' terasa responsif dan tidak menimbulkan sebarang gangguan yang tidak dijangka, terutamanya selepas halaman tidak aktif untuk seketika.

Aksesibiliti dan Reduced Motion Sesetengah pengguna mengaktifkan tetapan "reduced motion" dalam sistem operasi mereka untuk mengelakkan pening atau gangguan. Adalah amalan aksesibiliti yang kritikal untuk menghormati pilihan ini. Anda harus meletakkan logik 'smooth scrolling' dan animasi kompleks anda di dalam semakan 'media query'.

// Hanya aktifkan 'smooth scroll' dan pembetulan 'ticker' jika pengguna tidak meminta 'reduced motion'
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  const lenis = new Lenis()

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

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

  gsap.ticker.lagSmoothing(0)

  // Animasi ScrollTrigger anda akan dimulakan di sini
}

Di JRV Systems, kami menjadikan ini amalan standard untuk semua projek klien. Bagi pengguna yang memilih 'reduced motion', laman web akan kembali kepada 'scrolling' asli 'browser', memastikan pengalaman yang selesa dan boleh diakses untuk semua orang.

Kesimpulan: Pembetulan Mudah untuk Sentuhan Profesional

Konflik antara Lenis dan GSAP ScrollTrigger berpunca daripada mekanisme kemas kini mereka yang berasingan. Dengan menggunakan gsap.ticker.add untuk menyelaraskan 'render loop' mereka, anda boleh menyelesaikan isu animasi 'scrub' yang beku. Pembetulan kecil empat baris ini sering menjadi perbezaan antara pengalaman pengguna yang mengecewakan dan sentuhan profesional yang digilap yang dituntut oleh aplikasi web moden. Ia adalah teknik asas bagi sesiapa yang membina laman web mewah dan kaya dengan gerakan.