Skip to content

Commit 71c7dfa

Browse files
BobbieGoedeBobbieGoede
committed
docs: disable animations
1 parent b9dd9ad commit 71c7dfa

File tree

15 files changed

+626
-234
lines changed

15 files changed

+626
-234
lines changed

‎docs/app.config.ts

Lines changed: 139 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,135 @@
1+
const motions = {
2+
common: {
3+
initial: {
4+
y: 100,
5+
opacity: 0,
6+
transition: { mass: 0.5, damping: 10 },
7+
},
8+
visibleOnce: {
9+
y: 0,
10+
opacity: 1,
11+
transition: { mass: 0.5, damping: 10 },
12+
},
13+
},
14+
presetSection: {
15+
initial: { y: 100, opacity: 0 },
16+
visibleOnce: { y: 0, opacity: 1 },
17+
},
18+
a: {
19+
initial: {
20+
y: '0em',
21+
opacity: 1,
22+
scale: 1,
23+
transition: { stiffness: 250, mass: 0.5, damping: 5 },
24+
},
25+
visibleOnce: {
26+
y: '0em',
27+
opacity: 1,
28+
rotate: 0,
29+
scale: 1,
30+
transition: { stiffness: 250, mass: 0.5, damping: 5 },
31+
},
32+
hovered: {
33+
scale: 1.1,
34+
transition: { stiffness: 250, mass: 0.5, damping: 5 },
35+
},
36+
tapped: {
37+
scale: 0.95,
38+
transition: { stiffness: 250, mass: 0.5, damping: 5 },
39+
},
40+
},
41+
codeGroupButton: {
42+
initial: {
43+
scale: 1,
44+
transition: { stiffness: 250, mass: 0.5, damping: 5 },
45+
},
46+
hovered: {
47+
scale: 1.1,
48+
transition: { stiffness: 250, mass: 0.5, damping: 5 },
49+
},
50+
tapped: {
51+
scale: 0.95,
52+
transition: { stiffness: 250, mass: 0.5, damping: 5 },
53+
},
54+
},
55+
pre: {
56+
initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
57+
visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
58+
},
59+
code: {
60+
initial: {
61+
scaleY: 0.5,
62+
opacity: 0,
63+
transition: { stiffness: 250, mass: 0.5, damping: 10 },
64+
},
65+
visibleOnce: {
66+
scaleY: 1,
67+
opacity: 1,
68+
transition: { stiffness: 250, mass: 0.5, damping: 10 },
69+
},
70+
},
71+
ul: {
72+
initial: { x: 100, y: 100, opacity: 0 },
73+
visibleOnce: { x: 0, y: 0, opacity: 1 },
74+
},
75+
li: {
76+
initial: { x: 40, y: 20, opacity: 0 },
77+
hovered: {
78+
x: 10,
79+
opacity: 1,
80+
transition: { mass: 1, delay: 0 },
81+
},
82+
visibleOnce: {
83+
x: 0,
84+
y: 0,
85+
opacity: 1,
86+
transition: { mass: 1 },
87+
},
88+
},
89+
pageHeader: {
90+
initial: { y: 100, opacity: 0, transition: { mass: 0.25, damping: 10 } },
91+
visibleOnce: {
92+
y: 0,
93+
opacity: 1,
94+
transition: { mass: 0.25, damping: 10 },
95+
},
96+
},
97+
headers: {
98+
h1: {
99+
initial: {
100+
y: 100,
101+
opacity: 0,
102+
transition: { mass: 0.85, damping: 10 },
103+
},
104+
visibleOnce: {
105+
y: 0,
106+
opacity: 1,
107+
transition: { mass: 0.85, damping: 10 },
108+
},
109+
},
110+
common: {
111+
initial: {
112+
y: 100,
113+
opacity: 0,
114+
transition: { mass: 0.75, damping: 10 },
115+
},
116+
visibleOnce: {
117+
y: 0,
118+
opacity: 1,
119+
transition: { mass: 0.75, damping: 10 },
120+
},
121+
},
122+
},
123+
}
124+
125+
// disable all documentation motions
126+
Object.entries(motions).forEach(([_, val]) => {
127+
Object.keys(val).forEach((x) => {
128+
// @ts-expect-error looping through keys so should be fine
129+
val[x] = {}
130+
})
131+
})
132+
1133
export default defineAppConfig({
2134
ui: {
3135
primary: 'cyan',
@@ -8,9 +140,9 @@ export default defineAppConfig({
8140
colorMode: true,
9141
links: [
10142
{
11-
'icon': 'i-simple-icons-github',
12-
'to': 'https://github.com/vueuse/motion',
13-
'target': '_blank',
143+
icon: 'i-simple-icons-github',
144+
to: 'https://github.com/vueuse/motion',
145+
target: '_blank',
14146
'aria-label': 'VueUse Motion',
15147
},
16148
],
@@ -21,9 +153,9 @@ export default defineAppConfig({
21153
colorMode: false,
22154
links: [
23155
{
24-
'icon': 'i-simple-icons-github',
25-
'to': 'https://github.com/vueuse/motion',
26-
'target': '_blank',
156+
icon: 'i-simple-icons-github',
157+
to: 'https://github.com/vueuse/motion',
158+
target: '_blank',
27159
'aria-label': 'VueUse Motion',
28160
},
29161
],
@@ -35,123 +167,5 @@ export default defineAppConfig({
35167
},
36168
},
37169

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-
scale: 1,
56-
transition: { stiffness: 250, mass: 0.5, damping: 5 },
57-
},
58-
visibleOnce: {
59-
y: '0em',
60-
opacity: 1,
61-
rotate: 0,
62-
scale: 1,
63-
transition: { stiffness: 250, mass: 0.5, damping: 5 },
64-
},
65-
// hovered: {
66-
// scale: 1.05,
67-
// rotate: -0.25,
68-
// transition: { damping: 5, mass: 1 },
69-
// },
70-
// tapped: {
71-
// scale: 0.95,
72-
// rotate: 0.25,
73-
// transition: { damping: 5, mass: 1 },
74-
// },
75-
// initial: { scale: 1, transition: { stiffness: 250, mass: .5, damping: 5 }, },
76-
hovered: {
77-
scale: 1.1,
78-
transition: { stiffness: 250, mass: 0.5, damping: 5 },
79-
},
80-
tapped: {
81-
scale: 0.95,
82-
transition: { stiffness: 250, mass: 0.5, damping: 5 },
83-
},
84-
},
85-
codeGroupButton: {
86-
initial: { scaleY: 1, scaleX: 1, transition: { damping: 5, mass: 0.25 } },
87-
hovered: {
88-
scale: 1.1,
89-
transition: { stiffness: 250, mass: 0.5, damping: 5 },
90-
},
91-
tapped: {
92-
scale: 0.9,
93-
transition: { stiffness: 250, mass: 0.5, damping: 5 },
94-
},
95-
},
96-
pre: {
97-
initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
98-
visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
99-
},
100-
code: {
101-
initial: {
102-
scaleY: 0.5,
103-
opacity: 0,
104-
transition: { stiffness: 250, mass: 0.5, damping: 10 },
105-
},
106-
visibleOnce: {
107-
scaleY: 1,
108-
opacity: 1,
109-
transition: { stiffness: 250, mass: 0.5, damping: 10 },
110-
},
111-
},
112-
ul: {
113-
initial: { x: 100, y: 100, opacity: 0 },
114-
visibleOnce: { x: 0, y: 0, opacity: 1 },
115-
},
116-
li: {
117-
initial: { x: 40, y: 20, opacity: 0 },
118-
hovered: {
119-
x: 10,
120-
opacity: 1,
121-
transition: { mass: 1, delay: 0 },
122-
},
123-
visibleOnce: {
124-
x: 0,
125-
y: 0,
126-
opacity: 1,
127-
transition: { mass: 1 },
128-
},
129-
},
130-
headers: {
131-
h1: {
132-
initial: {
133-
y: 100,
134-
opacity: 0,
135-
transition: { mass: 0.85, damping: 10 },
136-
},
137-
visibleOnce: {
138-
y: 0,
139-
opacity: 1,
140-
transition: { mass: 0.85, damping: 10 },
141-
},
142-
},
143-
common: {
144-
initial: {
145-
y: 100,
146-
opacity: 0,
147-
transition: { mass: 0.75, damping: 10 },
148-
},
149-
visibleOnce: {
150-
y: 0,
151-
opacity: 1,
152-
transition: { mass: 0.75, damping: 10 },
153-
},
154-
},
155-
},
156-
},
170+
motions,
157171
})

‎docs/app.vue

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,19 @@ const links: PageLink[] = computed(() => [
6060
<TheFooter />
6161

6262
<ClientOnly>
63-
<LazyUContentSearch :files="files" :navigation="navigation ?? undefined" :links="links" />
63+
<LazyUContentSearch
64+
:files="files"
65+
:navigation="navigation ?? undefined"
66+
:links="links"
67+
/>
6468
</ClientOnly>
6569

6670
<UNotifications />
6771
</div>
6872
</template>
73+
74+
<style>
75+
body {
76+
font-family: 'Inter var experimental', 'Inter var', 'Inter', sans-serif;
77+
}
78+
</style>

‎docs/components/content/Face.vue

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,10 @@
11
<script setup lang="ts">
22
import { ref } from 'vue'
33
4-
// const bigBottomCircle = ref<SVGElement>()
5-
// const smallBottomCircle = ref<SVGElement>()
6-
// const bigTopCircle = ref<SVGElement>()
74
const head = ref<SVGElement>()
8-
// const arms = ref<SVGElement>()
9-
// const legs = ref<SVGElement>()
105
const leftEye = ref<SVGElement>()
116
const rightEye = ref<SVGElement>()
127
const mouth = ref<SVGElement>()
13-
14-
// const refs = [
15-
// head,
16-
// leftEye,
17-
// rightEye,
18-
// mouth
19-
// ]
20-
21-
// refs.forEach((ref, index) => {
22-
// const { variant } = useMotion(ref, {
23-
// initial: {
24-
// scale: 1,
25-
// y: 100,
26-
// opacity: 0,
27-
// },
28-
// enter: {
29-
// y: 0,
30-
// opacity: 1,
31-
// transition: {
32-
// type: 'spring',
33-
// stiffness: 320,
34-
// damping: 20,
35-
// delay: index * 50,
36-
// onComplete: () => {
37-
// variant.value = 'levitate'
38-
// },
39-
// },
40-
// },
41-
// levitate: {
42-
// y: 15,
43-
// transition: {
44-
// duration: 1500,
45-
// repeat: Number.POSITIVE_INFINITY,
46-
// ease: 'easeInOut',
47-
// repeatType: 'mirror',
48-
// },
49-
// },
50-
// })
51-
// })
528
</script>
539

5410
<template>

0 commit comments

Comments
 (0)