added gsap

index.html

@@ -950,8 +950,71 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
 <script>window.gtranslateSettings = {"default_language":"en","native_language_names":true,"languages":["en","fr","de","it","es","pl","hi"],"wrapper_selector":".gtranslate_wrapper","alt_flags":{"en":"usa"}}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
-
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>// GSAP animation for popup appearance
+    function showPopup() {
+        gsap.fromTo(
+            "#popup-nl",
+            { opacity: 0, scale: 0.5 },
+            { opacity: 1, scale: 1, duration: 1, ease: "power2.out" }
+        );
+    }
+
+    // Animation for popup closing and triggering main content animations
+    document.querySelectorAll('.close-nl').forEach(button => {
+        button.addEventListener("click", () => {
+            gsap.to("#popup-nl", {
+                opacity: 0,
+                scale: 0.5,
+                duration: 0.5,
+                ease: "power2.in",
+                onComplete: animateMainContent  // Trigger main content animations after popup closes
+            });
+        });
+    });
+
+    // Main content animations function
+    function animateMainContent() {
+        // Slide down game controls
+        gsap.from("#gameControls", { y: -100, opacity: 0, duration: 1, ease: "power2.out" });
+
+        // Slide in game container from the left
+        gsap.from("#gameContainer", { x: -200, opacity: 0, duration: 1, delay: 0.5, ease: "power2.out" });
+
+        // Staggered animation for snowflake elements
+        gsap.from(".snowflake", {
+            y: -100,
+            opacity: 0,
+            duration: 1,
+            delay: 1,
+            stagger: 0.1,
+            ease: "power2.out"
+        });
+
+        // Fade in header
+        gsap.from("#header", { opacity: 0, duration: 1.5, delay: 1.5, ease: "power2.out" });
+
+        // Sequential animations for interactive buttons and controls
+        gsap.from("#startButton", { scale: 0, duration: 0.8, delay: 2, ease: "elastic.out" });
+        gsap.from("#pauseBtn", { x: -50, opacity: 0, duration: 1, delay: 2.5, ease: "back.out" });
+        gsap.from("#levelSelect", { x: 50, opacity: 0, duration: 1, delay: 3, ease: "back.out" });
+
+        // Staggered poll button animations
+        gsap.from(".poll-button", {
+            y: 50,
+            opacity: 0,
+            duration: 1,
+            delay: 3.5,
+            ease: "back.out",
+            stagger: 0.2
+        });
+    }
+
+    // Call the function to show popup initially
+    showPopup();
+    </script>
+
 
 </body>
 <script>