Pre-launch: Animation

layouts/partials/page-transition.html

@@ -1,32 +1,38 @@
 <style>
   :root{
-    --wipe-duration: .2s;
-    --wipe-ease: cubic-bezier(.22,.61,.36,1);
+    --wipe-duration: .1s;
+    --wipe-ease: cubic-bezier(1,.22,.22,1);
     --wipe-color: #fff;
   }
 
   .wipe-overlay{
-    position: fixed; inset: 0;
+    position: fixed;
+    inset: 0;
     background: var(--wipe-color);
     z-index: 2147483647;
     pointer-events: none;
-    transform: translateX(0);
-    transition: transform var(--wipe-duration) ease-in-out;
+    opacity: 1;
+    transition: opacity var(--wipe-duration) var(--wipe-ease);
   }
 
-  .wipe-overlay.no-trans{ transition: none; }
+  .wipe-overlay.no-trans{
+    transition: none;
+  }
 
-  /* Tijdens reveal: schuif naar rechts uit beeld */
-  .wipe-overlay.is-revealing{ transform: translateX(100%); }
+  /* Na pageload: fade naar transparant */
+  .wipe-overlay.is-revealing{
+    opacity: 0;
+  }
 
-  /* Bij binnenkomen nieuwe pagina: start links buiten beeld, schuif naar binnen */
-  .wipe-overlay.pre-enter{ transform: translateX(-100%); }
-  .wipe-overlay.is-covering{ transform: translateX(0); }
+  /* Bij navigatie: fade weer naar volledig zichtbaar */
+  .wipe-overlay.is-covering{
+    opacity: 1;
+  }
 
   @media (prefers-reduced-motion: reduce){
     .wipe-overlay{
       transition: none !important;
-      transform: translateX(100%) !important;
+      opacity: 0 !important;
     }
   }
 </style>
@@ -39,15 +45,18 @@
   if (!wipe) return;
 
   function startReveal(){
+    // overlay van 1 → 0 (fade-out)
     wipe.classList.remove('no-trans');
     requestAnimationFrame(function(){
       wipe.classList.add('is-revealing');
+      wipe.classList.remove('is-covering');
     });
   }
 
+  // Bij binnenkomst pagina: reset + fade-out
   window.addEventListener('pageshow', function () {
     wipe.classList.add('no-trans');
-    wipe.classList.remove('pre-enter','is-covering','is-revealing');
+    wipe.classList.remove('is-covering', 'is-revealing');
     requestAnimationFrame(startReveal);
   });
 
@@ -66,26 +75,20 @@
     var here = new URL(window.location.href);
     var url  = new URL(a.href, here);
 
+    // externe link / nieuwe tab / download → negeren
     if (url.origin !== here.origin) return;
     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
     if (a.target === '_blank' || a.hasAttribute('download')) return;
 
     var samePath   = normPath(url.pathname) === normPath(here.pathname);
     var sameSearch = url.search === here.search;
-
-    if (samePath && sameSearch) {
-      return;
-    }
+    if (samePath && sameSearch) return;
 
     e.preventDefault();
 
-    wipe.classList.add('no-trans');
-    wipe.classList.remove('is-revealing','is-covering');
-    wipe.classList.add('pre-enter');
-    void wipe.offsetHeight;
-
-    wipe.classList.remove('no-trans');
-    wipe.classList.remove('pre-enter');
+    // reset naar transparant, dan fade naar opaque
+    wipe.classList.remove('no-trans', 'is-revealing');
+    void wipe.offsetHeight; // force reflow zodat transition altijd triggert
     wipe.classList.add('is-covering');
 
     var go = function () {