Akıcı olsun, bekletmesin

Bir sitede bağlantıya basınca önce ekranın kararmasını, sonra bir animasyonun bitmesini, en sonunda yeni sayfanın açılmasını beklemek istemiyorum. Hareket güzel olabilir; tıklamanın önüne konan yarım saniye yine beklemedir.

Bu siteyi güncellerken istediğim iki şey vardı: kaydırma daha yumuşak aksın, sayfalar arasında dolaşırken de içerik koparak değişmesin. Referansım, Framer ile yayınlanmış Hyper Effekt ajans sitesi oldu. Görüntüsünü kopyalamaktan önce, bu hissi hangi parçaların ürettiğini anlamak istedim.

Önce davranışı ayırdım

Kaydırma ile sayfa geçişi aynı problem değil. İlki mevcut sayfadaki hareketi düzenliyor. İkincisi yeni bir belgeyi getirip göstermeyi gerektiriyor. Tek bir animasyon kütüphanesinin ikisini de çözmesini beklemedim.

Referansın Framer ile hazırlandığı, sayfanın kaynak kodundaki Made in Framer ibaresi, generator etiketi ve Framer üzerinden gelen dosyalarda görülüyor. Bu bilgi teknik olarak önemli: orada görünen hareketler, Framer'ın yayınladığı bileşenler ve animasyon ayarları içinde çalışıyor. Benim sitem ise bir üretici script'in oluşturduğu ayrı HTML belgelerinden oluşuyor. Aynı akıcılık hissi için aynı platformu taşımak gerekmiyor.

Framer kullanılması, sitenin hazır bir template'ten üretildiğini tek başına kanıtlamıyor. Belirli bir şablon adı için doğrulanmış kaynak bulamadığım için referansı bir template adıyla değil, doğrudan Hyper Effekt sitesi ve Framer altyapısıyla veriyorum.

Ana sayfadan About sayfasına geçişte yeni bir ana belge isteği görülmesi de yaklaşımı belirledi. Burada hedef, referansın bütün altyapısını kopyalamak değil; kaydırma hissini ve içerik açılışını mevcut statik yapıya uygun araçlarla kurmaktı. Referanstaki tüm hareket ayarlarını birebir eşleştirdiğimi iddia etmiyorum.

Kaydırmaya küçük bir takip payı

Lenis, bu sitede fare tekerleğinin verdiği hedef konuma daha yumuşak yaklaşmayı sağlıyor. Kullandığım temel ayarlar şöyle:

new Lenis({
  autoRaf: true,
  lerp: 0.1,
  smoothWheel: true,
  syncTouch: false,
  anchors: true,
  allowNestedScroll: true,
});

lerp, mevcut konumla hedef arasındaki mesafeyi adım adım kapatan yumuşatma ayarı. Buradaki 0.1, kendi sitem için seçtiğim değer. Yerel tarayıcı testinde 600 piksellik bir tekerlek hareketi 50 ara kaydırma olayıyla hedefe ulaştı. Bu bir FPS ölçümü ya da her cihaz için performans garantisi değil; hareketin tek sıçrama halinde gerçekleşmediğini gösteren bir kontrol.

Lenis yalnızca hassas işaretçili masaüstü kullanımında devreye giriyor. Telefonda dokunarak kaydırmayı tarayıcıya bıraktım. Kullanıcı işletim sisteminde azaltılmış hareket istiyorsa Lenis hiç başlamıyor; tercih açık sayfada değişirse çalışan örnek kaldırılıyor.

Menü de ayrı bir sınır. Komut menüsü açıldığında devam eden hareket duruyor, arka plan yerinde kalıyor. Menü kapanınca kaydırma yeniden çalışıyor. Akıcılık, kullanıcının açtığı panelin arkasındaki sayfayı sürüklememeli.

Sayfa değişimini tarayıcıya bıraktım

Site hâlâ ayrı HTML belgelerinden oluşuyor. View Transitions, destekleyen tarayıcılarda bu belgeler arasındaki görsel değişimi animasyonla birleştiriyor.

Bizde eski sayfanın görüntüsü 180 milisaniyede kayboluyor; yeni sayfa 380 milisaniyede, 16 piksellik küçük bir yukarı hareketle yerleşiyor. Üst navigasyon ayrı bir görüntü olarak tutuluyor, böylece her geçişte yeniden kayıyormuş gibi görünmüyor.

