fix link-hover animation glitch

site/_includes/base.njk

@@ -41,27 +41,37 @@ title: Joshua's Homepage
     document.addEventListener("scroll", setScrollAmount);
     document.addEventListener("resize", setScrollAmount);
     function rippleListener(el) {
-      return (evt) => {
-        const {
-          top,
-          right,
-          bottom,
-          left,
-        } = evt.target.getBoundingClientRect();
+      return(evt) => {
+        const {top, right, bottom, left} = evt.target.getBoundingClientRect();
         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(${right - left}px + 2 * ${padding})`;
-        newEffect.style.height = `calc(${bottom - top}px + 2 * ${padding})`;
-        newEffect.style.borderRadius = `${Math.min(bottom - top, right - left) / 2}px`;
+        newEffect.style.top = `calc(${
+          top + window.scrollY
+        }px - ${padding})`;
+        newEffect.style.left = `calc(${
+          left + window.scrollX
+        }px - ${padding})`;
+        newEffect.style.width = `calc(${
+          right - left
+        }px + 2 * ${padding})`;
+        newEffect.style.height = `calc(${
+          bottom - top
+        }px + 2 * ${padding})`;
+        newEffect.style.borderRadius = `${
+          Math.min(bottom - top, right - left) / 2
+        }px`;
         effects.appendChild(newEffect);
         const reverser = () => {
           newEffect.getAnimations().forEach(anim => {
+            if (anim.currentTime < 100) {
+              anim.pause();
+              effects.removeChild(newEffect);
+              return;
+            }
             anim.pause();
-            anim.updatePlaybackRate(5);
+            anim.updatePlaybackRate(1.5);
             anim.reverse();
             anim.addEventListener('finish', () => {
               if (effects.contains(newEffect)) {
@@ -69,14 +79,16 @@ title: Joshua's Homepage
               }
             });
           });
-        }
+        };
         el.addEventListener('mouseleave', reverser);
         el.addEventListener('blur', reverser);
       }
     }
-    Array.from(document.querySelectorAll('a[href],.nav-toggle-button')).forEach(el => {
+    Array.from(
+      document.querySelectorAll('a[href],.nav-toggle-button,button,input[type="button"],input[type="submit"],input[type="reset"]')
+    ).forEach(el => {
       el.addEventListener('mouseenter', rippleListener(el));
       el.addEventListener('focus', rippleListener(el));
     });
   </script>
-</html>
+</html>

site/_includes/css/site.css

@@ -643,5 +643,5 @@ body .isso-post-action {
   position: absolute;
   border-radius: 0.5rem;
   background: radial-gradient(ellipse farthest-side at 50% 50%, var(--c-accent) 25%, transparent);
-  animation: 5s ease normal forwards ripple;
+  animation: 10s ease-in normal forwards ripple;
 }