Motion on a website: how to keep it fast and easy for everyone.
Animation can make a website feel alive. Done badly, it makes the site slow, hides the content, and makes some visitors feel sick. Here is how we use motion on business websites so it helps instead of getting in the way.
Motion should explain, not decorate.
Good motion shows people where to look or how something works: a section sliding in as you reach it, a search result moving up a list, a button reacting when you tap it. If an animation does not help someone understand the page, it is usually better left out.
Respect people who turn motion off.
Phones and computers have a setting called reduce motion. People turn it on because animation can cause dizziness or headaches, or simply because it distracts them. A well built site reads that setting and calms down: no sliding, no parallax, content simply appears.
Keep it fast.
- Animate position and transparency, not size or layout. Browsers handle those cheaply, so the page stays smooth on older phones.
- Never make people wait for an animation before they can read or tap.
- Load heavy pieces, like videos, only when they come into view.
- Test on a real phone, not only on a fast laptop.
Never hide the content.
Text should be readable even if the animation code fails to load. Google, AI tools and screen readers all read the page, and none of them scroll like a person does. If your words only appear after an animation runs, some of them may never see your words at all.
The basics still come first.
Motion sits on top of an accessible site, not instead of one. Every page should work with a keyboard, show a visible outline on what is selected, describe images in text, label every form field and have enough contrast to read. On our own site we aim for WCAG 2.2 level AA, and our animations stop or calm down when a device asks for reduced motion. Read our accessibility statement.
Questions.
Does animation slow down a website?
It can. Animating position and transparency, loading heavy pieces only when needed and testing on real phones keeps a site with motion fast.
What is reduced motion?
A setting on phones and computers that asks apps and websites to use less animation. A well built site reads it and calms its animations down.
Does animation hurt SEO?
Not if the text is in the page from the start. Problems come when words only appear after an animation runs, because search engines and AI tools may not see them.
Want a site with motion that stays fast and easy to use? See how we build websites, or send us a message.