motion-and-transitionslisted

# Motion and transitions Motion in a data interface has exactly one job: **help the reader keep track of what changed.** Anything else — motion that decorates, that delays, that draws attention to itself — costs time and credibility with an audience reading financial information. The test for any animation: *if I removed this, would the reader understand the change less well?* If no, remove it. --- ## The one case where motion genuinely earns its place **Object constancy.** When data updates and marks persist, animating between states lets the eye follow individual marks instead of re-reading the whole chart. ``` Filter changes → bars keep identity, heights transition → the eye tracks which grew Filter changes → chart is replaced instantly → the reader re-reads everything ``` This is real comprehension value, and it is the main reason to animate a chart at all. It requires keying marks by identity, not by index: ```js // Bars must be matched by what they represent, not by position, or a re-sort // animates the wrong bar into the wrong place and actively misleads. const key = d => d.account; ``` A re-sorted chart animated by index is worse than no animation: it shows a mark moving that did not move. --- ## Durations | Interaction | Duration | |---|---| | Hover / focus feedback | 80-120ms | | Small state change (toggle, expand) | 150-200ms | | Chart data transition | 250-400ms | | Page or panel entry | 200-300ms | | Anything longer | Almost certainly wrong |