Add landing page animations

HackAtUCI · Oct 31, 2024 · 47f2d68 · 47f2d68
1 parent 81cd98e
commit 47f2d68
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 38 deletions.
diff --git a/apps/site/src/app/(home)/sections/Landing/Characters.module.scss b/apps/site/src/app/(home)/sections/Landing/Characters.module.scss
@@ -2,27 +2,26 @@
 
 .character {
 	position: absolute;
-	width: 60px;
 	visibility: hidden;
 	right: 18vw;
-	top: 16vw;
+	top: 15.5vw;
 	transform: translateY(-70%);
+	width: 80px;
+	max-width: 7vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
 	}
 }
 
-
 .characterFoam {
-    position: absolute;
-    width: 60px;
-    visibility: hidden;
-    right: 18vw;
-    top: 16.3vw;
-
-    transform: translateY(-50%);
-
+	position: absolute;
+	visibility: hidden;
+	right: 18vw;
+	top: 16.4vw;
+	transform: translateY(-50%);
+	width: 80px;
+	max-width: 7vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
@@ -31,12 +30,12 @@
 
 .characterShadow {
 	position: absolute;
-	width: 60px;
 	visibility: hidden;
 	right: 18vw;
-	top: 16vw;
-
+	top: 16.5vw;
 	transform: translateY(-20%);
+	width: 80px;
+	max-width: 7vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
@@ -45,11 +44,12 @@
 
 .mainCharacter {
 	position: absolute;
-	width: 180px;
+	width: 300px;
 	visibility: hidden;
 	left: 10vw;
 	top: 32vw;
 	transform: translate(-50%, -50%);
+	max-width: 18vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
@@ -58,13 +58,14 @@
 
 .beachBall {
 	position: absolute;
-	width: 150px;
+	width: 300px;
 	visibility: hidden;
 	right: 2vw;
 	top: 22vw;
 	transform: translate(calc(50% - 10vw), calc(-50% + 5vw));
+	max-width: 14vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
 	}
-}
+}
diff --git a/apps/site/src/app/(home)/sections/Landing/Characters.tsx b/apps/site/src/app/(home)/sections/Landing/Characters.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { motion } from "framer-motion";
 
 import waterAnteater from "@/assets/images/intro-water-anteater.svg";
 import waterAnteaterFoam from "@/assets/images/intro-character-foam.svg";
@@ -12,27 +13,59 @@ import styles from "./Characters.module.scss";
 export default function Characters() {
 	return (
 		<div>
-			<Image
-				src={waterAnteater}
-				alt="Anteater floating in the water"
-				className={styles.character}
-			/>
-			<Image
-				src={waterAnteaterShadow}
-				alt="Reflection of anteater in the water"
-				className={styles.characterShadow}
-			/>
-			<Image
-				src={waterAnteaterFoam}
-				alt="Foam between anteater and the water"
-				className={styles.characterFoam}
-			/>
-			<Image
-				src={mainCharacter}
-				alt="Anteater standing on the shore"
-				className={styles.mainCharacter}
-			/>
-			<Image src={beachBall} alt="Beach ball" className={styles.beachBall} />
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteater}
+					alt="Anteater floating in the water"
+					className={styles.character}
+				/>
+			</motion.div>
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteaterShadow}
+					alt="Reflection of anteater in the water"
+					className={styles.characterShadow}
+				/>
+			</motion.div>
+
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteaterFoam}
+					alt="Foam between anteater and the water"
+					className={styles.characterFoam}
+				/>
+			</motion.div>
+
+			<motion.div
+				initial={{ translateY: -100, opacity: 0 }}
+				animate={{ translateY: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 1 }}
+			>
+				<Image
+					src={mainCharacter}
+					alt="Anteater standing on the shore"
+					className={styles.mainCharacter}
+				/>
+			</motion.div>
+			<motion.div
+				initial={{ scale: 0.85, opacity: 0 }}
+				animate={{ scale: 1, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.8 }}
+			>
+				<Image src={beachBall} alt="Beach ball" className={styles.beachBall} />
+			</motion.div>
 		</div>
 	);
 }