UX
Web animations: performance and UX
How to add animations without harming performance or accessibility.
Emeric Mathis15 December 2024Updated on 11 May 20262 min read
Well‑designed web animations can make an interface feel more fluid, intuitive and delightful. Poorly implemented ones can slow everything down and make your site harder to use.
Why use animations
Animations can:
- Guide the eye and explain what just happened
- Create the feeling of continuity between states
- Express your brand personality
But they should always serve the content and tasks, not distract from them.
Performance considerations
- Prefer transforms and opacity over expensive properties like 'top' or 'left'
- Avoid animating large areas of the page at once
- Limit the number of concurrent animations
I often use libraries like Framer Motion in a controlled way to create smooth transitions without compromising performance.
Accessibility and motion
Some users are sensitive to motion and can feel discomfort or nausea in front of intense animations.
- Respect the user’s “prefers‑reduced‑motion” setting
- Avoid parallax or very fast, looping animations
- Provide alternatives when motion carries important information
I talk more broadly about the relationship between UX, UI and conversion in my article on UX/UI impact on conversion.