Merge pull request #119 from CSSS/dev_tech-fair-2025

jbriones1 · web-flow · commit 170107b077a4 · 2025-06-28T15:04:14.000-07:00
Tech Fair 2025 Update 2
diff --git a/public/static/js/SplitText.min.js b/public/static/js/SplitText.min.js
diff --git a/public/tech_fair/2025/index.html b/public/tech_fair/2025/index.html
@@ -8,12 +8,13 @@
     <script defer src="main.js"></script>
     <link rel="icon" type="image/png" href="/static/icons/favicon_colourful.svg" />
     <script defer src="/static/js/gsap.min.js"></script>
+    <script defer src="/static/js/SplitText.min.js"></script>
     <script defer src="/static/js/ScrollTrigger.min.js"></script>
     <!-- ScrollSmoother requires ScrollTrigger -->
     <script defer src="/static/js/ScrollSmoother.min.js"></script>
     <title>Tech Fair 2025</title>
   </head>
-  <body>
+  <body style="display: none">
     <header id="header">
       <nav>
         <a id="home-link" href="https://new.sfucsss.org" target="_blank">
@@ -94,7 +95,7 @@ <h2>What is Tech Fair?</h2>
             </div>
             <div class="chat-section">
               <h2 class="chat section-content right">ChatGPT, summarize this section</h2>
-              <div class="chat section-content left">
+              <div class="chat section-content response left">
                 <ul>
                   <li>
                     When: <strong>Wednesday, October 15, 2025</strong> from
@@ -206,7 +207,11 @@ <h2>My company is interested, what else can you tell me?</h2>
                 <strong>less than 50</strong> employees we offer a discounted price of
                 <strong>$500</strong>. <br /><br />
                 If you'd like to know more, check out our
-                <a href="" target="_blank">sponsorship package</a>. <br /><br />
+                <a
+                  href="https://drive.google.com/file/d/1ssUgmswUAd0661qMs6OpoA1GyJDQipmt/view"
+                  target="_blank"
+                  >sponsorship package</a
+                >. <br /><br />
                 Don't miss this chance to show off who you are!
               </p>
             </div>
diff --git a/public/tech_fair/2025/main.js b/public/tech_fair/2025/main.js
@@ -70,10 +70,28 @@ function setScrolledEffect() {
   });
 }
 
+function setIncrementalText() {
+  let split = SplitText.create('.response', {
+    type: 'words'
+  });
+
+  gsap.from(split.words, {
+    scrollTrigger: {
+      trigger: '.response',
+      start: 'top bottom',
+      once: true
+    },
+    autoAlpha: 0,
+    stagger: 0.05
+  });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
-  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
+  gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother);
   photos = document.querySelectorAll('.gallery-content');
+  document.body.style.display = 'block';
 
   setPopInEffect();
   setScrolledEffect();
+  setIncrementalText();
 });
