fix: remove redundant GSAP class from ContactSection and update toggle actions for animations

Author: jonaspm

src/components/ContactSection.astro

@@ -4,7 +4,7 @@
 <section id="contact" class="py-8 scroll-mt-20 gsap-section">
   <h2 class="mb-12 text-center text-3xl text-grayblue-100 font-medium gsap-fade-up">Get in Touch</h2>
   <div class="flex justify-center gsap-fade-up">
-    <div class="tidycal-embed gsap-fade-up" data-path="jperusm/15-minute-meeting"></div>
+    <div class="tidycal-embed" data-path="jperusm/15-minute-meeting"></div>
     <script src="https://asset-tidycal.b-cdn.net/js/embed.js" async></script>
   </div>
 </section>

src/components/HomeSection.astro

@@ -3,7 +3,7 @@ import socialNetworks from '@/assets/data/social-networks.json'
 import { Image } from 'astro:assets'
 import profilePicture from '@/assets/images/profile.png'
 ---
-<section id="home" class="py-8 scroll-mt-20 gsap-section">  <div class="flex flex-col items-center lg:flex-row lg:justify-between">
+<section id="home" class="py-8 scroll-mt-20">  <div class="flex flex-col items-center lg:flex-row lg:justify-between">
     <div class="mb-8 text-center lg:mb-0 lg:text-left lg:w-1/2">
       <h1 class="mb-4 text-5xl font-medium gsap-hero-stagger">Jonas Perusquia Morales</h1>
       <h2 class="mb-6 text-2xl font-light text-blue-300 gsap-hero-stagger">Chief Technology Officer</h2>

src/scripts/gsap-animations.js

@@ -6,9 +6,12 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
 gsap.registerPlugin(ScrollTrigger);
 
 export function initGSAPAnimations() {
-  if (typeof window === 'undefined') return;
-  // Animate elements with fade-up effect on scroll
+  if (typeof window === 'undefined') return;  // Animate elements with fade-up effect on scroll
   gsap.utils.toArray('.gsap-fade-up').forEach((element) => {
+    // Check if the element is inside the contact section
+    const isInsideContactSection = element.closest('#contact') !== null;
+    const toggleActions = isInsideContactSection ? 'play none play none' : 'play reverse play reverse';
+    
     gsap.fromTo(element, 
       {
         opacity: 0,
@@ -23,7 +26,7 @@ export function initGSAPAnimations() {
           trigger: element,
           start: 'top 80%',
           end: 'bottom 10%',
-          toggleActions: 'play reverse play reverse'
+          toggleActions: toggleActions
         }
       }
     );
@@ -44,9 +47,12 @@ export function initGSAPAnimations() {
         delay: index * 0.2
       }
     );
-  });
-  // Animate sections with a slight scale effect
+  });  // Animate sections with a slight scale effect
   gsap.utils.toArray('.gsap-section').forEach((element) => {
+    // Check if the element has id="contact" to avoid reversing animation
+    const isContactSection = element.id === 'contact';
+    const toggleActions = isContactSection ? 'play none play none' : 'play reverse play reverse';
+    
     gsap.fromTo(element,
       {
         opacity: 0,
@@ -61,7 +67,7 @@ export function initGSAPAnimations() {
           trigger: element,
           start: 'top 85%',
           end: 'bottom 15%',
-          toggleActions: 'play reverse play reverse'
+          toggleActions: toggleActions
         }
       }
     );