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.
Ölçüt
- Nerede çalışır — CSS kaydırma zaman çizgisi: Tarayıcının animasyon motorunda; destekleyen motorlarda kompozitöre inebilir · ScrollTrigger: Ana iş parçacığında JavaScript olarak
- Sayfaya inen bayt — CSS kaydırma zaman çizgisi: Yok — sözdizimi platformun parçası · ScrollTrigger: Kütüphane dosyası iner (bu sitede 17,6 kilobayttı ve her sayfaya giriyordu)
- Tarayıcı desteği — CSS kaydırma zaman çizgisi: Destekleyen motorda çalışır; desteklemeyende animasyon kurulmaz, eleman son değerinde durur · ScrollTrigger: Kütüphane her motorda aynı davranışı kurar
- Aralık dili — CSS kaydırma zaman çizgisi: `animation-range` anahtar sözcükleri: cover · contain · entry · exit ve «crossing» türevleri · ScrollTrigger: start/end dizeleri ve sayısal kaydırmalar
- Yerleşimi tutan sahne (pin) — CSS kaydırma zaman çizgisi: Eleman kendi çizgisinde `transform` ile ötelenir; sarmalayıcı gerekmez · ScrollTrigger: Sarmalayıcı (pin-spacer) eklenir ve elemana satır içi ölçü yazılır
- Metin, ARIA ya da tuval yazan sahne — CSS kaydırma zaman çizgisi: CSS tek başına yapamaz; ilerleme JavaScript’e köprüyle verilir · ScrollTrigger: Doğal: her karede geri çağrıda değer yazılır
- Hata ayıklama — CSS kaydırma zaman çizgisi: Tarayıcının animasyon paneli; ara değer `getAnimations()` ile okunur · ScrollTrigger: Kütüphanenin işaretçileri ve kendi API’si
- Bağımlılık ve sürüm — CSS kaydırma zaman çizgisi: Yok — yükseltilecek paket yok · ScrollTrigger: Sürüm yükseltmesi, lisans ve uyumluluk takibi gerekir
- Uygun olduğu yer — CSS kaydırma zaman çizgisi: Görsel, geri alınabilir, kaydırmaya bağlı sahneler · ScrollTrigger: Koşullu akış, karmaşık zaman çizelgesi, eski motorlarda garanti davranış
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.