Reveal
on
scroll
- Content is always in the DOM and the accessibility tree; only its opacity and position animate.
- Keyboard focus landing inside hidden content reveals it immediately.
- prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows content from the first paint.
| Prop | Type | Default | Description |
|---|---|---|---|
from | 'below' | 'above' | 'left' | 'right' | 'none' | 'below' | Where the content comes from. |
distance | number | 24 | Travel in px. |
duration | number | 700 | Milliseconds. |
delay | number | 0 | Milliseconds before starting. |