> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/store-wide-design/animations.md).

# Animations and motion

How motion works in Stratum, from scroll reveals and hover zoom to page fades, the page loader and image loading.

Stratum uses motion to guide the eye, never to get in the way. Every effect is short, smooth and easy to switch off. You find the switches in **Theme settings › Animations**.

| Setting                       | What it does                                                                          | Default |
| ----------------------------- | ------------------------------------------------------------------------------------- | ------- |
| **Reveal sections on scroll** | Headings, text, images and product cards animate into view as shoppers scroll to them | On      |
| **Zoom media on hover**       | Images and cards zoom in slightly when the pointer is over them                       | On      |
| **Fade between pages**        | Pages cross-fade when shoppers follow a link; the header stays in place               | On      |
| **Show a page loader**        | Covers each page with your logo and a small loading bar until it is ready             | Off     |

{% hint style="info" %}
Animations are always turned off for visitors who ask their device to reduce motion, and while you edit in the theme editor. You never have to choose between a lively store and an accessible one.
{% endhint %}

## Reveal on scroll

With **Reveal sections on scroll** on, content appears as it scrolls into view. Everything is automatic: you don't have to set anything per section.

![Scroll reveal on the home page](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-99f43cf917d0f078e76aa7356de921461b1b5898%2Fscroll-reveal.gif?alt=media)

{% file src="/files/rjgyGEBZCB0bwHb0add7" %}
Watch the video (MP4)
{% endfile %}

### What animates

| Content                                           | Animation                                                                                                                            |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Headings** (main headings and section headings) | Reveal by themselves, word by word: each word rises out of an invisible mask with a slight tilt that straightens, one after another. |
| **Text, buttons and quotes**                      | Fade up gently.                                                                                                                      |
| **Images**                                        | Uncover from the bottom like a curtain, while the image settles from a slight zoom.                                                  |
| **Product and article cards in grids**            | Fade up, row by row. Cards that arrive together reveal one after another.                                                            |

Content that is already on screen when the page opens animates in straight away. Content further down waits until shoppers scroll to it.

### What doesn't animate

To keep shopping fast and calm, some things never wait for a reveal:

* The header, footer, announcement bar, menus and dialogs (cart drawer, quick view, filters).
* Anything inside product cards, links, buttons and forms (the card animates as one piece instead).
* The product page's buy box, the cart page and the collection page's filters and toolbar. On those pages only headings and the product grid animate, so prices and buttons show instantly.
* Sections with their own motion: Marquee, focus carousels, hover lists and expanding panels.
* The main above-the-fold image (the one set to load first), so the page's loading speed isn't affected.

### Opting content out (Custom Liquid)

If you add your own HTML with a **Custom Liquid** section or block and don't want part of it to animate, add the attribute `data-no-reveal` to it. Everything inside that element stays still:

```html
<div data-no-reveal>
  <h2>This heading appears instantly</h2>
</div>
```

### Safety net

Content waiting for its reveal is hidden until the theme's script runs. If that script is blocked or fails to load within 3 seconds, Stratum shows all content immediately instead of leaving it hidden.

## Hover zoom

With **Zoom media on hover** on, image tiles that link somewhere (collection cards, gallery images, image links) grow slightly and lift with a soft shadow when the pointer is over them. Turn it off for a flatter, quieter look.

The same setting controls the gentle zoom of product card images. The second image that fades in on product cards is separate: it follows **Theme settings › Product cards › Show second image on hover**. See [Product cards](/products/product-cards.md).

On touch screens there is no hover, so nothing zooms.

## Fade between pages

With **Fade between pages** on, following a link cross-fades the old page into the new one while the header stays in place, which makes the store feel like an app.

It uses the browser's **View Transitions** feature. Browsers that don't support it simply load the next page as usual, so nothing breaks.

## Page loader

**Show a page loader** is off by default. When on:

1. Each page opens behind a cover in your background color, with your **Logo** (or your store name if you have no logo) and a small loading bar. The bar only appears if loading takes longer than 0.3 seconds.
2. As soon as the page is ready, the cover fades out over about 0.7 seconds while the logo lifts away.
3. Following a link to another page of your store fades the cover back in quickly (about 0.3 seconds) before the next page loads, so pages fade into one another.
4. Scroll reveals wait until the cover has lifted, so the opening animation plays where shoppers can see it.

Links that open the cart drawer, quick view and other windows are not affected.

{% hint style="warning" %}
**The speed trade-off.** With the page loader on, your content appears a moment later. Shoppers don't wait longer for the page itself, but speed tools such as Lighthouse and Shopify's speed report measure when content first appears, so scores can drop. Turn it on if the branded moment matters more to you than the score; leave it off if speed scores matter to you, for example for search ranking.
{% endhint %}

The page loader never shows in the theme editor, never shows without JavaScript, never shows for visitors who reduce motion, and always lifts within 4 seconds, whatever happens. Using the browser's back button never leaves it stuck.

## Image loading

Images in Stratum always reserve their space before they load, so nothing on the page jumps around while they arrive.

While an image loads, its frame shows a **small loading bar** in the middle: a short, thin track with a segment sliding across. When the image arrives, it fades in and settles gently into place. You don't need to switch anything on.

* The bar waits 150 milliseconds before appearing, so images that load instantly (for example from the browser's cache) never flash it.
* The main above-the-fold image is never hidden, so it shows as fast as possible.
* The full-screen product image viewer uses the same bar while a large image loads.

## Reduced motion

Many people turn on **Reduce motion** in their device settings (iPhone, Android, Mac and Windows all have it), for comfort or because motion makes them feel unwell. For these visitors Stratum:

* turns off scroll reveals, hover arrow animations, page fades and the page loader;
* shows the image loading bar without sliding;
* keeps every feature working; only the movement goes.

Nothing to set: it happens automatically.

## What's off in the theme editor

While you edit, reveals, the page loader, page fades and autoplay (slideshows, tabs, announcement bar) are paused, so content is always visible where you click. Use **Preview** or the live store to see the full motion.

## Related pages

* [Logo, colors, fonts and buttons](/store-wide-design/brand.md) (button hover effect)
* [Speed and performance](/help/performance.md)
* [Accessibility](/help/accessibility.md)