Browse Source

Enhance Confetti Animation Logic in AreaTabs Component

- Updated confetti animation to trigger only on desktop devices, reducing distraction on mobile.
- Added media query check to ensure confetti effects are only applied at the md breakpoint and above, improving user experience across different screen sizes.
main
Bastian Masanek 1 month ago
parent
commit
1d73e150cc
  1. 3
      app/components/navigation/AreaTabs.vue

3
app/components/navigation/AreaTabs.vue

@ -146,6 +146,8 @@ watch(visibleAreas, (newAreas, oldAreas) => {
newlyAddedAreaIds.value = addedIds
// Trigger confetti for each new tab with staggered delay (wave effect)
// Only on desktop (md breakpoint and up) - too distracting on mobile
if (window.matchMedia('(min-width: 768px)').matches) {
addedIds.forEach((areaId, index) => {
setTimeout(() => {
const element = tabRefs.value[areaId]
@ -154,6 +156,7 @@ watch(visibleAreas, (newAreas, oldAreas) => {
}
}, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ...
})
}
// Clear all highlights after animation completes
// Animation timeline: glow 2x + pulse 2x + opacity fade = 2.0s

Loading…
Cancel
Save