fast forward animations by swap time

vtbag · Sep 7, 2024 · 1f87c9b · 1f87c9b
1 parent e4528d4
commit 1f87c9b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/.changeset/large-mangos-check.md b/.changeset/large-mangos-check.md
@@ -0,0 +1,5 @@
+---
+'@vtbag/element-crossing': patch
+---
+
+Animation playback time now does a fast forward to take swap time into account
diff --git a/src/types.ts b/src/types.ts
@@ -30,5 +30,6 @@ export type Spec = {
 };
 export type ElementSpec = {
 	id: string;
+	timestamp: number;
 	specs: Spec[];
 };
diff --git a/src/vanilla.ts b/src/vanilla.ts
@@ -1,6 +1,6 @@
 import { ElementSpec, Spec } from './types';
 
-const DEBUG = false;
+const DEBUG = true;
 
 const crossing = top!.__vtbag?.elementCrossing;
 init();
@@ -29,13 +29,16 @@ function pageSwap() {
 	}
 }
 
-function pageReveal() {
+function pageReveal(event: Event) {
 	let values;
-	if (self.crossingStorage) {
-		values = self.crossingStorage.getItem('@vtbag/element-crossing') ?? [];
+	let storage;
+	if (storage = self.crossingStorage) {
+		values = storage.getItem('@vtbag/element-crossing') ?? [];
 	} else {
-		values = JSON.parse(top!.sessionStorage.getItem('@vtbag/element-crossing') ?? '[]');
+		storage = top!.sessionStorage;
+		values = JSON.parse(storage.getItem('@vtbag/element-crossing') ?? '[]');
 	}
+	!("viewTransition" in event && event.viewTransition) && storage.removeItem('@vtbag/element-crossing');
 	restore(values);
 }
 
@@ -162,20 +165,20 @@ function elementSpec(element: HTMLElement) {
 			}
 		});
 	if (!id) console.error('[crossing]', 'missing id in', element);
-	else return { id, specs };
+	else return { id, timestamp: new Date().getTime(), specs };
 }
 
 function restore(values: ElementSpec[]) {
 	DEBUG && console.log('[crossing]', 'restore', values);
 	values.forEach((elementSpec: ElementSpec) => {
 		let element = document.querySelector<HTMLElement>(
 			'#' +
-				elementSpec.id +
-				",[data-vtbag-x*='#" +
-				elementSpec.id +
-				"'],[data-vtbag-x*='id:" +
-				elementSpec.id +
-				"']"
+			elementSpec.id +
+			",[data-vtbag-x*='#" +
+			elementSpec.id +
+			"'],[data-vtbag-x*='id:" +
+			elementSpec.id +
+			"']"
 		);
 		if (element) {
 			elementSpec.specs.forEach((s) => {
@@ -216,8 +219,11 @@ function restore(values: ElementSpec[]) {
 								element
 							);
 						}
-						animations.forEach((a) => (a.currentTime = ~~(s.value ?? '0')));
-						element!.setAttribute(s.key, s.value ?? '');
+						animations.forEach(
+							(a) =>
+							(a.currentTime =
+								~~(s.value ?? '0') + (new Date().getTime() - elementSpec.timestamp))
+						);
 						break;
 					case 'elem':
 						const crossing = top?.__vtbag?.elementCrossing;