Add color toggle animation, fixes #25

2 files changed, 129 insertions, 36 deletions

diff --git a/assets/js/toggleColors.js b/assets/js/toggleColors.js
index fd684c5..ad3bd09 100644
--- a/assets/js/toggleColors.js
+++ b/assets/js/toggleColors.js
@@ -1,16 +1,64 @@
 document.getElementById("themeColorButton").addEventListener("click", toggleColors);
 
 let bodyElement = document.getElementsByTagName("BODY")[0];
+let moonOrSun = document.getElementById("moonOrSun");
+let sunRays = document.getElementById("sunRays");
+let moonMask = document.getElementById("moonMask");
+
+initAnimation();
+
+function initAnimation(){
+    if (localStorage.getItem("isLight") === 'true'){
+        moonMask.style.top = "-8px";
+        moonMask.style.right = "-1px";
+        moonOrSun.style.transform = "scale(1)"
+        sunRays.style.transform = "scale(0.1)"
+    }
+    else{
+        moonMask.style.top = "-25px";
+        moonMask.style.right = "-15px";
+        moonOrSun.style.transform = "scale(0.5)"
+        sunRays.style.transform = "scale(0.6)"
+    }
+}
 
 function toggleColors(){
     if (localStorage.getItem("isLight") === 'true'){
         makeDark();
 
+        moonMask.classList.add("mask-to-sun-animation");
+        moonOrSun.classList.add("to-sun-animation");
+        sunRays.classList.add("expand-rays");
+
+        setTimeout(function(){
+            sunRays.classList.remove("expand-rays");
+        }, 500);
+        setTimeout(function(){
+            moonMask.classList.remove("mask-to-sun-animation");
+            moonOrSun.classList.remove("to-sun-animation");
+            initAnimation();
+        }, 400);
+
         localStorage.setItem("isLight", 'false');
     }
     else{
         makeLight();
 
+        moonMask.classList.add("mask-to-moon-animation");
+        moonOrSun.classList.add("to-moon-animation");
+        sunRays.classList.add("contract-rays");
+
+
+        setTimeout(function(){
+            sunRays.classList.remove("contract-rays");
+        }, 500);
+        setTimeout(function(){
+            moonMask.classList.remove("mask-to-moon-animation");
+            moonOrSun.classList.remove("to-moon-animation");
+            sunRays.classList.remove("contract-rays");
+            initAnimation();
+        }, 400);
+
         localStorage.setItem("isLight", 'true');
     }
 }
diff --git a/assets/scss/navigation.scss b/assets/scss/navigation.scss
index 7627125..ba5e03a 100644
--- a/assets/scss/navigation.scss
+++ b/assets/scss/navigation.scss
@@ -212,10 +212,10 @@
     }
 }
 
-.moon-or-sun{
-    position: relative;
-    width: 24px;
-    height: 24px;
+.sun-rays{
+    position: fixed;
+    width: 9px;
+    height: 9px;
     border-radius: 50%;
     border: 2px solid
       var(--primary);
@@ -223,31 +223,7 @@
     transform: 1;
     transition: all 0.45s ease;
     overflow: hidden;
-  
-    &::before {
-      content: "";
-      position: absolute;
-      right: -9px;
-      top: -9px;
-      height: 24px;
-      width: 24px;
-      border: 2px solid var(--primary);
-      border-radius: 50%;
-      transform: translate("0, 0");
-      opacity: 1;
-      transition: transform 0.45s ease;
-    }
-  
-    &::after {
-      content: "";
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      margin: -4px 0 0 -4px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      box-shadow: 0 -23px 0 var(--primary),
+    box-shadow: 0 -23px 0 var(--primary),
         0 23px 0 var(--primary),
         23px 0 0 var(--primary),
         -23px 0 0 var(--primary),
@@ -255,13 +231,20 @@
         -15px 15px 0 var(--primary),
         15px -15px 0 var(--primary),
         -15px -15px 0 var(--primary);
-      transform: scale(0);
-      transition: all 0.35s ease;
-      
-      @media screen and (max-width: $tablet){
-        transform: scale(0);
-      }
-    }
+    transform: scale(0.6);
+}
+
+.moon-or-sun{
+    position: relative;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid
+      var(--primary);
+    background: var(--primary);
+    transform: 1;
+    transition: all 0.45s ease;
+    overflow: hidden;
 }
 
 .moon-mask{
@@ -278,6 +261,68 @@
     transition: transform 0.45s ease, var(--color-mode-transition);
 }
 
+.mask-to-sun-animation{
+    animation-name: mask-to-sun;
+    animation-duration: 0.4s;
+}
+
+.mask-to-moon-animation{
+    animation-name: mask-to-moon;
+    animation-duration: 0.4s;
+}
+
+.to-sun-animation{
+    animation-name: to-sun;
+    animation-duration: 0.4s;
+}
+
+.to-moon-animation{
+    animation-name: to-moon;
+    animation-duration: 0.4s;
+}
+
+.expand-rays{
+    animation-name: expand-rays;
+    animation-duration: 0.5s;
+}
+
+.contract-rays{
+    animation-name: contract-rays;
+    animation-duration: 0.5s;
+}
+
+@keyframes mask-to-sun {
+    from {top: -8px; right: -1px; transform: scale(1);}
+    to {top: -25px; right: -15px; transform: scale(0.5);}
+}
+
+@keyframes mask-to-moon {
+    from {top: -25px; right: -15px; transform: scale(0.5);}
+    to {top: -8px; right: -1px; transform: scale(1);}
+}
+
+@keyframes to-sun {
+    from {transform: scale(1);}
+    to {transform: scale(0.5);}
+}
+
+@keyframes to-moon {
+    from {transform: scale(0.5);}
+    to {transform: scale(1);}
+}
+
+@keyframes expand-rays {
+    from {transform: scale(0.1);}
+    to {transform: scale(0.6);}
+}
+
+@keyframes contract-rays {
+    from {transform: scale(0.6);}
+    to {transform: scale(0.1);}
+}
+
+
+
 .header-hidden{
     position: absolute;
     display: inline-block;