Control Target Sync

How It Works

An edit beat is a set of concurrent tweens at ONE timeline label: tl.addLabel("edit1", …), then the readout tween (numeric proxy + onUpdate writing textContent only) and the target transform tween (rotation / x / y / scale to the same endpoint), both placed at the label with the same duration and ease. The two motions are two projections of one gesture — value at 40% ⇒ target at 40%, on every frame, under any seek. That mathematical lockstep reads as “the panel is editing the page,” not “two animations happen to overlap.”

For discrete edits (per-keystroke retypes, dropdown picks, unit snaps) the couple steps instead of glides: a single threshold state array carries BOTH sides — each state holds the readout text AND the target’s property value — and one driver applies whichever state is active. Both sides read from the same state object, so they cannot desync.

Chain 2–4 edit beats with short holds between, and end on a landed edit — the last value applied and holding, never a tooltip with the dropdown unopened.

Recipe

Variations

• Dropdown pick → instant conversion (self-conversion) — the pick converts the panel’s own readout in place (tl.set("#padding-readout", { textContent: "6 px" }, "pick")); control and target collapse into one element. Compose the dropdown from neighbors: menu pops via spring-pop-entrance.md, row hover-stepping via dynamic-content-sequencing.md. The conversion must be an INSTANT snap — tweening between unit strings reads as broken, and instantness is the feature being sold.
• Easing-handle drag → target re-animates (deferred mirror) — the edit authors a behavior, so the mirror is a replay, not a concurrent transform: beat 1 drags the handle (handle tween + coords readout), then at a later label the target performs its motion with the newly-authored curve (tl.fromTo("#toggle-knob", { x: 0 }, { x: KNOB_TRAVEL, duration: REPLAY_DUR, ease: AUTHORED_EASE }, "replay")), often under a zoom-out (viewport-change.md). The one sanctioned case where the response is not in the gesture’s beat; the replay must still be unmistakably the edited parameter.
• Read-sync mirror (reverse direction) — the gesture happens ON the target (hovering swatches, selecting an element) and the PANEL readout is the bound side. Same discrete contract — one state array of { t, hoverTarget, readout } drives both the highlight and the text.
• Color couple — the readout counts (0 → 80) while the target’s backgroundColor tweens between two palette stops at the same label. Keep it two fixed stops (GSAP interpolates); never derive per-frame hex strings by hand.

Values

Critical Constraints

• One label, one gesture — readout tween and target tween share position, duration, AND ease; never sequence readout-then-target, and never stagger the target behind the readout even by 0.1 s — a delayed response reads as an animation following an edit, not a bound surface. A mismatched ease desyncs the mirror mid-tween even when endpoints agree.
• Discrete steps share one state object — both sides read the same array entry, so desync is impossible by construction; first entry mirrors the initial DOM state.
• The readout is data — no overshoot, no bounce on the settle; the target may carry the gesture’s ease but lands exactly on the edited value.
• Co-visibility is load-bearing — control and target share the frame for every edit beat; a camera move must never crop the mirror out (punch-and-return around the beats, not through them).
• tabular-nums + fixed min-width on every scrubbed readout; onUpdate is O(1) — text writes only, discrete drivers guard writes with a last-state check.
• End on a landed edit — the final beat resolves with the value applied and holding (or the deferred-mirror replay); never mid-gesture or on an unopened menu.
• The gesture’s actor is a separate rule — cursor glide, grab-cursor flip, and click feedback come from the cursor rules; this rule owns only the couple.

See also

cursor-click-ripple / context-sensitive-cursor (the hand performing the gesture) · counting-dynamic-scale (the readout half alone, when there is no bound target) · discrete-text-sequence (retypes inside the control field) · spring-pop-entrance (dropdowns/chrome around the couple) · multi-phase-camera (punch-and-return framing) · chart-scrub-readout (the sibling READ direction — a scrub interrogates a chart instead of editing a target).