Improves calendar navigation animation

Replaces the setTimeout-based animation with the Web Animations API for smoother transitions.

This change also introduces an event to notify other managers when the navigation animation is complete, allowing them to synchronize their states.

src/constants/EventTypes.ts

@@ -25,6 +25,7 @@ export const EventTypes = {
   WEEK_CHANGED: 'calendar:weekchanged',
   WEEK_INFO_UPDATED: 'calendar:weekinfoupdated',
   WEEK_CONTENT_RENDERED: 'calendar:weekcontentrendered',
+  NAVIGATION_ANIMATION_COMPLETE: 'calendar:navigationanimationcomplete',
   NAV_PREV: 'calendar:navprev',
   NAV_NEXT: 'calendar:navnext',
   NAV_TODAY: 'calendar:navtoday',

src/managers/NavigationManager.ts

@@ -152,29 +152,37 @@ export class NavigationManager {
     // Render new content for target week
     this.renderWeekContent(newGrid, targetWeek);
 
-    // Animate transition (POC animation)
-    requestAnimationFrame(() => {
-      // Slide out current grid
-      (currentGrid as HTMLElement).style.transform = direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)';
-      (currentGrid as HTMLElement).style.opacity = '0.5';
+    // Animate transition using Web Animations API
+    const slideOutAnimation = (currentGrid as HTMLElement).animate([
+      { transform: 'translateX(0)', opacity: '1' },
+      { transform: direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)', opacity: '0.5' }
+    ], {
+      duration: 400,
+      easing: 'ease-in-out',
+      fill: 'forwards'
+    });
 
-      // Cleanup: Remove all old grids except the new one after animation
-      setTimeout(() => {
+    const slideInAnimation = newGrid.animate([
+      { transform: direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)' },
+      { transform: 'translateX(0)' }
+    ], {
+      duration: 400,
+      easing: 'ease-in-out',
+      fill: 'forwards'
+    });
+
+    // Handle animation completion
+    slideInAnimation.addEventListener('finish', () => {
+      // Cleanup: Remove all old grids except the new one
       const allGrids = container.querySelectorAll('swp-grid-container');
-        // Keep only the newest grid (last one), remove all others
       for (let i = 0; i < allGrids.length - 1; i++) {
         allGrids[i].remove();
       }
-      }, 450);
 
-      // Slide in new grid
-      newGrid.style.transform = 'translateX(0)';
-      
-      // Wait for new grid animation to complete before updating state
-      setTimeout(() => {
+      // Reset positioning
       newGrid.style.position = 'relative';
       
-        // Only now is the animation truly complete
+      // Update state
       this.currentWeek = new Date(targetWeek);
       this.animationQueue--;
       
@@ -190,8 +198,13 @@ export class NavigationManager {
         weekEnd: DateUtils.addDays(this.currentWeek, 6)
       });
 
+      // Emit animation complete event for ScrollManager
+      this.eventBus.emit(EventTypes.NAVIGATION_ANIMATION_COMPLETE, {
+        direction,
+        weekStart: this.currentWeek
+      });
+      
       console.log(`NavigationManager: Completed ${direction} animation`);
-      }, 400); // Wait for slide-in animation to complete
     });
   }
 

src/managers/ScrollManager.ts

@@ -33,9 +33,13 @@ export class ScrollManager {
   }
 
   private subscribeToEvents(): void {
+    // Handle navigation animation completion - sync time axis position
+    eventBus.on(EventTypes.NAVIGATION_ANIMATION_COMPLETE, () => {
+      console.log('ScrollManager: Navigation animation complete');
+      this.syncTimeAxisPosition();
+      this.setupScrolling();
+    });
 
-    // Handle new period shown
-    //we need to subscribe to appropriate event and then call setupScrolling() again
     
     // Handle window resize
     window.addEventListener('resize', () => {