add animation for index page and join page

src/components/core/Question.astro

@@ -2,10 +2,10 @@
 const {question, answer} = Astro.props;
 ---
 <div class = "text-white w-full flex flex-col mb-[2vh]">
-    <p class = "text-ieee-yellow text-[1.4vw] mb-[2vh] font-semibold pl-[1vw]">
+    <p data-inview class = "in-view:animate-fade-right text-ieee-yellow text-[1.4vw] mb-[2vh] font-semibold pl-[1vw]">
     {question}
     </p>
-    <p class = "w-[60%] mb-[2vh] pl-[1vw]">
+    <p data-inview class = "w-[60%] mb-[2vh] pl-[1vw] in-view:animate-fade-left">
         {answer}
     </p>    
     <dev>

src/components/core/Social.astro

@@ -21,7 +21,7 @@ import Link from "next/link";
     <div
         class="w-[85%] rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative h-[30vh] flex items-center text-white/90"
     >
-        <div class="w-2/5 flex justify-evenly ml-[5%]">
+        <div data-inview class="w-2/5 flex justify-evenly ml-[5%] in-view:animate-flip-up animate-duration-1000">
             <Link
                 href="https://discord.gg/XxfjqZSjca"
                 target="_blank"
@@ -62,9 +62,10 @@ import Link from "next/link";
             </Link>
         </div>
         <Image
+            data-inview
             src={evan}
             alt="cat placeholder"
-            class="absolute -bottom-[10vh] w-[25vw] right-0"
+            class="absolute -bottom-[10vh] w-[25vw] right-0 in-view:animate-wiggle"
         />
     </div>
 </div>

src/components/events/UpcomingEvent.astro

@@ -1,19 +1,19 @@
 ---
-const {name, location, date, time, description} = Astro.props;
+const {name, location, date, time, description, delay} = Astro.props;
 ---
 
 <div class="text-white w-[40vw] pl-[8%] border-l-[0.3vw] border-white/70 pb-[5%] relative">
-    <p class=" py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]">
+    <p data-inview class={`animate-delay-${delay} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]`}>
         {name}
     </p>
-    <div class="flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]">
+    <div data-inview class={`animate-delay-${delay} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]`}>
         <p>Location: {location}</p>
         <div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
         <p>{date}</p>
         <div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
         <p>{time}</p>
     </div>
-    <p class="text-[1vw] text-white/60">
+    <p data-inview class={`animate-delay-${delay} in-view:animate-fade-left text-[1vw] text-white/60`}>
         {description}
     </p>
     <div class="bg-ieee-yellow h-[1.2vw] w-[1.2vw] rounded-full absolute -top-[1.5%] -left-[2%]" />

src/components/events/UpcomingEvents.astro

@@ -21,6 +21,7 @@ import { LiaDotCircle } from "react-icons/lia";
                 location="La Jolla Cove" 
                 date="Tue 9 Jun 2024" 
                 time="2 pm" 
+                delay="0"
                 description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
             />
             <UpcomingEvent 
@@ -28,6 +29,7 @@ import { LiaDotCircle } from "react-icons/lia";
                 location="La Jolla Cove" 
                 date="Tue 9 Jun 2024" 
                 time="2 pm" 
+                delay="300"
                 description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
             />
             <UpcomingEvent 
@@ -35,6 +37,7 @@ import { LiaDotCircle } from "react-icons/lia";
                 location="La Jolla Cove" 
                 date="Tue 9 Jun 2024" 
                 time="2 pm" 
+                delay="700"
                 description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
             />
         </div>

src/components/join/Involvement.astro

@@ -4,9 +4,9 @@ import { GoArrowDownRight } from "react-icons/go";
 import { FaGear } from "react-icons/fa6";
 import { IoMdCalendar } from "react-icons/io";
 import { RiRobot2Fill } from "react-icons/ri";
-const {image, text, link} = Astro.props;
+const {image, text, link, delay} = Astro.props;
 ---
