Beweging trekt de aandacht. Dat is precies waarom het zo krachtig is — en waarom het zo makkelijk misgaat. Goede motion leidt de bezoeker naar de volgende stap. Slechte motion is vooral een show.
1. Elke animatie heeft een functie
Vraag bij elke animatie: wat helpt dit de bezoeker te begrijpen? Een element dat binnenschuift, laat zien dat er nieuwe inhoud is. Een knop die reageert, bevestigt dat een klik is aangekomen. Animatie zonder functie is ruis.
2. Snelheid is een merkkeuze
Easing en timing bepalen hoe je merk voelt. Een snelle ease-out voelt direct en zelfverzekerd; een langzame ease-in-out rustig en premium. Leg dit vast in je design system, net als kleuren en typografie.
3. Respecteer de leesrichting
Animaties die met de scrollrichting meebewegen voelen natuurlijk. Tegenstrijdige bewegingen — elementen die van alle kanten binnenkomen — vermoeien.
4. Laat de CTA ademen
Rondom je belangrijkste call-to-action hoort rust. Een subtiele hover of magnetisch effect nodigt uit; een knipperende knop schreeuwt.
5. Performance is onderdeel van het ontwerp
Een animatie die hapert, doet meer kwaad dan geen animatie. Animeer alleen transform en opacity, en test op een gemiddelde telefoon — niet alleen op je MacBook. Lees meer in ons artikel over Core Web Vitals.
6. Denk aan iedereen
Sommige mensen worden letterlijk misselijk van beweging. Respecteer de instelling prefers-reduced-motion en bied een rustige variant.
Motion bij Codora
Motion is bij ons geen afterthought, maar onderdeel van het ontwerp vanaf dag één. Benieuwd wat dat voor jouw merk kan doen? Start je project.