Hareket

Her sayfa, tek bir betik çalışmadan önce okunur durumdadır: sunucunun gönderdiği, her bölümün ve her görselin son hâlidir. Tek istisna aşağıda anlatılıyor. Hareket, bir betiğin sonradan eklediği bir katmandır ve yalnızca istendiği yerde eklenir.

Bir sayfanın üç hâli.

Sayfalar kök öğede no-js sınıfıyla gelir. Her sayfada çalışan site betiği bu sınıfı kaldırır; motion sınıfını ise yalnızca azaltılmış hareket istemediyseniz ekler. Böylece bir sayfa üç hâlden birinde kalır.

Ön durumlar hareket sınıfının altında durur.

Ön durum, bir öğenin hareket etmeden önceki görünüşüdür: biraz aşağıda, çizilmemiş ya da gizli. Ön durumlar öğenin kendisine değil, html.motion altına yazılır; böylece site betiği çalışmadıkça hiçbiri uygulanmaz. Genel stil dosyasındaki belirme kuralları bu kalıbı gösterir.

html.motion [data-r] {
  transform: translateY(14px);
  transition: transform 0.8s var(--ease-out-quart);
}
html.motion [data-r].in {
  transform: none;
}
html.motion [data-r="rule"] {
  transform: scaleX(0);
  transform-origin: left;
}
html.motion [data-r="rule"].in {
  transform: none;
}

Tek istisna: ana sayfanın açılışı.

Ana sayfanın açılışı iki parçalı bir sahneyi ekrana sabitler. Betik devralmadan önce tek bir karede bile görünmesin diye ikinci metin bloğu html.motion altında değil, öğenin kendisinde kırpılmış başlar. Betik kapalıysa ya da azaltılmış hareket açıksa tam görünür; açılışın betiği kendi kurulumu başarısız olursa da onu açar. Betik açık olduğu hâlde o betik 6 s içinde gelmezse bir CSS kurtarması onu açar ve sahneyi sabitlemeden bırakır; daha geç gelen betik bu düzeni olduğu gibi korur.

Her sayfa kendi son hâllerini kendisi sınar. Hangi testin hangi sayfayı kapsadığı, Azaltılmış hareket bölümündeki tabloda.

• Betik yokken her görsel son hâlindedir.

  NedenKapatılan ya da engellenen bir betik, sayfanın söylemek istediği her şeyi yine ekranda bırakmalı.

  TestHer değişiklikte bir testle korunur.

• Ön durumlar hareket sınıfının altına yazılır; tek istisna ana sayfanın açılışıdır.

  NedenVarsayılanı görünür olan içerik, bir şey ters giderse yine görünür kalır.

  İncelemeBir testle değil, incelemeyle korunur.

Stil dosyalarımız tek bir hareket tokenı tanımlar: token dosyasındaki bir yumuşatma eğrisi. Hızlı başlar ve zamanının çoğunu yerine oturmaya harcar; öğe çabuk varır, yavaşça durur.

Süre nereye harcanır.

Bu eğrideki bir öğe için sürenin dörtte biri geçtiğinde alınan yol yüzde 78, sürenin yarısında yüzde 97 olur. Kalan zaman yerine oturmaya gider ve varışı sakin gösteren de bu oturuştur.

Ad ve değer

Tokenın adı --ease-out-quart. Adı değil dört sayıyı okuyun: eğriyi onlar tanımlar ve Zero Door arayüzünün ease-out eğrisi de tam olarak bu dört sayıdır.

Token dosyamızı indirin (tokens.css)

Birkaç geçiş, ikincil bir renk değişiminde eğriyi hiç yazmaz; o değişim tarayıcının varsayılanına düşer. Test yazılmış eğriyi sayar, yazılmamışı değil. Bir kapanışın sonunda visibility değerinin değişmesi gibi sıfır süreli bir anahtarı da saymaz: süre yoksa eğrinin biçimlendireceği bir hareket de yoktur. Bir geçişin ya da animasyonun adını verdiği başka her eğri, bir sözcük (ease, ease-in, ease-out, ease-in-out, linear, step-start ve step-end) ya da bir işlev (cubic-bezier(), steps() ve linear()) olsun, testi düşürür.

