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

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', () => {