-<div class="w-[15vw] relative group">
+<div data-inview class={`w-[15vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>
 
     <img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/>
     <Link 

src/components/join/Involvements.astro

@@ -9,7 +9,7 @@ import involve from "../../data/involve.json";
              text = {item.text}
              image = {item.image}
              link = {item.link}
-    
+             delay = {item.delay}
             /> 
          ))}
     </div>

src/components/join/JoinTitle.astro

@@ -5,7 +5,7 @@ import { LiaDotCircle } from "react-icons/lia";
 
 <div class="pt-[14vh] text-white w-full flex justify-center mb-[20vh]">
     <div class="w-3/4 h-[40vh] flex justify-between flex-col">
-        <div class="flex items-center text-[3vw] pl-[5%] pt-[5%]">
+        <div data-inview class="flex items-center text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right">
             <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
             <p>
                 Join Us
@@ -14,7 +14,7 @@ import { LiaDotCircle } from "react-icons/lia";
         <p class="text-[1.25vw]">
             The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts!
         </p>
-        <div class="flex justify-end">
+        <div data-inview class="flex justify-end in-view:animate-fade-up">
             <Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="text-[1.2vw] border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
                 JOIN
             </Link>

src/components/join/OH.astro

@@ -2,7 +2,7 @@
 const {title, subtitle, image} = Astro.props;
 ---
 
-<div class="flex flex-col items-center w-[40vw] my-[10%]">
+<div data-inview class="flex flex-col items-center w-[40vw] my-[10%] in-view:animate-fade-down">
     <p class="text-ieee-yellow text-[1.2vw]">
         {subtitle}
     </p>

src/components/main_page/About.astro

@@ -3,7 +3,6 @@ import about from "../../images/about.png";
 import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
-import about1 from "../../images/about1.png";
 import about2 from "../../images/about2.png";
 import about3 from "../../images/about3.png";
 import about4 from "../../images/about4.png";
@@ -24,21 +23,25 @@ import about4 from "../../images/about4.png";
             />
         </div>
         <Image
+            data-inview
             src={about2}
             alt="About image"
-            class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]"
+            class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%] in-view:animate-fade-right"
         />
         <Image
+            data-inview
             src={about3}
             alt="About image"
-            class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0"
+            class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0 in-view:animate-fade-up"
         />
         <div
-            class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"
+            data-inview
+            class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%] in-view:animate-fade-left"
         >
         </div>
         <div
-            class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"
+            data-inview
+            class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%] in-view:animate-fade-left"
         >
         </div>
     </div>

src/components/main_page/Activities.astro

@@ -23,6 +23,7 @@ import { LiaDotCircle } from "react-icons/lia";
                 text={activity.text}
                 link={activity.link}
                 number={activity.number}
+                delay={activity.delay}
             />
         ))}
     </div>

src/components/main_page/Activity.astro

@@ -1,10 +1,10 @@
 ---
 import Link from "next/link";
 import { IoIosArrowDroprightCircle } from "react-icons/io";
-const {  title, text, link, number  } = Astro.props;
+const {  title, text, link, number, delay  } = Astro.props;
 ---
 
-<div class="relative text-white flex flex-col items-center w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black h-[63vh] border-[0.1vw] border-white/40 rounded-[2vw] pt-[5%] pb-[3%]">
+<div data-inview class={`relative text-white flex flex-col items-center w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black h-[63vh] border-[0.1vw] border-white/40 rounded-[2vw] pt-[5%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}>
     <div class="rounded-full aspect-square w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/>
     <p class="text-[1.7vw] font-bold text-center">
         {title}

src/components/main_page/Divider.astro

@@ -1,19 +1,14 @@
----
+<div class="flex py-[15vh] px-[7vw] items-end w-full">
-import InView from "../../components/core/InView.astro"
----
-<InView />
-
-<div data-inview class="flex py-[15vh] px-[7vw] items-end w-full">
     <div class="w-3/5">
-        <p class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down">
+        <p data-inview class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-fade-right">
             02
         </p>
-        <p class="text-white text-[2.5vw] font-light">
+        <p data-inview class="text-white text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100">
             Amet Consectetur
         </p>
 
     </div>
-    <p class="text-white text-[1.5vw]">
+    <p data-inview class="text-white text-[1.5vw] in-view:animate-fade-left">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
     </p>

src/components/main_page/Landing.astro

@@ -11,10 +11,10 @@ import { RiInstagramFill } from "react-icons/ri";
     <div
         class="pt-[7%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black w-[53%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw]"
     >
-        <p class="text-ieee-yellow font-bold text-[2.2vw] mb-[3%]">
+        <p data-inview class="text-ieee-yellow font-bold text-[2.2vw] mb-[3%] in-view:animate-flip-down">
             UC San Diego IEEE
         </p>
-        <p class="font-bold text-[2.8vw] text-white mb-[10%]">
+        <p data-inview class="font-bold text-[2.8vw] text-white mb-[10%] in-view:animate-fade-right">
             Join one of the largest IEEE student branch in the US!
         </p>
         <p class="text-white font-light text-[1.3vw]">

src/data/activities.json

@@ -3,24 +3,28 @@
         "title": "Quarterly Project",
         "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
         "link": "/quarterly",
-        "number": "01"
+        "number": "01",
+        "delay": "100"
     },
     {
         "title": "Annual Project",
         "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
         "link": "/projects",
-        "number": "02"
+        "number": "02",
+        "delay": "300"
     },
     {
         "title": "Social",
         "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
         "link": "/events",
-        "number": "03"
+        "number": "03",
+        "delay": "500"
     },
     {
         "title": "Professional Development",
         "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
         "link": "/events",
-        "number": "04"
+        "number": "04",
+        "delay": "700"
     }
 ]

src/data/involve.json

@@ -2,16 +2,19 @@
     {
         "text": "PROJECTS",
         "image": "/project.png",
-        "link": "/projects"
+        "link": "/projects",
+        "delay": "100"
     },
     {
         "text": "EVENTS",
         "image": "/halloween.png",
-        "link": "/events"
+        "link": "/events",
+        "delay": "300"
     },
     {
         "text": "H.A.R.D. HACK",
         "image": "/hardhack.png",
-        "link": "https://hardhack.dev/"
+        "link": "https://hardhack.dev/",
+        "delay": "500"
     }
 ]

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import Navbar from "../components/core/Navbar.astro";
 import Footer from "../components/core/Footer.astro";
+import InView from "../components/core/InView.astro";
 ---
 
 <!doctype html>
@@ -12,7 +13,7 @@ import Footer from "../components/core/Footer.astro";
         <meta name="generator" content={Astro.generator} />
         <title>Astro Basics</title>
     </head>
-
+    <InView />
     <body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip">
         <Navbar />
         <main class="w-[95%]">

tailwind.config.mjs

@@ -1,7 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  safelist: ["col-span-1", "col-span-2", "col-span-3", "col-span-4"],
+  safelist: [
+    "col-span-1",
+    "col-span-2",
+    "col-span-3",
+    "col-span-4",
+    "animate-delay-100",
+    "animate-delay-300",
+    "animate-delay-500",
+    "animate-delay-700"],
   theme: {
     extend: {
       boxShadow: {
@@ -24,5 +32,10 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-motion"), require("tailwindcss-animated")],
+  plugins: [
+    require("tailwindcss-motion"),
+    require("tailwindcss-animated"),
+    function ({ addVariant }) {
+      addVariant("in-view", "&.in-view");
+    },],
 };