Motion
Kyoto can move a lot or not at all. Every animation is a setting: you choose one intensity for the whole store, then refine each kind of animation and each section. Shoppers who ask their device for less motion always get a still store.
All global motion settings are in Theme settings > Motion.
Motion intensity
| Setting | Choices | What it does |
|---|---|---|
| Motion intensity | None, Subtle, Standard, Bold | Decides every motion setting left on Auto. None turns off all animation in the store. The Kyoto preset uses Bold. |
| Motion speed | 50 to 200 %, in steps of 10 | Below 100 % is faster, above 100 % is slower. |
| Easing | Smooth, Soft, Crisp, Spring, Sharp | The character of every movement: how it starts and stops. |
Start with the intensity. If the store feels busy, try Subtle before you change single animations.
Each kind of animation
Every setting in this list has Auto, which follows Motion intensity. Choose a named style to use it everywhere, or None to turn that one kind of animation off.
| Group | Setting | Choices |
|---|---|---|
| Scroll reveal | Section reveal | Fade, Fade up, Fade and scale, Mask, Haze clears, Set down, Gather in, Deal from center, Diagonal, Letterbox, Line draw, Color flood, Pop |
| Animate on mobile | On or off. Off: sections appear without reveal motion on phones. | |
| List stagger delay | 0 to 150 ms. The delay between items in a list (cards, columns). 0 shows them all at once. | |
| Headings and images | Heading reveal | Fade, Fade by line, Mask by line, Rotate by line, Words, Phrases, Characters, Tighten spacing, Focus pull, Rule, Ink, Color block wipe, Outline to fill |
| Image reveal | Fade, Scale, Open from bottom, Open from side, Open from center, Circle, Curtain, Develop color, Sharpen, Blinds, Ink, Aperture, Diagonal | |
| Hover | Preview image on swatch hover | On or off. Pointing at or focusing a color swatch shows that color's image on the card. |
| Button hover effect | Fade, Fill from side, Fill from bottom, Invert, Arrow, Ink, Roll, Magnetic, Pixel wave, Offset shadow, Trace outline, Color wipe and arrow | |
| Link underline motion | None, Grow, Slide, Thicken, Glide | |
| Pages and cart | Page transition | Fade, Fade with image, Slide with image, Dip to paper, Bottom sheet, Circle from click. Works in browsers that support view transitions; other browsers open the next page as usual. Not played in the theme editor. |
| Add to cart feedback | Badge, Fly to cart, Particles, Morph | |
| Drawer and menu motion | Slide, Slide and fade, Fade, Push | |
| Scroll effects | Enable scroll effects | Parallax and other scroll-linked effects, in browsers that support them. Not used when the intensity is None or Subtle. |
| Parallax strength | 0 to 20 % | |
| Shift page color by section | When a section reaches the middle of the screen, the page background changes to that section's colors. | |
| Theme editor | Preview motion in editor | Replays a section's motion in the theme editor when you select or change it. Your online store is not affected. |
Per section
Every section has a Motion group under its settings:
- Section motion: Use theme setting, None, Subtle, Standard or Bold. None keeps this one section completely still, whatever the theme setting is.
- Under Advanced > Show more settings: Section reveal, Heading reveal and Image reveal for this section only, and Custom list stagger with its own List stagger delay.
Some blocks have their own motion choice, for example the Seal, Sticker, Museum label, Size ruler, Media stage and Grid look blocks, and the Large shop name block in the footer. Moving bands (Marquee, Ticker band, Logo list, the announcement bar) have a Scroll speed and a Pause on hover and focus option.
Reduced motion
Kyoto respects the "reduce motion" preference that shoppers can turn on in their operating system (for example Settings > Accessibility > Motion > Reduce Motion on iPhone, or Show animations in Windows).
When a shopper has asked for reduced motion:
- Sections, headings and images appear with a plain fade at most. Nothing slides, zooms, flies or follows the scroll, headings are not split into moving lines or words, and pages do not transition.
- Moving bands such as the marquee stand still and wrap, so every item can be read.
- Slideshows do not advance by themselves.
- Background videos do not start by themselves; the poster image stays and a button lets the shopper play the video.
Page transitions are also skipped in in-app browsers (such as Instagram's) and when a phone's data saver is on.
You can also give every shopper a switch: turn on Show reduce motion button in footer in Theme settings > Accessibility and more. The choice is saved in the shopper's browser.
Moving content that runs longer than a few seconds, such as marquees and autoplaying slideshows, always has a pause control, and it pauses while a pointer rests on it or keyboard focus is inside it.
Good habits
- Keep motion for the moments that matter: the first screen, a product reveal, a story told while scrolling.
- If you use Bold, check the store on a slower phone. If it feels heavy, choose Standard or Subtle.
- Turn off Preview motion in editor if replays distract you while you edit.