Faragiri

Learn MotionMedia

The same 480 px in the same twelve frames, divided two ways, is the whole subject. One reads as an object and the other reads as a rectangle being dragged.

6Sections
6Min read
2Depth

Timing against spacing

Where the 480 px goes, frame by frame

Two rows with the same duration and the same distance. The only difference is how the distance is shared out, and it is the difference between the two title cards.

Pixels moved in each frame. A 480 px slide, twelve frames, 24 fps.

123456789101112
Linear404040404040404040404040
Eased both ends102639495660605649392610

Both rows total 480 px. The grid says nothing about which of the two is correct: a machine part moving under power is closer to the top row, and drawing it eased would be the same mistake in the other direction.

Timing is how long a move takes and spacing is how the distance is divided up inside it, and only the second one is visible. Two versions of the same title card cross the same 480 px in the same twelve frames, and one of them is an object and the other is a rectangle being dragged.

Everything here is worked on one job: a two minute piece for a night bakery in Ghent called Nachtbrood, at 24 fps. A title that slides in, a baker called Ines who walks four steps across the frame, a roller shutter that goes up, and one shot with flour hanging in the air that was not there when it was filmed.

The same twelve frames, twice

Twelve frames at 24 fps is half a second, which is the length of nearly every move in a piece like this. Divide the 480 px evenly and 40 px in every frame is the linear version: the title is at full speed in frame one, still at full speed in frame twelve, and then it is simply not moving any more. Nothing physical has ever done that, and the eye knows it before the viewer can say why.

Divide the same distance the way a thing with mass would and the frames go 10, 26, 39, 49, 56, 60, then the same six backwards. Identical duration, identical distance, and the title now starts, travels and arrives. That list is the whole of the effect. There is no plugin in it, and on an interface the same half second is quoted as 500 ms and behaves identically.

The stall is the default ease

Almost everybody finds the ease shortcut in the first week and stops there, and that is the stall in this subject. The default is symmetric: the same softening at both ends, applied to every layer, which is why so much motion graphics looks expensive and weighs nothing. A dropped tray accelerates hard and stops dead. A hand reaching for a shutter starts slowly and stops slowly. Symmetric ease describes neither.

The repair is the graph editor and it is a genuinely different skill, which is why it gets postponed. What it buys is asymmetry: a fifth on the way out and four fifths on the way in gives a title that leaves in a hurry and settles gently, and the reverse gives one that creeps out and slams. Those two are more expressive range than every preset in the application, and the rules that make movement read as real is where the rest of that range lives.

One step

The four poses a walk is actually made of

Everything between them is interpolation. Each of the four is a decision, and the one that gets skipped is always the same one.

twelve frames

  • 01ContactFrame 1. Both feet down, weight about to transfer
  • 02DownFrame 4. The lowest point, where the weight lands. The skipped one
  • 03PassingFrame 7. The free leg goes by, the body is level
  • 04UpFrame 10. The highest point, pushed up by the straightening leg
  1. 01ContactFrame 1. Both feet down, weight about to transfer
  2. 02DownFrame 4. The lowest point, where the weight lands. The skipped one
  3. 03PassingFrame 7. The free leg goes by, the body is level
  4. 04UpFrame 10. The highest point, pushed up by the straightening leg

The cycle is the furniture, not the performance. A character can hit all four poses correctly and still read as a mannequin, because nothing in the loop says where they are going or why.

Nothing stops all at once

The second half of looking real is that the parts of a thing disagree. Ines pushes the tray onto the rack and her arm stops; her sleeve keeps going for three frames and comes back over two. The shutter reaches the top of its run and the handle bounces once, four frames down and three back, and never returns quite to where it stopped.

Written as a rule for anything: the second thing starts two or three frames before the first has stopped. It costs two keyframes, and it is the difference between a shutter going up and a shutter being animated going up. Type, shapes and information in motion lives on exactly this, since a word has no anatomy to inherit the offset from and somebody has to decide where its late part is.

A walk is four drawings

Ines crossing the frame is not a walk animation, it is contact, down, passing, up, and then contact again. A brisk step is twelve frames, and the keys land on 1, 4, 7 and 10, with frame 13 being the first frame of the next step on the other leg. Everything between those four is interpolation, and every one of the four is a pose somebody has to decide.

Down is the frame most people skip, and skipping it is what makes a character float: it is where the body is at its lowest and the weight has actually landed. Anything over twenty frames reads as slow for a step, which is the number to reach for when a walk feels wrong and the poses are all correct. Making a drawing act begins after this, and it begins by leaving the cycle alone, because a character who walks perfectly and wants nothing is still furniture.

The order of learning

Five levels, and the one the current piece is stuck on

Each rung assumes the one under it, so a piece with beautiful compositing and linear spacing is standing on the first rung with expensive shoes.

  1. 05It wants somethingWhere animation stops being physics and starts being acting
  2. 04It has weightThe frames spent before the move, announcing what is about to happen
  3. 03Its parts disagreeTwo or three frames of offset, and a sleeve that arrives late
  4. 02It starts and stops like an objectSpacing, and the graph editor rather than the default ease
  5. 01It moves at allA value at frame one and a different value at frame twelve

The rungs are not a syllabus and nobody stands on one of them permanently. A piece can be on the fourth rung for its titles and the first for its character in the same thirty seconds.

Which rung you are standing on

Progress here is not a sequence of tasks, it is a set of levels, and the useful question is which one the current piece is stuck on rather than what to learn next. A move that happens at all, a move that starts and stops like an object, parts that disagree with each other, weight that was announced before it arrived, and finally a thing that wants something. Each rung assumes the one under it and none of them is skippable, which is why a piece with beautiful compositing and linear spacing looks worse than a rough one with good spacing.

The wrong order is well worn and it runs through the software: learn the interface, build a complicated piece, and file the flatness under needing better assets. The standard tool for motion and compositing earns its place further along than most people meet it, and putting things in a shot that were not there is the last rung rather than the first, because flour hanging in the air is only believable if it falls with the spacing of flour. The same timeline carrying recorded material rather than drawn material is moving pictures, from the shoot to the export, and the version of this with a third axis in it is building, lighting and rendering things that do not exist, where every rung above survives unchanged and the render time is added underneath.

What to open in 2026

After Effects is still the standard for this work, and the honest statement of its cost is that it is a subscription with no way to buy it once. What it replaced was a room of separate applications for titles, compositing, tracking and export, and what it is bad at is anything that has to run inside somebody else's software.

Fusion, inside DaVinci Resolve, is the free path and it is a real one: node based rather than layer based, so it looks alien for a fortnight, and it replaced needing a subscription to composite a title over a shot. Lottie is the third and it solves a different problem: it carries vector motion into an application as data rather than as pixels, so a spinning loader is a file of a few kilobytes that stays sharp on any screen, and it replaced exporting a looping video or a GIF and hoping about the background.

What none of the three decides is how long a thing should be on screen, and that is the question this page leaves open. Half a second is the answer for a title that slides. For a title somebody has to read, the number is not a motion number at all, and the piece for Nachtbrood ran into it twice: the motion was finished and the card was still wrong, because reading speed and motion speed are unrelated quantities and only one of them is in the graph editor. Where that gets decided is the surface people touch.

Alongside this

Above this