diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 9ef8de2..8e0fb0f 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -150,20 +150,32 @@ btn.classList.add(...activeClasses); // 2. Filter products + let visibleIndex = 0; + productCards.forEach(card => { + // Reset animation state + card.classList.remove('is-visible'); + if (category === 'all' || card.getAttribute('data-category') === category) { card.style.display = 'block'; - // Small timeout to allow display:block to apply before re-animating + + // Recalculate transition delay dynamically based on visible items + card.style.transitionDelay = `${(visibleIndex % 4) * 100}ms`; + visibleIndex++; + + // Small timeout to allow browser to register display:block before animating setTimeout(() => { card.classList.add('is-visible'); }, 50); } else { card.style.display = 'none'; - card.classList.remove('is-visible'); + // Reset delay so it doesn't affect future changes + card.style.transitionDelay = '0ms'; } }); }); }); + });