# Motion

Motion settings in **Theme settings > Motion** control animations, button motion, image fade-in, and page and header transitions.

## How to change theme motion

{% stepper %}
{% step %}

#### Turn animations on or off

* Open **Theme settings > Motion**.
* Use **Enable animations** as the master switch for the settings below it.
  {% endstep %}

{% step %}

#### Set transitions

* Set **Page transition** to **None**, **Fade**, **Zoom**, **Slide down**, or **Slide right**.
* Set **Header transition** to **None**, **Slide down**, or **Slide right**.
  {% endstep %}

{% step %}

#### Set button and image motion

* Toggle **Enable button motion** for button feedback.
* Toggle **Enable image fade** if images should fade in using a color from the image center.
  {% endstep %}

{% step %}

#### Preview templates

* Check home, collection, and product pages after changes.
  {% endstep %}
  {% endstepper %}

### Notes on motion

* When **Enable animations** is off, related controls are hidden in the theme editor.
* **Page transition** defaults to **Fade**; **Header transition** defaults to **None**.

## Motion settings

| Setting              | What it controls                                                                    |
| -------------------- | ----------------------------------------------------------------------------------- |
| Enable animations    | Master toggle for theme motion. Default on.                                         |
| Enable button motion | Motion on buttons when animations are on. Default on.                               |
| Enable image fade    | Fades images in using the dominant color from the center. Default off.              |
| Page transition      | **None**, **Fade**, **Zoom**, **Slide down**, or **Slide right**. Default **Fade**. |
| Header transition    | **None**, **Slide down**, or **Slide right**. Default **None**.                     |