Loading fade out animation

KyleGough · Jul 28, 2023 · ad67428 · ad67428
1 parent 2d31acb
commit ad67428
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/index.html b/src/index.html
@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Solar System Model</title>
-    <link rel="stylesheet" href="./style.scss" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Trispace:wght@200;500;800&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="./style.scss" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   </head>
   <body>
     <div id="loading">

diff --git a/src/setup/loading.ts b/src/setup/loading.ts
@@ -29,6 +29,18 @@ export const onLoaded = () => {
   loadContainer.style.cursor = "pointer";
 
   loadContainer.addEventListener("click", () => {
-    loadContainer.style.display = "none";
+    loadContainer.style.pointerEvents = "none";
+    const animation = loadContainer.animate(
+      { opacity: [1, 0], transform: ["scale(1)", "scale(0.75)"] },
+      {
+        duration: 750,
+        easing: "ease",
+        fill: "forwards",
+      }
+    );
+
+    animation.onfinish = () => {
+      loadContainer.style.display = "none";
+    };
   });
 };