@voila.dev/motion 6.0.121 → 6.0.123

package/src/sequence/sequence.ts

@@ -1,4 +1,5 @@
 import { groupControls, thenable } from "#/animate/controls.ts";
+import { planGenerator, totalDuration } from "#/animate/plan.ts";
 import type {
 	AnimationControls,
 	AnimationOptions,
@@ -48,6 +49,36 @@ function startOf(
 	return labels.get(at) ?? cursor;
 }
 
+/**
+ * How long a segment that waits for an earlier one will run once launched.
+ * Its first keyframe is only read then, but a tween's length doesn't depend
+ * on it, and neither does a default spring's (its rest thresholds scale with
+ * the distance).
+ */
+function plannedDuration(keyframes: unknown, options: AnimationOptions) {
+	const channels =
+		typeof keyframes === "object" &&
+		keyframes !== null &&
+		!Array.isArray(keyframes)
+			? Object.values(keyframes)
+			: [keyframes];
+	const { delay } = options;
+	return (
+		(typeof delay === "number" ? delay : 0) +
+		Math.max(
+			0,
+			...channels.map((channel) => {
+				const frames = Array.isArray(channel) ? channel : [0, channel];
+				const { generator } = planGenerator(
+					frames.map((_frame, index) => index),
+					options,
+				);
+				return totalDuration(generator.duration, options);
+			}),
+		)
+	);
+}
+
 /**
  * Launches every segment at once, each delayed to its place on the
  * timeline, so the whole sequence shares one clock and can be scrubbed. A
@@ -62,9 +93,13 @@ export function animateSequence(
 ): AnimationControls {
 	const begun = now();
 	const labels = new Map<string, number>();
-	const busy = new Map<object, Map<string, Promise<void>>>();
+	const busy = new Map<
+		object,
+		Map<string, { readonly finished: Promise<void>; readonly end: number }>
+	>();
 	const children: AnimationControls[] = [];
 	const waits: Promise<void>[] = [];
+	let end = 0;
 	let cursor = 0;
 	let previousStart = 0;
 	for (const segment of segments) {
@@ -78,7 +113,18 @@ export function animateSequence(
 			unknown,
 			SegmentOptions?,
 		];
-		const start = startOf(own.at, cursor, previousStart, labels);
+		const placed = startOf(own.at, cursor, previousStart, labels);
+		const keys =
+			typeof keyframes === "object" &&
+			keyframes !== null &&
+			!Array.isArray(keyframes)
+				? Object.keys(keyframes)
+				: ["value"];
+		const targets = resolveTargets(target);
+		const before = targets.flatMap((one) =>
+			keys.flatMap((key) => busy.get(one)?.get(key) ?? []),
+		);
+		const start = Math.max(placed, ...before.map((earlier) => earlier.end));
 		const { delay } = own;
 		/** Launched late, a segment only waits for what is left of its delay. */
 		function optionsAt(elapsed: number): AnimationOptions {
@@ -92,32 +138,28 @@ export function animateSequence(
 						: Math.max(0, offset + (delay ?? 0)),
 			};
 		}
-		const keys =
-			typeof keyframes === "object" &&
-			keyframes !== null &&
-			!Array.isArray(keyframes)
-				? Object.keys(keyframes)
-				: ["value"];
-		const targets = resolveTargets(target);
-		const before = targets.flatMap((one) =>
-			keys.flatMap((key) => busy.get(one)?.get(key) ?? []),
-		);
 		const launch = () =>
 			animateOne(target, keyframes, optionsAt((now() - begun) / 1000));
 		let finished: Promise<void>;
+		let ends: number;
 		if (before.length === 0) {
 			const controls = launch();
 			children.push(controls);
 			finished = controls.finished;
-			cursor = Math.max(start, controls.duration);
+			ends = Math.max(start, controls.duration);
 		} else {
-			finished = Promise.all(before).then(() => launch().finished);
+			finished = Promise.all(before.map((earlier) => earlier.finished)).then(
+				() => launch().finished,
+			);
 			waits.push(finished);
+			ends = start + plannedDuration(keyframes, { ...options, ...own });
 		}
+		cursor = ends;
+		end = Math.max(end, ends);
 		for (const one of targets) {
 			const byKey = busy.get(one) ?? new Map();
 			busy.set(one, byKey);
-			for (const key of keys) byKey.set(key, finished);
+			for (const key of keys) byKey.set(key, { finished, end: ends });
 		}
 		previousStart = start;
 	}
@@ -125,5 +167,9 @@ export function animateSequence(
 	const finished = Promise.all([group.finished, ...waits]).then(
 		() => undefined,
 	);
+	// The segments still waiting count too: they end after the ones launched.
+	Object.defineProperty(group, "duration", {
+		value: Math.max(end, group.duration),
+	});
 	return Object.assign(group, thenable(finished));
 }