Mühendislik 1 dk okuma
Bu sitede neden animasyon kütüphanesi yok
Beğendiğimiz sitelerin ortak sorunu yavaşlıktı ve kaynağı çoğu zaman aynı yerdeydi: scroll'u JavaScript'e devretmek.
Bir kurumsal site incelerken en çok beğendiğimiz akış, aynı zamanda en yavaş açılan siteydi. İkisi tesadüf değildi.
Sorun scroll listener'ında
Scroll'a bağlanan her JavaScript, sayfanın en sık tetiklenen olayını ana iş parçacığına bağlıyor. Kullanıcı parmağını sürüklediği sürece kod çalışıyor ve o sırada gelen her tıklama sıraya giriyor. Mobilde INP'yi bozan desen tam olarak budur.
Tarayıcı zaten yapıyor
İstediğimiz dört etkinin dördü de CSS'te var: scroll-snap-type bölüm bölüm ilerlemeyi, animation-timeline: view() içeriğin belirmesini, animation-timeline: scroll(root block) menünün katılaşmasını ve okuma çubuğunu, @view-transition sayfa geçişini veriyor. Dördü de compositor'da çalışıyor; ana iş parçacığına hiç dokunmuyorlar.
Ölçtüğümüz şey
Sonuç, sıfır kilobayt animasyon kodu. Ama asıl kazanç boyut değil: kullanıcı kaydırırken sayfanın hâlâ tıklamaya cevap veriyor olması.
Bir de şu var
İlk denemede snap "kalas gibi" hissettirdi. İki sebebi vardı ve ikisi de bizim eklediğimiz satırlardı: scroll-snap-stop: always hızlı kaydırmanın birden fazla bölüm geçmesini yasaklıyordu, scroll-behavior: smooth ise mandatory snap ile kavga ediyordu. İkisini de kaldırmak, eklemekten daha iyi sonuç verdi.