1

client/src/composables/useScrollAnimation.ts

@@ -1,9 +1,17 @@
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, nextTick } from 'vue'
 
 export function useScrollAnimation() {
   let observer: IntersectionObserver | null = null
 
-  const observe = () => {
+  const initObserver = async () => {
+    // Wait for DOM updates
+    await nextTick()
+    
+    // Disconnect existing observer if any
+    if (observer) {
+      observer.disconnect()
+    }
+
     observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
@@ -17,19 +25,28 @@ export function useScrollAnimation() {
       rootMargin: '50px' // Pre-load slightly before element comes into view
     })
     
-    document.querySelectorAll('.animate-slide-down, .animate-reveal').forEach(el => {
-      observer?.observe(el)
-    })
+    const elements = document.querySelectorAll('.animate-slide-down, .animate-reveal')
+    if (elements.length === 0) {
+      // Retry once if no elements found (e.g. data loaded but DOM not quite ready)
+      setTimeout(() => {
+        document.querySelectorAll('.animate-slide-down, .animate-reveal').forEach(el => {
+          observer?.observe(el)
+        })
+      }, 100)
+    } else {
+      elements.forEach(el => {
+        observer?.observe(el)
+      })
+    }
   }
 
-  onMounted(() => {
-    // Small delay to ensure DOM is ready
-    setTimeout(observe, 100)
-  })
-
   onUnmounted(() => {
     if (observer) {
       observer.disconnect()
     }
   })
+
+  return {
+    initObserver
+  }
 }