Split Text
Делит строку на буквы или слова, и они по очереди встают на место, когда текст появляется на экране.
зависимости 0файлы tsx + cssпараметры 10react 18+
X 0000 Y 0000
Пульт10 параметров
01text
Текст для анимации.
02splitBy
Анимировать каждую букву или каждое слово.
03stagger
ms
Задержка между частями.
04duration
ms
Длительность одной части.
05fromY
em
Начальный сдвиг по вертикали.
06fromBlur
px
Начальное размытие.
07fromScale
Начальный масштаб.
08fromRotate
deg
Начальный поворот.
09ease
Кривая сглаживания.
10staggerFrom
Порядок появления частей.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
text | string | "Каждая буква — в свой черёд." | Текст для анимации. |
splitBy | 'chars' | 'words' | "chars" | Анимировать каждую букву или каждое слово. |
stagger | number | 35 | Задержка между частями. |
duration | number | 900 | Длительность одной части. |
fromY | number | 0.6 | Начальный сдвиг по вертикали. |
fromBlur | number | 8 | Начальное размытие. |
fromScale | number | 1 | Начальный масштаб. |
fromRotate | number | 0 | Начальный поворот. |
ease | 'smooth' | 'snappy' | 'bounce' | 'linear' | "smooth" | Кривая сглаживания. |
staggerFrom | 'start' | 'end' | 'center' | 'random' | "start" | Порядок появления частей. |
as | ElementType | 'p' | Какой элемент рендерить. |
threshold | number | 0.2 | Какая доля элемента должна быть видна для старта. |
once | boolean | true | Анимировать только при первом появлении. |
onComplete | () => void | — | Вызывается, когда встала последняя часть. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |