react-web-animation/dist/react-web-animation.js

react-web-animation is a set of React components that expose the Web Animations API in a declarative way.

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"));
	else if(typeof define === 'function' && define.amd)
		define("react-web-animation", ["react"], factory);
	else if(typeof exports === 'object')
		exports["ReactWebAnimation"] = factory(require("react"));
	else
		root["ReactWebAnimation"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 19);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_0__;

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

/**
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

if (true) {
  var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
    Symbol.for &&
    Symbol.for('react.element')) ||
    0xeac7;

  var isValidElement = function(object) {
    return typeof object === 'object' &&
      object !== null &&
      object.$$typeof === REACT_ELEMENT_TYPE;
  };

  // By explicitly using `prop-types` you are opting into new development behavior.
  // http://fb.me/prop-types-in-prod
  var throwOnDirectAccess = true;
  module.exports = __webpack_require__(21)(isValidElement, throwOnDirectAccess);
} else {
  // By explicitly using `prop-types` you are opting into new production behavior.
  // http://fb.me/prop-types-in-prod
  module.exports = require('./factoryWithThrowingShims')();
}


/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

var eq = __webpack_require__(14);

/**
 * Gets the index at which the `key` is found in `array` of key-value pairs.
 *
 * @private
 * @param {Array} array The array to inspect.
 * @param {*} key The key to search for.
 * @returns {number} Returns the index of the matched value, else `-1`.
 */
function assocIndexOf(array, key) {
  var length = array.length;
  while (length--) {
    if (eq(array[length][0], key)) {
      return length;
    }
  }
  return -1;
}

module.exports = assocIndexOf;


/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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; }; }();

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _propTypes = __webpack_require__(1);

var _dom_elements = __webpack_require__(23);

var _dom_elements2 = _interopRequireDefault(_dom_elements);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // eslint-disable-line no-unused-vars


var createHocForTypes = function createHocForTypes(Target) {
  var validPropTypes = Object.keys(Target.propTypes || {});

  var WrapElement = function WrapElement(tag) {
    var _class, _temp;

    return _temp = _class = function (_Component) {
      _inherits(Wrapped, _Component);

      function Wrapped() {
        _classCallCheck(this, Wrapped);

        return _possibleConstructorReturn(this, (Wrapped.__proto__ || Object.getPrototypeOf(Wrapped)).apply(this, arguments));
      }

      _createClass(Wrapped, [{
        key: 'render',
        value: function render() {
          var _this2 = this;

          var _props = this.props,
              children = _props.children,
              rest = _objectWithoutProperties(_props, ['children']);

          var propsToAnimation = validPropTypes.reduce(function (animationProps, validProp) {
            animationProps[validProp] = rest[validProp];
            return animationProps;
          }, {});

          var propsToChild = Object.keys(rest).reduce(function (childProps, childProp) {
            if (validPropTypes.indexOf(childProp) === -1) {
              childProps[childProp] = rest[childProp];
            }
            return childProps;
          }, {});

          return _react2.default.createElement(
            Target,
            _extends({}, propsToAnimation, {
              ref: function ref(el) {
                if (el && el.node) {
                  // pass node reference
                  _this2.node = el.node;
                }
              }
            }),
            (0, _react.createElement)(tag, propsToChild, children)
          );
        }
      }]);

      return Wrapped;
    }(_react.Component), _class.propTypes = {
      children: _propTypes.node
    }, _temp;
  };

  // Shorthands for all valid HTML Elements
  _dom_elements2.default.forEach(function (domElement) {
    Target[domElement] = WrapElement(domElement);
    Target[domElement].displayName = (Target.name || Target.displayName || 'WrapElement') + '.' + domElement;
  });

  return Target;
};

exports.default = createHocForTypes;

/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


/**
 * Copyright (c) 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * 
 */

function makeEmptyFunction(arg) {
  return function () {
    return arg;
  };
}

/**
 * This function accepts and discards inputs; it has no side effects. This is
 * primarily useful idiomatically for overridable function endpoints which
 * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
 */
