> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/navigation-and-interaction/reveal.md).

# Reveal

The Reveal component animates its child content in response to scrolling. Choose a fade, slide, zoom, light-speed, or rotation effect, then control when and how the animation plays.

{% embed url="<https://www.youtube.com/watch?v=7zZiIZtXf9c>" %}

### How to Use Reveal

You’ll find Reveal under **Animation** in the Components list.

1. Drag **Reveal** onto the page.
2. Place the component you want to animate inside it.
3. Choose Smooth or Scrub mode.
4. Select the animation, direction, and trigger points.
5. Set timing values and preview the page while scrolling.

### Component Settings

#### Reveal

**Mode**

* **Smooth** — Plays the animation after its trigger is reached. This is the default.
* **Scrub** — Links animation progress to the page’s scroll position between Start and End.

**Animation** offers Fade, Slide, Zoom, Light Speed, or Rotate. Fade is the default.

**Direction** can be Up, Down, Left, or Right and defaults to Up.

**Distance** sets how far the content travels and defaults to `200px`. Use any valid CSS length.

**Degrees** appears for Rotate and defaults to 90°.

**Trigger**

* **Play** — When the animation runs. **Once on Enter** plays it the first time the content enters the viewport and never again; **Always on Enter** replays it each time the content scrolls into view from below; **Enter and Exit** (the default) also plays a matching exit animation when the content leaves, and replays on re-entry in either direction.
* **Start** / **End** — Where the animation is triggered, measured against the top edge of the Reveal content: **Entering Screen** as it reaches the bottom of the viewport, **Middle of Screen** as it reaches the centre, and **Exiting Screen** as it reaches the top. Start defaults to Entering Screen; End defaults to Exiting Screen. In Scrub mode the animation progresses between the Start and End positions.

**Timing**

* **Easing** — Offers Linear, Power0–Power4, Sine, Circ, Expo, Back, Elastic, or Bounce. The default is Power1.
* **Duration** — Available in Smooth mode and defaults to 500 milliseconds.
* **Delay** — Available in Smooth mode and defaults to 0 milliseconds.

**Markers** displays the Start and End trigger positions for debugging. It is off by default; disable it before publishing.

#### Flexbox and Grid

Set the Reveal component to act as a Grid Item or Flex Item when its parent layout needs explicit span, order, alignment, or sizing controls.

### Accessibility

Keep movement subtle and never make the animation the only way to discover essential content. Check that the page remains understandable when the visitor prefers reduced motion.

### Troubleshooting

#### The page scrolls horizontally on iPhone

A Reveal animation can temporarily extend beyond the viewport. Select the parent Container and set **Layout → Overflow** to Hidden so the animated content is clipped to the section.

#### Content inside Reveal is not centred

Reveal is a block-level wrapper, so an Auto width fills the available width rather than shrinking to fit its content, and a fixed-width child sits at the wrapper’s left edge. Enable the child’s Spacing and set its left and right margins to Auto, or give the Reveal itself a Theme Spacing width matching the content plus Auto left and right margins.

### Related Components

* [3D Transform](/elements-docs/using-elements/components/styling-and-effects/3d-transform.md) — Creates hover and pointer-driven depth effects.
* [Container](/elements-docs/using-elements/components/layout-components/container.md) — Wraps and clips Reveal animations.

| Common Control                                                                                                     | Description                                                             |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| [Link](/elements-docs/using-elements/components/common-controls/link.md)                                           | Link to a page, resource, anchor, email address, or website.            |
| [Layout](/elements-docs/using-elements/components/common-controls/layout.md)                                       | Control positioning, stacking, visibility, overflow, and isolation.     |
| [Sizing](/elements-docs/using-elements/components/common-controls/sizing.md)                                       | Set width, height, and responsive size constraints.                     |
| [Spacing](/elements-docs/using-elements/components/common-controls/spacing.md)                                     | Add responsive margin and padding.                                      |
| [Typography & Text Styles](/elements-docs/using-elements/components/common-controls/typography-and-text-styles.md) | Control fonts, text spacing, decoration, colour, and semantic wrappers. |
| [Backgrounds](/elements-docs/using-elements/components/common-controls/backgrounds.md)                             | Apply colour, image, gradient, SVG, video, and hover backgrounds.       |
| [Transitions](/elements-docs/using-elements/components/common-controls/transitions.md)                             | Choose what animates and set its timing curve, duration, and delay.     |
| [Effects](/elements-docs/using-elements/components/common-controls/effects.md)                                     | Apply shadows, opacity, and hover effects.                              |
| [Filters](/elements-docs/using-elements/components/common-controls/filters.md)                                     | Apply blur, brightness, saturation, shadow, and backdrop effects.       |
| [Transforms](/elements-docs/using-elements/components/common-controls/transforms.md)                               | Scale, rotate, move, and skew components.                               |
| [Borders](/elements-docs/using-elements/components/common-controls/borders.md)                                     | Set border style, colour, opacity, width, radius, and hover states.     |
| [Advanced](/elements-docs/using-elements/components/common-controls/advanced.md)                                   | Add CSS classes and IDs, or change supported HTML tags.                 |


---

# 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://docs.realmacsoftware.com/elements-docs/using-elements/components/navigation-and-interaction/reveal.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.