Features
Grid Snap
Snap action blocks to grid intervals for precise, quantized editing.
After enabling Grid Snap, action blocks will snap and move according to the subdivided units of the timeline ruler. This is essential for frame-accurate or beat-accurate editing.
Live Preview
Try dragging one of the action blocks — it will snap to precise grid positions instead of moving freely.
Usage
Enable grid snapping by passing gridSnap={true}:
import {
Timeline,
TimelineRow,
TimelineEffect,
} from "@keplar-404/react-timeline-editor";
import React, { useState } from "react";
const mockData: TimelineRow[] = [
{
id: "0",
actions: [
{
id: "action00",
start: 0,
end: 2,
effectId: "effect0",
},
],
},
];
const mockEffect: Record<string, TimelineEffect> = {
effect0: { id: "effect0", name: "Effect 0" },
};
export const EditorGridSnap = () => {
const [data, setData] = useState(mockData);
return (
<div style={{ width: "100%", height: "400px" }}>
<Timeline
editorData={data}
effects={mockEffect}
onChange={setData}
gridSnap={true}
scaleSplitCount={10} // Will snap in 1/10th of a scale unit increments
style={{ width: "100%", height: "100%" }}
/>
</div>
);
};How It Works
The snap increment is calculated as:
snapInterval = scale / scaleSplitCountWith the defaults (scale=1, scaleSplitCount=10), blocks snap every 0.1 seconds. Increase scaleSplitCount for finer snapping or decrease it for coarser snapping.
scaleSplitCount | Snap interval (with scale=1) |
|---|---|
4 | Every 0.25s |
10 | Every 0.1s |
20 | Every 0.05s |
100 | Every 0.01s |