Use translateX instead of changing width

stylesheets/components/StoryViewer.scss

@@ -280,10 +280,9 @@
 
     &--bar {
       background: $color-white;
-      background-size: 200% 100%;
       border-radius: 2px;
-      display: block;
       height: 100%;
+      transform: translateX(-100%);
     }
   }
 

ts/components/StoryViewer.tsx

@@ -284,12 +284,15 @@ export const StoryViewer = ({
     );
     const target = progressBarRef.current;
 
-    const animation = target.animate([{ width: '0%' }, { width: '100%' }], {
+    const animation = target.animate(
-      id: 'story-progress-bar',
+      [{ transform: 'translateX(-100%)' }, { transform: 'translateX(0%)' }],
-      duration: storyDuration,
+      {
-      easing: 'linear',
+        id: 'story-progress-bar',
-      fill: 'forwards',
+        duration: storyDuration,
-    });
+        easing: 'linear',
+        fill: 'forwards',
+      }
+    );
 
     animationRef.current = animation;
 
@@ -411,27 +414,41 @@ export const StoryViewer = ({
       return;
     }
 
-    let lastMouseMove: number | undefined;
+    let mouseMoveExpiration: number | undefined;
+    let timer: NodeJS.Timeout | undefined;
 
     function updateLastMouseMove() {
-      lastMouseMove = Date.now();
+      mouseMoveExpiration = Date.now() + MOUSE_IDLE_TIME;
+
+      if (timer === undefined) {
+        checkMouseIdle();
+      }
     }
 
     function checkMouseIdle() {
-      requestAnimationFrame(() => {
+      timer = undefined;
-        if (lastMouseMove && Date.now() - lastMouseMove > MOUSE_IDLE_TIME) {
+
-          setArrowToShow(Arrow.None);
+      if (mouseMoveExpiration === undefined) {
-        } else {
+        return;
-          checkMouseIdle();
+      }
-        }
+
-      });
+      const remaining = mouseMoveExpiration - Date.now();
+      if (remaining <= 0) {
+        setArrowToShow(Arrow.None);
+        return;
+      }
+
+      timer = setTimeout(checkMouseIdle, remaining);
     }
-    checkMouseIdle();
 
     document.addEventListener('mousemove', updateLastMouseMove);
 
     return () => {
-      lastMouseMove = undefined;
+      if (timer !== undefined) {
+        clearTimeout(timer);
+      }
+      mouseMoveExpiration = undefined;
+      timer = undefined;
       document.removeEventListener('mousemove', updateLastMouseMove);
     };
   }, [arrowToShow]);
@@ -723,9 +740,13 @@ export const StoryViewer = ({
                   ) : (
                     <div
                       className="StoryViewer__progress--bar"
-                      style={{
+                      style={
-                        width: currentIndex < index ? '0%' : '100%',
+                        currentIndex < index
-                      }}
+                          ? {}
+                          : {
+                              transform: 'translateX(0%)',
+                            }
+                      }
                     />
                   )}
                 </div>