Add support for external animation libraries

paneru · May 15, 2018 · f512e0c · f512e0c
1 parent 53b2ee9
commit f512e0c
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 13 deletions.
diff --git a/demo/animatecss.html b/demo/animatecss.html
@@ -0,0 +1,58 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+    <style>
+      [data-aos] {
+        visibility: hidden;
+      }
+      [data-aos].animated {
+        visibility: visible;
+      }
+    </style>
+    <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="aos-all">
+      <div data-id="1" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="2" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="3" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="4" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="5" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="6" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="7" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="8" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="9" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="10" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="11" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="12" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="13" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="14" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="15" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="16" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="17" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="18" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="19" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="20" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="21" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="22" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="23" class="aos-item" data-aos="fadeInUp"></div>
+      <div data-id="24" class="aos-item" data-aos="fadeInUp"></div>
+    </div>
+
+    <script src="dist/aos.js"></script>
+    <script>
+      if (!window.Cypress) AOS.init({
+        useClassNames: true,
+        initClassName: false,
+        animatedClassName: 'animated',
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/js/aos.js b/src/js/aos.js
@@ -38,7 +38,10 @@ let options = {
   disable: false,
   once: false,
   mirror: false,
-  startEvent: 'DOMContentLoaded'
+  startEvent: 'DOMContentLoaded',
+  animatedClassName: 'aos-animate',
+  initClassName: 'aos-init',
+  useClassNames: false,
 };
 
 /**
@@ -77,8 +80,14 @@ const disable = function() {
     el.node.removeAttribute('data-aos-easing');
     el.node.removeAttribute('data-aos-duration');
     el.node.removeAttribute('data-aos-delay');
-    el.node.classList.remove('aos-init');
-    el.node.classList.remove('aos-animate');
+
+    if (options.initClassName) {
+      el.node.classList.remove(options.initClassName);
+    }
+
+    if (options.animatedClassName) {
+      el.node.classList.remove(options.animatedClassName);
+    }
   });
 };
 

diff --git a/src/js/helpers/handleScroll.js b/src/js/helpers/handleScroll.js
@@ -1,17 +1,33 @@
+/**
+ * Adds multiple classes on node
+ * @param {DOMNode} node
+ * @param {array}  classes
+ */
+const addClasses = (node, classes) =>
+  classes && classes.forEach(className => node.classList.add(className));
+
+/**
+ * Removes multiple classes from node
+ * @param {DOMNode} node
+ * @param {array}  classes
+ */
+const removeClasses = (node, classes) =>
+  classes && classes.forEach(className => node.classList.remove(className));
+
 /**
  * Set or remove aos-animate class
  * @param {node} el         element
  * @param {int}  top        scrolled distance
  */
-const setState = (el, top) => {
-  if (el.options.mirror && top >= el.position.out && !el.options.once) {
-    el.node.classList.remove('aos-animate');
+const applyClasses = ({ options, position, node }, top) => {
+  if (options.mirror && top >= position.out && !options.once) {
+    removeClasses(node, options.animatedClassNames);
   }
-  else if (top >= el.position.in) {
-    el.node.classList.add('aos-animate');
+  else if (top >= position.in) {
+    addClasses(node, options.animatedClassNames);
   }
-  else if (!el.options.once) {
-    el.node.classList.remove('aos-animate');
+  else if (!options.once) {
+    removeClasses(node, options.animatedClassNames);
   }
 };
 
@@ -21,9 +37,9 @@ const setState = (el, top) => {
  * @param  {array} $elements         array of elements nodes
  * @return {void}
  */
-const handleScroll = $elements =>
+const handleScroll = ($elements) =>
   $elements.forEach((el, i) =>
-    setState(el, window.pageYOffset)
+    applyClasses(el, window.pageYOffset)
   );
 
 export default handleScroll;
diff --git a/src/js/helpers/prepare.js b/src/js/helpers/prepare.js
@@ -7,8 +7,16 @@ 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 customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
 
-    el.node.classList.add('aos-init');
+    const animatedClassNames = [
+      options.animatedClassName,
+      ...(customClassNames && customClassNames.split(' '))
+    ].filter(className => typeof className === 'string');
+
+    if (options.initClassName) {
+      el.node.classList.add(options.initClassName);
+    }
 
     el.position = {
       in: getPositionIn(el.node, options.offset),
@@ -18,6 +26,7 @@ const prepare = function ($elements, options) {
     el.options = {
       once,
       mirror,
+      animatedClassNames,
     };
   });