Skip to content

Commit 95a3951

Browse files
committed
refactor: remove decorative rings from animated background
1 parent 70fe729 commit 95a3951

File tree

1 file changed

+0
-55
lines changed

1 file changed

+0
-55
lines changed

src/routes/(components)/animated-background.svelte

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
1010
const blobs = node.querySelectorAll(".blob");
1111
const particles = node.querySelectorAll(".particle");
12-
const rings = node.querySelectorAll(".deco-ring");
1312
1413
// Create parallax effect for blobs - they move at different speeds
1514
blobs.forEach((blob, index) => {
@@ -48,22 +47,6 @@
4847
});
4948
});
5049
51-
// Animate deco-rings with rotation on scroll
52-
rings.forEach((ring, index) => {
53-
const direction = index % 2 === 0 ? 1 : -1;
54-
55-
gsap.to(ring, {
56-
rotation: direction * 180,
57-
ease: "none",
58-
scrollTrigger: {
59-
trigger: document.body,
60-
start: "top top",
61-
end: "bottom bottom",
62-
scrub: 3,
63-
},
64-
});
65-
});
66-
6750
return () => {
6851
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
6952
};
@@ -85,11 +68,6 @@
8568
<div class="blob blob-3"></div>
8669
<div class="blob blob-4"></div>
8770

88-
<!-- Decorative rings -->
89-
<div class="deco-ring deco-ring-1"></div>
90-
<div class="deco-ring deco-ring-2"></div>
91-
<div class="deco-ring deco-ring-3"></div>
92-
9371
<!-- Floating particles -->
9472
<div class="particle particle-1"></div>
9573
<div class="particle particle-2"></div>
@@ -203,39 +181,6 @@
203181
}
204182
}
205183
206-
/* Decorative rings */
207-
.deco-ring {
208-
position: absolute;
209-
border-radius: 50%;
210-
border: 1px solid color-mix(in oklch, var(--primary) 15%, transparent);
211-
will-change: transform;
212-
}
213-
214-
.deco-ring-1 {
215-
top: 10%;
216-
right: 10%;
217-
width: 300px;
218-
height: 300px;
219-
animation: deco-ring-pulse 15s ease-in-out infinite;
220-
}
221-
222-
.deco-ring-2 {
223-
bottom: 20%;
224-
left: 5%;
225-
width: 400px;
226-
height: 400px;
227-
animation: deco-ring-pulse 20s ease-in-out infinite reverse;
228-
}
229-
230-
.deco-ring-3 {
231-
top: 60%;
232-
right: 25%;
233-
width: 200px;
234-
height: 200px;
235-
animation: deco-ring-pulse 12s ease-in-out infinite;
236-
animation-delay: -5s;
237-
}
238-
239184
@keyframes deco-ring-pulse {
240185
0%,
241186
100% {

0 commit comments

Comments
 (0)