Changed to locomotive-AOS to prevent dependency conflicts

Author: SamGu-NRX

package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "emailjs-com": "^3.2.0",
+    "locomotive-aos": "^1.0.7",
     "locomotive-scroll": "^4.1.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package.json

@@ -39,9 +39,10 @@ import React, { useEffect } from 'react';
 import { BrowserRouter, Link } from 'react-router-dom';
 import App from './App';
 import LocomotiveScroll from 'locomotive-scroll';
-import AOS from 'locomotive-aos';
-import 'aos/dist/aos.css'; // Import AOS styles
+import Aos from 'locomotive-aos';
+import './styles/Aos.css'; // Import AOS styles
 import 'locomotive-scroll/dist/locomotive-scroll.css';
+import getMode from './utils/getMode';
 
 const SmoothScroll = () => {
   useEffect(() => {
@@ -52,9 +53,10 @@ const SmoothScroll = () => {
       smooth: true,
     });
 
-    AOS.init({
+    Aos.init({
       duration: 1000,
       once: true,
+      easing: "ease-in-out"
     });
 
     const handleScroll = () => {
@@ -77,22 +79,27 @@ const SmoothScroll = () => {
   return (
     <BrowserRouter basename={process.env.PUBLIC_URL}>
       <div id="root">
-        <header style={{ opacity: 0, transition: 'opacity 0.5s ease-in-out' }}>
-          <nav>
-            <ul>
-              <li><Link to="/">Home</Link></li>
-              <li><Link to="/syllabus">Syllabus</Link></li>
-              <li><Link to="/staff">Staff</Link></li>
-              <li><Link to="/inquiry">Inquiry</Link></li>
-            </ul>
-          </nav>
-        </header>
-        <main id="main-container" data-scroll-container>
-          <App />
-        </main>
+        <div style={{
+            backgroundColor: getMode() === "dark" ? "#18181B" : "#f3f3f3"
+          }}>
+          <header style={{ opacity: 0, transition: 'opacity 0.5s ease-in-out' }}>
+            <nav>
+              <ul>
+                <li><Link to="/">Home</Link></li>
+                <li><Link to="/syllabus">Syllabus</Link></li>
+                <li><Link to="/staff">Staff</Link></li>
+                <li><Link to="/inquiry">Inquiry</Link></li>
+              </ul>
+            </nav>
+          </header>
+          <main id="main-container" data-scroll-container>
+            <App />
+          </main>
+        </div>
       </div>
     </BrowserRouter>
   );
 };
 
+
 export default SmoothScroll;

src/SmoothScroll.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import '../styles/App.css';
+import '../styles/ScrollBar.css'
 
 const Header = () => (
   <>

src/components/Header.jsx

@@ -0,0 +1,14 @@
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+        console.log(entry)
+        if(entry.isIntersecting){
+            entry.target.classList.add('show');
+        }
+        else{
+            entry.target.classList.remove('show');
+        }
+    });
+});
+
+const hiddenElements = document.querySelectorAll('.hidden');
+hiddenElements.forEach((el) => observer.observe(el));

src/components/observer.js

@@ -5,6 +5,7 @@ import '../styles/App.css';
 import { Toaster } from 'sonner';
 import showNotif from '../components/ToastNotif';
 
+
 const Home = () => (
   <div data-scroll-section id='main-container'>
 

src/pages/Home.jsx

@@ -0,0 +1,49 @@
+[data-aos] {
+    opacity: 0;
+    transition-property: opacity, transform;
+  }
+  
+  [data-aos].aos-animate {
+    opacity: 1;
+  }
+  
+  [data-aos][data-aos-easing="ease-in-out"] {
+    transition-timing-function: ease-in-out;
+  }
+  
+  [data-aos][data-aos-duration] {
+    transition-duration: var(--aos-duration);
+  }
+  
+  [data-aos][data-aos-delay] {
+    transition-delay: var(--aos-delay);
+  }
+  
+  /* Example of specific animation keyframes */
+  @keyframes fade-up {
+    from {
+      transform: translate3d(0, 50%, 0);
+      opacity: 0;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  [data-aos="fade-up"].aos-animate {
+    animation: fade-up var(--aos-duration) ease-in-out forwards;
+  }
+  
+
+  [data-aos].aos-animate {
+    opacity: 1;
+  }
+  
+  [data-aos="fade-up"] {
+    transform: translate3d(0, 100px, 0);
+  }
+  
+  [data-aos="fade-up"].aos-animate {
+    transform: translate3d(0, 0, 0);
+  }

src/styles/Aos.css

@@ -35,6 +35,7 @@ main {
   overflow: hidden; /* Prevent unwanted scrollbars */
 }
 
+
 .flex-container {
   display: flex;
   flex-direction: column;
@@ -131,23 +132,17 @@ main {
   }
 }
 
-.scroll-watcher-light{
-  background-color: linear-gradient(to right, #2ecfe1, #96c93d);
+.hidden{
+  opacity: 0;
+  transition: all 1s;
 }
 
-.scroll-watcher-dark{
-  background-color: linear-gradient(to right #ff7700, #9c00c3);
+@media(prefers-reduced-motion) {
+  .hidden{
+    transition: none;
+  }
 }
 
-
-.scroll-watcher-light, .scroll-watcher-dark {
-  height: 5px;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1000;
-  animation: linear;
-  animation-timeline: scroll(y);
-  scale: 0, 1;
-  transform-origin: left;
-} 
+.show{
+  opacity: 1;
+}

src/styles/App.css

@@ -1 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
+
+.scroll-watcher-light{
+    background-color: linear-gradient(to right, #2ecfe1, #96c93d);
+  }
+  
+  .scroll-watcher-dark{
+    background-color: linear-gradient(to right #ff7700, #9c00c3);
+  }
+  
+  
+  .scroll-watcher-light, .scroll-watcher-dark {
+    height: 5px;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    animation: linear;
+    animation-timeline: scroll(y);
+    scale: 0, 1;
+    transform-origin: left;
+  }