In this article · 7 sections
A button that gently lifts when you hover over it, a form field that turns green when filled correctly, a section that fades in as you scroll: these micro-interactions make a website feel alive and well-made. But animation is easy to overdo. Here's how to use it with purpose.
What micro-interactions do
Good micro-interactions: - Give feedback: "Your click registered", "This field has an error" - Show state: loading, success, open/closed menus - Guide attention: draw the eye to the next step - Add polish: make the interface feel smooth and responsive
Useful examples
Buttons
A subtle colour change, shadow or lift on hover, and a pressed state on click. On mobile, a quick visual response on tap reassures the user.
Forms
- Inline validation as the user types
- A loading spinner on the submit button, then a clear success message
- Gentle highlighting of errors, not just red text at the top
Navigation
Smooth opening of mobile menus and dropdowns; the current page highlighted.
Scroll reveals
Content fading or sliding slightly into view as it scrolls in. Keep it fast (around 0.3–0.7 seconds) and subtle (a small movement, not a big swoop).
Counters and progress
Numbers that count up once when visible; a reading progress bar on long articles.
Loading states
Skeleton placeholders instead of blank areas while content loads.
When animation hurts
- Slow animations that make users wait to read content
- Everything moving at once: nothing stands out, and it feels chaotic
- Auto-playing sliders: users often miss messages, and they can hurt engagement
- Heavy animation libraries that add a lot of JavaScript and slow loading
- Layout shifts: elements jumping around damage Core Web Vitals
- Animations that hide content if JavaScript fails
Respect "reduce motion"
Some people experience discomfort with motion. Devices offer a "reduce motion" setting, and websites can respect it:
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
This is good accessibility practice and simple to add.
Performance tips
- Animate transform and opacity, which are cheap for browsers, instead of width, height or top/left
- Use CSS transitions for simple effects instead of heavy libraries
- Use IntersectionObserver for scroll reveals, not scroll event handlers on every pixel
- Make sure content is visible even if the animation script doesn't run
- Test on a mid-range Android phone, not just a fast laptop
A simple rule of thumb
Ask of every animation: does it help the user understand or do something? If it only exists to look cool, keep it very subtle or remove it.
Where to start on your site
- Hover and pressed states on all buttons
- Clear loading and success states on forms
- Smooth mobile menu
- Light fade-in for sections, with reduce-motion support
These four alone make most business sites feel noticeably more premium, with no impact on speed when done properly.
Our websites use lightweight, accessible animations that keep pages fast. Let's upgrade yours.