Added animations

css/general.css

@@ -334,6 +334,7 @@ nav li a:focus::after{
   }
   100% {
     transform: translateY(0px);
+    opacity: 1;
   }
 }
 @keyframes slidein-2 {
@@ -346,6 +347,26 @@ nav li a:focus::after{
   }
   100% {
     transform: translateY(0px);
+    opacity: 1;
+  }
+}
+@keyframes slidein-side {
+  0% {
+    transform: translateX(-100px);
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .slide-animation {
+    animation: slidein-side ease 1s;
   }
 }
 
@@ -861,7 +882,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
 
 .prize-desc:hover > .prize-content {
   transform: rotate3d(0, 1, 0, 360deg);
-  transition: 0.5s;
+  transition: ease-in-out 0.5s;
 }
 
 .prize-laurel {
@@ -872,15 +893,15 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
 
 .prize-title {
   position: absolute;
-  color: rgb(77, 218, 211);
+  color: rgb(167, 146, 234);
   font-size: 25px;
-  margin-bottom: 45px;
+  margin-bottom: 60px;
 }
 
 .prize-content {
   color:rgb(129, 218, 126);
   font-size: 20px;
-  height: 20px;
+  height: 25px;
   position: absolute;
 }
 

index.html

@@ -185,7 +185,7 @@
                         </div>
                     </div>
                 </article>
-                <article>
+                <article id="signup-article">
                     <h2 id="signup-header">Signup Instructions</h2>
                     <div id="steps-card">
                         <div id="signup-container">
@@ -471,6 +471,6 @@
     All Rights Reserved
 </footer>
 <script src="js/scroll_nav.js"></script>
-<script src="js/timeline.js"></script>
+<script src="js/scroll_element.js"></script>
 </body>
 </html>

js/scroll_element.js

@@ -0,0 +1,20 @@
+const observer = new IntersectionObserver(entries => {
+    // Loop over the entries
+    entries.forEach(entry => {
+      // If the element is visible
+      if (entry.isIntersecting) {
+        // Add the animation class
+        entry.target.classList.add('slide-animation');
+      }
+    });
+  });
+  
+  observer.observe(document.querySelector('#event-main-box'));
+  observer.observe(document.querySelector('#timeline'));
+  observer.observe(document.querySelector('#signup-article'));
+  observer.observe(document.querySelector('#rules-description'));
+  observer.observe(document.querySelector('#guidelines'));
+  observer.observe(document.querySelector('#code-of-conduct'));
+  observer.observe(document.querySelector('#photo-release-container'));
+  observer.observe(document.querySelector('#prizes-container'));
+  observer.observe(document.querySelector('#team-container'));