Merge pull request #7 from SenaThenu/bug/smooth-animation

Made the animations smoother
SenaThenu · Jan 23, 2024 · 3105f35 · 3105f35
2 parents ea037f3 + df62c6b
commit 3105f35
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <script src="script.js" defer></script>
 </head>
 
-<body id="master">
+<body id="master" class="disappear">
     <main id="main-content">
         <div id="profile"></div>
         <div id="links-container" class="hide"></div>

diff --git a/script.js b/script.js
@@ -109,7 +109,7 @@ function displayLinks() {
     }
     setTimeout(() => {
         linksContainer.classList.remove("hide");
-    }, 450);
+    }, 500);
 }
 
 function addCopyright() {
@@ -124,6 +124,10 @@ function injectBackground() {
 }
 
 async function main() {
+    document.addEventListener("DOMContentLoaded", () => {
+        let content = document.getElementById("master");
+        content.classList.remove("disappear");
+    });
     await loadConfig();
     injectBackground();
     setUpHead();

diff --git a/style.css b/style.css
@@ -7,29 +7,20 @@
     --link-font-color: #000;
 }
 
+@keyframes basic-fade {
+    from {
+        opacity: 0;
+    }
 
-*,
-*::before,
-*::after {
-    margin: 0;
-    padding: 0;
-    font-family: 'Titillium Web', sans-serif;
-    color: var(--general-font-color);
-}
-
-body {
-    margin: 0;
-    background-color: var(--bg-color);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-attachment: fixed;
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes fade-in {
     from {
         opacity: 0;
-        transform: scale(1.2);
+        transform: scale(1.1);
     }
 
     to {
@@ -53,6 +44,30 @@ body {
 
 }
 
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    font-family: 'Titillium Web', sans-serif;
+    color: var(--general-font-color);
+}
+
+body {
+    margin: 0;
+    background-color: var(--bg-color);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+    animation: basic-fade 500ms ease-in-out;
+}
+
+/* This is a special class used to fully remove the content until everything is fully loaded */
+.disappear {
+    display: none !important;
+}
+
 #main-content {
     display: flex;
     flex-direction: column;
@@ -61,7 +76,7 @@ body {
     margin-left: auto;
     margin-right: auto;
     margin-top: 2.5rem;
-    animation: fade-in 1.2s ease-in-out;
+    animation: fade-in 1.5s ease-in-out;
 }
 
 #profile {