Reduced motion

What visitors who ask for reduced motion see on a Libretto page, recipe by recipe, how to check it in the preview, and how to stop transitions too.

Updated10/26/2026

Some visitors set their device to reduce motion, because movement on screen makes them dizzy or distracts them. Libretto reads that setting (prefers-reduced-motion: reduce) on every page. The rule it follows: remove the movement, keep the outcome. A visitor with reduced motion reads every word and sees every element where it ends up; nothing stays hidden. This page lists what each kind of motion does, and the one thing you have to do yourself.

Before you start #

You need the Content editor or Super admin role to change scenes and styles.
You do not need to turn anything on: every recipe, reveal and effect already has its reduced-motion version.

Check a page with reduced motion #

Open the page in the editor.
In the Motion bar under the preview, tick Reduce motion. The preview now behaves as it does for a visitor with the setting on.
Scroll the preview through the page. Check that every text is readable and every element is visible.
Untick Reduce motion when you are done.

To check the published site, turn on the setting on your own device: on macOS, System Settings › Accessibility › Display › Reduce motion; on iOS, Settings › Accessibility › Motion › Reduce Motion; on Windows, Settings › Accessibility › Visual effects › Animation effects off.

What each recipe does #

Recipe	With reduced motion
Intro on the first touch	The page is not held still and does not wait for a first input. The element shows its end state at once.
Build up on the first touch	All the pieces show at once.
Dock into the header	The element does not travel. Once the page has scrolled past the start, it is in its place in the header; above that point, it is back where the page puts it.
Menus appear	Unchanged: the element still gets its hidden and shown states at the same points. How it hides and shows is your styles (see Transitions below).
Reveal on scroll	Does not play. The element is visible in its place.
Parallax	Does not play. The element stays in its place.
Read along	Does not play. Every word is at full strength.
Payoff pushed away	The payoff appears at once past its point, without fading, and is still pushed away by what comes from below.
Hide after scrolling	Unchanged: the element still hides past the point.
Image sequence on scroll	The sequence shows its last frame, still, and loads only that frame.
A word per section	The word changes with the section, without typing and erasing.
Invert over photos	Unchanged: it is a change of look, not a movement.
Snap to panels	The page still settles on a panel, but jumps there instead of gliding.

Reveals (Motion › Reveal) do not play at all: the element is shown as it is.

Choose what a hand-built scene does #

A scene you edited under Advanced follows the setting With reduced motion:

Select the element and open Motion. Open the scene's card, then Advanced.
In With reduced motion, choose one:
- Do not play (show the end state): the default. The animation is dropped and the element is shown as it ends.
- Fade only: keeps the change of opacity and drops every move, scale, rotation and blur.
- Jump to the end: the element takes its last keyframe at once. On a scroll scene, it jumps when the scroll reaches the start of the range.

Moving an element into a slot (as Dock into the header does) always jumps, whatever you choose, because the element has to end up in the slot.

Stop transitions too #

Transitions you set in Styles › Transitions (hover, focus, a state change) are not stopped for you. The theme cuts its own CSS animations and its own transition timings, but not the ones you wrote. To stop an element's transitions for visitors with reduced motion:

Select the element and open the Styles tab.
In the scope bar, open State, then under Other choose Reduced motion.
In Transitions, choose No transitions here. The section then says "No transitions in this scope."

The element now changes state at once for those visitors and keeps its transitions for everyone else.

What you see #

With Reduce motion ticked, the preview shows the page as a visitor with the setting sees it: no intro waiting for a touch, no reveal, image sequences on their last frame.
With JavaScript off ticked, the preview shows the server's markup. Every scene's final state is already in it, so this view and the reduced-motion view should look alike, except for the scroll-tied states (docked wordmark, menus, inverted header).
Built-in components follow the setting too: a Marquee stops; kinetic text shows its final text; a carousel hides its play toggle and scrolls to a slide at once; the header's scroll-driven look jumps to its end look once the stretch is passed instead of following the scroll; the theme's intro curtain does not play.

Pitfalls #

Pitfall: "The element stays invisible when the animation ends." on a scene's card means that, with reduced motion, the element stays invisible too, because reduced motion shows the end state. Make the last keyframe visible.

Fade only on a scene that only moves an element (no opacity change) plays nothing: that is what you want, but check the element is where you expect it.
Do not use motion to carry meaning (a word that appears only while it types, a step shown only mid-scroll). With reduced motion that moment does not exist.
Your own CSS keyframe animations, written in a node's styles, are cut short by the theme's reduced-motion rule: each one runs once, in an instant, so the element shows the animation's end state if its fill mode keeps it. An animation-delay still waits, and your own transitions are not shortened.

Something wrong on this page? Write to docs@librettocms.com.