> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/animation.md).

# Animation

Animation settings control the motion in your store: how content appears as customers scroll, how images react to hover, and whether a loading effect is shown while a page is being prepared. Used lightly, motion guides attention down the page and makes the store feel responsive. This group also holds image lazy loading, which is a performance setting rather than a visual one, so this is where you balance how lively the store feels against how fast it loads.

### Where to find these settings <a href="#where-to-find-these-settings" id="where-to-find-these-settings"></a>

Go to **Online Store > Themes > Customize > Theme settings > Animation**.

<figure><img src="/files/W91fn546EXvvsSutxcFM" alt=""><figcaption></figcaption></figure>

### Settings <a href="#settings" id="settings"></a>

| Setting                       | Description                                                                                                                                                                                                                                                                       |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Scroll animation**          | Whether cards animate into view as the customer scrolls to them. This applies to the cards throughout the store (product, banner, collection, blog, and similar), which fade and ease in as they reach the screen. Three options: **disable**, **all screens**, **desktop only**. |
| **Enable image lazy loading** | Improves page speed by delaying image loading until an image is about to appear on screen.                                                                                                                                                                                        |
| **Hover effect**              | The effect applied when a customer hovers. Two options: **Zoom** and **Fade in**.                                                                                                                                                                                                 |
| **Enable effect**             | Shows a loading animation while page content is still loading, so the page does not look frozen.                                                                                                                                                                                  |

### What customers see <a href="#what-customers-see" id="what-customers-see"></a>

With scroll animation on, sections and images ease into view as the customer scrolls instead of being there all at once, which makes long pages feel paced rather than static. Setting it to **desktop only** keeps that effect on large screens while leaving mobile plain, which is the safer choice on slower phones. Lazy loading is invisible to customers but shortens the initial load because images further down the page are only fetched when they are needed. The loading effect fills the gap between clicking and the page being ready, so customers get feedback instead of a blank screen.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Product cards](/velare/customize-your-pages/product-cards.md): card settings such as the secondary image on hover and video on hover
* [Layout](/velare/set-up-your-store/layout.md): global page width and corner radius
* [Colors](/velare/set-up-your-store/colors.md): hover colors for buttons, set per color scheme
* [Vélare Intro](/velare/readme.md): overview of the theme and where to start


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/animation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.