xzdarcy / react-timeline-editor

react-timeline-editor is a react component used to quickly build a timeline animation editor.
https://zdarcy.com/
MIT License
284 stars 82 forks source link

Any way to scroll left based on time #12

Closed vijeeshin closed 1 year ago

vijeeshin commented 1 year ago

Any way to scroll left based on time, i have only time parameter, right now i think its based on px

xzdarcy commented 1 year ago

Any way to scroll left based on time, i have only time parameter, right now i think its based on px

You can convert time to px by the scale,scaleWidth, startLeft parameters.
First, pass these parameters to the timeline.

<Timeline
        ...
        scale={scale}
        scaleWidth={scaleWidth}
        startLeft={startLeft}
/>

Then calculate the scroll left.

// where to start auto scrolling, you can customize according to the timeline panel width.
const autoScrollFrom = 500;
// scroll left
const left = time * (scaleWidth / scale) + startLeft - autoScrollFrom;
// set scroll left
timelineState.current.setScrollLeft(left)
xzdarcy commented 1 year ago

More info about scale,scaleWidth, startLeft you can see docs.

vijeeshin commented 1 year ago

Thanks it worked like charm