Motion & Animation
Learn how Plotcn treats motion as a visual communication layer to explain state change, data continuity, and interaction without competing with data.
Motion philosophy
Plotcn treats animation as a visual communication layer, not as decoration and not as part of the chart engine itself.
The governing principle is:
"Motion should explain change, not compete with the data."
When properly designed, motion improves:
- State continuity: tracking categories or series during sort and filter operations.
- Data change comprehension: visual continuity from old values to new values.
- Selection feedback: immediate tactile response for active elements.
- Interaction feedback: tooltips and crosshairs staying glued to pointer positions.
- Layout transitions: smooth repositioning of legends or annotations without jarring layout shifts.
All of this must happen without making charts slower, harder to read, or inaccessible.
Motion architecture
Plotcn divides animations across three execution channels depending on what is actually changing:
- UI / Layout / Presence: Driven by Motion for React (
motion/react) for tooltips, legend toggles, and popover surfaces. - Numeric & Path Geometry: Handled by mathematical interpolation and coordinate helpers for D3 paths, monotone curves, and radial arcs.
- Engine-Owned Rendering: Delegated to native Recharts and Google Charts animations with normalized timing and reduced-motion enforcement.
Semantic presets
Rather than arbitrary spring parameters, Plotcn standardizes motion through semantic presets that describe what the visualization mark is doing:
| Preset | Purpose | Primary Chart Family | Timing |
|---|---|---|---|
draw | Stroke dash progressive line reveal | Line, Sparkline | 300ms |
grow | Expansion from semantic zero baseline | Bar, Column, Histogram | 300ms |
sweep | Radial angular progression | Pie, Donut, Gauge | 450ms |
reveal | Directional clip-path masking | Area, Timeline | 300ms |
morph | Coordinate interpolation across updates | Line, Area | 300ms |
stagger | Controlled item-by-item delay (capped) | Bar groups, Legends | ≤ 150ms total |
fade | Universal fallback for large data | Scatter, Heatmap, Fallbacks | 180ms |
none | Instant rendering without transition | Heavy data, Reduced motion | 0ms |
Restrained timing & easing
Visualization motion requires restrained easing. Plotcn never applies bouncy or elastic springs to primary quantitative geometry. A bar representing financial revenue or server throughput should never overshoot its real value.
Reduced motion
Plotcn enforces an uncompromising reduced-motion policy across all chart engines:
"Reduced motion changes how state is presented, not whether state is presented."
When prefers-reduced-motion: reduce is active:
drawresolves immediately to the final path.growdisplays final bar geometry instantly.sweeppresents final arc positions without rotation.staggeris disabled (zero delay).- Direct manipulation (pan, zoom, scrub) remains direct and responsive.
Interruption & latest state wins
Animations in live dashboards or real-time streaming must be interruptible. If new data arrives while an animation is playing:
Plotcn never queues animation backlogs. Stale transitions are immediately superseded by the latest state.