> 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/features-and-advanced-setup/reveal-animation.md).
# Reveal animation
Sections, cards, and text fade and lift into view the first time they enter the screen. One switch in Theme settings.
One switch covers the whole theme. There is nothing to set on each section.
{% hint style="info" %}
**Theme Editor → Theme settings → Animation → Enable reveal animation**
{% endhint %}
Turn on **Enable reveal animation** and save. Scroll the preview from the top. Each element animates once, the first time it comes into view.
When the setting is off, the animation script is not loaded.
***
### **What animates**
The animation runs on the main page content and on footer sections.
Headings, text, and buttons appear one after another, in reading order. Product cards, grid items, and other repeating blocks appear as a group, row by row. Elements on the same row move together. Each following row starts 0.1s later, up to 12 steps.
The header, the announcement bar, and sidebar navigation stay still. The sidebar has its own fade, with no movement.
Drawers, modals, and overlays keep their own animation: the cart drawer, menus, search, quick view, popups, the store selector, and the mobile filter drawer. The product media gallery is excluded too.
Account pages and the body of a blog post are excluded.
Content that loads later still animates. That includes filtered or sorted collection results, **Load more**, product recommendations, recently viewed products, and tab panels the first time they open.
Customers with **Reduce motion** turned on in their system see the page with the setting off. If the browser cannot run the animation, the theme shows all content immediately.
***
### **Good to know**
**Fade-in animation on load** is a separate setting in the same **Animation** group. It fades the page once, when it opens. Reveal animation runs as the customer scrolls. The two can be on together. With both on, set **Fade-in area** to **Main content** so the header still appears at once.
Anything already on screen when the page opens reveals immediately. The effect shows from the next screen down.
***
### **Customization**
Change the timing
The distance and the delay are CSS variables. Add this in **Theme settings → Custom CSS**:
```css
html.reveal-animation {
--reveal-stagger: 0.06s;
--reveal-offset: 24px;
}
```
The default stagger is 0.1s. The default offset is 16px. A lower stagger is faster. A higher offset moves the element farther.
**Animation duration** in the same settings group is **Basic** or **Smooth**, and it sets the pace of the theme's other motion. See [Animation](/docs/avante-themes/theme-settings/animation.md) for all motion settings.
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/reveal-animation.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.