get rid of the sync() method, live turns on asynchronous loading wi…

…thout needing to synchronise the tree

README.md

@@ -66,8 +66,8 @@ var wow = new WOW(
     boxClass:     'wow',      // animated element css class (default is wow)
     animateClass: 'animated', // animation css class (default is animated)
     offset:       0,          // distance to the element when triggering the animation (default is 0)
-    mobile:       true        // trigger animations on mobile devices (true is default)
-    live:         false       // allow later synchronization (false is default)
+    mobile:       true,       // trigger animations on mobile devices (default is true)
+    live:         false       // act on asynchronously loaded content (default is false)
   }
 );
 wow.init();
@@ -86,14 +86,11 @@ var wow = new WOW(
 );
 wow.init();
 
-// Example
+// Example content loading
 setTimeout(function () {
   var moarItems = document.createElement('section');
   moarItems.className = 'wow slideInRight';
   document.body.appendChild(moarItems);
-
-  // Use `.sync()` method to let WOW.js know there are new elements appended
-  wow.sync();
 });
 ```
 

css/site.css

@@ -26,3 +26,11 @@ section {
 .section--green {
   background-color: #2ecc71;
 }
+
+#main {
+  text-align: center;
+}
+
+#more {
+  margin: 20px auto 48px;
+}

demo.html

@@ -27,17 +27,24 @@ <h1>WOW.js</h1>
       <section class="section--purple wow slideInRight" data-wow-delay="2s"></section>
       <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
       <section class="section--green wow slideInLeft" data-wow-duration="4s"></section>
+      <button id="moar">LOAD MOAR!!</button>
     </div>
   </div>
   <script src="dist/wow.js"></script>
   <script>
     wow = new WOW(
       {
         animateClass: 'animated',
-        offset:       100
+        offset:       100,
+        live:         true
       }
     );
     wow.init();
+    document.getElementById('moar').onclick = function() {
+      var section = document.createElement('section');
+      section.className = 'section--purple wow fadeInDown';
+      this.parentNode.insertBefore(section, this);
+    };
   </script>
 </body>
 </html>

src/wow.coffee

@@ -57,6 +57,7 @@ class @WOW
       document.addEventListener 'DOMContentLoaded', @start
 
   start: =>
+    @stopped = false
     @boxes = @element.getElementsByClassName(@config.boxClass)
     if @boxes.length
       if @disabled()
@@ -66,9 +67,24 @@ class @WOW
         window.addEventListener('scroll', @scrollHandler, false)
         window.addEventListener('resize', @scrollHandler, false)
         @interval = setInterval @scrollCallback, 50
+    if @config.live
+      new MutationObserver (records) =>
+        unless @stopped
+          newElements = []
+          for record in records
+            for node in record.addedNodes or []
+              # Not every browser supports `classList`,
+              # but those that support `MutationObserver` all do.
+              newElements.push(node) if node.classList.contains(@config.boxClass)
+          @applyStyle(box, true) for box in newElements
+          @boxes.push newElements...
+      .observe document.body,
+        childList: true
+        subtree: true
 
   # unbind the scroll event
   stop: ->
+    @stopped = true
     window.removeEventListener('scroll', @scrollHandler, false)
     window.removeEventListener('resize', @scrollHandler, false)
     clearInterval @interval if @interval?
@@ -148,7 +164,7 @@ class @WOW
           @show(box)
           continue
         box
-      @stop() unless @boxes.length || @config.live
+      @stop() unless @boxes.length or @config.live
 
 
   # Calculate element offset top
@@ -176,12 +192,3 @@ class @WOW
 
   disabled: ->
     not @config.mobile and @util().isMobile(navigator.userAgent)
-
-  # refresh method for new elements
-  sync: ->
-    if @config.live
-      # Using querySelector as it's even better browser support
-      # @see https://developer.mozilla.org/en-US/docs/Web/API/element.querySelector
-      newElements = @element.querySelectorAll('.' + @config.boxClass + ':not(.' + @config.animateClass + ')')
-      @applyStyle(box, true) for box in newElements
-      @boxes.push newElements...