Skip to content

Commit 6c34f14

Browse files
BobbieGoedeBobbieGoede
committed
docs: move animation configuration to app config
1 parent 196c9e8 commit 6c34f14

File tree

13 files changed

+132
-49
lines changed

13 files changed

+132
-49
lines changed

‎docs/app.config.ts

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,112 @@ export default defineAppConfig({
3434
edit: 'https://github.com/vueuse/motion/docs/edit/main/content',
3535
},
3636
},
37+
38+
motions: {
39+
common: {
40+
initial: {
41+
y: 100,
42+
opacity: 0,
43+
transition: { mass: 0.5, damping: 10 },
44+
},
45+
visibleOnce: {
46+
y: 0,
47+
opacity: 1,
48+
transition: { mass: 0.5, damping: 10 },
49+
},
50+
},
51+
a: {
52+
initial: {
53+
y: '0em',
54+
opacity: 1,
55+
scaleY: 1.15,
56+
scaleX: 0.95,
57+
transition: { damping: 5, mass: 1 },
58+
},
59+
visibleOnce: {
60+
y: '0em',
61+
opacity: 1,
62+
rotate: 0,
63+
scaleY: 1,
64+
scaleX: 1,
65+
transition: { damping: 5, mass: 1 },
66+
},
67+
hovered: {
68+
scaleY: 1.05,
69+
scaleX: 1.05,
70+
rotate: -0.25,
71+
transition: { damping: 5, mass: 1 },
72+
},
73+
tapped: {
74+
scaleY: 0.95,
75+
scaleX: 0.95,
76+
rotate: 0.25,
77+
transition: { damping: 5, mass: 1 },
78+
},
79+
},
80+
codeGroupButton: {
81+
initial: { scaleY: 1, scaleX: 1, transition: { damping: 5, mass: 0.25 } },
82+
hovered: {
83+
scaleY: 1.15,
84+
scaleX: 0.9,
85+
transition: { damping: 5, mass: 0.25 },
86+
},
87+
tapped: {
88+
scaleY: 0.5,
89+
scaleX: 1.15,
90+
transition: { damping: 5, mass: 0.25 },
91+
},
92+
},
93+
pre: {
94+
initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
95+
visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
96+
},
97+
code: {
98+
initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
99+
visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
100+
},
101+
ul: {
102+
initial: { x: 100, opacity: 0 },
103+
visibleOnce: { x: 0, opacity: 1 },
104+
},
105+
li: {
106+
initial: { x: 100, opacity: 0 },
107+
hovered: {
108+
x: 10,
109+
opacity: 1,
110+
transition: { mass: 0.5, damping: 5, delay: 0 },
111+
},
112+
visibleOnce: {
113+
x: 0,
114+
opacity: 1,
115+
transition: { mass: 0.5, damping: 5 },
116+
},
117+
},
118+
headers: {
119+
h1: {
120+
initial: {
121+
y: 100,
122+
opacity: 0,
123+
transition: { mass: 0.85, damping: 10 },
124+
},
125+
visibleOnce: {
126+
y: 0,
127+
opacity: 1,
128+
transition: { mass: 0.85, damping: 10 },
129+
},
130+
},
131+
common: {
132+
initial: {
133+
y: 100,
134+
opacity: 0,
135+
transition: { mass: 0.75, damping: 10 },
136+
},
137+
visibleOnce: {
138+
y: 0,
139+
opacity: 1,
140+
transition: { mass: 0.75, damping: 10 },
141+
},
142+
},
143+
},
144+
},
37145
})

‎docs/components/content/PresetSection.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ const { apply, set } = useMotion(demoElement, {
5454
})
5555
5656
const replayInstance = useMotion(replayButton, {
57+
...useAppConfig().motions.codeGroupButton,
5758
initial: {
59+
...useAppConfig().motions.codeGroupButton.initial,
5860
rotate: 0,
5961
},
6062
})

‎docs/components/content/ProseA.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@ defineProps({
2525
<template>
2626
<Motion
2727
is="span"
28-
:initial="{ y: '0em', opacity: 1, scaleY: 1.15, scaleX: 0.95, transition: { damping: 5, mass: 1 } }"
29-
:visible-once="{ y: '0em', opacity: 1, rotate: 0, scaleY: 1, scaleX: 1, transition: { damping: 5, mass: 1 } }"
30-
:hovered="{ scaleY: 1.05, scaleX: 1.05, rotate: -0.25, transition: { damping: 5, mass: 1 } }"
31-
:tapped="{ scaleY: 0.95, scaleX: 0.95, rotate: 0.25, transition: { damping: 5, mass: 1 } }"
28+
v-bind="$nuxt._appConfig.motions.a"
3229
style="display: inline-block"
3330
>
3431
<NuxtLink :href="href" :target="target">

‎docs/components/content/ProseCode.vue

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<!-- <template>
2-
<Motion
3-
is="code"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
6-
>
7-
<slot />
8-
</Motion>
9-
</template> -->
10-
111
<script setup lang="ts">
122
import type { PropType } from 'vue'
133
@@ -59,8 +49,7 @@ const { ui } = useUI('content.prose.code', undefined, config, undefined, true)
5949

6050
<template>
6151
<Motion
62-
:initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
63-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
52+
v-bind="$nuxt._appConfig.motions.code"
6453
class="relative prose-code" :class="!!filename && ui.wrapper"
6554
>
6655
<div v-if="filename && !hideHeader" :class="ui.header">

‎docs/components/content/ProseH1.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<Motion
33
is="h1"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .85, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .85, damping: 10 } }"
4+
v-bind="$nuxt._appConfig.motions.headers.h1"
65
>
76
<slot />
87
</Motion>

‎docs/components/content/ProseH2.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<Motion
33
is="h2"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .75, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .75, damping: 10 } }"
4+
v-bind="$nuxt._appConfig.motions.headers.common"
65
>
76
<slot />
87
</Motion>

‎docs/components/content/ProseH3.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<Motion
33
is="h3"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
4+
v-bind="$nuxt._appConfig.motions.headers.common"
65
>
76
<slot />
87
</Motion>

‎docs/components/content/ProseH4.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<Motion
33
is="h4"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
4+
v-bind="$nuxt._appConfig.motions.headers.common"
65
>
76
<slot />
87
</Motion>

‎docs/components/content/ProseH5.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<Motion
33
is="h5"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
4+
v-bind="$nuxt._appConfig.motions.headers.common"
65
>
76
<slot />
87
</Motion>

‎docs/components/content/ProseP.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<Motion
33
is="p"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .5, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .5, damping: 10 } }"
4+
v-bind="$nuxt._appConfig.motions.common"
65
>
76
<slot />
87
</Motion>

0 commit comments

Comments
 (0)