Animaties die je app beter maken — niet drukker

De drie die ik wél gebruik

Eén, subtiele hover-tilts op klikbare kaarten: 2-4 pixels omhoog, 150 ms, niets extreems. Het communiceert "dit is klikbaar" beter dan een cursor-change. Twee, zachte fade-in van skeleton-states naar echte content (150-200 ms). Verbergt netjes de content-shift die anders schokkerig oogt. Drie, scroll-parallax op maximaal één blob-element in de hero — nooit meer dan één, en nooit op tekst. Het geeft diepte, verstoort niets.

De vier die ik weglaat

Eén: fancy page-transitions. Ze zijn leuk in een demo-video, maar bijna altijd irritant bij snelle navigatie tussen pagina's. Als je vier keer per minuut door een dashboard klikt en telkens 400 ms moet wachten op een fade — geen goede UX. Twee: knop-morphs (een submit-knop die verandert in een spinner die verandert in een vinkje). Leuk in demo's, verwarrend in gebruik omdat mensen niet weten of ze nog ergens op moeten klikken.

Drie: scroll-jacking. Elke keer als een pagina 'aanvoelt alsof je niet meer zelf scrollt', verlies je gebruikers. Behavior beloven en dan niet leveren is een cardinal sin. Vier: typewriter-effecten in productive UI. Prima voor een marketing-hero, funest in een chat-app waar de gebruiker de tekst pas kan lezen als 'ie klaar is. Overweeg altijd: kan de gebruiker meteen zien wat er staat?

De onderliggende regel: elke animatie moet ofwel **feedback geven** (er is iets gebeurd, of komt iets aan) ofwel **hiërarchie versterken** (dit is belangrijker dan dat). Alles daarbuiten is decoratie — en decoratie is prima, maar ken je limiet. Twee decoratieve animaties per pagina is genoeg; drie is te veel; vier is een portfolio-site aan het worden.

Tools-tip: Framer Motion is de standaard, maar voor 80% van bovenstaande animaties zijn CSS-transities plus `prefers-reduced-motion` genoeg. Vergeet die mediaquery niet — er zijn mensen met vestibulaire aandoeningen voor wie parallax letterlijk misselijkmakend is. Één regel CSS en je hebt hen ook aan boord.