Merge pull request #123 from matheus-rodrigues00/main

README.md

@@ -60,15 +60,15 @@ You can now **animate** any of your **component**, **HTML** or **SVG** elements
 </template>
 ```
 
-To see more about how to use **directives**, check out [**Directive Usage**](https://motion.vueuse.org/directive-usage).
+To see more about how to use **directives**, check out [**Directive Usage**](https://motion.vueuse.org/features/directive-usage).
 
-To see more about what **properties** you can **animate**, check out [**Motion Properties**](https://motion.vueuse.org/motion-properties).
+To see more about what **properties** you can **animate**, check out [**Motion Properties**](https://motion.vueuse.org/features/motion-properties).
 
-To see more about how to **create** your own **animation** styles, check out [**Transition Properties**](https://motion.vueuse.org/transition-properties).
+To see more about how to **create** your own **animation** styles, check out [**Transition Properties**](https://motion.vueuse.org/features/transition-properties).
 
-To see more about what are **variants** and how you can **use** them, check out [**Variants**](https://motion.vueuse.org/variants).
+To see more about what are **variants** and how you can **use** them, check out [**Variants**](https://motion.vueuse.org/features/variants).
 
-To see more about how to **control** your declared **variants**, check out [**Motion Instance**](https://motion.vueuse.org/motion-instance).
+To see more about how to **control** your declared **variants**, check out [**Motion Instance**](https://motion.vueuse.org/features/motion-instance).
 
 ## Credits
 

docs/content/1.getting-started/1.introduction.md

@@ -48,12 +48,12 @@ export default {
 
 ## Usage
 
-- How to use **directives**? Check out [**Directive Usage**](/directive-usage).
+- How to use **directives**? Check out [**Directive Usage**](/features/directive-usage).
 
-- What **properties** you can **animate**? Check out [**Motion Properties**](/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**](/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**](/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**](/motion-instance).
+- How to **control** your declared **variants**? Check out [**Motion Instance**](/features/motion-instance).

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**](/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/2.features/1.directive-usage.md

@@ -28,13 +28,13 @@ 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**](/variants) page.
+The rest of the variants properties can be found on the [**Variants**](/features/variants) page.
 
 As a shorthand, you can use the `:delay` prop, that allows you to edit the delay from the element props.
 
 If you specified `visible`, `visible-once` or `enter` variant, the delay will be applied to each of them.
 
-Otherwise, the delay will be applied on the `initial` [**variant**](/variants).
+Otherwise, the delay will be applied on the `initial` [**variant**](/features/variants).
 
 ```vue
 <template>
