added scroll animations

zense · Oct 7, 2023 · 8c22b96 · 8c22b96
1 parent 4a2f3a8
commit 8c22b96
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "aos": "^2.3.4",
     "bootstrap": "^5.2.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",

diff --git a/public/index.html b/public/index.html
@@ -15,11 +15,16 @@
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&family=Poppins:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&display=swap');
   </style>
+  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   <meta name="google-site-verification" content="kwZGznB53GT-m3QsPDGQ_SpcQ5X5CyW0dwAZ-6YyfUU" />
 </head>
 
 <body>
   <div id="root"></div>
+  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+  <script>
+    AOS.init();
+  </script>
 </body>
 
 </html>
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -4,7 +4,7 @@ import rect from "../assets/rect55.png";
 const Card = (props) => {
     return (
         <>
-            <div className="card-main">
+            <div className="card-main aos-init" data-aos="fade-up">
                 <div className="cont">
                     <img className="cardimg" src={props.img} alt="" />
                     <p>{props.content}</p>

diff --git a/src/components/Faq.jsx b/src/components/Faq.jsx
@@ -22,9 +22,9 @@ const Faq = () => {
         <Container>
             {/* div centered inside container */}
             <div className="faq container">
-                <h1 className='faq-heading'>Faq<span className="dot_color">.</span></h1>
+                <h1 className="faq-heading aos-init" data-aos="fade-up" >Faq<span className="dot_color">.</span></h1>
                 {/* center accordion div */}
-                <div className="row accordion">
+                <div className="row accordion aos-init" data-aos="fade-up">
                     {renderFaqs(faqs)}
                 </div>
             </div>

diff --git a/src/components/big_side_heading.jsx b/src/components/big_side_heading.jsx
@@ -1,6 +1,6 @@
 import './big_side_heading.scss';
 const Big_side_heading = (props)=>{
-    return <div className="big_side_heading container-fluid">
+    return <div className="big_side_heading container-fluid aos-init" data-aos="fade-up">
         <div className="row">
             <div className="col-12 col-md-4 heading_column">
                 {/* for smaller screens */}

diff --git a/src/components/event_card.jsx b/src/components/event_card.jsx
@@ -9,7 +9,7 @@ function EventCard(props) {
   }, [])
 
   return (
-    <div className="EventCard container">
+    <div className="EventCard container aos-init" data-aos="zoom-in-up" >
       <div className="row">
         <div className="col-5 d-none d-md-block imagecol">
           <div className="row">

diff --git a/src/screens/Collaborators.jsx b/src/screens/Collaborators.jsx
@@ -16,8 +16,8 @@ const Collaborators = () => {
             <h1 className="collab_heading">Sponsors<span className="dot_color">.</span></h1>
         </Container> */}
         <Container className="wrapper">
-            <h1 className="collab_heading">Collaborators<span className="dot_color">.</span></h1>
-            <div className="lab-logos d-flex justify-content-center align-items-center">
+            <h1 className="collab_heading aos-init" data-aos="fade-up" >Collaborators<span className="dot_color aos-init" data-aos="fade-up">.</span></h1>
+            <div className="lab-logos d-flex justify-content-center align-items-center aos-init" data-aos="fade-up" >
                <a href="https://ic.iiitb.ac.in/" target='_blank'><img src={ic_logo} alt="" /></a>
                <a href="https://www.iiitb.ac.in/media/iiit-bangalore-announces-gok-funded-digital-governance-and-datadriven-planning-initiatives" target='_blank'><img src={ctridg_logo} alt="" /></a>
                <a href="https://ehrc.iiitb.ac.in/" target='_blank'><img src={ehrc_logo} alt="" /></a>

diff --git a/src/screens/Team.jsx b/src/screens/Team.jsx
@@ -24,7 +24,7 @@ const Teams = () => {
         subtitle={team_page_subtitle}
       />
       <Container className="wrapper">
-        <h1 className="wrapper__heading">
+        <h1 className="wrapper__heading aos-init" data-aos="fade-up">
           {teams[0].group}
           <span className="dot_color">.</span>
         </h1>
@@ -52,7 +52,7 @@ const Teams = () => {
         </Row>
       </Container>
       <Container className="wrapper">
-        <h1 className="wrapper__heading">
+        <h1 className="wrapper__heading aos-init" data-aos="fade-up">
           {teams[1].group}
           <span className="dot_color">.</span>
         </h1>
@@ -80,7 +80,7 @@ const Teams = () => {
         </Row>
       </Container>
       <Container className="wrapper">
-        <h1 className="wrapper__heading">
+        <h1 className="wrapper__heading aos-init" data-aos="fade-up">
           {teams[2].group}
           <span className="dot_color">.</span>
         </h1>