var emptyFunction = function emptyFunction() {};

emptyFunction.thatReturns = makeEmptyFunction;
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
emptyFunction.thatReturnsThis = function () {
  return this;
};
emptyFunction.thatReturnsArgument = function (arg) {
  return arg;
};

module.exports = emptyFunction;

/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Copyright (c) 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 */



/**
 * Use invariant() to assert state which your program assumes to be true.
 *
 * Provide sprintf-style format (only %s is supported) and arguments
 * to provide information about what broke and what you were
 * expecting.
 *
 * The invariant message will be stripped in production, but the invariant
 * will remain to ensure logic does not differ in production.
 */

var validateFormat = function validateFormat(format) {};

if (true) {
  validateFormat = function validateFormat(format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
}

function invariant(condition, format, a, b, c, d, e, f) {
  validateFormat(format);

  if (!condition) {
    var error;
    if (format === undefined) {
      error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
    } else {
      var args = [a, b, c, d, e, f];
      var argIndex = 0;
      error = new Error(format.replace(/%s/g, function () {
        return args[argIndex++];
      }));
      error.name = 'Invariant Violation';
    }

    error.framesToPop = 1; // we don't care about invariant's own frame
    throw error;
  }
}

module.exports = invariant;

/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Copyright 2014-2015, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 */



var emptyFunction = __webpack_require__(4);

/**
 * Similar to invariant but only logs a warning if the condition is not met.
 * This can be used to log issues in development environments in critical
 * paths. Removing the logging code for production environments will keep the
 * same logic and follow the same code paths.
 */

var warning = emptyFunction;

if (true) {
  var printWarning = function printWarning(format) {
    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }

    var argIndex = 0;
    var message = 'Warning: ' + format.replace(/%s/g, function () {
      return args[argIndex++];
    });
    if (typeof console !== 'undefined') {
      console.error(message);
    }
    try {
      // --- Welcome to debugging React ---
      // This error was thrown as a convenience so that you can use this stack
      // to find the callsite that caused this warning to fire.
      throw new Error(message);
    } catch (x) {}
  };

  warning = function warning(condition, format) {
    if (format === undefined) {
      throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
    }

    if (format.indexOf('Failed Composite propType: ') === 0) {
      return; // Ignore CompositeComponent proptype check.
    }

    if (!condition) {
      for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
        args[_key2 - 2] = arguments[_key2];
      }

      printWarning.apply(undefined, [format].concat(args));
    }
  };
}

module.exports = warning;

/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */



var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';

module.exports = ReactPropTypesSecret;


/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

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; }; }();

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _propTypes = __webpack_require__(1);

var _propTypes2 = _interopRequireDefault(_propTypes);

var _animatable = __webpack_require__(9);

var _animatable2 = _interopRequireDefault(_animatable);

var _playable = __webpack_require__(10);

