Why motion matters
Nielsen Norman Group describes four jobs that motion does well in an interface. Each one helps people understand something they might otherwise miss.
- Feedback: showing the system heard you, like a button that presses in.
- State change: showing something changed mode, like a play icon turning into pause.
- Navigation: showing where you went, like a panel sliding in from the side.
- Signifiers: hinting what you can do, like a card that peeks to show it can be swiped.
Timing and easing
Nothing in the real world starts or stops instantly. Easing is how an animation speeds up and slows down, and it's the biggest difference between motion that feels cheap and motion that feels right. Most interface motion is short, a fraction of a second, so it helps without making people wait.
Linear Robotic. Same speed the whole way.
Ease out Fast start, gentle stop. Good for things arriving.
Spring A little overshoot. Playful, use with care.
Micro-interactions
Micro-interactions are tiny moments built around a single task: liking a post, toggling a setting, pulling to refresh. Each has a trigger, a response and sometimes a little personality. They're where many products show their brand.
Motion for everyone
Some people get dizzy or sick from movement on screen. Operating systems let them ask for reduced motion, and websites can respect that with the prefers-reduced-motion setting. Part of the job is designing a calm version of every animation.
Motion graphics for brands
Beyond interfaces, you'll animate brand elements: logos that build themselves, social posts with moving type, short product loops. You'll prototype in Figma and use AI tools to explore ideas and storyboards quickly.