Önemli karar zamanlamaydı: bağlantıya basınca JavaScript ile gezinmeyi durdurup çıkış animasyonunu beklemiyorum. Normal bağlantı hemen işini yapıyor. Geri tuşu, yeni sekmede açma ve sayfaya özgü script'ler de normal belge gezinmesinin parçası olarak kalıyor.

İlk açılışta da okunabilir içerikten başlıyorum. Başlığı uzun süre sıfır opaklıkta tutan kelime animasyonunu kısalttım. Hareket, içeriğin görünmesine izin veren bir kapı olmamalı.

Camdan netliğe: 140 milisaniye

Geçişe bir de kısa odaklanma hissi ekledim. Yeni sayfa, sanki ince bir camın arkasından görülüyormuş gibi hafif bulanık başlayıp 140 milisaniyede netleşiyor. Buradaki süre yaklaşık 0,14 saniye; uzun bir açılış efekti değil, ilk anda hissedilen kısa bir odak değişimi.

Bulanıklık masaüstünde 3 piksel, dar ekranlarda 1,5 piksel. Header bu etkinin dışında kalıyor. Menü arkasındaki cam görünümüyle benzer bir his var, ama uygulama farklı: canlı sayfanın arkasını sürekli yeniden bulanıklaştıran backdrop-filter yerine, yalnızca gelen sayfanın yakalanmış görüntüsüne kısa süreli filter: blur() uygulanıyor.

Blur işlemi ücretsiz değil. Maliyeti sınırlamak için yarıçapı küçük, süreyi kısa tuttum; yeni bir animasyon kütüphanesi veya gezinmeye bekleme eklemedim. Azaltılmış hareket tercihinde efekt kapanıyor. Bu tercihler her cihazda aynı kare hızını garanti etmiyor.

Sitenin kendi ekran kayıtları

Aşağıdaki videolar bu sitedeki gerçek sayfa geçişlerinden alındı. İlki normal hızda; ikincisi aynı kaydın kısa bir bölümünü 0,25× hızda gösteriyor. Ses ve otomatik oynatma yok. Video dosyaları oynatılmadan yüklenmesin diye preload="none" kullanılıyor.

Tıklamadan önce hazırlanmak

Animasyon, henüz gelmemiş bir sayfayı gösteremez. Bekleme hissini azaltmanın diğer yarısı hedefi erken hazırlamak.

Speculation Rules ile iki hazırlık düzeyi kullanıyorum. Prefetch, hedefin HTML belgesini önceden getirme ipucu. Prerender ise destekleyen tarayıcıda hedef sayfayı arka planda hazırlama isteği.

Bu uygulamada dört ana navigasyon hedefi için belge ön yüklemesi var. Uygun bir site içi bağlantının üzerinde durmak, hedefi arka planda hazırlama adayı yapıyor. Kararı ve kaynak kullanımını tarayıcı yönetiyor; her adayın mutlaka hazırlanacağı varsayılmıyor.

Veri tasarrufu açıkken veya bağlantı 2G olarak bildiriliyorsa bu hazırlık atlanıyor. Harici adresler, indirmeler, API uçları ve aynı sayfa içindeki bağlantılar hazırlama listesine girmiyor. Destek olmayan tarayıcıda, bağlantıya yönelme veya klavyeyle odaklanma üzerine en fazla sekiz hedef için daha basit ön yükleme ipuçları veriliyor.

Arka planda hazırlanmış sayfa henüz ziyaret edilmiş sayfa değil. Bu yüzden ziyaret sayımını da gerçek açılışa erteledim.

Kontrol ettiğim şey

Son testte görsel yanıtlarını 1.600 milisaniye geciktirdim. Yeni belge etkileşime hazırken 30 görsel hâlâ tamamlanmamıştı ve sayfa geçişi başlamıştı. Yani açılış, bütün görsellerin gelmesini beklemiyordu.

Bu yerel bir davranış testi. Gerçek ziyaretçilerden toplanmış hız karşılaştırması değil. Otomasyon araçlarından biri arka planda sayfa hazırlamayı DevTools nedeniyle kapattığı için, o ortamda prerender hız kazancını da ölçtüğümü söylemiyorum. Yerel geçiş animasyonunu ayrıca bağımsız Chromium oturumunda doğruladım.

Kaydırma, menü kilidi, geri dönüş, mobil kullanım, azaltılmış hareket ve veri tasarrufu kontrolleri geçti. Ağ yavaşsa mevcut içerik görünür kalıyor; olmayan veriyi anında getirme sözü vermiyorum. Eklediğim şey, erken hazırlanabilen bir sonraki sayfa ve gezinmenin önüne bekleme koymayan bir hareket katmanı.