Hover a sidebar item to raise its pill, click, and smooth-scroll the page to that section
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
The account-brief page is at the 'What they actually said' section. The pointer leaves the quote block and travels left to the sidebar nav (f0-20); as it lands on the 'Stakeholders' item a rounded hover pill appears behind the label (~f22-30). On the click (~f34) the URL gains a '#stakeholders' anchor and the content column scrolls upward over about 40 frames, passing a dark card and settling on the 'Known executives' heading with a row of four person cards (~f78).
Anchor navigation: a hover pill acknowledges the target, and the click drives one eased vertical scroll of the content column while the sidebar stays fixed.
Phase notes
- Frame 0 — Pointer leaves the quote block
- Frame 22 — Hover pill fades in behind the nav item
- Frame 34 — Click; URL gains anchor
- Frame 36 — Content column scrolls up 1180px, eased
- Frame 78 — Settles on the next section heading and cards
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.