var _playable2 = _interopRequireDefault(_playable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var assign = __webpack_require__(11);
var isEqual = __webpack_require__(16);

/**
 * <Animation/> is a simple implementation of <Animatable/> and controls a single
 * "player" instance for the wrapped element.
 */

var Animation = function (_Animatable) {
  _inherits(Animation, _Animatable);

  function Animation() {
    _classCallCheck(this, Animation);

    var _this = _possibleConstructorReturn(this, (Animation.__proto__ || Object.getPrototypeOf(Animation)).call(this));

    _this.state = {
      player: null
    };
    return _this;
  }

  /**
   * Start the animation and set the player in the state
   */


  _createClass(Animation, [{
    key: 'startAnimation',
    value: function startAnimation(props) {
      return this.setPlayer(this.node.animate(this.keyframes, this.timing), props);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var timing = nextProps.timing,
          keyframes = nextProps.keyframes;

      // create data structures for props

      if (timing && keyframes) {
        var newTiming = Object.assign({}, timing);

        if (!isEqual(keyframes, this.keyframes) || !isEqual(newTiming, this.timing)) {
          this.timing = newTiming;
          this.keyframes = keyframes;
          // start the new animation with the new config
          this.startAnimation(nextProps);
        }
      }

      this.updatePlayer(nextProps);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _props = this.props,
          timing = _props.timing,
          keyframes = _props.keyframes;

      // create data structures for props

      this.keyframes = keyframes;
      this.timing = Object.assign({}, timing);

      // start the animation
      var player = this.startAnimation();
      // But make sure that we honor the initial playState, if set.
      this.updatePlayer(this.props, player);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props2 = this.props,
          children = _props2.children,
          getRef = _props2.getRef;


      this.element = _react2.default.cloneElement(children, {
        ref: function ref(node) {
          _this2.node = node;
          if (getRef) {
            getRef(node);
          }
          return node;
        }
      });

      return _react.Children.only(this.element);
    }
  }]);

  return Animation;
}(_animatable2.default);

assign(Animation.prototype, _playable2.default);

Animation.propTypes = assign({}, _animatable2.default.propTypes, {
  onCancel: _propTypes2.default.func,
  onFinish: _propTypes2.default.func,
  onPause: _propTypes2.default.func,
  onPlay: _propTypes2.default.func,
  onReverse: _propTypes2.default.func,
  currentTime: _propTypes2.default.number,
  playState: _propTypes2.default.oneOf(['running', 'paused', 'finished', 'idle', 'reversed'])
});

exports.default = Animation;

/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

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; }; }();

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _propTypes = __webpack_require__(1);

var _propTypes2 = _interopRequireDefault(_propTypes);

var _with_hoc_elements = __webpack_require__(3);

var _with_hoc_elements2 = _interopRequireDefault(_with_hoc_elements);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * The <Animatable/> module wraps an element and expects props
 * with Keyframe Values and a Timing configuration. However, unlike
 * <Animation/> it doesn't start or maintain any players. <Animatable/> is meant
 * to be nested under other effects like <AnimationGroup/> or <AnimationSequence/>
 */
var Animatable = function (_Component) {
  _inherits(Animatable, _Component);

  function Animatable() {
    _classCallCheck(this, Animatable);

    return _possibleConstructorReturn(this, (Animatable.__proto__ || Object.getPrototypeOf(Animatable)).apply(this, arguments));
  }

  _createClass(Animatable, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      // get the children, and optional function to get a ref to the node
      var _props = this.props,
          children = _props.children,
          getRef = _props.getRef;

      // create our element

      this.element = _react2.default.cloneElement(children, {
        ref: function ref(node) {
          _this2.node = node;
          // if the user supplied a getRef function, pass the ref
          if (getRef) {
            getRef(node);
          }
          return node;
        }
      });

      // render only the child, creating no wrapping elements
      return _react.Children.only(this.element);
    }
  }]);

  return Animatable;
}(_react.Component);

Animatable.propTypes = {
  children: _propTypes2.default.element.isRequired,
  keyframes: _propTypes2.default.arrayOf(Object),
  getRef: _propTypes2.default.func,
  timing: _propTypes2.default.shape({
    delay: _propTypes2.default.number,
    endDelay: _propTypes2.default.number,
    fill: _propTypes2.default.oneOf(['none', 'forwards', 'backwards', 'both', 'auto']),
    iterationStart: _propTypes2.default.number,
    iterations: _propTypes2.default.number,
    duration: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
    direction: _propTypes2.default.oneOf(['normal', 'reverse', 'alternate', 'alternate-reverse']),
    easing: _propTypes2.default.string
  }).isRequired
};

exports.default = (0, _with_hoc_elements2.default)(Animatable);

/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
/**
 * A mixin for components that manage an animation Player.
 */
