remove snow overlay and switch animation package to aos (#496)

ariyin · web-flow · commit 4c427369de78 · 2025-01-18T17:51:41.000-08:00
* remove snow overlay and switch animation package to aos

* comment out snow overlay
diff --git a/index.html b/index.html
@@ -7,15 +7,16 @@
 			type="image/svg+xml"
 			href="/src/images/acm-hack-logo.svg"
 		/>
-		<link
-			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
-		/>
+		<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>UCLA ACM Hack</title>
 	</head>
 	<body>
 		<div id="root"></div>
 		<script type="module" src="/src/main.jsx"></script>
+		<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+		<script>
+			AOS.init();
+		</script>
 	</body>
 </html>
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
 		"react-markdown": "^9.0.1",
 		"react-router-dom": "^6.26.2",
 		"react-slick": "^0.30.2",
-		"react-snow-overlay": "^1.0.7",
+		"react-snow-overlay": "^1.0.12",
 		"slick-carousel": "^1.8.1"
 	},
 	"devDependencies": {
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,12 +10,12 @@ import Blog from './pages/Blog';
 import Archive from './pages/Archive';
 import NotFound from './pages/NotFound';
 import './styles/App.css';
-import { SnowOverlay } from 'react-snow-overlay';
+// import { SnowOverlay } from 'react-snow-overlay';
 
 function App() {
 	return (
 		<div id='app'>
-			<SnowOverlay color='rgba(242, 235, 235, 1)' />
+			{/* <SnowOverlay color='rgba(242, 235, 235, 1)' /> */}
 			<Navbar />
 			<ScrollToTop />
 			<Routes>
diff --git a/src/components/Home/HackDescription.jsx b/src/components/Home/HackDescription.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import '../../styles/Home.css';
 import logo from '../../images/acm-hack-logo.svg';
 import pigeon from '../../images/pigeon.svg';
-import ScrollAnimation from 'react-animate-on-scroll';
 
 const hackDescription = `We are a student-run organization whose mission is to
 empower the community by providing the means to build amazing things and explore
@@ -19,19 +18,17 @@ export default function HackDescription() {
 		<div>
 			<div className='hack-description-container'>
 				<img src={logo} className='home-hack-logo' alt='Hack Logo' />
-				<ScrollAnimation animateIn='fadeIn'>
-					<div className='hack-description'>
-						<h1 className='hack-title'>What is Hack?</h1>
-						<p>{hackDescription}</p>
-					</div>
-				</ScrollAnimation>
+				<div className='hack-description' data-aos='light-fade-up'>
+					<h1 className='hack-title'>What is Hack?</h1>
+					<p>{hackDescription}</p>
+				</div>
 			</div>
 			<div className='hack-connected-container'>
 				<img src={pigeon} className='home-graphic' alt='Hack Logo' />
-				<ScrollAnimation animateIn='fadeIn'>
+				<div data-aos='light-fade-up'>
 					<h2 className='hack-subtitle'>Stay Connected</h2>
 					<p>{connectedDescription}</p>
-				</ScrollAnimation>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/src/styles/App.css b/src/styles/App.css
@@ -49,3 +49,13 @@ body {
 	align-items: center;
 	justify-content: center;
 }
+
+[data-aos='light-fade-up'] {
+	transform: translateY(36px);
+	opacity: 0;
+	transition-property: transform, opacity;
+	&.aos-animate {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
