Introduce Animate7

gulpfile.js

@@ -111,6 +111,7 @@
                 'src/js/dom7-ajax.js',
                 'src/js/dom7-utils.js',
                 'src/js/dom7-outro.js',
+                'src/js/animate7.js',
                 'src/js/proto-support.js',
                 'src/js/proto-device.js',
                 'src/js/proto-plugins.js',

modules.json

@@ -71,6 +71,7 @@
             "src/js/dom7-utils.js",
             "src/js/dom7-ajax.js",
             "src/js/dom7-outro.js",
+            "src/js/animate7.js",
             "src/js/proto-support.js",
             "src/js/proto-device.js",
             "src/js/proto-plugins.js",

src/js/animate7.js

@@ -0,0 +1,171 @@
+/*========================
+Animate7 Animate Engine
+==========================*/
+var Animate7 = function (elements, props, params) {
+    props = props || {};
+    params = params || {
+        duration: 300,
+        easing: 'swing', // or 'linear'
+        /* Callbacks
+        begin(elements)
+        complete(elements)
+        progress(elements, complete, remaining, start, tweenValue)
+        */
+    };
+
+    var a = this;
+    a.params = params;
+    a.props = props;
+    a.elements = $(elements);
+    if (a.elements.length === 0) {
+        return a;
+    }
+
+    a.easingProgress = function (easing, progress) {
+        if (easing === 'swing') {
+            return 0.5 - Math.cos( progress * Math.PI ) / 2;
+        }
+        if (typeof easing === 'function') {
+            return easing(progress);
+        }
+        return progress;
+    };
+
+    a.stop = function () {
+        if (a.frameId) {
+            $.cancelAnimationFrame(a.frameId);
+        }
+        a.animating = false;
+        a.elements.each(function (index, el) {
+            delete el.animate7Instance;
+        });
+        a.que = [];
+    };
+    a.done = function (complete) {
+        a.animating = false;
+        a.elements.each(function (index, el) {
+            delete el.animate7Instance;
+        });
+        if (complete) complete(elements);
+        if (a.que.length > 0) {
+            var que = a.que.pop();
+            a.animate(que[0], que[1]);
+        }
+    };
+    a.animating = false;
+    a.que = [];
+    a.animate = function (props, params) {
+        if (a.animating) {
+            a.que.push([props, params]);
+            return a;
+        }
+        a.params = params;
+
+        var _elements = [];
+
+        // Define & Cache Initials & Units
+        a.elements.each(function (index, el) {
+            var initialFullValue, initialValue, unit, finalValue, finalFullValue;
+
+            _elements[index] = {
+                _container: el
+            };
+
+            for (var prop in props) {
+                initialFullValue = window.getComputedStyle(el, null).getPropertyValue(prop).replace(',', '.');
+                initialValue = parseFloat(initialFullValue);
+                unit = initialFullValue.replace(initialValue, '');
+                finalValue = props[prop];
+                finalFullValue = props[prop] + unit;
+                _elements[index][prop] = {
+                    initialFullValue: initialFullValue,
+                    initialValue: initialValue,
+                    unit: unit,
+                    finalValue: finalValue,
+                    finalFullValue: finalFullValue,
+                    currentValue: initialValue
+                };
+
+            }
+        });
+
+        var startTime = null,
+            time,
+            elementsDone = 0,
+            done,
+            began = false;
+
+        a.animating = true;
+
+        function render() {
+            time = new Date().getTime();
+            var progress, easeProgress, el;
+            if (!began) {
+                began = true;
+                if (params.begin) params.begin(elements);
+            }
+            if (startTime === null) {
+                startTime = time;
+            }
+            if (params.progress) {
+                params.progress(
+                    a.elements,
+                    Math.max(Math.min((time - startTime) / params.duration, 1), 0),
+                    ((startTime + params.duration) - time < 0 ? 0 : (startTime + params.duration) - time),
+                    startTime
+                );
+            }
+
+            for (var prop in props) {
+                if (done) continue;
+
+                for (var i = 0; i < _elements.length; i++) {
+                    el = _elements[i];
+                    if (el.done) continue;
+
+                    progress = Math.max(Math.min((time - startTime) / params.duration, 1), 0);
+                    easeProgress = a.easingProgress(params.easing, progress);
+
+                    el[prop].currentValue = el[prop].initialValue + easeProgress * (el[prop].finalValue - el[prop].initialValue);
+
+                    if (el[prop].finalValue > el[prop].initialValue && el[prop].currentValue >= el[prop].finalValue || el[prop].finalValue < el[prop].initialValue && el[prop].currentValue <= el[prop].finalValue)  {
+                        el._container.style[prop] = el[prop].finalValue + el[prop].unit;
+                        el.done = true;
+                        elementsDone++;
+                        if (elementsDone === _elements.length) {
+                            done = true;
+                        }
+                    }
+                    if (done) {
+                        a.done(params.complete);
+                        return a;
+                    }
+                    el._container.style[prop] = el[prop].currentValue + el[prop].unit;
+                }
+            }
+
+            // Then call
+            a.frameId = $.requestAnimationFrame(render);
+        }
+        a.frameId = $.requestAnimationFrame(render);
+        return a;
+    };
+    var foundInstance;
+    for (var i = 0; i < a.elements.length; i++) {
+        if (a.elements[i].animate7Instance) {
+            foundInstance = a.elements[i].animate7Instance;
+        }
+        else a.elements[i].animate7Instance = a;
+    }
+    if (foundInstance) {
+        return foundInstance.animate(props, params);
+    }
+    else a.animate(props, params);
+    return a;
+};
+window.Animate7 = function (elements, props, params){
+    return new Animate7(elements, props, params);
+};
+Dom7.fn.animate = function (props, params) {
+    return new Animate7(this, props, params);
+};