• Kaynağımızda CSS geçişlerinin ve animasyonlarının adını verdiği her eğri tokendir.

  NedenTek eğri, bütün siteye tek bir varış biçimi verir.

  TestHer değişiklikte bir testle korunur.

Betikli eğriler tek bir modülden gelir.

GSAP ile kurulan zaman çizgileri kendi eğrilerini adlandırmaz; onları betikli hareketin sözlüğü olan tek bir modülden alır. Stil dosyasındaki token yalnızca CSS içindir. Aşağıdaki eğriler derleme anında bu modülden okunur. Hedefi aşıp dönen tek eğri EASE.pop; onu da yalnızca işaretler kullanır.

• Hedefi yalnızca işaretler aşar: bir nokta, bir durak, bir onay kutusu ya da bir mühür. Karar, sayı ya da etiket hedefi aşmadan açılır.

  NedenYerine oturmadan önce olduğundan fazlasını gösteren bir karar ya da sayı, olduğundan başka bir şey söyler.

  TestHer değişiklikte bir testle korunur.

Stil dosyalarımız süre tokenı tanımlamaz: her CSS süresi kullanıldığı yerde yazılır; bu yüzden aşağıdaki değerler kaynaktan toplanır. Bunları bir ölçek olarak değil, kullanımdaki değerler olarak okuyun. Betikli hareket tersine çalışır: kullandığı her süre, aşağıda anlatılan küçük bir token takımından gelir.

Kaydırma sahnelerinin süreleri tek bir değer değil, bir kuraldır; bu yüzden sahnelerle birlikte anlatılır.

Betikli süreler tokendır.

GSAP zaman çizgileri her süreyi aynı sözlükten alır: 0,16 s ile 1,8 s arasında 7 basamak; her biri bir öncekinin en az 1,3 katıdır, böylece hiçbir iki basamak birbirine benzemez. REST, bir döngünün iki geçiş arasındaki dinlenmesidir ve herhangi bir tek hareketten uzundur.

Adlandırılmış hareketler.

Tween'lerin çoğu 7 adlandırılmış hareketten birini yayar; her biri bir süreyi ve bir eğriyi tek bir ad altında toplar. Gerektiği yerde süre değiştirilir: { ...MOTION.draw, duration: DUR.enter }.

İki kaydırma sahnesinde bu süreler saniye değil, ana zaman çizgisi üzerindeki uzunluklardır: kaydırma bu çizgiye eşlenir; yani orada tokenlar bir akışın saat süresini değil oranlarını belirler. Zaman çizgisindeki konumlar, bir kademenin aralığı ve bir döngünün dönemi sözlüğün değil yerleşimin parçasıdır: bileşenlerinde adlandırılmış sabitler olarak kalır.

Betik testi neyi yakalar.

Bir birim testi sitenin her betiğini, bileşenlerin <script> blokları dahil okur ve aşağıdakilerden herhangi birinde düşer.

• ease değerine dize olarak verilen bir eğri
• parseEase işlevine dize olarak verilen bir eğri
• herhangi bir dizenin içinde geçen bir GSAP eğri adı
• duration, delay ya da repeatDelay değerine verilen çıplak bir sayı
• bir sürenin varsayılan değeri olarak çıplak bir sayı
• .duration(), .delay(), .repeatDelay() ya da delayedCall() çağrısına verilen çıplak bir sayı

Test 4 kaynağa dokunmaz; her birinin nedeni testte yazılıdır. Bunlardan biri muafiyetine ihtiyaç duymadığı anda ikinci bir test düşer; böylece liste nedenlerinden uzun yaşayamaz. Stil dosyalarının kendi testi var; yukarıda, eğriyle birlikte anlatılıyor.

• Betikli hareket her süreyi ve her eğriyi sözlükten alır.

  NedenHer bileşen kendi sayılarını yazdığında aynı hareket pek çok biçimde tarif ediliyordu ve site tek bir bütün gibi hareket etmez olmuştu.

  TestHer değişiklikte bir testle korunur.

Düğmeler aynı eğri üzerinde 0,16 s içinde yanıt verir. Üzerine gelince renk değişir; basınca düğme hafifçe küçülür ve scale(0.97) olur. Aşağıdaki düğmeleri deneyin.

Azaltılmış harekette değişim anlıktır: düğme yine yanıt verir, yalnızca yol almaz.

