Add disableMutationObserver setting

michalsnik · Oct 3, 2018 · 7c55654 · 7c55654 · ska89abv · Dec 7, 2020
1 parent 2f62a4d
commit 7c55654
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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