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

# Animations

Animations add subtle motion to your pages so content feels more alive. Used well, they guide attention and improve perceived quality without slowing people down.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FAg2jBPcqm1gUKUP9YQRL%2FCapture%20d'%C3%A9cran%202026-07-30%20163706.png?alt=media&amp;token=b6df568a-e76b-4e7d-ab8d-6de16ff6cda6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### How to set it up

* Go to **Online Store** > **Themes** > **Customize**.
* Open **Theme settings** > **Animations**.
* Make your changes, preview live, then click **Save**.
  {% endhint %}

### Settings

* **Enable smooth momentum scroll**: Activate the momentum scrolling effect.
* **Reveal sections on scroll**: Animates sections as they come into view while scrolling. Helps draw attention to content as visitors move down the page.
* **Animation style for sections**: Chooses how sections appear (Fade In, Fade Up or Fade Down). Keeps your brand’s motion style consistent across pages.
* **Animation style for content in sections**: Sets the default animation style (Fade In, Fade Up, Fade Down or Scale Up) for content in sections (e.g. Titles, Texts, etc.).
* **Animation style for cards**: Sets the default animation (Fade In, Fade Up, Slide In or Horizontal Slide In) style for cards (e.g. Product cards, Collection cards, etc.).
* **Animation style for media**: Sets the default animation style for media (e.g. Product images, Collection images, etc.).
* **Animation speed**: Sets how fast animations play (Slow, Medium, Fast, Furious). Faster feels snappier; slower feels more relaxed.

#### **Page transitions**

* **Page transition style**: Adds an animated transition between pages using the browser's native View Transitions API. When a visitor navigates between pages, the old page smoothly transitions into the new one instead of a hard reload.
  * **None** — No transition (default browser behavior).
  * **Fade** — Smooth cross-fade between pages.
  * **Fade + Blur** — Cross-fade with a blur effect during the transition.

When a visitor clicks a product card on a collection page, the product image morphs seamlessly from the card into the product page gallery. The full-size image is preloaded on hover so the transition feels instant.

Page transitions respect the visitor's **prefers-reduced-motion** system setting — animations are automatically disabled for users who have reduced motion enabled in their operating system.

#### Zoom behavior

* Max zoom increase: Sets the maximum zoom increase for "zoom-in" image animation avalaible in different sections like slideshows, image banners, image with text, and more.

***

### **Tips**

Keep animations subtle and consistent. Medium or Fast usually feels best; avoid extremes that distract or feel laggy on mobile. Preview key pages and scroll naturally to check pacing. For page transitions, Fade is a safe default — Fade + Blur adds a more dramatic effect but can feel heavy on lower-end devices.