Fix - Clear overlay ignores the animation flag

assets/scripts/src/overlay.js

@@ -69,11 +69,15 @@ export default class Overlay {
   }
 
   clear() {
-    // Cancel the existing animation frame if any
-    // remove the highlighted element and remove the canvas
-    this.window.cancelAnimationFrame(this.redrawAnimation);
+    this.positionToHighlight = new Position();
     this.highlightedElement = null;
-    this.document.body.removeChild(this.overlay);
+
+    // If animation is not required, cancel the immediately remove the canvas
+    // This will stop the animation from the animation frames above
+    if (!this.animate) {
+      this.window.cancelAnimationFrame(this.redrawAnimation);
+      this.document.body.removeChild(this.overlay);
+    }
   }
 
   /**
@@ -137,6 +141,8 @@ export default class Overlay {
         document.body.appendChild(this.overlay);
       }
 
+      // @todo: do not requestAnimationFrame once final highlight position has been reached
+
       // Stage a new animation frame
       this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
     } else {

assets/scripts/src/position.js

@@ -14,7 +14,7 @@ export default class Position {
     top = 0,
     right = 0,
     bottom = 0,
-  }) {
+  } = {}) {
     this.left = left;
     this.right = right;
     this.top = top;

index.html

@@ -51,7 +51,8 @@
   ];
 
   const sholo = new Sholo({
-    animate: false
+    padding: 10,
+    animate: true
   });
 
   nodesToSelect.forEach((nodeToSelect, index) => {