Animation tweaks

BSGmarathon · Jul 22, 2024 · 62545c0 · 62545c0
1 parent 2692c88
commit 62545c0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git a/src/graphics/omnibar/components/Ticker/UpcomingRun.vue b/src/graphics/omnibar/components/Ticker/UpcomingRun.vue
@@ -13,7 +13,7 @@
     <div :style="{ 'font-size': '25px' }">
       {{ when }}
     </div>
-    <div :style="{ 'font-size': '40px' }">
+    <div :style="{ 'font-size': '35px' }">
       <span v-if="getRunTotalPlayers(run) > 0">
         {{ formPlayerNamesStr(run) }}
         play<span v-if="getRunTotalPlayers(run) === 1">s</span> {{ run.game }}

diff --git a/src/graphics/omnibar/main.vue b/src/graphics/omnibar/main.vue
@@ -17,9 +17,9 @@
             'top': `${dashInfo.top}px`,
           }">{{ dashInfo.text }}</p>
           </div>
+          <div class="arrow_base before_dash" />
         </div>
       </transition>
-      <div class="arrow_base after_left_box" />
       <div class="box">
         <clock class="clock"/>
       </div>
@@ -142,6 +142,7 @@ html, body {
     }
 
     .dashContainer {
+      width: 350px;
       position: absolute;
       left: calc(var(--dash-left-width) - 14px);
       animation-duration: 500ms;
@@ -152,6 +153,12 @@ html, body {
         display: none;
       }
 
+      .before_dash {
+        --color: var(--dark-arrow-default);
+        left: -45px;
+        top: -246px;
+      }
+
       #dash {
         position: relative;
         background: var(--bsg-color);
@@ -209,7 +216,7 @@ html, body {
 
     &.no-dash {
       //left: 269px;
-      left: 194px;
+      left: 190px;
       width: 1285px;
 
       /* HACK: normal text is different */
@@ -274,35 +281,44 @@ html, body {
 
 @mixin calcAnimation($startDelay) {
   animation: slideOutLeft;
-  animation-duration: calc(500ms - $startDelay);
+  animation-duration: calc(500ms - #{$startDelay});
   animation-timing-function: ease-in-out;
+  //animation-timing-function: cubic-bezier(0.950, 0.005, 0.580, 1.000);
 
-  animation-delay: $startDelay !important;
+  animation-delay: #{$startDelay} !important;
 }
 
 .omnibar-dash-leave-active {
   @include calcAnimation(0ms);
 
-  .dash_seg_2 {
-    @include calcAnimation(0ms);
-  }
-
-  .dash_seg_1 {
-    @include calcAnimation(100ms);
-  }
-
-  #dash {
-    @include calcAnimation(200ms);
-  }
+  //.dash_seg_2 {
+  //  @include calcAnimation(0ms);
+  //}
+  //
+  //.dash_seg_1 {
+  //  @include calcAnimation(100ms);
+  //}
+  //
+  //#dash {
+  //  @include calcAnimation(200ms);
+  //}
+  //
+  //.before_dash {
+  //  @include calcAnimation(400ms);
+  //}
 }
 
 .omnibar-dash-enter-active {
   animation: slideInLeft;
   animation-duration: 500ms;
   animation-timing-function: ease-in-out;
 
+  .before_dash {
+    animation-delay: 100ms;
+  }
+
   #dash {
-    animation-delay: 0ms;
+    animation-delay: 150ms;
   }
 
   .dash_seg_1 {
@@ -315,8 +331,8 @@ html, body {
 }
 
 .omnibar-dash-enter, .omnibar-dash-leave-to {
-  left: -20px;
-  .dash_seg_1, .dash_seg_2, #dash {
+  left: -100px;
+  .dash_seg_1, .dash_seg_2, #dash, .before_dash {
     left: -20px;
   }
 }