Det er en grunn til at JavaScript-parallaks alltid ser litt feil ut — litt frakoblet, som om lagene svømmer en halv frame bak siden. Det er ikke slurvete kode. Det er at scroll-hendelser når JavaScript etter at nettleseren allerede har tegnet rullingen. Nettleseren løste dette én gang tidligere, da den forvandlet klebrige overskrifter til position: sticky. Scroll-driven animations er det samme grepet, brukt på alle scroll-bundne effekter på én gang.
I ti år betød animasjon av et miniatyrbilde til et hero-bilde én teknikk: mål elementet før, mål etter, forfalsk forskjellen med en transform og spill av. FLIP. Hvert animasjonsbibliotek gjør det, og hvert betaler for det med JavaScript på hovedtråden på det verst mulige tidspunktet. View Transitions API flytter hele tricket inn i nettleseren — og siden React 19.2 og Next.js 16 er hele kontrakten én prop kalt name.
I artikkelen om mikrointeraksjoner skrev jeg at transform og opacity animeres på kompositeringstråden, så selv en tung side ikke burde få knappeanimasjonen til å hakke. Det stemmer fortsatt – med ett forbehold den artikkelen ikke nevnte: hvis hovedtråden er blokkert av en lang JS-oppgave, får animasjonen kanskje aldri sjansen til å starte, fordi selve klikk-handleren står og venter i køen. INP er metrikken som måler nøyaktig dette gapet – og scheduler.yield() er en av de få måtene å faktisk lukke det på.
«Lik»-knappen reagerer umiddelbart, hjertet fyller seg, telleren øker – før serveren i det hele tatt har svart. Dette er ikke bare illusjonen om hastighet fra artikkelen om mikrointeraksjoner, det går lenger: grensesnittet viser en tilstand som ennå ikke eksisterer, og forutsetter at den snart vil gjøre det. Jeg går gjennom hvordan man bygger dette trygt – med reell tilbaketrekning fra løgnen når forutsetningen ikke holder – og hvorfor manuell setState pluss catch er en dårligere versjon av det useOptimistic gir.
To nettbutikker, samme produkt, samme responstid fra serveren – likevel føles den ene raskere og mer tillitvekkende. Forskjellen ligger i mikrointeraksjoner: noen hundre millisekunder med animasjon som avgjør om brukeren stoler på det som skjer på skjermen. Jeg går gjennom dem fra bunnen av – trigger/tilbakemelding-modellen, hva som faktisk skjer inne i nettleserens rendringsmotor, og prefers-reduced-motion.
CSS Houdini er ikke én teknologi, men en samling spesifikasjoner i svært ulik grad av modenhet. Finn ut hvilken del som er produksjonsklar i dag, hvordan @property og paint worklet egentlig fungerer, og hvorfor resten fortsatt er eksperimentell.