exports.default = {
  componentWillUnmount: function componentWillUnmount() {
    var player = this.state.player;
    var detachHandlersFromPlayer = this.detachHandlersFromPlayer;

    detachHandlersFromPlayer(player);
  },
  attachHandlersToPlayer: function attachHandlersToPlayer(player, props) {
    player.onfinish = props.onFinish;
    player.oncancel = props.onCancel;
  },
  detachHandlersFromPlayer: function detachHandlersFromPlayer(player) {
    if (player) {
      player.onfinish = null;
      player.oncancel = null;
    }
  },
  notifyHandlers: function notifyHandlers(event) {
    var player = this.state.player;

    if (!player) {
      return;
    }
    switch (event) {
      case 'running':
        if (this.props.onPlay) {
          this.props.onPlay(player);
        }
        break;
      case 'paused':
        if (this.props.onPause) {
          this.props.onPause(player);
        }
        break;
      case 'reversed':
        if (this.props.onReverse) {
          this.props.onReverse(player);
        }
        break;
      default:
        break;
    }
  },
  setPlayer: function setPlayer(player, props) {
    // cancel existing animation
    if (this.state.player) {
      this.state.player.cancel();
    }
    this.setState({ player: player });

    // attach native handlers
    this.attachHandlersToPlayer(player, props || this.props);

    return player;
  },


  /**
   * Shorthand for updating all relevant player state encoded into `props`.
   */
  updatePlayer: function updatePlayer(props) {
    var player = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.player;

    var shouldUpdatePlayerState = void 0;
    // if the play state has been changed from the old to the new, or
    if (props.playState !== this.props.playState) {
      shouldUpdatePlayerState = true;
    }
    // different from the current player state
    if (player && player.playState && props.playState !== player.playState) {
      shouldUpdatePlayerState = true;
    }

    // don't do anything if the state is staying at reversed
    if (props.playState === 'reversed' && this.props.playState === 'reversed') {
      shouldUpdatePlayerState = false;
    }

    if (shouldUpdatePlayerState) {
      this.updatePlayState(props, player);
    }

    if (this.props.currentTime !== props.currentTime) {
      this.updateTime(props, player);
    }
  },
  updatePlayState: function updatePlayState(_ref) {
    var playState = _ref.playState;
    var player = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.player;

    if (!playState || !player || player.playState === playState) {
      return;
    }

    switch (playState) {
      case 'running':
        player.play();
        break;
      case 'paused':
        player.pause();
        break;
      case 'finished':
        player.finish();
        break;
      case 'idle':
        player.cancel();
        break;
      case 'reversed':
        player.reverse();
        break;
      default:
        break;
    }

    // notify any handlers of the state change
    this.notifyHandlers(playState);
  },
  updateTime: function updateTime(_ref2) {
    var currentTime = _ref2.currentTime;
    var player = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.player;

    if (!player || typeof currentTime !== 'number') {
      return;
    }

    player.currentTime = currentTime;
  }
};

/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {

var assignValue = __webpack_require__(12),
    copyObject = __webpack_require__(26),
    createAssigner = __webpack_require__(27),
    isArrayLike = __webpack_require__(34),
    isPrototype = __webpack_require__(39),
    keys = __webpack_require__(40);

/** Used for built-in method references. */
var objectProto = Object.prototype;

/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;

/**
 * Assigns own enumerable string keyed properties of source objects to the
 * destination object. Source objects are applied from left to right.
 * Subsequent sources overwrite property assignments of previous sources.
 *
 * **Note:** This method mutates `object` and is loosely based on
 * [`Object.assign`](https://mdn.io/Object/assign).
 *
 * @static
 * @memberOf _
 * @since 0.10.0
 * @category Object
 * @param {Object} object The destination object.
 * @param {...Object} [sources] The source objects.
 * @returns {Object} Returns `object`.
 * @see _.assignIn
 * @example
 *
 * function Foo() {
 *   this.a = 1;
 * }
 *
 * function Bar() {
 *   this.c = 3;
 * }
 *
 * Foo.prototype.b = 2;
 * Bar.prototype.d = 4;
 *
 * _.assign({ 'a': 0 }, new Foo, new Bar);
 * // => { 'a': 1, 'c': 3 }
 */
var assign = createAssigner(function(object, source) {
  if (isPrototype(source) || isArrayLike(source)) {
    copyObject(source, keys(source), object);
    return;
  }
  for (var key in source) {
    if (hasOwnProperty.call(source, key)) {
      assignValue(object, key, source[key]);
    }
  }
});

module.exports = assign;


/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {

var baseAssignValue = __webpack_require__(13),
    eq = __webpack_require__(14);

/** Used for built-in method references. */
var objectProto = Object.prototype;

/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;

/**
 * Assigns `value` to `key` of `object` if the existing value is not equivalent
 * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
 * for equality comparisons.
 *
 * @private
 * @param {Object} object The object to modify.
 * @param {string} key The key of the property to assign.
 * @param {*} value The value to assign.
 */
function assignValue(object, key, value) {
  var objValue = object[key];
  if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) ||
      (value === undefined && !(key in object))) {
    baseAssignValue(object, key, value);
  }
}