• Düğme geri bildirimi (.btn) token üzerinde 0,16 s sürer ve basınca scale(0.97) olur.

  NedenGeri bildirim, basışın algılanıp algılanmadığını merak etmenizden önce gelmeli.

  TestHer değişiklikte bir testle korunur.

Sitedeki içeriğin çoğu en yalın hareketi kullanır. data-r ile işaretli bir öğe biraz aşağıdan başlar ve yerine yükselir. data-r="rule" ile işaretli bir ince çizgi soldan kendini çizer.

Zaten görünür olan öğeler, hareket sınıfını ekleyen aynı eşzamanlı blokta açılır; bu yüzden tek bir kare bile gizli kalmazlar. Geri kalanlar ilk kez görünür olduklarında bir kez açılır ve sonra izlenmez. Betik çalıştıktan 3 saniye sonra bir güvenlik ağı hâlâ bekleyen her şeyi açar; hiç tetiklenmeyen bir gözlemci hiçbir bölümü aşağıda bırakamaz.

Belirmeler arasında kademe yok. Her öğe kendi tetiğiyle hareket eder.

• Bir belirme yalnızca transform kullanır: 14px yükselme ya da scaleX ile ince çizgi, token üzerinde 0,8 s.

  NedenTek özelliği değiştiren küçük ve hızlı bir hareket gösteri gibi değil, varış gibi okunur.

  TestHer değişiklikte bir testle korunur.

• Her belirme, görülsün görülmesin 3 saniye içinde açılır.

  Nedenİçerik, hiç tetiklenmeyen bir gözlemciyi asla beklememeli.

  TestHer değişiklikte bir testle korunur.

Hareket transform, clip-path, stroke-dashoffset ve r, width, height gibi SVG geometrisini değiştirir. Saydamlık hiç canlandırılmaz; yerleşim ise yalnızca sizin girdinize verilen, adı konmuş birkaç yanıtta oynar.

Saydamlık hiç canlandırılmaz.

Kısmi saydamlık, geçiş sürdüğü sürece kontrastı düşürür. Belirmeler solarak geldiğinde otomatik kontrast denetimleri metni solmanın ortasında ölçtü ve başarısız saydı; az gören bir okur da aynı soluk karelerle karşılaşır. Yükselme ise metni ilk kareden son kareye tam mürekkepte tutar; bu yüzden hiçbir metin ya da arayüz öğesi solarak gelip gitmez.

Test neyi denetler.

Test sitenin her bileşenini, betiğini ve stil dosyasını okur. opacity adını veren, all diyen ya da hiç özellik adı vermeyen bir geçiş; opacity değiştiren bir keyframe; opacity yazan bir betik (bir GSAP ya da Web Animations anahtarı, bir stil yazımı ya da bir geçiş metni); opacity için bir SVG animate öğesi; hareketi opacity içeren yardımcı sınıflar ve çapraz solan sayfa geçişleri testi düşürür. Yorumlara ve durağan opacity değerlerine bakmaz. Her kareyi kendi alfasıyla çizen gürültü tuvaline de bakmaz: orada alfa bir geçiş değil, çizilen bir değerdir.

• Kaynağımızda hiçbir geçiş, keyframe, betik ya da yardımcı sınıf saydamlığı canlandırmaz.

  NedenMetin yalnızca dururken değil, her karede kontrastı geçmeli.

  TestHer değişiklikte bir testle korunur.

Yerleşim kıpırdamaz.

Belirmeler ve kaydırma hareketi width, height, top, left, margin ya da padding değerlerini canlandırmaz: yerleşim değişikliği kendinden sonraki her şeyi kaydırır. Hareketli ve hareketsiz hâlde farklı olan geometri bir betik sınıfıyla değil, medya sorgularıyla değişir; yani hareket sınıfının kendisi yerleşimi hiç değiştirmez.

Gözlenen istisnaların hepsi sizin girdinize verilen yanıtlardır. Kaydırma sahnesindeki etkin adım kapsülü 0,6 s içinde genişler. Ana sayfanın kurallar bölümünde, geniş ekranda (min-width: 1200px) bir kuralın çerçevesi üzerine gelince, odaklanınca ya da dokununca 0,55 s içinde büyür; glifi de left ile 0,55 s içinde kayar. Daha dar ekranda (max-width: 1199.98px) bir kural, dokununca akordeon gibi açılır: açıklaması grid-template-rows ile 0,45 s içinde büyür.

