Easing uitgelegd: waarom goede beweging natuurlijk voelt

Easing is hoe de snelheid van een beweging verandert terwijl hij wordt afgespeeld. Zonder easing beweegt een voorwerp met één constante snelheid en stopt het abrupt, wat mechanisch oogt. Met easing versnelt en vertraagt het zoals echte dingen doen: een lade schuift snel uit en komt tot rust, een bal versnelt terwijl hij valt. De juiste easing kiezen is de snelste manier om elke animatie natuurlijk te laten voelen.

Hoe easing eruitziet

Animators tekenen easing als een spatiëringsschema: waar een voorwerp zich bevindt op gelijke tijdstappen. Staan de streepjes gelijkmatig verdeeld, dan is de snelheid constant. Staan ze dicht op elkaar, dan beweegt het voorwerp langzaam; staan ze ver uit elkaar, dan beweegt het snel. Hier zijn de vier basiseasings, elk met elf gelijke momenten van dezelfde beweging van links naar rechts.

De vier easings die je echt nodig hebt

CSS kent vijf basiscurves, en ontwerptools gebruiken dezelfde ideeën onder vergelijkbare namen. Vier ervan dekken bijna elke klus. De vijfde, ease, is de standaard van de browser: een curve die vrij snel begint en zacht tot rust komt, ongeveer als een zachtere ease-out.

De logica is fysiek. Iets wat aankomt beweegt al als het verschijnt en komt dan tot rust, dus het krijgt een ease-out. Iets wat vertrekt moet snelheid winnen terwijl het gaat, dus het krijgt een ease-in. Lineair is fout voor een losse beweging, maar goed voor alles wat doorloopt: een loop die aan zijn uiteinden easing heeft lijkt elke keer dat hij herhaalt te aarzelen, zoals naadloze loops uitlegt.

Hoe cubic-bezier-curves werken

Elke CSS-easingcurve wordt getekend tussen twee vaste punten, het begin (0, 0) en het einde (1, 1). Een cubic-bezier() voegt twee controlepunten toe die de curve buigen. De horizontale as is tijd en de verticale as is voortgang. De tijdwaarden moeten tussen 0 en 1 blijven, maar voortgangswaarden mogen erbuiten, waardoor een beweging zijn doel voorbijschiet en terugkomt.

/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Exits: shorter and easing in */
.card-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}

De referentie van MDN over easingfuncties toont elke vorm die CSS accepteert, inclusief steps() voor beweging beeld voor beeld.

Springs: easing uit de natuurkunde

Een spring gebruikt geen vaste curve en duur. Je beschrijft in plaats daarvan de natuurkunde, meestal stijfheid (hoe sterk hij naar het doel trekt), demping (hoe snel hij tot rust komt) en massa, en de beweging volgt. Stijve, goed gedempte springs voelen scherp en precies; losse, licht gedempte veren stuiteren. Springs zijn populair in app-interfaces omdat ze natuurlijk reageren als een beweging halverwege wordt onderbroken.

Veel animatiebibliotheken bieden springs direct aan. In gewone CSS kan de functie linear() er een benaderen door punten langs zijn pad op te sommen, wat moderne browsers ondersteunen.

/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
  transition: transform 500ms
    linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}

Easing en duur werken samen

Dezelfde curve voelt anders bij verschillende lengtes. Een ease-out over 150 milliseconden leest als een scherpe klik; over 800 leest hij als een langzaam glijden. Stem beide af op de afstand en de taak. Principes van bewegingsontwerp heeft gangbare duren.

Easing in JavaScript, ontwerptools en video

Dezelfde curves werken buiten CSS. In JavaScript accepteert de Web Animations API een CSS-easingstring. Ontwerp- en videotools gebruiken dezelfde ideeën onder namen als ease in, ease out en ease in and out, meestal met een grafiekeditor voor eigen curves en, in veel prototypetools, spring-presets.

const card = document.querySelector('.card')

card.animate(
  [
    { transform: 'translateY(24px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 },
  ],
  { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)

Welke curve je ook kiest, sommige mensen willen liever minder beweging. Respecteer hun instelling door beweging te verkorten of weg te laten; beperkte beweging laat zien hoe. En voor loopende achtergronden, waar lineair meestal goed is, zie geanimeerde kleurverloopachtergronden.