module.exports = assignValue;


/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {

var defineProperty = __webpack_require__(24);

/**
 * The base implementation of `assignValue` and `assignMergeValue` without
 * value checks.
 *
 * @private
 * @param {Object} object The object to modify.
 * @param {string} key The key of the property to assign.
 * @param {*} value The value to assign.
 */
function baseAssignValue(object, key, value) {
  if (key == '__proto__' && defineProperty) {
    defineProperty(object, key, {
      'configurable': true,
      'enumerable': true,
      'value': value,
      'writable': true
    });
  } else {
    object[key] = value;
  }
}

module.exports = baseAssignValue;


/***/ }),
/* 14 */
/***/ (function(module, exports) {

/**
 * Performs a
 * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
 * comparison between two values to determine if they are equivalent.
 *
 * @static
 * @memberOf _
 * @since 4.0.0
 * @category Lang
 * @param {*} value The value to compare.
 * @param {*} other The other value to compare.
 * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
 * @example
 *
 * var object = { 'a': 1 };
 * var other = { 'a': 1 };
 *
 * _.eq(object, object);
 * // => true
 *
 * _.eq(object, other);
 * // => false
 *
 * _.eq('a', 'a');
 * // => true
 *
 * _.eq('a', Object('a'));
 * // => false
 *
 * _.eq(NaN, NaN);
 * // => true
 */
function eq(value, other) {
  return value === other || (value !== value && other !== other);
}

module.exports = eq;


/***/ }),
/* 15 */
/***/ (function(module, exports) {

/**
 * Creates a unary function that invokes `func` with its argument transformed.
 *
 * @private
 * @param {Function} func The function to wrap.
 * @param {Function} transform The argument transform.
 * @returns {Function} Returns the new function.
 */
function overArg(func, transform) {
  return function(arg) {
    return func(transform(arg));
  };
}

module.exports = overArg;


/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {

var baseIsEqual = __webpack_require__(41);

/**
 * Performs a deep comparison between two values to determine if they are
 * equivalent.
 *
 * **Note:** This method supports comparing arrays, array buffers, booleans,
 * date objects, error objects, maps, numbers, `Object` objects, regexes,
 * sets, strings, symbols, and typed arrays. `Object` objects are compared
 * by their own, not inherited, enumerable properties. Functions and DOM
 * nodes are compared by strict equality, i.e. `===`.
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Lang
 * @param {*} value The value to compare.
 * @param {*} other The other value to compare.
 * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
 * @example
 *
 * var object = { 'a': 1 };
 * var other = { 'a': 1 };
 *
 * _.isEqual(object, other);
 * // => true
 *
 * object === other;
 * // => false
 */
function isEqual(value, other) {
  return baseIsEqual(value, other);
}

module.exports = isEqual;


/***/ }),
/* 17 */
/***/ (function(module, exports) {

/**
 * Checks if `value` is classified as an `Array` object.
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Lang
 * @param {*} value The value to check.
 * @returns {boolean} Returns `true` if `value` is an array, else `false`.
 * @example
 *
 * _.isArray([1, 2, 3]);
 * // => true
 *
 * _.isArray(document.body.children);
 * // => false
 *
 * _.isArray('abc');
 * // => false
 *
 * _.isArray(_.noop);
 * // => false
 */
var isArray = Array.isArray;

module.exports = isArray;


/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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; }; }();

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _propTypes = __webpack_require__(1);

var _propTypes2 = _interopRequireDefault(_propTypes);

var _playable = __webpack_require__(10);

var _playable2 = _interopRequireDefault(_playable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint no-unused-vars:0 */


var assign = __webpack_require__(11);
var isEqual = __webpack_require__(16);

/**
 * The Abstract <Effect/> component represents the behavior of a Grouped set of <Animatable/>
 * components. A sub-type must be provided.
 */

var Effect = function (_Component) {
  _inherits(Effect, _Component);

  function Effect(type) {
    _classCallCheck(this, Effect);

    var _this = _possibleConstructorReturn(this, (Effect.__proto__ || Object.getPrototypeOf(Effect)).call(this));

    _this.state = {
      player: null
    };

    /**
     * The type of groupable component.
     */
    _this.type = type;

    /**
     * Store the DOM nodes of the child <Animatable/>
     * @type {{}}
     */
    _this.nodes = {};

    /**
     * The effect
     * @type {null}
     */
    _this.effect = null;
    return _this;
  }

  _createClass(Effect, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.frameCache = Object.assign({}, this.buildFrameCache(this.props));
      this.keyframeEffects = this.getKeyframeEffectsFromChildren(this.props);
      this.effect = this.getEffectFromKeyframes(this.keyframeEffects);

      // start the animation
      var player = this.startAnimation();
      // But make sure that we honor the initial playState, if set.
      this.updatePlayer(this.props, player);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var nextKeyframes = this.getKeyframeEffectsFromChildren(nextProps);
      var newFrameCache = Object.assign({}, this.buildFrameCache(nextProps));
      var currentTime = nextProps.currentTime;


      if (!isEqual(newFrameCache, this.frameCache)) {
        this.keyframeEffects = nextKeyframes;
        this.effect = this.getEffectFromKeyframes(nextKeyframes);
        this.startAnimation(nextProps);
      }

      this.updatePlayer(nextProps);
    }
  }, {
    key: 'getKeyframeEffectsFromChildren',
    value: function getKeyframeEffectsFromChildren(props) {
      var _this2 = this;

      var children = props.children;

      return _react.Children.map(children, function (c, idx) {
        return new KeyframeEffect(_this2.nodes[idx], c.props.keyframes, c.props.timing);
      });
    }
  }, {
    key: 'startAnimation',
    value: function startAnimation(props) {
      return this.setPlayer(document.timeline.play(this.effect), props);
    }
  }, {
    key: 'buildFrameCache',
    value: function buildFrameCache(props) {
      var children = props.children;

      var cache = {};
      return _react.Children.forEach(children, function (c, idx) {
        cache[idx] = { frames: c.props.keyframes, timing: c.props.timing };
      });
    }
  }, {
    key: 'getEffectFromKeyframes',
    value: function getEffectFromKeyframes(keyframeEffects) {
      // create the group
      var Type = window[this.type] || window.GroupEffect;
      return new Type(keyframeEffects);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          children = _props.children,
          component = _props.component,
          getRef = _props.getRef;


      var childElements = _react.Children.map(children, function (c, idx) {
        return _react2.default.cloneElement(c, {
          ref: function ref(el) {
            if (el) {
              _this3.nodes[idx] = el.node;
              return el.node;
            }
            return null;
          }
        });
      });

      return _react2.default.createElement(component, _extends({}, this.props, {
        ref: function ref(node) {
          _this3.wrapper = node;
          if (getRef) {
            getRef(node);
          }
          return node;
        }
      }), childElements);
    }
  }]);

  return Effect;
}(_react.Component);

