Journal

Motion is not decoration

Motion should explain, direct attention and carry character. If it does none of those, it should not move.

Sam Okoye Sam Okoye 4 min read
Motion is not decoration

Motion is everywhere now. Websites fade in, buttons bounce, logos spin and every social media post seems to move. Some of it is wonderful. Much of it is noise. After years of working on moving identities, we have come to one strong belief: motion should never be decoration. It should always do a job.

Motion explains

The first job of motion is explaining. When something changes on a screen, motion shows how it changed. A menu that slides in from the side tells you where it lives and how to put it away. A card that grows into a full page tells you that the page came from the card. Without motion, these changes would be sudden and confusing.

This kind of motion is often so natural that nobody notices it. That is exactly the point.

Good motion answers a question before the viewer thinks to ask it.

Sam Okoye

Motion directs attention

The second job is pointing. The human eye is drawn to movement, a habit inherited from the days when movement in the grass could mean danger. Designers can use this carefully: a small movement draws the eye to the most important thing on the screen.

But this only works if very little else is moving. When everything moves, nothing stands out. We often spend more time deciding what should stay still than what should move.

Motion has character

The third job is personality. The way something moves says a lot about the brand behind it. A fast, snappy animation feels efficient. A slow, soft one feels calm. A bouncy one feels playful.

For the Nordlicht festival, every animation moves slowly, rising and fading like light in the winter sky. For a banking app we worked on, animations are quick and precise, with no bounce at all. Same principles, very different characters.

🎬
Our quick test for any animation: turn the sound off, watch it five times in a row and ask whether it becomes annoying. If it does, it is too long, too bouncy or unnecessary.

Timing is everything

Most of the difference between good and bad motion is timing. A few rules we follow:

  • Small things move fast. A button change should take about a tenth of a second. Any longer feels sluggish.
  • Large things move slower. A full-screen transition might take a third of a second.
  • Nothing starts or stops suddenly. Real objects speed up and slow down, and animations that do the same feel natural.
  • Exits are faster than entrances. When something leaves, the viewer has already moved on.
Dancers understand timing better than most designers. We have learned a lot from watching them.
Dancers understand timing better than most designers. We have learned a lot from watching them.

Respect people who prefer less

Some people find motion uncomfortable, and for some it can cause dizziness or nausea. Phones and computers let people ask for reduced motion in their settings, and every project we build respects that choice. For those viewers, slides become simple fades and nothing moves on its own.

This is not a limitation. Designing a reduced-motion version is a good test: if the design still makes sense without motion, the motion was doing its job well. If it falls apart, the motion was hiding a weak design.

Sound and motion

Motion rarely lives alone. Most of the moving work we make is seen with sound, or in places where sound is expected. A logo that moves in silence can feel empty. The same logo with a short, well-timed sound feels finished. We now design sound and motion together from the start, rather than adding a sound at the end.

The rules are similar. A sound should do a job: confirm, signal or set a mood. It should be short. And it should respect the viewer: many people watch with the sound off, so nothing important can depend on sound alone.

Motion on a budget

Motion does not have to be expensive. Some of our favourite pieces are very simple: a single line drawing itself, a word that fades in letter by letter, a colour that slowly shifts. The ideas that work best are usually the simplest ones, and simple ideas are quick to make. Budget is rarely the real limit. Clarity is.

When to say no

Clients sometimes ask us to add motion to make something feel more modern. Our answer is usually a question: what job would the motion do? If there is a good answer, we will make it move beautifully. If there is not, we suggest spending the time on something else.

The best compliment we have received for our motion work came from a client who said: I did not notice any of the animations, but the whole thing felt effortless. That is what motion is for.

Written by Sam Okoye

Motion and film. Makes things move only when they have a reason to. Cooks a famous burnt pasta.

Have a project in mind?

hello@folio.example