• İçerik yerleşim özelliklerini canlandırmaz; adım kapsülü ve ana sayfadaki bir kuralın açılması adı konmuş istisnalardır.

  NedenCanlandırılan yerleşim sayfayı elinizin altında kaydırır ve kendinden sonraki her şeyi oynatır.

  İncelemeBir testle değil, incelemeyle korunur.

Görünür olunca oynayan çizimler tek bir işlevi paylaşır: revealMotion. Bir görseli dört hâlden geçirir ve o anki hâli öğeye data-state olarak yazar; testler ve geliştirici araçları onu buradan okur.

Önce sonuç.

Giriş sonuçta biter: bir karar, işaretler, damgalar, bulunanlar. Döngü bu sonuçtan başlar ve denetimi bitmiş resmin üzerinden yeniden geçirir; bir işareti kendini çizip yeniden silinen bir halkayla yanıtlar ya da bir çizgi boyunca bir nokta gezdirir; sonucun kendisi yerinde kalır. Bir test 6 görseli bir geçişten uzun süre boyunca, duraklatıldıktan sonra da yeniden örnekler: baraj çizimi, kapsam ızgarası, saldırı yolu, bulgu raporu, laboratuvar oturumu ve hex taraması. İki döngü bilerek bir işaretten fazlasını oynatır: Zero Door sayfasındaki meşruiyet karşılaştırması satırlarını yeniden tarar ama kararı yerinde kalır; filo araması bir sorgudan ötekine geçer.

• Her görsel, girişinin ardından son hâline varır.

  NedenYarıda takılan bir görsel hikâyenin yarısını anlatır.

  TestHer değişiklikte bir testle korunur.

• Döngü yeniden oynamak için kararı silmez.

  NedenGiriş asıl söyleneni söyleyerek biter. Onu kaldıran bir döngü sizi yeniden bekletir ve bir duraklatma boş bir karede kalabilir.

  TestHer değişiklikte bir testle korunur.

• Duraklatılan görsel sonucunda durur.

  NedenDuraklatan kişi yine sonucun tamamını görür, hiçbir zaman yarısını değil.

  TestHer değişiklikte bir testle korunur.

Sakin döngüler

Döngü sakindir: sonuçtan başlar, denetimi bitmiş resmin üzerinden yeniden geçirir ve iki geçiş arasında dinlenir. Aşağıdaki değerler sözlükten ve bileşenlerden okunur.

Kalan 2 görsel döngü dinlenmez:

• Güven merkezindeki veri yerleşimi görseli: betik testi ona dokunmadığı sürece kendi zamanlamasını korur.
• Çerçeve yelpazesi: bir nokta her çizgiyi sırayla gezer; dinlenecek bir geçiş sonu yoktur.

Döngüyü dikişsiz kurun.

Döngüyü sonuçta, yani girişin bıraktığı hâlde başlatıp bitirin. Dinlenme döngünün bir parçası olsun diye son hareketinden REST sonrasına boş bir set() koyun ya da zaman çizgisine repeatDelay: REST verin. Döngü dönemlerle çalışıyorsa boyunu içindeki her dönemin tam katı yapın. Böylece döngü başa sardığında hiçbir şey sıçramaz.

• Bir geçişi yeniden oynayan döngü, sonraki geçişten önce REST kadar dinlenir.

  NedenSonuç dinlenmede okunur; hiç durmayan bir denetim dikkati boyuna üstüne çeker.

  İncelemeBir testle değil, incelemeyle korunur.

• Görseli ekrandan çıkan döngü durur.

  NedenKimsenin görmediği hareket pili ve dikkati boşuna harcar.

  TestHer değişiklikte bir testle korunur.

• Bir döngü, başladığı hâlde, yani sonuçta biter.

  NedenDöngü başa sardığında hiçbir şey sıçramamalı.

  İncelemeBir testle değil, incelemeyle korunur.

İki bölüm daha uzun bir hikâyeyi adım adım anlatır: ana sayfadaki sonuçlar bölümü ve Zero Door sayfasındaki karar sahnesi. İkisi de siz kaydırırken ekrana sabitlenir ve oynatma kafası sizin kaydırma konumunuzdur. Hiçbir adım kendiliğinden ilerlemez: her değişim kaydırmanızla ya da bir adım düğmesiyle başlar.

