feat: Changed ducky animation to use GSAP

Author: jbriones1

public/frosh/2025/index.html

@@ -38,7 +38,7 @@ <h1>Ducky Frosh 2025</h1>
       </nav>
     </div>
 
-    <div class="animated-duck-container">
+    <div id="animated-duck-container">
       <svg
         viewBox="394.13419 484.70737 250 180"
         height="180"

public/frosh/2025/main.js

@@ -3,7 +3,7 @@ const styleVars = window.getComputedStyle(document.body);
 /**
  * Animates the reeds parting when scrolling down.
  */
-function reedsParting() {
+function animateReedsParting() {
   const scrollTrigger = {
     trigger: '.hero',
     start: 'top top',
@@ -23,6 +23,28 @@ function reedsParting() {
   });
 }
 
+/**
+ * Animates the duck swimming left to right.
+ */
+function animateDucky() {
+  const duck = document.getElementById('animated-duck-container');
+
+  const start = -duck.getBoundingClientRect().width;
+  const end = window.innerWidth;
+
+  const distance = end - start;
+  const duration = distance / 100; // measured in pixels
+
+  gsap.set(duck, { left: start });
+  gsap.to('#animated-duck-container', {
+    left: end,
+    repeat: -1, // infinitely loop
+    ease: 'none',
+    repeatDelay: 4,
+    duration
+  });
+}
+
 /**
  * Makes the photos pop in from below.
  */
@@ -44,7 +66,11 @@ function imagePopIn() {
   });
 }
 
-function headerGradient() {
+/**
+ * Animation that changes the text color of the header items when
+ * scrolling down enough.
+ */
+function handleHeaderChanges() {
   gsap.to('header', {
     scrollTrigger: {
       trigger: 'main',
@@ -58,8 +84,7 @@ function headerGradient() {
   const navTrigger = {
     trigger: 'main',
     start: 'center center',
-    toggleActions: 'play none play reverse',
-    markers: true
+    toggleActions: 'play none play reverse'
   };
 
   gsap.to('header', {
@@ -76,9 +101,14 @@ function headerGradient() {
 
 window.addEventListener('load', _ => {
   gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
-  reedsParting();
-  headerGradient();
+  animateReedsParting();
+  handleHeaderChanges();
+  animateDucky();
   if (window.matchMedia('(min-width: 1280px').matches) {
     imagePopIn();
   }
+  window.addEventListener('resize', () => {
+    gsap.killTweensOf('#animated-duck-container');
+    animateDucky();
+  });
 });

public/frosh/2025/style.css

@@ -167,27 +167,18 @@ header {
     }
 }
 
-@keyframes duck-move {
-    0% {
-        left: -120%;
-    }
-
-    100% {
-        left: 120%;
-    }
-}
-
 .top-screen {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     z-index: 10;
 
-    &>.animated-duck-container {
+    &>#animated-duck-container {
         position: absolute;
         bottom: -1vh;
-        animation: duck-move 15s linear infinite;
+        left: -120vw;
+        /* Keeping this in case the animation break */
 
         &>svg {
             height: 30vh;