Skip to content

@remotion/studio: Add pinch-to-zoom on timeline#6972

Merged
JonnyBurger merged 5 commits intomainfrom
studio/timeline-pinch-zoom
Apr 4, 2026
Merged

@remotion/studio: Add pinch-to-zoom on timeline#6972
JonnyBurger merged 5 commits intomainfrom
studio/timeline-pinch-zoom

Conversation

@JonnyBurger
Copy link
Copy Markdown
Member

Implements pinch-to-zoom on the Studio timeline (trackpad pinch maps to `wheel` with ctrl/meta), matching the canvas behavior.

  • New `TimelinePinchZoom` listens on the timeline panel with `{ passive: false }` and updates zoom with an anchor frame under the pointer.
  • `zoomAndPreserveCursor` accepts optional `anchorFrame`; `setZoom` takes optional `{ anchorFrame }` and uses a stable callback.

Closes #6967

Made with Cursor

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 3, 2026

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

Project Deployment Actions Updated (UTC)
bugs Ready Ready Preview, Comment Apr 4, 2026 8:32am
remotion Ready Ready Preview, Comment Apr 4, 2026 8:32am

Request Review

@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog bot commented Apr 3, 2026

Reviewed PR #6972 — no actionable issues found. The applyZoomAroundFocalPoint extraction, new TimelinePinchZoom component, and anchorFrame plumbing are all correct and backward-compatible. Approved.

Task list (7/7 completed)
  • Read full diff and understand all changes
  • Read changed source files for full context
  • Analyze TimelinePinchZoom component
  • Analyze timeline-zoom state changes
  • Analyze Canvas.tsx refactor
  • Check for impact on existing consumers
  • Draft review and submit

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

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, well-structured PR. The applyZoomAroundFocalPoint extraction eliminates duplication between the wheel, WebKit gesture, and touch pinch code paths. The timeline pinch-zoom correctly converts pointer position to an anchor frame and passes it through the new optional anchorFrame parameter — all backward-compatible. No issues found.

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

…oring

- Increase wheel delta multiplier so zoom survives one-decimal rounding
- Add WebKit gesture and touch pinch; respect editor zoom gestures
- Anchor zoom using content-space X (anchorContentX) instead of rounded frame

Made-with: Cursor
…ayout sync

- Pinch/wheel zoom with WebKit gestures and touch; wheel delta tuned for rounding
- Anchor zoom with scroll content X; setZoom options use required nullable fields
- Playhead position via useLayoutEffect; zoom scroll preserves anchor with padding

Made-with: Cursor
@JonnyBurger JonnyBurger enabled auto-merge April 4, 2026 08:31
@JonnyBurger JonnyBurger merged commit 5e0e674 into main Apr 4, 2026
17 of 18 checks passed
@JonnyBurger JonnyBurger deleted the studio/timeline-pinch-zoom branch April 4, 2026 08:41
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.

Studio: Should allow pinch to zoom

1 participant