Motion design
Make it move.Make it mean something.
Some ideas need more than a still frame. We design motion that explains a product, gives a brand its rhythm and makes digital interactions easier to follow. No movement just for the sake of movement.
02Purpose
If it moves, it should help.
Explain
Show a complex idea one step at a time.
Guide
Direct attention to the next useful thing.
Respond
Let people know an action was received.
Express
Give your brand a recognisable pace and personality.
The right motion does a job. The rest can stay still.
03Decoration vs. function
The frame is only the beginning.
A static layout can show the pieces. Motion can show their relationship: what happens first, what changes next and where the story leads. We choose movement when it makes that sequence easier to understand — not because every block needs an effect.
What changed Same idea. Clearer sequence.
04Applications
Different moments. Different kinds of motion.
Brand moments
Animated identities and hero elements with a recognisable character.
Explainers
Short sequences that make a service, process or feature easier to grasp.
Scroll stories
Ideas that unfold naturally as someone moves down a page.
Microinteractions
Feedback for taps, buttons, menus and forms.
Screen transitions
A sense of continuity from one view to the next.
Product visuals
Motion around a real feature, interface or product detail.
We choose the format after understanding the job.
Designing the screens themselves? UI Design Mapping the flows behind them? CX/UX & Interaction Design
05Brand motion
A brand has a tempo.
Some brands should move with quiet precision. Others can be playful, quick or full of energy. We translate the visual identity into a motion language — pace, transitions, direction and the moments that deserve emphasis.
The aim is recognition, not noise.
Quiet precision
Even pace, soft landing
Playful
Quick start, a little bounce
Full of energy
Fast, decisive, a strong accent
06Explainers
When words become a maze, show the idea.
A process, a new feature or an unfamiliar service often makes more sense when you can watch it unfold. We reduce the story to its essential steps, then use timing and visual transitions to connect them.
One idea at a time. A clear finish. Nothing the viewer has to decode twice.
07Microinteractions
A good interface answers back.
A button should feel pressed. A form should show what happened. A loading state should signal that the product is working. We design these small moments so users never have to guess whether their action went through.
Motion supports the message; text and state remain clear without it.
- IdleReady to be used.
- PressedThe tap is felt at once.
- ProcessingThe product is working.
- SuccessIt went through.
- ErrorWhat failed, and what to do.
08Scroll stories
Make scrolling part of the story.
A visitor already moves through a page in sequence. Sometimes we use that movement to reveal a product detail, connect two ideas or show a transformation. The narrative should stay easy to follow if someone scrolls quickly, slowly or with motion disabled.
Scrolling is the control, not a trap.
01 Shape
The object appears as an outline.
02 Structure
Its inner parts take their places.
03 Outcome
The finished result, ready to use.
09Product motion
The product is the main character.
A moving interface can show how a feature works better than a long list of promises. We focus on the part worth understanding: a change, a connection, a useful outcome. If the actual product is available, we use it. If not, we label the scene as a concept.
No invented dashboards, fake customer quotes or made-up results.
10Craft
The smallest pause changes the feel.
A transition that is too fast can be missed. One that lingers can get in the way. We tune pacing, easing and pauses to the moment — whether it is a page reveal, a status change or a brand moment.
You should notice the idea, not wait for an animation to finish.
Too fast
Example: ~100 ms, linear — easy to miss
Overdone
Example: ~2 s, slow in and out — gets in the way
Considered
Example: ~400 ms, eases out — noticed, then done
Each tick is one frame at an equal time step: wide gaps mean fast movement, dense ticks mean slow.
11Motion system
Consistency should move, too.
When every new page invents its own transitions, the product starts to feel fragmented. We define a small set of motion rules your team can reuse: how things enter, react, leave and settle.
A shared language keeps the experience coherent as the site grows.
Three durations
- Short 150 msSmall feedback
- Medium 300 msPanels and menus
- Long 500 msPage-level moments
Example values — exact timings are set during prototype review.
Direction
Enter from below. Leave by fading, without competing for attention.
Two easing curves
Enter: ease-out, arrives and settles. Exit: ease-in, leaves without lingering.
One component, four rules
- Enter
- React
- Leave
- Settle
12Accessibility
Motion should never become an obstacle.
People browse on different devices and with different preferences. We plan a lighter mobile version, honour reduced-motion settings and keep important content readable when animation is paused or off.
- A lighter version for mobile
- Reduced-motion settings honoured
- Content readable when paused or off
The experience comes first. The effects follow.
13Performance
Motion should not make people wait.
We choose how to animate based on what the page needs. Simple interface changes can happen directly in the browser; heavier visuals should load only when useful. We keep first frames clear and test the experience on real screen sizes, not only a powerful desktop.
Interface motion
Simple changes happen directly in the browser.
Heavier visuals
Load only when they are useful.
First frame
A clear still is ready from the start.
A memorable experience can still be considerate of bandwidth and attention.
14Deliverables
More than a nice-looking preview.
Depending on the project, we prepare a visual direction, key frames or storyboard, an approved motion prototype, a clear handoff specification and assets ready for the agreed channel. Where website implementation is part of scope, we can also build and test the motion in the live interface.
Visual direction & key frames
The idea fixed as a storyboard before anything moves.
Approved motion prototype
Pace and behaviour you can review and sign off.
Handoff specification
Timings, easing and states the development team needs.
Assets — or the live interface
Files for the agreed channel, or motion built and tested on the site when that is in scope.
You know what is moving, where it is used and what the development team needs.
15Process
We work out the why before the how.
Define
What should the viewer understand, feel or do?
Frame
Choose the visual idea and key moments.
Prototype
Agree on the pace and behaviour.
Produce
Prepare animation or implement it in the interface.
Website build scoped separatelyCheck
Review readability, devices, controls and performance.
A simple sequence you can review before the work is locked in.
16Implementation
The idea should survive the browser.
For motion used on a website, our design and development work can meet in the same place: GSAP for controlled transitions, Vue/Nuxt for reusable interface elements and image optimisation for lighter visuals. When the page allows it, pre-generated delivery through Cloudflare helps keep the experience responsive.
We choose the simplest implementation that delivers the intended effect — and prepare a calm fallback when motion is not available.
GSAPVue / NuxtOptimised mediaCloudflare
- InteractionsGSAP
- Reusable partsVue / Nuxt
- Efficient visualsOptimised media
- DeliveryCloudflare
17Concept lab
See the idea in motion.
- The brief
- What had to become clearer.
- The motion decision
- What changed and why.
- The result
- A short controlled demo, plus the still version.
18Start
What should come alive?
A feature that is hard to explain? A brand that needs its own rhythm? An interface that feels too quiet? Tell us what you are working on, and we will help define where motion can make a real difference.
Share a page, product or rough thought — a finished brief is not required.