fix: start motion timing when updates are scheduled by tannerlinsley · Pull Request #222 · TanStack/charts

tannerlinsley · 2026-10-13T23:42:20Z

Fix

Start the motion clock when the update is scheduled, using the owning window's performance.now(). An early first frame no longer advances a tween too far, and a delayed first frame no longer postpones the whole animation.

Remove the two bound frame callbacks so the fix fits the existing bundle budgets. Calls still use the owning window as their receiver. Public options, defaults and motion inheritance are unchanged.

Thanks @toomingos for the detailed reproduction in #192.

Closes #192.

Verification

pnpm validate passes all 19 tasks, including 2,224 main-suite tests, typechecking, packed consumers, docs, bundle gates and 188 catalog previews.
Regression coverage for early frames, delayed frames, per-track delay and the frame callback receiver.
Chromium, Firefox and WebKit reproduce the old timing error and pass with the fix.
Maintained example builds pass.
All 151 bundle entries satisfy the existing policies. Only the optional motion entry changes: 69.344 to 69.396 kB minified, 23.238 to 23.230 kB gzip, and 20.600 to 20.534 kB Brotli. The 60 comparison bundles are unchanged.
Two sets of seven paired Chromium trials at 1, 24 and 300 bars found no repeatable runtime regression. For 50 render-and-animation cycles at 300 bars, medians were 145.7 to 148.2 ms in the first set and 137.4 to 137.2 ms in the repeat. These are targeted local measurements, not a claim about all chart workloads.
Includes a patch Changeset. No added dependencies, CI jobs or budget increases.

Summary by CodeRabbit

Bug Fixes
- Animation timing now begins when an update is scheduled, rather than at the first animation frame. This makes delayed animations progress according to their scheduled start time.

…igin

changeset-bot · 2026-10-13T23:42:27Z

🦋 Changeset detected

Latest commit: 5dcc33a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@tanstack/charts	Patch
@tanstack/alpine-charts	Patch
@tanstack/angular-charts	Patch
@tanstack/lit-charts	Patch
@tanstack/octane-charts	Patch
@tanstack/preact-charts	Patch
@tanstack/react-charts	Patch
@tanstack/react-native-charts	Patch
@tanstack/solid-charts	Patch
@tanstack/svelte-charts	Patch
@tanstack/vue-charts	Patch
@tanstack/charts-scales	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-10-13T23:42:38Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 6f950c0d-e9fe-4e73-aae0-6f4eaf2b6904

📥 Commits

Reviewing files that changed from the base of the PR and between f29d649 and 5dcc33a.

📒 Files selected for processing: 15

.changeset/scheduled-motion-clock.md
benchmarks/comparison/bundle-baseline.json
benchmarks/conformance/cases/114-spring-line-motion/tanstack.test.ts
benchmarks/conformance/cases/115-definition-motion/tanstack.test.ts
benchmarks/conformance/cases/116-geometry-morph/tanstack.test.ts
benchmarks/conformance/cases/126-drillable-sunburst/tanstack.test.ts
benchmarks/conformance/previews/manifest.json
docs/comparison.md
packages/charts-core/docs/comparison.md
packages/charts-core/src/motion-clock.test.ts
packages/charts-core/src/motion.test.ts
packages/charts-core/src/motion.ts
packages/charts-core/src/ridgeline.test.ts
packages/charts-core/src/view-compose.test.ts
packages/charts-core/src/violin.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Walkthrough

Motion runs now measure elapsed time from when an update is scheduled, rather than from the first animation-frame timestamp. Tests simulate performance time alongside frame callbacks. Benchmark metadata and comparison-page revisions are updated.

Changes: Motion Timing

Layer / File(s)	Summary
Scheduled start time and regression coverage `.changeset/scheduled-motion-clock.md`, `packages/charts-core/src/motion.ts`, `packages/charts-core/src/motion-clock.test.ts`	`runTracks` reads the view’s performance clock before scheduling the first frame. The new parameterized test checks animation values at selected times and verifies the final motion state.
Simulated clock and frame helpers `packages/charts-core/src/motion.test.ts`, `packages/charts-core/src/ridgeline.test.ts`, `packages/charts-core/src/view-compose.test.ts`, `packages/charts-core/src/violin.test.ts`, `benchmarks/conformance/cases/*/tanstack.test.ts`	Test helpers set mocked performance time before frame callbacks and restore the clock mock during cleanup. The managed-frame helper also supports advancing time without invoking a callback.
Benchmark and comparison metadata `benchmarks/comparison/bundle-baseline.json`, `benchmarks/conformance/previews/manifest.json`, `docs/comparison.md`, `packages/charts-core/docs/comparison.md`	The baseline timestamp, source revision, and input digest are updated. The preview source hash and comparison-page workspace revision are also updated.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 5dcc3

The scheduled motion-clock change has no established merge-blocking risk; it is ready for normal merge checks.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 18 functions across 10 files. (5 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: starting motion timing when updates are scheduled.
Linked Issues check		The direct linked issue is `#192`. `packages/charts-core/src/motion.ts` now reads `view.performance.now()` before scheduling the first frame and uses that value as the motion origin. It calls `requestAn…
Out of Scope Changes check		The changes stay within the motion-clock fix. The added test and test-helper clock controls support deterministic motion timing coverage. The changeset, conformance updates, preview metadata, bundle b…

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 18 functions across 10 files. (5 skipped: 5 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches: 💡 1

📝 Generate docstrings: 💡

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nx-cloud · 2026-10-13T23:42:55Z

View your CI Pipeline Execution ↗ for commit 5dcc33a

Command	Status	Duration	Result
`nx run charts-workspace:ci-distributed`	✅ Succeeded	2m 51s	View ↗
`nx run charts-workspace:package-check`	✅ Succeeded	<1s	View ↗
`nx run charts-workspace:benchmark-check`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-10-13 23:45:50 UTC

tannerlinsley added 4 commits October 13, 2026 15:36

fix: start motion clocks when runs are scheduled

1f68989

Merge remote-tracking branch 'origin/main' into taren/motion-clock-or…

a082a43

…igin

fix: keep scheduled motion clock within bundle budgets

a691036

test: refresh scheduled motion validation artifacts

5dcc33a

tannerlinsley merged commit ba6b647 into main Oct 13, 2026
19 checks passed

tannerlinsley mentioned this pull request Oct 13, 2026

[Bug] motion(): the run clock starts at the first frame timestamp, not at the update #192

Closed

github-actions Bot mentioned this pull request Oct 13, 2026

ci: Version Packages #220

Merged

This was referenced Oct 14, 2026

[Bug] Crosshair: the spring restarts on every frame while data motion runs #208

Closed

test(charts): cover crosshair repaints during data motion #223

Merged

Navigation Menu

Repository navigation

fix: start motion timing when updates are scheduled - #222

fix: start motion timing when updates are scheduled#222
tannerlinsley merged 4 commits into
mainfrom
taren/motion-clock-origin

tannerlinsley commented Oct 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Oct 13, 2026

Uh oh!

coderabbitai Bot commented Oct 13, 2026 •

edited

Loading

Uh oh!

nx-cloud Bot commented Oct 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

tannerlinsley commented Oct 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fix

Verification

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Oct 13, 2026

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Oct 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud Bot commented Oct 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tannerlinsley commented Oct 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 13, 2026 •

edited

Loading

nx-cloud Bot commented Oct 13, 2026 •

edited

Loading