Skip to content

Commit d237079

Browse files
BobbieGoedeBobbieGoede
authored
docs: add documentation for <Motion> component (#192)
* docs: add documentation for `<Motion>` component * docs: disable `devLogs` to prevent infinite error loop * docs: add basic examples to components page
1 parent e0dec92 commit d237079

File tree

4 files changed

+192
-0
lines changed

4 files changed

+192
-0
lines changed

‎docs/components/content/examples/MotionComponent.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script lang="ts" setup></script>
2+
3+
<template>
4+
<div class="example-wrapper">
5+
<div class="example-hint">Scroll down to trigger motion!</div>
6+
<Motion is="p" preset="slideVisibleLeft">
7+
<div class="example-target">Text in Motion!</div>
8+
</Motion>
9+
</div>
10+
</template>
11+
12+
<style scoped>
13+
.example-wrapper {
14+
height: 200px;
15+
width: 100%;
16+
overflow-y: scroll;
17+
overflow-x: hidden;
18+
text-align: center;
19+
border: 1px solid #222;
20+
border-radius: 0.5em;
21+
}
22+
23+
.example-hint,
24+
p {
25+
display: flex;
26+
flex: 1 0;
27+
28+
align-items: center;
29+
justify-content: center;
30+
31+
height: 100%;
32+
padding: 2em;
33+
}
34+
35+
.example-target {
36+
padding: 1em;
37+
background-color: #111;
38+
border-radius: 0.5em;
39+
}
40+
</style>

‎docs/components/content/examples/MotionGroupComponent.vue

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script lang="ts" setup></script>
2+
3+
<template>
4+
<div class="example-wrapper">
5+
<div class="example-hint">Scroll down to trigger motion!</div>
6+
<MotionGroup preset="slideVisibleLeft" :duration="600">
7+
<section>
8+
<h3>Product 1</h3>
9+
<p>Description text</p>
10+
</section>
11+
<section>
12+
<h3>Product 2</h3>
13+
<p>Description text</p>
14+
</section>
15+
<section>
16+
<h3>Product 3</h3>
17+
<p>Description text</p>
18+
</section>
19+
</MotionGroup>
20+
</div>
21+
</template>
22+
23+
<style scoped>
24+
.example-wrapper {
25+
height: 200px;
26+
width: 100%;
27+
overflow-y: scroll;
28+
overflow-x: hidden;
29+
text-align: center;
30+
border: 1px solid #222;
31+
border-radius: 0.5em;
32+
}
33+
34+
.example-hint,
35+
p,
36+
section {
37+
display: flex;
38+
flex-direction: column;
39+
40+
flex: 1 0;
41+
align-items: center;
42+
justify-content: center;
43+
44+
height: 100%;
45+
padding: 2em;
46+
}
47+
48+
section {
49+
background-color: #111;
50+
height: calc(100% / 3);
51+
}
52+
53+
section h3,
54+
section p {
55+
margin: 0.5em !important;
56+
padding: 0 !important;
57+
}
58+
</style>

‎docs/content/2.features/7.components.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Components
2+
3+
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.
4+
5+
These components work similar to the directive `v-motion` usage but work better in projects using server-side rendering.
6+
7+
## `<Motion>`
8+
9+
Example of a `<Motion>` component using a motion preset on a `<p>` element:
10+
11+
```vue
12+
<template>
13+
<Motion is="p" preset="slideVisibleLeft">Text in Motion!</Motion>
14+
</template>
15+
```
16+
17+
<MotionComponent></MotionComponent>
18+
19+
## `<MotionGroup>`
20+
21+
The `<MotionGroup>` can be used to apply motion configuration to all of its child elements, this component is renderless by default and can be used as a wrapper by passing a value to the `:is` prop.
22+
23+
```vue
24+
<template>
25+
<MotionGroup preset="slideVisibleLeft" :duration="600">
26+
<section>
27+
<h3>Product 1</h3>
28+
<p>Description text</p>
29+
</section>
30+
<section>
31+
<h3>Product 2</h3>
32+
<p>Description text</p>
33+
</section>
34+
<section>
35+
<h3>Product 3</h3>
36+
<p>Description text</p>
37+
</section>
38+
</MotionGroup>
39+
</template>
40+
```
41+
42+
<MotionGroupComponent></MotionGroupComponent>
43+
44+
45+
## Props
46+
47+
The `<Motion>` and `<MotionGroup>` components allow you to define animation properties (variants) as props.
48+
49+
- **`is`**: What element should rendered (`div` by default for `<Motion>`).
50+
- **`preset`**: Motion preset to use (expects camel-case string), see [Presets](/features/presets).
51+
52+
### Variant props
53+
54+
- **`initial`**: Properties the element will have before it is mounted.
55+
- **`enter`**: Properties the element will have after it is mounted.
56+
- **`visible`**: Properties the element will have whenever it is within view. Once out of view, the `initial` properties are reapplied.
57+
- **`visible-once`**: Properties the element will have once it enters the view.
58+
- **`hovered`**: Properties the element will have when hovered.
59+
- **`focused`**: Properties the element will have when it receives focus.
60+
- **`tapped`**: Properties the element will have upon being clicked or tapped.
61+
62+
Variants can be passed as an object using the `:variants` prop.
63+
64+
The `:variants` prop combines with other variant properties, allowing for the definition of custom variants from this object.
65+
66+
Additional variant properties can be explored on the [Variants](/features/variants) page.
67+
68+
### Shorthand Props
69+
70+
We support shorthand props for quickly setting transition properties:
71+
72+
- **`delay`**
73+
- **`duration`**
74+
75+
These properties apply to `visible`, `visible-once`, or `enter` variants if specified; otherwise, they default to the `initial` variant.
76+
77+
```vue
78+
<template>
79+
<Motion
80+
:initial="{ opacity: 0, y: 100 }"
81+
:enter="{ opacity: 1, y: 0, scale: 1 }"
82+
:variants="{ custom: { scale: 2 } }"
83+
:hovered="{ scale: 1.2 }"
84+
:delay="200"
85+
:duration="1200"
86+
>
87+
Content to animate!
88+
</Motion>
89+
</template>
90+
```
91+

‎docs/nuxt.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export default defineNuxtConfig({
77
'@vueuse/motion/nuxt': resolve(__dirname, '../src/nuxt/module.ts'),
88
},
99
modules: ['@vueuse/motion/nuxt'],
10+
features: {
11+
devLogs: false,
12+
},
1013
typescript: {
1114
includeWorkspace: true,
1215
},

0 commit comments

Comments
 (0)