From e2d4ba529d9e6b78b2bed0e1f6d00499a831a9c6 Mon Sep 17 00:00:00 2001
From: Florent Delerue <florentdelerue@hotmail.com>
Date: Tue, 12 Sep 2023 10:50:05 +0200
Subject: [PATCH] docs: improve landing demo animation (#661)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/components/home/HomeDemo.vue | 283 ++++++++++++++++++++----------
 1 file changed, 186 insertions(+), 97 deletions(-)

diff --git a/docs/components/home/HomeDemo.vue b/docs/components/home/HomeDemo.vue
index 9eaed9d252..0e1b10e80c 100644
--- a/docs/components/home/HomeDemo.vue
+++ b/docs/components/home/HomeDemo.vue
@@ -1,105 +1,194 @@
+<script setup lang="ts">
+const refs = ref([])
+const section = ref()
+const sectionVisible = ref(false)
+
+const animate = () => {
+  refs.value.forEach((element) => {
+    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>
+
 <template>
-  <Transition appear name="fade">
-    <ULandingGrid class="lg:grid-cols-10 lg:gap-8">
-      <div class="col-span-8 flex items-center">
-        <RangeExample aria-label="Range" />
-      </div>
-
-      <div class="col-span-2 row-span-2 flex items-center">
-        <RadioExample />
-      </div>
-
-      <div class="col-span-2">
-        <DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
-      </div>
-
-      <div class="col-span-6 flex flex-wrap items-center justify-between gap-1">
-        <UAvatarGroup :max="2">
-          <UAvatar
-            src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
-            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
-            alt="benjamincanac"
-            width="40"
-            height="40"
-          />
-          <UAvatar
-            src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
-            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
-            alt="Atinux"
-            width="40"
-            height="40"
-          />
-          <UAvatar
-            src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
-            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
-            alt="smarroufin"
-            width="40"
-            height="40"
-          />
-        </UAvatarGroup>
-
-        <UButton label="Button" icon="i-heroicons-pencil-square" />
-
-        <UBadge label="Badge" />
-
-        <UColorModeToggle />
-
-        <PaginationExampleBasic />
-      </div>
-
-      <div class="col-span-3 row-span-8 gap-6 flex flex-col justify-between">
-        <UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" />
-
-        <TabsExampleItemCustomSlot />
-
-        <UCard class="flex-shrink-0">
-          <div class="flex items-center gap-4 justify-center">
-            <USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
-            <div class="space-y-3 flex-1">
-              <USkeleton class="h-4 w-full" />
-              <USkeleton class="h-4 w-2/3" />
-            </div>
+  <ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8">
+    <div :ref="(el) => (refs[1] = el)" class="col-span-8 flex items-center animate-top">
+      <RangeExample />
+    </div>
+
+    <div :ref="(el) => (refs[2] = el)" class="col-span-2 row-span-2 flex items-center animate-right">
+      <RadioExample />
+    </div>
+
+    <div :ref="(el) => (refs[4] = el)" class="col-span-2 animate-left z-[50]">
+      <DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
+    </div>
+
+    <div
+      :ref="(el) => (refs[3] = el)"
+      class="col-span-6 flex flex-wrap items-center justify-between gap-1 animate-bottom"
+    >
+      <UAvatarGroup :max="2">
+        <UAvatar
+          src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
+          srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
+          alt="benjamincanac"
+          width="40"
+          height="40"
+        />
+        <UAvatar
+          src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
+          srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
+          alt="Atinux"
+          width="40"
+          height="40"
+        />
+        <UAvatar
+          src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
+          srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
+          alt="smarroufin"
+          width="40"
+          height="40"
+        />
+      </UAvatarGroup>
+
+      <UButton label="Button" icon="i-heroicons-pencil-square" />
+
+      <UBadge label="Badge" />
+
+      <UColorModeToggle />
+
+      <PaginationExampleBasic />
+    </div>
+
+    <div :ref="(el) => (refs[5] = el)" class="col-span-3 row-span-8 gap-6 flex flex-col justify-between animate-left">
+      <UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" :ui="{ shadow: 'shadow' }" />
+
+      <TabsExampleItemCustomSlot />
+
+      <UCard class="flex-shrink-0">
+        <div class="flex items-center gap-4 justify-center">
+          <USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
+          <div class="space-y-3 flex-1">
+            <USkeleton class="h-4 w-full" />
+            <USkeleton class="h-4 w-2/3" />
           </div>
-        </UCard>
-      </div>
-
-      <div class="col-span-5 row-span-2 flex flex-col">
-        <UCard :ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }" class="col-span-4 row-span-6 flex-1 flex flex-col">
-          <CommandPaletteExampleGroups />
-        </UCard>
-      </div>
-
-      <div class="col-span-2 row-span-2 gap-6 flex flex-col">
-        <CheckboxExample />
-
-        <InputExampleClearable />
-
-        <UFormGroup label="Labels">
-          <SelectMenuExampleCreatable />
-        </UFormGroup>
-
-        <UCard :ui="{ body: { padding: '!p-1' } }">
-          <VerticalNavigationExampleAvatarSlot />
-        </UCard>
-      </div>
-
-      <div class="col-span-7 row-span-6">
-        <UCard :ui="{ body: { padding: '' } }">
-          <TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
-        </UCard>
-      </div>
-    </ULandingGrid>
-  </Transition>
+        </div>
+      </UCard>
+    </div>
+
+    <div :ref="(el) => (refs[6] = el)" class="col-span-5 row-span-2 flex flex-col animate-bottom">
+      <UCard
+        :ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }"
+        class="col-span-4 row-span-6 flex-1 flex flex-col"
+      >
+        <CommandPaletteExampleGroups />
+      </UCard>
+    </div>
+
+    <div :ref="(el) => (refs[7] = el)" class="col-span-2 row-span-2 gap-6 flex flex-col animate-right ">
+      <CheckboxExample />
+
+      <InputExampleClearable />
+
+      <UFormGroup label="Labels">
+        <SelectMenuExampleCreatable />
+      </UFormGroup>
+
+      <UCard :ui="{ body: { padding: '!p-1' } }">
+        <VerticalNavigationExampleAvatarSlot />
+      </UCard>
+    </div>
+
+    <div :ref="(el) => (refs[8] = el)" class="col-span-7 row-span-6 animate-bottom">
+      <UCard :ui="{ body: { padding: '' } }">
+        <TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
+      </UCard>
+    </div>
+  </ULandingGrid>
 </template>
 
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
+<style scoped lang="postcss">
+.animate-top {
+  animation: translateDown;
+}
+
+.animate-bottom {
+  animation: translateUp;
+}
+
+.animate-left {
+  animation: translateLeft;
+}
+
+.animate-right {
+  animation-name: translateRight;
 }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+@keyframes translateDown {
+  0% {
+    transform: translate3D(0, -100px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes translateUp {
+  0% {
+    transform: translate3D(0, 100px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes translateLeft {
+  0% {
+    transform: translate3D(-100px, 0, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3D(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes translateRight {
+  0% {
+    transform: translate3D(100px, 0, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3D(0, 0, 0);
+    opacity: 1;
+  }
 }
 </style>