Feature/sticky note animation (#114)

* update: added stickers to apply button anchor * feature: animated sticky notes * update: on scroll view animation * fix: remove stickers * update: animation timing adjustments and decoupling * fix: adjusted tape * fix: tape timing adjustment * fix: animation triggers once * fix: removed sticker assets and imports * fix: removed sticker components * fix: media queries for resource card width * fix: tape timing adjustment * feat: pin animation * update: mentor sticky note animation
HackAtUCI · Nov 4, 2023 · e8e15a8 · e8e15a8
1 parent e8d3048
commit e8e15a8
Show file tree

Hide file tree

Showing 10 changed files with 213 additions and 57 deletions.
diff --git a/apps/site/src/app/(home)/sections/Intro/Intro.module.scss b/apps/site/src/app/(home)/sections/Intro/Intro.module.scss
@@ -2,6 +2,8 @@
 
 .intro {
 	@include bootstrap.padding(10rem 0.5rem);
+	margin-left: 10px;
+	margin-right: 10px;
 
 	background-image: url("~src/assets/images/index-card-mobile.svg");
 	background-size: cover;
@@ -27,10 +29,19 @@
 
 .pin {
 	position: absolute;
-	top: 0;
-	left: 50%;
-	transform: translate(-75%, -50%);
+	top: -12%;
+	left: 45%;
 	width: auto;
+
+	@include bootstrap.media-breakpoint-down(xl) {
+		left: 45%;
+	}
+	@include bootstrap.media-breakpoint-down(lg) {
+		left: 40%;
+	}
+	@include bootstrap.media-breakpoint-down(md) {
+		left: 35%;
+	}
 }
 
 .hackDoodle {

diff --git a/apps/site/src/app/(home)/sections/Intro/Intro.tsx b/apps/site/src/app/(home)/sections/Intro/Intro.tsx
@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Container from "react-bootstrap/Container";
 
+import { motion, cubicBezier } from "framer-motion";
 import pin from "@/assets/images/index-card-pin.svg";
 import hackDoodle from "@/assets/images/hack-doodle.png";
 
@@ -12,9 +13,24 @@ const Intro = () => {
 	return (
 		<Container as="section">
 			<div className={styles.intro}>
-				<Image
+				<motion.img
+					initial={{
+						opacity: 0,
+						y: -10,
+						x: -10,
+					}}
+					viewport={{ once: true }}
+					whileInView={{
+						opacity: 1,
+						y: 0,
+						x: 0,
+						transition: {
+							duration: 0.65,
+							ease: cubicBezier(0.64, 0, 0.78, 0),
+						},
+					}}
 					className={styles.pin}
-					src={pin}
+					src={pin.src}
 					width="100"
 					height="100"
 					alt="Index card pin"

diff --git a/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx b/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx
@@ -1,6 +1,6 @@
 import Button from "react-bootstrap/Button";
 import StickerPosition from "@/components/Sticker/StickerPosition";
-import { HackSticker, HeartSticker } from "@/components/Sticker/Stickers";
+import { HeartSticker } from "@/components/Sticker/Stickers";
 
 import styles from "./ApplyButton.module.scss";
 

diff --git a/apps/site/src/app/(home)/sections/Mentor/Mentor.tsx b/apps/site/src/app/(home)/sections/Mentor/Mentor.tsx
@@ -1,5 +1,5 @@
 "use client";
-
+import { motion, cubicBezier, Variants } from "framer-motion";
 import Image from "next/image";
 import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
@@ -11,6 +11,26 @@ import styles from "./Mentor.module.scss";
 
 const MENTOR_APP_URL = "/mentor";
 
+const variant: Variants = {
+	initial: {
+		scale: 1.1,
+		opacity: 0,
+		rotateX: 20,
+		translateY: 30,
+	},
+	animate: {
+		scale: 1,
+		rotateX: 0,
+		opacity: 1,
+		translateY: 0,
+		transition: {
+			duration: 0.85,
+			staggerChildren: 0.1,
+			ease: cubicBezier(0.33, 1, 0.68, 1),
+		},
+	},
+};
+
 const Mentor = () => {
 	const mentorHeader = (
 		<h2 className="mb-3 text-start">Interested in becoming a mentor?</h2>
@@ -35,20 +55,32 @@ const Mentor = () => {
 
 	return (
 		<Container as="section">
-			<div className="position-relative my-5">
-				<Col lg={5} className={styles.applySticky}>
-					<Image src={tape} alt="post-it tape" className={styles.tape} />
-					<div className={styles.applyStickyContent}>
-						{mentorHeader}
+			<motion.div
+				variants={variant}
+				initial="initial"
+				whileInView="animate"
+				className="position-relative my-5"
+			>
+				<motion.div variants={variant}>
+					<Col lg={5} className={styles.applySticky}>
+						<motion.img
+							variants={variant}
+							src={tape.src}
+							alt="post-it tape"
+							className={styles.tape}
+						/>
+						<div className={styles.applyStickyContent}>
+							{mentorHeader}
+							{mentorDescription}
+						</div>
+						{applyLink}
+					</Col>
+					<Col className={styles.descSticky + " text-center"}>
 						{mentorDescription}
-					</div>
-					{applyLink}
-				</Col>
-				<Col className={styles.descSticky + " text-center"}>
-					{mentorDescription}
-					{applyLink}
-				</Col>
-			</div>
+						{applyLink}
+					</Col>
+				</motion.div>
+			</motion.div>
 		</Container>
 	);
 };

diff --git a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx
@@ -8,8 +8,8 @@ const HackSticker: React.FC<StickerProps> = (props) => (
 	<BaseSticker
 		imageSrc={HackLogo.src}
 		alt="Hack at UCI sticker"
-		height={200}
-		width={200}
+		height={150}
+		width={150}
 		{...lightShake}
 		{...props}
 	/>

diff --git a/apps/site/src/components/Sticker/Stickers/index.ts b/apps/site/src/components/Sticker/Stickers/index.ts
diff --git a/apps/site/src/components/Sticker/Stickers/index.tsx b/apps/site/src/components/Sticker/Stickers/index.tsx
@@ -0,0 +1,30 @@
+import type React from "react";
+import type { StickerProps } from "./stickerProps";
+import HackLogo from "@/assets/icons/hack.png";
+import HeartEmoji from "@/assets/images/heart_emoji.png";
+import BaseSticker from "../BaseSticker";
+import { fastShake, lightShake } from "@/components/animation";
+
+export const HackSticker: React.FC<StickerProps> = (props) => {
+	return (
+		<BaseSticker
+			imageSrc={HackLogo.src}
+			alt="Hack at UCI sticker"
+			height={150}
+			width={150}
+			{...lightShake}
+			{...props}
+		/>
+	);
+};
+
+export const HeartSticker: React.FC<StickerProps> = (props) => (
+	<BaseSticker
+		imageSrc={HeartEmoji.src}
+		alt="heart emoji sticker"
+		height={150}
+		width={150}
+		{...fastShake}
+		{...props}
+	/>
+);
diff --git a/apps/site/src/lib/styles/globals.scss b/apps/site/src/lib/styles/globals.scss
@@ -5,6 +5,8 @@ $container-padding: 8rem;
 .background {
 	background-image: url("~@/assets/background/anteater-head-tiling.gif");
 	background-size: 464px; // half size for 2x scaling
+	overflow-x: hidden;
+	max-width: 100%;
 }
 
 .accordion {

diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
@@ -6,14 +6,22 @@
 	position: relative;
 	padding: 1rem 0;
 	box-shadow: 0 6px 5px -2px rgba(gray, 0.5);
+	@media screen and (max-width: 400px) {
+		width: 300px;
+	}
 }
 
 .tape {
 	background-image: url("~@/assets/images/tape.svg");
 	width: 238px;
 	height: 60px;
 	position: absolute;
-	top: -12.5%;
+	top: 3%;
+	left: 15%;
+	z-index: 10;
+	@media screen and (max-width: 400px) {
+		left: 10%;
+	}
 }
 
 .container {

diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
@@ -1,5 +1,6 @@
+"use client";
 import Image from "next/image";
-
+import { Variants, motion, AnimatePresence, cubicBezier } from "framer-motion";
 import openNewWindow from "@/assets/icons/open-new-window.svg";
 import styles from "./ResourceCard.module.scss";
 
@@ -16,6 +17,27 @@ interface ResourceCardProps {
 	stickyNoteColor: string;
 }
 
+const variant: Variants = {
+	initial: {
+		scale: 1.1,
+		opacity: 0,
+		rotateX: 20,
+		translateY: 30,
+	},
+	animate: {
+		scale: 1,
+		rotateX: 0,
+		opacity: 1,
+		translateY: 0,
+		transition: {
+			duration: 0.85,
+			staggerChildren: 0.1,
+			staggerDirection: -1,
+			ease: cubicBezier(0.33, 1, 0.68, 1),
+		},
+	},
+};
+
 export default function ResourceCard({
 	title,
 	description,
@@ -24,38 +46,75 @@ export default function ResourceCard({
 	stickyNoteColor,
 }: ResourceCardProps) {
 	return (
-		<div
-			className={styles.group}
-			style={{
-				backgroundColor: `${stickyNoteColor}`,
-			}}
-		>
-			<div className={styles.container + " text-center px-3"}>
-				<div className={styles.tape}></div>
-				{stickerSrc && <img src={stickerSrc} alt="Resource logo" width="100" />}
-				<h3>{title}</h3>
-				{description}
-			</div>
-
-			{links.map(({ text, link }) => (
-				<a
-					key={link}
-					href={link}
-					target="_blank"
-					rel="noopener noreferrer"
-					className={styles.tag}
+		<AnimatePresence mode="wait">
+			<motion.div style={{ position: "relative" }}>
+				<motion.div
+					initial={{
+						scale: 1.1,
+						opacity: 0,
+						rotateX: 15,
+					}}
+					viewport={{ once: true }}
+					whileInView={{
+						scale: 1,
+						rotateX: 0,
+						opacity: 1,
+						transition: {
+							delay: 0.1,
+							duration: 0.65,
+							ease: cubicBezier(0.64, 0, 0.78, 0),
+						},
+					}}
+					className={styles.tape}
+				></motion.div>
+				<motion.div
+					variants={variant}
+					initial="initial"
+					whileInView="animate"
+					viewport={{ once: true }}
+					className={styles.group}
+					style={{
+						backgroundColor: `${stickyNoteColor}`,
+					}}
 				>
-					{text}
-					<div className="d-inline ms-1 vertical-align-middle">
-						<Image
-							src={openNewWindow}
-							width="20"
-							height="20"
-							alt="Open link in new window"
-						/>
+					<div className={styles.container + " text-center px-3"}>
+						{stickerSrc && (
+							<motion.img
+								src={stickerSrc}
+								alt="Resource logo"
+								width="100"
+								variants={variant}
+							/>
+						)}
+						<h3>{title}</h3>
+						{description}
 					</div>
-				</a>
-			))}
-		</div>
+
+					{links.map(({ text, link }) => (
+						<motion.a
+							key={link}
+							href={link}
+							target="_blank"
+							rel="noopener noreferrer"
+							className={styles.tag}
+							variants={variant}
+						>
+							{text}
+							<motion.div
+								className="d-inline ms-1 vertical-align-middle"
+								variants={variant}
+							>
+								<Image
+									src={openNewWindow}
+									width="20"
+									height="20"
+									alt="Open link in new window"
+								/>
+							</motion.div>
+						</motion.a>
+					))}
+				</motion.div>
+			</motion.div>
+		</AnimatePresence>
 	);
 }