Her sahnenin tek bir ana zaman çizgisi vardır: bir giriş, ardından her adım için bir bekleme ve her iki bekleme arasında bir akış. Kaydırma konumu bu çizgiye parça parça eşlenir.

Yerinde görün.

Bu sayfa bir sahneyi yeniden kurmaz. Birini açın, yavaşça kaydırın, sonra bir değişimin ortasında durun.

• Sonuçlar, ana sayfada
• Değişiklikten karara, Zero Door sayfasında

• Sahneyi kaydırma sürer; akışın ortasında durmak son yönde tamamlanır.

  NedenHareket elinize bağlıdır ama yarıda donup kalmaz.

  TestHer değişiklikte bir testle korunur.

• Yukarı çıkarken durmak önceki adıma döndürür.

  NedenTamamlama sabit bir yönü değil, sizin yönünüzü izler.

  TestHer değişiklikte bir testle korunur.

• Hiçbir adım, iki yönde de atlanmaz.

  NedenKaydırma pencereleri birbirine değer ama üst üste binmez.

  TestHer değişiklikte bir testle korunur.

• Kendiliğinden tamamlama sürerken basılan adım düğmesi ona üstün gelir.

  NedenSayfa, az önce istediğiniz şeyi hiçbir zaman ezmez.

  TestHer değişiklikte bir testle korunur.

• Klavyeyle kaydırdıktan sonra sayfa bir akışı kendiliğinden tamamlamaz.

  NedenNerede duracağınızı ok ya da sayfa tuşu seçer; ardından kendi kendine kayan bir sayfa bu seçimi elinizden alır.

  TestHer değişiklikte bir testle korunur.

• Karar gösteren adım kıpırdamaz.

  NedenKarar verilmiş bir adımdaki hareket kararsızlık gibi okunur.

  TestHer değişiklikte bir testle korunur.

Kendi kendine bir andan uzun süren her hareketin yanında küçük bir duraklatma düğmesi vardır. Her sayfadaki her düğme ortak tek bir durumu yönetir: tek basış bütün döngüleri sonuçlarında durdurur ve seçiminiz sonraki sayfaya da geçer.

Duraklatma yalnızca zamana bağlı hareketi durdurur. Kaydırmaya bağlı bir sahnede hareket duraklatılmışken de kaydırmanız sahneyi sürer; o hareket sizindir. Durunca tamamlama da duraklatılmışken çalışır: kısadır ve yalnızca sizin başlattığınız bir kaydırmanın ardından gelir.

Tarayıcı depolamayı engelliyorsa seçim yalnızca o sayfa için geçerlidir.

Yerleşim

Kullanımda düğme, görselinin altında sağa yaslı durur. Ana sayfa açılışındaki tam genişlikte tuvalin üstünde sağ alt köşededir; dar ekranda (max-width: 900px) ise sağ üst köşeye geçer. Kaydırma sahnesinde adım satırındadır. Bu yerleşim yazılı bir kural değil, gözlenen bir kullanımdır.

• Bir döngünün başladığı her sayfa görünür bir duraklatma düğmesi gösterir.

  NedenWCAG 2.2.2, kendiliğinden başlayıp beş saniyeden uzun süren her hareket için bir duraklatma yolu ister.

  TestHer değişiklikte bir testle korunur.

• Tek basış sayfadaki bütün döngüleri duraklatır ve seçim sayfa yenilenince de kalır.

  NedenTek karar, her yerde gözetilir.

  TestHer değişiklikte bir testle korunur.

• Seçim sayfalar arasında geçerlidir.

  NedenAynı şeyi iki kez istemeniz gerekmemeli.

  TestHer değişiklikte bir testle korunur.

• Saklama anahtarı değişmez.

  NedenAdı değişen bir anahtar, duraklatmış her ziyaretçinin seçimini sessizce unutturur.

  TestHer değişiklikte bir testle korunur.

• Bir kez oynayıp beş saniye içinde biten hareket duraklatma düğmesi gerektirmez.

  NedenBir belirme 0,8 s içinde biter; bu sınırın çok içindedir.

  İncelemeBir testle değil, incelemeyle korunur.

