valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent animation flickering by checking for URL change during HTMX settlement
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-22 09:29:43 +01:00
parent 393b78a0e8
commit 84f9761a35
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/js/main.js
View File

@@ -4,6 +4,8 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
console.log('Palina theme loaded!'); console.log('Palina theme loaded!');
let lastUrl = window.location.pathname;
// Staggered fade-in animation for post grid // Staggered fade-in animation for post grid
const animateGridItems = (container = document) => { const animateGridItems = (container = document) => {
const gridItems = container.querySelectorAll('.post-grid-item:not(.animated)'); 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 // Re-run animation and other setup when HTMX settles new content
// Use document instead of document.body to persist across boosted navigation // Use document instead of document.body to persist across boosted navigation
document.addEventListener('htmx:afterSettle', (event) => { document.addEventListener('htmx:afterSettle', (event) => {
// Global page fade-in animation - only on full boosted navigations const currentUrl = window.location.pathname;
if (event.detail.boosted) {
// 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'); const mainContent = document.getElementById('main-content');
if (mainContent) { if (mainContent) {
mainContent.classList.remove('animate-fadeInUp'); mainContent.classList.remove('animate-fadeInUp');
@@ -29,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
mainContent.classList.add('animate-fadeInUp'); mainContent.classList.add('animate-fadeInUp');
} }
animateGridItems(); animateGridItems();
lastUrl = currentUrl;
} }
// If the settled element is the posts-container or contains grid items // If the settled element is the posts-container or contains grid items