Only animate progress when playing

front/src/components/audio/Player.vue

@@ -7,7 +7,7 @@
       <div
         :class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']">
         <div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
-        <div class="position bar" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div>
+        <div class="position bar" :class="{ 'animation': animationActive }" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div>
       </div>
       <div class="controls-row">
 
@@ -727,6 +727,9 @@ export default {
         expandQueue,
         addArtistContentFilter
       }
+    },
+    animationActive () {
+      return this.progress && this.playing;
     }
   },
   watch: {

front/src/style/components/_player.scss

@@ -76,10 +76,14 @@
     .bar.position:not(.buffer) {
     background: var(--vibrant-color);
     width: 100%;
-    transition: transform 1.1s linear 0s;
+    transition: transform 0s linear 0s;
     transform-origin: left center 0px;
   }
 
+  .animation {
+    transition-duration: 1.01s !important;
+  }
+
   .track-controls {
     display: flex;
     align-items: center;