A card that glides in gently from below as you scroll, an image slider at the top of the home page, a marquee of customer logos, a counter running down to the end of an offer: motion is popular on small business websites because it makes a page feel alive. It can also do the opposite. Slow readers lose the thread in a changing picture, people who find it hard to concentrate get distracted, and some people get dizzy or develop headaches from large-scale movement. The W3C's Web Content Accessibility Guidelines (WCAG) set clear limits for this, most visibly a period of five seconds for motion that starts by itself (W3C, WCAG 2.2). This article shows what motion on a website is good for, which rules apply to reveals, sliders, marquees and counters, how the system setting for reduced motion works, and how to build animations that burden neither visitors nor loading time.
What motion on a website is good for
Motion is a signal. The eye reacts to change faster than to colour or font size, which is why motion is powerful, for better and for worse. Used well, it answers a question the visitor has right now: did my tap do anything?
Where did the menu come from? What is new on the page? Used badly, it answers a question nobody asked and pulls attention away from the text the visitor actually wanted to read. On a business website, motion does four jobs well:
- Giving feedback: a button that gives way briefly when tapped, or a form that visibly turns into a confirmation after sending, shows that something has happened.
- Showing origin: a menu that slides in from the side, or an answer that expands in the FAQ, makes clear where the new content comes from and how it goes away again.
- Ordering a sequence: service cards that appear one after another as they scroll into view read as a sequence rather than a block.
- Marking arrival: a single, calm reveal at the start of a section sets a rhythm while scrolling without delaying the content.
All four jobs have one thing in common: the motion is short, runs once and is followed by stillness. It accompanies the content, it does not replace it. Trouble starts where motion becomes a permanent state: the slider that shows a new message every few seconds, the marquee that runs across the screen without end, the background that shifts against the foreground while scrolling. Elements like these compete with the actual content for attention, and because the eye jumps to movement, they often win. As a rule of thumb: motion that answers a visitor's question can stay; motion that only exists to attract attention needs a good reason, a short duration and a way to stop it. What belongs on the first screen of a home page and what clutters it is covered in the article on the first screen of the home page.
What WCAG 2.2 says about motion
WCAG is not a law but a technical standard from the W3C against which accessibility can be tested.
Laws and standards refer to it; whether and how the German Accessibility Strengthening Act (BFSG) applies to your business is explained in the article on accessible websites under the BFSG. WCAG success criteria are arranged in levels: A is the base level, AA builds on it and includes A, AAA goes beyond (W3C, WCAG 2.2). Three criteria matter most for motion, and they sit at different levels.
Scroll table sideways
| Criterion | Level | What it covers | What it means for your site |
|---|---|---|---|
| 2.2.2 Pause, Stop, Hide | A | Moving, blinking and scrolling content and self-updating content that starts by itself and sits next to other content | If motion runs for longer than five seconds, visitors need a way to pause, stop or hide it; for self-updating content this applies regardless of duration |
| 2.3.1 Three Flashes or Below Threshold | A | Flashes and strong flicker | Nothing on the page flashes more than three times per second, unless the flashes stay below the defined thresholds |
| 2.3.3 Animation from Interactions | AAA | Motion triggered by an action, such as scrolling or clicking | Such motion can be switched off unless it is essential to the function or the message |
Criterion 2.2.2 sits at base level A and is therefore part of every AA conformance. For moving, blinking and scrolling content its wording names three conditions: it starts automatically, it lasts more than five seconds, and it is presented in parallel with other content (W3C, WCAG 2.2). If all three apply, visitors need a mechanism to pause, stop or hide it, unless the motion is part of an activity where it is essential. For content that updates itself, such as a news line that changes at fixed intervals, the same duty applies without the exception for short durations; here visitors may alternatively control how often it updates (W3C, Understanding WCAG 2.2). Why five seconds? The W3C explains that this is long enough to get attention but short enough for a user to wait out the distraction (W3C, Understanding WCAG 2.2). According to the W3C's explanations, motion also starts by itself when it is triggered by an indirect interaction, such as scrolling an element into view or hovering over it with the mouse (W3C, Understanding WCAG 2.2). A reveal on scroll therefore falls under the criterion in principle, but is not affected as long as it comes to rest in less than five seconds. For reveals, this makes criterion 2.3.3 more important, as it deals explicitly with motion triggered by interactions.
Reduced motion is Level AAA
Who listens to reduced motion
Phones, tablets and computers have a setting in their accessibility options that lets people ask for less motion. A website reads it through the CSS query prefers-reduced-motion.
According to the specification, the value reduce means that the user prefers an interface that removes or replaces the kinds of motion-based animation that trigger discomfort for people with vestibular motion sensitivity or distraction for people with attention deficits (W3C, Media Queries Level 5). Vestibular refers to the balance organ in the inner ear; according to the W3C, reactions range from dizziness to nausea and headaches (W3C, Understanding WCAG 2.2). Browsers support the query widely, yet only about half of all pages use it in their CSS. The HTTP Archive's Web Almanac analysed for 2025 which user preference queries appear in websites' CSS: prefers-reduced-motion is the most widely used, appearing on 49.99 percent of desktop and 50.55 percent of mobile pages (HTTP Archive Web Almanac 2025). Put the other way round: the query does not appear in the CSS of roughly every second page. If such a page has animations and does not check the setting by script either, they run the same for every visitor, including those who have explicitly asked their device for less motion. A pattern that serves both cases from the start looks like this:
/* Starting point: content is visible, even without a script */
.reveal {
opacity: 1;
transform: none;
}
/* Only with a running script and no wish for less motion */
@media (prefers-reduced-motion: no-preference) {
.js .reveal {
transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.js .reveal:not(.in-view) {
opacity: 0;
transform: translateY(24px);
}
}Two things make this pattern robust. First, the starting state is visible: elements are only hidden before their reveal once a script on the page has set the class js and the visitor has not asked for reduced motion. If the script fails or the setting is active, the content is there at once. Second, the reveal only changes opacity and position. A common mistake is the opposite: content is set to invisible in the stylesheet and waits for a script to bring it out. If the script loads slowly or not at all, the section stays empty and the visitor sees a gap.
Reducing is not banning
Reveals on scroll: duration, delay, curve
A widespread form of motion on business websites is the reveal on scroll: a section comes into view and its elements appear with a short movement. Whether this feels calm or restless depends on three settings and a handful of rules.
Duration
How long the movement runs. Short movements feel decisive, long ones feel sluggish and hold the reader up. The defaults in XICflow range from 550 to 800 milliseconds depending on the movement (XICflow documentation).
Delay
The waiting time before the start. It staggers elements so that cards appear one after another rather than all at once. Kept short, it creates order; set generously, it leaves visitors looking at empty space.
Curve
How the speed changes over time, known as easing. A curve that starts briskly and eases out feels natural, because things in the real world slow down before they come to rest. Uniform motion, by contrast, feels mechanical.
- One consistent type of movement per page instead of effects that change from section to section and look like a sample catalogue.
- Only move elements that open a section or form a sequence: heading, cards, image. Body text appears without its own movement so that it can be read straight away.
- Each reveal runs exactly once. Visitors who scroll back up see the finished section, not the same movement again.
- Short distances instead of long journeys: the "Fade in from below" movement in XICflow shifts an element by 24 pixels (XICflow documentation) and feels like a breath; a flight across the screen, by contrast, feels like an event and is hard on people with motion sensitivity.
- Forms, prices and contact details appear without delay. What a visitor needs to get in touch does not wait for an animation.
Sliders, marquees and counters: the five-second limit
Unlike a reveal, sliders, marquees and counters keep running while the visitor reads. These are exactly the cases criterion 2.2.2 is meant for.
A slider that shows the next slide by itself every few seconds starts automatically, sits next to other content and does not stop after five seconds; it therefore needs a way to pause it (W3C, WCAG 2.2). The same applies to a marquee of services or customer logos that runs endlessly, and to a looping background video. How to add videos with subtitles and without loading ballast is shown in the article on videos on your website. What matters is what the pause looks like. The W3C makes clear that an animation that only stops while focus is on it and starts again afterwards does not count as a mechanism to pause, because it makes the page unusable during the pause (W3C, Understanding WCAG 2.2). The same reasoning applies to a marquee that only stands still under the mouse pointer, and anyone using a finger or a keyboard has no mouse pointer anyway. What works is a visible "Pause" button that can be reached by keyboard and announces its state, or motion that ends by itself within five seconds. If a page has several moving elements, the W3C recommends a single control that pauses all of them at once (W3C, Understanding WCAG 2.2).
Scroll table sideways
| Element | Starts by itself? | What 2.2.2 requires |
|---|---|---|
| Reveal when scrolled into view | Yes, through scrolling | Nothing, as long as it comes to rest within five seconds |
| Slider with automatic advance | included | Pause, stop or hide |
| Slider that only advances on click | not included | No pause needed; keyboard operation of the arrows is required by criterion 2.1.1 |
| Marquee of logos or services | included | Pause, stop or hide |
| Countdown to the end of an offer | Yes, it updates itself | Pause, hide or adjustable frequency, with no exception for short durations |
| Loading indicator while nothing can be used | included | Can count as essential if it shows progress |
| Looping background video | included | Pause, stop or hide |
With sliders it is also worth asking whether they earn their space. Whatever sits on a later slide is seen only by visitors who wait or click on; for the core message of a page, that is an uncertain place. If you want to show customer testimonials or project photos, a slider for browsing works well: the visitor decides when the next slide comes, and 2.2.2 does not apply in the first place. Other points then count, such as arrows that can be reached by keyboard and have a clearly visible focus. Which contrasts buttons and focus outlines need is explained in the article on brand colours with sufficient contrast.
A counter is motion too
Flashes, parallax and large movements
One limit is stricter than all the others: nothing on a page may flash more than three times per second unless the flashes stay below the defined general flash and red flash thresholds (W3C, WCAG 2.2).
This is not about distraction but about health; for people with photosensitive seizure disorders, content that flashes at certain frequencies can trigger a seizure (W3C, Understanding WCAG 2.2). A button to switch it off does not help here, because a seizure could occur faster than most users could operate it. On business websites this mainly concerns embedded videos with strobe effects, blinking notices in the header area and animated graphics that jump back and forth between light and dark images. Less dramatic, but just as noticeable for those affected, are large movements: parallax, where background and foreground move at different speeds while scrolling, zoom effects across the full screen width, sections that rotate or tilt as you scroll. The W3C names parallax explicitly as an example of motion that is often not essential and describes the possible effects on people with balance disorders plainly: nausea, migraine headaches and potentially needing bed rest to recover (W3C, Understanding WCAG 2.2). For effects like these, the rule is: sparing, small and switched off completely when reduced motion is active.
What may stay
Motion that does not cost loading time
Animations also affect the technology underneath. Movements using the CSS properties transform and opacity only change how an element looks, not the layout of the page.
Animating width, height, spacing or position via top and left, on the other hand, forces the browser to recalculate the layout and pushes surrounding content around. The Web Almanac calls such animations non-composited and describes how they contribute to layout shifts. They are common: they appear on 40 percent of mobile pages and 44 percent of desktop pages (HTTP Archive Web Almanac 2025). Then there is weight. A reveal does not need a library: a few lines of CSS and a small observer that reports when an element comes into view are enough. Slider and animation libraries loaded for a handful of effects are part of the ballast described in the article on PageSpeed 100 with static delivery. Just as important: an animation must not delay the largest element on the first screen. A heading or hero image that only appears after a reveal makes the page feel slower and can worsen the measured loading value. The same principle applies to fonts that make text jump as they load; how to avoid that is shown in the article on website fonts.
How to check the motion on your site
- Go through the home page and two important subpages and note every element that moves without you doing anything: sliders, marquees, counters, videos, animated backgrounds.
- Time each of these elements. If it runs for longer than five seconds next to text or controls, look for the button to pause it (W3C, WCAG 2.2).
- Reach and use that button with the keyboard only. Motion that only stops under the mouse pointer is not enough.
- Switch on reduced motion in the accessibility settings of your phone or computer and reload the page. Reveals should disappear or turn into a simple cross-fade, and all content should be visible at once. The developer tools of common browsers can also simulate the setting.
- Switch off JavaScript in the browser and reload the page. If a section is missing, its visibility depends on a script.
- Check embedded videos and animated graphics for fast flicker. Anything that flashes more than three times per second does not belong on the page (W3C, WCAG 2.2).
Reveal animations in XICflow
In XICflow, motion is part of the Flow Design system. Every block can get one of nine reveal movements, with five easing curves from "Flow (soft out)" to "Linear" (XICflow documentation).
The duration can be set from 100 to 2000 milliseconds and the delay from 0 to 1500 milliseconds, each in steps of 50 (XICflow documentation). Every reveal therefore comes to rest well before the five-second limit of 2.2.2. The preview in the editor plays the selected movement straight away, so you judge duration and curve on your own content rather than on numbers. All movements and their defaults are listed in the animations chapter of the documentation. If someone has asked their operating system to reduce motion, the published website switches off every reveal animation and the content is visible at once and in full; the same applies when no JavaScript is running in the browser (XICflow documentation). Only the movements actually used are shipped with the published page. If you set no animation, you get no extra code. The design system's effects such as shadow, glow and glass are plain CSS declarations and, according to the feature description, are used in a GPU-friendly way so that the look does not break loading time. An overview is available under Flow Design in the features, and templates with ready-designed sections are shown in the demos.
For moving elements beyond reveals, everything above applies. The testimonial slider block shows customer testimonials one at a time for browsing (XICflow documentation); it does not advance by itself, so the question of a pause does not arise. The countdown block, by contrast, is a counter that runs down to a date live (XICflow documentation). The documentation does not list a dedicated pause button for it. So before using it, check whether a counter is needed on your page or whether a written date is enough. How a page is built from blocks is shown on how XICflow works.