docs: change structure

docs/app.config.ts

@@ -8,9 +8,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,17 +21,17 @@ 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',
       },
     ],
   },
   toc: {
     title: 'Table of Contents',
     bottom: {
-      edit: 'https://github.com/vueuse/motion/docs/edit/main/content',
+      edit: 'https://github.com/vueuse/motion/edit/main/content',
     },
   },
 
@@ -52,51 +52,62 @@ export default defineAppConfig({
       initial: {
         y: '0em',
         opacity: 1,
-        scaleY: 1.15,
-        scaleX: 0.95,
-        transition: { damping: 5, mass: 1 },
+        scale: 1,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
       visibleOnce: {
         y: '0em',
         opacity: 1,
         rotate: 0,
-        scaleY: 1,
-        scaleX: 1,
-        transition: { damping: 5, mass: 1 },
+        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: {
-        scaleY: 1.05,
-        scaleX: 1.05,
-        rotate: -0.25,
-        transition: { damping: 5, mass: 1 },
+        scale: 1.1,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
       tapped: {
-        scaleY: 0.95,
-        scaleX: 0.95,
-        rotate: 0.25,
-        transition: { damping: 5, mass: 1 },
+        scale: 0.95,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
     },
     codeGroupButton: {
       initial: { scaleY: 1, scaleX: 1, transition: { damping: 5, mass: 0.25 } },
       hovered: {
-        scaleY: 1.15,
-        scaleX: 0.9,
-        transition: { damping: 5, mass: 0.25 },
+        scale: 1.1,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
       tapped: {
-        scaleY: 0.5,
-        scaleX: 1.15,
-        transition: { damping: 5, mass: 0.25 },
+        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: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
-      visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
+      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, opacity: 0 },

docs/app.vue

@@ -27,14 +27,26 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
 
 // Header
 const route = useRoute()
-const links: PageLink[] = [
+const links: PageLink[] = computed(() => [
   {
-    label: 'Docs',
-    to: `/docs/getting-started`,
+    label: 'Getting started',
+    to: `/getting-started`,
     icon: 'i-heroicons-rocket-launch',
-    active: route.path.startsWith('/docs'),
+    active: route.path.startsWith('/getting-started'),
   },
-]
+  {
+    label: 'Features',
+    to: `/features/presets`,
+    icon: 'i-heroicons-rocket-launch',
+    active: route.path.startsWith('/features'),
+  },
+  {
+    label: 'Api',
+    to: `/api/use-motion`,
+    icon: 'i-heroicons-rocket-launch',
+    active: route.path.startsWith('/api'),
+  },
+])
 </script>
 
 <template>

docs/components/content/PresetSection.vue

@@ -91,16 +91,16 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
       `::code-group`,
       ...[
         '```vue [<Motion />]',
-        '<template>',
-        `  <Motion preset="${props.name}" :duration="600" />`,
-        '</template>',
+        // '<template>',
+        `<Motion preset="${props.name}" :duration="600" />`,
+        // '</template>',
         '```',
       ],
       ...[
         '```vue [v-motion]',
-        '<template>',
-        `  <div v-motion-${slugify(props.name)} :duration="600" />`,
-        '</template>',
+        // '<template>',
+        `<div v-motion-${slugify(props.name)} :duration="600" />`,
+        // '</template>',
         '```',
       ],
       ...[
@@ -149,6 +149,7 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
   flex-direction: column;
 }
 
+
 .content {
   display: flex;
   gap: 1em;

docs/components/content/ProseCode.vue

@@ -50,6 +50,7 @@ const { ui } = useUI('content.prose.code', undefined, config, undefined, true)
 <template>
   <Motion
     v-bind="$nuxt._appConfig.motions.code"
+    style="transform-origin: top;"
     class="relative prose-code" :class="!!filename && ui.wrapper"
   >
     <div v-if="filename && !hideHeader" :class="ui.header">

docs/components/global/CodeGroup.vue

@@ -52,12 +52,21 @@ const selectedTab = computed(() => tabs.value.find((_, index) => index === selec
 
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
+    <!-- v-bind="$nuxt._appConfig.motions.codeGroupButton" -->
     <div :class="ui.header">
       <Motion
         is="button"
         v-for="(tab, index) in tabs"
         :key="index"
-        v-bind="$nuxt._appConfig.motions.codeGroupButton"
+        :initial="{ scale: 1, transition: { stiffness: 250, mass: .5, damping: 5 }, }"
+        :hovered="{
+        scale: 1.1,
+        transition: { stiffness: 250, mass: .5, damping: 5 },
+      }"
+       :tapped="{
+        scale: .95,
+        transition: { stiffness: 250, mass: .5, damping: 5 },
+      }"
         tabindex="-1"
         :class="[ui.tab.base, selectedIndex === index ? ui.tab.active : ui.tab.inactive]"
         @click="selectedIndex = index"

docs/content/docs/1.getting-started/1.index.md → docs/content/1.getting-started/1.index.md

@@ -59,12 +59,12 @@ export default {
 
 ## Usage
 
-- How to use directives? Check out [Directive Usage](/docs/features/directive-usage).
+- How to use directives? Check out [Directive Usage](/features/directive-usage).
 
-- What properties you can animate? Check out [Motion Properties](/docs/features/motion-properties).
+- What properties you can animate? Check out [Motion Properties](/features/motion-properties).
 
-- How to create your own animations styles? Check out [Transition Properties](/docs/features/transition-properties).
+- How to create your own animations styles? Check out [Transition Properties](/features/transition-properties).
 
-- What are variants and how you can use them? Check out [Variants](/docs/features/variants).
+- What are variants and how you can use them? Check out [Variants](/features/variants).
 
-- How to control your declared variants? Check out [Motion Instance](/docs/features/motion-instance).
+- How to control your declared variants? Check out [Motion Instance](/features/motion-instance).

docs/content/docs/2.features/0.presets.md → docs/content/2.features/0.presets.md

@@ -6,7 +6,7 @@ toc: false
 
 It allows you to start implementing animations straight after installing the plugin in your Vue app.
 
-You can add your own presets to your app using [Custom Directives](/docs/features/directive-usage#custom-directives).
+You can add your own presets to your app using [Custom Directives](/features/directive-usage#custom-directives).
 
 If you have any ideas for new presets add an issue on [GitHub](https://github.com/vueuse/motion#issues), or reach me on [Twitter](https://twitter.com/yaeeelglx).
 

docs/content/docs/2.features/7.components.md → docs/content/2.features/1.component-usage.md

@@ -1,4 +1,4 @@
-# Components
+# Component usage
 
 vueuse/motion allows you to implement your animations directly within the template of your components without the need to wrap target elements in any additional components.
 
@@ -47,7 +47,7 @@ The `<MotionGroup>` can be used to apply motion configuration to all of its chil
 The `<Motion>` and `<MotionGroup>` components allow you to define animation properties (variants) as props.
 
 - **`is`**: What element should rendered (`div` by default for `<Motion>`).
-- **`preset`**: Motion preset to use (expects camel-case string), see [Presets](/docs/features/presets).
+- **`preset`**: Motion preset to use (expects camel-case string), see [Presets](/features/presets).
 
 ### Variant props
 
@@ -63,7 +63,7 @@ Variants can be passed as an object using the `:variants` prop.
 
 The `:variants` prop combines with other variant properties, allowing for the definition of custom variants from this object.
 
-Additional variant properties can be explored on the [Variants](/docs/features/variants) page.
+Additional variant properties can be explored on the [Variants](/features/variants) page.
 
 ### Shorthand Props
 

docs/content/docs/2.features/1.directive-usage.md → docs/content/2.features/1.directive-usage.md

@@ -28,7 +28,7 @@ You can also pass your variants as an object using the `:variants` prop.
 
 The `:variants` prop will be combined with all the other native variants properties, allowing you to define only your custom variants from this object.
 
-The rest of the variants properties can be found on the [Variants](/docs/features/variants) page.
+The rest of the variants properties can be found on the [Variants](/features/variants) page.
 
 ### Shorthand props
 
@@ -39,7 +39,7 @@ For convenience we support the following shorthand props which allow you to quic
 
 If you specified a `visible`, `visible-once` or `enter` variant, these shorthand properties will be applied to each of them.
 
-Otherwise, they will be applied on the `initial` [variant](/docs/features/variants) instead.
+Otherwise, they will be applied on the `initial` [variant](/features/variants) instead.
 
 ```vue
 <template>
@@ -61,7 +61,7 @@ Otherwise, they will be applied on the `initial` [variant](/docs/features/varian
 
 When defined from template, the target element might not be assigned to a ref.
 
-You can access motions controls using [useMotions](/docs/api/use-motions).
+You can access motions controls using [useMotions](/api/use-motions).
 
 If you want to access a v-motion, you will have to give the element a name as v-motion value.
 
@@ -90,7 +90,7 @@ const customEvent = () => {
 </script>
 ```
 
-In the above example, the custom object will be an instance of [Motion Instance](/docs/features/motion-instance).
+In the above example, the custom object will be an instance of [Motion Instance](/features/motion-instance).
 
 ### Custom Directives
 

docs/content/docs/2.features/2.composable-usage.md → docs/content/2.features/2.composable-usage.md

@@ -16,7 +16,7 @@ The target can be HTML or SVG elements, or references to these types.
 
 The second parameter are the `variants`.
 
-The [Variants Definitions](/docs/features/variants) are described in a specific page.
+The [Variants Definitions](/features/variants) are described in a specific page.
 
 ```vue
 <script setup>
@@ -37,6 +37,6 @@ const motionInstance = useMotion(target, {
 </script>
 ```
 
-Once called, the useMotion composable will return an instance of [Motion Instance](/docs/features/motion-instance).
+Once called, the useMotion composable will return an instance of [Motion Instance](/features/motion-instance).
 
 By using this motion instance members, you will be able to animate the element with ease.

docs/content/docs/2.features/3.motion-properties.md → docs/content/2.features/3.motion-properties.md

@@ -2,7 +2,7 @@
 
 Motion properties are represented by an object containing all the animatable properties of an element.
 
-They are one of the two parts that compose a [Variant](/docs/features/variants), with [Transitions Declaration](/docs/features/transition-properties).
+They are one of the two parts that compose a [Variant](/features/variants), with [Transitions Declaration](/features/transition-properties).
 
 This object contains both style and transform properties.
 
@@ -26,7 +26,7 @@ Style properties are used to decompose a regular `style` CSS string into individ
 
 The typings are the same as the regular `style` property from Vue templates.
 
-All the regular [CSS Style](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) properties are supported.
+All the regular [CSS Style](https://developer.mozilla.org/en-US/Web/CSS/Reference) properties are supported.
 
 Some keys are **forbidden** (`transition`, `rotate`, `scale`...) as they are now reserved for [Transform Properties](#transform-properties).
 
@@ -43,7 +43,7 @@ Some keys are **forbidden** (`transition`, `rotate`, `scale`...) as they are now
 
 Transform properties are used to decompose a regular `transform` CSS string into individual object keys.
 
-All the regular [CSS Transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#syntax) syntax arguments are supported.
+All the regular [CSS Transform](https://developer.mozilla.org/en-US/Web/CSS/transform#syntax) syntax arguments are supported.
 
 As an addition, you can use `x`, `y`, `z` properties, that will be converted into `translateX`, `translateY` and `translateZ`.
 

docs/content/docs/2.features/4.transition-properties.md → docs/content/2.features/4.transition-properties.md

@@ -2,7 +2,7 @@
 
 Transition properties are represented by an object containing all transition parameters of a variant.
 
-They are one of the two parts that compose a [Variant](/docs/features/variants), with [Motion Properties](/docs/features/motion-properties).
+They are one of the two parts that compose a [Variant](/features/variants), with [Motion Properties](/features/motion-properties).
 
 ## Orchestration
 

docs/content/docs/2.features/5.variants.md → docs/content/2.features/5.variants.md

@@ -2,7 +2,7 @@
 
 Variants represent an animatable state for your element.
 
-They are composed of any [Motion Properties](/docs/features/motion-properties) and an optional [Transition Properties](/docs/features/transition-properties).
+They are composed of any [Motion Properties](/features/motion-properties) and an optional [Transition Properties](/features/transition-properties).
 
 ```vue
 <div
@@ -91,7 +91,7 @@ The leave variant helps to define the state of an element when it is supposed to
 />
 ```
 
-In order to achieve a leave transition, you will have to access the [Motion Instance](/docs/features/motion-instance).
+In order to achieve a leave transition, you will have to access the [Motion Instance](/features/motion-instance).
 
 This instance exposes an helper called `leave` than can easily be mapped with the Vue transition element @leave event.
 

docs/content/docs/2.features/6.motion-instance.md → docs/content/2.features/6.motion-instance.md

@@ -1,6 +1,6 @@
 # Motion Instance
 
-Motion instance is the object exposed when binding to a target element using [v-motion](/docs/features/directive-usage) or [useMotion](/docs/features/composable-usage).
+Motion instance is the object exposed when binding to a target element using [v-motion](/features/directive-usage) or [useMotion](/features/composable-usage).
 
 It is composed of three properties, allowing you to interact with the element.
 
@@ -51,7 +51,7 @@ This is useful when used with event listeners, or any temporary modification to
 
 This is also useful for orchestration, as apply returns a promise, you can await it and chain variant applying.
 
-Apply accepts both a [Variant Declaration](/docs/features/variants) or a key from the motion instance variants.
+Apply accepts both a [Variant Declaration](/features/variants) or a key from the motion instance variants.
 
 ```vue
 <script setup lang="ts">
@@ -94,7 +94,7 @@ Stop is a function that lets you stop ongoing animations for a specific element.
 
 Calling it without argument will be stopping all the animations.
 
-Calling it with an array of [Motion Properties](/docs/features/motion-properties) keys will stop every specified key.
+Calling it with an array of [Motion Properties](/features/motion-properties) keys will stop every specified key.
 
 Calling it with a single motion property key will stop the specified key.