Skip to content

Commit 8420181

Browse files
FahadLiveFahadLive
committed
Swapped maker crystal gif for a svg
1 parent 86a2694 commit 8420181

File tree

5 files changed

+90
-28
lines changed

5 files changed

+90
-28
lines changed

‎public/.DS_Store‎

-6 KB
Binary file not shown.

‎public/maker-crystal/sprite_60fps.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@keyframes play90 {
2+
0% {
3+
background-position: 0px 0px;
4+
}
5+
100% {
6+
background-position: -126720px 0px;
7+
}
8+
}
9+
.shapeshifter {
10+
animation-duration: 1500ms;
11+
animation-timing-function: steps(90);
12+
width: 1408px;
13+
height: 729px;
14+
background-repeat: no-repeat;
15+
}
16+
.shapeshifter.play {
17+
animation-name: play90;
18+
}

‎public/maker-crystal/sprite_60fps.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type="text/css" href="sprite_60fps.css"/>
4+
</head>
5+
<body>
6+
<div class="shapeshifter play" style="background-image: url(sprite_60fps.svg)"></div>
7+
</body>
8+
</html>

‎public/maker-crystal/sprite_60fps.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/views/Makers.vue‎

Lines changed: 63 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,38 @@
3232
</div>
3333
</div>
3434
</div>
35-
<div
36-
v-motion
37-
:initial="{ opacity: 0 }"
38-
:enter="{ opacity: 1 }"
39-
:transition="{ duration: 8000, ease: 'easeOut' }"
40-
class="animation-container"
41-
>
42-
<img
43-
src="/maker_crystal.gif"
44-
alt="Maker Crystal"
45-
class="fallback-image"
46-
/>
35+
<div class="animation-container">
36+
<div
37+
ref="spriteAnim"
38+
class="shapeshifter play"
39+
:style="{ backgroundImage: `url(${spriteUrl})` }"
40+
></div>
4741
</div>
4842
</div>
4943
</template>
5044

5145
<script>
52-
import { defineComponent } from "vue";
46+
import { defineComponent, ref, onMounted } from "vue";
5347
export default defineComponent({
5448
name: "MakersPage",
49+
setup() {
50+
const spriteAnim = ref(null);
51+
const spriteUrl = ref("/maker-crystal/sprite_60fps.svg"); // Update this path as needed
52+
53+
onMounted(() => {
54+
// Force animation restart
55+
if (spriteAnim.value) {
56+
spriteAnim.value.style.animation = "none";
57+
void spriteAnim.value.offsetWidth; // Trigger reflow
58+
spriteAnim.value.style.animation = "";
59+
}
60+
});
61+
62+
return {
63+
spriteAnim,
64+
spriteUrl,
65+
};
66+
},
5567
});
5668
</script>
5769

@@ -151,31 +163,46 @@ export default defineComponent({
151163
width: 100%;
152164
height: 350px;
153165
position: relative;
154-
overflow: hidden;
155-
filter: drop-shadow(0px 4px 40px rgba(12, 205, 212, 0.35));
156-
transition: filter 0.4s ease-in-out;
166+
background-color: transparent;
157167
}
158-
.fallback-image {
159-
transform: scale(1.5);
160-
transform-origin: 50% 50%;
161-
width: 100%;
162-
height: 100%;
163-
object-fit: cover;
168+
169+
@keyframes play90 {
170+
0% {
171+
background-position: 0px 0px;
172+
filter: drop-shadow(0px 4px 40px rgba(12, 205, 212, 0.35));
173+
}
174+
50% {
175+
filter: drop-shadow(0px 4px 40px rgba(12, 205, 212, 0.7));
176+
}
177+
100% {
178+
background-position: -126720px 0px;
179+
filter: drop-shadow(0px 4px 40px rgba(12, 205, 212, 0.35));
180+
}
164181
}
165182
166-
.animation {
183+
.shapeshifter {
184+
animation-duration: 3000ms;
185+
animation-timing-function: steps(90);
186+
width: 1408px;
187+
height: 729px;
188+
background-repeat: no-repeat;
167189
position: absolute;
168-
top: 0;
169-
left: 0;
170-
width: 100%;
171-
height: 100%;
190+
left: 50%;
191+
top: 50%;
192+
transform: translate(-50%, -50%);
193+
will-change: background-position; /* Optimize for animation */
194+
}
195+
196+
.shapeshifter.play {
197+
animation-name: play90;
198+
animation-iteration-count: infinite;
172199
}
173200
174201
@media (max-width: 768px) {
175202
.makers-intro {
176203
grid-template-columns: 1fr;
177204
grid-template-rows: auto auto;
178-
gap: 1.5rem;
205+
gap: 4rem;
179206
}
180207
181208
.terminal-body {
@@ -196,5 +223,13 @@ export default defineComponent({
196223
order: 2;
197224
height: 300px;
198225
}
226+
227+
.shapeshifter {
228+
transform: translate(-50%, -50%) scale(0.6);
229+
}
230+
231+
.animation-container {
232+
height: 250px;
233+
}
199234
}
200235
</style>

0 commit comments

Comments
 (0)