JavaScript-parallax näyttää aina hieman väärältä — hieman irralliselta, kuin kerrokset uisivat puoli ruutua sivun takana. Se ei ole huolimatonta koodia. Se johtuu siitä, että vieritystapahtumat saavuttavat JavaScriptin sen jälkeen kun selain on jo piirtänyt vierityksen. Selain ratkaisi tämän kerran, kun se muutti tarrautuvat otsikot position: sticky -ominaisuudeksi. Scroll-driven animations on sama veto, sovellettuna kaikkiin vieritykseen sidottuihin efekteihin kerralla.
Kymmenen vuotta kuvakkeen animointi hero-kuvaksi tarkoitti yhtä tekniikkaa: mittaa elementti ennen, mittaa jälkeen, väärentä ero transformilla ja toista. FLIP. Jokainen animaatiokirjasto tekee sen, ja jokainen maksaa siitä JavaScriptillä pääsäikeessä pahimmalla mahdollisella hetkellä. View Transitions API siirtää koko tempun selaimeen — ja React 19.2:n ja Next.js 16:n myötä koko sopimus koostuu yhdestä propista nimeltä name.
Mikrointeraktioita käsittelevässä artikkelissa kirjoitin, että transform ja opacity animoituvat kompositorisäikeellä, joten edes raskas sivu ei saisi nykiä painikkeen animaatiossa. Tämä pitää yhä paikkansa – yhdellä varauksella, josta tuo artikkeli vaikeni: jos pääsäie on tukossa pitkän JS-tehtävän vuoksi, animaatio ei ehkä koskaan saa tilaisuutta käynnistyä, koska itse klikkauskäsittelijä odottaa jonossa. INP on mittari, joka mittaa juuri tätä aukkoa – ja scheduler.yield() on yksi harvoista tavoista sulkea se todella.
'Tykkää'-painike reagoi välittömästi, sydän täyttyy, laskuri kasvaa – ennen kuin palvelin on edes vastannut. Tämä ei ole mikrointeraktioartikkelin nopeuden illuusio, vaan jotain pidemmälle menevää: käyttöliittymä näyttää tilan, jota ei vielä ole olemassa, ja olettaa, että se kohta on. Tarkastelen, miten tämä rakennetaan turvallisesti – aidolla perääntymisellä valheesta, kun oletus ei pidäkään paikkaansa, ja miksi käsin kirjoitettu setState plus catch on huonompi versio siitä, mitä useOptimistic tarjoaa.
Kaksi verkkokauppaa, sama tuote, sama palvelimen vasteaika – silti toinen tuntuu nopeammalta ja luotettavammalta. Ero syntyy mikrointeraktioista: muutamasta sadasta millisekunnista animaatiota, jotka ratkaisevat, luottaako käyttäjä näkemäänsä. Puran ilmiön perusteista lähtien – trigger/feedback-mallista, siitä mitä selaimen renderöintimoottorin sisällä oikeasti tapahtuu, sekä prefers-reduced-motion-asetuksesta.
CSS Houdini ei ole yksi teknologia, vaan joukko spesifikaatioita hyvin eri kypsyysasteilla. Selvitä, mikä sen osista sopii jo tuotantokäyttöön, miten @property ja paint worklet oikeasti toimivat, ja miksi loput ovat yhä kokeellisia.