@@ -84,7 +84,7 @@ const customEvent = () => {
 </script>
 ```
 
-In the above example, the custom object will be an instance of [**Motion Instance**](/motion-instance).
+In the above example, the custom object will be an instance of [**Motion Instance**](/features/motion-instance).
 
 ### Custom Directives
 

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**](/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**](/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/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**](/variants), with [**Transitions Declaration**](/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.
 

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**](/variants), with [**Motion Properties**](/motion-properties).
+They are one of the two parts that compose a [**Variant**](/features/variants), with [**Motion Properties**](/features/motion-properties).
 
 ## Orchestration
 

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**](/motion-properties) and an optional [**Transition Properties**](/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**](/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/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**](/directive-usage) or [**useMotion**](/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**](/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**](/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.
 

docs/content/3.api/1.use-motion.md

@@ -26,7 +26,7 @@ If the target reference is updated, the current variant will be applied to the n
 
 **Variants** must be an object or an object reference.
 
-Keys are variants names, values are [**Variants Declarations**](/variants).
+Keys are variants names, values are [**Variants Declarations**](/features/variants).
 
 ### `options`
 

docs/content/3.api/10.use-element-transform.md

@@ -16,7 +16,7 @@ If the target reference is updated, the current transform will be updated from t
 
 ### `transform`
 
-Transform is the current `target` [**Transform Properties**](/motion-properties#transform-properties) as a reactive object.
+Transform is the current `target` [**Transform Properties**](/features/motion-properties#transform-properties) as a reactive object.
 
 When you change a value, it will update the element transform property accordingly.
 

docs/content/3.api/2.use-spring.md

@@ -6,7 +6,7 @@ It has been implemented in order for you to implement Spring animations in your
 
 useSpring can be bound to a HTML or SVG element, or to a simple object.
 
-It skips the [**Variants**](/variants) system, allowing it to be as performant as using Popmotion natively, but with a nicer **API** to play with Vue refs.
+It skips the [**Variants**](/features/variants) system, allowing it to be as performant as using Popmotion natively, but with a nicer **API** to play with Vue refs.
 
 ## Parameters
 

docs/content/3.api/3.use-motions.md

@@ -12,7 +12,7 @@ Be careful about duplicating the same name, note that the name can be including
 
 useMotions exposes an object in which keys are defined from all the **v-motion** for which you defined a name value.
 
-Each values are [**Motion Instances**](/motion-instance) for the named elements.
+Each values are [**Motion Instances**](/features/motion-instance) for the named elements.
 
 ## Example
 

docs/content/3.api/4.use-motion-properties.md

@@ -1,10 +1,10 @@
 # useMotionProperties
 
-useMotionProperties is used to access [**Motion Properties**](/motion-properties) for a target element.
+useMotionProperties is used to access [**Motion Properties**](/features/motion-properties) for a target element.
 
 Motion properties are combining [**useElementStyle**](/api/use-element-style) and [**useElementTransform**](/api/use-element-transform).
 
-It allows to add another layer between variants and direct element styling, and a cleaner data format from [**variants**](/variants).
+It allows to add another layer between variants and direct element styling, and a cleaner data format from [**variants**](/features/variants).
 
 ## Parameters
 
@@ -18,7 +18,7 @@ If the target reference is updated, the current motion properties will be update
 
 ### `motionProperties`
 
-Motion properties are an object combining [**Style Properties**](/motion-properties#style-properties) and [**Transform Properties**](/motion-properties#transform-properties).
+Motion properties are an object combining [**Style Properties**](/features/motion-properties#style-properties) and [**Transform Properties**](/features/motion-properties#transform-properties).
 
 Change a value and it will be updated on the target element.
 

docs/content/3.api/5.use-motion-variants.md

@@ -1,12 +1,12 @@
 # useMotionVariants
 
-useMotionVariants is used to handle the [**Variants**](/variants) state and selection.
+useMotionVariants is used to handle the [**Variants**](/features/variants) state and selection.
 
 ## Parameters
 
 ### `variants`
 
-A [**Variants**](/variants#custom-variants) definition.
+A [**Variants**](/features/variants#custom-variants) definition.
 
 ## Exposed
 

docs/content/3.api/6.use-motion-transitions.md

@@ -16,7 +16,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**](/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.
 

docs/content/3.api/7.use-motion-controls.md

@@ -2,7 +2,7 @@
 
 useMotionControls is used to create motion controls from motion properties and motion transitions.
 
-[**Motion Instance**](/motion-instance) members are **helpers** for you to **interact** with your **element** motion **properties** with ease.
+[**Motion Instance**](/features/motion-instance) members are **helpers** for you to **interact** with your **element** motion **properties** with ease.
 
 ## Parameters
 
@@ -12,7 +12,7 @@ A [**Motion Properties**](/api/use-motion-properties) instance.
 
 ### `variants`
 
-A [**Variants**](/variants#custom-variants) definition.
+A [**Variants**](/features/variants#custom-variants) definition.
 
 ### `motionTransitions`
 
@@ -22,15 +22,15 @@ A [**Motion Transitions**](/api/use-motion-transitions) instance.
 
 ### `apply(variant)`
 
-Apply function will take a [**Variant Definition**](/variants) and apply it to the element without changing the current variant value.
+Apply function will take a [**Variant Definition**](/features/variants) and apply it to the element without changing the current variant value.
 
 It also accepts a variant key from variants parameter, that will be applied without changing the current variant name.
 
 Apply is a promise that will be resolved once all the transitions resulting from the variant you passed are done.
 
 ### `set(variant)`
 
-Set function will take a [**Variant Definition**](/variants) and apply it to the element without changing the current variant value.
+Set function will take a [**Variant Definition**](/features/variants) and apply it to the element without changing the current variant value.
 
 It also accepts a variant key from variants parameter, that will be applied without changing the current variant name.
 

docs/content/3.api/9.use-element-style.md

@@ -16,7 +16,7 @@ If the target reference is updated, the current style will be updated from the n
 
 ### `style`
 
-Style is the current `target` [**Style Properties**](/motion-properties#style-properties) as a reactive object.
+Style is the current `target` [**Style Properties**](/features/motion-properties#style-properties) as a reactive object.
 
 When you change a value, it will update the element style property accordingly.