Motion and interaction design
Motion with meaning: transitions, reactions and life between states — one motion language for the whole product.
04 05 service 4 of 5 in Digital Design
What’s included
- Motion language: timing, easing and hierarchy defined once for the whole product
- Interface transitions that explain what just happened
- Micro-interactions on the states people touch most
- Scroll-driven storytelling where it earns attention instead of stealing it
- Delivered as Lottie, video or code — whichever your developers can actually ship
- Reduced-motion behaviour designed, not left to chance
Who it’s for
- Products that feel static next to their competitors
- Teams whose animations were added ad hoc and now fight each other
- Launches that need a site people remember after the first scroll
In short
Motion in an interface is not decoration: it explains what just happened, shows where things came from and where they went, and guides attention. We set a motion language once for the whole product — timings, curves and hierarchy — and design transitions, micro-interactions and, where it deserves attention, a scroll-driven story. We deliver motion the way your developers can implement it: as code, Lottie or video. And the behaviour with motion switched off is designed, not left to chance. The price is counted in hours.
Why an interface needs motion
Good motion is noticed only when it is missing: the interface suddenly feels abrupt and confusing.
-
01
Explains changes
Where the item went after deleting, where the new window came from.
-
02
Confirms actions
A button reacts to a tap — the person knows the click worked.
-
03
Guides attention
The eye goes where something moves — that is how the important is highlighted.
-
04
Hides waiting
A clear loading state feels shorter than a frozen screen.
-
05
Gives character
Calm or energetic motion is part of the brand, just like colour.
-
06
Tells a story
Scroll-driven scenes explain a complex product step by step.
A motion language: timings and curves
Common guidelines from which the language of a specific product is tuned. The rule is simple: the smaller the change, the faster the motion.
- 100–200 ms
- Micro-interactions: a button, a switch, a hover.
- 200–400 ms
- Changes of state: opening a menu, a card, a tooltip.
- 300–500 ms
- Large transitions: between screens and pages.
- By the script
- Brand animation and story scenes — as long as the idea needs, without blocking the person.
- Ease-out
- For elements that appear: fast start, soft stop.
- Ease-in
- For elements that leave: they speed up and go.
Where motion works
From a button reaction to a brand film — each place has its own task and its own pace.
-
01
Interface transitions
Between screens and states, so the person does not lose track.
-
02
Micro-interactions
In the places people touch most: buttons, forms, switches, likes.
-
03
Loading and waiting
Skeletons and progress instead of a frozen screen.
-
04
Scroll-driven story
Where it deserves attention rather than stealing it — launches, complex products.
-
05
Logo animation
An animated sign for the intro of a video, the app splash screen and social networks.
-
06
Video for social networks
Short explainers and product animations in the brand’s style.
Code, Lottie or video: how motion is delivered
The format is chosen by where the motion will live and who will implement it.
| Criterion | Code | Lottie | Video |
|---|---|---|---|
| What it is | CSS and JavaScript right in the interface | a vector animation file played by a player | a pre-rendered clip |
| Best for | transitions and micro-interactions | illustrations, icons, logo animation | complex scenes and social networks |
| Reacts to the user | fully | partly | no |
| Weight | the lightest | light | heavy — compressed and loaded lazily |
When motion is switched off
For some people strong motion causes dizziness, and they switch it off in the system. The behaviour for this case is designed too.
-
01
The meaning stays
A transition becomes a soft fade — the person still sees what changed.
-
02
No parallax and zoom
Large movements across the screen are the first to go.
-
03
No autoplay
Videos and animations wait for a tap.
-
04
The content is all there
Nothing important is hidden inside an animation.
Common motion design mistakes
-
Animations added by occasion
Each with its own speed and curve — and they argue with each other.
-
Too slow
An interface that makes you wait for its animations irritates by the tenth time.
-
Motion for its own sake
If it does not explain or guide, it distracts.
-
Heavy effects on phones
What is smooth on a powerful computer stutters on an ordinary phone.
-
Ignoring reduced motion
The system setting exists for a reason.
Questions about motion design
How much does motion design cost?
The price is counted in hours and depends on the number of transitions, scenes and their complexity. The sum is fixed before the start; the estimate is free.
Will animation slow down the site?
Not if it is built properly: only movement and transparency are animated, heavy scenes load on demand and pause off screen.
In what format will we get the motion?
The way your developers can implement it: code, Lottie files or video — chosen for each place.
Can you animate our logo?
Yes — for the intro of videos, the app splash screen and social networks, in the brand’s character.
What about people who switch motion off?
The site follows the system setting and shows a calm version where the meaning and content stay.
Online form
Discuss
motion design
Tell us about the product or the launch and where motion should help — we will suggest an approach and estimate the work. The consultation is free.