diff --git a/assets/scripts/src/overlay.js b/assets/scripts/src/overlay.js
index c483ac58d6fbe9ad1304933801cad174467a9927..8a63925ccaffcbfeec65ed424015307aee57c20d 100644
--- a/assets/scripts/src/overlay.js
+++ b/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 {
diff --git a/assets/scripts/src/position.js b/assets/scripts/src/position.js
index 08a41ecc08627ab4f3d36efd6db389f8ca806440..66d13b4601f968e3eaf8c5086499d75e5bd4a8e4 100644
--- a/assets/scripts/src/position.js
+++ b/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;
diff --git a/index.html b/index.html
index 88cdb48cab703d018e008f436a122b531949d2e4..b40fb115d7054e4ce2cc2af39537767f46276b37 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,8 @@
   ];
 
   const sholo = new Sholo({
-    animate: false
+    padding: 10,
+    animate: true
   });
 
   nodesToSelect.forEach((nodeToSelect, index) => {