Add customEvents

demo/index.html

@@ -21,7 +21,7 @@
       <div data-id="7" class="aos-item" data-aos="fade-in"></div>
       <div data-id="8" class="aos-item" data-aos="fade-down"></div>
       <div data-id="9" class="aos-item" data-aos="fade-in"></div>
-      <div data-id="10" class="aos-item" data-aos="fade-down"></div>
+      <div data-id="10" class="aos-item" data-aos="fade-down" data-aos-id="super-duper"></div>
       <div data-id="11" class="aos-item" data-aos="fade-up"></div>
       <div data-id="12" class="aos-item" data-aos="fade-down"></div>
       <div data-id="13" class="aos-item" data-aos="fade-in"></div>
@@ -43,6 +43,10 @@
       if (!window.Cypress) AOS.init({
         mirror: true
       });
+
+      document.addEventListener('aos:in:super-duper', ({ detail }) => {
+        console.log('in!', detail);
+      });
     </script>
   </body>
 </html>

src/js/helpers/handleScroll.js

@@ -14,20 +14,53 @@ const addClasses = (node, classes) =>
 const removeClasses = (node, classes) =>
   classes && classes.forEach(className => node.classList.remove(className));
 
+const fireEvent = (eventName, data) => {
+  const customEvent = new CustomEvent(eventName, {
+    detail: data,
+  });
+  return document.dispatchEvent(customEvent);
+}
+
 /**
  * Set or remove aos-animate class
  * @param {node} el         element
  * @param {int}  top        scrolled distance
  */
-const applyClasses = ({ options, position, node }, top) => {
-  if (options.mirror && top >= position.out && !options.once) {
+const applyClasses = (el, top) => {
+  const { options, position, node, data } = el;
+
+  const hide = () => {
+    if (!el.animated) return;
+
     removeClasses(node, options.animatedClassNames);
-  }
-  else if (top >= position.in) {
+    fireEvent('aos:out', node);
+
+    if (el.options.id) {
+      fireEvent(`aos:in:${el.options.id}`, node);
+    }
+
+    el.animated = false;
+  };
+
+  const show = () => {
+    if (el.animated) return;
+
     addClasses(node, options.animatedClassNames);
-  }
-  else if (!options.once) {
-    removeClasses(node, options.animatedClassNames);
+
+    fireEvent('aos:in', node);
+    if (el.options.id) {
+      fireEvent(`aos:in:${el.options.id}`, node);
+    }
+
+    el.animated = true;
+  };
+
+  if (options.mirror && top >= position.out && !options.once) {
+    hide();
+  } else if (top >= position.in) {
+    show();
+  } else if (el.animated && !options.once) {
+    hide();
   }
 };
 

src/js/helpers/prepare.js

@@ -7,6 +7,7 @@ const prepare = function ($elements, options) {
   $elements.forEach((el, i) => {
     const mirror = getInlineOption(el.node, 'mirror', options.mirror);
     const once = getInlineOption(el.node, 'once', options.once);
+    const id = getInlineOption(el.node, 'id');
     const customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
 
     const animatedClassNames = [
@@ -23,10 +24,18 @@ const prepare = function ($elements, options) {
       out: mirror && getPositionOut(el.node, options.offset),
     };
 
+    el.data = el.node.getAttributeNames()
+      .reduce((acc, attr) => {
+        return Object.assign({}, acc, {
+          [attr]: el.node.getAttribute(attr),
+        });
+      }, {});
+
     el.options = {
       once,
       mirror,
       animatedClassNames,
+      id,
     };
   });