From e2efa98b3170f5218bf57b7280747b90901e1197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jasmine=20Tr=C3=ACnh?=
 <168297703+minnieland@users.noreply.github.com>
Date: Thu, 28 Nov 2024 18:05:26 -0800
Subject: [PATCH] animated event lists.

---
 src/components/events/Event.tsx     | 11 +++++++++--
 src/components/events/EventList.tsx | 19 ++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/events/Event.tsx b/src/components/events/Event.tsx
index 39fb2eb..ee38bd2 100644
--- a/src/components/events/Event.tsx
+++ b/src/components/events/Event.tsx
@@ -1,3 +1,4 @@
+import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import star from "../../../public/star.webp";
@@ -10,7 +11,13 @@ interface EventProps {
 
 const Event: React.FC<EventProps> = ({ title, time, link }) => {
   return (
-    <div className="flex w-[80vw] md:w-[65vw]">
+    <motion.div
+      initial={{ opacity: 0, x: -50 }}
+      whileInView={{ opacity: 1, x: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5 }}
+      className="mb-6 flex w-[80vw] md:w-[65vw]"
+    >
       <Image
         src={star}
         alt="star icon"
@@ -32,7 +39,7 @@ const Event: React.FC<EventProps> = ({ title, time, link }) => {
           More info
         </Link>
       </div>
-    </div>
+    </motion.div>
   );
 };
 
diff --git a/src/components/events/EventList.tsx b/src/components/events/EventList.tsx
index 2cd63e6..46e1cf1 100644
--- a/src/components/events/EventList.tsx
+++ b/src/components/events/EventList.tsx
@@ -1,13 +1,26 @@
+import { motion } from "framer-motion";
 import Event from "./Event";
 import { eventInfo } from "@/data/eventInfo";
 
 const EventList = () => {
   return (
-    <div className="mb-[25%] md:mb-[10%]">
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.8 }}
+      className="mb-[25%] md:mb-[10%]"
+    >
       <h2 className="font-title text-[6vw] font-light text-hearts-light-brown md:text-[4vw]">
         Upcoming Events
       </h2>
-      <div className="mb-[2%] ml-[13%] h-[1px] w-[30%] bg-hearts-light-brown md:h-[3px] md:w-[22%]" />
+      <motion.div
+        initial={{ scaleX: 0 }}
+        whileInView={{ scaleX: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5, delay: 0.3 }}
+        className="mb-[2%] ml-[13%] h-[1px] w-[30%] origin-left bg-hearts-light-brown md:h-[3px] md:w-[22%]"
+      />
       {eventInfo.map((event, index) => (
         <Event
           key={index}
@@ -16,7 +29,7 @@ const EventList = () => {
           link={event.link}
         />
       ))}
-    </div>
+    </motion.div>
   );
 };