feat: view transitions

williamsjokvist · Jan 3, 2024 · 204748a · 204748a
1 parent ea10e39
commit 204748a
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 53 deletions.
diff --git a/src/components/DownloadButton.astro b/src/components/DownloadButton.astro
@@ -2,7 +2,7 @@
 import Icon from "astro-icon"
 ---
 
-<script defer>
+<script>
   function removeNonUserAgentDownloads() { 
     const isWindows = window.navigator.userAgent.indexOf("Win") != -1
     const isMacOS = window.navigator.userAgent.indexOf("Mac") != -1
@@ -18,7 +18,7 @@ import Icon from "astro-icon"
     }
   }
 
-  document.addEventListener("DOMContentLoaded", removeNonUserAgentDownloads)
+  document.addEventListener("astro:page-load", removeNonUserAgentDownloads)
 </script>
 
 <a

diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro
@@ -1,7 +1,7 @@
 ---
 ---
 
-<script defer>
+<script>
   const fetchDownloadCount = async () => {
     const res = await fetch(
       `https://api.github.com/repos/williamsjokvist/cfn-tracker/releases`,
@@ -28,10 +28,10 @@
   const assignDownloadCount = async () => {
     const download_count = await fetchDownloadCount();
     const cfnTrackerEl = document.getElementById(`cfn-tracker-download-count`);
-    cfnTrackerEl.innerText = download_count;
+    cfnTrackerEl.innerText = download_count.toString();
   }
 
-  document.addEventListener("DOMContentLoaded", assignDownloadCount);
+  document.addEventListener("astro:page-load", assignDownloadCount);
 </script>
 
 <footer class="py-36 text-xl lowercase text-center">

diff --git a/src/components/Streamers.astro b/src/components/Streamers.astro
@@ -23,33 +23,36 @@ const streamers = [{
 
 <script>
   import { gsap, Power2 } from "../lib/gsap";
-  gsap.from("#used-by > h2", {
-    autoAlpha: 0,
-    translateY: 20,
-    duration: 3.25,
-    ease: Power2.easeInOut,
-    stagger: 0.25,
-    scrollTrigger: {
-      scroller: "main",
-      trigger: "#used-by h2",
-      start: "center bottom",
-      toggleActions: "play none none reverse",
-    },
-  });
 
-  gsap.from("#used-by-list > *", {
-    autoAlpha: 0,
-    translateY: 20,
-    duration: 3,
-    ease: Power2.easeInOut,
-    stagger: 0.25,
-    scrollTrigger: {
-      scroller: document.body,
-      trigger: "#used-by h2",
-      start: "center bottom",
-      toggleActions: "play none none reverse",
-    },
-  });
+  document.addEventListener("astro:page-load", () => {
+    gsap.from("#used-by > h2", {
+      autoAlpha: 0,
+      translateY: 20,
+      duration: 3.25,
+      ease: Power2.easeInOut,
+      stagger: 0.25,
+      scrollTrigger: {
+        scroller: "main",
+        trigger: "#used-by h2",
+        start: "center bottom",
+        toggleActions: "play none none reverse",
+      },
+    });
+
+    gsap.from("#used-by-list > *", {
+      autoAlpha: 0,
+      translateY: 20,
+      duration: 3,
+      ease: Power2.easeInOut,
+      stagger: 0.25,
+      scrollTrigger: {
+        scroller: document.body,
+        trigger: "#used-by h2",
+        start: "center bottom",
+        toggleActions: "play none none reverse",
+      },
+    });
+  })
 </script>
 
 <section id="used-by" class="my-28">

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 import NavBar from '../components/NavBar.astro';
 import SiteFooter from '../components/SiteFooter.astro';
 export interface Props {
@@ -17,7 +18,7 @@ const { title } = Astro.props;
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@200;300;600&display=swap" rel="stylesheet"> 
-
+    <ViewTransitions />
     <meta name="generator" content={Astro.generator} />
     <title>CFN Tracker</title>
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />

diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro
@@ -4,13 +4,16 @@ import Layout from '../layouts/Layout.astro';
 ---
 <script>
   import { gsap, Power2 } from "../lib/gsap";
-  gsap.from("#changelog > *", {
-    autoAlpha: 0,
-    translateY: 20,
-    duration: .75,
-    ease: Power2.easeInOut,
-    stagger: 0.125,
-  });
+
+  document.addEventListener("astro:page-load", () => {
+    gsap.from("#changelog > *", {
+      autoAlpha: 0,
+      translateY: 20,
+      duration: .75,
+      ease: Power2.easeInOut,
+      stagger: 0.125,
+    });
+  })
 </script>
 
 <Layout title="CFN Tracker - Changelog">

diff --git a/src/pages/faq.astro b/src/pages/faq.astro
@@ -4,13 +4,15 @@ import Layout from '../layouts/Layout.astro';
 ---
 <script>
   import { gsap, Power3 } from "../lib/gsap";
-  gsap.from("#faq > *", {
-    autoAlpha: 0,
-    translateY: 20,
-    duration: .75,
-    ease: Power3.easeInOut,
-    stagger: 0.125,
-  });
+  document.addEventListener("astro:page-load", () => {
+    gsap.from("#faq > *", {
+      autoAlpha: 0,
+      translateY: 20,
+      duration: .75,
+      ease: Power3.easeInOut,
+      stagger: 0.125,
+    });
+  })
 </script>
 
 <Layout title="CFN Tracker - FAQ">

diff --git a/src/pages/guide.astro b/src/pages/guide.astro
@@ -4,13 +4,15 @@ import Layout from '../layouts/Layout.astro';
 ---
 <script>
   import { gsap, Power3 } from "../lib/gsap";
-  gsap.from("#guide > *", {
-    autoAlpha: 0,
-    translateY: 20,
-    duration: .75,
-    ease: Power3.easeInOut,
-    stagger: 0.125,
-  });
+  document.addEventListener("astro:page-load", () => {
+    gsap.from("#guide > *", {
+      autoAlpha: 0,
+      translateY: 20,
+      duration: .75,
+      ease: Power3.easeInOut,
+      stagger: 0.125,
+    });
+  })
 </script>
 
 <Layout title="CFN Tracker - Guide">