2 files changed, 54 insertions, 3 deletions
diff --git a/assets/js/morph.js b/assets/js/morph.js
new file mode 100644
index 0000000..728ff1f
--- /dev/null
+++ b/assets/js/morph.js
@@ -0,0 +1,43 @@
+const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@._-";
+
+function morph(element, target) {
+    clearInterval(element._timer);
+
+    const start = element.textContent;
+    const length = Math.max(start.length, target.length);
+
+    let progress = 0;
+
+    element._timer = setInterval(() => {
+        progress += 0.05;
+
+        const currentLength = Math.round(
+            start.length + (target.length - start.length) * progress
+        );
+
+        let output = "";
+
+        for (let i = 0; i < currentLength; i++) {
+            if (progress > i / currentLength + 0.2 && target[i]) {
+                output += target[i];
+            } else {
+                output += CHARS[Math.floor(Math.random() * CHARS.length)];
+            }
+        }
+
+        element.textContent = output;
+
+        if (progress >= 1) {
+            clearInterval(element._timer);
+            element.textContent = target;
+        }
+    }, 15);
+}
+
+for (const link of document.querySelectorAll(".morph")) {
+    const original = link.textContent;
+    const alternate = link.dataset.alt;
+
+    link.addEventListener("mouseenter", () => morph(link, alternate));
+    link.addEventListener("mouseleave", () => morph(link, original));
+}
diff --git a/assets/js/transitions.js b/assets/js/transitions.js
index e6d7c85..3955a67 100644
--- a/assets/js/transitions.js
+++ b/assets/js/transitions.js
@@ -7,14 +7,14 @@ function transitionOut(callback) {
     document.body.style.filter = "url(#transition)"
     const src = new Number(displacement.getAttribute("scale"));
     noise.setAttribute("seed",Math.random() * 1000)
-    if (src < 1000) {
-        displacement.setAttribute("scale", src + 10 + src);
+    if (src < 100) {
+        displacement.setAttribute("scale", src + 20 + src);
         nextFunc = () => transitionOut(callback)
         requestAnimationFrame(nextFunc)
     } else {
         setTimeout(() =>{
             document.body.style.filter = ""
-        },10000);
+        },1000);
         callback()
     }
 }
@@ -52,3 +52,11 @@ if (noise && displacement) {
 } else {
     console.log("Can't do transitions!!")
 }
+
+// for when going forwards or back
+window.addEventListener("pageshow", (e) => {
+    if (e.persisted) {
+        displacement.setAttribute("scale", 200);
+        transitionIn();
+    }
+});