Motion 101

Principles of Motion

A cat looking at a computer screen

“I’m not interested in how people move, but what moves them.”

— Pina Bausch

Where to begin? Why not look to the THEATRE!?

When starting to think about motion design, it can be helpful to look towards the world of the theatre and dance where much movement analysis and theory originated. Rudolf Laban, a dance artist and theorist, developed a system for analyzing and categorizing human movement called Laban Movement Analysis (LMA).

He began by examining four basic categories, commonly reffered to as the BESS System:

  • The What: Body - what is the body (or subject) and its parts doing?
  • The How: Effort - what is the quality of the movement?
  • The Why: Shape - how the body is changing shape and what motivates it to do so
  • The Where: Space - where the body is moving and the harmonic relationships in space (or its container)

The Efforts of Motion

Leban went on to further breakout his system by developing four pairs of components that describe the effort of a movement:

  • Direction/Space is either direct or indirect.
  • Weight is either heavy or light.
  • Speed/Time is either quick or sustained.
  • Flow is either bound or free.

These four pairs were then used to create clear descriptive actions called THE EIGHT EFFORTS:

PunchDirectQuickHeavyBoundSlashIndirectQuickHeavyFreeDabDirectQuickLightBoundFlickIndirectQuickLightFreePressDirectSustainedHeavyBoundWringIndirectSustainedHeavyBoundGlideDirectSustainedLightFreeFloatIndirectSustainedLightFree

Clint says Ew

BUT I DON’T WANT TO BE A DANCER / ACTOR / PERFORMER!
I BUILD WEBSITES! HOW IS THIS USEFUL???

These eight efforts are a great starting point for talking about motion design with a client or team. They provide a common language to describe the quality and feel of motion, which can be incredibly useful when trying to communicate ideas and concepts. Here’s some examples of these efforts used to describe various kinds of websites:

PunchDirect Quick Heavy Bound

Breaking‑news site

Headlines snap in with sharp ease‑out; alerts hit hard and exit fast. Grid is rigid, hierarchy unmistakable, motion prioritizes urgency over charm.

PressIndirect Quick Heavy Free

Enterprise SaaS dashboard

Weighty panels settle with slow ease‑in‑out; data updates push steadily, never jitter. Motion communicates reliability and consequence.

DabDirect Quick Light Bound

Product feature microsite

Tooltips and highlights pop in with crisp micro‑interactions; small distance, precise placement, quick easing that feels attentive rather than aggressive.

GlideIndirect Quick Light Free

Luxury fashion e‑commerce

Carousels and lookbooks drift with silky ease‑out; transitions are elongated, frictionless, and placed to suggest polish and expense.

SlashDirect Quick Heavy Free

Creative agency portfolio

Bold diagonals, off‑axis reveals, and energetic wipes; motion cuts across space to reframe content, signaling daring and editorial punch.

WringIndirect Sustained Heavy Bound

Investigative longform or documentary site

Dense sections compress and expand slowly; layered parallax and scroll‑bound motion suggest complexity, tension, and deliberation.

FlickIndirect Quick Light Free

Youth/entertainment promo microsite

Stickers, badges, and UI bits flit in and out with elastic ease; playful, off‑trajectory motion implies spontaneity and fun.

FloatIndirect Sustained Light Free

Meditation/wellness site

Gentle drift, slow fades, and soft parallax; motion is breathable, unobtrusive