animate zoom region transition

src/components/video-editor/videoPlayback/zoomAnimation.test.ts

@@ -380,15 +380,11 @@ describe("findDominantRegion", () => {
 			{ id: "b", startMs: 3500, endMs: 6000, depth: 3, focus: { cx: 0.8, cy: 0.8 } },
 		];
 
-		// During the connected transition (between a.endMs + 200 and a.endMs + 1200)
+		// During the connected handoff, the next region becomes the spring target.
 		const result = findDominantRegion(regions, 3200, { connectZooms: true });
 		expect(result.strength).toBe(1);
-		expect(result.transition).not.toBeNull();
-
-		// Focus should be blending between the two
-		if (result.region) {
-			expect(result.region.focus.cx).toBeGreaterThan(0.2);
-		}
+		expect(result.transition).toBeNull();
+		expect(result.region?.id).toBe("b");
 	});
 
 	it("keeps the outgoing region active until the connected transition begins", () => {

src/components/video-editor/videoPlayback/zoomRegionUtils.ts

@@ -124,8 +124,18 @@ function getActiveRegion(
 	const activeRegions = regions
 		.map((region) => {
 			const outgoingPair = connectedPairs.find((pair) => pair.currentRegion.id === region.id);
-			if (outgoingPair && timeMs >= outgoingPair.transitionStart) {
-				return { region, strength: 0 };
+			if (outgoingPair) {
+				if (timeMs >= outgoingPair.transitionStart) {
+					return { region, strength: 0 };
+				}
+
+				const zoomOutStart =
+					outgoingPair.currentRegion.endMs -
+					ZOOM_OUT_EARLY_START_MS +
+					ZOOM_ANIMATION_LEAD_MS;
+				if (timeMs >= zoomOutStart) {
+					return { region, strength: 1 };
+				}
 			}
 
 			const incomingPair = connectedPairs.find((pair) => pair.nextRegion.id === region.id);
@@ -240,11 +250,6 @@ export function findDominantRegion(
 	const connectedPairs = options.connectZooms ? getConnectedRegionPairs(regions) : [];
 
 	if (options.connectZooms) {
-		const connectedTransition = getConnectedRegionTransition(connectedPairs, timeMs);
-		if (connectedTransition) {
-			return connectedTransition;
-		}
-
 		const connectedHold = getConnectedRegionHold(timeMs, connectedPairs);
 		if (connectedHold) {
 			return { ...connectedHold, transition: null };