Timeline
Code
| 1 | const entries = [ |
| 2 | { targets: circleRef, translateX: [0, 60, 0], duration: 1200, ease: 'inOutQuad', position: 0 }, |
| 3 | { targets: diamondRef, translateX: [0, 60, 0], rotate: ['0turn', '0.5turn', '0turn'], duration: 1200, ease: 'inOutQuad', position: 0 }, |
| 4 | { targets: sqRef, translateX: [0, 60, 0], scale: [1, 1.15, 1], duration: 1200, ease: 'inOutQuad', position: 200 }, |
| 5 | ]; |
| 6 | <AnimeTimeline autoplay={false} entries={entries}> |
| 7 | {({ controls, state }) => ( |
| 8 | <button onClick={() => controls.restart()}>Play</button> |
| 9 | )} |
| 10 | </AnimeTimeline> |
Sequenced timeline animations with sync, labels, and imperative methods.
Live previewOpen Playground
TimelineSequenced multi-step animation
Translate
Rotate
Slide
0ms0ms1400ms
Props
| Name | Type | Default | Description |
|---|---|---|---|
| entries | object[] | - | Array of animation entries |
| entries[].targets | Ref | string | - | Animation target |
| entries[].position | number | string | - | Position offset or label |
| entries[].duration | number | 1000 | Step duration in ms |
| entries[].ease | string | 'inOutQuad' | Per-entry easing |
| autoplay | boolean | false | Auto-start on mount |
| controls.restart | function | - | Restart timeline |
| state.progress | number | - | Current progress 0→1 |