smoother curtain

public/js/curtain.js

@@ -24,14 +24,17 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 document.getElementById('enter-button').addEventListener('click', function() {
+    // Setting the panel to go down
     fallingImage.style.top = '0px'; // Set final position
 
+    const elementLeft = document.querySelector('.curtain-left');
+    const elementRight = document.querySelector('.curtain-right');
+
+    elementLeft.classList.add('animate-curtain-left');
+    elementRight.classList.add('animate-curtain-right');
+
+    // Hiding the button
     this.classList.add('fade-out');
-
-    // Move curtains
-    document.querySelector('.curtain-left').style.transform = 'translateX(-100%)';
-    document.querySelector('.curtain-right').style.transform = 'translateX(100%)';
-
     setTimeout(() => {
         this.style.display = 'none';
     }, 500)

src/pages/index.astro

@@ -364,7 +364,7 @@ import { Image } from 'astro:assets';
 		position: relative;
 		top: 0;
 		height: 100%;
-		transition: transform 2s ease-in-out;
+		transition: transform 2.2s ease-in-out;
 		box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
 	}
 
@@ -384,6 +384,38 @@ import { Image } from 'astro:assets';
 		transform: translateX(-20px);
 	}
 
+	.animate-curtain-left
+	{
+		animation: curtain-left 2.2s ease-in-out;
+	}
+
+	.animate-curtain-right
+	{
+		animation: curtain-right 2.2s ease-in-out;
+	}
+
+	@keyframes curtain-left {
+		0% {
+		}
+		15% {
+			transform: translateX(40px);
+		}
+		to {
+			transform:translateX(-150%);
+		}
+	}
+
+	@keyframes curtain-right {
+		0% {
+		}
+		15% {
+			transform: translateX(-40px);
+		}
+		to {
+			transform:translateX(150%);
+		}
+	}
+
 	.falling-image {
 		position: absolute;
 		top: -400px;