Button press
A slight scale confirms the press without moving the layout.
UI motion · Micro-interactions · UK
Web animations that add information and clarity
I help teams ship animation that respects attention, prefers-reduced-motion, and the main thread: transitions that clarify hierarchy, feedback that feels instant, and motion that survives real devices.
Sequence
Motion lab
Small interactions from product UI. Each one has a job. If your system asks for less motion, the controls still work and the movement is removed.
Toggle
The knob travels to the choice, so the state is obvious.
Duration matches the action.
Tab indicator
The highlight slides to the selected tab instead of jumping.
Floating label
The label makes room for the value, and stays attached to the field.
Height follows the content, so the page does not jump.
Accordion
The panel opens to its own height, so content below eases down.
- Hierarchy
- Feedback
- Rest
Staggered list
Items arrive in order, which keeps a group readable.
0
Count
Use a count when the number itself is the message.
Copy confirmation
The label changes to Copied, so the action has a result.
Toast
A short confirmation appears, then leaves. It does not block the control.
Card
Available
Card lift
Hover and keyboard focus lift the card, so it feels available.
What “good” looks like
- Purposeful timing: easing and duration that match the interaction, not generic defaults everywhere
- Accessible motion: reduced-motion variants, avoiding vestibular triggers, and keeping critical paths usable without animation
- Performance-aware choices: favouring transforms and opacity, containing paint where it matters, and pairing with solid Web Development when motion needs a lighter page underneath
- Coherent systems: shared tokens for durations and curves so the product feels like one team built it
Typical toolkit
CSS transitions and keyframes, View Transitions where the stack allows, GSAP when timelines need fine control, WebGL when a field belongs behind the page, and framework primitives (e.g. React / Motion patterns) when they keep code maintainable.
Ready to add animation to your website?
Share the surface (marketing site, app shell, checkout, dashboard) and what feels wrong. Broader build work lives under Web Development.