better circuits

assets/scripts/animations.js

@@ -0,0 +1,62 @@
+'use strict'
+
+const body = document.documentElement || document.body;
+function setScrollAmount() {
+  body.style.setProperty("--scrollLengthPx", body.scrollTop);
+}
+setScrollAmount();
+document.addEventListener("scroll", setScrollAmount);
+document.addEventListener("resize", setScrollAmount);
+function rippleListener(el) {
+  return(evt) => {
+    const rects = Array.from(evt.target.getClientRects());
+    Array.from(evt.target.children).forEach(child => {
+      rects.push(...Array.from(child.getClientRects()));
+    });
+    rects.forEach(rect => {
+      const {top, left, width, height} = rect;
+      const effects = body.querySelector("#effects");
+      const newEffect = document.createElement("div");
+      newEffect.classList.add("effect-instance");
+      const padding = '10rem';
+      newEffect.style.top = `calc(${
+        top + window.scrollY
+      }px - ${padding})`;
+      newEffect.style.left = `calc(${
+        left + window.scrollX
+      }px - ${padding})`;
+      newEffect.style.width = `calc(${
+        width
+      }px + 2 * ${padding})`;
+      newEffect.style.height = `calc(${
+        height
+      }px + 2 * ${padding})`;
+      effects.appendChild(newEffect);
+      const reverser = () => {
+        newEffect.getAnimations().forEach(anim => {
+          if (anim.currentTime < 100) {
+            anim.pause();
+            effects.removeChild(newEffect);
+            return;
+          }
+          anim.pause();
+          anim.updatePlaybackRate(0.25);
+          anim.reverse();
+          anim.addEventListener('finish', () => {
+            if (effects.contains(newEffect)) {
+              effects.removeChild(newEffect);
+            }
+          });
+        });
+      };
+      el.addEventListener('mouseleave', reverser);
+      el.addEventListener('blur', reverser);
+    });
+  }
+}
+Array.from(
+  document.querySelectorAll('a[href],.nav-toggle-button,button,input')
+).forEach(el => {
+  el.addEventListener('mouseenter', rippleListener(el));
+  el.addEventListener('focus', rippleListener(el));
+});