Philosophy
Motion is interaction design — not a finishing coat
Motion that's added after the interface is "done" can only decorate it. Motion designed with the interaction can carry meaning: it becomes the connective tissue between states, the thing that makes a change legible instead of abrupt.
Good motion answers the questions a static screen leaves open — so the interface feels understood, not just seen.
What a moment of motion should answer
- What changed? — the eye is drawn to the thing that actually updated.
- Why did it change? — the movement ties the change to the action that caused it.
- Where did it come from, and where did it go? — spatial origin and exit keep the mental model intact.
- What should I look at next? — motion sequences attention instead of competing for it.
If I can remove the animation and the interaction stops making sense, the motion was doing real work. If nothing is lost, it was decoration.
— My test for whether motion belongs
The Approach
Six decisions before a single keyframe
Motion starts as a series of decisions, not animations. By the time I open a tool, I already know what the movement has to communicate. The keyframes are just the last step.
What is actually changing on screen, and what triggered it? Motion begins by naming the change precisely.
What should the user understand in this moment — confirmation, location, progress, consequence? Intent sets everything downstream.
What earns motion and what stays still. Deciding what doesn't move is half the work.
How elements move in relation to each other — order, overlap, and timing — so a change reads as one event, not many.
Interaction concepts get tested fast in Figma; when a moment needs higher fidelity, I explore it in After Effects.
Turn the intent into something buildable — triggers, states, timing, easing, edge cases — the product can honour.
The same thinking, as an end-to-end pipeline
Problem
What's unclear or abrupt in the current interaction.
Intent
The single thing this motion must communicate.
Storyboard
Key states sketched before anything animates.
Prototype
Behaviour tested in Figma against real content.
Explore
After Effects for choreography beyond product limits.
Ship
Specs, tokens and states handed to engineering.
Toolcraft
Figma and After Effects do different jobs
The question is never "which tool" — it's which question I'm answering. One tool lives inside the product's reality; the other lets me explore past it. Tools support the design thinking. They aren't the design thinking.
| Figma | After Effects | |
|---|---|---|
| Role | Product-true interaction & prototyping | High-fidelity motion exploration |
| Best for | Micro-interactions, transitions, component behaviour, testing concepts | Complex choreography, motion graphics, storytelling, presentation assets |
| Fidelity | Real components, real constraints | Anything I can imagine, unconstrained |
| Speed | Fast iteration, shareable in seconds | Slower, higher polish, deeper control |
| Hands to engineers as | A live behaviour they can inspect | A reference for feel, then translated to spec |
I prototype in Figma to prove an interaction works, and reach for After Effects to find the feeling before bringing it back into product reality.
Principles
The rules I hold motion to
A short, opinionated set. Every one of them can be used to cut an animation, not just add one.
Intent
Every movement has a reason a user could name. No reason, no motion.
Continuity
Elements come from somewhere and go somewhere. Motion preserves spatial relationships between states.
Hierarchy
Not everything needs to move. What moves, and when, sets the order people read the change.
Timing & easing
Duration reflects distance and complexity; easing makes movement feel intentional rather than mechanical.
Feedback
The interface acknowledges meaningful actions immediately, so the system never feels silent.
Restraint
The strongest animation is sometimes no animation. Motion that repeats without adding meaning becomes noise.
Motion System
One system, not a pile of animations
At product scale, motion has to be consistent, teachable and cheap to reuse. I treat it as a system of shared values — the same way we treat colour, type and spacing — so a hundred interactions feel like they came from one hand.
| Property | Example token | What it governs |
|---|---|---|
| Duration | motion.fast 120ms | How long a change takes; scaled to the distance travelled. |
| Easing | ease.standard | The acceleration curve — the difference between "mechanical" and "considered". |
| Distance | motion.travel.sm | How far something moves; large moves get more time, not more speed. |
| Direction | enter.from-bottom | Where elements enter from and exit to, tied to spatial model. |
| Scale & opacity | emphasis.pop | Attention and depth without moving layout around. |
| Choreography | stagger.list 40ms | The offset between related elements so a group reads as one gesture. |
Tokens make motion consistent across teams, fast to apply, and simple to hand to engineering — and they let the whole product change its feel by editing values, not files.
A motion system is the difference between "this screen has a nice animation" and "this product moves like it was designed by one person."
— Why I design the system before the moment
Across the Experience
Where motion earns its place
Motion isn't spread evenly across a product. It shows up where a static screen leaves a gap — and each place has a problem it exists to solve, not an animation waiting to be made.
Feedback has an emotional register, too
State changes aren't only informational — they set a tone. Motion is how a product's personality shows up in the moments that matter, without a word of copy.
Loading
Looping motion signals the system is working — never frozen — and sets expectations for the wait.
Empty state
A gentle entrance draws the eye to the one action that fills the space.
Success
A quick, decisive confirmation closes the loop and rewards completion.
Error
Motion carries weight without alarm — enough to notice, calm enough to recover.
Destructive confirm
A deliberate pause and settle asks for a second of attention before an irreversible action.
Reward moment
A small celebration marks progress and makes finishing feel worth it.
Motion Lab — running live in this page
These aren't videos. Each is a small, self-contained interaction built in the browser to show the behaviour, not a picture of it. They pause automatically if your system prefers reduced motion.
The button morphs into its own confirmation. The colour, checkmark draw and settle make the result unmistakable. Click it.
A short stagger sequences attention top-to-bottom, so a group of items arrives as a single event instead of a flash.
Both dots travel the same path in the same time. Easing is the entire difference between "mechanical" and "considered".
A structured shimmer shows the shape of what's loading, so the interface feels alive rather than stuck.
Partner Rewards — two moments that earn motion
Partner Rewards is a tiered loyalty programme across Delivery Hero brands (Talabat, PedidosYa, Glovo). Vendors unlock benefits — priority support, analytics, exclusive tools — by hitting performance goals. Most of the experience is deliberately still. Motion is reserved for two emotional beats: when a partner discovers the programme for the first time, and when they level up. Both were designed and animated in After Effects, then handed to engineering with frame-accurate specs. Everything else in the product uses CSS transitions.
Shown once, on first open. All three tiers reveal before any performance data is shown — establishing what's possible before the ask is made. The stagger and confetti are the entire emotional payoff of joining.
Triggered on promotion. The badge lands with confetti, then the copy immediately points to the next tier — celebrating the win while keeping momentum toward the next one. Level names are tokenised, so one file covers all brands.
Built to Ship
The difference between a render and a product
A beautiful export proves an idea can look good. A product interaction has to survive real data, interruption, small screens and an engineer's timeline. I design for the second case from the start.
Impressive, not implementable
- Timing tuned to one perfect take
- Assumes it plays start-to-finish, uninterrupted
- Ignores loading, empty and error realities
- No reduced-motion fallback
- Nothing an engineer can build from
A useful product interaction
- Defined triggers and states
- Interruptible and reversible
- Tokenised timing and easing
- Responsive, with edge cases covered
- Reduced-motion path and a written spec
save-button → confirmed trigger onClick (also fires on Enter) duration 180ms easing cubic-bezier(0.34, 1.56, 0.64, 1) sequence label swap → checkmark draw (start +40ms) → settle states idle · loading · success · error interrupt re-click during anim → snap to target state reduced no scale/draw; instant colour + label swap tokens motion.fast · ease.emphasized
I design motion in the same language engineers build in — triggers, states, durations and tokens — so "the feel" stops being subjective and starts being spec.
[Insert a shipped before/after and any measured impact here — e.g. task-completion or error-recovery change. Not fabricated.]
Restraint & Access
Motion that respects the person using it
Motion can exclude people as easily as it can help them. Designing it responsibly is part of the craft, not an afterthought — and it's a strong signal of whether a designer thinks in systems or in showreels.
Non-negotiables
- Honour reduced-motion. A calm, functional path for anyone with
prefers-reduced-motionset — including this page. - Never the only signal. Meaning is carried by copy, colour and structure too — motion reinforces, it doesn't replace.
- Mind vestibular safety. Avoid large parallax, spin and zoom that can trigger motion sensitivity.
- Respect the budget. Motion runs on someone's battery and CPU; smoothness is a usability feature, not a luxury.
- Works fully with animation off. If the product only makes sense when it's moving, the underlying design isn't finished.
Restraint is the most senior motion skill. Knowing when not to animate protects the moments where animation genuinely matters.
— On maturity in motion design
Positioning
A product designer who is fluent in motion
I don't animate screens after the fact. I design the interaction and the motion together, because the movement is often where the interaction becomes understandable. That means I can take a feature from problem to prototype to a motion spec an engineer can build — and know which parts to leave perfectly still.
If you want interfaces that feel clearer, more intuitive and more expressive because their motion was designed, not decorated — that's the work.
