Update offset calculations and mirror option

cypress/integration/aos_spec.js

@@ -55,7 +55,7 @@ describe('AOS', function () {
     cy.scrollTo('top')
     cy.get('.aos-animate').should('have.length', 2);
 
-    cy.viewport('macbook-13')
+    cy.viewport(1280, 720);
     cy.get('.aos-animate').should('have.length', 6);
   });
 });

demo/index.html

@@ -40,20 +40,9 @@
 
     <script src="dist/aos.js"></script>
     <script>
-      if (!window.Cypress) AOS.init();
-    </script>
-
-    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
-    <script>
-      requirejs.config({
-          baseUrl: 'dist',
+      if (!window.Cypress) AOS.init({
+        mirror: true
       });
-
-      require(['aos'], function(AOS){
-          AOS.init({
-              easing: 'ease-in-out-sine'
-          });
-      });
-    </script> -->
+    </script>
   </body>
 </html>

src/js/helpers/elements.js

@@ -3,9 +3,7 @@
  * This array will be extended later with elements attributes values
  * like 'position'
  */
-const createArrayWithElements = function (elements) {
-  elements = elements || document.querySelectorAll('[data-aos]');
+export default () => {
+  const elements = document.querySelectorAll('[data-aos]');
   return Array.prototype.map.call(elements, node => ({ node }));
 };
-
-export default createArrayWithElements;

src/js/helpers/getInlineOption.js

@@ -3,18 +3,20 @@
  *
  * @param  {Node} el [Dom element]
  * @param  {String} key [Option key]
- * @param  {String} def [Default (fallback) value]
+ * @param  {String} fallback [Default (fallback) value]
  * @return {Mixed} [Option set with inline attributes or fallback value if not set]
  */
 
-const getInlineOption = function(el, key, def) {
-  const attr = el.node.getAttribute('data-aos-' + key);
-  if ( typeof attr !== 'undefined' && attr === 'true' ) {
-    return true;
-  } else if ( typeof attr !== 'undefined' && attr === 'false' ) {
-    return false;
+export default (el, key, fallback) => {
+  const attr = el.getAttribute('data-aos-' + key);
+
+  if (typeof attr !== 'undefined') {
+    if (attr === 'true') {
+      return true;
+    } else if (attr === 'false') {
+      return false;
+    }
   }
-  return def;
-}
 
-export default getInlineOption;
+  return attr || fallback;
+}

src/js/helpers/handleScroll.js

@@ -3,8 +3,8 @@
  * @param {node} el         element
  * @param {int}  top        scrolled distance
  */
-const setState = function (el, top) {
-  if (top >= el.position.out && !el.options.once && el.options.mirror) {
+const setState = (el, top) => {
+  if (el.options.mirror && top >= el.position.out && !el.options.once) {
     el.node.classList.remove('aos-animate');
   }
   else if (top >= el.position.in) {
@@ -19,19 +19,11 @@ const setState = function (el, top) {
  * Scroll logic - add or remove 'aos-animate' class on scroll
  *
  * @param  {array} $elements         array of elements nodes
- * @param  {bool} once               plugin option
  * @return {void}
  */
-const handleScroll = function ($elements) {
-  const scrollTop = window.pageYOffset;
-  const windowHeight = window.innerHeight;
-  /**
-   * Check all registered elements positions
-   * and animate them on scroll
-   */
-  $elements.forEach((el, i) => {
-    setState(el, windowHeight + scrollTop);
-  });
-};
+const handleScroll = $elements =>
+  $elements.forEach((el, i) =>
+    setState(el, window.pageYOffset)
+  );
 
 export default handleScroll;

src/js/helpers/offsetCalculator.js

@@ -0,0 +1,73 @@
+/**
+ * Calculate offset
+ * basing on element's settings like:
+ * - anchor
+ * - offset
+ *
+ * @param  {Node} el [Dom element]
+ * @return {Integer} [Final offset that will be used to trigger animation in good position]
+ */
+
+import getOffset from './../libs/offset';
+import getInlineOption from './getInlineOption';
+
+export const getPositionIn = (el, defaultOffset) => {
+  const windowHeight = window.innerHeight;
+  const anchor = getInlineOption(el, 'anchor');
+  const anchorPlacement = getInlineOption(el, 'anchor-placement');
+  const additionalOffset = Number(getInlineOption(el, 'offset', anchorPlacement ? 0 : defaultOffset));
+  let finalEl = el;
+
+  if (anchor && document.querySelectorAll(anchor)) {
+    finalEl = document.querySelectorAll(anchor)[0];
+  }
+
+  let triggerPoint = getOffset(finalEl).top - windowHeight;
+
+  switch (anchorPlacement) {
+    case 'top-bottom':
+      // Default offset
+      break;
+    case 'center-bottom':
+      triggerPoint += finalEl.offsetHeight / 2;
+      break;
+    case 'bottom-bottom':
+      triggerPoint += finalEl.offsetHeight;
+      break;
+    case 'top-center':
+      triggerPoint += windowHeight / 2;
+      break;
+    case 'center-center':
+      triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
+      break;
+    case 'bottom-center':
+      triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
+      break;
+    case 'top-top':
+      triggerPoint += windowHeight;
+      break;
+    case 'bottom-top':
+      triggerPoint += windowHeight + finalEl.offsetHeight;
+      break;
+    case 'center-top':
+      triggerPoint += windowHeight + finalEl.offsetHeight / 2;
+      break;
+  }
+
+  return triggerPoint + additionalOffset;
+};
+
+export const getPositionOut = (el, defaultOffset) => {
+  const windowHeight = window.innerHeight;
+  const anchor = getInlineOption(el, 'anchor');
+  const additionalOffset = getInlineOption(el, 'offset', defaultOffset);
+  let finalEl = el;
+
+  if (anchor && document.querySelectorAll(anchor)) {
+    finalEl = document.querySelectorAll(anchor)[0];
+  }
+
+  const elementOffsetTop = getOffset(finalEl).top;
+
+  return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
+};

src/js/helpers/prepare.js

@@ -1,23 +1,26 @@
 /* Clearing variables */
 
-import calculateOffset from './calculateOffset';
+import { getPositionIn, getPositionOut } from './offsetCalculator';
 import getInlineOption from './getInlineOption';
 
 const prepare = function ($elements, options) {
   $elements.forEach((el, i) => {
-    const positionIn = calculateOffset(el.node, options.offset);
-    const positionOut = positionIn + window.innerHeight;
+    const mirror = getInlineOption(el.node, 'mirror', options.mirror);
+    const once = getInlineOption(el.node, 'once', options.once);
 
     el.node.classList.add('aos-init');
+
     el.position = {
-      in: positionIn,
-      out: positionOut
+      in: getPositionIn(el.node, options.offset),
+      out: mirror && getPositionOut(el.node, options.offset),
     };
+
     el.options = {
-      once: getInlineOption(el, 'once', options.once),
-      mirror: getInlineOption(el, 'mirror', options.mirror)
-    }
+      once,
+      mirror,
+    };
   });
+
   return $elements;
 };