← All posts

Tutorials

Disable animations, parallax and autoplay — a calmer page

15 May 2026 · by JustZix Team

Parallax that jerks on every scroll. Carousels moving on their own. Video starting on autoplay. For some people that is just an annoyance, for others a real problem (vestibular disorders, fatigue). One rule quiets the motion on a page.

Three sources of motion

• CSS animations and transitions — animation, transition.
• Smooth scroll and parallax — scroll-behavior plus effects computed in JS.
• Auto-playing video — <video autoplay>.

CSS rule — animations and scroll

*, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto !important; }

We use 0.01ms rather than 0s on purpose: the animation still "happens", so page code listening for the animationend event still gets it and does not hang waiting. To the eye, the motion is gone.

JS rule — stop video autoplay

function stopVideos() {
  document.querySelectorAll('video').forEach(v => {
    v.removeAttribute('autoplay');
    if (!v.paused) v.pause();
  });
}
stopVideos();
new MutationObserver(stopVideos)
  .observe(document.body, { childList: true, subtree: true });

Better: respect the system "reduce motion"

Your operating system has a "reduce animations" setting. Pages should read it via prefers-reduced-motion — but many do not. If you turned that option on in your system, this rule simply enforces what the page failed to respect.

Pitfalls

• Some animation carries meaning. A loading spinner collapsed to 0.01 ms disappears from view — usually harmless, but be aware.
• JS-computed parallax. Effects that move a background by script on scroll survive a CSS rule. Then only hiding the background layer helps.
• Autoplay returns after SPA navigation. That is why the MutationObserver keeps watch.

See also

• Examples — the disable-animations snippet
• Tame sticky elements — another rule for a calmer page
• Dark mode — visual comfort

Install JustZix — and browse without the page dancing.