What do visitors who turn on reduced motion see?
Some people turn on "reduce motion" in their phone or computer settings, because movement on screen makes them dizzy or distracts them. TeleportHQ sites respect that setting automatically. Motion animations show the content in its place without moving, rows that slide by themselves stand still and can be swiped, and the page changes instantly instead of playing a page transition. For each Scroll Scene and Scroll Video, you choose what these visitors see in its Reduced motion setting.
What changes, kind by kind
| What you added | What visitors with reduced motion see |
|---|---|
| Add motion, the Motion element, Animate all pages | The content in its final place, fully visible, without moving. This covers entrances, hover and tap effects, loops such as Pulse or Float, and scroll-linked (parallax) movement. |
| A row that slides by itself | The row stands still. Visitors swipe it sideways to reach every item. |
| Page transitions | The next page appears at once, with no transition and no picture flying across. |
| Scroll Scene | What you choose in its Reduced motion setting (see below). |
| Scroll Video | The poster picture, or the clip's last frame, as you choose in its Reduced motion setting. |
Scroll Scenes: three choices
A TeleportHQ Scroll Scene has a Reduced motion setting in the Scroll Scene section of the right panel:
- Keep the story (the choice for new scenes): the story still plays as the visitor scrolls. Chapters still come and go and texts still appear in turn, but nothing slides, zooms, turns or wipes. Fades still follow the scroll, numbers that count up show their final figure, and a wide row that would travel sideways becomes a row the visitor can swipe.
- Show final state: everything shows fully arrived. Scenes made before this setting existed behave this way until you change them.
- Stay start state: the scene holds its opening frame.
Chapter snap never moves these visitors, whatever you choose. See What is a scroll story (Scroll Scene)?
To change it:
- Select the Scroll Scene. For example, click a picture inside it, then click the small arrow at the right end of the Scroll Scene section's title in the right panel: it selects the scene that element lives in.
- In the Scroll Scene section, find Reduced motion.
- Choose Keep the story, Show final state or Stay start state.
Scroll Videos: poster or last frame
A TeleportHQ Scroll Video has its own Reduced motion setting in the Scroll Video section: Show the poster image (the default) or Show the final frame. See How to add a video that plays as visitors scroll (Scroll Video).
What TeleportHQ doesn't change
These keep playing as usual for visitors with reduced motion:
- Transitions set in the Transition section, such as a smooth hover color.
- Animations still made with the old Animation (legacy) section. Switching them to Motion makes them respect the setting. See What happened to the Animation section, and how do I switch to Motion?
- Lottie animations.
- Animations you add with your own code. If you write your own CSS, you can add a
prefers-reduced-motionrule yourself. See How to add CSS keyframes or animation libraries with custom code.
See your site the way these visitors do
- Turn on reduce motion on your own computer:
- Mac: System Settings → Accessibility → Display → Reduce motion.
- Windows: Settings → Accessibility → Visual effects → turn off Animation effects.
- iPhone or iPad: Settings → Accessibility → Motion → Reduce Motion.
- Android: in Settings → Accessibility, turn on Remove animations. The name can differ by phone.
- Open Preview and scroll through your site. See How to preview your site before publishing.
- Turn the setting off again when you're done.
While the setting is on, the TeleportHQ canvas shows Motion and Scroll Scenes the way these visitors see them too.