Skip to content

Commit ed99939

Browse files
BenToppingBenTopping
committed
misc: smoothens newtons-cradle animation, cleans up code block loading view
1 parent cb7d570 commit ed99939

File tree

4 files changed

+69
-34
lines changed

4 files changed

+69
-34
lines changed

‎src/components/experiments/CodeBlock.vue

+18-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,21 @@ onMounted(async () => {
3232

3333
<template>
3434
<div class="w-full h-full rounded-md bg-black text-white p-8 relative overflow-x-scroll">
35-
<div v-if="!codeLoaded" class="text-xl">Loading...</div>
35+
<div v-if="!codeLoaded" class="flex flex-col w-full items-center text-center">
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
height="40"
39+
viewBox="0 -960 960 960"
40+
width="40"
41+
fill="#4a5565"
42+
class="animate-pulse"
43+
>
44+
<path
45+
d="M336-240 96-480l240-240 51 51-189 189 189 189-51 51Zm288 0-51-51 189-189-189-189 51-51 240 240-240 240Z"
46+
/>
47+
</svg>
48+
<span class="text-gray-600 font-light text-center">Loading code</span>
49+
</div>
3650
<div v-else>
3751
<transition name="slide-up">
3852
<div
@@ -92,13 +106,16 @@ onMounted(async () => {
92106
.slide-up-enter-active {
93107
transition: all 0.15s ease-out;
94108
}
109+
95110
.slide-up-leave-active {
96111
transition: all 0.15s ease-out;
97112
}
113+
98114
.slide-up-enter-from {
99115
opacity: 0;
100116
transform: translateY(-20px);
101117
}
118+
102119
.slide-up-leave-to {
103120
opacity: 0;
104121
transform: translateY(-20px);

‎src/components/experiments/NewtonsCradle.vue

+14-14
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,24 @@
44
<div class="flex flex-row">
55
<div class="flex flex-row grow">
66
<div
7-
class="flex h-full bg-black w-2 rotate-15 rounded-full items-center justify-center"
7+
class="flex h-full bg-black w-2 rotate-15 rounded-full items-center justify-center z-1"
88
></div>
99
<div class="flex flex-col">
1010
<div class="w-full h-2 bg-black rounded-full relative top-2"></div>
1111
<div class="flex flex-row">
1212
<div class="flex flex-col items-center leftball">
13-
<div class="flex bg-black w-1 h-32"></div>
14-
<div class="flex w-8 h-8 bg-black rounded-full border-2 border-black"></div>
13+
<div class="flex bg-white w-1 h-32"></div>
14+
<div class="flex w-8 h-8 bg-green-400 rounded-full"></div>
1515
</div>
1616
<div v-for="index in 3" :key="index">
1717
<div class="flex flex-col items-center">
18-
<div class="flex bg-black w-1 h-32"></div>
19-
<div class="flex w-8 h-8 bg-black rounded-full border-2 border-black"></div>
18+
<div class="flex bg-white w-1 h-32"></div>
19+
<div class="flex w-8 h-8 bg-green-400 rounded-full"></div>
2020
</div>
2121
</div>
2222
<div class="flex flex-col items-center rightball">
23-
<div class="flex bg-black w-1 h-32"></div>
24-
<div class="flex w-8 h-8 bg-black rounded-full border-2 border-black"></div>
23+
<div class="flex bg-white w-1 h-32"></div>
24+
<div class="flex w-8 h-8 bg-green-400 rounded-full"></div>
2525
</div>
2626
</div>
2727
</div>
@@ -34,32 +34,32 @@
3434

3535
<style>
3636
.leftball {
37-
animation: leftball 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
37+
animation: leftball 1.25s alternate ease-in infinite;
3838
transform: rotate(0deg);
3939
transform-origin: 50% 0%;
4040
}
4141
4242
.rightball {
43-
animation: rightball 2.5s cubic-bezier(0.5, 0, 0.5, 1) 1.25s infinite both;
43+
animation: rightball 1.25s alternate ease-out infinite;
4444
transform: rotate(0deg);
4545
transform-origin: 50% 0%;
4646
}
4747
4848
@keyframes leftball {
49-
25% {
50-
transform: rotate(75deg);
49+
0% {
50+
transform: rotate(60deg);
5151
}
5252
50% {
5353
transform: rotate(0deg);
5454
}
5555
}
5656
5757
@keyframes rightball {
58-
25% {
59-
transform: rotate(-75deg);
60-
}
6158
50% {
6259
transform: rotate(0deg);
6360
}
61+
100% {
62+
transform: rotate(-60deg);
63+
}
6464
}
6565
</style>

‎src/views/CodeBlockView.vue

+22-5
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,22 @@ onMounted(async () => {
4646
<\/script>
4747
4848
<template>
49-
<div class="flex rounded-md w-full h-full bg-black text-white p-8 relative overflow-x-scroll">
50-
<div v-if="!codeLoaded" class="text-xl">Loading...</div>
49+
<div class="w-full h-full rounded-md bg-black text-white p-8 relative overflow-x-scroll">
50+
<div v-if="!codeLoaded" class="flex flex-col w-full items-center text-center">
51+
<svg
52+
xmlns="http://www.w3.org/2000/svg"
53+
height="40"
54+
viewBox="0 -960 960 960"
55+
width="40"
56+
fill="#4a5565"
57+
class="animate-pulse"
58+
>
59+
<path
60+
d="M336-240 96-480l240-240 51 51-189 189 189 189-51 51Zm288 0-51-51 189-189-189-189 51-51 240 240-240 240Z"
61+
/>
62+
</svg>
63+
<span class="text-gray-600 font-light text-center">Loading code</span>
64+
</div>
5165
<div v-else>
5266
<transition name="slide-up">
5367
<div
@@ -107,19 +121,21 @@ onMounted(async () => {
107121
.slide-up-enter-active {
108122
transition: all 0.15s ease-out;
109123
}
124+
110125
.slide-up-leave-active {
111126
transition: all 0.15s ease-out;
112127
}
128+
113129
.slide-up-enter-from {
114130
opacity: 0;
115131
transform: translateY(-20px);
116132
}
133+
117134
.slide-up-leave-to {
118135
opacity: 0;
119136
transform: translateY(-20px);
120137
}
121138
</style>
122-
123139
`
124140
</script>
125141

@@ -131,8 +147,9 @@ onMounted(async () => {
131147
<span>A Vue SFC to create a code-block given a string</span>
132148
<span>
133149
The component includes a copy button and feedback animation to copy the given code to the
134-
user's clipboard. It uses Shiki for syntax highlighting.
135-
One caveat is that it uses v-html to render the highlighted code, which can be a security risk if the string is not sanitized.
150+
user's clipboard. It uses Shiki for syntax highlighting. One caveat is that it uses v-html
151+
to render the highlighted code, which can be a security risk if the string is not
152+
sanitized.
136153
</span>
137154
<div class="flex flex-row space-x-2 py-4 items-center">
138155
<span class="py-2">Dependencies:</span>

‎src/views/NewtonsCradleView.vue

+15-14
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,24 @@ const codeBlockString: string = `
1818
<div class="flex flex-row">
1919
<div class="flex flex-row grow">
2020
<div
21-
class="flex h-full bg-black w-2 rotate-15 rounded-full items-center justify-center"
21+
class="flex h-full bg-black w-2 rotate-15 rounded-full items-center justify-center z-1"
2222
></div>
2323
<div class="flex flex-col">
2424
<div class="w-full h-2 bg-black rounded-full relative top-2"></div>
2525
<div class="flex flex-row">
2626
<div class="flex flex-col items-center leftball">
27-
<div class="flex bg-black w-1 h-32"></div>
28-
<div class="flex w-8 h-8 bg-black rounded-full border-2 border-black"></div>
27+
<div class="flex bg-white w-1 h-32"></div>
28+
<div class="flex w-8 h-8 bg-green-400 rounded-full"></div>
2929
</div>
3030
<div v-for="index in 3" :key="index">
3131
<div class="flex flex-col items-center">
32-
<div class="flex bg-black w-1 h-32"></div>
33-
<div class="flex w-8 h-8 bg-black rounded-full border-2 border-black"></div>
32+
<div class="flex bg-white w-1 h-32"></div>
33+
<div class="flex w-8 h-8 bg-green-400 rounded-full"></div>
3434
</div>
3535
</div>
3636
<div class="flex flex-col items-center rightball">
37-
<div class="flex bg-black w-1 h-32"></div>
38-
<div class="flex w-8 h-8 bg-black rounded-full border-2 border-black"></div>
37+
<div class="flex bg-white w-1 h-32"></div>
38+
<div class="flex w-8 h-8 bg-green-400 rounded-full"></div>
3939
</div>
4040
</div>
4141
</div>
@@ -48,36 +48,37 @@ const codeBlockString: string = `
4848
4949
<style>
5050
.leftball {
51-
animation: leftball 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
51+
animation: leftball 1.25s alternate ease-in infinite;
5252
transform: rotate(0deg);
5353
transform-origin: 50% 0%;
5454
}
5555
5656
.rightball {
57-
animation: rightball 2.5s cubic-bezier(0.5, 0, 0.5, 1) 1.25s infinite both;
57+
animation: rightball 1.25s alternate ease-out infinite;
5858
transform: rotate(0deg);
5959
transform-origin: 50% 0%;
6060
}
6161
6262
@keyframes leftball {
63-
25% {
64-
transform: rotate(75deg);
63+
0% {
64+
transform: rotate(60deg);
6565
}
6666
50% {
6767
transform: rotate(0deg);
6868
}
6969
}
7070
7171
@keyframes rightball {
72-
25% {
73-
transform: rotate(-75deg);
74-
}
7572
50% {
7673
transform: rotate(0deg);
7774
}
75+
100% {
76+
transform: rotate(-60deg);
77+
}
7878
}
7979
</style>
8080
81+
8182
`
8283
</script>
8384

0 commit comments

Comments
 (0)