De landingspagina opent met een deur die dichtzwaait, een loopje naar het bureau, een vloer en plafond die invagen, een schoolbord dat op zijn plek valt, een hangend bordje, en tot slot een wandklok waarvan de secondewijzer begint te lopen — zeven momenten op een vast schema: deur bij 0,5s, loopje bij 0,75s, vloer bij 2s, plafond bij 2,15s, bord bij 2,35s, bordje bij 2,6s, klok bij 2,7s. Niets van die reeks wordt geregisseerd in JavaScript. Elk moment is een CSS-keyframe-animatie met zijn eigen animation-delay, en de "choreografie" is niets meer dan zeven vertragingen die zo gekozen zijn dat ze in de juiste volgorde vallen. In de hoek zit een klein rond pijltje dat het geheel opnieuw afspeelt bij een klik, en het interessante is dat de code daarachter geen idee heeft dat al het bovenstaande waar is.
Eén aanroep, geen zeven
Een naïeve replay-knop zou elk element met een animatie moeten kennen, elk apart moeten herstarten, en die lijst elke keer moeten bijwerken zodra er een nieuw moment aan de intro wordt toegevoegd. Deze knop doet dat niet. Hij roept hero.getAnimations({ subtree: true }) aan — een browser-API die elke lopende Web Animation ergens binnen het hero-element teruggeeft, wat het ook zijn — en roept voor elke animatie die hij terugkrijgt .cancel() en dan .play() aan. Dat is de complete handler. Een achtste moment later aan de intro toevoegen vraagt geen enkele wijziging aan deze functie; de browser geeft simpelweg één animatie meer terug bij de volgende klik, omdat de functie ze om te beginnen nooit heeft geteld.
Voordat al dat draait, checkt de code eerst of hero.getAnimations überhaupt bestaat, en zo niet, dan verbergt hij de knop in plaats van de klik-handler te koppelen. Een knop die zichtbaar is maar niets doet op een oudere browser is erger dan geen knop — die nodigt uit tot een klik en levert die vervolgens stilletjes niet, wat een slechter falen is dan de functie helemaal niet aanbieden.
Diezelfde zeven momenten komen nooit op kleine schermen
Onder een breedte van 900 pixels stopt het klaslokaal een diorama van opzij te zijn en stapelt het zich verticaal, en de intro die daar draait is geen ingekorte versie van de desktopversie — het is een andere, kortere reeks met minder momenten: plafond bij 0s, vloer bij 0,2s, bord bij 0,25s, leraar bij 0,65s, bijschrift bij 1,05s. De deur, de wandklok en de replay-knop zelf worden op kleine schermen simpelweg verborgen — het bordje dat op desktop boven de les hangt, heeft nergens meer om aan te hangen zodra het bord de volle breedte inneemt, dus het gaat dezelfde weg op als de deur en de klok in plaats van er ongemakkelijk uit te steken. Mobiel krijgt geen snellere versie van dezelfde show met zeven momenten. Het krijgt een show met vijf momenten, gebouwd voor de layout waar hij daadwerkelijk in draait.
Wat er gebeurt als beweging is uitgeschakeld
Eén globale regel zet elke animatie en overgang op de site terug naar een duur van vrijwel nul zodra het toestel van een bezoeker prefers-reduced-motion: reduce aangeeft. Voor de hero betekent dat: de deur, het loopje, de vloer, het bord, het bordje en de klok spelen zich niet af op een ingekorte tijdlijn — ze verschijnen vrijwel meteen in hun eindtoestand, omdat er geen verkorte versie van de reeks achter de volledige versie klaarstaat. Dat is een echte ontwerpkeuze met een echte afweging: sommige toegankelijkheidsrichtlijnen geven de voorkeur aan een korte, nog aanwezige overgang boven een harde knip, met als redenering dat een plotselinge scenewisseling zelf ook schrikbarend kan zijn. Wij kozen voor de eenvoudigere garantie — een bewegingsinstelling die volledig gerespecteerd wordt, zonder resterende beweging die iemand zou moeten controleren — boven een gedeeltelijk verminderde versie die eigen tests zou vergen om te bevestigen dat hij ook écht zacht genoeg was.
Waar we nog niet zeker van zijn
Element.getAnimations() wordt breed ondersteund in huidige browsers, maar dat was niet altijd zo, en precies daarom checkt de knop erop en verdwijnt hij liever dan aan te nemen dat hij er wel is — een leerzame kleine gewoonte, minstens zozeer als een functionele. Maar het betekent wel dat een klein aantal bezoekers op oude browsers helemaal geen replay-knop ziet, in plaats van een afgeslankte versie. We hebben niet geprobeerd te becijferen hoeveel mensen dat precies zijn, omdat voor de decoratieve intro van een marketingsite het eerlijke antwoord is dat het waarschijnlijk de moeite van het uitzoeken niet waard is.