From 84f9761a35f93738a6752f4bc8f20969576defe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 22 Feb 2026 09:29:43 +0100 Subject: [PATCH] fix: prevent animation flickering by checking for URL change during HTMX settlement --- assets/js/main.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index a41b66b..5307091 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -4,6 +4,8 @@ document.addEventListener('DOMContentLoaded', () => { console.log('Palina theme loaded!'); + let lastUrl = window.location.pathname; + // Staggered fade-in animation for post grid const animateGridItems = (container = document) => { const gridItems = container.querySelectorAll('.post-grid-item:not(.animated)'); @@ -20,8 +22,10 @@ document.addEventListener('DOMContentLoaded', () => { // Re-run animation and other setup when HTMX settles new content // Use document instead of document.body to persist across boosted navigation document.addEventListener('htmx:afterSettle', (event) => { - // Global page fade-in animation - only on full boosted navigations - if (event.detail.boosted) { + const currentUrl = window.location.pathname; + + // Global page fade-in animation - only on full boosted navigations if the URL changed + if (event.detail.boosted && currentUrl !== lastUrl) { const mainContent = document.getElementById('main-content'); if (mainContent) { mainContent.classList.remove('animate-fadeInUp'); @@ -29,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => { mainContent.classList.add('animate-fadeInUp'); } animateGridItems(); + lastUrl = currentUrl; } // If the settled element is the posts-container or contains grid items