revealMotion işlevinin çalıştırmadığı döngüler de kendilerini aynı biçimde işaretler. Ana sayfa açılışındaki gürültü tuvali ve kaydırma ipucu ile iki kaydırma sahnesinin beklemeleri başlarken data-ambient="on" koyar; erişilebilirlik testi onları da sayar. Düğmelerini sayfalar arası duraklatma testi ile sonuçlar ve Zero Door testleri daha ayrıntılı sınar.

Sisteminizden azaltılmış hareket isterseniz ya da tarayıcınız betik çalıştırmıyorsa aynı sayfayı son hâlinde alırsınız. Hiçbir şey atlanmaz: son hâl içeriğin kendisidir.

Her sayfa nerede sınanır.

Her sayfayı kapsayan tek bir test yok. Hareketi olan her sayfa kendi son hâllerini kendi testlerinde sınar.

Bilinen eksikler

• Betikler tercihi bir kez, sayfa yüklenirken okur. Ziyaret sırasında ayarı değiştirirseniz CSS hemen, betikler ise bir sonraki sayfada uyar.
• Görsellerin ön durumlarının güvenlik ağı yok. Site betiği çalışır ama bir görselin kendi betiği hata verirse o görsel ön durumunda kalabilir. Kendiliğinden açılanlar yalnızca belirmeler (3 saniye sonra) ve ana sayfanın açılışıdır (6 saniye sonra).

• Azaltılmış harekette sayfa hareket sınıfını hiç almaz; bu yüzden hiçbir belirme ön durumu uygulanmaz.

  NedenBelirme hiç başlamadığı için durdurulması da gerekmez.

  TestHer değişiklikte bir testle korunur.

• Azaltılmış harekette görseller son hâllerinde, duraklatma düğmesi olmadan durur.

  NedenBütün hikâyeyi anlatan durağan bir kare hareketin yerini alır.

  TestHer değişiklikte bir testle korunur.

• Sahne bir adıma doğrudan atlar; süre de bekleme hareketi de yoktur.

  NedenAdımı yine kaydırma seçer, yalnızca hiçbir şey yol almaz.

  TestHer değişiklikte bir testle korunur.

• Betik yokken sahne kıpırdamaz ve 4 adımını alt alta listeler.

  NedenBölümün söylediği, sahne olmadan da ayakta kalır.

  TestHer değişiklikte bir testle korunur.

• Ana sayfanın açılışı azaltılmış harekette sabitlenmez.

  Nedenİki metin bloğu da bir sahneyi kaydırmadan okunur.

  TestHer değişiklikte bir testle korunur.

• Bu sayfa da aynı kurallara uyar.

  NedenÖrnekleri son hâllerinde durur ve düğme göstermez.

  TestHer değişiklikte bir testle korunur.

Bu notlar koddaki yorumlardan gelir; çoğu bozulan bir şeyi kayda geçirir. Sitede GSAP ile SVG canlandıran herkes için geçerlidir.

1. Çizgileri autoRound kapalıyken çizin.

   GSAP piksel değerlerini varsayılan olarak tam sayıya yuvarlar. pathLength="1" olan bir yolda stroke-dashoffset değeri 1'den 0'a iner; yuvarlama çizimi tek bir sıçramaya çevirir ve çizgi, çizimin yarısında birden belirir. Her stroke-dashoffset tween'i autoRound: false taşır.

   1. 300 ms
   2. 600 ms
   3. 900 ms
   4. 1200 ms

   1. 300 ms
   2. 600 ms
   3. 900 ms
   4. 1200 ms

   • Bir eğri ara değerlerinden geçerek çizilir; hiçbir zaman tek adımda belirmez.

     NedenYarıda birden beliren bir çizgi çizim gibi değil, bir aksaklık gibi okunur.

     TestHer değişiklikte bir testle korunur.

2. Çizgiyi ucunun ötesine kadar silin.

   pathLength="1" olan bir yolda tam 1 kaydırma yolun bir ucunda kıl kadar bir parça bırakabilir, çünkü tarayıcı uzunluğu yalnızca yaklaşık olarak normalleştirir. Boşluk tire kadar uzunken 1'i geçmek de çözmez: bu kez bir sonraki tire öbür uca ulaşır. Bu yüzden çizilmemiş çizgiler stroke-dasharray: 1 2 ve UNDRAWN kadar, yani 1.02 kaydırma kullanır; iki uç da temiz kalır.

