# Where should motion belong on a website?

> Use website motion for orientation, feedback, and explanation while protecting reading, performance, keyboard use, and reduced-motion preferences.

Source: https://scayverstaging.1wp.site/resources/website-decisions/website-motion-decisions/

![Person with curly hair in a white shirt writes at a desk, appearing focused.](https://scayverstaging.1wp.site/wp-content/uploads/2026/09/sg-resources-146803-hero.webp)

Website motion belongs where it helps someone understand a change, notice useful feedback, or keep their place, and never where it holds back copy or controls.

[Talk to a Specialist](https://scayverstaging.1wp.site/talk-to-a-specialist/?form=book) [Every resource](https://scayverstaging.1wp.site/resources/)

**Format**

[Guide](https://scayverstaging.1wp.site/resources/type/guide/)

**In this format**

92

## Name the purpose of website motion before choosing the effect.

A website does not feel more premium because every section moves. It feels more deliberate when movement has a job and still works for people who prefer less of it.

List each proposed movement and the question it answers. A menu transition can show that navigation has opened. A step indicator can explain progress through a form. A before-and-after comparison can make a design change visible. If the purpose is only “add energy,” ask whether typography, imagery, spacing, or the content itself should do that work instead.

Consider how often the effect repeats. A subtle entrance may be pleasant once and tiring on every visit. A perpetual background movement can compete with reading. Motion that delays a call to action or makes content appear only after a scroll threshold creates a usability risk even if it looks good in a presentation.

## Keep the essential interface available.

The headline, main offer, navigation, and primary action should not depend on animation completing. A visitor on a slow device or a person using assistive technology needs the same information and route. If a visual sequence explains a process, provide the steps as ordinary text too. Motion should reinforce meaning, not carry meaning alone.

Test with a keyboard, touch, and a screen reader where relevant. Hover-only reveals may have no equivalent on touch. A moving carousel needs usable controls, understandable focus behavior, and enough time to read. Avoid scroll effects that take over the user’s input or move the page unexpectedly.

## Respect reduced-motion preferences.

The [W3C guidance for animation from interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) explains why non-essential motion triggered by an interaction needs a way to be disabled when it could cause discomfort. Build a reduced-motion treatment into the design brief, not as a last-minute switch that hides content. Sometimes the alternative is a quick state change. Sometimes it is a static illustration or a clear text label.

Do not assume reduced motion means every transition must vanish. Functional feedback can remain when it is short and restrained. The important question is whether the person can understand and control the interface comfortably. Check the actual browser and device behavior rather than treating a design file as proof.

## Budget for performance and maintenance.

Ask what produces the effect: CSS, a small script, video, or another asset. A simple state change should not require a heavy animation system. Video and complex graphics introduce loading, battery, crop, and fallback decisions. Decide what the page shows while media is missing, when JavaScript fails, and on a narrow phone.

Document the owner of each motion pattern. A reusable component should have one governed behavior. Copied effects across pages drift when timings and accessibility fixes change. If the site includes a strong motion signature, test that signature with real content lengths and different device capabilities before spreading it through templates.

## Make the review concrete.

For each proposed effect, record the trigger, purpose, content affected, duration, fallback, reduced-motion version, and acceptance test. Ask a reviewer to complete the relevant task with motion on and reduced. If the effect makes orientation clearer without blocking use, it may earn its place. If it only calls attention to itself, remove it.

[Web design](https://scayverstaging.1wp.site/services/design/web-design/) can connect motion choices to the rest of the experience, and [UX optimization](https://scayverstaging.1wp.site/services/optimization/ux-optimization/) can examine existing friction. [Talk to a Specialist](https://scayverstaging.1wp.site/talk-to-a-specialist/) about the interaction you want visitors to understand, not just the animation you want them to see.

[Back to website decisions](https://scayverstaging.1wp.site/resources/website-decisions/).

Guides

## Guides beside Where should motion belong on a website?.

1. ### [Should you redesign your site or improve it?](https://scayverstaging.1wp.site/resources/website-decisions/redesign-or-improve/)
   Website decisions · 3 min read
2. ### [How do you build a website page inventory?](https://scayverstaging.1wp.site/resources/website-decisions/website-page-inventory/)
3. ### [Which website pages should you build first?](https://scayverstaging.1wp.site/resources/website-decisions/website-page-priorities/)
4. ### [What belongs inside a website project scope?](https://scayverstaging.1wp.site/resources/website-decisions/website-scope-boundaries/)
5. ### [Do you need a one-page or multipage website?](https://scayverstaging.1wp.site/resources/website-decisions/one-page-or-multipage-website/)
6. ### [How do you pick a primary website conversion?](https://scayverstaging.1wp.site/resources/website-decisions/primary-website-conversion/)
7. ### [Which navigation labels will visitors understand?](https://scayverstaging.1wp.site/resources/website-decisions/navigation-labels/)
8. ### [How should you organize your service pages?](https://scayverstaging.1wp.site/resources/website-decisions/organizing-service-pages/)
9. ### [When should you merge two website pages?](https://scayverstaging.1wp.site/resources/website-decisions/when-to-merge-website-pages/)
10. ### [Who should own the content on your website?](https://scayverstaging.1wp.site/resources/website-decisions/website-content-ownership/)
11. ### [Do you need wireframes before designing a website?](https://scayverstaging.1wp.site/resources/website-decisions/wireframes-before-design/)
12. ### [How do you choose a website's visual direction?](https://scayverstaging.1wp.site/resources/website-decisions/choosing-website-visual-direction/)
13. ### [How do you turn a brand into a website system?](https://scayverstaging.1wp.site/resources/website-decisions/website-brand-system/)
14. ### [How do you evaluate a homepage design?](https://scayverstaging.1wp.site/resources/website-decisions/evaluating-homepage-design/)
15. ### [How do you plan a page's visual hierarchy?](https://scayverstaging.1wp.site/resources/website-decisions/page-visual-hierarchy/)
16. ### [Which mobile navigation pattern fits your site?](https://scayverstaging.1wp.site/resources/website-decisions/mobile-navigation-patterns/)
17. ### [What content should stay prominent on mobile?](https://scayverstaging.1wp.site/resources/website-decisions/responsive-content-priorities/)
18. ### [Where does accessibility fit in a redesign?](https://scayverstaging.1wp.site/resources/website-decisions/accessibility-in-redesign-scope/)
19. ### [What images does your website actually need?](https://scayverstaging.1wp.site/resources/website-decisions/website-image-strategy/)
20. ### [How do you choose readable website typography?](https://scayverstaging.1wp.site/resources/website-decisions/website-typography-decisions/)
21. ### [Which fields should your contact form ask for?](https://scayverstaging.1wp.site/resources/website-decisions/contact-form-fields/)
22. ### [What should a useful contact page include?](https://scayverstaging.1wp.site/resources/website-decisions/contact-page-planning/)
23. ### [How should you structure a service page?](https://scayverstaging.1wp.site/resources/website-decisions/service-page-structure/)
    Website decisions · 4 min read
24. ### [What should your homepage say first?](https://scayverstaging.1wp.site/resources/website-decisions/homepage-message-architecture/)
25. ### [How many calls to action does your website need?](https://scayverstaging.1wp.site/resources/website-decisions/website-cta-hierarchy/)
26. ### [How can a website build trust without testimonials?](https://scayverstaging.1wp.site/resources/website-decisions/trust-without-testimonials/)
27. ### [Which website pages should use a shared template?](https://scayverstaging.1wp.site/resources/website-decisions/reusable-page-templates/)
28. ### [When is a website design ready to approve?](https://scayverstaging.1wp.site/resources/website-decisions/website-design-acceptance-criteria/)
29. ### [How should stakeholders review a website prototype?](https://scayverstaging.1wp.site/resources/website-decisions/stakeholder-prototype-review/)

No other guides in this group yet.

Keep reading

## Read after Where should motion belong on a website?.

The rest of the resources, newest first.

- [2 July 2026 Customer Persona Worksheet](https://scayverstaging.1wp.site/resources/customer-persona-worksheet/)
- [2 July 2026 The Social Content Sprint Playbook](https://scayverstaging.1wp.site/resources/the-social-content-sprint-playbook/)
- [2 July 2026 AI Prompt Pack for Blog Post Outlines](https://scayverstaging.1wp.site/resources/ai-prompt-pack-for-blog-post-outlines/)
- [2 July 2026 Email Welcome Sequence Template](https://scayverstaging.1wp.site/resources/email-welcome-sequence-template/)
- [2 July 2026 Website Pre Handoff QA Checklist](https://scayverstaging.1wp.site/resources/website-pre-handoff-qa-checklist/)
- [2 July 2026 The SEO Content Audit Guide](https://scayverstaging.1wp.site/resources/the-seo-content-audit-guide/)
- [2 July 2026 Positioning Statement Worksheet](https://scayverstaging.1wp.site/resources/positioning-statement-worksheet/)
- [2 July 2026 The Client Onboarding Playbook](https://scayverstaging.1wp.site/resources/the-client-onboarding-playbook/)
- [2 July 2026 AI Prompt Pack for Ad Headline Variations](https://scayverstaging.1wp.site/resources/ai-prompt-pack-for-ad-headline-variations/)
- [2 July 2026 The One Page Creative Brief Template](https://scayverstaging.1wp.site/resources/the-one-page-creative-brief-template/)
- [2 July 2026 Brand Launch Readiness Checklist](https://scayverstaging.1wp.site/resources/brand-launch-readiness-checklist/)
- [2 July 2026 The Landing Page Teardown Guide](https://scayverstaging.1wp.site/resources/the-landing-page-teardown-guide/)