Add Animation (#226)

CarletonComputerScienceSociety · Jul 2, 2023 · ab253c6 · ab253c6
1 parent bd53d5a
commit ab253c6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/app/src/layouts/BaseLayout.astro b/app/src/layouts/BaseLayout.astro
@@ -15,6 +15,11 @@ const { title } = Astro.props as Props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <title>{title}</title>
+    <script
+      src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
+    >
+
+    </script>
   </head>
   <body>
     <slot></slot>

diff --git a/app/src/layouts/HomeLayout.astro b/app/src/layouts/HomeLayout.astro
@@ -26,8 +26,6 @@ const currentDate: Date = new Date();
       text-decoration: none;
     }
 
-    position: absolute;
-    bottom: 0;
     width: 100%;
     /* Set the fixed height of the footer here */
     height: 4rem;

diff --git a/app/src/pages/index.astro b/app/src/pages/index.astro
@@ -28,6 +28,13 @@ import { Button } from "../components";
             <Button label="comp 2804" />
           </a>
         </div>
+        <div class="animation"><lottie-player
+          src="./lottie/animation.json"
+          background="transparent"
+          speed="1"
+          loop
+          autoplay></lottie-player></div>
+        </div>
       </div>
     </div>
   </HomeLayout>
@@ -76,7 +83,10 @@ import { Button } from "../components";
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
-    margin-bottom: 3rem;
     margin-top: 2rem;
   }
+
+  .animation {
+    width: 950px;
+  }
 </style>