The three T's of editorial motion

There is a category of motion design that I think of, slightly pretentiously, as editorial. It is what the New York Times graphics desk does. It is what The Pudding has built a career on. It is the unhurried, type-driven, fact-first style of motion that exists to communicate, not to impress. When it is done well, you do not notice the design at all. You notice the story.

I have spent ten years trying to do this kind of work. I have failed at it more times than I can count — produced graphics that were technically correct, on-brand, well-eased, and somehow not editorial. The mistake has always been the same: I optimized for the look of the motion when I should have optimized for the reading of it.

What separates editorial motion from decoration are three constraints that have to hold simultaneously. Type. Timing. Tonality. I want to walk through each of them, with examples from the work that taught me, and end with the composition I cannot show you (because it has not shipped) that finally clicked everything into place.

Type: the thing that does the work

In editorial motion, typography does 80% of the work and motion does 20%. This is the inversion that ad-style motion designers struggle with most. We come from a culture where motion is the show. In editorial, motion is the punctuation.

This has a practical consequence: the type has to be real type. Not display type cribbed from a font pairing tutorial. Real, considered, professionally chosen type with optical sizes that adapt to scale, italic that means something, ligatures and small caps that show up where they should. The motion is supporting that type, not carrying the composition.

My defaults for editorial work:

• Headlines in a contemporary serif with strong italics. Newsreader, Source Serif Pro, Tiempos, Reckless. The italic is non-negotiable; it is how I emphasize the part of the headline that carries the argument.
• Captions in a humanist sans or monospace. Inter, IBM Plex Sans, JetBrains Mono. Letter-spaced wide for category labels; standard for body.
• One typeface family per composition. Never more than two. Pairing fonts is a way to look like you tried; using one family well is a way to look like you know.

0.00s · 0%

The other half of type in motion is measure — the width of the text column. CSS calls this max-width, and editorial designers obsess over it. A line that is too wide is fatiguing; a line that is too narrow is choppy. The traditional rule is 50-75 characters per line for body text, 25-45 for headlines. I have these numbers as CSS variables in my templates so I do not have to think about them.

The third half (yes, there are three halves) is hierarchy. In a 15-second composition there might be three pieces of type: a category label, a headline, a caption. They should have three different sizes, three different weights, and three different roles. Confused viewers cannot read editorial motion; clear hierarchy is what makes them read.

Timing: the rhythm of an argument

Timing is the part of editorial motion that I find hardest to teach, because it is felt rather than measured. But there are heuristics, and the heuristics are what get newcomers in the door.

The first heuristic: reading time is the budget. If a piece of text takes 2.5 seconds to read aloud at a comfortable pace, it needs to be on screen for at least 2.5 seconds — preferably 3.5 to give the viewer a beat after they finish. Most amateur editorial motion fails this. Text appears, you start reading, the text is replaced before you finish. The composition was timed to look good in the timeline, not to be read.

The second: animations should not compete with reading. If a headline is on screen and you want the viewer to read it, do not animate other things at the same time. The eye cannot do both. Bring the headline in, then stop. Hold. Let the viewer read. Then animate the next element in.

The third: the gap between beats matters as much as the beats. The "hold" between two pieces of information is where the viewer's brain does the work of connecting them. Skip the hold and the viewer is reacting to whatever just appeared; honor the hold and the viewer is thinking.

A typical editorial beat structure I use for a 15-second composition:

1. 0-0.8s: Category label fades in. Small, monospaced, top of frame.
2. 0.8-1.6s: Headline enters with a settle.
3. 1.6-5.0s: Hold. Nothing moves. The viewer reads.
4. 5.0-6.2s: Supporting graphic (chart, image) enters.
5. 6.2-9.5s: Hold. The viewer reads the graphic against the headline.
6. 9.5-11.0s: Caption or attribution fades in.
7. 11.0-14.0s: Hold. The composition completes.
8. 14.0-15.0s: Exit.

Half the composition is hold. New designers find this terrifying — "but nothing is happening!" — and that is exactly the point. The motion is the punctuation; the holds are the sentences.

0.00s · 0%

Tonality: the voice of the composition

Tonality is the third T and the one that takes the longest to develop. It is the answer to the question "what does this composition sound like, if it had a voice?" The same content, animated with the same timing, can sound earnest or sardonic or breathless or quiet, depending on the choices that surround it.

