Skip to content

@remotion/studio: Fix timeline playhead and tick flicker on zoom#6935

Merged
JonnyBurger merged 2 commits intomainfrom
studio/fix-timeline-zoom-flicker
Mar 31, 2026
Merged

@remotion/studio: Fix timeline playhead and tick flicker on zoom#6935
JonnyBurger merged 2 commits intomainfrom
studio/fix-timeline-zoom-flicker

Conversation

@JonnyBurger
Copy link
Copy Markdown
Member

Summary

  • Fix playhead flicker when clicking timeline zoom buttons by using useLayoutEffect to read actual DOM width synchronously instead of depending on async ResizeObserver via TimelineWidthContext
  • Fix timeline tick flicker on zoom by consuming zoom context and measuring actual slider width in useLayoutEffect before paint

Test plan

  • Open studio, click timeline zoom in/out buttons — playhead should not flicker
  • Verify timeline ticks don't flicker during zoom changes
  • Verify playhead still tracks correctly during playback
  • Verify playhead drag/scrub still works correctly

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog bot commented Mar 30, 2026

Reviewed — no actionable issues found. The fix correctly uses useLayoutEffect to synchronously read DOM width before paint, bypassing the async ResizeObserver lag that caused playhead and tick flicker on zoom.

Task list (4/4 completed)
  • Read the PR diff to understand the changes
  • Read the full source files for context
  • Trace data flow and verify correctness of the fix
  • Submit review or report progress
Pullfrog  | [View workflow run](https://github.com/remotion-dev/remotion/actions/runs/23754959977/job/69207044962) | Triggered by [Pullfrog](https://pullfrog.com) | Using `Big Pickle` (free) | [𝕏](https://x.com/pullfrogai)

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
bugs Ready Ready Preview, Comment Mar 31, 2026 8:20am
remotion Ready Ready Preview, Comment Mar 31, 2026 8:20am

Request Review

Copy link
Copy Markdown
Contributor

@pullfrog pullfrog bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean fix. Both useLayoutEffect calls correctly bypass the async ResizeObserver lag by reading clientWidth synchronously before paint, which eliminates the flicker on zoom.

Pullfrog  | View workflow run | Using Big Pickle (free) | 𝕏

Move the zoom-aware width sync into `TimelineWidthProvider` so all
consumers (playhead, ticks, sequence layers, in/out pointers) get the
correct width before paint. Reverts the per-component fixes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@JonnyBurger JonnyBurger merged commit 098d4a2 into main Mar 31, 2026
18 checks passed
@JonnyBurger JonnyBurger deleted the studio/fix-timeline-zoom-flicker branch March 31, 2026 08:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant