aos-modern 3.0.0

package/src/js/aos.js

@@ -0,0 +1,354 @@
+// Helpers
+import detect from './helpers/detector';
+import prepare from './helpers/prepare';
+import elements from './helpers/elements';
+
+/**
+ * Private variables
+ */
+let $aosElements = [];
+let initialized = false;
+let observers = [];
+let mutationObserver = null;
+let resizeListener = null;
+let orientationListener = null;
+let loadListener = null;
+let scrollListener = null;
+
+/**
+ * Default options
+ */
+let options = {
+  offset: 120,
+  delay: 0,
+  easing: 'ease',
+  duration: 400,
+  disable: false,
+  once: false,
+  startEvent: 'DOMContentLoaded',
+  throttleDelay: 99,
+  debounceDelay: 50,
+  disableMutationObserver: false,
+};
+
+const debounce = (fn, delay) => {
+  let timeout;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), delay);
+  };
+};
+
+const throttle = (fn, delay) => {
+  let timer = null;
+  return (...args) => {
+    if (timer) return;
+    timer = setTimeout(() => {
+      fn(...args);
+      timer = null;
+    }, delay);
+  };
+};
+
+const cleanObservers = () => {
+  observers.forEach(obs => obs.disconnect());
+  observers = [];
+};
+
+const checkPendingElements = () => {
+  const scrollY = window.scrollY || window.pageYOffset;
+  const windowHeight = window.innerHeight;
+
+  $aosElements.forEach(el => {
+    const node = el.node;
+    if (node.classList.contains('aos-init') && !node.classList.contains('aos-animate')) {
+      const offsetAttr = node.getAttribute('data-aos-offset');
+      const offsetVal = (offsetAttr && !isNaN(offsetAttr)) ? parseInt(offsetAttr, 10) : options.offset;
+      const nodeHeight = node.offsetHeight;
+      
+      const isInside = (scrollY + windowHeight >= el.position) &&
+                       (scrollY <= el.position - offsetVal + nodeHeight);
+      if (isInside) {
+        node.classList.add('aos-animate');
+      }
+    }
+  });
+};
+
+const setupObservers = (elementsList, globalOptions) => {
+  cleanObservers();
+
+  elementsList.forEach(el => {
+    const node = el.node;
+
+    // Read attributes or fallback to options
+    const onceAttr = node.getAttribute('data-aos-once');
+    const once = onceAttr ? (onceAttr === 'true') : globalOptions.once;
+
+    const offsetAttr = node.getAttribute('data-aos-offset');
+    const offsetVal = (offsetAttr && !isNaN(offsetAttr)) ? parseInt(offsetAttr, 10) : globalOptions.offset;
+
+    const anchorSelector = node.getAttribute('data-aos-anchor');
+    const anchorEl = anchorSelector ? (document.querySelector(anchorSelector) || node) : node;
+
+    const placement = node.getAttribute('data-aos-anchor-placement') || globalOptions.anchorPlacement || 'top-bottom';
+
+    // Calculate vertical offset relative to viewport bottom
+    const windowHeight = window.innerHeight;
+    const nodeHeight = anchorEl.offsetHeight;
+    let Y = offsetVal;
+
+    switch (placement) {
+      case 'top-bottom':
+        break;
+      case 'center-bottom':
+        Y += nodeHeight / 2;
+        break;
+      case 'bottom-bottom':
+        Y += nodeHeight;
+        break;
+      case 'top-center':
+        Y += windowHeight / 2;
+        break;
+      case 'bottom-center':
+        Y += windowHeight / 2 + nodeHeight;
+        break;
+      case 'center-center':
+        Y += windowHeight / 2 + nodeHeight / 2;
+        break;
+      case 'top-top':
+        Y += windowHeight;
+        break;
+      case 'bottom-top':
+        Y += nodeHeight + windowHeight;
+        break;
+      case 'center-top':
+        Y += nodeHeight / 2 + windowHeight;
+        break;
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        const scrollY = window.scrollY || window.pageYOffset;
+        const isCurrentlyInside = (scrollY + windowHeight >= el.position) &&
+                                  (scrollY <= el.position - Y + nodeHeight);
+
+        if (entry.isIntersecting) {
+          if (isCurrentlyInside) {
+            node.classList.add('aos-animate');
+            if (once) {
+              observer.unobserve(anchorEl);
+            }
+          }
+        } else {
+          if (!once && !isCurrentlyInside) {
+            node.classList.remove('aos-animate');
+          }
+        }
+      });
+    }, {
+      rootMargin: `9999px 0px -${Y}px 0px`,
+      threshold: 0
+    });
+
+    observer.observe(anchorEl);
+    observers.push(observer);
+  });
+};
+
+/**
+ * Refresh AOS
+ */
+const refresh = (initialize = false) => {
+  // Allow refresh only when it was first initialized on startEvent
+  if (initialize) initialized = true;
+
+  if (initialized) {
+    $aosElements = prepare($aosElements, options);
+    setupObservers($aosElements, options);
+    checkPendingElements();
+    return $aosElements;
+  }
+};
+
+/**
+ * Hard refresh
+ */
+const refreshHard = () => {
+  $aosElements = elements();
+  refresh();
+};
+
+/**
+ * Disable AOS
+ */
+const disable = () => {
+  cleanObservers();
+  $aosElements.forEach(el => {
+    el.node.removeAttribute('data-aos');
+    el.node.removeAttribute('data-aos-easing');
+    el.node.removeAttribute('data-aos-duration');
+    el.node.removeAttribute('data-aos-delay');
+    el.node.classList.remove('aos-animate');
+  });
+};
+
+/**
+ * Destroy AOS (Cleanup all listeners and observers for SPA frameworks)
+ */
+const destroy = () => {
+  cleanObservers();
+
+  if (resizeListener) {
+    window.removeEventListener('resize', resizeListener);
+    resizeListener = null;
+  }
+  if (orientationListener) {
+    window.removeEventListener('orientationchange', orientationListener);
+    orientationListener = null;
+  }
+  if (loadListener) {
+    window.removeEventListener('load', loadListener);
+    loadListener = null;
+  }
+  if (scrollListener) {
+    window.removeEventListener('scroll', scrollListener);
+    scrollListener = null;
+  }
+  if (mutationObserver) {
+    mutationObserver.disconnect();
+    mutationObserver = null;
+  }
+
+  initialized = false;
+};
+
+/**
+ * Check if AOS should be disabled
+ */
+const isDisabled = (optionDisable) => {
+  return optionDisable === true ||
+    (optionDisable === 'mobile' && detect.mobile()) ||
+    (optionDisable === 'phone' && detect.phone()) ||
+    (optionDisable === 'tablet' && detect.tablet()) ||
+    (typeof optionDisable === 'function' && optionDisable() === true);
+};
+
+/**
+ * Initializing AOS
+ */
+const init = (settings) => {
+  options = Object.assign(options, settings);
+  $aosElements = elements();
+
+  // Detect not supported browsers (<=IE9)
+  const browserNotSupported = document.all && !window.atob;
+
+  // Disable if needed
+  if (isDisabled(options.disable) || browserNotSupported) {
+    disable();
+    return $aosElements;
+  }
+
+  // Set global variables on body
+  const body = document.querySelector('body');
+  if (body) {
+    body.setAttribute('data-aos-easing', options.easing);
+    body.setAttribute('data-aos-duration', options.duration);
+    body.setAttribute('data-aos-delay', options.delay);
+  }
+
+  // Setup startEvent
+  if (options.startEvent === 'DOMContentLoaded' &&
+    ['complete', 'interactive'].indexOf(document.readyState) > -1) {
+    refresh(true);
+  } else if (options.startEvent === 'load') {
+    window.addEventListener(options.startEvent, () => {
+      refresh(true);
+    });
+  } else {
+    document.addEventListener(options.startEvent, () => {
+      refresh(true);
+    });
+  }
+
+  // Always register a window load event to ensure positions are recalculated after full asset loads
+  if (options.startEvent !== 'load') {
+    if (loadListener) {
+      window.removeEventListener('load', loadListener);
+    }
+    loadListener = () => {
+      refresh();
+    };
+    window.addEventListener('load', loadListener);
+  }
+
+  // Window resize listeners (cleanup if already exists)
+  if (resizeListener) {
+    window.removeEventListener('resize', resizeListener);
+  }
+  if (orientationListener) {
+    window.removeEventListener('orientationchange', orientationListener);
+  }
+
+  resizeListener = debounce(() => refresh(), options.debounceDelay);
+  orientationListener = debounce(() => refresh(), options.debounceDelay);
+
+  window.addEventListener('resize', resizeListener);
+  window.addEventListener('orientationchange', orientationListener);
+
+  if (!scrollListener) {
+    scrollListener = throttle(checkPendingElements, 100);
+    window.addEventListener('scroll', scrollListener);
+  }
+
+  // MutationObserver setup (cleanup if already exists)
+  if (mutationObserver) {
+    mutationObserver.disconnect();
+    mutationObserver = null;
+  }
+
+  if (!options.disableMutationObserver) {
+    const MutationObserverClass = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+    if (MutationObserverClass) {
+      mutationObserver = new MutationObserverClass((mutations) => {
+        let shouldRefresh = false;
+        mutations.forEach(mutation => {
+          const allNodes = [
+            ...Array.from(mutation.addedNodes),
+            ...Array.from(mutation.removedNodes)
+          ];
+          
+          const hasAosNode = allNodes.some(node => {
+            if (node.nodeType !== 1) return false;
+            if (node.hasAttribute('data-aos')) return true;
+            if (node.querySelector('[data-aos]')) return true;
+            return false;
+          });
+
+          if (hasAosNode) {
+            shouldRefresh = true;
+          }
+        });
+
+        if (shouldRefresh) {
+          refreshHard();
+        }
+      });
+
+      mutationObserver.observe(document.documentElement, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+
+  return $aosElements;
+};
+
+export default {
+  init,
+  refresh,
+  refreshHard,
+  destroy
+};

package/src/js/helpers/calculateOffset.js

@@ -0,0 +1,76 @@
+import getOffset from './../libs/offset';
+
+/**
+ * Calculate offset
+ * basing on element's settings like:
+ * - anchor
+ * - offset
+ *
+ * @param  {Node} el [Dom element]
+ * @return {number} [Final offset that will be used to trigger animation in good position]
+ */
+const calculateOffset = (el, optionalOffset) => {
+  let elementOffsetTop = 0;
+  let additionalOffset = 0;
+  const windowHeight = window.innerHeight;
+  const attrs = {
+    offset: el.getAttribute('data-aos-offset'),
+    anchor: el.getAttribute('data-aos-anchor'),
+    anchorPlacement: el.getAttribute('data-aos-anchor-placement')
+  };
+
+  if (attrs.offset && !isNaN(attrs.offset)) {
+    additionalOffset = parseInt(attrs.offset, 10);
+  }
+
+  if (attrs.anchor) {
+    try {
+      const anchorEl = document.querySelector(attrs.anchor);
+      if (anchorEl) {
+        el = anchorEl;
+      }
+    } catch (e) {
+      console.warn(`AOS: "${attrs.anchor}" is not a valid selector`, e);
+    }
+  }
+
+  elementOffsetTop = getOffset(el).top;
+
+  switch (attrs.anchorPlacement) {
+    case 'top-bottom':
+      // Default offset
+      break;
+    case 'center-bottom':
+      elementOffsetTop += el.offsetHeight / 2;
+      break;
+    case 'bottom-bottom':
+      elementOffsetTop += el.offsetHeight;
+      break;
+    case 'top-center':
+      elementOffsetTop += windowHeight / 2;
+      break;
+    case 'bottom-center':
+      elementOffsetTop += windowHeight / 2 + el.offsetHeight;
+      break;
+    case 'center-center':
+      elementOffsetTop += windowHeight / 2 + el.offsetHeight / 2;
+      break;
+    case 'top-top':
+      elementOffsetTop += windowHeight;
+      break;
+    case 'bottom-top':
+      elementOffsetTop += el.offsetHeight + windowHeight;
+      break;
+    case 'center-top':
+      elementOffsetTop += el.offsetHeight / 2 + windowHeight;
+      break;
+  }
+
+  if (!attrs.anchorPlacement && !attrs.offset && !isNaN(optionalOffset)) {
+    additionalOffset = optionalOffset;
+  }
+
+  return elementOffsetTop + additionalOffset;
+};
+
+export default calculateOffset;

package/src/js/helpers/detector.js

@@ -0,0 +1,33 @@
+/**
+ * Device detector
+ */
+
+const fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
+const prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
+const fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
+const prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
+
+const ua = () => navigator.userAgent || navigator.vendor || window.opera || '';
+
+class Detector {
+  phone() {
+    const a = ua();
+    return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
+  }
+
+  mobile() {
+    const a = ua();
+    const isMobileUA = !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
+    const isIPadOS = navigator.maxTouchPoints > 0 && a.indexOf('Macintosh') !== -1;
+    return isMobileUA || isIPadOS;
+  }
+
+  tablet() {
+    const a = ua();
+    const isTabletUA = this.mobile() && !this.phone();
+    const isIPadOS = navigator.maxTouchPoints > 0 && a.indexOf('Macintosh') !== -1;
+    return isTabletUA || isIPadOS;
+  }
+}
+
+export default new Detector();

package/src/js/helpers/elements.js

@@ -0,0 +1,11 @@
+/**
+ * Generate initial array with elements as objects
+ * This array will be extended later with elements attributes values
+ * like 'position'
+ */
+const createArrayWithElements = (elements) => {
+  const nodeList = elements || document.querySelectorAll('[data-aos]');
+  return Array.from(nodeList, node => ({ node }));
+};
+
+export default createArrayWithElements;

package/src/js/helpers/handleScroll.js

@@ -0,0 +1,39 @@
+/**
+ * Set or remove aos-animate class
+ * @param {node} el         element
+ * @param {int}  top        scrolled distance
+ * @param {void} once
+ */
+const setState = function (el, top, once) {
+  const attrOnce = el.node.getAttribute('data-aos-once');
+
+  if (top > el.position) {
+    el.node.classList.add('aos-animate');
+  } else if (typeof attrOnce !== 'undefined') {
+    if (attrOnce === 'false' || (!once && attrOnce !== 'true')) {
+      el.node.classList.remove('aos-animate');
+    }
+  }
+};
+
+
+/**
+ * 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, once) {
+  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, once);
+  });
+};
+
+export default handleScroll;

package/src/js/helpers/prepare.js

@@ -0,0 +1,11 @@
+import calculateOffset from './calculateOffset';
+
+const prepare = ($elements, options) => {
+  $elements.forEach((el) => {
+    el.node.classList.add('aos-init');
+    el.position = calculateOffset(el.node, options.offset);
+  });
+  return $elements;
+};
+
+export default prepare;

package/src/js/libs/observer.js

@@ -0,0 +1,61 @@
+let callback = () => {};
+
+function containsAOSNode(nodes) {
+  let i, currentNode, result;
+
+  for (i = 0; i < nodes.length; i += 1) {
+    currentNode = nodes[i];
+
+    if (currentNode.dataset && currentNode.dataset.aos) {
+      return true;
+    }
+
+    result = currentNode.children && containsAOSNode(currentNode.children);
+
+    if (result) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function getMutationObserver() {
+  return window.MutationObserver ||
+    window.WebKitMutationObserver ||
+    window.MozMutationObserver;
+}
+
+function isSupported() {
+  return !!getMutationObserver();
+}
+
+function ready(selector, fn) {
+  const doc = window.document;
+  const MutationObserver = getMutationObserver();
+
+  const observer = new MutationObserver(check);
+  callback = fn;
+
+  observer.observe(doc.documentElement, {
+    childList: true,
+    subtree: true,
+    removedNodes: true
+  });
+}
+
+function check(mutations) {
+  if (!mutations) return;
+
+  mutations.forEach(mutation => {
+    const addedNodes = Array.prototype.slice.call(mutation.addedNodes);
+    const removedNodes = Array.prototype.slice.call(mutation.removedNodes);
+    const allNodes = addedNodes.concat(removedNodes);
+
+    if (containsAOSNode(allNodes)) {
+      return callback();
+    }
+  });
+}
+
+export default { isSupported, ready };

package/src/js/libs/offset.js

@@ -0,0 +1,24 @@
+/**
+ * Get offset of DOM element Helper
+ * including these with translation
+ *
+ * @param  {Node} el [DOM element]
+ * @return {Object} [top and left offset]
+ */
+const offset = (el) => {
+  let x = 0;
+  let y = 0;
+
+  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
+    x += el.offsetLeft - (el.tagName !== 'BODY' ? el.scrollLeft : 0);
+    y += el.offsetTop - (el.tagName !== 'BODY' ? el.scrollTop : 0);
+    el = el.offsetParent;
+  }
+
+  return {
+    top: y,
+    left: x
+  };
+};
+
+export default offset;

package/src/react/index.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import AOS from '../js/aos';
+
+/**
+ * React Hook to initialize and manage AOS lifecycle.
+ *
+ * @param {Object} options - AOS initialization options
+ */
+export function useAOS(options) {
+  useEffect(() => {
+    AOS.init(options);
+    return () => {
+      AOS.destroy();
+    };
+  }, [options]);
+}
+
+export default useAOS;