Fix Timeline Zoom (Anchor Around Cursor/Playhead) — Node.Jйс, React, Redux

Fix Timeline Zoom (Anchor Around Cursor/Playhead) — Node.Jйс, React, Redux

Fix Timeline Zoom (Anchor Around Cursor/Playhead) — Node.Jйс, React, Redux

Upwork

Upwork

Remoto

22 hours ago

No application

About

Description Our editor-style timeline jumps on zoom. Expected: cursor/playhead stays visually fixed and the timeline scales around that anchor (cursor or playhead). Implement anchored zoom with smooth interaction, touching the minimum number of files needed. Include tests and automation. We’ll provide a short reference video, repo access, and a heavy sample project. https://drive.google.com/file/d/13DBBKVMIMrjLqR6BWxGLrw7-4biQHdmh/view?usp=sharing Technologies - Frontend: React, Redux, HTML5 Canvas (timeline rendering) - Backend: Node.js, Express - Database: MongoDB - Browsers: Chrome Success Criteria - No cursor jump: Playhead x-position remains fixed during zoom; anchor timestamp stays stable. - Performance: Smooth at 55–60 FPS on a 30-min timeline with 200+ items; sensible min/max zoom. - Minimal surface area: Modify only essential modules; provide a concise change log and file list. Tests: - Unit tests for scale/offset/anchor calculations and reducer/selectors (e.g., Jest). - Automated UI tests for wheel and +/- zoom flows, regression on scrubbing/scroll/drag (e.g., Playwright/Cypress). - Add to CI and ensure green on PR. - No regressions: Scrubbing, selection, scrolling, and drag behaviors unchanged. - Delivery: Small, well-documented PR + brief approach summary and test results.