From 1f87c9b751a5abe77339b14d554d0e77a1c8c395 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Sat, 7 Sep 2024 13:50:52 +0200
Subject: [PATCH] fast forward animations by swap time

---
 .changeset/large-mangos-check.md |  5 +++++
 src/types.ts                     |  1 +
 src/vanilla.ts                   | 34 +++++++++++++++++++-------------
 3 files changed, 26 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/large-mangos-check.md

diff --git a/.changeset/large-mangos-check.md b/.changeset/large-mangos-check.md
new file mode 100644
index 0000000..adb09d0
--- /dev/null
+++ 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
index 28509a2..044b972 100644
--- 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
index f93c381..f2c78fa 100644
--- 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,7 +165,7 @@ 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[]) {
@@ -170,12 +173,12 @@ function restore(values: ElementSpec[]) {
 	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;