formatting and wording

Author: martrapp

README.md

@@ -1,6 +1,6 @@
 [⭐️Please star to support this work⭐️](https://github.com/vtbag/element-crossing)
 
-# 🚸 ElementCrossing
+# 🚸 The Element Crossing
 
 Transfer selected element state across cross-document view transitions.
 
@@ -17,7 +17,7 @@ Small improvements for smoother animations and handling reloads.
 
 For details see the [CHANGELOG](https://github.com/vtbag/element-crossing/blob/main/CHANGELOG.md)
 
-## What happend before?
+## What happened before?
 
 > First official release of this code!
 
@@ -39,4 +39,4 @@ Simply annotate your elements in the HTML source or DOM, and let the library han
 
 Address any CSS property or DOM element property, any CSS class, or CSS animation.
 
-[View configuration examples](https://vtbag.pages.dev/tools/element-crossing/#applications-with-real-world-examples) and [see the Element Crossing in action](https://vtbag.pages.dev/crossing/vanilla/1/)
+[View configuration examples](https://vtbag.pages.dev/tools/element-crossing/#applications-with-real-world-examples) and [see the Element Crossing in action](https://vtbag.pages.dev/crossing/vanilla/1/)

src/vanilla.ts

@@ -15,6 +15,13 @@ function init() {
 		self.crossingStorage = crossing.fun;
 	}
 
+	document.addEventListener('astro:after-preparation', () => {
+		pageSwap();
+	});
+	document.addEventListener('astro:after-swap', () => {
+		pageReveal();
+	});
+
 	self.addEventListener('onpageswap' in self ? 'pageswap' : 'pagehide', pageSwap, { once: true });
 	self.addEventListener('onpagereveal' in self ? 'pagereveal' : 'DOMContentLoaded', pageReveal, {
 		once: true,
@@ -32,13 +39,6 @@ function pageSwap() {
 
 
 function pageReveal() {
-	if (
-		performance?.navigation?.type === 1 ||
-		// @ts-expect-error
-		('navigation' in self && self.navigation?.navigationType === 'reload')
-	) {
-		return;
-	}
 	let values;
 	let storage;
 	if ((storage = self.crossingStorage)) {
@@ -47,7 +47,15 @@ function pageReveal() {
 		storage = top!.sessionStorage;
 		values = JSON.parse(storage.getItem('@vtbag/element-crossing') ?? '[]');
 	}
-	restore(values);
+	top!.sessionStorage.removeItem('@vtbag/element-crossing');
+	self.crossingStorage?.removeItem('@vtbag/element-crossing');
+	if (
+		performance?.navigation?.type !== 1 &&
+		// @ts-expect-error
+		('navigation' in self && self.navigation?.navigationType !== 'reload')
+	) {
+		restore(values);
+	}
 }
 
 function retrieve() {
@@ -181,12 +189,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) => {
@@ -229,8 +237,8 @@ function restore(values: ElementSpec[]) {
 						}
 						animations.forEach(
 							(a) =>
-								(a.currentTime =
-									~~(s.value ?? '0') + (new Date().getTime() - elementSpec.timestamp))
+							(a.currentTime =
+								~~(s.value ?? '0') + (new Date().getTime() - elementSpec.timestamp))
 						);
 						break;
 					case 'elem':