From edbbb33f69a76a7eaf458a0a483472a3857ceb73 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 12 Sep 2023 14:49:30 +0200
Subject: [PATCH] docs: improve demo animation performances

---
 docs/components/home/HomeDemo.vue | 37 ++++++++++++++++---------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/docs/components/home/HomeDemo.vue b/docs/components/home/HomeDemo.vue
index 53dc4ba5..7b1b27fe 100644
--- a/docs/components/home/HomeDemo.vue
+++ b/docs/components/home/HomeDemo.vue
@@ -1,31 +1,32 @@
 <script setup lang="ts">
 const refs = ref([])
 const section = ref()
-const sectionVisible = ref(false)
 
-const animate = () => {
+const { stop } = useIntersectionObserver(
+  section,
+  ([{ isIntersecting }]) => {
+    if (!isIntersecting) {
+      return
+    }
+
+    refs.value.forEach(element => element.style.animationPlayState = 'running')
+
+    stop()
+  },
+  { threshold: 0.3 }
+)
+
+onMounted(() => {
   refs.value.forEach((element) => {
+    if (!element) {
+      return
+    }
+
     element.style.animationFillMode = 'forwards'
     element.style.transformOrigin = 'center'
     element.style.animationPlayState = 'paused'
     element.style.animationDuration = '1s'
   })
-}
-
-useIntersectionObserver(
-  section,
-  ([{ isIntersecting }]) => {
-    sectionVisible.value = isIntersecting
-  },
-  { threshold: 0.3 }
-)
-
-onMounted(() => animate())
-
-watch(sectionVisible, () => {
-  if (sectionVisible.value) {
-    refs.value.map(element => element.style.animationPlayState = 'running')
-  }
 })
 </script>