AnimationsNew
Elastic Line
A line catches the cursor, stretches after it and springs back when released. A playful divider for landing pages.
Customize
color
grabColor
Based on Elastic Line (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| isVertical | boolean | false | Vertical line instead of horizontal. |
| grabThreshold | number | 5 | How close the cursor must get to grab the line, in pixels. |
| releaseThreshold | number | 100 | How far the line stretches before it snaps free, in pixels. |
| strokeWidth | number | 1 | Line thickness. |
| transition | ValueAnimationTransition | "{ type: 'spring', stiffness: 300, damping: 5 }" | Spring used when the line snaps back. |
| animateInTransition | ValueAnimationTransition | "{ duration: 0.3, ease: 'easeInOut' }" | How the line draws itself on mount. |
| color | string | "#ffffff" | Colour of the line at rest. |
| grabColor | string | "#ffffff" | Colour of the line while the cursor holds it. |
| className | string | — | Classes for the SVG. The line takes the text color. |
Dependencies
1 required package
npm install motion