text: (function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('gsap'), require('react-is')) :
    typeof define === 'function' && define.amd ? define(['exports', 'react', 'gsap', 'react-is'], factory) :
    (global = global || self, factory(global['react-gsap'] = {}, global.React, global.gsap$2, global.reactIs));
  }(this, (function (exports, React, gsap$2, reactIs) { 'use strict';
  
    var React__default = 'default' in React ? React['default'] : React;
  
    function _extends() {
      _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;
      };
  
      return _extends.apply(this, arguments);
    }
  
    function _inheritsLoose(subClass, superClass) {
      subClass.prototype = Object.create(superClass.prototype);
      subClass.prototype.constructor = subClass;
      subClass.__proto__ = superClass;
    }
  
    function _objectWithoutPropertiesLoose(source, excluded) {
      if (source == null) return {};
      var target = {};
      var sourceKeys = Object.keys(source);
      var key, i;
  
      for (i = 0; i < sourceKeys.length; i++) {
        key = sourceKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        target[key] = source[key];
      }
  
      return target;
    }
  
    function _assertThisInitialized(self) {
      if (self === void 0) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
      }
  
      return self;
    }
  
    function _unsupportedIterableToArray(o, minLen) {
      if (!o) return;
      if (typeof o === "string") return _arrayLikeToArray(o, minLen);
      var n = Object.prototype.toString.call(o).slice(8, -1);
      if (n === "Object" && o.constructor) n = o.constructor.name;
      if (n === "Map" || n === "Set") return Array.from(o);
      if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
    }
  
    function _arrayLikeToArray(arr, len) {
      if (len == null || len > arr.length) len = arr.length;
  
      for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
  
      return arr2;
    }
  
    function _createForOfIteratorHelperLoose(o) {
      var i = 0;
  
      if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
        if (Array.isArray(o) || (o = _unsupportedIterableToArray(o))) return function () {
          if (i >= o.length) return {
            done: true
          };
          return {
            done: false,
            value: o[i++]
          };
        };
        throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
      }
  
      i = o[Symbol.iterator]();
      return i.next.bind(i);
    }
  
    (function (PlayState) {
      PlayState["play"] = "play";
      PlayState["reverse"] = "reverse";
      PlayState["stop"] = "stop";
      PlayState["pause"] = "pause";
    })(exports.PlayState || (exports.PlayState = {}));
  
    var setPlayState = function setPlayState(playState, prevPlayState, tween) {
      if (tween === void 0) {
        tween = null;
      }
  
      if (tween && playState && playState !== prevPlayState) {
        if (playState === exports.PlayState.play) {
          if (prevPlayState === exports.PlayState.pause || prevPlayState === exports.PlayState.reverse) {
            tween.play();
          } else {
            tween.restart(true);
          }
        } else if (playState === exports.PlayState.reverse) {
          if (prevPlayState === exports.PlayState.pause || prevPlayState === exports.PlayState.play) {
            tween.reverse();
          } else {
            tween.reverse(0);
          }
        } else if (playState === exports.PlayState.stop) {
          tween.pause(0);
        } else if (playState === exports.PlayState.pause) {
          tween.pause();
        }
      }
    };
  
    var getTweenFunction = function getTweenFunction(targets, props) {
      var _props$duration = props.duration,
          duration = _props$duration === void 0 ? 1 : _props$duration,
          from = props.from,
          to = props.to,
          stagger = props.stagger,
          progress = props.progress,
          totalProgress = props.totalProgress,
          playState = props.playState,
          onCompleteAll = props.onCompleteAll,
          onCompleteAllParams = props.onCompleteAllParams,
          onCompleteAllScope = props.onCompleteAllScope,
          onStartAll = props.onStartAll,
          vars = _objectWithoutPropertiesLoose(props, ["children", "wrapper", "duration", "from", "to", "stagger", "progress", "totalProgress", "playState", "disabled", "onlyInvalidateTo", "onCompleteAll", "onCompleteAllParams", "onCompleteAllScope", "onStartAll", "position", "target"]);
  
      var tweenFunction;
  
      if (from && to) {
        tweenFunction = gsap$2.gsap.fromTo(targets, from, _extends(_extends({
          stagger: stagger,
          duration: duration
        }, to), vars));
      } else if (to) {
        tweenFunction = gsap$2.gsap.to(targets, _extends(_extends({
          stagger: stagger,
          duration: duration
        }, to), vars));
      } else {
        tweenFunction = gsap$2.gsap.from(targets, _extends(_extends({
          stagger: stagger,
          duration: duration
        }, from), vars));
      } // if multiple tweens (stagger), wrap them in a timeline
      // TODO: if it's already an timeline add event handlers
  
  
      if (Array.isArray(tweenFunction)) {
        tweenFunction.forEach(function (t) {
          t.paused(false);
        });
        tweenFunction = gsap$2.gsap.timeline(_extends(_extends({}, vars), {}, {
          tweens: tweenFunction,
          smoothChildTiming: true,
          onComplete: onCompleteAll,
          onCompleteParams: onCompleteAllParams,
          onCompleteScope: onCompleteAllScope,
          onStart: onStartAll
        }));
      } // props at mount
  
  
      if (progress) {
        tweenFunction.progress(progress);
      }
  
      if (totalProgress) {
        tweenFunction.totalProgress(totalProgress);
      }
  
      if (playState) {
        setPlayState(playState, null, tweenFunction);
      }
  
      return tweenFunction;
    };
  
    var isEqual = function isEqual(obj1, obj2) {
      // very easy equal check
      // attention: if the order of properties are different it returns false
      return JSON.stringify(obj1) === JSON.stringify(obj2);
    };
  
    var refOrInnerRef = function refOrInnerRef(child) {
      if (child.type.$$typeof && child.type.$$typeof.toString() === 'Symbol(react.forward_ref)') {
        return 'ref';
      } // styled-components < 4
  
  
      if (child.type.styledComponentId) {
        return 'innerRef';
      }
  
      return 'ref';
    };
  
    var nullishCoalescing = function nullishCoalescing(value, ifNullish) {
      if (value === null || typeof value === 'undefined') {
        return ifNullish;
      }
  
      return value;
    };
  
    var Context = /*#__PURE__*/React__default.createContext({
      registerConsumer: function registerConsumer() {}
    });
  
    var Provider = /*#__PURE__*/function (_React$Component) {
      _inheritsLoose(Provider, _React$Component);
  
      function Provider(props) {
        var _this;
  
        _this = _React$Component.call(this, props) || this;
        _this.consumers = [];
        _this.registerConsumer = _this.registerConsumer.bind(_assertThisInitialized(_this));
        _this.getContextValue = _this.getContextValue.bind(_assertThisInitialized(_this));
        _this.renderWithProvider = _this.renderWithProvider.bind(_assertThisInitialized(_this));
        return _this;
      }
  
      var _proto = Provider.prototype;
  
      _proto.registerConsumer = function registerConsumer(consumer) {
        this.consumers.push(consumer);
      };
  
      _proto.getContextValue = function getContextValue() {
        return {
          registerConsumer: this.registerConsumer
        };
      };
  
      _proto.renderWithProvider = function renderWithProvider(output) {
        return React__default.createElement(Context.Provider, {
          value: this.getContextValue()
        }, output);
      };
  
      return Provider;
    }(React__default.Component);
  
    var gsap;
  
    var _interpolate;
  
    var _getProp;
  
    var _getGSAP = function _getGSAP() {
      return gsap || typeof window !== 'undefined' && (gsap = window.gsap) && gsap.registerPlugin && gsap;
    };
  
    function getDistance(p1, p2) {
      return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
    }
  
    function getCircleLength(el) {
      return 2 * Math.PI * parseFloat(nullishCoalescing(el.getAttribute('r'), '1'));
    }
  
    function getRectLength(el) {
      return parseFloat(nullishCoalescing(el.getAttribute('width'), '1')) * 2 + parseFloat(nullishCoalescing(el.getAttribute('height'), '1')) * 2;
    }
  
    function getLineLength(el) {
      return getDistance({
        x: parseFloat(nullishCoalescing(el.getAttribute('x1'), '1')),
        y: parseFloat(nullishCoalescing(el.getAttribute('y1'), '1'))
      }, {
        x: parseFloat(nullishCoalescing(el.getAttribute('x2'), '1')),
        y: parseFloat(nullishCoalescing(el.getAttribute('y2'), '1'))
      });
    }
  
    function getPolylineLength(el) {
      var points = el.points;
      var totalLength = 0;
      var previousPos = undefined;
  
      for (var i = 0; i < points.numberOfItems; i++) {
        var currentPos = points.getItem(i);
        if (previousPos) totalLength += getDistance(previousPos, currentPos);
        previousPos = currentPos;
      }
  
      return totalLength;
    }
  
    function getPolygonLength(el) {
      var points = el.points;
      return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0));
    } // if path is splitted into multiple move commands then return longest path
  
  
    function getPathLength(el) {
      if (!el.hasAttribute('d')) {
        return el.getTotalLength();
      }
  
      var d = el.getAttribute('d');
      var pathString = d ? d.replace(/m/gi, 'M') : null;
  
      if (!pathString) {
        return el.getTotalLength();
      }
  
      var paths = pathString.split('M').filter(function (path) {
        return path !== '';
      }).map(function (path) {
        return "M" + path;
      });
  
      if (paths.length === 1) {
        return el.getTotalLength();
      }
  
      var maxLength = 0;
      paths.forEach(function (path) {
        var pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathElement.setAttribute('d', path);
        maxLength = Math.max(maxLength, pathElement.getTotalLength());
      });
      return maxLength;
    }
  
    function getTotalLength(el) {
      if (el.getTotalLength) {
        return getPathLength(el);
      }
  
      switch (el.tagName.toLowerCase()) {
        case 'circle':
          return getCircleLength(el);
  
        case 'rect':
          return getRectLength(el);
  
        case 'line':
          return getLineLength(el);
  
        case 'polyline':
          return getPolylineLength(el);
  
        case 'polygon':
          return getPolygonLength(el);
  
        default:
          return 0;
      }
    }
  
    var SvgDrawPlugin = {
      version: '2.0.0',
      name: 'svgDraw',
      register: function register(core, Plugin, propTween) {
        gsap = core;
        _interpolate = gsap.utils.interpolate;
        _getProp = gsap.getProperty;
      },
      init: function init(target, value, _tween, index, targets) {
        var length = getTotalLength(target);
        var lengthParam = value;
        var offsetParam = 0;
  
        if (Array.isArray(value)) {
          lengthParam = value[0];
  
          if (value.length >= 2) {
            offsetParam = value[1] * -1;
          }
        }
  
        var data = this;
        data.target = target;
        data.strokeDashoffset = _interpolate(_getProp(target, 'stroke-dashoffset'), length * offsetParam);
        data.strokeDasharray = _interpolate(_getProp(target, 'stroke-dasharray'), [lengthParam * length, length]);
      },
      render: function render(progress, data) {
        data.target.setAttribute('stroke-dashoffset', data.strokeDashoffset(progress));
        data.target.setAttribute('stroke-dasharray', data.strokeDasharray(progress));
      }
    };
    _getGSAP() && gsap.registerPlugin(SvgDrawPlugin);
  
    var gsap$1;
  
    var _interpolate$1;
  
    var _format;
  
    var _getGSAP$1 = function _getGSAP() {
      return gsap$1 || typeof window !== 'undefined' && (gsap$1 = window.gsap) && gsap$1.registerPlugin && gsap$1;
    };
  
    var CountPlugin = {
      version: '1.0.0',
      name: 'count',
      register: function register(core, Plugin, propTween) {
        gsap$1 = core;
        _interpolate$1 = gsap$1.utils.interpolate;
  
        _format = function _format(value) {
          return parseInt(value.toString(), 10);
        };
      },
      init: function init(target, value, _tween, index, targets) {
        var inputValue = value;
        var format = _format;
  
        if (typeof value === 'object') {
          inputValue = nullishCoalescing(value.value, 0);
  
          if (value.format) {
            format = value.format;
          }
        }
  
        var initialCount = parseFloat(target.innerText);
        var data = this;
        data.target = target;
        data.count = _interpolate$1(initialCount, parseFloat(inputValue.toString()));
        data.format = format;
      },
      render: function render(progress, data) {
        data.target.innerText = data.format(data.count(progress));
      }
    };
    _getGSAP$1() && gsap$1.registerPlugin(CountPlugin);
  
    gsap$2.gsap.registerPlugin(SvgDrawPlugin);
    gsap$2.gsap.registerPlugin(CountPlugin);
  
    var Tween = /*#__PURE__*/function (_React$Component) {
      _inheritsLoose(Tween, _React$Component);
  
      function Tween() {
        var _this;
  
        _this = _React$Component.apply(this, arguments) || this;
        _this.targets = [];
        return _this;
      }
  
      var _proto = Tween.prototype;
  
      _proto.setPlayState = function setPlayState$1(playState) {
        var previousPlayState = this.props.playState;
  
        setPlayState(playState, previousPlayState, this.tween);
      };
  
      _proto.componentDidMount = function componentDidMount() {
        this.createTween();
      };
  
      _proto.componentWillUnmount = function componentWillUnmount() {
        if (this.tween) {
          this.tween.kill();
        }
      };
  
      _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate() {
        this.targets = [];
        return null;
      };
  
      _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
        var _this$props = this.props,
            children = _this$props.children,
            duration = _this$props.duration,
            to = _this$props.to,
            progress = _this$props.progress,
            totalProgress = _this$props.totalProgress,
            playState = _this$props.playState,
            disabled = _this$props.disabled,
            onlyInvalidateTo = _this$props.onlyInvalidateTo,
            vars = _objectWithoutPropertiesLoose(_this$props, ["children", "wrapper", "duration", "from", "to", "stagger", "progress", "totalProgress", "playState", "disabled", "onlyInvalidateTo", "onCompleteAll", "onCompleteAllParams", "onCompleteAllScope", "onStartAll", "position", "target"]); // if children change create a new tween
        // TODO: replace easy length check with fast equal check
  
  
        if (React__default.Children.count(prevProps.children) !== React__default.Children.count(children)) {
          this.createTween();
        }
  
        if (disabled) {
          return;
        } // execute function calls
  
  
        if (progress !== prevProps.progress) {
          this.tween.progress(progress);
        }
  
        if (totalProgress !== prevProps.totalProgress) {
          this.tween.totalProgress(totalProgress);
        }
  
        if (duration !== prevProps.duration) {
          this.tween.duration(duration);
        } // if "to" props are changed: reinit and restart tween
  
  
        if (!isEqual(to, prevProps.to)) {
          // is Tween
          if (!this.tween.getChildren) {
            this.tween.vars = _extends(_extends({}, to), vars);
  
            if (onlyInvalidateTo) {
              var progressTmp = this.tween.progress();
              this.tween.progress(0).invalidate().progress(progressTmp);
            } else {
              this.tween.invalidate();
            }
          } // is Timeline
          // TODO: not yet ready
          else {
              var delay = 0;
              this.tween.getChildren(false, true, false).forEach(function (tween) {
                tween.vars = _extends(_extends(_extends({}, to), vars), {
                  delay: delay
                });
                tween.invalidate(); // delay += stagger || 0;
              });
            }
  
          if (!this.tween.paused()) {
            this.tween.restart();
          }
        }
  
        setPlayState(playState, prevProps.playState, this.tween);
      };
  
      _proto.createTween = function createTween() {
        if (this.tween) {
          this.tween.kill();
        }
  
        if (this.props.children) {
          this.tween = getTweenFunction(this.targets, this.props);
        } else {
          // why this is needed?
          this.tween = function () {};
        }
  
        this.context.registerConsumer(this);
      };
  
      _proto.getGSAP = function getGSAP() {
        return this.tween;
      };
  
      _proto.setGSAP = function setGSAP(tween) {
        this.tween = tween;
      };
  
      _proto.addTarget = function addTarget(target) {
        // target is null at unmount
        if (target !== null) {
          this.targets.push(target);
        }
      };
  
      _proto.getTargets = function getTargets() {
        return this.targets;
      };
  
      _proto.render = function render() {
        var _this2 = this;
  
        var _this$props2 = this.props,
            children = _this$props2.children,
            wrapper = _this$props2.wrapper;
        var output = React__default.createElement(React.Fragment, null, React__default.Children.map(children, function (child) {
          var _React$cloneElement;
  
          return React__default.cloneElement(child, (_React$cloneElement = {}, _React$cloneElement[refOrInnerRef(child)] = function (target) {
            return _this2.addTarget(target);
          }, _React$cloneElement));
        }));
  
        if (wrapper) {
          return React__default.cloneElement(wrapper, [], output);
        }
  
        return output;
      };
  
      return Tween;
    }(React__default.Component);
  
    Tween.displayName = 'Tween';
    Tween.contextType = Context;
  
    var Timeline = /*#__PURE__*/function (_Provider) {
      _inheritsLoose(Timeline, _Provider);
  
      function Timeline(props) {
        var _this;
  
        _this = _Provider.call(this, props) || this;
        _this.targets = new Map();
        _this.setTarget = _this.setTarget.bind(_assertThisInitialized(_this));
        return _this;
      }
  
      var _proto = Timeline.prototype;
  
      _proto.setPlayState = function setPlayState$1(playState) {
        var previousPlayState = this.props.playState;
  
        setPlayState(playState, previousPlayState, this.timeline);
      };
  
      _proto.componentDidMount = function componentDidMount() {
        this.createTimeline();
      };
  
      _proto.componentWillUnmount = function componentWillUnmount() {
        this.timeline.kill();
      };
  
      _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate() {
        this.targets = new Map();
        return null;
      };
  
      _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
        var _this$props = this.props,
            children = _this$props.children,
            duration = _this$props.duration,
            progress = _this$props.progress,
            totalProgress = _this$props.totalProgress,
            playState = _this$props.playState; // if children change create a new timeline
        // TODO: replace easy length check with fast equal check
        // TODO: same for props.target?
  
        if (React__default.Children.count(prevProps.children) !== React__default.Children.count(children)) {
          this.createTimeline();
        } // execute function calls
  
  
        if (progress !== prevProps.progress) {
          this.timeline.progress(progress);
        }
  
        if (totalProgress !== prevProps.totalProgress) {
          this.timeline.totalProgress(totalProgress);
        }
  
        if (duration !== prevProps.duration) {
          this.timeline.duration(duration);
        }
  
        setPlayState(playState, prevProps.playState, this.timeline);
      };
  
      _proto.createTimeline = function createTimeline() {
        var _this2 = this;
  
        var _this$props2 = this.props,
            duration = _this$props2.duration,
            progress = _this$props2.progress,
            totalProgress = _this$props2.totalProgress,
            playState = _this$props2.playState,
            labels = _this$props2.labels,
            vars = _objectWithoutPropertiesLoose(_this$props2, ["children", "target", "duration", "progress", "totalProgress", "playState", "labels", "position"]);
  
        if (this.timeline) {
          this.timeline.kill();
        } // init timeline
  
  
        this.timeline = gsap$2.gsap.timeline(_extends({
          smoothChildTiming: true
        }, vars));
  
        if (labels) {
          labels.forEach(function (label) {
            _this2.timeline.addLabel(label.label, label.position);
          });
        } // add tweens or nested timelines to timeline
  
  
        this.consumers.forEach(function (consumer) {
          if (consumer.tween && !consumer.props.children) {
            var _consumer$props = consumer.props,
                _position = _consumer$props.position,
                _target = _consumer$props.target,
                stagger = _consumer$props.stagger,
                _vars = _objectWithoutPropertiesLoose(_consumer$props, ["position", "target", "stagger"]); // get target if not nullish
  
  
            var targets = null;
  
            if (_target !== null && typeof _target !== 'undefined') {
              targets = _this2.targets.get(_target);
            }
  
            var tween = getTweenFunction( // @ts-ignore
            nullishCoalescing(targets, Array.from(_this2.targets.values())), _extends({
              stagger: stagger
            }, _vars));
  
            _this2.timeline.add(tween, nullishCoalescing(_position, '+=0'));
  
            consumer.setGSAP(tween);
          } else {
            var _position2 = consumer.props.position;
  
            _this2.timeline.add(consumer.getGSAP(), nullishCoalescing(_position2, '+=0'));
          }
        }); // props at mount
  
        if (duration) {
          this.timeline.duration(duration);
        }
  
        if (progress) {
          this.timeline.progress(progress);
        }
  
        if (totalProgress) {
          this.timeline.totalProgress(totalProgress);
        }
  
        if (playState) {
          this.setPlayState(playState);
        }
  
        this.context.registerConsumer(this);
      };
  
      _proto.getGSAP = function getGSAP() {
        return this.timeline;
      };
  
      _proto.addTarget = function addTarget(target) {
        if (target !== null) {
          this.targets.set(this.targets.size, target);
        }
      };
  
      _proto.setTarget = function setTarget(key, target) {
        if (target !== null) {
          if (this.targets.has(key)) {
            var targets = this.targets.get(key);
  
            if (Array.isArray(targets)) {
              this.targets.set(key, [].concat(targets, target));
              return;
            }
          }
  
          this.targets.set(key, target);
        }
      };
  
      _proto.setTargets = function setTargets(targets) {
        this.targets = targets;
      };
  
      _proto.getTargets = function getTargets() {
        return this.targets;
      };
  
      _proto.cloneElement = function cloneElement(child) {
        var _this3 = this,
            _React$cloneElement;
  
        return React__default.cloneElement(child, (_React$cloneElement = {}, _React$cloneElement[refOrInnerRef(child)] = function (target) {
          return _this3.addTarget(target);
        }, _React$cloneElement));
      };
  
      _proto.renderTarget = function renderTarget(target) {
        var _this4 = this;
  
        if (!target) {
          return null;
        } // if is forwardRef clone and pass targets as ref
  
  
        if (reactIs.isForwardRef(target)) {
          return React__default.createElement(target.type, {
            ref: {
              set: this.setTarget
            }
          });
        } // else iterate the first level of children and set targets
  
  
        return React__default.createElement(React.Fragment, null, React__default.Children.map(target, function (child) {
          if (reactIs.isFragment(child)) {
            return React__default.Children.map(child.props.children, function (fragmentChild) {
              return _this4.cloneElement(fragmentChild);
            });
          }
  
          return _this4.cloneElement(child);
        }));
      };
  
      _proto.render = function render() {
        var _this$props3 = this.props,
            target = _this$props3.target,
            children = _this$props3.children,
            wrapper = _this$props3.wrapper;
        var renderedTarget = this.renderTarget(target);
        var output = React__default.createElement(React.Fragment, null, renderedTarget, children);
  
        if (wrapper) {
          output = React__default.cloneElement(wrapper, [], output);
        }
  
        return this.renderWithProvider(output);
      };
  
      return Timeline;
    }(Provider);
  
    Timeline.displayName = 'Timeline';
    Timeline.contextType = Context;
  
    var EntryState;
  
    (function (EntryState) {
      EntryState[EntryState["unknown"] = 0] = "unknown";
      EntryState[EntryState["entered"] = 1] = "entered";
      EntryState[EntryState["exited"] = 2] = "exited";
    })(EntryState || (EntryState = {}));
  
    var Reveal = /*#__PURE__*/function (_Provider) {
      _inheritsLoose(Reveal, _Provider);
  
      function Reveal() {
        var _this;
  
        _this = _Provider.apply(this, arguments) || this;
        _this.triggerRef = null;
        _this.observer = null;
  
        _this.intersectionObserverCallback = function (entries) {
          var _this$props = _this.props,
              repeat = _this$props.repeat,
              threshold = _this$props.threshold;
          var state = EntryState.unknown;
  
          for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
            var entry = _step.value;
  
            if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
              _this.timeline.play();
  
              state = EntryState.entered;
              break;
            } else if (!entry.isIntersecting) {
              state = EntryState.exited;
              break;
            }
          }
  
          if (!repeat && state === EntryState.entered) {
            _this.killIntersectionObserver();
          } else if (repeat && state === EntryState.exited) {
            _this.timeline.pause(0);
          }
        };
  
        return _this;
      }
  
      var _proto = Reveal.prototype;
  
      _proto.init = function init() {
        this.createTimeline();
        this.createIntersectionObserver();
      };
  
      _proto.kill = function kill() {
        this.killTimeline();
        this.killIntersectionObserver();
      };
  
      _proto.componentDidMount = function componentDidMount() {
        this.init();
      };
  
      _proto.componentWillUnmount = function componentWillUnmount() {
        this.kill();
      };
  
      _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
        var _this$props2 = this.props,
            children = _this$props2.children,
            trigger = _this$props2.trigger; // if children change create a new timeline
        // TODO: replace easy length check with fast equal check
        // TODO: same for props.target?
  
        if (React__default.Children.count(prevProps.children) !== React__default.Children.count(children)) {
          this.init();
        }
  
        if (prevProps.trigger !== trigger) {
          this.init();
        }
      };
  
      _proto.createTimeline = function createTimeline() {
        var _this2 = this;
  
        this.killTimeline(); // init timeline
  
        this.timeline = gsap$2.gsap.timeline({
          smoothChildTiming: true,
          paused: true
        }); // add consumers
  
        this.consumers.forEach(function (consumer) {
          var position = consumer.props.position;
  
          _this2.timeline.add(consumer.getGSAP().play(), nullishCoalescing(position, 0));
        });
      };
  
      _proto.killTimeline = function killTimeline() {
        if (this.timeline) {
          this.timeline.kill();
        }
      };
  
      _proto.createIntersectionObserver = function createIntersectionObserver() {
        var _this3 = this;
  
        var _this$props3 = this.props,
            root = _this$props3.root,
            rootMargin = _this$props3.rootMargin,
            threshold = _this$props3.threshold;
        var options = {
          root: root,
          rootMargin: rootMargin,
          threshold: [0, threshold]
        };
        this.observer = new IntersectionObserver(this.intersectionObserverCallback, options); // It would be better if we wouldn't need an extra wrapper.
        // But it can be problematic for example with a fadeInLeft animation
        // were the element is out of the viewport in the initial state.
        // In this case there wouldn't be an intersection..
  
        if (!this.triggerRef) {
          this.consumers.forEach(function (consumer) {
            consumer.getTargets().forEach(function (target) {
              _this3.observer && _this3.observer.observe(target);
            });
          });
        } else {
          this.observer && this.observer.observe(this.triggerRef);
        }
      };
  
      _proto.killIntersectionObserver = function killIntersectionObserver() {
        this.unobserveAll();
        this.observer = null;
      };
  
      _proto.unobserveAll = function unobserveAll() {
        var _this4 = this;
  
        if (this.observer) {
          if (!this.triggerRef) {
            this.consumers.forEach(function (consumer) {
              consumer.getTargets().forEach(function (target) {
                _this4.observer && _this4.observer.unobserve(target);
              });
            });
          } else {
            this.observer && this.observer.unobserve(this.triggerRef);
          }
        }
      };
  
      _proto.getGSAP = function getGSAP() {
        return this.timeline;
      };
  
      _proto.render = function render() {
        var _this5 = this;
  
        var _this$props4 = this.props,
            children = _this$props4.children,
            trigger = _this$props4.trigger;
        var output = trigger ? React__default.createElement(trigger.type, Object.assign({}, trigger.props, {
          ref: function ref(trigger) {
            return _this5.triggerRef = trigger;
          }
        }), children) : children;
        return this.renderWithProvider(output);
      };
  
      return Reveal;
    }(Provider);
  
    Reveal.displayName = 'Reveal';
    Reveal.defaultProps = {
      trigger: null,
      repeat: false,
      root: null,
      rootMargin: '0px',
      threshold: 0.66
    };
  
    var escapeRegExp = function escapeRegExp(regExp) {
      var specialChars = ['$', '^', '*', '(', ')', '+', '[', ']', '{', '}', '\\', '|', '.', '?', '/'];
      var regex = new RegExp('(\\' + specialChars.join('|\\') + ')', 'g');
      return regExp.replace(regex, '\\$1');
    };
  
    var SplitWords = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
      var children = _ref.children,
          wrapper = _ref.wrapper,
          _ref$delimiter = _ref.delimiter,
          delimiter = _ref$delimiter === void 0 ? ' ' : _ref$delimiter;
  
      if (typeof children !== 'string') {
        throw new Error('SplitWords only accepts a string as child.');
      }
  
      var words = children.split(new RegExp("(" + escapeRegExp(delimiter) + ")", 'g'));
      return React__default.createElement(React__default.Fragment, null, words.map(function (word, i) {
        if (delimiter === ' ' && word === delimiter) {
          return React__default.createElement(React__default.Fragment, {
            key: i
          }, " ");
        }
  
        return React__default.cloneElement(wrapper, {
          ref: ref,
          key: i
        }, word);
      }));
    });
    var SplitChars = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
      var children = _ref2.children,
          wrapper = _ref2.wrapper;
  
      if (typeof children !== 'string') {
        throw new Error('SplitLetters only accepts a string as child.');
      }
  
      return React__default.createElement(React__default.Fragment, null, children.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/).map(function (_char, i) {
        // TODO: enhance check for space
        if (_char === ' ') {
          return React__default.createElement(React__default.Fragment, {
            key: i
          }, " ");
        }
  
        return React__default.cloneElement(wrapper, {
          ref: ref,
          key: i
        }, _char);
      }));
    });
    var SplitLetters = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
      console.log('Deprecation warning: Use SplitChars instead of SplitLetters');
      return React__default.createElement(SplitChars, Object.assign({}, props, {
        ref: ref
      }));
    });
  
    var Controls = /*#__PURE__*/function (_Provider) {
      _inheritsLoose(Controls, _Provider);
  
      function Controls() {
        var _this;
  
        _this = _Provider.apply(this, arguments) || this;
        _this.sliderTouched = false;
        _this.state = {
          totalProgress: 0,
          playState: undefined,
          prevPlayState: undefined
        };
        _this.containerStyle = {
          backgroundColor: '#f0f0f0',
          padding: '10px 10px 0 10px',
          marginTop: '10px',
          position: 'relative',
          zIndex: 2,
          fontFamily: 'verdana, sans-serif',
          fontSize: '16px',
          border: '1px solid #ccc'
        };
        _this.buttonContainerStyle = {
          margin: '0',
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'space-between'
        };
        _this.buttonStyle = {
          border: '1px solid #999',
          backgroundColor: '#f0f0f0',
          padding: '5px',
          margin: '10px 10px 10px 0',
          cursor: 'pointer'
        };
        _this.sliderStyle = {
          margin: '0',
          width: '100%'
        };
        _this.playStateStyle = {
          color: '#999',
          margin: '10px 0',
          fontSize: '14px'
        };
  
        _this.onUpdate = function () {
          if (_this.gsap && _this.slider && !_this.sliderTouched) {
            var totalProgress = _this.gsap.getGSAP().totalProgress();
  
            _this.slider.value = totalProgress * 100;
          }
        };
  
        _this.onChange = function (event) {
          if (_this.gsap && _this.gsap.getGSAP()) {
            _this.gsap.getGSAP().totalProgress(event.target.value / 100);
          }
        };
  
        _this.setPlayState = function (state) {
          _this.setState(function (prevState) {
            return {
              playState: state,
              prevPlayState: prevState.playState
            };
          });
        };
  
        _this.getControls = function (_totalProgress, playState) {
          return React__default.createElement("div", {
            style: _this.containerStyle
          }, React__default.createElement("input", {
            ref: function ref(el) {
              return _this.slider = el;
            },
            type: "range",
            style: _this.sliderStyle,
            step: "0.001",
            onChange: function onChange(e) {
              return _this.onChange(e);
            },
            onMouseDown: function onMouseDown() {
              return _this.sliderTouched = true;
            },
            onMouseUp: function onMouseUp() {
              return _this.sliderTouched = false;
            }
          }), React__default.createElement("div", {
            style: _this.buttonContainerStyle
          }, React__default.createElement("div", null, React__default.createElement("button", {
            type: "button",
            style: _this.buttonStyle,
            onClick: function onClick() {
              return _this.setPlayState(exports.PlayState.play);
            }
          }, "Play"), React__default.createElement("button", {
            type: "button",
            style: _this.buttonStyle,
            onClick: function onClick() {
              return _this.setPlayState(exports.PlayState.reverse);
            }
          }, "Reverse"), React__default.createElement("button", {
            type: "button",
            style: _this.buttonStyle,
            onClick: function onClick() {
              return _this.setPlayState(exports.PlayState.pause);
            }
          }, "Pause"), React__default.createElement("button", {
            type: "button",
            style: _this.buttonStyle,
            onClick: function onClick() {
              return _this.setPlayState(exports.PlayState.stop);
            }
          }, "Stop")), React__default.createElement("span", {
            style: _this.playStateStyle
          }, playState)));
        };
  
        return _this;
      }
  
      var _proto = Controls.prototype;
  
      _proto.componentDidMount = function componentDidMount() {
        if (this.consumers.length) {
          this.gsap = this.consumers[0];
          var gsap = this.gsap.getGSAP();
  
          if (gsap) {
            gsap.eventCallback('onUpdate', this.onUpdate);
  
            if (this.props.playState) {
              this.setPlayState(this.props.playState);
            } else {
              // get child initial state
              if (gsap.paused()) {
                this.setPlayState(exports.PlayState.pause);
              } else if (gsap.reversed()) {
                this.setPlayState(exports.PlayState.reverse);
              } else {
                this.setPlayState(exports.PlayState.play);
              }
            }
  
            var totalProgress = gsap.totalProgress();
            this.slider.value = totalProgress * 100;
          }
        }
      };
  
      _proto.componentDidUpdate = function componentDidUpdate() {
        this.onUpdate();
      };
  
      _proto.render = function render() {
        var children = this.props.children;
        var _this$state = this.state,
            totalProgress = _this$state.totalProgress,
            playState = _this$state.playState,
            prevPlayState = _this$state.prevPlayState;
  
        if (this.gsap) {
          setPlayState(playState, prevPlayState, this.gsap.getGSAP());
        }
  
        return this.renderWithProvider(React__default.createElement("div", null, children, this.getControls(totalProgress, playState)));
      };
  
      return Controls;
    }(Provider);
  
    exports.Controls = Controls;
    exports.Reveal = Reveal;
    exports.SplitChars = SplitChars;
    exports.SplitLetters = SplitLetters;
    exports.SplitWords = SplitWords;
    exports.Timeline = Timeline;
    exports.Tween = Tween;
  
    Object.defineProperty(exports, '__esModule', { value: true });
  
  })));
  //# sourceMappingURL=react-gsap.umd.development.js.map
  