React Timeline Editor Studio

Drag, resize and play timeline animation actions with engine timing plus effect callbacks.

React Timeline Editor Studio — drag, resize and play timeline animation actions with engine timing plus effect callbacks

How to use React Timeline Editor Studio

Press play to run the engine tick and watch the preview box follow active effects
Drag any action block to move it, or drag its edge grips to resize it
Click the time ruler to scrub the cursor, or use setTime and the transport buttons
Add a row or add an action at the cursor, then edit its start, end and effect
Toggle gridSnap, dragLine assist lines, autoScroll, hideCursor or disableDrag
Change scale, scaleWidth, scaleSplitCount, startLeft and rowHeight like real props
Copy the install snippet, the README usage code, or your editorData JSON

Built on the real xzdarcy/react-timeline-editor repo (MIT, editor v1.0.0, engine v1.0.0)
The verbatim README mockData: action00 0 to 2 on row 0, action10 1.5 to 5 on row 1
The exact conversion math: pixel equals startLeft plus time over scale times scaleWidth
All real EditData defaults: scale 1, split 10, width 160, startLeft 20, rowHeight 32
The engine tick with capped delta and playRate, plus the start enter update leave stop lifecycle
Drag, resize, row reorder, grid snap, assist lines, scrubbing and auto scroll
Four demo effects driving the preview box by progress: fade, slide, scale and fade plus slide
Honest scope: interactjs and react-virtualized are reimplemented with pointer events, same data shapes

Yes, unlimited.