3. İşaret, çizgisi ona vardığında düşer.

   Bir eğri eşit ilerlemez; kendini çizen bir çizginin bir noktaya vardığı an, o noktanın uzunluktaki payı değildir. Bu an eğrinin tersinden bulunur (invertEase) ve işaret tam o anda düşer: ne erken ne geç.

4. SVG ön durumlarını visibility ile gizleyin.

   GSAP, SVG'de transform değerini öznitelik olarak yazar ve bir CSS transform kuralı özniteliği her zaman yener; yani CSS ile verilen bir scale(0) ön durumu sonsuza dek kazanır. Şablondaki transform="scale(0)" da işe yaramaz: GSAP o matrisi önbelleğe alır ve ölçek 1'e dönerken geride bir kayma bırakır. Bunun yerine grubu visibility ile gizleyin; betik gizliliği kaldırıp ölçeği devralsın. GSAP'in satır içi stil yazdığı HTML öğeleri CSS transform ön durumu kullanabilir.

   /* Yapın: grubu gizleyin; betik gizliliği
      kaldırıp ölçeği devralır. */
   html.motion .label { visibility: hidden; }
   
   /* Yapmayın: GSAP transform'u öznitelik olarak
      yazar ve bu kural onu her zaman yener. */
   html.motion .label { transform: scale(0); }

5. Kaydırmayla sürülen zaman çizgileri yalnızca to() ve sıfırdan sonraki set() kullanır.

   Kaydırmanın ileri ve geri oynattığı bir zaman çizgisi to() tween'lerinden ve sıfır anından sonraya konan set() çağrılarından kurulur. from(), fromTo() ve sıfır anındaki set() değerlerini zaman çizgisi kurulurken yazar; bu da geri dönüşü bozar. to() başlangıç değerini ilk oynadığında okur ve bu her zaman bir önceki parçanın bittiği yerdir.

   // Yalnızca to() ve sıfırdan sonraki set().
   tl.to(dots, { ...MOTION.erase, attr: { r: 0 } }, at);
   tl.set(card, { visibility: 'hidden' }, at + EXIT);
   
   // from(), fromTo() ya da sıfırdaki set() değil:
   // onlar zaman çizgisi kurulurken yazar.

6. Döngüler immediateRender: false verir.

   Yinelenen bir döngüde zaman çizgisinin ilerisine konan bir fromTo(), başlangıç değerlerini döngü kurulurken hemen yazar ve öğesi sırası gelmeden oraya sıçrar. Sitedeki döngüler immediateRender: false verir; böylece her öğe kendi tween'i oynayana kadar yerinde kalır.

7. Her geçişte yeniden ölçün.

   Bir kez ölçülen değer pencere boyutu değişince eskir. Yerleşime bağlı bir döngü sayı yerine bir işlev verir ve repeatRefresh: true koyar; böylece her geçiş yeniden ölçer. Böyle bir döngünün fromTo() tween'leri iki ucu da açıkça yazar: yenileme varken örtük bırakılan bir başlangıç, son geçişin bittiği yerden okunurdu.

8. Tarama çizgisi satırların arasından geçer.

   Bir tarama geçişi (scanPass) iki satırın sınırı boyunca soldan bir çizgi çizer ve çizginin kuyruğu onu izleyerek silinir. Hiçbir zaman bir satırın içinden aşağı inmez; bu yüzden hiçbir yazının üstünden geçmez.

9. Bekleme hareketi yalnızca transform özniteliğine yazar.

   Sonuçlar sahnesinin sakin döngüleri ölçeği ve kaymayı doğrudan SVG transform özniteliğine yazar; x, y, width ya da r değerlerine hiç dokunmaz. Yerleşim değerleri bozulmadan kalır, akış onları olduğu gibi okur ve döngüyü durdurmak yalnızca özniteliği silmektir.

10. Renk tokenlarını bir kez okuyun.

    GSAP ara renk üretmek için gerçek bir renk ister, var(--color-ink) dizesini canlandıramaz. Betikler her tokenı hesaplanan stilden bir kez okur; böylece kaynakta yine hiç ham hex geçmez.

11. İşaretler eğrinin denklemini izler.

    pathLength verildiğinde getPointAtLength tarayıcıdan tarayıcıya farklı davranır; bu yüzden bir eğri üzerinde ilerleyen işaret konumunu o eğrinin kübik denkleminden alır: sonuçlar ve karar sahnelerinde ve çerçeve yelpazesinde. Bu sayfadaki eğri örneği de böyle çalışır.

