Animations and Data Transitions

Add xy.animation() as a chart child to give initial render and later live-data refreshes one declarative motion policy. The browser owns the clock and GPU interpolation; Python receives only optional start/end lifecycle events.

enabled="auto" is the recommended default: it animates normally and renders the final state immediately when the browser reports reduced motion. Use enabled=False to suppress motion or enabled=True only when the application intentionally overrides that preference.

enter="auto" chooses a mark-aware entrance:

• Line, area, and error bands reveal along their path.
• Bars and columns grow from their baseline.
• Scatter points scale from zero; error bars grow from their centers.

Set enter explicitly to none, scale, grow, or reveal when a shared chart needs a different visual language.

Named easings are linear, ease, ease-in, ease-out, and ease-in-out. A four-number tuple supplies a cubic Bézier; xy.spring(stiffness=..., damping=..., mass=...) supplies a bounded spring policy.

Live Reflex state rebuilds and notebook append refreshes update the mounted chart in place. Use the button in this example to reorder retained accounts, insert two accounts, remove two, and sharply change their values. Stable keys let XY distinguish each case:

key= accepts an array or a data= column name on line, area, scatter, bar, column, error-band, and errorbar marks. Values must be present, supported, unique, and the same length as the logical rows. XY validates these conditions before rendering. For a replacement without stable identity, choose match="index" explicitly.

Each mark may override the chart policy or opt out:

Use append matching for a live ordered series. Existing x values retain their identity while the new tail enters, and append's normal viewport policy still applies: home follows the domain, a live-edge view slides, and a user looking at history stays put. Choose a one-, five-, or twelve-point batch below; every new sample includes bounded random jitter so repeated appends produce different tails.

In Reflex, use reflex_xy.append(token, ...); a state-driven full dataset replacement uses keyed or index matching through the same browser controller. Rapid updates are latest-wins: a new refresh begins at the currently displayed position, closes the interrupted lifecycle as cancelled, and never queues an unbounded chain of old scenes.

Live notebook and Reflex hosts expose start/end events. Python callbacks are configuration, not serialized chart data:

Standalone HTML dispatches local xy:animation_start and xy:animation_end DOM events. It has no Python process to invoke.

Key matching is intentionally limited to direct representations. Above the matching limit, and for decimated lines or density grids, XY snaps to the new screen-bounded representation instead of constructing a browser map for every canonical row. Density and level-of-detail (LOD) tier handoffs retain their separate stale-while-refine blending and never flash blank.

Direct keyed payloads add two binary 32-bit key words per mark. Position interpolation adds temporary start buffers only while the animation is active; the previous scene and scratch buffers are freed at completion.