Walk the pointer down a bar chart so each bar greys and a tooltip re-anchors to it
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A white report card holds a six-row horizontal bar chart ('Objections in deals over $1M ARR'); the top bar is blue, the rest slate grey. The pointer rises from below the chart and rests on the top bar (~f6): a white two-line tooltip appears beside it. It then steps down one bar at a time (~f36, f52, f76, f96, f124); on each step the hovered grey bar turns light grey and the tooltip re-anchors to that bar with new copy, the previous one vanishing on the same frame. No easing on the tooltip swaps.
Hover walk on a chart: each hovered bar toggles to a highlight fill while a single tooltip jumps between anchor positions in step with the pointer.
Phase notes
- Frame 0 — Pointer below the chart, no tooltip
- Frame 6 — Top bar hovered: tooltip appears
- Frame 36 — Bar 2 hovered: bar greys, tooltip jumps
- Frame 52 — Bar 3
- Frame 76 — Bar 4
- Frame 96 — Bar 5
- Frame 124 — Bar 6, held to the end
Use this example
- Watch the source and draft at normal speed. Compare the order of actions, the held states, and the transition into the result.
- Download the project and read its README before changing inputs. The package includes its implementation and declared dependencies.
- Replace the sample content through the package's documented input or content builder. Keep source footage in the research comparison.
- Render your adaptation and inspect text fit, framing, intermediate states, and entry and exit frames.
The source and remake are different assets. The original code-based illustration remains editable; source footage is a research reference. Read the retained findings below before using the choreography.
Recorded limits
- Visual fidelity is an authored draft judgement from sampled source frames; no independent blind review or native Resolve execution.