АнимацииНовое
Резиновая линия
Линия цепляется за курсор, тянется за ним и пружинит обратно, когда её отпускают. Живой разделитель для лендинга.
Настройки
color
grabColor
Основано на Elastic Line (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| isVertical | boolean | false | Вертикальная линия вместо горизонтальной. |
| grabThreshold | number | 5 | На каком расстоянии от линии курсор её цепляет, в пикселях. |
| releaseThreshold | number | 100 | Как далеко можно оттянуть линию, пока она не сорвётся, в пикселях. |
| strokeWidth | number | 1 | Толщина линии. |
| transition | ValueAnimationTransition | "{ type: 'spring', stiffness: 300, damping: 5 }" | Пружина, с которой линия возвращается. |
| animateInTransition | ValueAnimationTransition | "{ duration: 0.3, ease: 'easeInOut' }" | Как линия прорисовывается при появлении. |
| color | string | "#ffffff" | Цвет линии в покое. |
| grabColor | string | "#ffffff" | Цвет линии, пока её держит курсор. |
| className | string | — | Классы для SVG. Цвет линии берётся из color текста. |
Зависимости
Пакетов: 1
npm install motion