Add ability to disable animation and perf

demo/scripts/demo.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 document.addEventListener("DOMContentLoaded", function () {
   const tourDriver = new Driver({
-    animate: true,
+    animate: false,
     opacity: 0.8,
     padding: 5,
     showButtons: true,

src/common/constants.js

@@ -12,6 +12,7 @@ export const ID_POPOVER = 'driver-popover-item';
 
 export const CLASS_DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
 
+export const CLASS_NO_ANIMATION = 'sholo-no-animation';
 export const CLASS_POPOVER_TIP = 'driver-popover-tip';
 export const CLASS_POPOVER_TITLE = 'driver-popover-title';
 export const CLASS_POPOVER_DESCRIPTION = 'driver-popover-description';

src/core/element.js

@@ -251,11 +251,15 @@ export default class Element {
     const showAtPosition = this.getCalculatedPosition();
 
     // For first highlight, show it immediately because there won't be any animation
-    const animationDuration = !this.overlay.lastHighlightedElement ? 0 : ANIMATION_DURATION_MS;
+    let showAfterMs = ANIMATION_DURATION_MS;
+    // If animation is disabled or  if it is the first display, show it immediately
+    if (!this.options.animate || !this.overlay.lastHighlightedElement) {
+      showAfterMs = 0;
+    }
 
     this.animationTimeout = this.window.setTimeout(() => {
       this.popover.show(showAtPosition);
-    }, animationDuration);
+    }, showAfterMs);
   }
 
   /**

src/core/overlay.js

@@ -1,5 +1,5 @@
 import Position from './position';
-import { ANIMATION_DURATION_MS, ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
+import { ANIMATION_DURATION_MS, CLASS_NO_ANIMATION, ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
 import { createNodeFromString } from '../common/utils';
 
 /**
@@ -36,6 +36,12 @@ export default class Overlay {
 
     this.node = pageOverlay;
     this.node.style.opacity = '0';
+
+    if (!this.options.animate) {
+      this.node.classList.add(CLASS_NO_ANIMATION);
+    } else {
+      this.node.classList.remove(CLASS_NO_ANIMATION);
+    }
   }
 
   /**
@@ -75,13 +81,17 @@ export default class Overlay {
     this.highlightedElement = element;
     this.positionToHighlight = position;
 
-    this.showOverlay();
+    this.show();
 
     // Element has been highlighted
     this.highlightedElement.onHighlighted();
   }
 
-  showOverlay() {
+  show() {
+    if (this.node && this.node.parentElement) {
+      return;
+    }
+
     this.makeNode();
 
     window.setTimeout(() => {

src/core/stage.js

@@ -1,4 +1,4 @@
-import { ID_STAGE, STAGE_HTML } from '../common/constants';
+import { CLASS_NO_ANIMATION, ID_STAGE, STAGE_HTML } from '../common/constants';
 import { createNodeFromString } from '../common/utils';
 import Element from './element';
 
@@ -18,9 +18,6 @@ export default class Stage extends Element {
     this.options = options;
     this.window = window;
     this.document = document;
-
-    this.makeNode();
-    this.hide();
   }
 
   /**
@@ -34,6 +31,12 @@ export default class Stage extends Element {
     }
 
     this.node = stage;
+
+    if (!this.options.animate) {
+      this.node.classList.add(CLASS_NO_ANIMATION);
+    } else {
+      this.node.classList.remove(CLASS_NO_ANIMATION);
+    }
   }
 
   removeNode() {
@@ -49,6 +52,7 @@ export default class Stage extends Element {
    */
   hide() {
     this.node.style.display = 'none';
+
     this.removeNode();
   }
 

src/driver.scss

@@ -107,9 +107,21 @@ div#driver-popover-item {
   }
 }
 
+.sholo-no-animation {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -ms-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+
 div#driver-page-overlay {
   background: black;
-  position: absolute;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
   display: block;
   width: 100%;
   height: 100%;

src/index.js

@@ -184,7 +184,6 @@ export default class Driver {
       return;
     }
 
-    // Refresh with animation
     this.overlay.refresh();
   }