assign(Effect.prototype, _playable2.default);

Effect.defaultProps = {
  component: 'div'
};

Effect.propTypes = {
  onCancel: _propTypes2.default.func,
  onFinish: _propTypes2.default.func,
  onPause: _propTypes2.default.func,
  onPlay: _propTypes2.default.func,
  onReverse: _propTypes2.default.func,
  getRef: _propTypes2.default.func,
  currentTime: _propTypes2.default.number,
  playState: _propTypes2.default.oneOf(['running', 'paused', 'finished', 'idle', 'reversed']),
  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
  children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired
};

exports.default = Effect;

/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AnimationSequence = exports.AnimationGroup = exports.Animation = exports.Animatable = exports.Animated = undefined;

var _animated = __webpack_require__(20);

Object.defineProperty(exports, 'Animated', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_animated).default;
  }
});

var _animatable = __webpack_require__(9);

Object.defineProperty(exports, 'Animatable', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_animatable).default;
  }
});

var _animation = __webpack_require__(8);

Object.defineProperty(exports, 'Animation', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_animation).default;
  }
});

var _animation_group = __webpack_require__(61);

Object.defineProperty(exports, 'AnimationGroup', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_animation_group).default;
  }
});

var _animation_sequence = __webpack_require__(62);

Object.defineProperty(exports, 'AnimationSequence', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_animation_sequence).default;
  }
});

