Der er en grund til at JavaScript-parallax altid ser lidt forkert ud — lidt frakoblet, som om lagene svømmer en halv frame bag siden. Det er ikke sjusket kode. Det skyldes at scroll-hændelser når JavaScript efter browseren allerede har tegnet rulningen. Browseren løste dette én gang, da den forvandlede klæbrige overskrifter til position: sticky. Scroll-driven animations er det samme træk, anvendt på alle scroll-bundne effekter på én gang.
I ti år betød animering af et miniaturebillede til et hero-billede én teknik: mål elementet før, mål efter, forfalsk forskellen med en transform og afspil. FLIP. Hvert animationsbibliotek gør det, og hvert betaler for det med JavaScript på hovedtråden på det værst mulige tidspunkt. View Transitions API flytter hele tricket ind i browseren — og siden React 19.2 og Next.js 16 består hele kontrakten af én prop kaldet name.
I artiklen om mikrointeraktioner skrev jeg, at transform og opacity animeres på kompositørens tråd, så selv en tung side ikke burde få en knapanimation til at hakke. Det er stadig sandt – med ét forbehold, som den artikel ikke nævnte: hvis hovedtråden er blokeret af en lang JS-opgave, får animationen måske aldrig chancen for at starte, fordi selve klik-handleren venter i kø. INP er den metrik, der måler præcis dette hul – og scheduler.yield() er en af de få måder, man reelt kan lukke det på.
'Synes godt om'-knappen reagerer øjeblikkeligt, hjertet fyldes ud, tælleren stiger – før serveren overhovedet har svaret. Det er ikke den hastighedsillusion fra artiklen om mikrointeraktioner, det er noget mere vidtgående: grænsefladen viser en tilstand, der endnu ikke findes, og går ud fra, at den snart vil gøre det. Jeg undersøger, hvordan man bygger det sikkert – med en reel tilbagerulning, når antagelsen ikke holder – og hvorfor manuel setState plus catch er en dårligere version af det, useOptimistic giver.
To webshops, samme produkt, samme svartid fra serveren – alligevel føles den ene hurtigere og mere troværdig. Forskellen ligger i mikrointeraktioner: nogle få hundrede millisekunders animation, der afgør, om brugeren stoler på det, der sker på skærmen. Jeg gennemgår dem fra bunden – trigger/feedback-modellen, hvad der reelt sker inde i browserens rendering engine, og prefers-reduced-motion.
CSS Houdini er ikke én teknologi, men en samling af specifikationer i meget forskellige modenhedsstadier. Find ud af, hvilken del der i dag er klar til produktion, hvordan @property og paint worklet egentlig fungerer, og hvorfor resten stadig er eksperimentel.
