Add files via upload

affancoder · Aug 19, 2024 · 14edf67 · 14edf67
1 parent 588bf63
commit 14edf67
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   <title>Music Play</title>
   <link rel="stylesheet" href="style.css" />
   <link rel="icon" href="assests/logo.png" class="rel">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
 </head>
 
 <body>

diff --git a/script.js b/script.js
@@ -171,3 +171,36 @@ document.getElementById("previous").addEventListener("click", () => {
   masterPlay.classList.remove("fa-play-circle");
   masterPlay.classList.add("fa-pause-circle");
 });
+
+window.addEventListener("load", () => {
+  // Animate the navbar
+  gsap.from("nav", { duration: 1.5, y: -50, opacity: 0, ease: "power2.out" });
+
+  // Animate the song list containers
+  gsap.from(".container", {
+    duration: 1.5,
+    y: 50,
+    opacity: 0,
+    ease: "power2.out",
+    stagger: 0.2, // Stagger animation for multiple containers
+  });
+
+  // Animate individual song items
+  gsap.from(".songItem", {
+    duration: 1.5,
+    x: -50,
+    opacity: 0,
+    ease: "power2.out",
+    stagger: 0.1, // Stagger animation for song items
+    delay: 0.5,
+  });
+
+  // Animate the bottom player controls
+  gsap.from(".bottom", {
+    duration: 1.5,
+    y: 50,
+    opacity: 0,
+    ease: "power2.out",
+    delay: 1,
+  });
+});