Cancel any pending animations on quick movements

src/common/constants.js

@@ -10,7 +10,7 @@ export const ID_OVERLAY = 'driver-page-overlay';
 export const ID_STAGE = 'driver-highlighted-element-stage';
 export const ID_POPOVER = 'driver-popover-item';
 
-export const DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
+export const CLASS_DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
 
 export const CLASS_POPOVER_TIP = 'driver-popover-tip';
 export const CLASS_POPOVER_TITLE = 'driver-popover-title';

src/core/element.js

@@ -1,5 +1,5 @@
 import Position from './position';
-import { ANIMATION_DURATION_MS, DRIVER_HIGHLIGHTED_ELEMENT } from '../common/constants';
+import { ANIMATION_DURATION_MS, CLASS_DRIVER_HIGHLIGHTED_ELEMENT } from '../common/constants';
 
 /**
  * Wrapper around DOMElements to enrich them
@@ -23,6 +23,8 @@ export default class Element {
     this.overlay = overlay;
     this.popover = popover;
 
+    this.animationTimeout = null;
+
     this.highlightFinished = false; // To track when the element has fully highlighted
   }
 
@@ -140,7 +142,10 @@ export default class Element {
   onDeselected() {
     this.hidePopover();
 
-    this.node.classList.remove(DRIVER_HIGHLIGHTED_ELEMENT);
+    this.node.classList.remove(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
+
+    // If there was any animation in progress, cancel that
+    this.window.clearTimeout(this.animationTimeout);
 
     this.highlightFinished = false;
 
@@ -170,7 +175,7 @@ export default class Element {
   onHighlighted() {
     this.showPopover();
 
-    this.node.classList.add('driver-highlighted-element');
+    this.node.classList.add(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
 
     this.highlightFinished = true;
 
@@ -228,7 +233,7 @@ export default class Element {
     // For first highlight, show it immediately because there won't be any animation
     const animationDuration = !this.overlay.lastHighlightedElement ? 0 : ANIMATION_DURATION_MS * 2;
 
-    window.setTimeout(() => {
+    this.animationTimeout = this.window.setTimeout(() => {
       this.popover.show(showAtPosition);
     }, animationDuration);
   }