var _animated2 = _interopRequireDefault(_animated);

var _animatable2 = _interopRequireDefault(_animatable);

var _animation2 = _interopRequireDefault(_animation);

var _animation_group2 = _interopRequireDefault(_animation_group);

var _animation_sequence2 = _interopRequireDefault(_animation_sequence);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// expose a default
exports.default = {
  Animated: _animated2.default,
  Animatable: _animatable2.default,
  Animation: _animation2.default,
  AnimationGroup: _animation_group2.default,
  AnimationSequence: _animation_sequence2.default
};

/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _with_hoc_elements = __webpack_require__(3);

var _with_hoc_elements2 = _interopRequireDefault(_with_hoc_elements);

var _animation = __webpack_require__(8);

var _animation2 = _interopRequireDefault(_animation);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = (0, _with_hoc_elements2.default)(_animation2.default);

/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */



var emptyFunction = __webpack_require__(4);
var invariant = __webpack_require__(5);
var warning = __webpack_require__(6);

var ReactPropTypesSecret = __webpack_require__(7);
var checkPropTypes = __webpack_require__(22);

module.exports = function(isValidElement, throwOnDirectAccess) {
  /* global Symbol */
  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.

  /**
   * Returns the iterator method function contained on the iterable object.
   *
   * Be sure to invoke the function with the iterable as context:
   *
   *     var iteratorFn = getIteratorFn(myIterable);
   *     if (iteratorFn) {
   *       var iterator = iteratorFn.call(myIterable);
   *       ...
   *     }
   *
   * @param {?object} maybeIterable
   * @return {?function}
   */
  function getIteratorFn(maybeIterable) {
    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
    if (typeof iteratorFn === 'function') {
      return iteratorFn;
    }
  }

  /**
   * Collection of methods that allow declaration and validation of props that are
   * supplied to React components. Example usage:
   *
   *   var Props = require('ReactPropTypes');
   *   var MyArticle = React.createClass({
   *     propTypes: {
   *       // An optional string prop named "description".
   *       description: Props.string,
   *
   *       // A required enum prop named "category".
   *       category: Props.oneOf(['News','Photos']).isRequired,
   *
   *       // A prop named "dialog" that requires an instance of Dialog.
   *       dialog: Props.instanceOf(Dialog).isRequired
   *     },
   *     render: function() { ... }
   *   });
   *
   * A more formal specification of how these methods are used:
   *
   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
   *   decl := ReactPropTypes.{type}(.isRequired)?
   *
   * Each and every declaration produces a function with the same signature. This
   * allows the creation of custom validation functions. For example:
   *
   *  var MyLink = React.createClass({
   *    propTypes: {
   *      // An optional string or URI prop named "href".
   *      href: function(props, propName, componentName) {
   *        var propValue = props[propName];
   *        if (propValue != null && typeof propValue !== 'string' &&
   *            !(propValue instanceof URI)) {
   *          return new Error(
   *            'Expected a string or an URI for ' + propName + ' in ' +
   *            componentName
   *          );
   *        }
   *      }
   *    },
   *    render: function() {...}
   *  });
   *
   * @internal
   */

  var ANONYMOUS = '<<anonymous>>';

  // Important!
  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
  var ReactPropTypes = {
    array: createPrimitiveTypeChecker('array'),
    bool: createPrimitiveTypeChecker('boolean'),
    func: createPrimitiveTypeChecker('function'),
    number: createPrimitiveTypeChecker('number'),
    object: createPrimitiveTypeChecker('object'),
    string: createPrimitiveTypeChecker('string'),
    symbol: createPrimitiveTypeChecker('symbol'),

    any: createAnyTypeChecker(),
    arrayOf: createArrayOfTypeChecker,
    element: createElementTypeChecker(),
    instanceOf: createInstanceTypeChecker,
    node: createNodeChecker(),
    objectOf: createObjectOfTypeChecker,
    oneOf: createEnumTypeChecker,
    oneOfType: createUnionTypeChecker,
    shape: createShapeTypeChecker
  };

  /**
   * inlined Object.is polyfill to avoid requiring consumers ship their own
   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
   */
  /*eslint-disable no-self-compare*/
  function is(x, y) {
    // SameValue algorithm
    if (x === y) {
      // Steps 1-5, 7-10
      // Steps 6.b-6.e: +0 != -0
      return x !== 0 || 1 / x === 1 / y;
    } else {
      // Step 6.a: NaN == NaN
      return x !== x && y !== y;
    }
  }
  /*eslint-enable no-self-compare*/

  /**
   * We use an Error-like object for backward compatibility as people may call
   * PropTypes directly and inspect their output. However, we don't use real
   * Errors anymore. We don't inspect their stack anyway, and creating them
   * is prohibitively expensive if they are created too often, such as what
   * happens in oneOfType() for any type before the one that matched.
   */
  function PropTypeError(message) {
    this.message = message;
    this.stack = '';
  }
  // Make `instanceof Error` still work for returned errors.
  PropTypeError.prototype = Error.prototype;

  function createChainableTypeChecker(validate) {
    if (true) {
      var manualPropTypeCallCache = {};
      var manualPropTypeWarningCount = 0;
    }
    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
      componentName = componentName || ANONYMOUS;
      propFullName = propFullName || propName;

      if (secret !== ReactPropTypesSecret) {
        if (throwOnDirectAccess) {
          // New behavior only for users of `prop-types` package
          invariant(
            false,
            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
            'Use `PropTypes.checkPropTypes()` to call them. ' +
            'Read more at http://fb.me/use-check-prop-types'
          );
        } else if ("development" !== 'production' && typeof console !== 'undefined') {
          // Old behavior for people using React.PropTypes
          var cacheKey = componentName + ':' + propName;
          if (
            !manualPropTypeCallCache[cacheKey] &&
            // Avoid spamming the console because they are often not actionable except for lib authors
            manualPropTypeWarningCount < 3
          ) {
            warning(
              false,
              'You are manually calling a React.PropTypes validation ' +
              'function for the `%s` prop on `%s`. This is deprecated ' +
              'and will throw in the standalone `prop-types` package. ' +
              'You may be seeing this warning due to a third-party PropTypes ' +
              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.',
              propFullName,
              componentName
            );
            manualPropTypeCallCache[cacheKey] = true;
            manualPropTypeWarningCount++;
          }
        }
      }
      if (props[propName] == null) {
        if (isRequired) {
          if (pr