animar - npm Package Compare versions

Comparing version 0.5.1 to 0.5.3

lib/animar.js

@@ -1,7 +0,24 @@
-/* @flow */
+'use strict';
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 /* global __DEV__ */
-import Animation from './animation';
-import Attribute from './attribute';
-import Element from './element';
 
+var _animation = require('./animation');
+
+var _animation2 = _interopRequireDefault(_animation);
+
+var _attribute = require('./attribute');
+
+var _attribute2 = _interopRequireDefault(_attribute);
+
+var _element = require('./element');
+
+var _element2 = _interopRequireDefault(_element);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 if (__DEV__) {
@@ -12,30 +29,3 @@ var Helpers = require('./helpers');
 
-type ElementMap = Map<HTMLElement, Element>;
-type AnimationOptions = { // user-provided so can't assume correct type or existance
-  delay: ?any,
-  easingFunction: ?any,
-  duration: ?any,
-  loop: ?any
-};
-type AttributesOptions = { [key: string]: number | Array<number> };
-type ChainOptions = {
-  delay: number,
-  currentDuration: number,
-  totalDuration: number
-}
-type FullChainObject = {
-  start: Function,
-  loop: Function,
-  add: Function,
-  then: Function
-};
-type ThenChainObject = {
-  add: Function
-};
-type LoopChainObject = {
-  start: Function
-}
-type AddChainObject = FullChainObject;
-
-const EMPTY_ANIMATION_OPTIONS = {
+var EMPTY_ANIMATION_OPTIONS = {
   delay: null,
@@ -47,9 +37,6 @@ easingFunction: null,
 
-module.exports = class Animar {
-  ticking: boolean;
-  elementMap: ElementMap;
-  defaults: { delay: number, easingFunction: Function, duration: number, loop: boolean };
-  timescale: number;
+module.exports = (function () {
+  function Animar() {
+    _classCallCheck(this, Animar);
 
-  constructor() {
     this.ticking = false;
@@ -59,3 +46,5 @@ this.elementMap = new Map();
       delay: 0,
-      easingFunction: (t, b, c, d) => { return c * t / d + b; }, // linear easing function
+      easingFunction: function easingFunction(t, b, c, d) {
+        return c * t / d + b;
+      }, // linear easing function
       duration: 60,
@@ -67,219 +56,226 @@ loop: false
 
-  add(element: HTMLElement, attributes: AttributesOptions, options: AnimationOptions): FullChainObject {
-    let resolvedOptions = options == null ? EMPTY_ANIMATION_OPTIONS : options;
+  _createClass(Animar, [{
+    key: 'add',
+    value: function add(element, attributes, options) {
+      var resolvedOptions = options == null ? EMPTY_ANIMATION_OPTIONS : options;
 
-    if (__DEV__) {
-      if (element == null) {
-        throw 'Missing or null parameter: element';
+      if (__DEV__) {
+        if (element == null) {
+          throw 'Missing or null parameter: element';
+        }
+        if (!element instanceof HTMLElement) {
+          throw "Parameter 'element' should be of type HTMLElement";
+        }
+        if (typeof attributes === 'undefined') {
+          throw 'Missing or null parameter: attribtues';
+        }
+        if ((typeof attributes === 'undefined' ? 'undefined' : _typeof(attributes)) !== 'object') {
+          throw "Parameter 'attributes' should be of type Object";
+        }
+        // TODO: Validate attributes contents
       }
-      if (!element instanceof HTMLElement) {
-        throw "Parameter 'element' should be of type HTMLElement";
-      }
-      if (typeof attributes === 'undefined') {
-        throw 'Missing or null parameter: attribtues';
-      }
-      if (typeof attributes !== 'object') {
-        throw "Parameter 'attributes' should be of type Object";
-      }
-      // TODO: Validate attributes contents
-    }
 
-    return this._add(
-      element,
-      attributes,
-      resolvedOptions,
-      {
+      return this._add(element, attributes, resolvedOptions, {
         delay: 0,
         currentDuration: 0,
         totalDuration: 0
-      },
-      new Map()
-    );
-  }
+      }, new Map());
+    }
+  }, {
+    key: 'mergeElementMaps',
+    value: function mergeElementMaps(src, target) {
+      var result = new Map(src);
 
-  mergeElementMaps(src: ElementMap, target: ElementMap): ElementMap {
-    let result = new Map(src);
+      target.forEach(function (element, elementRef) {
+        var mergedElement = undefined;
 
-    target.forEach((element, elementRef) => {
-      let mergedElement;
+        if (result.has(elementRef)) {
+          mergedElement = result.get(elementRef).merge(element);
+        } else {
+          mergedElement = element;
+        }
+        result.set(elementRef, mergedElement);
+      });
 
-      if (result.has(elementRef)) {
-        mergedElement = result.get(elementRef).merge(element);
+      return result;
+    }
+  }, {
+    key: 'resolveStartValue',
+    value: function resolveStartValue(start, element, attribute, currentChain) {
+      if (currentChain.has(element) && currentChain.get(element).hasAttribute(attribute)) {
+        start = currentChain.get(element).getModelFromAttribute(attribute);
+      } else if (this.elementMap.has(element) && this.elementMap.get(element).hasAttribute(attribute)) {
+        start = this.elementMap.get(element).getModelFromAttribute(attribute);
       } else {
-        mergedElement = element;
-      }
-      result.set(elementRef, mergedElement);
-    });
-
-    return result;
-  }
-
-  resolveStartValue(start: ?number, element: HTMLElement, attribute: string, currentChain: ElementMap): ?number {
-    if (currentChain.has(element) && currentChain.get(element).hasAttribute(attribute)) {
-      start = currentChain.get(element).getModelFromAttribute(attribute);
-    } else if (this.elementMap.has(element) && this.elementMap.get(element).hasAttribute(attribute)) {
-      start = this.elementMap.get(element).getModelFromAttribute(attribute);
-    } else {
-      if (__DEV__) {
+        if (__DEV__) {
+          // TODO: Add development warning
           start = getStartValue(element, attribute);
+        }
       }
+      return start;
     }
-    return start;
-  }
+  }, {
+    key: '_add',
+    value: function _add(element, attributes, options, chainOptions, currentChain) {
+      var resolvedOptions = {
+        delay: options.delay == null ? this.defaults.delay : options.delay,
+        easingFunction: options.easingFunction == null ? this.defaults.easingFunction : options.easingFunction,
+        duration: options.duration == null ? this.defaults.duration : options.duration,
+        loop: options.loop == null ? this.defaults.loop : options.loop
+      };
 
-  _add(element: HTMLElement,
-       attributes: { [key: string]: number | Array<number> },
-       options: AnimationOptions,
-       chainOptions: ChainOptions,
-       currentChain: ElementMap): FullChainObject
-   {
-    const resolvedOptions = {
-      delay: options.delay == null ?
-        this.defaults.delay : options.delay,
-      easingFunction: options.easingFunction == null ?
-        this.defaults.easingFunction : options.easingFunction,
-      duration: options.duration == null ?
-        this.defaults.duration : options.duration,
-      loop: options.loop == null ?
-        this.defaults.loop : options.loop
-    };
+      for (var attribute in attributes) {
+        if (attributes.hasOwnProperty(attribute)) {
+          var attributeValue = attributes[attribute];
+          var _start = undefined,
+              destination = undefined;
 
-    for (const attribute in attributes) {
-      if (attributes.hasOwnProperty(attribute)) {
-        const attributeValue = attributes[attribute];
-        let start, destination;
+          if (typeof attributeValue === 'number') {
+            destination = attributeValue;
+          } else {
+            _start = attributeValue[0];
+            destination = attributeValue[1];
+          }
 
-        if (typeof attributeValue === 'number') {
-          destination = attributeValue;
-        } else {
-          start = attributeValue[0];
-          destination = attributeValue[1];
-        }
+          _start = this.resolveStartValue(_start, element, attribute, currentChain);
 
-        start = this.resolveStartValue(start, element, attribute, currentChain);
+          if (_start == null) {
+            throw 'Animation start value is not provided and cannot be infered';
+          } else {
+            _start -= destination;
+            var newAnimation = new _animation2.default(0 - (resolvedOptions.delay + chainOptions.delay), _start, 0 - _start, resolvedOptions.duration, resolvedOptions.easingFunction, resolvedOptions.loop, resolvedOptions.delay + chainOptions.delay, 0);
 
-        if (start == null) {
-          throw 'Animation start value is not provided and cannot be infered';
-        } else {
-          start -= destination;
-          let newAnimation = new Animation(
-            0 - (resolvedOptions.delay + chainOptions.delay),
-            start,
-            0 - start,
-            resolvedOptions.duration,
-            resolvedOptions.easingFunction,
-            resolvedOptions.loop,
-            resolvedOptions.delay + chainOptions.delay,
-            0
-          );
+            var newAttribute = new _attribute2.default(attribute, destination);
+            newAttribute.addAnimation(newAnimation);
 
-          let newAttribute = new Attribute(attribute, destination);
-          newAttribute.addAnimation(newAnimation);
+            var newElement = new _element2.default(element);
+            newElement.addAttribute(attribute, newAttribute);
 
-          let newElement = new Element(element);
-          newElement.addAttribute(attribute, newAttribute);
+            var tempEMap = new Map();
+            tempEMap.set(element, newElement);
 
-          let tempEMap = new Map();
-          tempEMap.set(element, newElement);
-
-          currentChain = this.mergeElementMaps(currentChain, tempEMap);
+            currentChain = this.mergeElementMaps(currentChain, tempEMap);
+          }
         }
       }
+      chainOptions.currentDuration = Math.max(chainOptions.currentDuration, resolvedOptions.delay + resolvedOptions.duration);
+      return this.fullChainObjectFactory(chainOptions, currentChain);
     }
-    chainOptions.currentDuration = Math.max(chainOptions.currentDuration, resolvedOptions.delay + resolvedOptions.duration);
-    return this.fullChainObjectFactory(chainOptions, currentChain);
-  }
+  }, {
+    key: 'fullChainObjectFactory',
+    value: function fullChainObjectFactory(chainOptions, chain) {
+      return {
+        start: this.startChainFunctionFactory(chain),
+        loop: this.loopChainFunctionFactory(chainOptions, chain),
+        add: this.addChainFunctionFactory(chainOptions, chain),
+        then: this.thenChainFunctionFactory(chainOptions, chain)
+      };
+    }
+  }, {
+    key: 'thenChainFunctionFactory',
+    value: function thenChainFunctionFactory(chainOptions, chain) {
+      var _this = this;
 
-  fullChainObjectFactory(chainOptions: ChainOptions, chain: ElementMap): FullChainObject {
-    return {
-      start: this.startChainFunctionFactory(chain),
-      loop: this.loopChainFunctionFactory(chainOptions, chain),
-      add: this.addChainFunctionFactory(chainOptions, chain),
-      then: this.thenChainFunctionFactory(chainOptions, chain)
-    };
-  }
+      return function () {
+        var wait = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
 
-  thenChainFunctionFactory(chainOptions: ChainOptions, chain: ElementMap): Function {
-    return (wait=0) => {
-      chainOptions.totalDuration += (chainOptions.currentDuration + wait);
-      chainOptions.currentDuration = 0;
-      chainOptions.delay = chainOptions.totalDuration;
-      return {
-        add: this.addChainFunctionFactory(chainOptions, chain)
+        chainOptions.totalDuration += chainOptions.currentDuration + wait;
+        chainOptions.currentDuration = 0;
+        chainOptions.delay = chainOptions.totalDuration;
+        return {
+          add: _this.addChainFunctionFactory(chainOptions, chain)
+        };
       };
-    };
-  }
+    }
+  }, {
+    key: 'addChainFunctionFactory',
+    value: function addChainFunctionFactory(chainOptions, chain) {
+      var _this2 = this;
 
-  addChainFunctionFactory(chainOptions: ChainOptions, chain: ElementMap): Function {
-    return (element, attributes, options) => {
-      let resolvedOptions = typeof options === 'undefined' ? EMPTY_ANIMATION_OPTIONS : options;
-      return this._add(element, attributes, resolvedOptions, chainOptions, chain);
-    };
-  }
+      return function (element, attributes, options) {
+        var resolvedOptions = typeof options === 'undefined' ? EMPTY_ANIMATION_OPTIONS : options;
+        return _this2._add(element, attributes, resolvedOptions, chainOptions, chain);
+      };
+    }
+  }, {
+    key: 'loopChainFunctionFactory',
+    value: function loopChainFunctionFactory(chainOptions, chain) {
+      var _this3 = this;
 
-  loopChainFunctionFactory(chainOptions: ChainOptions, chain: ElementMap): Function {
-    return () => {
-      chainOptions.totalDuration += chainOptions.currentDuration;
+      return function () {
+        chainOptions.totalDuration += chainOptions.currentDuration;
 
-      let newElementMap = new Map();
+        var newElementMap = new Map();
 
-      chain.forEach((element, elementRef) => {
-        element.forEachAnimationInAttribute(animation => {
-          if (animation != null) {
-            animation.loop = true;
-            animation.wait = chainOptions.totalDuration - animation.delay - animation.totalIterations;
-            return animation;
-          }
+        chain.forEach(function (element, elementRef) {
+          element.forEachAnimationInAttribute(function (animation) {
+            if (animation != null) {
+              animation.loop = true;
+              animation.wait = chainOptions.totalDuration - animation.delay - animation.totalIterations;
+              return animation;
+            }
+          });
+          newElementMap.set(elementRef, element);
         });
-        newElementMap.set(elementRef, element);
-      });
 
-      chain = newElementMap;
+        chain = newElementMap;
 
-      return {
-        start: this.startChainFunctionFactory(chain)
+        return {
+          start: _this3.startChainFunctionFactory(chain)
+        };
       };
-    };
-  }
+    }
+  }, {
+    key: 'startChainFunctionFactory',
+    value: function startChainFunctionFactory(chain) {
+      var _this4 = this;
 
-  startChainFunctionFactory(chain: ElementMap): Function {
-    return () => {
-      console.log(chain);
-      this.elementMap = this.mergeElementMaps(this.elementMap, chain);
-      this.requestTick();
-    };
-  }
+      return function () {
+        console.log(chain);
+        _this4.elementMap = _this4.mergeElementMaps(_this4.elementMap, chain);
+        _this4.requestTick();
+      };
+    }
+  }, {
+    key: 'requestTick',
+    value: function requestTick() {
+      if (!this.ticking) {
+        window.requestAnimationFrame(this.update.bind(this));
+        this.ticking = true;
+      }
+    }
+  }, {
+    key: 'update',
+    value: function update() {
+      this.ticking = false;
+      var hasChanged = this.step();
 
-  requestTick() {
-    if (!this.ticking) {
-      window.requestAnimationFrame(this.update.bind(this));
-      this.ticking = true;
+      if (hasChanged) {
+        this.render();
+        this.requestTick();
+      }
     }
-  }
+  }, {
+    key: 'render',
+    value: function render() {
+      this.elementMap.forEach(function (element, domElement) {
+        element.render(domElement);
+      });
+    }
+  }, {
+    key: 'step',
+    value: function step() {
+      var _this5 = this;
 
-  update() {
-    this.ticking = false;
-    var hasChanged = this.step();
-
-    if (hasChanged) {
-      this.render();
-      this.requestTick();
+      var somethingChanged = false;
+      this.elementMap.forEach(function (element) {
+        if (element.step(_this5.timescale)) {
+          somethingChanged = true;
+        }
+      });
+      return somethingChanged;
     }
-  }
+  }]);
 
-  render() {
-    this.elementMap.forEach((element, domElement) => {
-      element.render(domElement);
-    });
-  }
-
-  step(): boolean {
-    let somethingChanged = false;
-    this.elementMap.forEach(element => {
-      if (element.step(this.timescale)) {
-        somethingChanged = true;
-      }
-    });
-    return somethingChanged;
-  }
-};
+  return Animar;
+})();

lib/animation.js

@@ -1,23 +0,11 @@
-/* @flow */
+"use strict";
 
-module.exports = class Animation {
-  currentIteration: number;
-  startValue: number;
-  changeInValue: number;
-  totalIterations: number;
-  easingFunction: Function;
-  loop: boolean;
-  delay: number;
-  wait: number;
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-  constructor(
-    currentIteration: number,
-    startValue: number,
-    changeInValue: number,
-    totalIterations:number,
-    easingFunction: Function,
-    loop: boolean,
-    delay: number,
-    wait: number
-  ) {
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+module.exports = (function () {
+  function Animation(currentIteration, startValue, changeInValue, totalIterations, easingFunction, loop, delay, wait) {
+    _classCallCheck(this, Animation);
+
     this.currentIteration = currentIteration;
@@ -33,12 +21,17 @@ this.startValue = startValue;
 
-  step(timescale: number): boolean {
-    if (this.currentIteration < (this.totalIterations + this.wait)) {
-      this.currentIteration += timescale;
-    } else if (this.loop) {
-      this.currentIteration = 0 - this.delay;
-    } else {
-      return false;
+  _createClass(Animation, [{
+    key: "step",
+    value: function step(timescale) {
+      if (this.currentIteration < this.totalIterations + this.wait) {
+        this.currentIteration += timescale;
+      } else if (this.loop) {
+        this.currentIteration = 0 - this.delay;
+      } else {
+        return false;
+      }
+      return true;
     }
-    return true;
-  }
-};
+  }]);
+
+  return Animation;
+})();

lib/attribute.js

@@ -1,12 +0,13 @@
-/* @flow */
-import type * as Animation from './animation';
+'use strict';
 
-import { calculateAnimationValue, applyStyle, TRANSFORM_ATTRIBUTES} from './helpers';
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-module.exports = class Attribute {
-  model: number;
-  animations: Array<?Animation>;
-  name: string;
+var _helpers = require('./helpers');
 
-  constructor(name: string, model: number) {
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+module.exports = (function () {
+  function Attribute(name, model) {
+    _classCallCheck(this, Attribute);
+
     this.model = model;
@@ -17,22 +18,27 @@ this.animations = [];
 
-  addAnimation(animation: Animation) {
-    this.animations.push(animation);
-  }
+  _createClass(Attribute, [{
+    key: 'addAnimation',
+    value: function addAnimation(animation) {
+      this.animations.push(animation);
+    }
+  }, {
+    key: 'merge',
+    value: function merge(target) {
+      var newAttribute = new Attribute(target.name, target.model);
+      newAttribute.animations = this.animations.concat(target.animations);
+      return newAttribute;
+    }
+  }, {
+    key: 'forEachAnimation',
+    value: function forEachAnimation(callback) {
+      this.animations = this.animations.map(callback).filter(function (x) {
+        return typeof x !== 'undefined';
+      });
+    }
+  }, {
+    key: 'step',
+    value: function step(timescale) {
+      var somethingChanged = false;
 
-  merge(target: Attribute): Attribute {
-    let newAttribute = new Attribute(target.name, target.model);
-    newAttribute.animations = this.animations.concat(target.animations);
-    return newAttribute;
-  }
-
-  forEachAnimation(callback: (animation: ?Animation) => ?Animation) {
-    this.animations = this.animations
-      .map(callback)
-      .filter((x) => typeof x !== 'undefined');
-  }
-
-  step(timescale: number): boolean {
-    let somethingChanged = false;
-
-    this.animations = this.animations.map(animation => {
+      this.animations = this.animations.map(function (animation) {
         if (animation != null && animation.step(timescale)) {
@@ -42,30 +48,32 @@ somethingChanged = true;
         }
-      }).filter((x) => typeof x !== 'undefined');
+      }).filter(function (x) {
+        return typeof x !== 'undefined';
+      });
 
-    return somethingChanged;
-  }
+      return somethingChanged;
+    }
+  }, {
+    key: 'render',
+    value: function render(domElement) {
+      var transformValue = '';
+      var targetValue = String(this.model + (0, _helpers.calculateAnimationValue)(this.animations));
 
-  render(domElement: HTMLElement): string {
-    let transformValue = '';
-    let targetValue = String(this.model + calculateAnimationValue(this.animations));
-
-    const pxRegex = /(perspective)|(translate[XYZ])/,
+      var pxRegex = /(perspective)|(translate[XYZ])/,
           degRegex = /rotate[XYZ]?/;
 
-    const unit = (
-      pxRegex.test(this.name) ? 'px' : (
-        degRegex.test(this.name) ? 'deg' : ''
-      )
-    );
+      var unit = pxRegex.test(this.name) ? 'px' : degRegex.test(this.name) ? 'deg' : '';
 
-    targetValue += unit;
+      targetValue += unit;
 
-    if (TRANSFORM_ATTRIBUTES.indexOf(this.name) !== -1) {
-      transformValue += `${this.name}(${targetValue}) `;
-    } else {
-      applyStyle(domElement, this.name, targetValue);
+      if (_helpers.TRANSFORM_ATTRIBUTES.indexOf(this.name) !== -1) {
+        transformValue += this.name + '(' + targetValue + ') ';
+      } else {
+        (0, _helpers.applyStyle)(domElement, this.name, targetValue);
+      }
+
+      return transformValue;
     }
+  }]);
 
-    return transformValue;
-  }
-};
+  return Attribute;
+})();

lib/easing.js

@@ -1,3 +0,30 @@
-export function linear() {
-  return (t, b, c, d) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linear = linear;
+exports.quadraticIn = quadraticIn;
+exports.quadraticOut = quadraticOut;
+exports.quadraticInOut = quadraticInOut;
+exports.cubicIn = cubicIn;
+exports.cubicOut = cubicOut;
+exports.cubicInOut = cubicInOut;
+exports.quarticIn = quarticIn;
+exports.quarticOut = quarticOut;
+exports.quarticInOut = quarticInOut;
+exports.quinticIn = quinticIn;
+exports.quinticOut = quinticOut;
+exports.quinticInOut = quinticInOut;
+exports.sinusoidalIn = sinusoidalIn;
+exports.sinusoidalOut = sinusoidalOut;
+exports.sinusoidalInOut = sinusoidalInOut;
+exports.exponentialIn = exponentialIn;
+exports.exponentialOut = exponentialOut;
+exports.exponentialInOut = exponentialInOut;
+exports.circularIn = circularIn;
+exports.circularOut = circularOut;
+exports.circularInOut = circularInOut;
+function linear() {
+  return function (t, b, c, d) {
     return c * t / d + b;
@@ -7,4 +34,4 @@ };
 
-export function quadraticIn() {
-  return (t, b, c, d) => {
+function quadraticIn() {
+  return function (t, b, c, d) {
     t /= d;
@@ -15,4 +42,4 @@ return c * t * t + b;
 
-export function quadraticOut() {
-  return (t, b, c, d) => {
+function quadraticOut() {
+  return function (t, b, c, d) {
     t /= d;
@@ -23,6 +50,8 @@ return -c * t * (t - 2) + b;
 
-export function quadraticInOut() {
-  return (t, b, c, d) => {
+function quadraticInOut() {
+  return function (t, b, c, d) {
     t /= d / 2;
-    if (t < 1) { return c / 2 * t * t + b; }
+    if (t < 1) {
+      return c / 2 * t * t + b;
+    }
     t--;
@@ -33,4 +62,4 @@ return -c / 2 * (t * (t - 2) - 1) + b;
 
-export function cubicIn() {
-  return (t, b, c, d) => {
+function cubicIn() {
+  return function (t, b, c, d) {
     t /= d;
@@ -41,4 +70,4 @@ return c * t * t * t + b;
 
-export function cubicOut() {
-  return (t, b, c, d) => {
+function cubicOut() {
+  return function (t, b, c, d) {
     t /= d;
@@ -50,6 +79,8 @@ t--;
 
-export function cubicInOut() {
-  return (t, b, c, d) => {
+function cubicInOut() {
+  return function (t, b, c, d) {
     t /= d / 2;
-    if (t < 1) { return c / 2 * t * t * t + b; }
+    if (t < 1) {
+      return c / 2 * t * t * t + b;
+    }
     t -= 2;
@@ -60,4 +91,4 @@ return c / 2 * (t * t * t + 2) + b;
 
-export function quarticIn() {
-  return (t, b, c, d) => {
+function quarticIn() {
+  return function (t, b, c, d) {
     t /= d;
@@ -68,4 +99,4 @@ return c * t * t * t * t + b;
 
-export function quarticOut() {
-  return (t, b, c, d) => {
+function quarticOut() {
+  return function (t, b, c, d) {
     t /= d;
@@ -77,6 +108,8 @@ t--;
 
-export function quarticInOut() {
-  return (t, b, c, d) => {
+function quarticInOut() {
+  return function (t, b, c, d) {
     t /= d / 2;
-    if (t < 1) { return c / 2 * t * t * t * t + b; }
+    if (t < 1) {
+      return c / 2 * t * t * t * t + b;
+    }
     t -= 2;
@@ -87,4 +120,4 @@ return -c / 2 * (t * t * t * t - 2) + b;
 
-export function quinticIn() {
-  return (t, b, c, d) => {
+function quinticIn() {
+  return function (t, b, c, d) {
     t /= d;
@@ -95,4 +128,4 @@ return c * t * t * t * t * t + b;
 
-export function quinticOut() {
-  return (t, b, c, d) => {
+function quinticOut() {
+  return function (t, b, c, d) {
     t /= d;
@@ -104,6 +137,8 @@ t--;
 
-export function quinticInOut() {
-  return (t, b, c, d) => {
+function quinticInOut() {
+  return function (t, b, c, d) {
     t /= d / 2;
-    if (t < 1) { return c / 2 * t * t * t * t * t + b; }
+    if (t < 1) {
+      return c / 2 * t * t * t * t * t + b;
+    }
     t -= 2;
@@ -114,4 +149,4 @@ return c / 2 * (t * t * t * t * t + 2) + b;
 
-export function sinusoidalIn() {
-  return (t, b, c, d) => {
+function sinusoidalIn() {
+  return function (t, b, c, d) {
     return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
@@ -121,4 +156,4 @@ };
 
-export function sinusoidalOut() {
-  return (t, b, c, d) => {
+function sinusoidalOut() {
+  return function (t, b, c, d) {
     return c * Math.sin(t / d * (Math.PI / 2)) + b;
@@ -128,4 +163,4 @@ };
 
-export function sinusoidalInOut() {
-  return (t, b, c, d) => {
+function sinusoidalInOut() {
+  return function (t, b, c, d) {
     return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
@@ -135,25 +170,27 @@ };
 
-export function exponentialIn() {
-  return (t, b, c, d) => {
-    return c * Math.pow( 2, 10 * (t / d - 1) ) + b;
+function exponentialIn() {
+  return function (t, b, c, d) {
+    return c * Math.pow(2, 10 * (t / d - 1)) + b;
   };
 }
 
-export function exponentialOut() {
-  return (t, b, c, d) => {
-    return c * ( -Math.pow( 2, -10 * t / d ) + 1 ) + b;
+function exponentialOut() {
+  return function (t, b, c, d) {
+    return c * (-Math.pow(2, -10 * t / d) + 1) + b;
   };
 }
 
-export function exponentialInOut() {
-  return (t, b, c, d) => {
+function exponentialInOut() {
+  return function (t, b, c, d) {
     t /= d / 2;
-    if (t < 1) { return c / 2 * Math.pow( 2, 10 * (t - 1) ) + b; }
+    if (t < 1) {
+      return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
+    }
     t--;
-    return c / 2 * ( -Math.pow( 2, -10 * t) + 2 ) + b;
+    return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
   };
 }
 
-export function circularIn() {
-  return (t, b, c, d) => {
+function circularIn() {
+  return function (t, b, c, d) {
     t /= d;
@@ -164,4 +201,4 @@ return -c * (Math.sqrt(1 - t * t) - 1) + b;
 
-export function circularOut() {
-  return (t, b, c, d) => {
+function circularOut() {
+  return function (t, b, c, d) {
     t /= d;
@@ -173,9 +210,11 @@ t--;
 
-export function circularInOut() {
-  return (t, b, c, d) => {
+function circularInOut() {
+  return function (t, b, c, d) {
     t /= d / 2;
-    if (t < 1) { return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; }
+    if (t < 1) {
+      return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
+    }
     t -= 2;
     return c / 2 * (Math.sqrt(1 - t * t) + 1) + b;
   };
-}
+}

lib/element.js

@@ -1,12 +0,13 @@
-// @flow
-import type * as Attribute from './attribute';
-import type * as Animation from './animation';
+'use strict';
 
-import { applyStyle } from './helpers';
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-module.exports = class Element {
-  attributes: Map<string, Attribute>;
-  domElement: HTMLElement;
+var _helpers = require('./helpers');
 
-  constructor(element: HTMLElement) {
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+module.exports = (function () {
+  function Element(element) {
+    _classCallCheck(this, Element);
+
     this.attributes = new Map();
@@ -16,60 +17,73 @@ this.domElement = element;
 
-  render() {
-    let transformValue = '';
+  _createClass(Element, [{
+    key: 'render',
+    value: function render() {
+      var _this = this;
 
-    this.attributes.forEach(attribute => {
-      transformValue += attribute.render(this.domElement);
-    });
+      var transformValue = '';
 
-    if (transformValue !== '') {
-      transformValue += 'translateZ(0)';
-      applyStyle(this.domElement, 'transform', transformValue);
-    }
-  }
+      this.attributes.forEach(function (attribute) {
+        transformValue += attribute.render(_this.domElement);
+      });
 
-  merge(target: Element): Element {
-    let mergedElement = new Element(this.domElement);
-    mergedElement.attributes = new Map(this.attributes);
-    target.attributes.forEach((attr, attrName) => {
-      let mergedAttribute;
-
-      if (mergedElement.attributes.has(attrName)) {
-        mergedAttribute = mergedElement.attributes.get(attrName).merge(attr);
-      } else {
-        mergedAttribute = attr;
+      if (transformValue !== '') {
+        transformValue += 'translateZ(0)';
+        (0, _helpers.applyStyle)(this.domElement, 'transform', transformValue);
       }
+    }
+  }, {
+    key: 'merge',
+    value: function merge(target) {
+      var mergedElement = new Element(this.domElement);
+      mergedElement.attributes = new Map(this.attributes);
+      target.attributes.forEach(function (attr, attrName) {
+        var mergedAttribute = undefined;
 
-      mergedElement.attributes.set(attrName, mergedAttribute);
-    });
+        if (mergedElement.attributes.has(attrName)) {
+          mergedAttribute = mergedElement.attributes.get(attrName).merge(attr);
+        } else {
+          mergedAttribute = attr;
+        }
 
-    return mergedElement;
-  }
+        mergedElement.attributes.set(attrName, mergedAttribute);
+      });
 
-  addAttribute(attrName: string, attribute: Attribute) {
-    this.attributes.set(attrName, attribute);
-  }
+      return mergedElement;
+    }
+  }, {
+    key: 'addAttribute',
+    value: function addAttribute(attrName, attribute) {
+      this.attributes.set(attrName, attribute);
+    }
+  }, {
+    key: 'forEachAnimationInAttribute',
+    value: function forEachAnimationInAttribute(callback) {
+      this.attributes.forEach(function (attribute) {
+        attribute.forEachAnimation(callback);
+      });
+    }
+  }, {
+    key: 'hasAttribute',
+    value: function hasAttribute(attributeName) {
+      return this.attributes.has(attributeName);
+    }
+  }, {
+    key: 'getModelFromAttribute',
+    value: function getModelFromAttribute(attributeName) {
+      return this.attributes.get(attributeName).model;
+    }
+  }, {
+    key: 'step',
+    value: function step(timescale) {
+      var somethingChanged = false;
+      this.attributes.forEach(function (attribute) {
+        if (attribute.step(timescale)) {
+          somethingChanged = true;
+        }
+      });
+      return somethingChanged;
+    }
+  }]);
 
-  forEachAnimationInAttribute(callback: (animation: ?Animation) => ?Animation) {
-    this.attributes.forEach(attribute => {
-      attribute.forEachAnimation(callback);
-    });
-  }
-
-  hasAttribute(attributeName: string): boolean {
-    return this.attributes.has(attributeName);
-  }
-
-  getModelFromAttribute(attributeName: string): number {
-    return this.attributes.get(attributeName).model;
-  }
-
-  step(timescale: number): boolean {
-    let somethingChanged = false;
-    this.attributes.forEach(attribute => {
-      if (attribute.step(timescale)) {
-        somethingChanged = true;
-      }
-    });
-    return somethingChanged;
-  }
-};
+  return Element;
+})();

lib/helpers.js

@@ -1,56 +0,56 @@
-/* @flow */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTransformMatrix = getTransformMatrix;
+exports.getTransform = getTransform;
+exports.getOpacity = getOpacity;
+exports.setTransform = setTransform;
+exports.applyStyle = applyStyle;
+exports.calculateAnimationValue = calculateAnimationValue;
+exports.getStartValue = getStartValue;
+
 /// <reference path="../typings/tsd.d.ts"/>
 
-export const TRANSFORM_ATTRIBUTES = [
-  'translateX',
-  'translateY',
-  'translateZ',
-  'scale',
-  'scaleX',
-  'scaleY',
-  'rotate',
-  'rotateX',
-  'rotateY',
-  'rotateZ'
-];
+var TRANSFORM_ATTRIBUTES = exports.TRANSFORM_ATTRIBUTES = ['translateX', 'translateY', 'translateZ', 'scale', 'scaleX', 'scaleY', 'rotate', 'rotateX', 'rotateY', 'rotateZ'];
 
-export function getTransformMatrix(element: HTMLElement): Array<number> {
-  let computedStyle = window.getComputedStyle(element, null);
+function getTransformMatrix(element) {
+  var computedStyle = window.getComputedStyle(element, null);
   /* istanbul ignore next */
-  let transformString = computedStyle.getPropertyValue('-webkit-transform') ||
-                        computedStyle.getPropertyValue('-moz-transform') ||
-                        computedStyle.getPropertyValue('-ms-transform') ||
-                        computedStyle.getPropertyValue('-o-transform') ||
-                        computedStyle.getPropertyValue('transform') ||
-                        'none';
-  if (transformString === 'none') { transformString = 'matrix(1, 0, 0, 1, 0, 0)'; }
-  const values = transformString.split('(')[1].split(')')[0].split(',');
-  const floatValues = values.map(function(x) { return parseFloat(x, 10); } );
+  var transformString = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('-moz-transform') || computedStyle.getPropertyValue('-ms-transform') || computedStyle.getPropertyValue('-o-transform') || computedStyle.getPropertyValue('transform') || 'none';
+  if (transformString === 'none') {
+    transformString = 'matrix(1, 0, 0, 1, 0, 0)';
+  }
+  var values = transformString.split('(')[1].split(')')[0].split(',');
+  var floatValues = values.map(function (x) {
+    return parseFloat(x, 10);
+  });
   return floatValues;
 }
 
-export function getTransform(element: HTMLElement, attribute: string): number {
-  let values = this.getTransformMatrix(element);
+function getTransform(element, attribute) {
+  var values = this.getTransformMatrix(element);
   switch (attribute) {
-    case ('translateX'):
+    case 'translateX':
       return values[4];
-    case ('translateY'):
+    case 'translateY':
       return values[5];
-    case ('scaleX'):
+    case 'scaleX':
       return Math.sqrt(Math.pow(values[0], 2) + Math.pow(values[1], 2));
-    case ('scaleY'):
+    case 'scaleY':
       return Math.sqrt(Math.pow(values[2], 2) + Math.pow(values[3], 2));
-    case ('rotate'):
+    case 'rotate':
       return Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
     default:
-      throw new Error(`invalid/unspported transform attribute: ${attribute}`);
+      throw new Error('invalid/unspported transform attribute: ' + attribute);
   }
 }
 
-export function getOpacity(element: HTMLElement): number {
-  let computedStyle = window.getComputedStyle(element, null);
+function getOpacity(element) {
+  var computedStyle = window.getComputedStyle(element, null);
   return parseFloat(computedStyle.getPropertyValue('opacity'));
 }
 
-export function setTransform(element: HTMLElement, transformString: string): HTMLElement {
+function setTransform(element, transformString) {
   element.style.transform = transformString;
@@ -60,22 +60,22 @@ return element;
 
-export function applyStyle(element: HTMLElement, attributeName: string, attributeValue: string) {
+function applyStyle(element, attributeName, attributeValue) {
   switch (attributeName) {
-    case ('transform'):
+    case 'transform':
       setTransform(element, attributeValue);
       break;
-    case ('opacity'):
+    case 'opacity':
       element.style.opacity = attributeValue;
       break;
-    case ('perspective'):
+    case 'perspective':
       element.style.perspective = attributeValue;
       break;
     default:
-      throw new Error(`invalid/unsupported attribute: ${attributeName}`);
+      throw new Error('invalid/unsupported attribute: ' + attributeName);
   }
 }
 
-export function calculateAnimationValue(animations: Array<any>): number {
+function calculateAnimationValue(animations) {
   var result = 0;
 
-  animations.forEach(animation => {
+  animations.forEach(function (animation) {
     var currentIteration = animation.currentIteration;
@@ -94,4 +94,4 @@ if (currentIteration < 0) {
 
-export function getStartValue(element: HTMLElement, attribute: string): number {
-  let result = 0;
+function getStartValue(element, attribute) {
+  var result = 0;
 
@@ -102,7 +102,7 @@ if (TRANSFORM_ATTRIBUTES.indexOf(attribute) !== -1) {
     switch (attribute) {
-      case ('opacity'):
+      case 'opacity':
         result = this.getOpacity(element);
         break;
       default:
-        throw new Error(`invalid/unsupported attribute: ${attribute}`);
+        throw new Error('invalid/unsupported attribute: ' + attribute);
     }
@@ -112,2 +112,2 @@ }
   return result;
-}
+}

package.json

 {
   "name": "animar",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "a modern, focused, flexible javascript animation library.",
@@ -29,7 +29,8 @@ "keywords": [
     "build": "./scripts/build.sh",
+    "prebuild": "npm run clean",
     "lint": "eslint lib",
     "typecheck": "./node_modules/.bin/flow check",
-    "prebuild": "npm run clean",
     "test": "./node_modules/babel-cli/bin/babel-node.js ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha",
-    "pretest": "npm run clean-coverage && npm run lint && npm run typecheck"
+    "pretest": "npm run clean-coverage && npm run lint && npm run typecheck",
+    "prepublish": "./node_modules/.bin/babel ./src --out-dir ./lib"
   },
@@ -36,0 +37,0 @@ "directories": {

README.md

@@ -1,2 +0,2 @@
-[![Build Status](https://img.shields.io/travis/vincentriemer/animar/master.svg?style=flat)](https://travis-ci.org/vincentriemer/animar) [![Dependency Status](https://img.shields.io/david/vincentriemer/animar.svg?style=flat)](https://david-dm.org/vincentriemer/animar) [![devDependency Status](https://img.shields.io/david/dev/vincentriemer/animar.svg?style=flat)](https://david-dm.org/vincentriemer/animar#info=devDependencies) [![npm version](https://img.shields.io/npm/v/animar.js.svg?style=flat)](http://badge.fury.io/js/animar) [![Test Coverage](https://img.shields.io/codeclimate/coverage/github/vincentriemer/animar.svg?style=flat)](https://codeclimate.com/github/vincentriemer/animar)
+[![Build Status](https://img.shields.io/travis/vincentriemer/animar/master.svg?style=flat)](https://travis-ci.org/vincentriemer/animar) [![Dependency Status](https://img.shields.io/david/vincentriemer/animar.svg?style=flat)](https://david-dm.org/vincentriemer/animar) [![devDependency Status](https://img.shields.io/david/dev/vincentriemer/animar.svg?style=flat)](https://david-dm.org/vincentriemer/animar#info=devDependencies) [![npm version](https://badge.fury.io/js/animar.svg)](https://badge.fury.io/js/animar) [![Test Coverage](https://img.shields.io/codeclimate/coverage/github/vincentriemer/animar.svg?style=flat)](https://codeclimate.com/github/vincentriemer/animar)
 
@@ -3,0 +3,0 @@ # Animar

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

28858

decreased by-33.81%

Number of package files

12

decreased by-25%

Lines of code

687

decreased by-37.32%

No dependency changes