АнимацииНовое
Проявление по очереди
Когда блок попадает в экран, его части проявляются из размытия одна за другой. Подходит для таймлайнов, списков шагов и заголовков.
Настройки
color
accentColor
highlightColor
Основано на Timeline Animation (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
14 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Что проявлять. |
| animationNum | number | — | Номер в очереди. Элемент N появляется через N шагов после старта. |
| timelineRef | RefObject<HTMLElement | null> | — | Общий блок. Когда он попадает в экран, вся цепочка запускается. |
| as | keyof HTMLElementTagNameMap | "div" | HTML-тег, которым станет элемент. |
| once | boolean | true | Играть только в первый раз. Иначе прячется и снова проявляется при каждом заходе в экран. |
| delayStep | number | 0.25 | Пауза между соседними элементами в секундах. |
| duration | number | 0.5 | Сколько секунд проявляется один элемент. |
| blur | number | 20 | Размытие скрытого элемента в пикселях. |
| offsetY | number | 0 | Сдвиг скрытого элемента по вертикали в пикселях. |
| customVariants | Variants | — | Свои состояния hidden и visible вместо размытия. |
| color | string | "#ffffff" | Основной цвет. Элементы внутри берут его через var(--timeline-c1). |
| accentColor | string | "#a3a3a3" | Второй цвет. Элементы внутри берут его через var(--timeline-c2). |
| highlightColor | string | "#ffffff" | Светлый цвет для бликов. Элементы внутри берут его через var(--timeline-c3). |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 1
npm install motion