CSS kaydırma zaman çizgisi mi ScrollTrigger mı.

İkisi de kaydırmayı animasyona çevirir; fark hızda değil, işin nerede koştuğunda: biri tarayıcının zaman çizgisi, öteki ana iş parçacığında bir kütüphane.

Soru «hangisi daha hızlı» gibi görünür, ama karar başka bir yerde veriliyor: sahnenin ilerlemesini kim hesaplıyor ve o hesap nerede koşuyor? Kaydırma zaman çizgisinde ilerlemeyi tarayıcı hesaplar; kütüphanede ilerlemeyi JavaScript hesaplar ve her karede DOM’a yazar. Geri kalan farkların çoğu bu tek farkın sonucudur.

Platform tarafı: animasyon bir zaman çizgisine bağlanır

CSS tarafında bir animasyon, zamana değil kaydırmaya bağlanabilir: `animation-timeline` çizgiyi seçer (kaydırma kutusunun kendisi ya da bir elemanın görünürlüğü), `animation-range` de o çizginin hangi bölümünün kullanılacağını söyler. Aralık dili anahtar sözcüklerle yazıldığı için ölçü kodda değil tarayıcıda hesaplanır; pencere boyu değiştiğinde yeniden hesap istemez.

Bedeli var: aralık sözlüğü küçük ama keskin. «Üst kenar üstte, alt kenar üstte» gibi bir aralık için beklenen anahtar sözcük değil onun geçiş türevi gerekir; ekrandan uzun bir bölümde yanlış seçim, aralığı yüzlerce piksel kaydırır. Ayrıca varsayılan kenar boşluğu kaydırma dolgusunu hesaba katar, yani atlama bağı için bırakılan boşluk çizgiyi başlatma noktasından kaydırabilir.

Kütüphane tarafı: her değer senin elinde

Kütüphane, kaydırmayı bir zaman çizelgesine çeviren ve her karede geri çağrı veren bir katmandır. Bunun bedeli baytla ve ana iş parçacığı işiyle ölçülür; kazancı ise denetimdir. İlerlemeyi okuyup bir tuvale çizmek, bir sayaç metnini güncellemek ya da erişilebilirlik durumunu duyurmak istiyorsan değeri zaten JavaScript’te istersin. Yerleşimi tutan sahnelerde de kütüphanenin sarmalayıcısı, sayfanın ritmini bozmadan yer açmanın hazır bir yoludur — ama o sarmalayıcı ağacı değiştirdiği için seçicilerin eşleşmesini de değiştirebilir.

İkisi birbirinin yerine geçmez, işi bölüşür

Pratikte sınır şurada: CSS’in kendi başına yapabildiği şey görsel bir dönüşümse (öteleme, ölçek, opaklık, bulanıklık, renk) ve geri kaydırıldığında tersine dönmesi doğruysa, zaman çizgisi yeter. Değer metne, tuvale ya da erişilebilirlik ağacına yazılacaksa JavaScript kaçınılmazdır; bu durumda çizgi yine CSS’te kalabilir ve JavaScript ilerlemeyi çizginin kendisinden okur. Bu sitede kullanılan köprü tam olarak budur: sahnenin ilerlemesi CSS animasyonundan okunur, yazan taraf JavaScript’tir.

Mobil ve hareket tercihi

İki yaklaşımın da hareket azaltma tercihine saygı göstermesi gerekir, ama kapıyı farklı yerlere koyarsın: CSS tarafında kural bir medya sorgusunun içine alınır, kütüphane tarafında kurulum hiç yapılmaz. Bir başka fark iki yönlülüktür — kaydırma çizgisi iki yönlü çalışır ve geri kaydırıldığında sahne geri sarılır. Bir kere olması gereken jestler (yazma, açılma, sayma) bu yüzden zaman çizgisine değil, bir kereye mahsus tetikleyiciye bağlanır.

Karşılaştırmanın kısa cevabı şu: platform tarafı bugün sahnelerin çoğunu tek başına taşıyor ve bedeli sıfır bayt; kütüphane ise hâlâ en kısa yol olduğu yerlerde duruyor — koşullu akışta, eski motor garantisi gerektiğinde ve ilerlemeyi bir değere çevirmen gereken her yerde. Bu sitede karar ölçülerek verildi ve iki kütüphane de emekli oldu: kaydırma artık bir CSS zaman çizgisi.

Sitenizin hızını ölçüp kök nedeni kaynağında düzeltmemizi isterseniz site hızı optimizasyonu gerçek kullanıcı verisiyle başlar ve LCP, INP ve CLS için bütçeli bir teslim yapar.

SIK SORULAN SORULAR

CSS zaman çizgisi her sahneyi karşılar mı?

Hayır. Metin yazan, tuval çizen ya da ARIA güncelleyen sahnelerde CSS ilerlemeyi taşır, değeri yine JavaScript yazar. Bu sitede on iki sahnenin on ikisi CSS çizgisine taşındı; netleşme jesti ve tuval motorları JavaScript’te kaldı.

Desteklemeyen tarayıcıda ne olur?

Animasyon hiç kurulmaz ve eleman işaretlemedeki son değerinde durur. Yani kaybolan hareket olur, içerik değil. Bu davranış tasarlanabilir bir şeydir: sahneyi son karesinde okunur bırakmak yeterlidir.

Kütüphaneyi kaldırmanın ölçülen karşılığı ne?

İki şey: sayfaya inen bayt ve her karede koşan senkron döngüsü. Bu sitede satıcı paketi 51,1 kilobayttan 33,5 kilobayta indi, pencereye bağlı kaydırma dinleyicisi sıfıra düştü ve gerçek kullanıcı LCP’si en kötü ölçümde 592–640 milisaniyeden 440 milisaniyeye indi.