style: streamline banner behavior and transitions for improved performance and responsiveness across layouts

Author: AndyWang505

src/components/Banner.astro

@@ -41,7 +41,6 @@ if (!isExternal && src) {
   <div
     id="banner-wrapper"
     class="absolute z-10 w-full overflow-hidden"
-    style="top: 0"
   >
     <div
       id="banner"

src/layouts/Layout.astro

@@ -157,26 +157,15 @@ const bannerOffset = (() => {
   }
 
   .enable-banner #banner-wrapper {
-    height: var(--banner-height);
-    top: 0;
-    will-change: height, top;
-    transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-                top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  .enable-banner #banner {
-    height: var(--banner-height);
-    will-change: height;
-    transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  body.is-home.enable-banner #banner-wrapper {
     height: var(--banner-height-home);
     top: calc(-1 * var(--banner-height-extend));
+    transform: translateY(0);
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 
-  body.is-home.enable-banner #banner {
-    height: var(--banner-height-home);
+  .enable-banner #banner {
+    height: 100%;
   }
 
   #main-grid {
@@ -195,28 +184,27 @@ const bannerOffset = (() => {
     height: calc(var(--banner-height-home) - 4.5rem);
   }
 
-  /* Mobile banner height override - keep base height on mobile */
+  /* Mobile: disable banner expansion */
   @media (max-width: 768px) {
-    .enable-banner #banner-wrapper {
-      height: var(--banner-height) !important;
-      top: 0 !important;
-    }
-
-    .enable-banner #banner {
-      height: var(--banner-height) !important;
+    body.is-home.enable-banner #banner-wrapper {
+      transform: translateY(0) !important;
     }
 
     .enable-banner #top-row {
       height: calc(var(--banner-height) - 4.5rem) !important;
     }
   }
 
-  /* Ensure main-grid translateY only applies on desktop for home page */
+  /* Desktop: banner expansion on home page */
   @media (min-width: 769px) {
+    body.is-home.enable-banner #banner-wrapper {
+      transform: translateY(var(--banner-height-extend));
+    }
+
     body.is-home.enable-banner #main-grid {
       transform: translateY(var(--banner-height-extend));
     }
-    
+
     body.is-home.enable-banner #top-row {
       height: calc(var(--banner-height-home) - 4.5rem) !important;
     }

src/scripts/banner.ts

@@ -71,27 +71,24 @@ export function initBannerAndTransitions(): void {
       }
     });
 
-    // handle visit start - prepare animation
-    (window as any).swup.hooks.on('visit:start', () => {
-      // increase page height to prevent scrolling jump
-      const heightExtend = document.getElementById('page-height-extend');
-      if (heightExtend) {
-        heightExtend.classList.remove('hidden');
-      }
-    });
-
-    // handle content replace - trigger banner resize AFTER new content is in DOM
-    // so the transition is visible during the new page's fade-in, not the old page's fade-out
-    (window as any).swup.hooks.on('content:replace', () => {
-      const currentPath = window.location.pathname;
-      const isTargetHome = pathsEqual(currentPath, '/');
+    // handle visit start - update banner height immediately on click for synchronized animation
+    (window as any).swup.hooks.on('visit:start', (visit: any) => {
+      // change is-home immediately so banner animates in sync with content transition
+      const targetPath = new URL(visit.to.url, window.location.origin).pathname;
+      const isTargetHome = pathsEqual(targetPath, '/');
       const hasIsHome = document.body.classList.contains('is-home');
 
       if (isTargetHome && !hasIsHome) {
         document.body.classList.add('is-home');
       } else if (!isTargetHome && hasIsHome) {
         document.body.classList.remove('is-home');
       }
+
+      // increase page height to prevent scrolling jump
+      const heightExtend = document.getElementById('page-height-extend');
+      if (heightExtend) {
+        heightExtend.classList.remove('hidden');
+      }
     });
 
     // handle visit end