Design & Product
Motion & Animation
Micro-interactions and motion design
Motion is a functional part of an interface, not decoration. Done well, it tells people where a new panel came from, what is loading, which element they just affected and whether an action succeeded — all without a word of instruction. Done badly, it makes a product feel slow, and it makes some users physically unwell.
We treat it as design with a purpose attached: every animation should answer a question the user would otherwise have to work out for themselves.
What's included
Interface motion
Micro-interactions
button, toggle and form-field feedback that confirms an action registered.
Transitions
page and panel changes that preserve spatial context, so navigating does not feel like teleporting.
Loading and progress
skeletons, spinners and progress indicators that set an honest expectation, plus the optimistic states that make an app feel immediate.
Empty and success states
a small amount of character exactly where a product would otherwise feel dead.
Onboarding and hints
motion that draws attention to the one thing a new user needs to notice.
Data visualisation
charts that animate on entry and on change, so a value updating is visible rather than silently replaced.
A motion specification
durations, easing curves and choreography rules as part of your design system, so every developer implements it the same way.
Brand and content motion
- Animated logos and stings for video openings, app splash screens and social content.
- Explainer videos — the two-minute piece that describes a product or service better than a page of text.
- Social motion — short-form vertical video, animated posts, subtitle and caption styling, sized for each platform rather than cropped from one master.
- Product demos and walkthroughs — screen recordings and animated sequences for launches, sales and support.
- Motion graphics for advertising, including the variants a paid campaign needs for testing.
- Presentation and event graphics — screen content for a launch, conference or exhibition.
Restraint is the skill
The most common motion problem is too much of it. A three-hundred-millisecond animation on an action someone performs forty times a day is not delight, it is a delay they will grow to resent. Our defaults:
- Fast for frequent actions, slower only where the movement is genuinely conveying structure.
- Motion that reflects real physics, because interfaces that ease naturally feel responsive while linear movement feels mechanical.
- Nothing that blocks input. A user should never have to wait for an animation to finish to continue.
- Nothing that shifts layout unexpectedly or distracts from the content being read.
Accessibility and performance
Vestibular disorders are common, and large parallax and zoom effects can cause genuine nausea and dizziness. Every implementation we ship respects the operating system's reduced-motion setting, replacing movement with a simple fade or nothing at all rather than ignoring the preference. We also keep animation on the properties a browser can move cheaply, so motion does not cost frame rate on a mid-range phone — an animation that stutters is worse than no animation.
For right-to-left interfaces, direction-based motion has to mirror as well: a panel that slides in from the left in English should arrive from the right in Arabic, and getting that wrong is immediately noticeable to an Arabic user.
On working with Codigoo
We had been blaming regulation for two years. They spent a week watching recordings and showed us it was question order.
Questions we are usually asked
- Will this slow our website down?
Not when it is implemented properly, and this is precisely why motion is worth doing with developers rather than handing over a video for someone to approximate. Well-built interface animation costs very little, and it can make an interface feel faster than a static one by giving feedback while work happens in the background.
- Can you animate our existing brand?
Yes — that is a common piece of work. An identity designed for print often has no defined behaviour, and adding a motion specification to it gives you a consistent presence in video and social without redesigning anything.
- Do you produce the video content too?
Yes. Filming, editing, sound and post-production are handled by our media production team, so an animated sequence and live footage can be produced as one piece rather than assembled from two suppliers.
- How do you hand off animation to developers?
As a specification, not as a video to copy: durations, easing values, trigger conditions, states and the reduced-motion alternative. Where the animation is complex we build it ourselves, because a hand-off that relies on interpretation is where motion quality gets lost.
If your product feels static or your brand has no presence in video, a consultation is where to work out which of the two is costing you more.
Talk to us about Motion & Animation
Thirty minutes with an engineer and a strategist who do this work — not a sales team. You will get an honest answer about whether it is the right thing to buy, and what it would realistically cost.