diff --git a/assets/scripts/src/overlay.js b/assets/scripts/src/overlay.js
index 8a63925..ccbfa5a 100644
--- a/assets/scripts/src/overlay.js
+++ b/assets/scripts/src/overlay.js
@@ -141,10 +141,14 @@ 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);
+      // Stage a new animation frame only if the position has not been reached
+      // of the alpha has not yet fully reached fully required opacity
+      if (
+        !this.positionToHighlight.equals(this.highlightedPosition) ||
+        this.overlayAlpha.toFixed(2) !== this.opacity.toFixed(2)
+      ) {
+        this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
+      }
     } else {
       this.document.body.removeChild(this.overlay);
     }
diff --git a/assets/scripts/src/position.js b/assets/scripts/src/position.js
index 66d13b4..43e16e4 100644
--- a/assets/scripts/src/position.js
+++ b/assets/scripts/src/position.js
@@ -24,4 +24,11 @@ export default class Position {
   canHighlight() {
     return this.left < this.right && this.top < this.bottom;
   }
+
+  equals(position) {
+    return this.left.toFixed(3) === position.left.toFixed(3) &&
+      this.right.toFixed(3) === position.right.toFixed(3) &&
+      this.top.toFixed(3) === position.top.toFixed(3) &&
+      this.bottom.toFixed(3) === position.bottom.toFixed(3);
+  }
 }