Let people stop a looping website animation

For an optional looping animation, give people a way to stop or pause the movement and respect their reduced-motion preference. Often the better first choice is to leave the decoration still. Movement that continues beside reading content can distract without explaining any change in the interface.

Decide whether the loop has a purpose

A loading indicator communicates pending work and must stop when the work ends. A decorative loop does not establish progress. Do not use the same looping illustration for both and assume its meaning is obvious.

W3C's Pause, Stop, Hide criterion describes obligations for certain moving or updating content. This example is a practical control for optional decoration; it is not a complete evaluation of the criterion or of your page's accessibility.

Make the still state the baseline

The following original example starts still. The user can choose to start the optional animation.

<div id="decoration" class="decoration" aria-hidden="true"></div>
<button id="motion-toggle" type="button" aria-pressed="false">
  Animate decoration
</button>

Keep the button's label stable: aria-pressed describes whether that choice is active. The decoration is hidden from assistive technology because it carries no information; do not apply that treatment to an image that explains a task.

Add the animation only when selected

.decoration { width: 48px; height: 48px; background: currentColor; }
.decoration.is-moving { animation: drift 2s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .decoration.is-moving { animation: none; }
}

The small travel distance is illustrative. Do not add a loop to a real page merely because this code exists. First check whether the still version already communicates everything needed.

Wire the choice to the actual state

const decoration = document.querySelector('#decoration');
const toggle = document.querySelector('#motion-toggle');
const preference = matchMedia('(prefers-reduced-motion: reduce)');
function setMotion(enabled) {
  const active = enabled && !preference.matches;
  decoration.classList.toggle('is-moving', active);
  toggle.setAttribute('aria-pressed', String(active));
}
function onClick() {
  setMotion(toggle.getAttribute('aria-pressed') !== 'true');
}
function onPreferenceChange() {
  if (preference.matches) setMotion(false);
}
toggle.addEventListener('click', onClick);
preference.addEventListener('change', onPreferenceChange);
function cleanup() {
  toggle.removeEventListener('click', onClick);
  preference.removeEventListener('change', onPreferenceChange);
  setMotion(false);
}

This script assumes the two elements exist and the page has one instance. Call cleanup when removing this component in an app; the example defines the function but cannot know your framework's lifecycle. Explain beside the control that reduced-motion settings take precedence, so an ignored request to animate is understandable.

Check the choice throughout the interaction

Activate the button with the keyboard, activate it again to stop, and change the device preference while the animation is running. The pressed state should describe the actual movement. Removing the component should leave no listener acting on it later.

If you want to preserve a choice between visits, decide how it interacts with a changed device preference and the rest of the site. This example stores nothing. A stopped illustration should leave the surrounding content readable; a pause control is not an excuse to make essential text dependent on movement.