Zoom a design canvas from 24% to 45% anchored on the hero frame, then show its hover outline
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A browser tab with a design-tool layout: pages/layers panel left, properties panel right with a zoom readout of 24%, and a concept page on a grey canvas (dark hero card at top, two panels, a user-flow row, checklist and a dark status card below). Frames 0-12 hold. From about local frame 13 (master 3149) the canvas zooms in with an ease-out while the panels stay fixed; the readout steps 27, 30, 35, 39, 41 and settles on 45% by ~29 (master 3165). The hero card stays roughly in place at the top while lower content grows down and out of view. Around frame 66 the pointer rests on the hero card and a thin blue hover outline appears around it.
Anchored canvas zoom: only the document layer scales, about a point on the hero frame, with a stepped numeric readout in the chrome, followed by a hover outline on the frame the zoom targeted.
Phase notes
- Frame 0 — Overview at 24%
- Frame 13 — Zoom begins, readout steps
- Frame 29 — Settles at 45%
- Frame 66 — Hover outline on hero frame
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.