Motion is het makkelijkste onderdeel van een site om fout te doen. Te veel, en een bezoeker wordt afgeleid van waar hij eigenlijk voor kwam. Te traag, en elke interactie voelt log aan. Verkeerd getimed, en het oogt gewoon kapot. We gebruiken drie regels om dat te vermijden, ongeacht het project.
Regel 1: elke animatie moet zijn plek verdienen
Voor we iets animeren, stellen we onszelf één vraag: helpt dit de bezoeker begrijpen wat er gebeurt, of is het decoratie? Een kaart die oplicht bij hover omdat hij klikbaar is — verdient zijn plek. Tekst die woord per woord binnenschuift zonder functie — meestal niet. Als het antwoord "het oogt gewoon leuk" is, gaat het niet live.
Regel 2: één curve, consistent toegepast
We werken met één premium easing-curve (cubic-bezier(0.16, 1, 0.3, 1)) door de hele site heen, in plaats van elke animatie zijn eigen timing te geven. Dat is een klein detail dat bezoekers nooit bewust opmerken, maar wel onbewust aanvoelen: alles beweegt met dezelfde "hand", waardoor de site als één samenhangend geheel oogt in plaats van een verzameling losse effecten.
Regel 3: reduced-motion is geen toevoeging achteraf
prefers-reduced-motion wordt vanaf de eerste animatie-primitive meegebouwd, niet toegevoegd nadat alles al werkt. Wie die instelling aanzet — vaak om reden van vestibulaire klachten, niet uit voorkeur — krijgt bij ons dezelfde content in dezelfde volgorde, gewoon zonder de beweging. Geen kapotte layout, geen missende content, enkel een stillere versie van dezelfde site.
Wat dat in de praktijk oplevert
Scroll-gestuurde effecten (via GSAP ScrollTrigger, gekoppeld aan Lenis voor smooth scroll) worden gereserveerd voor momenten die het verdienen — een gepinde sectie op de procespagina, bijvoorbeeld, in plaats van elke sectie te laten pinnen omdat het kan. Micro-interacties (Framer Motion) blijven kort en functioneel: een knop die magnetisch meebeweegt met de cursor, een kaart die optilt bij hover. De optelsom is een site die levendig aanvoelt zonder ooit in de weg te zitten.