try and fix loader animation

Kibibit · Aug 25, 2024 · bb23d2f · bb23d2f
1 parent 9e63c90
commit bb23d2f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 11 deletions.
diff --git a/css/kb-logo.css b/css/kb-logo.css
@@ -4,6 +4,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  /* align-items: end; */
   position: relative;
   font-size: 1em;
   line-height: 1em;
@@ -12,6 +13,13 @@
   transition: all 500ms;
   box-sizing: content-box;
 }
+#kb-punch {
+  opacity: 0;
+  transition: all 500ms;
+}
+#kb-punch.visible {
+  opacity: 1;
+}
 .kb-logo * {
   box-sizing: content-box;
   color: white;
@@ -34,17 +42,28 @@
   background: currentColor !important;
 }
 .kb-logo.loader, .kb-logo.kb-loader {
-  animation: change-font-size 1s linear 500ms infinite;
-  font-size: 21vw;
+  /* animation: change-font-size 1s linear 500ms infinite; */
+  /* font-size: 21vw; */
 }
 .kb-logo.loader.squiggly, .kb-logo.loader.always-squiggly, .kb-logo.kb-loader.squiggly, .kb-logo.kb-loader.always-squiggly {
-  animation: change-font-size 1s linear 500ms infinite, squiggly-animation-filter 0.34s linear infinite;
-  font-size: 21vw;
+  animation: heigher 1s linear 500ms infinite, squiggly-animation-filter 0.34s linear infinite;
+  /* font-size: 21vw; */
+}
+
+.kb-logo.loader .shape-animation {
+  animation: heigher 1s cubic-bezier(.17,.67,.83,.67) infinite calc(var(--animation-order) * 100ms);
+}
+
+.kb-logo.loader .shape-animation.shape-zero .shape2 {
+  height: 55%;
 }
+
+
+.kb-logo.loader .shape-animation,
 .kb-logo.loader .shape-animation .shape1,
 .kb-logo.loader .shape-animation .shape2, .kb-logo.kb-loader .shape-animation .shape1,
 .kb-logo.kb-loader .shape-animation .shape2 {
-  transition: all 250ms ease-in-out, background 250ms ease-in-out;
+  transition: none;
 }
 .kb-logo.full-logo .shape-animation.to-red .shape {
   background: #E31B36;
@@ -231,3 +250,18 @@
     height: 0.1em;
   }
 }
+
+@keyframes heigher {
+  0% {
+    height: 0.7625em;
+  }
+  33% {
+    height: 0.65em;
+  }
+  66% {
+    height: 0.9em;
+  }
+  100% {
+    height: 0.7625em;
+  }
+}
diff --git a/index.html b/index.html
@@ -38,39 +38,39 @@
     <div id="logo" class="kb-logo"><span class="letter">k</span>
       <!--
 -->
-      <div class="shape-animation shape-one to-red">
+      <div class="shape-animation shape-one to-red" style="--animation-order: 1;">
         <div class="shape shape1"></div>
         <div class="shape shape2"></div>
       </div>
       <!--
 -->
-      <div class="shape-animation shape-zero">
+      <div class="shape-animation shape-zero" style="--animation-order: 2;">
         <div class="shape shape1"></div>
         <div class="shape shape2"></div>
       </div>
       <!--
 -->
-      <div class="shape-animation shape-one to-blue middle">
+      <div class="shape-animation shape-one to-blue middle" style="--animation-order: 3;">
         <div class="shape shape1"></div>
         <div class="shape shape2"></div>
       </div>
       <!--
 -->
-      <div class="shape-animation shape-zero">
+      <div class="shape-animation shape-zero" style="--animation-order: 4;">
         <div class="shape shape1"></div>
         <div class="shape shape2"></div>
       </div>
       <!--
 -->
-      <div class="shape-animation shape-one to-yellow">
+      <div class="shape-animation shape-one to-yellow" style="--animation-order: 5;">
         <div class="shape shape1"></div>
         <div class="shape shape2"></div>
       </div><span class="letter">t</span>
       <div class="k1b1b0t-mouth-container">
         <div class="k1b1b0t-mouth">[||||]</div>
       </div>
     </div>
-    <div id="kb-punch" style="color: white; font-size: 26px; font-family: 'Righteous', cursive; flex-shrink: 0; width: 100%; text-align: center;margin-top: 30px;">
+    <div id="kb-punch" class="visible" style="color: white; font-size: 26px; font-family: 'Righteous', cursive; flex-shrink: 0; width: 100%; text-align: center;margin-top: 30px;">
       <div id="logo-little" class="kb-logo shape-active"><span class="letter">k</span>
         <!--
 -->

diff --git a/js/index.js b/js/index.js
@@ -40,6 +40,7 @@ $( document ).ready(function() {
 });
 
 var refreshIntervalId = changeBetween();
+var loaderRefreshIntervalId = null;
 changeBetween2();
 
 ELEMENTS.$togglerColors.click(function() {
@@ -89,9 +90,14 @@ ELEMENTS.$togglerLoaderAnimation.click(function() {
         clearInterval(refreshIntervalId);
         refreshIntervalId = null;
         ELEMENTS.$logo.addClass(CLASSES.loader);
+        ELEMENTS.$PUNCH.removeClass(CLASSES.show);
+        // loaderRefreshIntervalId = changeBits();
     } else {
+        clearInterval(loaderRefreshIntervalId);
+        loaderRefreshIntervalId = null;
         refreshIntervalId = changeBetween();
         ELEMENTS.$logo.removeClass(CLASSES.loader);
+        ELEMENTS.$PUNCH.addClass(CLASSES.show);
     }
     ELEMENTS.$logo.removeClass(CLASSES.turnToName);
     ELEMENTS.$togglerLoaderAnimation.toggleClass(CLASSES.activeButton);
@@ -105,6 +111,19 @@ function changeBetween() {
     }, 4000);
 }
 
+function changeBits() {
+    return setInterval(function() {
+        const allOnes = ELEMENTS.$logo.find('.shape-one');
+        const allZeros = ELEMENTS.$logo.find('.shape-zero');
+
+        // change ones to zeros
+        allOnes.removeClass('shape-one').addClass('shape-zero');
+
+        // change zeros to ones
+        allZeros.removeClass('shape-zero').addClass('shape-one');
+    }, 250);
+}
+
 function changeBetween2() {
     ELEMENTS.$littleLogo.removeClass('CLASSES.k1b1b0t');