AnimationsNew
Timeline Reveal
When a block enters the screen, its parts sharpen out of a blur one after another. Good for timelines, step lists and headings.
Customize
color
accentColor
highlightColor
Based on Timeline Animation (MIT license) ยท Terms of use
More in Pro
View allProps
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | โ | What to reveal. |
| animationNum | number | โ | Place in the queue. Item N appears N steps after the start. |
| timelineRef | RefObject<HTMLElement | null> | โ | The shared block. When it enters the screen, the whole chain starts. |
| as | keyof HTMLElementTagNameMap | "div" | HTML tag to render. |
| once | boolean | true | Play only the first time. Otherwise it hides and reveals again on every entry. |
| delayStep | number | 0.25 | Pause between neighbouring items in seconds. |
| duration | number | 0.5 | Seconds one item takes to appear. |
| blur | number | 20 | Blur of a hidden item in pixels. |
| offsetY | number | 0 | Vertical offset of a hidden item in pixels. |
| customVariants | Variants | โ | Your own hidden and visible states instead of the blur. |
| color | string | "#ffffff" | Main colour. Children read it as var(--timeline-c1). |
| accentColor | string | "#a3a3a3" | Second colour. Children read it as var(--timeline-c2). |
| highlightColor | string | "#ffffff" | Light highlight colour. Children read it as var(--timeline-c3). |
| className | string | โ | Extra classes. |
Dependencies
1 required package
npm install motion