head line animate

src/components/HeadLine.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="header_line_container" ref="el">
     <h2 class="title" ref="titleRef">{{ title }}</h2>
-    <p class="line"></p>
-    <p class="desc" v-if="line1">
+    <p class="line" ref="lineRef"></p>
+    <p class="desc" v-if="line1" ref="descRef1">
       {{ line1 }}
     </p>
-    <p class="desc" v-if="line2">
+    <p class="desc" v-if="line2" ref="descRef2">
       {{ line2 }}
     </p>
   </div>
@@ -15,6 +15,9 @@
 import { ref, onMounted } from 'vue'
 const el = ref(null)
 const titleRef = ref(null)
+const lineRef = ref(null)
+const descRef1 = ref(null)
+const descRef2 = ref(null)
 const props = defineProps({
   title: {
     type: String,
@@ -30,28 +33,29 @@ onMounted(() => {
   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
-        animateCSS('bounce')
+        animateCSS(titleRef.value, 'fadeInUp')
+        animateCSS(lineRef.value, 'fadeInUp')
+        animateCSS(descRef1.value, 'fadeInUp')
+        animateCSS(descRef2.value, 'fadeInUp')
       }
     })
   })
   observer.observe(el.value)
 })
-const animateCSS = (animation, prefix = 'animate__') =>
+const animateCSS = (node, animation, prefix = 'animate__') =>
   // We create a Promise and return it
   new Promise((resolve, reject) => {
     const animationName = `${prefix}${animation}`
-    const node = titleRef.value
-
+    if (node) {
       node.classList.add(`${prefix}animated`, animationName)
-
       // When the animation ends, we clean the classes and resolve the Promise
       function handleAnimationEnd(event) {
         event.stopPropagation()
         node.classList.remove(`${prefix}animated`, animationName)
         resolve('Animation ended')
       }
-
       node.addEventListener('animationend', handleAnimationEnd, { once: true })
+    }
   })
 </script>