# XWUIAnimationScroll

Plays a preset on its children the first time the pack scrolls into view, the port
of Ant Motion's ScrollAnim `OverPack`. It is an `IntersectionObserver` around a preset: cheap,
one-shot by default, and free of scroll listeners.

## When to use

- Section entrances down a long marketing page.
- Any "animate when visible" requirement, in preference to a scroll handler.
- Content that should re-animate every time it comes back into view: set `replay`.

Note the observer needs a real intersection to fire. Inside a hidden container - a background
tab, a collapsed panel, an off-screen pane - nothing intersects and nothing plays until the
container is shown.

## Configuration surface

`data.content` is the content to reveal: a string (set as text) or an `HTMLElement`.

`config`:

- `preset` - the motion, default `bottom`. Same preset vocabulary as `XWUIAnimationAnimate`.
- `threshold` - the `IntersectionObserver` threshold, default `0.2` (one fifth visible).
- `replay` - re-play on every entry instead of once.
- `duration` (default `450`ms), `delay` (default `0`), `easing`
  (default `cubic-bezier(0.215, 0.61, 0.355, 1)`), `className`.

### Family behaviour

Every component in `power/animation` is CSS plus the Web Animations API - no
`rc-*` React packages and no animation library. Two consequences worth knowing
before you design with them:

- `prefers-reduced-motion: reduce` is honoured, not decorated: presets jump
  straight to their end state, banner autoplay never starts, per-character text
  motion is skipped, and scroll-linked motion freezes. The content is always
  fully readable.
- A `content` string is written with `textContent`, never as HTML. Pass an
  `HTMLElement` when you need markup, and build that element yourself so the
  escaping decision stays where the data is.

## Basic Usage

The pack animates the first time it scrolls into view; `threshold` decides how much of it must be visible.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A one-shot entrance triggered by scrolling into view.
```

## Showcase

The same scroll-triggered pack under its own heading, mounted into a dedicated child host.

```example
file: examples/Showcase.ts
html: examples/Showcase.html
title: Showcase
description: The scroll-triggered entrance replayed in an isolated host.
```

```api
```