docs: disable animations

vueuse · Oct 11, 2024 · c095b67 · c095b67
1 parent f621d2c
commit c095b67
Show file tree

Hide file tree

Showing 15 changed files with 626 additions and 234 deletions.
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -1,3 +1,135 @@
+const motions = {
+  common: {
+    initial: {
+      y: 100,
+      opacity: 0,
+      transition: { mass: 0.5, damping: 10 },
+    },
+    visibleOnce: {
+      y: 0,
+      opacity: 1,
+      transition: { mass: 0.5, damping: 10 },
+    },
+  },
+  presetSection: {
+    initial: { y: 100, opacity: 0 },
+    visibleOnce: { y: 0, opacity: 1 },
+  },
+  a: {
+    initial: {
+      y: '0em',
+      opacity: 1,
+      scale: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    visibleOnce: {
+      y: '0em',
+      opacity: 1,
+      rotate: 0,
+      scale: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    hovered: {
+      scale: 1.1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    tapped: {
+      scale: 0.95,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+  },
+  codeGroupButton: {
+    initial: {
+      scale: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    hovered: {
+      scale: 1.1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    tapped: {
+      scale: 0.95,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+  },
+  pre: {
+    initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
+    visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
+  },
+  code: {
+    initial: {
+      scaleY: 0.5,
+      opacity: 0,
+      transition: { stiffness: 250, mass: 0.5, damping: 10 },
+    },
+    visibleOnce: {
+      scaleY: 1,
+      opacity: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 10 },
+    },
+  },
+  ul: {
+    initial: { x: 100, y: 100, opacity: 0 },
+    visibleOnce: { x: 0, y: 0, opacity: 1 },
+  },
+  li: {
+    initial: { x: 40, y: 20, opacity: 0 },
+    hovered: {
+      x: 10,
+      opacity: 1,
+      transition: { mass: 1, delay: 0 },
+    },
+    visibleOnce: {
+      x: 0,
+      y: 0,
+      opacity: 1,
+      transition: { mass: 1 },
+    },
+  },
+  pageHeader: {
+    initial: { y: 100, opacity: 0, transition: { mass: 0.25, damping: 10 } },
+    visibleOnce: {
+      y: 0,
+      opacity: 1,
+      transition: { mass: 0.25, damping: 10 },
+    },
+  },
+  headers: {
+    h1: {
+      initial: {
+        y: 100,
+        opacity: 0,
+        transition: { mass: 0.85, damping: 10 },
+      },
+      visibleOnce: {
+        y: 0,
+        opacity: 1,
+        transition: { mass: 0.85, damping: 10 },
+      },
+    },
+    common: {
+      initial: {
+        y: 100,
+        opacity: 0,
+        transition: { mass: 0.75, damping: 10 },
+      },
+      visibleOnce: {
+        y: 0,
+        opacity: 1,
+        transition: { mass: 0.75, damping: 10 },
+      },
+    },
+  },
+}
+
+// disable all documentation motions
+Object.entries(motions).forEach(([_, val]) => {
+  Object.keys(val).forEach((x) => {
+    // @ts-expect-error looping through keys so should be fine
+    val[x] = {}
+  })
+})
+
 export default defineAppConfig({
   ui: {
     primary: 'cyan',
@@ -8,9 +140,9 @@ export default defineAppConfig({
     colorMode: true,
     links: [
       {
-        'icon': 'i-simple-icons-github',
-        'to': 'https://github.com/vueuse/motion',
-        'target': '_blank',
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/vueuse/motion',
+        target: '_blank',
         'aria-label': 'VueUse Motion',
       },
     ],
@@ -21,9 +153,9 @@ export default defineAppConfig({
     colorMode: false,
     links: [
       {
-        'icon': 'i-simple-icons-github',
-        'to': 'https://github.com/vueuse/motion',
-        'target': '_blank',
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/vueuse/motion',
+        target: '_blank',
         'aria-label': 'VueUse Motion',
       },
     ],
@@ -35,123 +167,5 @@ export default defineAppConfig({
     },
   },
 
-  motions: {
-    common: {
-      initial: {
-        y: 100,
-        opacity: 0,
-        transition: { mass: 0.5, damping: 10 },
-      },
-      visibleOnce: {
-        y: 0,
-        opacity: 1,
-        transition: { mass: 0.5, damping: 10 },
-      },
-    },
-    a: {
-      initial: {
-        y: '0em',
-        opacity: 1,
-        scale: 1,
-        transition: { stiffness: 250, mass: 0.5, damping: 5 },
-      },
-      visibleOnce: {
-        y: '0em',
-        opacity: 1,
-        rotate: 0,
-        scale: 1,
-        transition: { stiffness: 250, mass: 0.5, damping: 5 },
-      },
-      // hovered: {
-      //   scale: 1.05,
-      //   rotate: -0.25,
-      //   transition: { damping: 5, mass: 1 },
-      // },
-      // tapped: {
-      //   scale: 0.95,
-      //   rotate: 0.25,
-      //   transition: { damping: 5, mass: 1 },
-      // },
-      // initial: { scale: 1, transition: { stiffness: 250, mass: .5, damping: 5 }, },
-      hovered: {
-        scale: 1.1,
-        transition: { stiffness: 250, mass: 0.5, damping: 5 },
-      },
-      tapped: {
-        scale: 0.95,
-        transition: { stiffness: 250, mass: 0.5, damping: 5 },
-      },
-    },
-    codeGroupButton: {
-      initial: { scaleY: 1, scaleX: 1, transition: { damping: 5, mass: 0.25 } },
-      hovered: {
-        scale: 1.1,
-        transition: { stiffness: 250, mass: 0.5, damping: 5 },
-      },
-      tapped: {
-        scale: 0.9,
-        transition: { stiffness: 250, mass: 0.5, damping: 5 },
-      },
-    },
-    pre: {
-      initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
-      visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
-    },
-    code: {
-      initial: {
-        scaleY: 0.5,
-        opacity: 0,
-        transition: { stiffness: 250, mass: 0.5, damping: 10 },
-      },
-      visibleOnce: {
-        scaleY: 1,
-        opacity: 1,
-        transition: { stiffness: 250, mass: 0.5, damping: 10 },
-      },
-    },
-    ul: {
-      initial: { x: 100, y: 100, opacity: 0 },
-      visibleOnce: { x: 0, y: 0, opacity: 1 },
-    },
-    li: {
-      initial: { x: 40, y: 20, opacity: 0 },
-      hovered: {
-        x: 10,
-        opacity: 1,
-        transition: { mass: 1, delay: 0 },
-      },
-      visibleOnce: {
-        x: 0,
-        y: 0,
-        opacity: 1,
-        transition: { mass: 1 },
-      },
-    },
-    headers: {
-      h1: {
-        initial: {
-          y: 100,
-          opacity: 0,
-          transition: { mass: 0.85, damping: 10 },
-        },
-        visibleOnce: {
-          y: 0,
-          opacity: 1,
-          transition: { mass: 0.85, damping: 10 },
-        },
-      },
-      common: {
-        initial: {
-          y: 100,
-          opacity: 0,
-          transition: { mass: 0.75, damping: 10 },
-        },
-        visibleOnce: {
-          y: 0,
-          opacity: 1,
-          transition: { mass: 0.75, damping: 10 },
-        },
-      },
-    },
-  },
+  motions,
 })
diff --git a/docs/app.vue b/docs/app.vue
@@ -60,9 +60,19 @@ const links: PageLink[] = computed(() => [
     <TheFooter />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation ?? undefined" :links="links" />
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation ?? undefined"
+        :links="links"
+      />
     </ClientOnly>
 
     <UNotifications />
   </div>
 </template>
+
+<style>
+body {
+  font-family: 'Inter var experimental', 'Inter var', 'Inter', sans-serif;
+}
+</style>
diff --git a/docs/components/content/Face.vue b/docs/components/content/Face.vue
@@ -1,54 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-// const bigBottomCircle = ref<SVGElement>()
-// const smallBottomCircle = ref<SVGElement>()
-// const bigTopCircle = ref<SVGElement>()
 const head = ref<SVGElement>()
-// const arms = ref<SVGElement>()
-// const legs = ref<SVGElement>()
 const leftEye = ref<SVGElement>()
 const rightEye = ref<SVGElement>()
 const mouth = ref<SVGElement>()
-
-// const refs = [
-//   head,
-//   leftEye,
-//   rightEye,
-//   mouth
-// ]
-
-// refs.forEach((ref, index) => {
-//   const { variant } = useMotion(ref, {
-//     initial: {
-//       scale: 1,
-//       y: 100,
-//       opacity: 0,
-//     },
-//     enter: {
-//       y: 0,
-//       opacity: 1,
-//       transition: {
-//         type: 'spring',
-//         stiffness: 320,
-//         damping: 20,
-//         delay: index * 50,
-//         onComplete: () => {
-//           variant.value = 'levitate'
-//         },
-//       },
-//     },
-//     levitate: {
-//       y: 15,
-//       transition: {
-//         duration: 1500,
-//         repeat: Number.POSITIVE_INFINITY,
-//         ease: 'easeInOut',
-//         repeatType: 'mirror',
-//       },
-//     },
-//   })
-// })
 </script>
 
 <template>