Why does staggering width and height keyframes by 1–2 frames make a bounce animation look more natural?

Staggering width and height keyframes by 1–2 frames mimics how real materials absorb force: compression on one axis and spread on the other never happen at the same instant, because energy takes time to travel through mass. Perfectly synchronized scaling reads as a mathematical resize; the offset reads as physical squash-and-stretch.

Offset the two axes because that's how inertia behaves in the real world. When a physical object lands or pops into place, the impact compresses it along one axis first, and the material bulges along the other axis a beat later as the energy propagates through it. If your width and height curves hit their keyframes on the exact same frames, the element scales uniformly — the viewer's eye registers it as a computer resizing a rectangle, not an object with mass arriving in the frame.

The 1–2 frame stagger is a keyframe-level implementation of squash-and-stretch, the classic animation principle behind believable bounces. By letting height overshoot and settle slightly out of phase with width, the widget appears to deform under its own momentum — it stretches, compresses, and wobbles into rest the way soft or elastic material would. In one documented DaVinci Resolve Fusion walkthrough, offsetting the height animation by 1–2 frames from the width animation was the specific change that turned a mechanical pop-in into a genuinely bouncy, organic entry for a UI comment card.

To apply it in Resolve: animate width and height as two separate keyframe sequences in Fusion, then drag one curve 1–2 frames later in the Spline editor so the axes peak at different moments. Use the offset as a mass dial — a 1-frame stagger reads as a light, snappy object, while pushing toward 2 frames makes the element feel heavier and softer. Add overshoot keyframes (scale past the final size, then settle back) so the bounce decays gradually instead of stopping dead.

Pair the stagger with easing, or the effect collapses. Select the spline keyframes and press S to apply an ease-in/ease-out curve — linear interpolation between staggered keyframes still feels robotic because real acceleration and deceleration are curved, not constant. The S-curve plus the multi-axis offset together are what sell the motion. This is the same reason After Effects animators use physics-based overshoot expressions: both approaches encode inertia into the motion instead of leaving it mathematically uniform.

The payoff is disproportionate to the effort. The documented Fusion build took about 5–10 minutes, and creators compositing these custom animations over AI-generated footage — for example, clips produced with the invideo agent — use exactly this kind of detail to separate their edits from flat, default motion graphics.

Watch some of these to see what works for you:

that took us like 5 or 10 minutes. It was not complicated at all, and it looks better than 99% of the stuff on YouTube.

— a creator documenting the DaVinci Resolve Fusion animation workflow