From 7c55654beadab9ef9be358b3584dd1bde3f1a259 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Wed, 3 Oct 2018 23:39:41 +0100
Subject: [PATCH] Add disableMutationObserver setting

---
 README.md                                     |  1 +
 .../settings_disableMutationObserver_spec.js  | 19 +++++++++++++++++++
 demo/async.html                               |  5 +----
 src/js/aos.js                                 |  7 +++++--
 4 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 cypress/integration/settings_disableMutationObserver_spec.js

diff --git a/README.md b/README.md
index bb7575e..25b02ad 100755
--- a/README.md
+++ b/README.md
@@ -78,6 +78,7 @@ AOS.init({
   initClassName: 'aos-init', // class applied after initialization
   animatedClassName: 'aos-animate', // class applied on animation
   useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
+  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
 
   // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
   offset: 120, // offset (in px) from the original trigger point
diff --git a/cypress/integration/settings_disableMutationObserver_spec.js b/cypress/integration/settings_disableMutationObserver_spec.js
new file mode 100644
index 0000000..27a8b1a
--- /dev/null
+++ b/cypress/integration/settings_disableMutationObserver_spec.js
@@ -0,0 +1,19 @@
+describe('setting: disableMutationObserver', function() {
+  before(() => {
+    cy.visit('/async.html');
+    cy.initAOS({
+      disableMutationObserver: true
+    });
+  });
+
+  it('Should not detect any changes in DOM, and thus not animate any elements as a result', function() {
+    cy.dispatchEvent('add-aos-item', 20);
+    cy.get('.aos-item').should('have.length', 20);
+    cy.get('.aos-animate').should('have.length', 0);
+  });
+
+  it('Should not animate dynamically loaded elements on scroll', function() {
+    cy.scrollTo('bottom');
+    cy.get('.aos-animate').should('have.length', 0);
+  });
+});
diff --git a/demo/async.html b/demo/async.html
index ec871ad..516cd74 100644
--- a/demo/async.html
+++ b/demo/async.html
@@ -15,11 +15,8 @@
 
     <script src="dist/aos.js"></script>
     <script>
-      AOS.init({
-        easing: 'ease-in-out-sine'
-      });
-
       if (!window.Cypress) {
+        AOS.init();
         setInterval(addItem, 150);
       } else {
         document.addEventListener('add-aos-item', addItem);
diff --git a/src/js/aos.js b/src/js/aos.js
index 45aca91..ddcd9f2 100644
--- a/src/js/aos.js
+++ b/src/js/aos.js
@@ -38,7 +38,8 @@ let options = {
   startEvent: 'DOMContentLoaded',
   animatedClassName: 'aos-animate',
   initClassName: 'aos-init',
-  useClassNames: false
+  useClassNames: false,
+  disableMutationObserver: false
 };
 
 // Detect not supported browsers (<=IE9)
@@ -141,7 +142,9 @@ const init = function init(settings) {
    * If something is loaded by AJAX
    * it'll refresh plugin automatically
    */
-  observe('[data-aos]', refreshHard);
+  if (!options.disableMutationObserver) {
+    observe('[data-aos]', refreshHard);
+  }
 
   /**
    * Don't init plugin if option `disable` is set