The choices that build tonality are mostly small.

Color saturation. Desaturated palettes feel adult, considered, archival. Saturated palettes feel young, urgent, consumer. I tend toward 60-70% saturation for editorial work; full saturation reads as ad-style.

Motion amplitude. How far things travel during their animations. A title that rises 12 pixels feels quiet; the same title rising 80 pixels feels emphatic. Editorial motion is usually 8-24 pixels of travel; ad-style motion is 40-200.

Easing personality. I wrote about this in easing that looks like money. Editorial work uses the settle and the professional in-out; it rarely uses the bounce or the anticipate-and-strike. The drama in editorial comes from the content, not from the curves.

Visual density. Editorial frames have more empty space than ad frames. The viewer's eye should land in one place and stay there. A frame with five animated elements is a frame that is shouting; a frame with one animated element and four still ones is a frame that is talking.

A real example, one I cannot show

Last month I shipped a 22-second composition for a long-form journalism piece. The brief was: present a single statistic ("4.7 million") with a small contextual sentence, attribute it to a study, and end with a sign-off. The piece had to feel like a print magazine, not like a TikTok.

The composition I shipped was almost embarrassingly simple. Cream background. One serif headline with the number set in italic. One paragraph of supporting text in a humanist sans, set to 65 characters per line, hanging below the number. One small monospace attribution in the corner. Three beats — number arrives, text arrives, attribution arrives — separated by long holds. The whole thing breathed.

The editor I worked with on it said something I have been thinking about since: "It feels like a paragraph, not a video." That was the highest compliment I could have received. The motion had become invisible. What was left was the writing.

This is the trick of editorial motion. The motion is in service to the writing. When you achieve this, the work stops being "motion graphics" in the genre sense and starts being something closer to typography that moves. Which is, I think, the better name for it.

What changes when you accept the three T's

A few things start to shift.

You stop reaching for libraries. The plugins, the asset packs, the After Effects templates — they all add visual complexity. (For the longer take on why editorial motion fits poorly into a timeline tool at all, see the After Effects comparison.) Editorial work usually wants less complexity, not more. Your tool of choice becomes a text editor and a font.

You stop showing your work. Junior motion designers want every animation to be noticed. Senior editorial designers want animations to be felt without being noticed. The viewer should leave the composition remembering the content, not the design.

You start having opinions about every number. Why is the headline 96px? Because at this distance and at this measure, that is the size where the eye can read it without effort. Why is the hold 3.2 seconds? Because that is how long it takes to read the headline plus one beat. Every number has a reason. Editorial motion is a designed object, not an arranged one.

You start to see editorial motion everywhere it exists, and to recognize its absence. The graphics packages on serious newscasts. The intros to documentaries. The credit sequences in literary films. The data visualizations in academic press. There is a small global community of designers doing this work, and once you start looking for it, you cannot stop.

0.00s · 0%

How to begin

If you are convinced and want to start, the on-ramp is short.

Pick a print magazine you admire. Read one feature. Notice how the type works on the page — the headline, the lede, the pull quotes, the captions. Now open a text editor and recreate one of those pages in HTML and CSS. Static. No motion. Just the type, right.

Then, and only then, add one moving element — the HyperFrames playground is a good place to do this without setting up a project. Maybe the headline rises into place over 800ms with a cubic-bezier settle. Maybe nothing moves and the whole composition is a still that you render for fifteen seconds with a slow backdrop drift. The point of this exercise is to feel how little motion the composition needs to feel alive.

When you are confident in one element of motion, add another. Then another. By the third element, you will have rules — your own rules — about what motion is allowed and what is not, in this composition's tonality. Those rules are the beginning of your editorial vocabulary.

This is the work. It is slower than reaching for a preset, less impressive on a portfolio reel, and the most durable thing a motion designer can develop. Type. Timing. Tonality. The rest is variation.

@misc{okafor2026three,
  author = {Marcus Okafor},
  title  = {The three T's of editorial motion},
  year   = {2026},
  url    = {https://hyperframes.video/blog/three-ts-of-editorial-motion},
  note   = {HyperFrames blog}
}

Marcus Okafor. (2026, May 14). The three T's of editorial motion. HyperFrames. https://hyperframes.video/blog/three-ts-of-editorial-motion

[The three T's of editorial motion](https://hyperframes.video/blog/three-ts-of-editorial-motion) — Marcus Okafor, 2026