Merge branch 'master' into 2.0.0-dev

ForkSC · Jun 19, 2016 · 43091ef · 43091ef
2 parents df1643e + f6dc732
commit 43091ef
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -117,18 +117,20 @@ Down below you can find list of all anchor-placement options.
 
 ####API
 
-AOS object is exposed as global variable, for now there are only two methods available:
+AOS object is exposed as a global variable, for now there are three methods available:
 
-  * init
-  * refresh
+  * `init` - initialize AOS
+  * `refresh` - recalculate all offsets and positions of elements (called on window resize)
+  * `refreshHard` - reinit array with AOS elements and trigger `refresh` (called on DOM changes that are related to `aos` elements)
 
-Running:
+Example execution:
 ```javascript
   AOS.refresh();
 ```
-will recalculate all offsets and positions of elements.
-It could be handy in older browsers which don't support mutation observer.
-By default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls refresh automatically. In older browsers like IE you might need to call `AOS.refresh()` by yourself.
+
+By default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls `refreshHard` automatically. In browsers that don't support `MutationObserver` like IE you might need to call `AOS.refreshHard()` by yourself.
+
+`refresh` method is called on window resize and so on, as it doesn't require to build new store with AOS elements and should be as light as possible.
 
 ### Global settings
 
@@ -303,6 +305,9 @@ If you have any questions, ideas or whatsoever, please let me know in `issues` o
 - Make `data-aos` attributes the default ones
 - Improve animations performance
 
+#### 1.2.2
+- Fix AOS refreshing on asynchronously loaded elements
+
 #### 1.2.1
 - Add main file to package.json
 

diff --git a/demo/async.html b/demo/async.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>AOS - Animate on scroll library</title>
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="../dist/aos.css" />
+  </head>
+  <body>
+    <div id="aos-demo" class="aos-all">
+      <div class="aos-item" aos="fade-up">
+        <div class="aos-item__inner colored-1"><h3>Lorem ipsum</h3></div>
+      </div>
+      <div class="aos-item" aos="fade-down">
+        <div class="aos-item__inner colored-2"><h3>dolor sit amet</h3></div>
+      </div>
+      <div class="aos-item" aos="zoom-out-down">
+        <div class="aos-item__inner colored-3"><h3>onsectetur adipisicing</h3></div>
+      </div>
+    </div>
+
+    <script src="../dist/aos.js"></script>
+    <script>
+      AOS.init({
+        easing: 'ease-in-out-sine'
+      });
+
+      setInterval(addItem, 1000);
+
+      var itemsCounter = 4;
+      var container = document.getElementById('aos-demo');
+
+      function addItem () {
+        var item = document.createElement('div');
+        item.classList.add('aos-item');
+        item.setAttribute('aos', 'fade-up');
+        item.innerHTML = '<div class="aos-item__inner colored-' + itemsCounter + '"><h3>Lorem ipsum</h3></div>';
+        container.appendChild(item);
+      }
+    </script>
+  </body>
+</html>