De korte versie
- Goed motion design rust op vijf principes: geef elke beweging een doel, time haar goed, geef haar easing, orden haar op belang en gebruik er zo weinig mogelijk van.
- Kleine bewegingen in een interface voelen meestal goed tussen ongeveer 150 en 300 milliseconden, terwijl grotere bewegingen en entrees meer tijd nodig hebben.
- Wat binnenkomt hoort te vertragen, wat vertrekt hoort te versnellen, en doorlopende loops horen in een gelijkmatig tempo te bewegen.
- Als meerdere elementen bewegen, hoort het belangrijkste eerst te bewegen, en mag er maar één tegelijk de leiding hebben.
- Een klein bewegingssysteem van drie tijdsduren en twee of drie easingcurves houdt de beweging van een merk consistent in elk stuk.
Op deze pagina
Principes van motion design zijn de vuistregels waardoor beweging natuurlijk aanvoelt in plaats van willekeurig. De klassieke karakteranimatie heeft haar beroemde twaalf, beschreven door de Disney-animatoren Frank Thomas en Ollie Johnston in The Illusion of Life. Voor ontwerpwerk, zoals posts, websites, logo’s en presentaties, doen er vijf bijna al het werk: doel, timing, easing, hiërarchie en terughoudendheid. Je kunt ze gebruiken zonder ooit een animatie-app te openen.
Doel: elke beweging hoort een taak te hebben
Beweging is luid. Alles wat beweegt trekt het oog, dus iets laten bewegen is beweren dat het er nu toe doet. Benoem de taak voordat je animeert. Lukt dat niet, laat het dan stilstaan.
Beweging met een taak
- Trekt het oog naar het ene ding dat je eerst moet lezen
- Laat zien waar iets vandaan kwam of naartoe ging
- Bevestigt een actie: verzonden, opgeslagen, toegevoegd
- Zet een sfeer neer met een trage achtergrond
Beweging om de beweging
- Elk element dat bij aankomst naar binnen stuitert
- Tekst die blijft bewegen terwijl je leest
- Draaiende logo’s en pulserende knoppen
- Overgangen die je laten wachten
Timing: hoe lang beweging hoort te duren
Duur is het principe dat de meeste mensen verkeerd doen, meestal door kleine dingen te traag en grote dingen te snel te maken. Twee regels helpen. Kleine, veelvoorkomende bewegingen horen snel te zijn, omdat mensen ze de hele tijd zien. Bewegingen die verder reizen of meer veranderen horen langer te duren, omdat het oog tijd nodig heeft om te volgen.
| Soort beweging | Gebruikelijke duur | Waarom |
|---|---|---|
| Feedback van knoppen en schakelaars | Ongeveer 100 tot 200 ms | Voelt direct, maar is nog zichtbaar |
| Kleine interfacewijzigingen, menu’s | Ongeveer 200 tot 300 ms | Snel genoeg om niemand op te houden |
| Grote panelen, paginawissels | Ongeveer 300 tot 500 ms | Meer afstand vraagt meer tijd |
| Tekst die een post of video binnenkomt | Ongeveer 0,4 tot 1 s | Lang genoeg om als entree over te komen |
| Achtergrond die drijft in een loop | Vele seconden per cyclus | Sfeer, geen informatie: het hoort nauwelijks op te vallen |
Een handige test: als mensen de animatie zelf opmerken in plaats van wat ze laat zien, is ze te traag of te groot. Als ze de verandering helemaal missen, is ze te snel.
Easing: waarom niets op constante snelheid hoort te bewegen
Echte voorwerpen versnellen en vertragen. Beweging op één constante snelheid, lineair genoemd, oogt mechanisch omdat niets in de wereld zo beweegt. Easingcurves voegen versnelling en vertraging toe, en de juiste kiezen is simpel zodra je drie gevallen kent.
- Binnenkomen: ease-out. Kom snel aan en land zacht, zoals een auto die tot stilstand komt. De meeste entrees gebruiken dit.
- Vertrekken: ease-in. Begin zacht en versnel weg. Exits mogen ook korter zijn dan entrees.
- Bewegen binnen het beeld: ease-in-out. Begin en stop zacht.
- Loops en rotaties: lineair. Doorlopende beweging hoort een gelijkmatig tempo te houden, anders lijkt ze bij de naad te haperen.
.panel-enter {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); /* ease out */
}
.panel-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1); /* ease in, and shorter */
}
.background-drift {
animation: drift 20s linear infinite; /* steady loop */
}Hiërarchie: beweeg het belangrijkste eerst
Beweging schept een leesvolgorde, net als grootte en gewicht in een stilstaand ontwerp. Wat eerst beweegt, wordt eerst gelezen. Als meerdere elementen animeren, laat ze dan na elkaar starten in volgorde van belang, met een korte tussenpoos van zo’n 50 tot 150 milliseconden, en laat maar één element tegelijk de leiding nemen. Visuele hiërarchie behandelt de stilstaande versie van hetzelfde idee.
In een geanimeerde versie van deze story komt eerst de kop binnen, dan de datum, dan de details. De achtergrond houdt eronder zijn eigen trage tempo aan.
- 1
De achtergrond komt tot rust
Het vlak beweegt al langzaam wanneer de post verschijnt. Het zet de sfeer neer zonder gelezen te willen worden.
- 2
De kop komt binnen
Eén duidelijke entree, met ease-out, in minder dan een seconde.
- 3
De ondersteunende regels volgen
Het label en de details komen vlak daarna, in leesvolgorde, met een kleinere beweging.
- 4
Alles blijft staan
De woorden stoppen en blijven lang genoeg stil om gelezen te worden. Alleen de achtergrond blijft bewegen.
Terughoudendheid: gebruik minder beweging dan je denkt
Stilte is wat beweging betekenis geeft. Als alles beweegt, valt niets op en voelt het ontwerp gejaagd. Kies één leidende beweging per stuk, houd afstanden kort en laat woorden stilstaan zodra ze zijn aangekomen. Terughoudendheid gaat ook over mensen: sommige kijkers vinden beweging onprettig of worden er zelfs misselijk van, dus elk stuk hoort ook te werken met de beweging uit. Verminderde beweging legt uit hoe je daar rekening mee houdt.
Consistentie: een klein bewegingssysteem
Merken houden kleuren en lettertypen consistent; beweging verdient dezelfde zorg. Schrijf een piepklein systeem op en hergebruik het: drie tijdsduren, twee of drie easingcurves en één huisbeweging voor achtergronden. Zo verzint niet elk nieuw stuk zijn eigen snelheid, en wordt je beweging herkenbaar op de manier die beweging voor stilstaande merken beschrijft.
:root {
--motion-quick: 150ms;
--motion-base: 250ms;
--motion-slow: 400ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-quick: 1ms;
--motion-base: 1ms;
--motion-slow: 1ms;
}
}Pas dezelfde principes toe wanneer je een logo, een post of een website-hero animeert. Geanimeerde logo’s en geanimeerde posts laten ze aan het werk zien.
Vragen die mensen stellen
Wat zijn de basisprincipes van motion design?
Voor ontwerpwerk dekken vijf principes de meeste behoeften: geef elke beweging een doel, kies een verstandige duur, gebruik easing, orden beweging op belang en gebruik zo weinig beweging als mogelijk.
Hoe lang moet een animatie duren?
Kleine interfacefeedback werkt meestal op ongeveer 100 tot 300 milliseconden, grotere bewegingen op ongeveer 300 tot 500 milliseconden, en tekstentrees in posts of video op ongeveer een halve tot een hele seconde.
Welke easing moet ik gebruiken?
Ease-out voor wat binnenkomt, ease-in voor wat vertrekt, ease-in-out voor wat binnen het beeld beweegt, en lineair voor doorlopende loops.
Wat zijn de 12 principes van animatie?
Het zijn principes van karakteranimatie, beschreven door de Disney-animatoren Frank Thomas en Ollie Johnston in The Illusion of Life. Timing en easing, die zij slow in en slow out noemen, zijn het meest direct over te dragen op beweging in ontwerp.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