12. Yükseklik önemliyse visibility ile gizleyin.

    Yer değiştiren adım kartları display ile değil visibility ile gizlenir; böylece sütun yüksekliğini korur. Mobilde bir yükseklik değişimi kaydırma boşluklarını oynatmış ve sahneyi iki adım arasında gidip gelmeye zorlamıştı.

Kod aşağıdakiler için hareket tanımlamaz. Tanımlayana kadar uyulacak bir kural yoktur ve bu sayfa da bir kural uydurmaz.

• Sayfa geçişleri. Sayfalar geçişsiz yüklenir ve sayfa değişimi için tanımlı bir hareket yoktur.
• Yükleniyor ve iskelet hâlleri.
• Bildirimler ve kalıcı iletişim kutuları.
• Bağlantılar ve kartlar için üzerine gelme hareketi. Bugün üzerine gelince ana sayfadaki kuralların çerçeveleri hareket eder. Hizmetler sayfasındaki araştırma kartlarında, şirket sayfasındaki bağlantı satırlarında ve tasarım dili ana sayfasındaki sayfa listesinin satırlarında bir ok da 3px kayar. Araştırma dizininde, üzerine gelinen kartın kapak görseli hafifçe büyür. Düğmeler ve duraklatma düğmesi üzerine gelince renk değiştirir ama yerinden oynamaz. Bir bağlantının ya da kartın ne zaman hareket edebileceğini söyleyen bir kural yok.
• Belirmeler arasında kademe. Tek bir görselin kendi girişinde küçük kademeler kullanılıyor.
• En uzun geçiş ya da en uzun giriş. Geçişler arasındaki dinlenme bir tokendır; bir geçişin ya da girişin ne kadar sürebileceği ise, duraklatma düğmesi gerektirmeyen hareket için konan beş saniyelik sınır dışında, tanımlı değildir.

Zero Door arayüzü sakin bir üslupla konuşur: insanların bütün gün kullandığı bir araçta kısa ve işlevsel hareket. Tokenları ürünün kendi token dosyasından gelir; anlatılan sürüm 2026-08-23 tarihli ve kullanım notları ürün kodunun aynı sürümünü anlatır. Basış ölçeği ve azaltılmış hareket değerleri ürünün kaynak kodundan okunur; okunan sürüm 2026-10-09 tarihli.

Ürünün tokenlarını ve kaynağından okunan değerleri indirin (product-tokens.json)

Ürün 5 süre tokenı ve 3 eğri tanımlar. Stil dosyalarımız bir eğri tanımlar, hiç süre tanımlamaz; betiklerimiz ise 7 süreyi ve 6 eğriyi tek bir modülden alır. Üründe bugün kullanılan tek eğri ease-out; ürünün hareketini o taşır ve site tokenıyla aynı dört sayıdan oluşur. Ürün stillerinde tanımlı birkaç giriş animasyonu kendine ait bir eğri kullanır.

Hızlanan eğri yok.

Ürün hızlanan bir eğri tanımlamaz. Sitede ise betikli çıkışlar hızlanarak gider: EASE.exit (power2.in).

Basış

Üründe basış geri bildirimi transform, arka plan rengi ve opacity değerlerini ease-out üzerinde 130 ms içinde değiştirir. Basış, sitede olduğu gibi düğmeyi scale(0.97) ile küçültür. Orada opacity serbesttir: bu sayfadaki saydamlık kuralı bir site kuralıdır.

Komut paleti

Günde defalarca Cmd ya da Ctrl ile K'ye basılarak açılmak üzere kurulan komut paleti, animasyonsuz açılır ve kapanır. Bu kadar sık yinelenen bir eylem kimseyi kendisini beklemeye zorlamamalı.

Azaltılmış hareket

Azaltılmış harekette ürün transition-duration: 0.01ms, animation-duration: 0.01ms ve animation-iteration-count: 1 verir; böylece her geçiş ve animasyon anlık olur, hiçbir animasyon yinelenmez. scroll-behavior: auto da verir. Site geçişleri aynı biçimde kısaltır, animasyonları ise animation: none ile tümden kaldırır.