All motion design guides

Motion design

Motion design basics: what it is and where it shows up

7 min read

Motion design is easy to recognize and surprisingly hard to define. This guide gives you a working definition, a map of where the discipline shows up and the small vocabulary that makes every other conversation about motion easier.

What motion design actually is

Motion design is graphic design that unfolds over time. A poster decides where things sit. Motion design also decides when things happen, how fast they move and in what order they arrive. That extra dimension, time, is the whole craft. Two animations can use identical colors, type and layout and still feel completely different, because one of them handles time well and the other does not.

The discipline sits between several older ones. From graphic design it borrows composition, typography and hierarchy. From classical animation it borrows timing, spacing and the idea that movement carries character. From film editing it borrows cuts, pacing and rhythm. A good motion designer is fluent in all three and knows which one is doing the work in any given moment.

Where you meet it every day

Once you know what to look for, motion design is everywhere:

  • Product interfaces: the way a sheet slides up, a button confirms a tap or a list reorders. Here motion explains cause and effect and makes software feel responsive.
  • Product and launch videos: the animated walkthroughs on landing pages and app stores, where screens, copy and UI elements are choreographed to present a product at its best.
  • Brand idents: logo animations and channel intros, where a few seconds of motion carry the entire personality of a brand.
  • Titles and film graphics: opening sequences, lower thirds and captions in film and broadcast, the original home of the discipline.
  • Data visualization: charts that build up value by value, so the viewer reads a story instead of scanning a table.

The skills transfer across all of these. Someone who can make a chart build feel satisfying can make a screen transition feel satisfying, because both are exercises in timing and hierarchy.

The core vocabulary

Most conversations about motion run on a handful of terms. Learn these and you can read almost any animation:

  • Keyframe: a point in time where you pin a value, such as position or opacity. The animation system fills in everything between two keyframes.
  • Interpolation: that fill itself, the computed frames between keyframes. Traditional animators call it tweening.
  • Easing: the acceleration profile of the interpolation. Easing decides whether a move feels mechanical, snappy or soft.
  • Duration and delay: how long a move takes, and how long it waits before starting. Small changes to either transform how motion feels.
  • Stagger: a short, repeated delay across a group of elements, so they arrive one after another instead of all at once.
  • Transform: the properties that move things as a whole, such as position, scale and rotation. Most motion, and most performant motion, lives here.
  • Cut and transition: the film terms. A cut replaces one scene with the next instantly. A transition animates between them.
A timeline with two keyframes. The system interpolates every frame in between; easing decides how that progress is distributed.

How to start seeing motion

The fastest way to build taste is to watch motion deliberately. Take a product video you like and scrub through it slowly. Notice how few things move at once, how entrances lead with one hero element while the rest follows, and how the cuts land on the music. Then open an app you use daily and watch what happens when a menu opens or an item is archived.

Notice also what good motion refuses to do. It rarely bounces for fun, rarely moves two unrelated things at the same time and never makes you wait for decoration. Restraint is the professional signature.

At vembie this vocabulary is not academic. Our motion model was built on the study of thousands of hours of high-end motion design and refined together with professional motion designers, and the ideas in this series are the ones it applies on every timeline. The next guide unpacks the classic principles behind them.

See the craft in motion

Everything in these guides is built into our motion model: timing, easing, staggering and beat-synced rhythm. Paste a URL and watch it applied to your product.

vembie is in invite-only beta right now.