> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/theme-settings/animation.md).
# Animation
{% hint style="info" %}
**Theme Editor → Theme settings → Animation**
{% endhint %}
### Motion that builds brand perception
Animations are one of the subtlest signals of quality in an online store. A well-timed fade-in, a smooth cart drawer opening, an underline that appears with purpose — these micro-interactions collectively tell customers they're shopping somewhere that cares about design.
***
### Animation duration — set the tempo
This is the global tempo dial. Every animation in the theme — drawers, buttons, image reveals — respects this setting.
* **Basic** — fast, efficient. Keeps customers moving. Best for high-SKU stores and fast-paced shopping experiences.
* **Smooth** — slower, more considered. Suits luxury, editorial, and beauty brands where pace communicates care.
{% hint style="success" icon="lightbulb" %}
**Enable drawer animations** — adds open/close transitions to drawers (cart, menu, etc.)
**Enable anchor links smooth scroll** — controls smooth scrolling when clicking anchor links
{% endhint %}
***
### Image reveal — how products arrive on screen
Lazy loading controls the impression each image makes as it enters the viewport. This is about perception, not just performance.
* **Pixelate / Blur-up** — low-res placeholder sharpens into the full image. Feels polished and intentional.
* **Fade-in, scale-out** — image fades in and subtly scales up. The most expressive option; gives a cinematic quality to product grids.
***
### Page fade-in & button zoom
**Fade-in animation on load** creates a smooth entrance for page content.
Set the **Fade-in area** to **Main content** (not Entire page) for the best result: the header loads instantly while the hero fades in — a subtle effect that reads as deliberate and premium.
**Enable zoom** on buttons adds a micro-interaction on hover — a small touch that makes the storefront feel more responsive.
***
### Preload links on hover
When a customer moves their cursor toward a link, Avante begins loading the next page in the background. By the time they click, the page is already partly loaded — navigation feels instant even on average connections. High-impact, zero cost.
{% hint style="warning" %}
Disable **Preload links on hover** while working in the Theme Editor — it can cause the editor to lag. Re-enable it before publishing.
{% endhint %}
{% hint style="success" icon="sparkles" %}
**Pro tip:** **Enable animated underline** and **Enable rolling hover for menu items** add micro-interactions to navigation links at no performance cost. Together they make the header feel noticeably more premium — especially on desktop.
{% endhint %}
---
# 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://staylime.com/docs/avante-themes/theme-settings/animation.md?ask=&goal=
```
`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.