tags if necessary and re-nest the characters directly into the element rather than inside the word
+ if (node._isSplit) {
+ node._next = j = node.nextSibling;
+ node.parentNode.appendChild(node); //put it at the end to keep the order correct.
+
+ while (j && j.nodeType === 3 && j.textContent === " ") {
+ // if there are nodes that are just a space right afterward, go ahead and append them to the end so they're not out of order.
+ node._next = j.nextSibling;
+ node.parentNode.appendChild(j);
+ j = j.nextSibling;
+ }
+ } else if (node.parentNode._isSplit) {
+ node._parent = node.parentNode;
+
+ if (!node.previousSibling && node.firstChild) {
+ node.firstChild._isFirst = true;
+ }
+
+ if (node.nextSibling && node.nextSibling.textContent === " " && !node.nextSibling.nextSibling) {
+ //if the last node inside a nested element is just a space (like T
nested ), remove it otherwise it'll get placed in the wrong order. Don't remove it right away, though, because we need to sense when words/characters are before a space like _isBeforeWordDelimiter(). Removing it now would make that a false negative.
+ spaceNodesToRemove.push(node.nextSibling);
+ }
+
+ node._next = node.nextSibling && node.nextSibling._isFirst ? null : node.nextSibling;
+ node.parentNode.removeChild(node);
+ nodes.splice(i--, 1);
+ l--;
+ } else if (!isChild) {
+ offset = !node.nextSibling && _isBeforeWordDelimiter(node.parentNode, element, wordDelimiter); //if this is the last letter in the word (and we're not breaking by lines and not positioning things absolutely), we need to add a space afterwards so that the characters don't just mash together
+
+ node.parentNode._parent && node.parentNode._parent.appendChild(node);
+ offset && node.parentNode.appendChild(_doc.createTextNode(" "));
+
+ if (tag === "span") {
+ node.style.display = "inline"; //so that word breaks are honored properly.
+ }
+
+ charArray.push(node);
+ }
+ } else if (node.parentNode._isSplit && !node._isSplit && node.innerHTML !== "") {
+ wordArray.push(node);
+ } else if (chars && !node._isSplit) {
+ if (tag === "span") {
+ node.style.display = "inline";
+ }
+
+ charArray.push(node);
+ }
+ }
+
+ i = spaceNodesToRemove.length;
+
+ while (--i > -1) {
+ spaceNodesToRemove[i].parentNode.removeChild(spaceNodesToRemove[i]);
+ }
+
+ if (lines) {
+ //the next 7 lines just give us the line width in the most reliable way and figure out the left offset (if position isn't relative or absolute). We must set the width along with text-align to ensure everything works properly for various alignments.
+ if (absolute) {
+ lineNode = _doc.createElement(tag);
+ element.appendChild(lineNode);
+ lineWidth = lineNode.offsetWidth + "px";
+ offset = lineNode.offsetParent === element ? 0 : element.offsetLeft;
+ element.removeChild(lineNode);
+ }
+
+ style = element.style.cssText;
+ element.style.cssText = "display:none;"; //to improve performance, set display:none on the element so that the browser doesn't have to worry about reflowing or rendering while we're renesting things. We'll revert the cssText later.
+ //we can't use element.innerHTML = "" because that causes IE to literally delete all the nodes and their content even though we've stored them in an array! So we must loop through the children and remove them.
+
+ while (element.firstChild) {
+ element.removeChild(element.firstChild);
+ }
+
+ addWordSpaces = wordDelimiter === " " && (!absolute || !words && !chars);
+
+ for (i = 0; i < lines.length; i++) {
+ curLine = lines[i];
+ lineNode = _doc.createElement(tag);
+ lineNode.style.cssText = "display:block;text-align:" + textAlign + ";position:" + (absolute ? "absolute;" : "relative;");
+
+ if (linesClass) {
+ lineNode.className = linesClass + (iterateLine ? i + 1 : "");
+ }
+
+ lineArray.push(lineNode);
+ l = curLine.length;
+
+ for (j = 0; j < l; j++) {
+ if (curLine[j].nodeName !== "BR") {
+ node = curLine[j];
+ lineNode.appendChild(node);
+ addWordSpaces && node._wordEnd && lineNode.appendChild(_doc.createTextNode(" "));
+
+ if (absolute) {
+ if (j === 0) {
+ lineNode.style.top = node._y + "px";
+ lineNode.style.left = paddingLeft + offset + "px";
+ }
+
+ node.style.top = "0px";
+
+ if (offset) {
+ node.style.left = node._x - offset + "px";
+ }
+ }
+ }
+ }
+
+ if (l === 0) {
+ //if there are no nodes in the line (typically meaning there were two consecutive
tags, just add a non-breaking space so that things display properly.
+ lineNode.innerHTML = " ";
+ } else if (!words && !chars) {
+ _deWordify(lineNode);
+
+ _swapText(lineNode, String.fromCharCode(160), " ");
+ }
+
+ if (absolute) {
+ lineNode.style.width = lineWidth;
+ lineNode.style.height = node._h + "px";
+ }
+
+ element.appendChild(lineNode);
+ }
+
+ element.style.cssText = style;
+ } //if everything shifts to being position:absolute, the container can collapse in terms of height or width, so fix that here.
+
+
+ if (absolute) {
+ if (origHeight > element.clientHeight) {
+ element.style.height = origHeight - padTopAndBottom + "px";
+
+ if (element.clientHeight < origHeight) {
+ //IE8 and earlier use a different box model - we must include padding and borders
+ element.style.height = origHeight + borderTopAndBottom + "px";
+ }
+ }
+
+ if (origWidth > element.clientWidth) {
+ element.style.width = origWidth - padLeftAndRight + "px";
+
+ if (element.clientWidth < origWidth) {
+ //IE8 and earlier use a different box model - we must include padding and borders
+ element.style.width = origWidth + borderLeftAndRight + "px";
+ }
+ }
+ }
+
+ isFlex && (prevInlineDisplay ? element.style.display = prevInlineDisplay : element.style.removeProperty("display"));
+
+ _pushReversed(allChars, charArray);
+
+ words && _pushReversed(allWords, wordArray);
+
+ _pushReversed(allLines, lineArray);
+},
+ _splitRawText = function _splitRawText(element, vars, wordStart, charStart) {
+ var tag = vars.tag ? vars.tag : vars.span ? "span" : "div",
+ types = vars.type || vars.split || "chars,words,lines",
+ //words = (types.indexOf("words") !== -1),
+ chars = ~types.indexOf("chars"),
+ absolute = _isAbsolute(vars),
+ wordDelimiter = vars.wordDelimiter || " ",
+ space = wordDelimiter !== " " ? "" : absolute ? " " : " ",
+ wordEnd = "",
+ wordIsOpen = 1,
+ specialChars = vars.specialChars ? typeof vars.specialChars === "function" ? vars.specialChars : _findSpecialChars : null,
+ //specialChars can be an array or a function. For performance reasons, we always set this local "specialChars" to a function to which we pass the remaining text and whatever the original vars.specialChars was so that if it's an array, it works with the _findSpecialChars() function.
+ text,
+ splitText,
+ i,
+ j,
+ l,
+ character,
+ hasTagStart,
+ testResult,
+ container = _doc.createElement("div"),
+ parent = element.parentNode;
+
+ parent.insertBefore(container, element);
+ container.textContent = element.nodeValue;
+ parent.removeChild(element);
+ element = container;
+ text = getText(element);
+ hasTagStart = text.indexOf("<") !== -1;
+
+ if (vars.reduceWhiteSpace !== false) {
+ text = text.replace(_multipleSpacesExp, " ").replace(_stripExp, "");
+ }
+
+ if (hasTagStart) {
+ text = text.split("<").join("{{LT}}"); //we can't leave "<" in the string, or when we set the innerHTML, it can be interpreted as a node
+ }
+
+ l = text.length;
+ splitText = (text.charAt(0) === " " ? space : "") + wordStart();
+
+ for (i = 0; i < l; i++) {
+ character = text.charAt(i);
+
+ if (specialChars && (testResult = specialChars(text.substr(i), vars.specialChars))) {
+ // look for any specialChars that were declared. Remember, they can be passed in like {specialChars:["मी", "पा", "है"]} or a function could be defined instead. Either way, the function should return the number of characters that should be grouped together for this "character".
+ character = text.substr(i, testResult || 1);
+ splitText += chars && character !== " " ? charStart() + character + "" : character;
+ i += testResult - 1;
+ } else if (character === wordDelimiter && text.charAt(i - 1) !== wordDelimiter && i) {
+ splitText += wordIsOpen ? wordEnd : "";
+ wordIsOpen = 0;
+
+ while (text.charAt(i + 1) === wordDelimiter) {
+ //skip over empty spaces (to avoid making them words)
+ splitText += space;
+ i++;
+ }
+
+ if (i === l - 1) {
+ splitText += space;
+ } else if (text.charAt(i + 1) !== ")") {
+ splitText += space + wordStart();
+ wordIsOpen = 1;
+ }
+ } else if (character === "{" && text.substr(i, 6) === "{{LT}}") {
+ splitText += chars ? charStart() + "{{LT}}" + "" : "{{LT}}";
+ i += 5;
+ } else if (character.charCodeAt(0) >= 0xD800 && character.charCodeAt(0) <= 0xDBFF || text.charCodeAt(i + 1) >= 0xFE00 && text.charCodeAt(i + 1) <= 0xFE0F) {
+ //special emoji characters use 2 or 4 unicode characters that we must keep together.
+ j = ((text.substr(i, 12).split(emojiExp) || [])[1] || "").length || 2;
+ splitText += chars && character !== " " ? charStart() + text.substr(i, j) + "" : text.substr(i, j);
+ i += j - 1;
+ } else {
+ splitText += chars && character !== " " ? charStart() + character + "" : character;
+ }
+ }
+
+ element.outerHTML = splitText + (wordIsOpen ? wordEnd : "");
+ hasTagStart && _swapText(parent, "{{LT}}", "<"); //note: don't perform this on "element" because that gets replaced with all new elements when we set element.outerHTML.
+},
+ _split = function _split(element, vars, wordStart, charStart) {
+ var children = _toArray(element.childNodes),
+ l = children.length,
+ absolute = _isAbsolute(vars),
+ i,
+ child;
+
+ if (element.nodeType !== 3 || l > 1) {
+ vars.absolute = false;
+
+ for (i = 0; i < l; i++) {
+ child = children[i];
+ child._next = child._isFirst = child._parent = child._wordEnd = null;
+
+ if (child.nodeType !== 3 || /\S+/.test(child.nodeValue)) {
+ if (absolute && child.nodeType !== 3 && _getComputedStyle(child).display === "inline") {
+ //if there's a child node that's display:inline, switch it to inline-block so that absolute positioning works properly (most browsers don't report offsetTop/offsetLeft properly inside a
for example)
+ child.style.display = "inline-block";
+ child.style.position = "relative";
+ }
+
+ child._isSplit = true;
+
+ _split(child, vars, wordStart, charStart); //don't split lines on child elements
+
+ }
+ }
+
+ vars.absolute = absolute;
+ element._isSplit = true;
+ return;
+ }
+
+ _splitRawText(element, vars, wordStart, charStart);
+};
+
+export var SplitText = /*#__PURE__*/function () {
+ function SplitText(element, vars) {
+ _coreInitted || _initCore();
+ this.elements = _toArray(element);
+ this.chars = [];
+ this.words = [];
+ this.lines = [];
+ this._originals = [];
+ this.vars = vars || {};
+ _bonusValidated && this.split(vars);
+ }
+
+ var _proto = SplitText.prototype;
+
+ _proto.split = function split(vars) {
+ this.isSplit && this.revert();
+ this.vars = vars = vars || this.vars;
+ this._originals.length = this.chars.length = this.words.length = this.lines.length = 0;
+
+ var i = this.elements.length,
+ tag = vars.tag ? vars.tag : vars.span ? "span" : "div",
+ wordStart = _cssClassFunc(vars.wordsClass, tag),
+ charStart = _cssClassFunc(vars.charsClass, tag),
+ origHeight,
+ origWidth,
+ e; //we split in reversed order so that if/when we position:absolute elements, they don't affect the position of the ones after them in the document flow (shifting them up as they're taken out of the document flow).
+
+
+ while (--i > -1) {
+ e = this.elements[i];
+ this._originals[i] = e.innerHTML;
+ origHeight = e.clientHeight;
+ origWidth = e.clientWidth;
+
+ _split(e, vars, wordStart, charStart);
+
+ _setPositionsAfterSplit(e, vars, this.chars, this.words, this.lines, origWidth, origHeight);
+ }
+
+ this.chars.reverse();
+ this.words.reverse();
+ this.lines.reverse();
+ this.isSplit = true;
+ return this;
+ };
+
+ _proto.revert = function revert() {
+ var originals = this._originals;
+
+ if (!originals) {
+ throw "revert() call wasn't scoped properly.";
+ }
+
+ this.elements.forEach(function (e, i) {
+ return e.innerHTML = originals[i];
+ });
+ this.chars = [];
+ this.words = [];
+ this.lines = [];
+ this.isSplit = false;
+ return this;
+ };
+
+ SplitText.create = function create(element, vars) {
+ return new SplitText(element, vars);
+ };
+
+ return SplitText;
+}();
+SplitText.version = "3.11.0";
+export { SplitText as default };
\ No newline at end of file
diff --git a/dist/lib/greensock/TextPlugin.js b/dist/lib/greensock/TextPlugin.js
new file mode 100644
index 00000000..4f24411d
--- /dev/null
+++ b/dist/lib/greensock/TextPlugin.js
@@ -0,0 +1,166 @@
+/*!
+ * TextPlugin 3.11.0
+ * https://greensock.com
+ *
+ * @license Copyright 2008-2022, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+import { emojiSafeSplit, getText, splitInnerHTML } from "./utils/strings.js";
+
+var gsap,
+ _tempDiv,
+ _getGSAP = function _getGSAP() {
+ return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap;
+};
+
+export var TextPlugin = {
+ version: "3.11.0",
+ name: "text",
+ init: function init(target, value, tween) {
+ typeof value !== "object" && (value = {
+ value: value
+ });
+
+ var i = target.nodeName.toUpperCase(),
+ data = this,
+ _value = value,
+ newClass = _value.newClass,
+ oldClass = _value.oldClass,
+ preserveSpaces = _value.preserveSpaces,
+ rtl = _value.rtl,
+ delimiter = data.delimiter = value.delimiter || "",
+ fillChar = data.fillChar = value.fillChar || (value.padSpace ? " " : ""),
+ _short,
+ text,
+ original,
+ j,
+ condensedText,
+ condensedOriginal,
+ aggregate,
+ s;
+
+ data.svg = target.getBBox && (i === "TEXT" || i === "TSPAN");
+
+ if (!("innerHTML" in target) && !data.svg) {
+ return false;
+ }
+
+ data.target = target;
+
+ if (!("value" in value)) {
+ data.text = data.original = [""];
+ return;
+ }
+
+ original = splitInnerHTML(target, delimiter, false, preserveSpaces);
+ _tempDiv || (_tempDiv = document.createElement("div"));
+ _tempDiv.innerHTML = value.value;
+ text = splitInnerHTML(_tempDiv, delimiter, false, preserveSpaces);
+ data.from = tween._from;
+
+ if ((data.from || rtl) && !(rtl && data.from)) {
+ // right-to-left or "from()" tweens should invert things (but if it's BOTH .from() and rtl, inverting twice equals not inverting at all :)
+ i = original;
+ original = text;
+ text = i;
+ }
+
+ data.hasClass = !!(newClass || oldClass);
+ data.newClass = rtl ? oldClass : newClass;
+ data.oldClass = rtl ? newClass : oldClass;
+ i = original.length - text.length;
+ _short = i < 0 ? original : text;
+
+ if (i < 0) {
+ i = -i;
+ }
+
+ while (--i > -1) {
+ _short.push(fillChar);
+ }
+
+ if (value.type === "diff") {
+ j = 0;
+ condensedText = [];
+ condensedOriginal = [];
+ aggregate = "";
+
+ for (i = 0; i < text.length; i++) {
+ s = text[i];
+
+ if (s === original[i]) {
+ aggregate += s;
+ } else {
+ condensedText[j] = aggregate + s;
+ condensedOriginal[j++] = aggregate + original[i];
+ aggregate = "";
+ }
+ }
+
+ text = condensedText;
+ original = condensedOriginal;
+
+ if (aggregate) {
+ text.push(aggregate);
+ original.push(aggregate);
+ }
+ }
+
+ value.speed && tween.duration(Math.min(0.05 / value.speed * _short.length, value.maxDuration || 9999));
+ data.rtl = rtl;
+ data.original = original;
+ data.text = text;
+
+ data._props.push("text");
+ },
+ render: function render(ratio, data) {
+ if (ratio > 1) {
+ ratio = 1;
+ } else if (ratio < 0) {
+ ratio = 0;
+ }
+
+ if (data.from) {
+ ratio = 1 - ratio;
+ }
+
+ var text = data.text,
+ hasClass = data.hasClass,
+ newClass = data.newClass,
+ oldClass = data.oldClass,
+ delimiter = data.delimiter,
+ target = data.target,
+ fillChar = data.fillChar,
+ original = data.original,
+ rtl = data.rtl,
+ l = text.length,
+ i = (rtl ? 1 - ratio : ratio) * l + 0.5 | 0,
+ applyNew,
+ applyOld,
+ str;
+
+ if (hasClass && ratio) {
+ applyNew = newClass && i;
+ applyOld = oldClass && i !== l;
+ str = (applyNew ? "" : "") + text.slice(0, i).join(delimiter) + (applyNew ? "" : "") + (applyOld ? "" : "") + delimiter + original.slice(i).join(delimiter) + (applyOld ? "" : "");
+ } else {
+ str = text.slice(0, i).join(delimiter) + delimiter + original.slice(i).join(delimiter);
+ }
+
+ if (data.svg) {
+ //SVG text elements don't have an "innerHTML" in Microsoft browsers.
+ target.textContent = str;
+ } else {
+ target.innerHTML = fillChar === " " && ~str.indexOf(" ") ? str.split(" ").join(" ") : str;
+ }
+ }
+};
+TextPlugin.splitInnerHTML = splitInnerHTML;
+TextPlugin.emojiSafeSplit = emojiSafeSplit;
+TextPlugin.getText = getText;
+_getGSAP() && gsap.registerPlugin(TextPlugin);
+export { TextPlugin as default };
\ No newline at end of file
diff --git a/dist/lib/greensock/all.js b/dist/lib/greensock/all.js
new file mode 100644
index 00000000..8abb429b
--- /dev/null
+++ b/dist/lib/greensock/all.js
@@ -0,0 +1,32 @@
+import gsap from "./gsap-core.js";
+import CSSPlugin from "./CSSPlugin.js";
+var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap,
+ // to protect from tree shaking
+TweenMaxWithCSS = gsapWithCSS.core.Tween;
+export { gsapWithCSS as gsap, gsapWithCSS as default, TweenMaxWithCSS as TweenMax, CSSPlugin };
+export { TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, mapRange, pipe, unitize, interpolate, shuffle, selector } from "./gsap-core.js";
+export * from "./CustomEase.js";
+export * from "./Draggable.js";
+export * from "./CSSRulePlugin.js";
+export * from "./EaselPlugin.js";
+export * from "./EasePack.js";
+export * from "./Flip.js";
+export * from "./MotionPathPlugin.js";
+export * from "./Observer.js";
+export * from "./PixiPlugin.js";
+export * from "./ScrollToPlugin.js";
+export * from "./ScrollTrigger.js";
+export * from "./TextPlugin.js"; //BONUS EXPORTS
+
+export * from "./DrawSVGPlugin.js";
+export * from "./Physics2DPlugin.js";
+export * from "./PhysicsPropsPlugin.js";
+export * from "./ScrambleTextPlugin.js";
+export * from "./CustomBounce.js";
+export * from "./CustomWiggle.js";
+export * from "./GSDevTools.js";
+export * from "./InertiaPlugin.js";
+export * from "./MorphSVGPlugin.js";
+export * from "./MotionPathHelper.js";
+export * from "./ScrollSmoother.js";
+export * from "./SplitText.js";
\ No newline at end of file
diff --git a/dist/lib/greensock/gsap-core.js b/dist/lib/greensock/gsap-core.js
new file mode 100644
index 00000000..9376298f
--- /dev/null
+++ b/dist/lib/greensock/gsap-core.js
@@ -0,0 +1,4407 @@
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+/*!
+ * GSAP 3.11.0
+ * https://greensock.com
+ *
+ * @license Copyright 2008-2022, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var _config = {
+ autoSleep: 120,
+ force3D: "auto",
+ nullTargetWarn: 1,
+ units: {
+ lineHeight: ""
+ }
+},
+ _defaults = {
+ duration: .5,
+ overwrite: false,
+ delay: 0
+},
+ _suppressOverwrites,
+ _reverting,
+ _context,
+ _bigNum = 1e8,
+ _tinyNum = 1 / _bigNum,
+ _2PI = Math.PI * 2,
+ _HALF_PI = _2PI / 4,
+ _gsID = 0,
+ _sqrt = Math.sqrt,
+ _cos = Math.cos,
+ _sin = Math.sin,
+ _isString = function _isString(value) {
+ return typeof value === "string";
+},
+ _isFunction = function _isFunction(value) {
+ return typeof value === "function";
+},
+ _isNumber = function _isNumber(value) {
+ return typeof value === "number";
+},
+ _isUndefined = function _isUndefined(value) {
+ return typeof value === "undefined";
+},
+ _isObject = function _isObject(value) {
+ return typeof value === "object";
+},
+ _isNotFalse = function _isNotFalse(value) {
+ return value !== false;
+},
+ _windowExists = function _windowExists() {
+ return typeof window !== "undefined";
+},
+ _isFuncOrString = function _isFuncOrString(value) {
+ return _isFunction(value) || _isString(value);
+},
+ _isTypedArray = typeof ArrayBuffer === "function" && ArrayBuffer.isView || function () {},
+ // note: IE10 has ArrayBuffer, but NOT ArrayBuffer.isView().
+_isArray = Array.isArray,
+ _strictNumExp = /(?:-?\.?\d|\.)+/gi,
+ //only numbers (including negatives and decimals) but NOT relative values.
+_numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,
+ //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.
+_numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g,
+ _complexStringNumExp = /[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,
+ //duplicate so that while we're looping through matches from exec(), it doesn't contaminate the lastIndex of _numExp which we use to search for colors too.
+_relExp = /[+-]=-?[.\d]+/,
+ _delimitedValueExp = /[^,'"\[\]\s]+/gi,
+ // previously /[#\-+.]*\b[a-z\d\-=+%.]+/gi but didn't catch special characters.
+_unitExp = /^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,
+ _globalTimeline,
+ _win,
+ _coreInitted,
+ _doc,
+ _globals = {},
+ _installScope = {},
+ _coreReady,
+ _install = function _install(scope) {
+ return (_installScope = _merge(scope, _globals)) && gsap;
+},
+ _missingPlugin = function _missingPlugin(property, value) {
+ return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
+},
+ _warn = function _warn(message, suppress) {
+ return !suppress && console.warn(message);
+},
+ _addGlobal = function _addGlobal(name, obj) {
+ return name && (_globals[name] = obj) && _installScope && (_installScope[name] = obj) || _globals;
+},
+ _emptyFunc = function _emptyFunc() {
+ return 0;
+},
+ _startAtRevertConfig = {
+ suppressEvents: true,
+ isStart: true
+},
+ _revertConfig = {
+ suppressEvents: true
+},
+ _reservedProps = {},
+ _lazyTweens = [],
+ _lazyLookup = {},
+ _lastRenderedFrame,
+ _plugins = {},
+ _effects = {},
+ _nextGCFrame = 30,
+ _harnessPlugins = [],
+ _callbackNames = "",
+ _harness = function _harness(targets) {
+ var target = targets[0],
+ harnessPlugin,
+ i;
+ _isObject(target) || _isFunction(target) || (targets = [targets]);
+
+ if (!(harnessPlugin = (target._gsap || {}).harness)) {
+ // find the first target with a harness. We assume targets passed into an animation will be of similar type, meaning the same kind of harness can be used for them all (performance optimization)
+ i = _harnessPlugins.length;
+
+ while (i-- && !_harnessPlugins[i].targetTest(target)) {}
+
+ harnessPlugin = _harnessPlugins[i];
+ }
+
+ i = targets.length;
+
+ while (i--) {
+ targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin))) || targets.splice(i, 1);
+ }
+
+ return targets;
+},
+ _getCache = function _getCache(target) {
+ return target._gsap || _harness(toArray(target))[0]._gsap;
+},
+ _getProperty = function _getProperty(target, property, v) {
+ return (v = target[property]) && _isFunction(v) ? target[property]() : _isUndefined(v) && target.getAttribute && target.getAttribute(property) || v;
+},
+ _forEachName = function _forEachName(names, func) {
+ return (names = names.split(",")).forEach(func) || names;
+},
+ //split a comma-delimited list of names into an array, then run a forEach() function and return the split array (this is just a way to consolidate/shorten some code).
+_round = function _round(value) {
+ return Math.round(value * 100000) / 100000 || 0;
+},
+ _roundPrecise = function _roundPrecise(value) {
+ return Math.round(value * 10000000) / 10000000 || 0;
+},
+ // increased precision mostly for timing values.
+_parseRelative = function _parseRelative(start, value) {
+ var operator = value.charAt(0),
+ end = parseFloat(value.substr(2));
+ start = parseFloat(start);
+ return operator === "+" ? start + end : operator === "-" ? start - end : operator === "*" ? start * end : start / end;
+},
+ _arrayContainsAny = function _arrayContainsAny(toSearch, toFind) {
+ //searches one array to find matches for any of the items in the toFind array. As soon as one is found, it returns true. It does NOT return all the matches; it's simply a boolean search.
+ var l = toFind.length,
+ i = 0;
+
+ for (; toSearch.indexOf(toFind[i]) < 0 && ++i < l;) {}
+
+ return i < l;
+},
+ _lazyRender = function _lazyRender() {
+ var l = _lazyTweens.length,
+ a = _lazyTweens.slice(0),
+ i,
+ tween;
+
+ _lazyLookup = {};
+ _lazyTweens.length = 0;
+
+ for (i = 0; i < l; i++) {
+ tween = a[i];
+ tween && tween._lazy && (tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0);
+ }
+},
+ _lazySafeRender = function _lazySafeRender(animation, time, suppressEvents, force) {
+ _lazyTweens.length && _lazyRender();
+ animation.render(time, suppressEvents, force || _reverting);
+ _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.
+},
+ _numericIfPossible = function _numericIfPossible(value) {
+ var n = parseFloat(value);
+ return (n || n === 0) && (value + "").match(_delimitedValueExp).length < 2 ? n : _isString(value) ? value.trim() : value;
+},
+ _passThrough = function _passThrough(p) {
+ return p;
+},
+ _setDefaults = function _setDefaults(obj, defaults) {
+ for (var p in defaults) {
+ p in obj || (obj[p] = defaults[p]);
+ }
+
+ return obj;
+},
+ _setKeyframeDefaults = function _setKeyframeDefaults(excludeDuration) {
+ return function (obj, defaults) {
+ for (var p in defaults) {
+ p in obj || p === "duration" && excludeDuration || p === "ease" || (obj[p] = defaults[p]);
+ }
+ };
+},
+ _merge = function _merge(base, toMerge) {
+ for (var p in toMerge) {
+ base[p] = toMerge[p];
+ }
+
+ return base;
+},
+ _mergeDeep = function _mergeDeep(base, toMerge) {
+ for (var p in toMerge) {
+ p !== "__proto__" && p !== "constructor" && p !== "prototype" && (base[p] = _isObject(toMerge[p]) ? _mergeDeep(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p]);
+ }
+
+ return base;
+},
+ _copyExcluding = function _copyExcluding(obj, excluding) {
+ var copy = {},
+ p;
+
+ for (p in obj) {
+ p in excluding || (copy[p] = obj[p]);
+ }
+
+ return copy;
+},
+ _inheritDefaults = function _inheritDefaults(vars) {
+ var parent = vars.parent || _globalTimeline,
+ func = vars.keyframes ? _setKeyframeDefaults(_isArray(vars.keyframes)) : _setDefaults;
+
+ if (_isNotFalse(vars.inherit)) {
+ while (parent) {
+ func(vars, parent.vars.defaults);
+ parent = parent.parent || parent._dp;
+ }
+ }
+
+ return vars;
+},
+ _arraysMatch = function _arraysMatch(a1, a2) {
+ var i = a1.length,
+ match = i === a2.length;
+
+ while (match && i-- && a1[i] === a2[i]) {}
+
+ return i < 0;
+},
+ _addLinkedListItem = function _addLinkedListItem(parent, child, firstProp, lastProp, sortBy) {
+ if (firstProp === void 0) {
+ firstProp = "_first";
+ }
+
+ if (lastProp === void 0) {
+ lastProp = "_last";
+ }
+
+ var prev = parent[lastProp],
+ t;
+
+ if (sortBy) {
+ t = child[sortBy];
+
+ while (prev && prev[sortBy] > t) {
+ prev = prev._prev;
+ }
+ }
+
+ if (prev) {
+ child._next = prev._next;
+ prev._next = child;
+ } else {
+ child._next = parent[firstProp];
+ parent[firstProp] = child;
+ }
+
+ if (child._next) {
+ child._next._prev = child;
+ } else {
+ parent[lastProp] = child;
+ }
+
+ child._prev = prev;
+ child.parent = child._dp = parent;
+ return child;
+},
+ _removeLinkedListItem = function _removeLinkedListItem(parent, child, firstProp, lastProp) {
+ if (firstProp === void 0) {
+ firstProp = "_first";
+ }
+
+ if (lastProp === void 0) {
+ lastProp = "_last";
+ }
+
+ var prev = child._prev,
+ next = child._next;
+
+ if (prev) {
+ prev._next = next;
+ } else if (parent[firstProp] === child) {
+ parent[firstProp] = next;
+ }
+
+ if (next) {
+ next._prev = prev;
+ } else if (parent[lastProp] === child) {
+ parent[lastProp] = prev;
+ }
+
+ child._next = child._prev = child.parent = null; // don't delete the _dp just so we can revert if necessary. But parent should be null to indicate the item isn't in a linked list.
+},
+ _removeFromParent = function _removeFromParent(child, onlyIfParentHasAutoRemove) {
+ child.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren) && child.parent.remove(child);
+ child._act = 0;
+},
+ _uncache = function _uncache(animation, child) {
+ if (animation && (!child || child._end > animation._dur || child._start < 0)) {
+ // performance optimization: if a child animation is passed in we should only uncache if that child EXTENDS the animation (its end time is beyond the end)
+ var a = animation;
+
+ while (a) {
+ a._dirty = 1;
+ a = a.parent;
+ }
+ }
+
+ return animation;
+},
+ _recacheAncestors = function _recacheAncestors(animation) {
+ var parent = animation.parent;
+
+ while (parent && parent.parent) {
+ //sometimes we must force a re-sort of all children and update the duration/totalDuration of all ancestor timelines immediately in case, for example, in the middle of a render loop, one tween alters another tween's timeScale which shoves its startTime before 0, forcing the parent timeline to shift around and shiftChildren() which could affect that next tween's render (startTime). Doesn't matter for the root timeline though.
+ parent._dirty = 1;
+ parent.totalDuration();
+ parent = parent.parent;
+ }
+
+ return animation;
+},
+ _rewindStartAt = function _rewindStartAt(tween, totalTime, suppressEvents, force) {
+ return tween._startAt && (_reverting ? tween._startAt.revert(_revertConfig) : tween.vars.immediateRender && !tween.vars.autoRevert || tween._startAt.render(totalTime, true, force));
+},
+ _hasNoPausedAncestors = function _hasNoPausedAncestors(animation) {
+ return !animation || animation._ts && _hasNoPausedAncestors(animation.parent);
+},
+ _elapsedCycleDuration = function _elapsedCycleDuration(animation) {
+ return animation._repeat ? _animationCycle(animation._tTime, animation = animation.duration() + animation._rDelay) * animation : 0;
+},
+ // feed in the totalTime and cycleDuration and it'll return the cycle (iteration minus 1) and if the playhead is exactly at the very END, it will NOT bump up to the next cycle.
+_animationCycle = function _animationCycle(tTime, cycleDuration) {
+ var whole = Math.floor(tTime /= cycleDuration);
+ return tTime && whole === tTime ? whole - 1 : whole;
+},
+ _parentToChildTotalTime = function _parentToChildTotalTime(parentTime, child) {
+ return (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : child._dirty ? child.totalDuration() : child._tDur);
+},
+ _setEnd = function _setEnd(animation) {
+ return animation._end = _roundPrecise(animation._start + (animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum) || 0));
+},
+ _alignPlayhead = function _alignPlayhead(animation, totalTime) {
+ // adjusts the animation's _start and _end according to the provided totalTime (only if the parent's smoothChildTiming is true and the animation isn't paused). It doesn't do any rendering or forcing things back into parent timelines, etc. - that's what totalTime() is for.
+ var parent = animation._dp;
+
+ if (parent && parent.smoothChildTiming && animation._ts) {
+ animation._start = _roundPrecise(parent._time - (animation._ts > 0 ? totalTime / animation._ts : ((animation._dirty ? animation.totalDuration() : animation._tDur) - totalTime) / -animation._ts));
+
+ _setEnd(animation);
+
+ parent._dirty || _uncache(parent, animation); //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.
+ }
+
+ return animation;
+},
+
+/*
+_totalTimeToTime = (clampedTotalTime, duration, repeat, repeatDelay, yoyo) => {
+ let cycleDuration = duration + repeatDelay,
+ time = _round(clampedTotalTime % cycleDuration);
+ if (time > duration) {
+ time = duration;
+ }
+ return (yoyo && (~~(clampedTotalTime / cycleDuration) & 1)) ? duration - time : time;
+},
+*/
+_postAddChecks = function _postAddChecks(timeline, child) {
+ var t;
+
+ if (child._time || child._initted && !child._dur) {
+ //in case, for example, the _start is moved on a tween that has already rendered. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning.
+ t = _parentToChildTotalTime(timeline.rawTime(), child);
+
+ if (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {
+ child.render(t, true);
+ }
+ } //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.
+
+
+ if (_uncache(timeline, child)._dp && timeline._initted && timeline._time >= timeline._dur && timeline._ts) {
+ //in case any of the ancestors had completed but should now be enabled...
+ if (timeline._dur < timeline.duration()) {
+ t = timeline;
+
+ while (t._dp) {
+ t.rawTime() >= 0 && t.totalTime(t._tTime); //moves the timeline (shifts its startTime) if necessary, and also enables it. If it's currently zero, though, it may not be scheduled to render until later so there's no need to force it to align with the current playhead position. Only move to catch up with the playhead.
+
+ t = t._dp;
+ }
+ }
+
+ timeline._zTime = -_tinyNum; // helps ensure that the next render() will be forced (crossingStart = true in render()), even if the duration hasn't changed (we're adding a child which would need to get rendered). Definitely an edge case. Note: we MUST do this AFTER the loop above where the totalTime() might trigger a render() because this _addToTimeline() method gets called from the Animation constructor, BEFORE tweens even record their targets, etc. so we wouldn't want things to get triggered in the wrong order.
+ }
+},
+ _addToTimeline = function _addToTimeline(timeline, child, position, skipChecks) {
+ child.parent && _removeFromParent(child);
+ child._start = _roundPrecise((_isNumber(position) ? position : position || timeline !== _globalTimeline ? _parsePosition(timeline, position, child) : timeline._time) + child._delay);
+ child._end = _roundPrecise(child._start + (child.totalDuration() / Math.abs(child.timeScale()) || 0));
+
+ _addLinkedListItem(timeline, child, "_first", "_last", timeline._sort ? "_start" : 0);
+
+ _isFromOrFromStart(child) || (timeline._recent = child);
+ skipChecks || _postAddChecks(timeline, child);
+ timeline._ts < 0 && _alignPlayhead(timeline, timeline._tTime); // if the timeline is reversed and the new child makes it longer, we may need to adjust the parent's _start (push it back)
+
+ return timeline;
+},
+ _scrollTrigger = function _scrollTrigger(animation, trigger) {
+ return (_globals.ScrollTrigger || _missingPlugin("scrollTrigger", trigger)) && _globals.ScrollTrigger.create(trigger, animation);
+},
+ _attemptInitTween = function _attemptInitTween(tween, totalTime, force, suppressEvents) {
+ _initTween(tween, totalTime);
+
+ if (!tween._initted) {
+ return 1;
+ }
+
+ if (!force && tween._pt && (tween._dur && tween.vars.lazy !== false || !tween._dur && tween.vars.lazy) && _lastRenderedFrame !== _ticker.frame) {
+ _lazyTweens.push(tween);
+
+ tween._lazy = [totalTime, suppressEvents];
+ return 1;
+ }
+},
+ _parentPlayheadIsBeforeStart = function _parentPlayheadIsBeforeStart(_ref) {
+ var parent = _ref.parent;
+ return parent && parent._ts && parent._initted && !parent._lock && (parent.rawTime() < 0 || _parentPlayheadIsBeforeStart(parent));
+},
+ // check parent's _lock because when a timeline repeats/yoyos and does its artificial wrapping, we shouldn't force the ratio back to 0
+_isFromOrFromStart = function _isFromOrFromStart(_ref2) {
+ var data = _ref2.data;
+ return data === "isFromStart" || data === "isStart";
+},
+ _renderZeroDurationTween = function _renderZeroDurationTween(tween, totalTime, suppressEvents, force) {
+ var prevRatio = tween.ratio,
+ ratio = totalTime < 0 || !totalTime && (!tween._start && _parentPlayheadIsBeforeStart(tween) && !(!tween._initted && _isFromOrFromStart(tween)) || (tween._ts < 0 || tween._dp._ts < 0) && !_isFromOrFromStart(tween)) ? 0 : 1,
+ // if the tween or its parent is reversed and the totalTime is 0, we should go to a ratio of 0. Edge case: if a from() or fromTo() stagger tween is placed later in a timeline, the "startAt" zero-duration tween could initially render at a time when the parent timeline's playhead is technically BEFORE where this tween is, so make sure that any "from" and "fromTo" startAt tweens are rendered the first time at a ratio of 1.
+ repeatDelay = tween._rDelay,
+ tTime = 0,
+ pt,
+ iteration,
+ prevIteration;
+
+ if (repeatDelay && tween._repeat) {
+ // in case there's a zero-duration tween that has a repeat with a repeatDelay
+ tTime = _clamp(0, tween._tDur, totalTime);
+ iteration = _animationCycle(tTime, repeatDelay);
+ tween._yoyo && iteration & 1 && (ratio = 1 - ratio);
+
+ if (iteration !== _animationCycle(tween._tTime, repeatDelay)) {
+ // if iteration changed
+ prevRatio = 1 - ratio;
+ tween.vars.repeatRefresh && tween._initted && tween.invalidate();
+ }
+ }
+
+ if (ratio !== prevRatio || _reverting || force || tween._zTime === _tinyNum || !totalTime && tween._zTime) {
+ if (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents)) {
+ // if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
+ return;
+ }
+
+ prevIteration = tween._zTime;
+ tween._zTime = totalTime || (suppressEvents ? _tinyNum : 0); // when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+
+ suppressEvents || (suppressEvents = totalTime && !prevIteration); // if it was rendered previously at exactly 0 (_zTime) and now the playhead is moving away, DON'T fire callbacks otherwise they'll seem like duplicates.
+
+ tween.ratio = ratio;
+ tween._from && (ratio = 1 - ratio);
+ tween._time = 0;
+ tween._tTime = tTime;
+ pt = tween._pt;
+
+ while (pt) {
+ pt.r(ratio, pt.d);
+ pt = pt._next;
+ }
+
+ totalTime < 0 && _rewindStartAt(tween, totalTime, suppressEvents, true);
+ tween._onUpdate && !suppressEvents && _callback(tween, "onUpdate");
+ tTime && tween._repeat && !suppressEvents && tween.parent && _callback(tween, "onRepeat");
+
+ if ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {
+ ratio && _removeFromParent(tween, 1);
+
+ if (!suppressEvents) {
+ _callback(tween, ratio ? "onComplete" : "onReverseComplete", true);
+
+ tween._prom && tween._prom();
+ }
+ }
+ } else if (!tween._zTime) {
+ tween._zTime = totalTime;
+ }
+},
+ _findNextPauseTween = function _findNextPauseTween(animation, prevTime, time) {
+ var child;
+
+ if (time > prevTime) {
+ child = animation._first;
+
+ while (child && child._start <= time) {
+ if (child.data === "isPause" && child._start > prevTime) {
+ return child;
+ }
+
+ child = child._next;
+ }
+ } else {
+ child = animation._last;
+
+ while (child && child._start >= time) {
+ if (child.data === "isPause" && child._start < prevTime) {
+ return child;
+ }
+
+ child = child._prev;
+ }
+ }
+},
+ _setDuration = function _setDuration(animation, duration, skipUncache, leavePlayhead) {
+ var repeat = animation._repeat,
+ dur = _roundPrecise(duration) || 0,
+ totalProgress = animation._tTime / animation._tDur;
+ totalProgress && !leavePlayhead && (animation._time *= dur / animation._dur);
+ animation._dur = dur;
+ animation._tDur = !repeat ? dur : repeat < 0 ? 1e10 : _roundPrecise(dur * (repeat + 1) + animation._rDelay * repeat);
+ totalProgress > 0 && !leavePlayhead ? _alignPlayhead(animation, animation._tTime = animation._tDur * totalProgress) : animation.parent && _setEnd(animation);
+ skipUncache || _uncache(animation.parent, animation);
+ return animation;
+},
+ _onUpdateTotalDuration = function _onUpdateTotalDuration(animation) {
+ return animation instanceof Timeline ? _uncache(animation) : _setDuration(animation, animation._dur);
+},
+ _zeroPosition = {
+ _start: 0,
+ endTime: _emptyFunc,
+ totalDuration: _emptyFunc
+},
+ _parsePosition = function _parsePosition(animation, position, percentAnimation) {
+ var labels = animation.labels,
+ recent = animation._recent || _zeroPosition,
+ clippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur,
+ //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.
+ i,
+ offset,
+ isPercent;
+
+ if (_isString(position) && (isNaN(position) || position in labels)) {
+ //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).
+ offset = position.charAt(0);
+ isPercent = position.substr(-1) === "%";
+ i = position.indexOf("=");
+
+ if (offset === "<" || offset === ">") {
+ i >= 0 && (position = position.replace(/=/, ""));
+ return (offset === "<" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0) * (isPercent ? (i < 0 ? recent : percentAnimation).totalDuration() / 100 : 1);
+ }
+
+ if (i < 0) {
+ position in labels || (labels[position] = clippedDuration);
+ return labels[position];
+ }
+
+ offset = parseFloat(position.charAt(i - 1) + position.substr(i + 1));
+
+ if (isPercent && percentAnimation) {
+ offset = offset / 100 * (_isArray(percentAnimation) ? percentAnimation[0] : percentAnimation).totalDuration();
+ }
+
+ return i > 1 ? _parsePosition(animation, position.substr(0, i - 1), percentAnimation) + offset : clippedDuration + offset;
+ }
+
+ return position == null ? clippedDuration : +position;
+},
+ _createTweenType = function _createTweenType(type, params, timeline) {
+ var isLegacy = _isNumber(params[1]),
+ varsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1),
+ vars = params[varsIndex],
+ irVars,
+ parent;
+
+ isLegacy && (vars.duration = params[1]);
+ vars.parent = timeline;
+
+ if (type) {
+ irVars = vars;
+ parent = timeline;
+
+ while (parent && !("immediateRender" in irVars)) {
+ // inheritance hasn't happened yet, but someone may have set a default in an ancestor timeline. We could do vars.immediateRender = _isNotFalse(_inheritDefaults(vars).immediateRender) but that'd exact a slight performance penalty because _inheritDefaults() also runs in the Tween constructor. We're paying a small kb price here to gain speed.
+ irVars = parent.vars.defaults || {};
+ parent = _isNotFalse(parent.vars.inherit) && parent.parent;
+ }
+
+ vars.immediateRender = _isNotFalse(irVars.immediateRender);
+ type < 2 ? vars.runBackwards = 1 : vars.startAt = params[varsIndex - 1]; // "from" vars
+ }
+
+ return new Tween(params[0], vars, params[varsIndex + 1]);
+},
+ _conditionalReturn = function _conditionalReturn(value, func) {
+ return value || value === 0 ? func(value) : func;
+},
+ _clamp = function _clamp(min, max, value) {
+ return value < min ? min : value > max ? max : value;
+},
+ getUnit = function getUnit(value, v) {
+ return !_isString(value) || !(v = _unitExp.exec(value)) ? "" : v[1];
+},
+ // note: protect against padded numbers as strings, like "100.100". That shouldn't return "00" as the unit. If it's numeric, return no unit.
+clamp = function clamp(min, max, value) {
+ return _conditionalReturn(value, function (v) {
+ return _clamp(min, max, v);
+ });
+},
+ _slice = [].slice,
+ _isArrayLike = function _isArrayLike(value, nonEmpty) {
+ return value && _isObject(value) && "length" in value && (!nonEmpty && !value.length || value.length - 1 in value && _isObject(value[0])) && !value.nodeType && value !== _win;
+},
+ _flatten = function _flatten(ar, leaveStrings, accumulator) {
+ if (accumulator === void 0) {
+ accumulator = [];
+ }
+
+ return ar.forEach(function (value) {
+ var _accumulator;
+
+ return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);
+ }) || accumulator;
+},
+ //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.
+toArray = function toArray(value, scope, leaveStrings) {
+ return _context && !scope && _context.selector ? _context.selector(value) : _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call((scope || _doc).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];
+},
+ selector = function selector(value) {
+ value = toArray(value)[0] || _warn("Invalid scope") || {};
+ return function (v) {
+ var el = value.current || value.nativeElement || value;
+ return toArray(v, el.querySelectorAll ? el : el === value ? _warn("Invalid scope") || _doc.createElement("div") : value);
+ };
+},
+ shuffle = function shuffle(a) {
+ return a.sort(function () {
+ return .5 - Math.random();
+ });
+},
+ // alternative that's a bit faster and more reliably diverse but bigger: for (let j, v, i = a.length; i; j = Math.floor(Math.random() * i), v = a[--i], a[i] = a[j], a[j] = v); return a;
+//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+distribute = function distribute(v) {
+ if (_isFunction(v)) {
+ return v;
+ }
+
+ var vars = _isObject(v) ? v : {
+ each: v
+ },
+ //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+ ease = _parseEase(vars.ease),
+ from = vars.from || 0,
+ base = parseFloat(vars.base) || 0,
+ cache = {},
+ isDecimal = from > 0 && from < 1,
+ ratios = isNaN(from) || isDecimal,
+ axis = vars.axis,
+ ratioX = from,
+ ratioY = from;
+
+ if (_isString(from)) {
+ ratioX = ratioY = {
+ center: .5,
+ edges: .5,
+ end: 1
+ }[from] || 0;
+ } else if (!isDecimal && ratios) {
+ ratioX = from[0];
+ ratioY = from[1];
+ }
+
+ return function (i, target, a) {
+ var l = (a || vars).length,
+ distances = cache[l],
+ originX,
+ originY,
+ x,
+ y,
+ d,
+ j,
+ max,
+ min,
+ wrapAt;
+
+ if (!distances) {
+ wrapAt = vars.grid === "auto" ? 0 : (vars.grid || [1, _bigNum])[1];
+
+ if (!wrapAt) {
+ max = -_bigNum;
+
+ while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {}
+
+ wrapAt--;
+ }
+
+ distances = cache[l] = [];
+ originX = ratios ? Math.min(wrapAt, l) * ratioX - .5 : from % wrapAt;
+ originY = wrapAt === _bigNum ? 0 : ratios ? l * ratioY / wrapAt - .5 : from / wrapAt | 0;
+ max = 0;
+ min = _bigNum;
+
+ for (j = 0; j < l; j++) {
+ x = j % wrapAt - originX;
+ y = originY - (j / wrapAt | 0);
+ distances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs(axis === "y" ? y : x);
+ d > max && (max = d);
+ d < min && (min = d);
+ }
+
+ from === "random" && shuffle(distances);
+ distances.max = max - min;
+ distances.min = min;
+ distances.v = l = (parseFloat(vars.amount) || parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === "y" ? l / wrapAt : wrapAt) || 0) * (from === "edges" ? -1 : 1);
+ distances.b = l < 0 ? base - l : base;
+ distances.u = getUnit(vars.amount || vars.each) || 0; //unit
+
+ ease = ease && l < 0 ? _invertEase(ease) : ease;
+ }
+
+ l = (distances[i] - distances.min) / distances.max || 0;
+ return _roundPrecise(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u; //round in order to work around floating point errors
+ };
+},
+ _roundModifier = function _roundModifier(v) {
+ //pass in 0.1 get a function that'll round to the nearest tenth, or 5 to round to the closest 5, or 0.001 to the closest 1000th, etc.
+ var p = Math.pow(10, ((v + "").split(".")[1] || "").length); //to avoid floating point math errors (like 24 * 0.1 == 2.4000000000000004), we chop off at a specific number of decimal places (much faster than toFixed())
+
+ return function (raw) {
+ var n = _roundPrecise(Math.round(parseFloat(raw) / v) * v * p);
+
+ return (n - n % 1) / p + (_isNumber(raw) ? 0 : getUnit(raw)); // n - n % 1 replaces Math.floor() in order to handle negative values properly. For example, Math.floor(-150.00000000000003) is 151!
+ };
+},
+ snap = function snap(snapTo, value) {
+ var isArray = _isArray(snapTo),
+ radius,
+ is2D;
+
+ if (!isArray && _isObject(snapTo)) {
+ radius = isArray = snapTo.radius || _bigNum;
+
+ if (snapTo.values) {
+ snapTo = toArray(snapTo.values);
+
+ if (is2D = !_isNumber(snapTo[0])) {
+ radius *= radius; //performance optimization so we don't have to Math.sqrt() in the loop.
+ }
+ } else {
+ snapTo = _roundModifier(snapTo.increment);
+ }
+ }
+
+ return _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? function (raw) {
+ is2D = snapTo(raw);
+ return Math.abs(is2D - raw) <= radius ? is2D : raw;
+ } : function (raw) {
+ var x = parseFloat(is2D ? raw.x : raw),
+ y = parseFloat(is2D ? raw.y : 0),
+ min = _bigNum,
+ closest = 0,
+ i = snapTo.length,
+ dx,
+ dy;
+
+ while (i--) {
+ if (is2D) {
+ dx = snapTo[i].x - x;
+ dy = snapTo[i].y - y;
+ dx = dx * dx + dy * dy;
+ } else {
+ dx = Math.abs(snapTo[i] - x);
+ }
+
+ if (dx < min) {
+ min = dx;
+ closest = i;
+ }
+ }
+
+ closest = !radius || min <= radius ? snapTo[closest] : raw;
+ return is2D || closest === raw || _isNumber(raw) ? closest : closest + getUnit(raw);
+ });
+},
+ random = function random(min, max, roundingIncrement, returnFunction) {
+ return _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, function () {
+ return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * .99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
+ });
+},
+ pipe = function pipe() {
+ for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
+ functions[_key] = arguments[_key];
+ }
+
+ return function (value) {
+ return functions.reduce(function (v, f) {
+ return f(v);
+ }, value);
+ };
+},
+ unitize = function unitize(func, unit) {
+ return function (value) {
+ return func(parseFloat(value)) + (unit || getUnit(value));
+ };
+},
+ normalize = function normalize(min, max, value) {
+ return mapRange(min, max, 0, 1, value);
+},
+ _wrapArray = function _wrapArray(a, wrapper, value) {
+ return _conditionalReturn(value, function (index) {
+ return a[~~wrapper(index)];
+ });
+},
+ wrap = function wrap(min, max, value) {
+ // NOTE: wrap() CANNOT be an arrow function! A very odd compiling bug causes problems (unrelated to GSAP).
+ var range = max - min;
+ return _isArray(min) ? _wrapArray(min, wrap(0, min.length), max) : _conditionalReturn(value, function (value) {
+ return (range + (value - min) % range) % range + min;
+ });
+},
+ wrapYoyo = function wrapYoyo(min, max, value) {
+ var range = max - min,
+ total = range * 2;
+ return _isArray(min) ? _wrapArray(min, wrapYoyo(0, min.length - 1), max) : _conditionalReturn(value, function (value) {
+ value = (total + (value - min) % total) % total || 0;
+ return min + (value > range ? total - value : value);
+ });
+},
+ _replaceRandom = function _replaceRandom(value) {
+ //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])
+ var prev = 0,
+ s = "",
+ i,
+ nums,
+ end,
+ isArray;
+
+ while (~(i = value.indexOf("random(", prev))) {
+ end = value.indexOf(")", i);
+ isArray = value.charAt(i + 7) === "[";
+ nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);
+ s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], isArray ? 0 : +nums[1], +nums[2] || 1e-5);
+ prev = end + 1;
+ }
+
+ return s + value.substr(prev, value.length - prev);
+},
+ mapRange = function mapRange(inMin, inMax, outMin, outMax, value) {
+ var inRange = inMax - inMin,
+ outRange = outMax - outMin;
+ return _conditionalReturn(value, function (value) {
+ return outMin + ((value - inMin) / inRange * outRange || 0);
+ });
+},
+ interpolate = function interpolate(start, end, progress, mutate) {
+ var func = isNaN(start + end) ? 0 : function (p) {
+ return (1 - p) * start + p * end;
+ };
+
+ if (!func) {
+ var isString = _isString(start),
+ master = {},
+ p,
+ i,
+ interpolators,
+ l,
+ il;
+
+ progress === true && (mutate = 1) && (progress = null);
+
+ if (isString) {
+ start = {
+ p: start
+ };
+ end = {
+ p: end
+ };
+ } else if (_isArray(start) && !_isArray(end)) {
+ interpolators = [];
+ l = start.length;
+ il = l - 2;
+
+ for (i = 1; i < l; i++) {
+ interpolators.push(interpolate(start[i - 1], start[i])); //build the interpolators up front as a performance optimization so that when the function is called many times, it can just reuse them.
+ }
+
+ l--;
+
+ func = function func(p) {
+ p *= l;
+ var i = Math.min(il, ~~p);
+ return interpolators[i](p - i);
+ };
+
+ progress = end;
+ } else if (!mutate) {
+ start = _merge(_isArray(start) ? [] : {}, start);
+ }
+
+ if (!interpolators) {
+ for (p in end) {
+ _addPropTween.call(master, start, p, "get", end[p]);
+ }
+
+ func = function func(p) {
+ return _renderPropTweens(p, master) || (isString ? start.p : start);
+ };
+ }
+ }
+
+ return _conditionalReturn(progress, func);
+},
+ _getLabelInDirection = function _getLabelInDirection(timeline, fromTime, backward) {
+ //used for nextLabel() and previousLabel()
+ var labels = timeline.labels,
+ min = _bigNum,
+ p,
+ distance,
+ label;
+
+ for (p in labels) {
+ distance = labels[p] - fromTime;
+
+ if (distance < 0 === !!backward && distance && min > (distance = Math.abs(distance))) {
+ label = p;
+ min = distance;
+ }
+ }
+
+ return label;
+},
+ _callback = function _callback(animation, type, executeLazyFirst) {
+ var v = animation.vars,
+ callback = v[type],
+ prevContext = _context,
+ context = animation._ctx,
+ params,
+ scope,
+ result;
+
+ if (!callback) {
+ return;
+ }
+
+ params = v[type + "Params"];
+ scope = v.callbackScope || animation;
+ executeLazyFirst && _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.
+
+ context && (_context = context);
+ result = params ? callback.apply(scope, params) : callback.call(scope);
+ _context = prevContext;
+ return result;
+},
+ _interrupt = function _interrupt(animation) {
+ _removeFromParent(animation);
+
+ animation.scrollTrigger && animation.scrollTrigger.kill(false);
+ animation.progress() < 1 && _callback(animation, "onInterrupt");
+ return animation;
+},
+ _quickTween,
+ _createPlugin = function _createPlugin(config) {
+ config = !config.name && config["default"] || config; //UMD packaging wraps things oddly, so for example MotionPathHelper becomes {MotionPathHelper:MotionPathHelper, default:MotionPathHelper}.
+
+ var name = config.name,
+ isFunc = _isFunction(config),
+ Plugin = name && !isFunc && config.init ? function () {
+ this._props = [];
+ } : config,
+ //in case someone passes in an object that's not a plugin, like CustomEase
+ instanceDefaults = {
+ init: _emptyFunc,
+ render: _renderPropTweens,
+ add: _addPropTween,
+ kill: _killPropTweensOf,
+ modifier: _addPluginModifier,
+ rawVars: 0
+ },
+ statics = {
+ targetTest: 0,
+ get: 0,
+ getSetter: _getSetter,
+ aliases: {},
+ register: 0
+ };
+
+ _wake();
+
+ if (config !== Plugin) {
+ if (_plugins[name]) {
+ return;
+ }
+
+ _setDefaults(Plugin, _setDefaults(_copyExcluding(config, instanceDefaults), statics)); //static methods
+
+
+ _merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config, statics))); //instance methods
+
+
+ _plugins[Plugin.prop = name] = Plugin;
+
+ if (config.targetTest) {
+ _harnessPlugins.push(Plugin);
+
+ _reservedProps[name] = 1;
+ }
+
+ name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin"; //for the global name. "motionPath" should become MotionPathPlugin
+ }
+
+ _addGlobal(name, Plugin);
+
+ config.register && config.register(gsap, Plugin, PropTween);
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * COLORS
+ * --------------------------------------------------------------------------------------
+ */
+_255 = 255,
+ _colorLookup = {
+ aqua: [0, _255, _255],
+ lime: [0, _255, 0],
+ silver: [192, 192, 192],
+ black: [0, 0, 0],
+ maroon: [128, 0, 0],
+ teal: [0, 128, 128],
+ blue: [0, 0, _255],
+ navy: [0, 0, 128],
+ white: [_255, _255, _255],
+ olive: [128, 128, 0],
+ yellow: [_255, _255, 0],
+ orange: [_255, 165, 0],
+ gray: [128, 128, 128],
+ purple: [128, 0, 128],
+ green: [0, 128, 0],
+ red: [_255, 0, 0],
+ pink: [_255, 192, 203],
+ cyan: [0, _255, _255],
+ transparent: [_255, _255, _255, 0]
+},
+ // possible future idea to replace the hard-coded color name values - put this in the ticker.wake() where we set the _doc:
+// let ctx = _doc.createElement("canvas").getContext("2d");
+// _forEachName("aqua,lime,silver,black,maroon,teal,blue,navy,white,olive,yellow,orange,gray,purple,green,red,pink,cyan", color => {ctx.fillStyle = color; _colorLookup[color] = splitColor(ctx.fillStyle)});
+_hue = function _hue(h, m1, m2) {
+ h += h < 0 ? 1 : h > 1 ? -1 : 0;
+ return (h * 6 < 1 ? m1 + (m2 - m1) * h * 6 : h < .5 ? m2 : h * 3 < 2 ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255 + .5 | 0;
+},
+ splitColor = function splitColor(v, toHSL, forceAlpha) {
+ var a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, v >> 8 & _255, v & _255] : 0,
+ r,
+ g,
+ b,
+ h,
+ s,
+ l,
+ max,
+ min,
+ d,
+ wasHSL;
+
+ if (!a) {
+ if (v.substr(-1) === ",") {
+ //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.
+ v = v.substr(0, v.length - 1);
+ }
+
+ if (_colorLookup[v]) {
+ a = _colorLookup[v];
+ } else if (v.charAt(0) === "#") {
+ if (v.length < 6) {
+ //for shorthand like #9F0 or #9F0F (could have alpha)
+ r = v.charAt(1);
+ g = v.charAt(2);
+ b = v.charAt(3);
+ v = "#" + r + r + g + g + b + b + (v.length === 5 ? v.charAt(4) + v.charAt(4) : "");
+ }
+
+ if (v.length === 9) {
+ // hex with alpha, like #fd5e53ff
+ a = parseInt(v.substr(1, 6), 16);
+ return [a >> 16, a >> 8 & _255, a & _255, parseInt(v.substr(7), 16) / 255];
+ }
+
+ v = parseInt(v.substr(1), 16);
+ a = [v >> 16, v >> 8 & _255, v & _255];
+ } else if (v.substr(0, 3) === "hsl") {
+ a = wasHSL = v.match(_strictNumExp);
+
+ if (!toHSL) {
+ h = +a[0] % 360 / 360;
+ s = +a[1] / 100;
+ l = +a[2] / 100;
+ g = l <= .5 ? l * (s + 1) : l + s - l * s;
+ r = l * 2 - g;
+ a.length > 3 && (a[3] *= 1); //cast as number
+
+ a[0] = _hue(h + 1 / 3, r, g);
+ a[1] = _hue(h, r, g);
+ a[2] = _hue(h - 1 / 3, r, g);
+ } else if (~v.indexOf("=")) {
+ //if relative values are found, just return the raw strings with the relative prefixes in place.
+ a = v.match(_numExp);
+ forceAlpha && a.length < 4 && (a[3] = 1);
+ return a;
+ }
+ } else {
+ a = v.match(_strictNumExp) || _colorLookup.transparent;
+ }
+
+ a = a.map(Number);
+ }
+
+ if (toHSL && !wasHSL) {
+ r = a[0] / _255;
+ g = a[1] / _255;
+ b = a[2] / _255;
+ max = Math.max(r, g, b);
+ min = Math.min(r, g, b);
+ l = (max + min) / 2;
+
+ if (max === min) {
+ h = s = 0;
+ } else {
+ d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+ h *= 60;
+ }
+
+ a[0] = ~~(h + .5);
+ a[1] = ~~(s * 100 + .5);
+ a[2] = ~~(l * 100 + .5);
+ }
+
+ forceAlpha && a.length < 4 && (a[3] = 1);
+ return a;
+},
+ _colorOrderData = function _colorOrderData(v) {
+ // strips out the colors from the string, finds all the numeric slots (with units) and returns an array of those. The Array also has a "c" property which is an Array of the index values where the colors belong. This is to help work around issues where there's a mis-matched order of color/numeric data like drop-shadow(#f00 0px 1px 2px) and drop-shadow(0x 1px 2px #f00). This is basically a helper function used in _formatColors()
+ var values = [],
+ c = [],
+ i = -1;
+ v.split(_colorExp).forEach(function (v) {
+ var a = v.match(_numWithUnitExp) || [];
+ values.push.apply(values, a);
+ c.push(i += a.length + 1);
+ });
+ values.c = c;
+ return values;
+},
+ _formatColors = function _formatColors(s, toHSL, orderMatchData) {
+ var result = "",
+ colors = (s + result).match(_colorExp),
+ type = toHSL ? "hsla(" : "rgba(",
+ i = 0,
+ c,
+ shell,
+ d,
+ l;
+
+ if (!colors) {
+ return s;
+ }
+
+ colors = colors.map(function (color) {
+ return (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : color.join(",")) + ")";
+ });
+
+ if (orderMatchData) {
+ d = _colorOrderData(s);
+ c = orderMatchData.c;
+
+ if (c.join(result) !== d.c.join(result)) {
+ shell = s.replace(_colorExp, "1").split(_numWithUnitExp);
+ l = shell.length - 1;
+
+ for (; i < l; i++) {
+ result += shell[i] + (~c.indexOf(i) ? colors.shift() || type + "0,0,0,0)" : (d.length ? d : colors.length ? colors : orderMatchData).shift());
+ }
+ }
+ }
+
+ if (!shell) {
+ shell = s.split(_colorExp);
+ l = shell.length - 1;
+
+ for (; i < l; i++) {
+ result += shell[i] + colors[i];
+ }
+ }
+
+ return result + shell[l];
+},
+ _colorExp = function () {
+ var s = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b",
+ //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.,
+ p;
+
+ for (p in _colorLookup) {
+ s += "|" + p + "\\b";
+ }
+
+ return new RegExp(s + ")", "gi");
+}(),
+ _hslExp = /hsl[a]?\(/,
+ _colorStringFilter = function _colorStringFilter(a) {
+ var combined = a.join(" "),
+ toHSL;
+ _colorExp.lastIndex = 0;
+
+ if (_colorExp.test(combined)) {
+ toHSL = _hslExp.test(combined);
+ a[1] = _formatColors(a[1], toHSL);
+ a[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1])); // make sure the order of numbers/colors match with the END value.
+
+ return true;
+ }
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * TICKER
+ * --------------------------------------------------------------------------------------
+ */
+_tickerActive,
+ _ticker = function () {
+ var _getTime = Date.now,
+ _lagThreshold = 500,
+ _adjustedLag = 33,
+ _startTime = _getTime(),
+ _lastUpdate = _startTime,
+ _gap = 1000 / 240,
+ _nextTime = _gap,
+ _listeners = [],
+ _id,
+ _req,
+ _raf,
+ _self,
+ _delta,
+ _i,
+ _tick = function _tick(v) {
+ var elapsed = _getTime() - _lastUpdate,
+ manual = v === true,
+ overlap,
+ dispatch,
+ time,
+ frame;
+
+ elapsed > _lagThreshold && (_startTime += elapsed - _adjustedLag);
+ _lastUpdate += elapsed;
+ time = _lastUpdate - _startTime;
+ overlap = time - _nextTime;
+
+ if (overlap > 0 || manual) {
+ frame = ++_self.frame;
+ _delta = time - _self.time * 1000;
+ _self.time = time = time / 1000;
+ _nextTime += overlap + (overlap >= _gap ? 4 : _gap - overlap);
+ dispatch = 1;
+ }
+
+ manual || (_id = _req(_tick)); //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
+
+ if (dispatch) {
+ for (_i = 0; _i < _listeners.length; _i++) {
+ // use _i and check _listeners.length instead of a variable because a listener could get removed during the loop, and if that happens to an element less than the current index, it'd throw things off in the loop.
+ _listeners[_i](time, _delta, frame, v);
+ }
+ }
+ };
+
+ _self = {
+ time: 0,
+ frame: 0,
+ tick: function tick() {
+ _tick(true);
+ },
+ deltaRatio: function deltaRatio(fps) {
+ return _delta / (1000 / (fps || 60));
+ },
+ wake: function wake() {
+ if (_coreReady) {
+ if (!_coreInitted && _windowExists()) {
+ _win = _coreInitted = window;
+ _doc = _win.document || {};
+ _globals.gsap = gsap;
+ (_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);
+
+ _install(_installScope || _win.GreenSockGlobals || !_win.gsap && _win || {});
+
+ _raf = _win.requestAnimationFrame;
+ }
+
+ _id && _self.sleep();
+
+ _req = _raf || function (f) {
+ return setTimeout(f, _nextTime - _self.time * 1000 + 1 | 0);
+ };
+
+ _tickerActive = 1;
+
+ _tick(2);
+ }
+ },
+ sleep: function sleep() {
+ (_raf ? _win.cancelAnimationFrame : clearTimeout)(_id);
+ _tickerActive = 0;
+ _req = _emptyFunc;
+ },
+ lagSmoothing: function lagSmoothing(threshold, adjustedLag) {
+ _lagThreshold = threshold || 1 / _tinyNum; //zero should be interpreted as basically unlimited
+
+ _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);
+ },
+ fps: function fps(_fps) {
+ _gap = 1000 / (_fps || 240);
+ _nextTime = _self.time * 1000 + _gap;
+ },
+ add: function add(callback, once, prioritize) {
+ var func = once ? function (t, d, f, v) {
+ callback(t, d, f, v);
+
+ _self.remove(func);
+ } : callback;
+
+ _self.remove(callback);
+
+ _listeners[prioritize ? "unshift" : "push"](func);
+
+ _wake();
+
+ return func;
+ },
+ remove: function remove(callback, i) {
+ ~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1) && _i >= i && _i--;
+ },
+ _listeners: _listeners
+ };
+ return _self;
+}(),
+ _wake = function _wake() {
+ return !_tickerActive && _ticker.wake();
+},
+ //also ensures the core classes are initialized.
+
+/*
+* -------------------------------------------------
+* EASING
+* -------------------------------------------------
+*/
+_easeMap = {},
+ _customEaseExp = /^[\d.\-M][\d.\-,\s]/,
+ _quotesExp = /["']/g,
+ _parseObjectInString = function _parseObjectInString(value) {
+ //takes a string like "{wiggles:10, type:anticipate})" and turns it into a real object. Notice it ends in ")" and includes the {} wrappers. This is because we only use this function for parsing ease configs and prioritized optimization rather than reusability.
+ var obj = {},
+ split = value.substr(1, value.length - 3).split(":"),
+ key = split[0],
+ i = 1,
+ l = split.length,
+ index,
+ val,
+ parsedVal;
+
+ for (; i < l; i++) {
+ val = split[i];
+ index = i !== l - 1 ? val.lastIndexOf(",") : val.length;
+ parsedVal = val.substr(0, index);
+ obj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, "").trim() : +parsedVal;
+ key = val.substr(index + 1).trim();
+ }
+
+ return obj;
+},
+ _valueInParentheses = function _valueInParentheses(value) {
+ var open = value.indexOf("(") + 1,
+ close = value.indexOf(")"),
+ nested = value.indexOf("(", open);
+ return value.substring(open, ~nested && nested < close ? value.indexOf(")", close + 1) : close);
+},
+ _configEaseFromString = function _configEaseFromString(name) {
+ //name can be a string like "elastic.out(1,0.5)", and pass in _easeMap as obj and it'll parse it out and call the actual function like _easeMap.Elastic.easeOut.config(1,0.5). It will also parse custom ease strings as long as CustomEase is loaded and registered (internally as _easeMap._CE).
+ var split = (name + "").split("("),
+ ease = _easeMap[split[0]];
+ return ease && split.length > 1 && ease.config ? ease.config.apply(null, ~name.indexOf("{") ? [_parseObjectInString(split[1])] : _valueInParentheses(name).split(",").map(_numericIfPossible)) : _easeMap._CE && _customEaseExp.test(name) ? _easeMap._CE("", name) : ease;
+},
+ _invertEase = function _invertEase(ease) {
+ return function (p) {
+ return 1 - ease(1 - p);
+ };
+},
+ // allow yoyoEase to be set in children and have those affected when the parent/ancestor timeline yoyos.
+_propagateYoyoEase = function _propagateYoyoEase(timeline, isYoyo) {
+ var child = timeline._first,
+ ease;
+
+ while (child) {
+ if (child instanceof Timeline) {
+ _propagateYoyoEase(child, isYoyo);
+ } else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {
+ if (child.timeline) {
+ _propagateYoyoEase(child.timeline, isYoyo);
+ } else {
+ ease = child._ease;
+ child._ease = child._yEase;
+ child._yEase = ease;
+ child._yoyo = isYoyo;
+ }
+ }
+
+ child = child._next;
+ }
+},
+ _parseEase = function _parseEase(ease, defaultEase) {
+ return !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase;
+},
+ _insertEase = function _insertEase(names, easeIn, easeOut, easeInOut) {
+ if (easeOut === void 0) {
+ easeOut = function easeOut(p) {
+ return 1 - easeIn(1 - p);
+ };
+ }
+
+ if (easeInOut === void 0) {
+ easeInOut = function easeInOut(p) {
+ return p < .5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2;
+ };
+ }
+
+ var ease = {
+ easeIn: easeIn,
+ easeOut: easeOut,
+ easeInOut: easeInOut
+ },
+ lowercaseName;
+
+ _forEachName(names, function (name) {
+ _easeMap[name] = _globals[name] = ease;
+ _easeMap[lowercaseName = name.toLowerCase()] = easeOut;
+
+ for (var p in ease) {
+ _easeMap[lowercaseName + (p === "easeIn" ? ".in" : p === "easeOut" ? ".out" : ".inOut")] = _easeMap[name + "." + p] = ease[p];
+ }
+ });
+
+ return ease;
+},
+ _easeInOutFromOut = function _easeInOutFromOut(easeOut) {
+ return function (p) {
+ return p < .5 ? (1 - easeOut(1 - p * 2)) / 2 : .5 + easeOut((p - .5) * 2) / 2;
+ };
+},
+ _configElastic = function _configElastic(type, amplitude, period) {
+ var p1 = amplitude >= 1 ? amplitude : 1,
+ //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1.
+ p2 = (period || (type ? .3 : .45)) / (amplitude < 1 ? amplitude : 1),
+ p3 = p2 / _2PI * (Math.asin(1 / p1) || 0),
+ easeOut = function easeOut(p) {
+ return p === 1 ? 1 : p1 * Math.pow(2, -10 * p) * _sin((p - p3) * p2) + 1;
+ },
+ ease = type === "out" ? easeOut : type === "in" ? function (p) {
+ return 1 - easeOut(1 - p);
+ } : _easeInOutFromOut(easeOut);
+
+ p2 = _2PI / p2; //precalculate to optimize
+
+ ease.config = function (amplitude, period) {
+ return _configElastic(type, amplitude, period);
+ };
+
+ return ease;
+},
+ _configBack = function _configBack(type, overshoot) {
+ if (overshoot === void 0) {
+ overshoot = 1.70158;
+ }
+
+ var easeOut = function easeOut(p) {
+ return p ? --p * p * ((overshoot + 1) * p + overshoot) + 1 : 0;
+ },
+ ease = type === "out" ? easeOut : type === "in" ? function (p) {
+ return 1 - easeOut(1 - p);
+ } : _easeInOutFromOut(easeOut);
+
+ ease.config = function (overshoot) {
+ return _configBack(type, overshoot);
+ };
+
+ return ease;
+}; // a cheaper (kb and cpu) but more mild way to get a parameterized weighted ease by feeding in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEase = ratio => {
+// let y = 0.5 + ratio / 2;
+// return p => (2 * (1 - p) * p * y + p * p);
+// },
+// a stronger (but more expensive kb/cpu) parameterized weighted ease that lets you feed in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEaseStrong = ratio => {
+// ratio = .5 + ratio / 2;
+// let o = 1 / 3 * (ratio < .5 ? ratio : 1 - ratio),
+// b = ratio - o,
+// c = ratio + o;
+// return p => p === 1 ? p : 3 * b * (1 - p) * (1 - p) * p + 3 * c * (1 - p) * p * p + p * p * p;
+// };
+
+
+_forEachName("Linear,Quad,Cubic,Quart,Quint,Strong", function (name, i) {
+ var power = i < 5 ? i + 1 : i;
+
+ _insertEase(name + ",Power" + (power - 1), i ? function (p) {
+ return Math.pow(p, power);
+ } : function (p) {
+ return p;
+ }, function (p) {
+ return 1 - Math.pow(1 - p, power);
+ }, function (p) {
+ return p < .5 ? Math.pow(p * 2, power) / 2 : 1 - Math.pow((1 - p) * 2, power) / 2;
+ });
+});
+
+_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;
+
+_insertEase("Elastic", _configElastic("in"), _configElastic("out"), _configElastic());
+
+(function (n, c) {
+ var n1 = 1 / c,
+ n2 = 2 * n1,
+ n3 = 2.5 * n1,
+ easeOut = function easeOut(p) {
+ return p < n1 ? n * p * p : p < n2 ? n * Math.pow(p - 1.5 / c, 2) + .75 : p < n3 ? n * (p -= 2.25 / c) * p + .9375 : n * Math.pow(p - 2.625 / c, 2) + .984375;
+ };
+
+ _insertEase("Bounce", function (p) {
+ return 1 - easeOut(1 - p);
+ }, easeOut);
+})(7.5625, 2.75);
+
+_insertEase("Expo", function (p) {
+ return p ? Math.pow(2, 10 * (p - 1)) : 0;
+});
+
+_insertEase("Circ", function (p) {
+ return -(_sqrt(1 - p * p) - 1);
+});
+
+_insertEase("Sine", function (p) {
+ return p === 1 ? 1 : -_cos(p * _HALF_PI) + 1;
+});
+
+_insertEase("Back", _configBack("in"), _configBack("out"), _configBack());
+
+_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {
+ config: function config(steps, immediateStart) {
+ if (steps === void 0) {
+ steps = 1;
+ }
+
+ var p1 = 1 / steps,
+ p2 = steps + (immediateStart ? 0 : 1),
+ p3 = immediateStart ? 1 : 0,
+ max = 1 - _tinyNum;
+ return function (p) {
+ return ((p2 * _clamp(0, max, p) | 0) + p3) * p1;
+ };
+ }
+};
+_defaults.ease = _easeMap["quad.out"];
+
+_forEachName("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt", function (name) {
+ return _callbackNames += name + "," + name + "Params,";
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * CACHE
+ * --------------------------------------------------------------------------------------
+ */
+
+
+export var GSCache = function GSCache(target, harness) {
+ this.id = _gsID++;
+ target._gsap = this;
+ this.target = target;
+ this.harness = harness;
+ this.get = harness ? harness.get : _getProperty;
+ this.set = harness ? harness.getSetter : _getSetter;
+};
+/*
+ * --------------------------------------------------------------------------------------
+ * ANIMATION
+ * --------------------------------------------------------------------------------------
+ */
+
+export var Animation = /*#__PURE__*/function () {
+ function Animation(vars) {
+ this.vars = vars;
+ this._delay = +vars.delay || 0;
+
+ if (this._repeat = vars.repeat === Infinity ? -2 : vars.repeat || 0) {
+ // TODO: repeat: Infinity on a timeline's children must flag that timeline internally and affect its totalDuration, otherwise it'll stop in the negative direction when reaching the start.
+ this._rDelay = vars.repeatDelay || 0;
+ this._yoyo = !!vars.yoyo || !!vars.yoyoEase;
+ }
+
+ this._ts = 1;
+
+ _setDuration(this, +vars.duration, 1, 1);
+
+ this.data = vars.data;
+
+ if (_context) {
+ this._ctx = _context;
+
+ _context.data.push(this);
+ }
+
+ _tickerActive || _ticker.wake();
+ }
+
+ var _proto = Animation.prototype;
+
+ _proto.delay = function delay(value) {
+ if (value || value === 0) {
+ this.parent && this.parent.smoothChildTiming && this.startTime(this._start + value - this._delay);
+ this._delay = value;
+ return this;
+ }
+
+ return this._delay;
+ };
+
+ _proto.duration = function duration(value) {
+ return arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;
+ };
+
+ _proto.totalDuration = function totalDuration(value) {
+ if (!arguments.length) {
+ return this._tDur;
+ }
+
+ this._dirty = 0;
+ return _setDuration(this, this._repeat < 0 ? value : (value - this._repeat * this._rDelay) / (this._repeat + 1));
+ };
+
+ _proto.totalTime = function totalTime(_totalTime, suppressEvents) {
+ _wake();
+
+ if (!arguments.length) {
+ return this._tTime;
+ }
+
+ var parent = this._dp;
+
+ if (parent && parent.smoothChildTiming && this._ts) {
+ _alignPlayhead(this, _totalTime);
+
+ !parent._dp || parent.parent || _postAddChecks(parent, this); // edge case: if this is a child of a timeline that already completed, for example, we must re-activate the parent.
+ //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The start of that child would get pushed out, but one of the ancestors may have completed.
+
+ while (parent && parent.parent) {
+ if (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {
+ parent.totalTime(parent._tTime, true);
+ }
+
+ parent = parent.parent;
+ }
+
+ if (!this.parent && this._dp.autoRemoveChildren && (this._ts > 0 && _totalTime < this._tDur || this._ts < 0 && _totalTime > 0 || !this._tDur && !_totalTime)) {
+ //if the animation doesn't have a parent, put it back into its last parent (recorded as _dp for exactly cases like this). Limit to parents with autoRemoveChildren (like globalTimeline) so that if the user manually removes an animation from a timeline and then alters its playhead, it doesn't get added back in.
+ _addToTimeline(this._dp, this, this._start - this._delay);
+ }
+ }
+
+ if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum || !_totalTime && !this._initted && (this.add || this._ptLookup)) {
+ // check for _ptLookup on a Tween instance to ensure it has actually finished being instantiated, otherwise if this.reverse() gets called in the Animation constructor, it could trigger a render() here even though the _targets weren't populated, thus when _init() is called there won't be any PropTweens (it'll act like the tween is non-functional)
+ this._ts || (this._pTime = _totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause
+ //if (!this._lock) { // avoid endless recursion (not sure we need this yet or if it's worth the performance hit)
+ // this._lock = 1;
+
+ _lazySafeRender(this, _totalTime, suppressEvents); // this._lock = 0;
+ //}
+
+ }
+
+ return this;
+ };
+
+ _proto.time = function time(value, suppressEvents) {
+ return arguments.length ? this.totalTime(Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % (this._dur + this._rDelay) || (value ? this._dur : 0), suppressEvents) : this._time; // note: if the modulus results in 0, the playhead could be exactly at the end or the beginning, and we always defer to the END with a non-zero value, otherwise if you set the time() to the very end (duration()), it would render at the START!
+ };
+
+ _proto.totalProgress = function totalProgress(value, suppressEvents) {
+ return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.ratio;
+ };
+
+ _proto.progress = function progress(value, suppressEvents) {
+ return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.ratio;
+ };
+
+ _proto.iteration = function iteration(value, suppressEvents) {
+ var cycleDuration = this.duration() + this._rDelay;
+
+ return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;
+ } // potential future addition:
+ // isPlayingBackwards() {
+ // let animation = this,
+ // orientation = 1; // 1 = forward, -1 = backward
+ // while (animation) {
+ // orientation *= animation.reversed() || (animation.repeat() && !(animation.iteration() & 1)) ? -1 : 1;
+ // animation = animation.parent;
+ // }
+ // return orientation < 0;
+ // }
+ ;
+
+ _proto.timeScale = function timeScale(value) {
+ if (!arguments.length) {
+ return this._rts === -_tinyNum ? 0 : this._rts; // recorded timeScale. Special case: if someone calls reverse() on an animation with timeScale of 0, we assign it -_tinyNum to remember it's reversed.
+ }
+
+ if (this._rts === value) {
+ return this;
+ }
+
+ var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; // make sure to do the parentToChildTotalTime() BEFORE setting the new _ts because the old one must be used in that calculation.
+ // future addition? Up side: fast and minimal file size. Down side: only works on this animation; if a timeline is reversed, for example, its childrens' onReverse wouldn't get called.
+ //(+value < 0 && this._rts >= 0) && _callback(this, "onReverse", true);
+ // prioritize rendering where the parent's playhead lines up instead of this._tTime because there could be a tween that's animating another tween's timeScale in the same rendering loop (same parent), thus if the timeScale tween renders first, it would alter _start BEFORE _tTime was set on that tick (in the rendering loop), effectively freezing it until the timeScale tween finishes.
+
+ this._rts = +value || 0;
+ this._ts = this._ps || value === -_tinyNum ? 0 : this._rts; // _ts is the functional timeScale which would be 0 if the animation is paused.
+
+ this.totalTime(_clamp(-this._delay, this._tDur, tTime), true);
+
+ _setEnd(this); // if parent.smoothChildTiming was false, the end time didn't get updated in the _alignPlayhead() method, so do it here.
+
+
+ return _recacheAncestors(this);
+ };
+
+ _proto.paused = function paused(value) {
+ if (!arguments.length) {
+ return this._ps;
+ }
+
+ if (this._ps !== value) {
+ this._ps = value;
+
+ if (value) {
+ this._pTime = this._tTime || Math.max(-this._delay, this.rawTime()); // if the pause occurs during the delay phase, make sure that's factored in when resuming.
+
+ this._ts = this._act = 0; // _ts is the functional timeScale, so a paused tween would effectively have a timeScale of 0. We record the "real" timeScale as _rts (recorded time scale)
+ } else {
+ _wake();
+
+ this._ts = this._rts; //only defer to _pTime (pauseTime) if tTime is zero. Remember, someone could pause() an animation, then scrub the playhead and resume(). If the parent doesn't have smoothChildTiming, we render at the rawTime() because the startTime won't get updated.
+
+ this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && Math.abs(this._zTime) !== _tinyNum && (this._tTime -= _tinyNum)); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.
+ }
+ }
+
+ return this;
+ };
+
+ _proto.startTime = function startTime(value) {
+ if (arguments.length) {
+ this._start = value;
+ var parent = this.parent || this._dp;
+ parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);
+ return this;
+ }
+
+ return this._start;
+ };
+
+ _proto.endTime = function endTime(includeRepeats) {
+ return this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts || 1);
+ };
+
+ _proto.rawTime = function rawTime(wrapRepeats) {
+ var parent = this.parent || this._dp; // _dp = detached parent
+
+ return !parent ? this._tTime : wrapRepeats && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);
+ };
+
+ _proto.revert = function revert(config) {
+ if (config === void 0) {
+ config = _revertConfig;
+ }
+
+ var prevIsReverting = _reverting;
+ _reverting = config;
+ this.timeline && this.timeline.revert(config);
+ this.totalTime(-0.01, config.suppressEvents);
+ this.data !== "nested" && _removeFromParent(this);
+ _reverting = prevIsReverting;
+ return this;
+ };
+
+ _proto.globalTime = function globalTime(rawTime) {
+ var animation = this,
+ time = arguments.length ? rawTime : animation.rawTime();
+
+ while (animation) {
+ time = animation._start + time / (animation._ts || 1);
+ animation = animation._dp;
+ }
+
+ return !this.parent && this.vars.immediateRender ? -1 : time; // the _startAt tweens for .fromTo() and .from() that have immediateRender should always be FIRST in the timeline (important for Recording.revert())
+ };
+
+ _proto.repeat = function repeat(value) {
+ if (arguments.length) {
+ this._repeat = value === Infinity ? -2 : value;
+ return _onUpdateTotalDuration(this);
+ }
+
+ return this._repeat === -2 ? Infinity : this._repeat;
+ };
+
+ _proto.repeatDelay = function repeatDelay(value) {
+ if (arguments.length) {
+ var time = this._time;
+ this._rDelay = value;
+
+ _onUpdateTotalDuration(this);
+
+ return time ? this.time(time) : this;
+ }
+
+ return this._rDelay;
+ };
+
+ _proto.yoyo = function yoyo(value) {
+ if (arguments.length) {
+ this._yoyo = value;
+ return this;
+ }
+
+ return this._yoyo;
+ };
+
+ _proto.seek = function seek(position, suppressEvents) {
+ return this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));
+ };
+
+ _proto.restart = function restart(includeDelay, suppressEvents) {
+ return this.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));
+ };
+
+ _proto.play = function play(from, suppressEvents) {
+ from != null && this.seek(from, suppressEvents);
+ return this.reversed(false).paused(false);
+ };
+
+ _proto.reverse = function reverse(from, suppressEvents) {
+ from != null && this.seek(from || this.totalDuration(), suppressEvents);
+ return this.reversed(true).paused(false);
+ };
+
+ _proto.pause = function pause(atTime, suppressEvents) {
+ atTime != null && this.seek(atTime, suppressEvents);
+ return this.paused(true);
+ };
+
+ _proto.resume = function resume() {
+ return this.paused(false);
+ };
+
+ _proto.reversed = function reversed(value) {
+ if (arguments.length) {
+ !!value !== this.reversed() && this.timeScale(-this._rts || (value ? -_tinyNum : 0)); // in case timeScale is zero, reversing would have no effect so we use _tinyNum.
+
+ return this;
+ }
+
+ return this._rts < 0;
+ };
+
+ _proto.invalidate = function invalidate() {
+ this._initted = this._act = 0;
+ this._zTime = -_tinyNum;
+ return this;
+ };
+
+ _proto.isActive = function isActive() {
+ var parent = this.parent || this._dp,
+ start = this._start,
+ rawTime;
+ return !!(!parent || this._ts && this._initted && parent.isActive() && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum);
+ };
+
+ _proto.eventCallback = function eventCallback(type, callback, params) {
+ var vars = this.vars;
+
+ if (arguments.length > 1) {
+ if (!callback) {
+ delete vars[type];
+ } else {
+ vars[type] = callback;
+ params && (vars[type + "Params"] = params);
+ type === "onUpdate" && (this._onUpdate = callback);
+ }
+
+ return this;
+ }
+
+ return vars[type];
+ };
+
+ _proto.then = function then(onFulfilled) {
+ var self = this;
+ return new Promise(function (resolve) {
+ var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,
+ _resolve = function _resolve() {
+ var _then = self.then;
+ self.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)
+
+ _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);
+ resolve(f);
+ self.then = _then;
+ };
+
+ if (self._initted && self.totalProgress() === 1 && self._ts >= 0 || !self._tTime && self._ts < 0) {
+ _resolve();
+ } else {
+ self._prom = _resolve;
+ }
+ });
+ };
+
+ _proto.kill = function kill() {
+ _interrupt(this);
+ };
+
+ return Animation;
+}();
+
+_setDefaults(Animation.prototype, {
+ _time: 0,
+ _start: 0,
+ _end: 0,
+ _tTime: 0,
+ _tDur: 0,
+ _dirty: 0,
+ _repeat: 0,
+ _yoyo: false,
+ parent: null,
+ _initted: false,
+ _rDelay: 0,
+ _ts: 1,
+ _dp: 0,
+ ratio: 0,
+ _zTime: -_tinyNum,
+ _prom: 0,
+ _ps: false,
+ _rts: 1
+});
+/*
+ * -------------------------------------------------
+ * TIMELINE
+ * -------------------------------------------------
+ */
+
+
+export var Timeline = /*#__PURE__*/function (_Animation) {
+ _inheritsLoose(Timeline, _Animation);
+
+ function Timeline(vars, position) {
+ var _this;
+
+ if (vars === void 0) {
+ vars = {};
+ }
+
+ _this = _Animation.call(this, vars) || this;
+ _this.labels = {};
+ _this.smoothChildTiming = !!vars.smoothChildTiming;
+ _this.autoRemoveChildren = !!vars.autoRemoveChildren;
+ _this._sort = _isNotFalse(vars.sortChildren);
+ _globalTimeline && _addToTimeline(vars.parent || _globalTimeline, _assertThisInitialized(_this), position);
+ vars.reversed && _this.reverse();
+ vars.paused && _this.paused(true);
+ vars.scrollTrigger && _scrollTrigger(_assertThisInitialized(_this), vars.scrollTrigger);
+ return _this;
+ }
+
+ var _proto2 = Timeline.prototype;
+
+ _proto2.to = function to(targets, vars, position) {
+ _createTweenType(0, arguments, this);
+
+ return this;
+ };
+
+ _proto2.from = function from(targets, vars, position) {
+ _createTweenType(1, arguments, this);
+
+ return this;
+ };
+
+ _proto2.fromTo = function fromTo(targets, fromVars, toVars, position) {
+ _createTweenType(2, arguments, this);
+
+ return this;
+ };
+
+ _proto2.set = function set(targets, vars, position) {
+ vars.duration = 0;
+ vars.parent = this;
+ _inheritDefaults(vars).repeatDelay || (vars.repeat = 0);
+ vars.immediateRender = !!vars.immediateRender;
+ new Tween(targets, vars, _parsePosition(this, position), 1);
+ return this;
+ };
+
+ _proto2.call = function call(callback, params, position) {
+ return _addToTimeline(this, Tween.delayedCall(0, callback, params), position);
+ } //ONLY for backward compatibility! Maybe delete?
+ ;
+
+ _proto2.staggerTo = function staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+ vars.duration = duration;
+ vars.stagger = vars.stagger || stagger;
+ vars.onComplete = onCompleteAll;
+ vars.onCompleteParams = onCompleteAllParams;
+ vars.parent = this;
+ new Tween(targets, vars, _parsePosition(this, position));
+ return this;
+ };
+
+ _proto2.staggerFrom = function staggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+ vars.runBackwards = 1;
+ _inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);
+ return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);
+ };
+
+ _proto2.staggerFromTo = function staggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {
+ toVars.startAt = fromVars;
+ _inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);
+ return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);
+ };
+
+ _proto2.render = function render(totalTime, suppressEvents, force) {
+ var prevTime = this._time,
+ tDur = this._dirty ? this.totalDuration() : this._tDur,
+ dur = this._dur,
+ tTime = totalTime <= 0 ? 0 : _roundPrecise(totalTime),
+ // if a paused timeline is resumed (or its _start is updated for another reason...which rounds it), that could result in the playhead shifting a **tiny** amount and a zero-duration child at that spot may get rendered at a different ratio, like its totalTime in render() may be 1e-17 instead of 0, for example.
+ crossingStart = this._zTime < 0 !== totalTime < 0 && (this._initted || !dur),
+ time,
+ child,
+ next,
+ iteration,
+ cycleDuration,
+ prevPaused,
+ pauseTween,
+ timeScale,
+ prevStart,
+ prevIteration,
+ yoyo,
+ isYoyo;
+ this !== _globalTimeline && tTime > tDur && totalTime >= 0 && (tTime = tDur);
+
+ if (tTime !== this._tTime || force || crossingStart) {
+ if (prevTime !== this._time && dur) {
+ //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
+ tTime += this._time - prevTime;
+ totalTime += this._time - prevTime;
+ }
+
+ time = tTime;
+ prevStart = this._start;
+ timeScale = this._ts;
+ prevPaused = !timeScale;
+
+ if (crossingStart) {
+ dur || (prevTime = this._zTime); //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+
+ (totalTime || !suppressEvents) && (this._zTime = totalTime);
+ }
+
+ if (this._repeat) {
+ //adjust the time for repeats and yoyos
+ yoyo = this._yoyo;
+ cycleDuration = dur + this._rDelay;
+
+ if (this._repeat < -1 && totalTime < 0) {
+ return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);
+ }
+
+ time = _roundPrecise(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+ if (tTime === tDur) {
+ // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)
+ iteration = this._repeat;
+ time = dur;
+ } else {
+ iteration = ~~(tTime / cycleDuration);
+
+ if (iteration && iteration === tTime / cycleDuration) {
+ time = dur;
+ iteration--;
+ }
+
+ time > dur && (time = dur);
+ }
+
+ prevIteration = _animationCycle(this._tTime, cycleDuration);
+ !prevTime && this._tTime && prevIteration !== iteration && (prevIteration = iteration); // edge case - if someone does addPause() at the very beginning of a repeating timeline, that pause is technically at the same spot as the end which causes this._time to get set to 0 when the totalTime would normally place the playhead at the end. See https://greensock.com/forums/topic/23823-closing-nav-animation-not-working-on-ie-and-iphone-6-maybe-other-older-browser/?tab=comments#comment-113005
+
+ if (yoyo && iteration & 1) {
+ time = dur - time;
+ isYoyo = 1;
+ }
+ /*
+ make sure children at the end/beginning of the timeline are rendered properly. If, for example,
+ a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which
+ would get translated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there
+ could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So
+ we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must
+ ensure that zero-duration tweens at the very beginning or end of the Timeline work.
+ */
+
+
+ if (iteration !== prevIteration && !this._lock) {
+ var rewinding = yoyo && prevIteration & 1,
+ doesWrap = rewinding === (yoyo && iteration & 1);
+ iteration < prevIteration && (rewinding = !rewinding);
+ prevTime = rewinding ? 0 : dur;
+ this._lock = 1;
+ this.render(prevTime || (isYoyo ? 0 : _roundPrecise(iteration * cycleDuration)), suppressEvents, !dur)._lock = 0;
+ this._tTime = tTime; // if a user gets the iteration() inside the onRepeat, for example, it should be accurate.
+
+ !suppressEvents && this.parent && _callback(this, "onRepeat");
+ this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);
+
+ if (prevTime && prevTime !== this._time || prevPaused !== !this._ts || this.vars.onRepeat && !this.parent && !this._act) {
+ // if prevTime is 0 and we render at the very end, _time will be the end, thus won't match. So in this edge case, prevTime won't match _time but that's okay. If it gets killed in the onRepeat, eject as well.
+ return this;
+ }
+
+ dur = this._dur; // in case the duration changed in the onRepeat
+
+ tDur = this._tDur;
+
+ if (doesWrap) {
+ this._lock = 2;
+ prevTime = rewinding ? dur : -0.0001;
+ this.render(prevTime, true);
+ this.vars.repeatRefresh && !isYoyo && this.invalidate();
+ }
+
+ this._lock = 0;
+
+ if (!this._ts && !prevPaused) {
+ return this;
+ } //in order for yoyoEase to work properly when there's a stagger, we must swap out the ease in each sub-tween.
+
+
+ _propagateYoyoEase(this, isYoyo);
+ }
+ }
+
+ if (this._hasPause && !this._forcing && this._lock < 2) {
+ pauseTween = _findNextPauseTween(this, _roundPrecise(prevTime), _roundPrecise(time));
+
+ if (pauseTween) {
+ tTime -= time - (time = pauseTween._start);
+ }
+ }
+
+ this._tTime = tTime;
+ this._time = time;
+ this._act = !timeScale; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+ if (!this._initted) {
+ this._onUpdate = this.vars.onUpdate;
+ this._initted = 1;
+ this._zTime = totalTime;
+ prevTime = 0; // upon init, the playhead should always go forward; someone could invalidate() a completed timeline and then if they restart(), that would make child tweens render in reverse order which could lock in the wrong starting values if they build on each other, like tl.to(obj, {x: 100}).to(obj, {x: 0}).
+ }
+
+ if (!prevTime && time && !suppressEvents) {
+ _callback(this, "onStart");
+
+ if (this._tTime !== tTime) {
+ // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.
+ return this;
+ }
+ }
+
+ if (time >= prevTime && totalTime >= 0) {
+ child = this._first;
+
+ while (child) {
+ next = child._next;
+
+ if ((child._act || time >= child._start) && child._ts && pauseTween !== child) {
+ if (child.parent !== this) {
+ // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+ return this.render(totalTime, suppressEvents, force);
+ }
+
+ child.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);
+
+ if (time !== this._time || !this._ts && !prevPaused) {
+ //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+ pauseTween = 0;
+ next && (tTime += this._zTime = -_tinyNum); // it didn't finish rendering, so flag zTime as negative so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+ break;
+ }
+ }
+
+ child = next;
+ }
+ } else {
+ force = force || _reverting; // if reverting, we should always force renders. If, for example, a .fromTo() tween with a stagger (which creates an internal timeline) gets reverted BEFORE some of its child tweens render for the first time, it may not properly trigger them to revert.
+
+ child = this._last;
+ var adjustedTime = totalTime < 0 ? totalTime : time; //when the playhead goes backward beyond the start of this timeline, we must pass that information down to the child animations so that zero-duration tweens know whether to render their starting or ending values.
+
+ while (child) {
+ next = child._prev;
+
+ if ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {
+ if (child.parent !== this) {
+ // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+ return this.render(totalTime, suppressEvents, force);
+ }
+
+ child.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force);
+
+ if (time !== this._time || !this._ts && !prevPaused) {
+ //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+ pauseTween = 0;
+ next && (tTime += this._zTime = adjustedTime ? -_tinyNum : _tinyNum); // it didn't finish rendering, so adjust zTime so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+ break;
+ }
+ }
+
+ child = next;
+ }
+ }
+
+ if (pauseTween && !suppressEvents) {
+ this.pause();
+ pauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;
+
+ if (this._ts) {
+ //the callback resumed playback! So since we may have held back the playhead due to where the pause is positioned, go ahead and jump to where it's SUPPOSED to be (if no pause happened).
+ this._start = prevStart; //if the pause was at an earlier time and the user resumed in the callback, it could reposition the timeline (changing its startTime), throwing things off slightly, so we make sure the _start doesn't shift.
+
+ _setEnd(this);
+
+ return this.render(totalTime, suppressEvents, force);
+ }
+ }
+
+ this._onUpdate && !suppressEvents && _callback(this, "onUpdate", true);
+ if (tTime === tDur && this._tTime >= this.totalDuration() || !tTime && prevTime) if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) if (!this._lock) {
+ // remember, a child's callback may alter this timeline's playhead or timeScale which is why we need to add some of these checks.
+ (totalTime || !dur) && (tTime === tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+ if (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime || !tDur)) {
+ _callback(this, tTime === tDur && totalTime >= 0 ? "onComplete" : "onReverseComplete", true);
+
+ this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();
+ }
+ }
+ }
+
+ return this;
+ };
+
+ _proto2.add = function add(child, position) {
+ var _this2 = this;
+
+ _isNumber(position) || (position = _parsePosition(this, position, child));
+
+ if (!(child instanceof Animation)) {
+ if (_isArray(child)) {
+ child.forEach(function (obj) {
+ return _this2.add(obj, position);
+ });
+ return this;
+ }
+
+ if (_isString(child)) {
+ return this.addLabel(child, position);
+ }
+
+ if (_isFunction(child)) {
+ child = Tween.delayedCall(0, child);
+ } else {
+ return this;
+ }
+ }
+
+ return this !== child ? _addToTimeline(this, child, position) : this; //don't allow a timeline to be added to itself as a child!
+ };
+
+ _proto2.getChildren = function getChildren(nested, tweens, timelines, ignoreBeforeTime) {
+ if (nested === void 0) {
+ nested = true;
+ }
+
+ if (tweens === void 0) {
+ tweens = true;
+ }
+
+ if (timelines === void 0) {
+ timelines = true;
+ }
+
+ if (ignoreBeforeTime === void 0) {
+ ignoreBeforeTime = -_bigNum;
+ }
+
+ var a = [],
+ child = this._first;
+
+ while (child) {
+ if (child._start >= ignoreBeforeTime) {
+ if (child instanceof Tween) {
+ tweens && a.push(child);
+ } else {
+ timelines && a.push(child);
+ nested && a.push.apply(a, child.getChildren(true, tweens, timelines));
+ }
+ }
+
+ child = child._next;
+ }
+
+ return a;
+ };
+
+ _proto2.getById = function getById(id) {
+ var animations = this.getChildren(1, 1, 1),
+ i = animations.length;
+
+ while (i--) {
+ if (animations[i].vars.id === id) {
+ return animations[i];
+ }
+ }
+ };
+
+ _proto2.remove = function remove(child) {
+ if (_isString(child)) {
+ return this.removeLabel(child);
+ }
+
+ if (_isFunction(child)) {
+ return this.killTweensOf(child);
+ }
+
+ _removeLinkedListItem(this, child);
+
+ if (child === this._recent) {
+ this._recent = this._last;
+ }
+
+ return _uncache(this);
+ };
+
+ _proto2.totalTime = function totalTime(_totalTime2, suppressEvents) {
+ if (!arguments.length) {
+ return this._tTime;
+ }
+
+ this._forcing = 1;
+
+ if (!this._dp && this._ts) {
+ //special case for the global timeline (or any other that has no parent or detached parent).
+ this._start = _roundPrecise(_ticker.time - (this._ts > 0 ? _totalTime2 / this._ts : (this.totalDuration() - _totalTime2) / -this._ts));
+ }
+
+ _Animation.prototype.totalTime.call(this, _totalTime2, suppressEvents);
+
+ this._forcing = 0;
+ return this;
+ };
+
+ _proto2.addLabel = function addLabel(label, position) {
+ this.labels[label] = _parsePosition(this, position);
+ return this;
+ };
+
+ _proto2.removeLabel = function removeLabel(label) {
+ delete this.labels[label];
+ return this;
+ };
+
+ _proto2.addPause = function addPause(position, callback, params) {
+ var t = Tween.delayedCall(0, callback || _emptyFunc, params);
+ t.data = "isPause";
+ this._hasPause = 1;
+ return _addToTimeline(this, t, _parsePosition(this, position));
+ };
+
+ _proto2.removePause = function removePause(position) {
+ var child = this._first;
+ position = _parsePosition(this, position);
+
+ while (child) {
+ if (child._start === position && child.data === "isPause") {
+ _removeFromParent(child);
+ }
+
+ child = child._next;
+ }
+ };
+
+ _proto2.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+ var tweens = this.getTweensOf(targets, onlyActive),
+ i = tweens.length;
+
+ while (i--) {
+ _overwritingTween !== tweens[i] && tweens[i].kill(targets, props);
+ }
+
+ return this;
+ };
+
+ _proto2.getTweensOf = function getTweensOf(targets, onlyActive) {
+ var a = [],
+ parsedTargets = toArray(targets),
+ child = this._first,
+ isGlobalTime = _isNumber(onlyActive),
+ // a number is interpreted as a global time. If the animation spans
+ children;
+
+ while (child) {
+ if (child instanceof Tween) {
+ if (_arrayContainsAny(child._targets, parsedTargets) && (isGlobalTime ? (!_overwritingTween || child._initted && child._ts) && child.globalTime(0) <= onlyActive && child.globalTime(child.totalDuration()) > onlyActive : !onlyActive || child.isActive())) {
+ // note: if this is for overwriting, it should only be for tweens that aren't paused and are initted.
+ a.push(child);
+ }
+ } else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {
+ a.push.apply(a, children);
+ }
+
+ child = child._next;
+ }
+
+ return a;
+ } // potential future feature - targets() on timelines
+ // targets() {
+ // let result = [];
+ // this.getChildren(true, true, false).forEach(t => result.push(...t.targets()));
+ // return result.filter((v, i) => result.indexOf(v) === i);
+ // }
+ ;
+
+ _proto2.tweenTo = function tweenTo(position, vars) {
+ vars = vars || {};
+
+ var tl = this,
+ endTime = _parsePosition(tl, position),
+ _vars = vars,
+ startAt = _vars.startAt,
+ _onStart = _vars.onStart,
+ onStartParams = _vars.onStartParams,
+ immediateRender = _vars.immediateRender,
+ initted,
+ tween = Tween.to(tl, _setDefaults({
+ ease: vars.ease || "none",
+ lazy: false,
+ immediateRender: false,
+ time: endTime,
+ overwrite: "auto",
+ duration: vars.duration || Math.abs((endTime - (startAt && "time" in startAt ? startAt.time : tl._time)) / tl.timeScale()) || _tinyNum,
+ onStart: function onStart() {
+ tl.pause();
+
+ if (!initted) {
+ var duration = vars.duration || Math.abs((endTime - (startAt && "time" in startAt ? startAt.time : tl._time)) / tl.timeScale());
+ tween._dur !== duration && _setDuration(tween, duration, 0, 1).render(tween._time, true, true);
+ initted = 1;
+ }
+
+ _onStart && _onStart.apply(tween, onStartParams || []); //in case the user had an onStart in the vars - we don't want to overwrite it.
+ }
+ }, vars));
+
+ return immediateRender ? tween.render(0) : tween;
+ };
+
+ _proto2.tweenFromTo = function tweenFromTo(fromPosition, toPosition, vars) {
+ return this.tweenTo(toPosition, _setDefaults({
+ startAt: {
+ time: _parsePosition(this, fromPosition)
+ }
+ }, vars));
+ };
+
+ _proto2.recent = function recent() {
+ return this._recent;
+ };
+
+ _proto2.nextLabel = function nextLabel(afterTime) {
+ if (afterTime === void 0) {
+ afterTime = this._time;
+ }
+
+ return _getLabelInDirection(this, _parsePosition(this, afterTime));
+ };
+
+ _proto2.previousLabel = function previousLabel(beforeTime) {
+ if (beforeTime === void 0) {
+ beforeTime = this._time;
+ }
+
+ return _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);
+ };
+
+ _proto2.currentLabel = function currentLabel(value) {
+ return arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);
+ };
+
+ _proto2.shiftChildren = function shiftChildren(amount, adjustLabels, ignoreBeforeTime) {
+ if (ignoreBeforeTime === void 0) {
+ ignoreBeforeTime = 0;
+ }
+
+ var child = this._first,
+ labels = this.labels,
+ p;
+
+ while (child) {
+ if (child._start >= ignoreBeforeTime) {
+ child._start += amount;
+ child._end += amount;
+ }
+
+ child = child._next;
+ }
+
+ if (adjustLabels) {
+ for (p in labels) {
+ if (labels[p] >= ignoreBeforeTime) {
+ labels[p] += amount;
+ }
+ }
+ }
+
+ return _uncache(this);
+ };
+
+ _proto2.invalidate = function invalidate() {
+ var child = this._first;
+ this._lock = 0;
+
+ while (child) {
+ child.invalidate();
+ child = child._next;
+ }
+
+ return _Animation.prototype.invalidate.call(this);
+ };
+
+ _proto2.clear = function clear(includeLabels) {
+ if (includeLabels === void 0) {
+ includeLabels = true;
+ }
+
+ var child = this._first,
+ next;
+
+ while (child) {
+ next = child._next;
+ this.remove(child);
+ child = next;
+ }
+
+ this._dp && (this._time = this._tTime = this._pTime = 0);
+ includeLabels && (this.labels = {});
+ return _uncache(this);
+ };
+
+ _proto2.totalDuration = function totalDuration(value) {
+ var max = 0,
+ self = this,
+ child = self._last,
+ prevStart = _bigNum,
+ prev,
+ start,
+ parent;
+
+ if (arguments.length) {
+ return self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));
+ }
+
+ if (self._dirty) {
+ parent = self.parent;
+
+ while (child) {
+ prev = child._prev; //record it here in case the tween changes position in the sequence...
+
+ child._dirty && child.totalDuration(); //could change the tween._startTime, so make sure the animation's cache is clean before analyzing it.
+
+ start = child._start;
+
+ if (start > prevStart && self._sort && child._ts && !self._lock) {
+ //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence
+ self._lock = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add().
+
+ _addToTimeline(self, child, start - child._delay, 1)._lock = 0;
+ } else {
+ prevStart = start;
+ }
+
+ if (start < 0 && child._ts) {
+ //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.
+ max -= start;
+
+ if (!parent && !self._dp || parent && parent.smoothChildTiming) {
+ self._start += start / self._ts;
+ self._time -= start;
+ self._tTime -= start;
+ }
+
+ self.shiftChildren(-start, false, -1e999);
+ prevStart = 0;
+ }
+
+ child._end > max && child._ts && (max = child._end);
+ child = prev;
+ }
+
+ _setDuration(self, self === _globalTimeline && self._time > max ? self._time : max, 1, 1);
+
+ self._dirty = 0;
+ }
+
+ return self._tDur;
+ };
+
+ Timeline.updateRoot = function updateRoot(time) {
+ if (_globalTimeline._ts) {
+ _lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));
+
+ _lastRenderedFrame = _ticker.frame;
+ }
+
+ if (_ticker.frame >= _nextGCFrame) {
+ _nextGCFrame += _config.autoSleep || 120;
+ var child = _globalTimeline._first;
+ if (!child || !child._ts) if (_config.autoSleep && _ticker._listeners.length < 2) {
+ while (child && !child._ts) {
+ child = child._next;
+ }
+
+ child || _ticker.sleep();
+ }
+ }
+ };
+
+ return Timeline;
+}(Animation);
+
+_setDefaults(Timeline.prototype, {
+ _lock: 0,
+ _hasPause: 0,
+ _forcing: 0
+});
+
+var _addComplexStringPropTween = function _addComplexStringPropTween(target, prop, start, end, setter, stringFilter, funcParam) {
+ //note: we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+ var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),
+ index = 0,
+ matchIndex = 0,
+ result,
+ startNums,
+ color,
+ endNum,
+ chunk,
+ startNum,
+ hasRandom,
+ a;
+ pt.b = start;
+ pt.e = end;
+ start += ""; //ensure values are strings
+
+ end += "";
+
+ if (hasRandom = ~end.indexOf("random(")) {
+ end = _replaceRandom(end);
+ }
+
+ if (stringFilter) {
+ a = [start, end];
+ stringFilter(a, target, prop); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.
+
+ start = a[0];
+ end = a[1];
+ }
+
+ startNums = start.match(_complexStringNumExp) || [];
+
+ while (result = _complexStringNumExp.exec(end)) {
+ endNum = result[0];
+ chunk = end.substring(index, result.index);
+
+ if (color) {
+ color = (color + 1) % 5;
+ } else if (chunk.substr(-5) === "rgba(") {
+ color = 1;
+ }
+
+ if (endNum !== startNums[matchIndex++]) {
+ startNum = parseFloat(startNums[matchIndex - 1]) || 0; //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.
+
+ pt._pt = {
+ _next: pt._pt,
+ p: chunk || matchIndex === 1 ? chunk : ",",
+ //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+ s: startNum,
+ c: endNum.charAt(1) === "=" ? _parseRelative(startNum, endNum) - startNum : parseFloat(endNum) - startNum,
+ m: color && color < 4 ? Math.round : 0
+ };
+ index = _complexStringNumExp.lastIndex;
+ }
+ }
+
+ pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number)
+
+ pt.fp = funcParam;
+
+ if (_relExp.test(end) || hasRandom) {
+ pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).
+ }
+
+ this._pt = pt; //start the linked list with this new PropTween. Remember, we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+
+ return pt;
+},
+ _addPropTween = function _addPropTween(target, prop, start, end, index, targets, modifier, stringFilter, funcParam, optional) {
+ _isFunction(end) && (end = end(index || 0, target, targets));
+ var currentValue = target[prop],
+ parsedStart = start !== "get" ? start : !_isFunction(currentValue) ? currentValue : funcParam ? target[prop.indexOf("set") || !_isFunction(target["get" + prop.substr(3)]) ? prop : "get" + prop.substr(3)](funcParam) : target[prop](),
+ setter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc,
+ pt;
+
+ if (_isString(end)) {
+ if (~end.indexOf("random(")) {
+ end = _replaceRandom(end);
+ }
+
+ if (end.charAt(1) === "=") {
+ pt = _parseRelative(parsedStart, end) + (getUnit(parsedStart) || 0);
+
+ if (pt || pt === 0) {
+ // to avoid isNaN, like if someone passes in a value like "!= whatever"
+ end = pt;
+ }
+ }
+ }
+
+ if (!optional || parsedStart !== end || _forceAllPropTweens) {
+ if (!isNaN(parsedStart * end) && end !== "") {
+ // fun fact: any number multiplied by "" is evaluated as the number 0!
+ pt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof currentValue === "boolean" ? _renderBoolean : _renderPlain, 0, setter);
+ funcParam && (pt.fp = funcParam);
+ modifier && pt.modifier(modifier, this, target);
+ return this._pt = pt;
+ }
+
+ !currentValue && !(prop in target) && _missingPlugin(prop, end);
+ return _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);
+ }
+},
+ //creates a copy of the vars object and processes any function-based values (putting the resulting values directly into the copy) as well as strings with "random()" in them. It does NOT process relative values.
+_processVars = function _processVars(vars, index, target, targets, tween) {
+ _isFunction(vars) && (vars = _parseFuncOrString(vars, tween, index, target, targets));
+
+ if (!_isObject(vars) || vars.style && vars.nodeType || _isArray(vars) || _isTypedArray(vars)) {
+ return _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;
+ }
+
+ var copy = {},
+ p;
+
+ for (p in vars) {
+ copy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);
+ }
+
+ return copy;
+},
+ _checkPlugin = function _checkPlugin(property, vars, tween, index, target, targets) {
+ var plugin, pt, ptLookup, i;
+
+ if (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {
+ tween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+ if (tween !== _quickTween) {
+ ptLookup = tween._ptLookup[tween._targets.indexOf(target)]; //note: we can't use tween._ptLookup[index] because for staggered tweens, the index from the fullTargets array won't match what it is in each individual tween that spawns from the stagger.
+
+ i = plugin._props.length;
+
+ while (i--) {
+ ptLookup[plugin._props[i]] = pt;
+ }
+ }
+ }
+
+ return plugin;
+},
+ _overwritingTween,
+ //store a reference temporarily so we can avoid overwriting itself.
+_forceAllPropTweens,
+ _initTween = function _initTween(tween, time) {
+ var vars = tween.vars,
+ ease = vars.ease,
+ startAt = vars.startAt,
+ immediateRender = vars.immediateRender,
+ lazy = vars.lazy,
+ onUpdate = vars.onUpdate,
+ onUpdateParams = vars.onUpdateParams,
+ callbackScope = vars.callbackScope,
+ runBackwards = vars.runBackwards,
+ yoyoEase = vars.yoyoEase,
+ keyframes = vars.keyframes,
+ autoRevert = vars.autoRevert,
+ dur = tween._dur,
+ prevStartAt = tween._startAt,
+ targets = tween._targets,
+ parent = tween.parent,
+ fullTargets = parent && parent.data === "nested" ? parent.parent._targets : targets,
+ autoOverwrite = tween._overwrite === "auto" && !_suppressOverwrites,
+ tl = tween.timeline,
+ cleanVars,
+ i,
+ p,
+ pt,
+ target,
+ hasPriority,
+ gsData,
+ harness,
+ plugin,
+ ptLookup,
+ index,
+ harnessVars,
+ overwritten;
+ tl && (!keyframes || !ease) && (ease = "none");
+ tween._ease = _parseEase(ease, _defaults.ease);
+ tween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;
+
+ if (yoyoEase && tween._yoyo && !tween._repeat) {
+ //there must have been a parent timeline with yoyo:true that is currently in its yoyo phase, so flip the eases.
+ yoyoEase = tween._yEase;
+ tween._yEase = tween._ease;
+ tween._ease = yoyoEase;
+ }
+
+ tween._from = !tl && !!vars.runBackwards; //nested timelines should never run backwards - the backwards-ness is in the child tweens.
+
+ if (!tl || keyframes && !vars.stagger) {
+ //if there's an internal timeline, skip all the parsing because we passed that task down the chain.
+ harness = targets[0] ? _getCache(targets[0]).harness : 0;
+ harnessVars = harness && vars[harness.prop]; //someone may need to specify CSS-specific values AND non-CSS values, like if the element has an "x" property plus it's a standard DOM element. We allow people to distinguish by wrapping plugin-specific stuff in a css:{} object for example.
+
+ cleanVars = _copyExcluding(vars, _reservedProps);
+
+ if (prevStartAt) {
+ prevStartAt.revert(runBackwards && dur ? _revertConfig : _startAtRevertConfig); // if it's a "startAt" (not "from()" or runBackwards: true), we only need to do a shallow revert (keep transforms cached in CSSPlugin)
+ // don't just _removeFromParent(prevStartAt.render(-1, true)) because that'll leave inline styles. We're creating a new _startAt for "startAt" tweens that re-capture things to ensure that if the pre-tween values changed since the tween was created, they're recorded.
+
+ prevStartAt._lazy = 0;
+ }
+
+ if (startAt) {
+ _removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({
+ data: "isStart",
+ overwrite: false,
+ parent: parent,
+ immediateRender: true,
+ lazy: _isNotFalse(lazy),
+ startAt: null,
+ delay: 0,
+ onUpdate: onUpdate,
+ onUpdateParams: onUpdateParams,
+ callbackScope: callbackScope,
+ stagger: 0
+ }, startAt))); //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, from, to).fromTo(e, to, from);
+
+
+ time < 0 && (_reverting || !immediateRender && !autoRevert) && tween._startAt.revert(_revertConfig); // rare edge case, like if a render is forced in the negative direction of a non-initted tween.
+
+ if (immediateRender) {
+ if (dur && time <= 0) {
+ time && (tween._zTime = time);
+ return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.
+ }
+ }
+ } else if (runBackwards && dur) {
+ //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)
+ if (!prevStartAt) {
+ time && (immediateRender = false); //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0
+
+ p = _setDefaults({
+ overwrite: false,
+ data: "isFromStart",
+ //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
+ lazy: immediateRender && _isNotFalse(lazy),
+ immediateRender: immediateRender,
+ //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
+ stagger: 0,
+ parent: parent //ensures that nested tweens that had a stagger are handled properly, like gsap.from(".class", {y:gsap.utils.wrap([-100,100])})
+
+ }, cleanVars);
+ harnessVars && (p[harness.prop] = harnessVars); // in case someone does something like .from(..., {css:{}})
+
+ _removeFromParent(tween._startAt = Tween.set(targets, p));
+
+ time < 0 && (_reverting ? tween._startAt.revert(_revertConfig) : tween._startAt.render(-1, true));
+ tween._zTime = time;
+
+ if (!immediateRender) {
+ _initTween(tween._startAt, _tinyNum); //ensures that the initial values are recorded
+
+ } else if (!time) {
+ return;
+ }
+ }
+ }
+
+ tween._pt = tween._ptCache = 0;
+ lazy = dur && _isNotFalse(lazy) || lazy && !dur;
+
+ for (i = 0; i < targets.length; i++) {
+ target = targets[i];
+ gsData = target._gsap || _harness(targets)[i]._gsap;
+ tween._ptLookup[i] = ptLookup = {};
+ _lazyLookup[gsData.id] && _lazyTweens.length && _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)
+
+ index = fullTargets === targets ? i : fullTargets.indexOf(target);
+
+ if (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {
+ tween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+ plugin._props.forEach(function (name) {
+ ptLookup[name] = pt;
+ });
+
+ plugin.priority && (hasPriority = 1);
+ }
+
+ if (!harness || harnessVars) {
+ for (p in cleanVars) {
+ if (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {
+ plugin.priority && (hasPriority = 1);
+ } else {
+ ptLookup[p] = pt = _addPropTween.call(tween, target, p, "get", cleanVars[p], index, fullTargets, 0, vars.stringFilter);
+ }
+ }
+ }
+
+ tween._op && tween._op[i] && tween.kill(target, tween._op[i]);
+
+ if (autoOverwrite && tween._pt) {
+ _overwritingTween = tween;
+
+ _globalTimeline.killTweensOf(target, ptLookup, tween.globalTime(time)); // make sure the overwriting doesn't overwrite THIS tween!!!
+
+
+ overwritten = !tween.parent;
+ _overwritingTween = 0;
+ }
+
+ tween._pt && lazy && (_lazyLookup[gsData.id] = 1);
+ }
+
+ hasPriority && _sortPropTweensByPriority(tween);
+ tween._onInit && tween._onInit(tween); //plugins like RoundProps must wait until ALL of the PropTweens are instantiated. In the plugin's init() function, it sets the _onInit on the tween instance. May not be pretty/intuitive, but it's fast and keeps file size down.
+ }
+
+ tween._onUpdate = onUpdate;
+ tween._initted = (!tween._op || tween._pt) && !overwritten; // if overwrittenProps resulted in the entire tween being killed, do NOT flag it as initted or else it may render for one tick.
+
+ keyframes && time <= 0 && tl.render(_bigNum, true, true); // if there's a 0% keyframe, it'll render in the "before" state for any staggered/delayed animations thus when the following tween initializes, it'll use the "before" state instead of the "after" state as the initial values.
+},
+ _updatePropTweens = function _updatePropTweens(tween, property, value, start, startIsRelative, ratio, time) {
+ var ptCache = (tween._pt && tween._ptCache || (tween._ptCache = {}))[property],
+ pt,
+ rootPT,
+ lookup,
+ i;
+
+ if (!ptCache) {
+ ptCache = tween._ptCache[property] = [];
+ lookup = tween._ptLookup;
+ i = tween._targets.length;
+
+ while (i--) {
+ pt = lookup[i][property];
+
+ if (pt && pt.d && pt.d._pt) {
+ // it's a plugin, so find the nested PropTween
+ pt = pt.d._pt;
+
+ while (pt && pt.p !== property && pt.fp !== property) {
+ // "fp" is functionParam for things like setting CSS variables which require .setProperty("--var-name", value)
+ pt = pt._next;
+ }
+ }
+
+ if (!pt) {
+ // there is no PropTween associated with that property, so we must FORCE one to be created and ditch out of this
+ // if the tween has other properties that already rendered at new positions, we'd normally have to rewind to put them back like tween.render(0, true) before forcing an _initTween(), but that can create another edge case like tweening a timeline's progress would trigger onUpdates to fire which could move other things around. It's better to just inform users that .resetTo() should ONLY be used for tweens that already have that property. For example, you can't gsap.to(...{ y: 0 }) and then tween.restTo("x", 200) for example.
+ _forceAllPropTweens = 1; // otherwise, when we _addPropTween() and it finds no change between the start and end values, it skips creating a PropTween (for efficiency...why tween when there's no difference?) but in this case we NEED that PropTween created so we can edit it.
+
+ tween.vars[property] = "+=0";
+
+ _initTween(tween, time);
+
+ _forceAllPropTweens = 0;
+ return 1;
+ }
+
+ ptCache.push(pt);
+ }
+ }
+
+ i = ptCache.length;
+
+ while (i--) {
+ rootPT = ptCache[i];
+ pt = rootPT._pt || rootPT; // complex values may have nested PropTweens. We only accommodate the FIRST value.
+
+ pt.s = (start || start === 0) && !startIsRelative ? start : pt.s + (start || 0) + ratio * pt.c;
+ pt.c = value - pt.s;
+ rootPT.e && (rootPT.e = _round(value) + getUnit(rootPT.e)); // mainly for CSSPlugin (end value)
+
+ rootPT.b && (rootPT.b = pt.s + getUnit(rootPT.b)); // (beginning value)
+ }
+},
+ _addAliasesToVars = function _addAliasesToVars(targets, vars) {
+ var harness = targets[0] ? _getCache(targets[0]).harness : 0,
+ propertyAliases = harness && harness.aliases,
+ copy,
+ p,
+ i,
+ aliases;
+
+ if (!propertyAliases) {
+ return vars;
+ }
+
+ copy = _merge({}, vars);
+
+ for (p in propertyAliases) {
+ if (p in copy) {
+ aliases = propertyAliases[p].split(",");
+ i = aliases.length;
+
+ while (i--) {
+ copy[aliases[i]] = copy[p];
+ }
+ }
+ }
+
+ return copy;
+},
+ // parses multiple formats, like {"0%": {x: 100}, {"50%": {x: -20}} and { x: {"0%": 100, "50%": -20} }, and an "ease" can be set on any object. We populate an "allProps" object with an Array for each property, like {x: [{}, {}], y:[{}, {}]} with data for each property tween. The objects have a "t" (time), "v", (value), and "e" (ease) property. This allows us to piece together a timeline later.
+_parseKeyframe = function _parseKeyframe(prop, obj, allProps, easeEach) {
+ var ease = obj.ease || easeEach || "power1.inOut",
+ p,
+ a;
+
+ if (_isArray(obj)) {
+ a = allProps[prop] || (allProps[prop] = []); // t = time (out of 100), v = value, e = ease
+
+ obj.forEach(function (value, i) {
+ return a.push({
+ t: i / (obj.length - 1) * 100,
+ v: value,
+ e: ease
+ });
+ });
+ } else {
+ for (p in obj) {
+ a = allProps[p] || (allProps[p] = []);
+ p === "ease" || a.push({
+ t: parseFloat(prop),
+ v: obj[p],
+ e: ease
+ });
+ }
+ }
+},
+ _parseFuncOrString = function _parseFuncOrString(value, tween, i, target, targets) {
+ return _isFunction(value) ? value.call(tween, i, target, targets) : _isString(value) && ~value.indexOf("random(") ? _replaceRandom(value) : value;
+},
+ _staggerTweenProps = _callbackNames + "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert",
+ _staggerPropsToSkip = {};
+
+_forEachName(_staggerTweenProps + ",id,stagger,delay,duration,paused,scrollTrigger", function (name) {
+ return _staggerPropsToSkip[name] = 1;
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * TWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+export var Tween = /*#__PURE__*/function (_Animation2) {
+ _inheritsLoose(Tween, _Animation2);
+
+ function Tween(targets, vars, position, skipInherit) {
+ var _this3;
+
+ if (typeof vars === "number") {
+ position.duration = vars;
+ vars = position;
+ position = null;
+ }
+
+ _this3 = _Animation2.call(this, skipInherit ? vars : _inheritDefaults(vars)) || this;
+ var _this3$vars = _this3.vars,
+ duration = _this3$vars.duration,
+ delay = _this3$vars.delay,
+ immediateRender = _this3$vars.immediateRender,
+ stagger = _this3$vars.stagger,
+ overwrite = _this3$vars.overwrite,
+ keyframes = _this3$vars.keyframes,
+ defaults = _this3$vars.defaults,
+ scrollTrigger = _this3$vars.scrollTrigger,
+ yoyoEase = _this3$vars.yoyoEase,
+ parent = vars.parent || _globalTimeline,
+ parsedTargets = (_isArray(targets) || _isTypedArray(targets) ? _isNumber(targets[0]) : "length" in vars) ? [targets] : toArray(targets),
+ tl,
+ i,
+ copy,
+ l,
+ p,
+ curTarget,
+ staggerFunc,
+ staggerVarsToMerge;
+ _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn("GSAP target " + targets + " not found. https://greensock.com", !_config.nullTargetWarn) || [];
+ _this3._ptLookup = []; //PropTween lookup. An array containing an object for each target, having keys for each tweening property
+
+ _this3._overwrite = overwrite;
+
+ if (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {
+ vars = _this3.vars;
+ tl = _this3.timeline = new Timeline({
+ data: "nested",
+ defaults: defaults || {}
+ });
+ tl.kill();
+ tl.parent = tl._dp = _assertThisInitialized(_this3);
+ tl._start = 0;
+
+ if (stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {
+ l = parsedTargets.length;
+ staggerFunc = stagger && distribute(stagger);
+
+ if (_isObject(stagger)) {
+ //users can pass in callbacks like onStart/onComplete in the stagger object. These should fire with each individual tween.
+ for (p in stagger) {
+ if (~_staggerTweenProps.indexOf(p)) {
+ staggerVarsToMerge || (staggerVarsToMerge = {});
+ staggerVarsToMerge[p] = stagger[p];
+ }
+ }
+ }
+
+ for (i = 0; i < l; i++) {
+ copy = _copyExcluding(vars, _staggerPropsToSkip);
+ copy.stagger = 0;
+ yoyoEase && (copy.yoyoEase = yoyoEase);
+ staggerVarsToMerge && _merge(copy, staggerVarsToMerge);
+ curTarget = parsedTargets[i]; //don't just copy duration or delay because if they're a string or function, we'd end up in an infinite loop because _isFuncOrString() would evaluate as true in the child tweens, entering this loop, etc. So we parse the value straight from vars and default to 0.
+
+ copy.duration = +_parseFuncOrString(duration, _assertThisInitialized(_this3), i, curTarget, parsedTargets);
+ copy.delay = (+_parseFuncOrString(delay, _assertThisInitialized(_this3), i, curTarget, parsedTargets) || 0) - _this3._delay;
+
+ if (!stagger && l === 1 && copy.delay) {
+ // if someone does delay:"random(1, 5)", repeat:-1, for example, the delay shouldn't be inside the repeat.
+ _this3._delay = delay = copy.delay;
+ _this3._start += delay;
+ copy.delay = 0;
+ }
+
+ tl.to(curTarget, copy, staggerFunc ? staggerFunc(i, curTarget, parsedTargets) : 0);
+ tl._ease = _easeMap.none;
+ }
+
+ tl.duration() ? duration = delay = 0 : _this3.timeline = 0; // if the timeline's duration is 0, we don't need a timeline internally!
+ } else if (keyframes) {
+ _inheritDefaults(_setDefaults(tl.vars.defaults, {
+ ease: "none"
+ }));
+
+ tl._ease = _parseEase(keyframes.ease || vars.ease || "none");
+ var time = 0,
+ a,
+ kf,
+ v;
+
+ if (_isArray(keyframes)) {
+ keyframes.forEach(function (frame) {
+ return tl.to(parsedTargets, frame, ">");
+ });
+ tl.duration(); // to ensure tl._dur is cached because we tap into it for performance purposes in the render() method.
+ } else {
+ copy = {};
+
+ for (p in keyframes) {
+ p === "ease" || p === "easeEach" || _parseKeyframe(p, keyframes[p], copy, keyframes.easeEach);
+ }
+
+ for (p in copy) {
+ a = copy[p].sort(function (a, b) {
+ return a.t - b.t;
+ });
+ time = 0;
+
+ for (i = 0; i < a.length; i++) {
+ kf = a[i];
+ v = {
+ ease: kf.e,
+ duration: (kf.t - (i ? a[i - 1].t : 0)) / 100 * duration
+ };
+ v[p] = kf.v;
+ tl.to(parsedTargets, v, time);
+ time += v.duration;
+ }
+ }
+
+ tl.duration() < duration && tl.to({}, {
+ duration: duration - tl.duration()
+ }); // in case keyframes didn't go to 100%
+ }
+ }
+
+ duration || _this3.duration(duration = tl.duration());
+ } else {
+ _this3.timeline = 0; //speed optimization, faster lookups (no going up the prototype chain)
+ }
+
+ if (overwrite === true && !_suppressOverwrites) {
+ _overwritingTween = _assertThisInitialized(_this3);
+
+ _globalTimeline.killTweensOf(parsedTargets);
+
+ _overwritingTween = 0;
+ }
+
+ _addToTimeline(parent, _assertThisInitialized(_this3), position);
+
+ vars.reversed && _this3.reverse();
+ vars.paused && _this3.paused(true);
+
+ if (immediateRender || !duration && !keyframes && _this3._start === _roundPrecise(parent._time) && _isNotFalse(immediateRender) && _hasNoPausedAncestors(_assertThisInitialized(_this3)) && parent.data !== "nested") {
+ _this3._tTime = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
+
+ _this3.render(Math.max(0, -delay)); //in case delay is negative
+
+ }
+
+ scrollTrigger && _scrollTrigger(_assertThisInitialized(_this3), scrollTrigger);
+ return _this3;
+ }
+
+ var _proto3 = Tween.prototype;
+
+ _proto3.render = function render(totalTime, suppressEvents, force) {
+ var prevTime = this._time,
+ tDur = this._tDur,
+ dur = this._dur,
+ isNegative = totalTime < 0,
+ tTime = totalTime > tDur - _tinyNum && !isNegative ? tDur : totalTime < _tinyNum ? 0 : totalTime,
+ time,
+ pt,
+ iteration,
+ cycleDuration,
+ prevIteration,
+ isYoyo,
+ ratio,
+ timeline,
+ yoyoEase;
+
+ if (!dur) {
+ _renderZeroDurationTween(this, totalTime, suppressEvents, force);
+ } else if (tTime !== this._tTime || !totalTime || force || !this._initted && this._tTime || this._startAt && this._zTime < 0 !== isNegative) {
+ //this senses if we're crossing over the start time, in which case we must record _zTime and force the render, but we do it in this lengthy conditional way for performance reasons (usually we can skip the calculations): this._initted && (this._zTime < 0) !== (totalTime < 0)
+ time = tTime;
+ timeline = this.timeline;
+
+ if (this._repeat) {
+ //adjust the time for repeats and yoyos
+ cycleDuration = dur + this._rDelay;
+
+ if (this._repeat < -1 && isNegative) {
+ return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);
+ }
+
+ time = _roundPrecise(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+ if (tTime === tDur) {
+ // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)
+ iteration = this._repeat;
+ time = dur;
+ } else {
+ iteration = ~~(tTime / cycleDuration);
+
+ if (iteration && iteration === tTime / cycleDuration) {
+ time = dur;
+ iteration--;
+ }
+
+ time > dur && (time = dur);
+ }
+
+ isYoyo = this._yoyo && iteration & 1;
+
+ if (isYoyo) {
+ yoyoEase = this._yEase;
+ time = dur - time;
+ }
+
+ prevIteration = _animationCycle(this._tTime, cycleDuration);
+
+ if (time === prevTime && !force && this._initted) {
+ //could be during the repeatDelay part. No need to render and fire callbacks.
+ this._tTime = tTime;
+ return this;
+ }
+
+ if (iteration !== prevIteration) {
+ timeline && this._yEase && _propagateYoyoEase(timeline, isYoyo); //repeatRefresh functionality
+
+ if (this.vars.repeatRefresh && !isYoyo && !this._lock) {
+ this._lock = force = 1; //force, otherwise if lazy is true, the _attemptInitTween() will return and we'll jump out and get caught bouncing on each tick.
+
+ this.render(_roundPrecise(cycleDuration * iteration), true).invalidate()._lock = 0;
+ }
+ }
+ }
+
+ if (!this._initted) {
+ if (_attemptInitTween(this, isNegative ? totalTime : time, force, suppressEvents)) {
+ this._tTime = 0; // in constructor if immediateRender is true, we set _tTime to -_tinyNum to have the playhead cross the starting point but we can't leave _tTime as a negative number.
+
+ return this;
+ }
+
+ if (prevTime !== this._time) {
+ // rare edge case - during initialization, an onUpdate in the _startAt (.fromTo()) might force this tween to render at a different spot in which case we should ditch this render() call so that it doesn't revert the values.
+ return this;
+ }
+
+ if (dur !== this._dur) {
+ // while initting, a plugin like InertiaPlugin might alter the duration, so rerun from the start to ensure everything renders as it should.
+ return this.render(totalTime, suppressEvents, force);
+ }
+ }
+
+ this._tTime = tTime;
+ this._time = time;
+
+ if (!this._act && this._ts) {
+ this._act = 1; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+ this._lazy = 0;
+ }
+
+ this.ratio = ratio = (yoyoEase || this._ease)(time / dur);
+
+ if (this._from) {
+ this.ratio = ratio = 1 - ratio;
+ }
+
+ if (time && !prevTime && !suppressEvents) {
+ _callback(this, "onStart");
+
+ if (this._tTime !== tTime) {
+ // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.
+ return this;
+ }
+ }
+
+ pt = this._pt;
+
+ while (pt) {
+ pt.r(ratio, pt.d);
+ pt = pt._next;
+ }
+
+ timeline && timeline.render(totalTime < 0 ? totalTime : !time && isYoyo ? -_tinyNum : timeline._dur * timeline._ease(time / this._dur), suppressEvents, force) || this._startAt && (this._zTime = totalTime);
+
+ if (this._onUpdate && !suppressEvents) {
+ isNegative && _rewindStartAt(this, totalTime, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
+
+ _callback(this, "onUpdate");
+ }
+
+ this._repeat && iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent && _callback(this, "onRepeat");
+
+ if ((tTime === this._tDur || !tTime) && this._tTime === tTime) {
+ isNegative && !this._onUpdate && _rewindStartAt(this, totalTime, true, true);
+ (totalTime || !dur) && (tTime === this._tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if we're rendering at exactly a time of 0, as there could be autoRevert values that should get set on the next tick (if the playhead goes backward beyond the startTime, negative totalTime). Don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+ if (!suppressEvents && !(isNegative && !prevTime) && (tTime || prevTime)) {
+ // if prevTime and tTime are zero, we shouldn't fire the onReverseComplete. This could happen if you gsap.to(... {paused:true}).play();
+ _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+
+ this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();
+ }
+ }
+ }
+
+ return this;
+ };
+
+ _proto3.targets = function targets() {
+ return this._targets;
+ };
+
+ _proto3.invalidate = function invalidate() {
+ this._pt = this._op = this._startAt = this._onUpdate = this._lazy = this.ratio = 0;
+ this._ptLookup = [];
+ this.timeline && this.timeline.invalidate();
+ return _Animation2.prototype.invalidate.call(this);
+ };
+
+ _proto3.resetTo = function resetTo(property, value, start, startIsRelative) {
+ _tickerActive || _ticker.wake();
+ this._ts || this.play();
+ var time = Math.min(this._dur, (this._dp._time - this._start) * this._ts),
+ ratio;
+ this._initted || _initTween(this, time);
+ ratio = this._ease(time / this._dur); // don't just get tween.ratio because it may not have rendered yet.
+ // possible future addition to allow an object with multiple values to update, like tween.resetTo({x: 100, y: 200}); At this point, it doesn't seem worth the added kb given the fact that most users will likely opt for the convenient gsap.quickTo() way of interacting with this method.
+ // if (_isObject(property)) { // performance optimization
+ // for (p in property) {
+ // if (_updatePropTweens(this, p, property[p], value ? value[p] : null, start, ratio, time)) {
+ // return this.resetTo(property, value, start, startIsRelative); // if a PropTween wasn't found for the property, it'll get forced with a re-initialization so we need to jump out and start over again.
+ // }
+ // }
+ // } else {
+
+ if (_updatePropTweens(this, property, value, start, startIsRelative, ratio, time)) {
+ return this.resetTo(property, value, start, startIsRelative); // if a PropTween wasn't found for the property, it'll get forced with a re-initialization so we need to jump out and start over again.
+ } //}
+
+
+ _alignPlayhead(this, 0);
+
+ this.parent || _addLinkedListItem(this._dp, this, "_first", "_last", this._dp._sort ? "_start" : 0);
+ return this.render(0);
+ };
+
+ _proto3.kill = function kill(targets, vars) {
+ if (vars === void 0) {
+ vars = "all";
+ }
+
+ if (!targets && (!vars || vars === "all")) {
+ this._lazy = this._pt = 0;
+ return this.parent ? _interrupt(this) : this;
+ }
+
+ if (this.timeline) {
+ var tDur = this.timeline.totalDuration();
+ this.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true)._first || _interrupt(this); // if nothing is left tweening, interrupt.
+
+ this.parent && tDur !== this.timeline.totalDuration() && _setDuration(this, this._dur * this.timeline._tDur / tDur, 0, 1); // if a nested tween is killed that changes the duration, it should affect this tween's duration. We must use the ratio, though, because sometimes the internal timeline is stretched like for keyframes where they don't all add up to whatever the parent tween's duration was set to.
+
+ return this;
+ }
+
+ var parsedTargets = this._targets,
+ killingTargets = targets ? toArray(targets) : parsedTargets,
+ propTweenLookup = this._ptLookup,
+ firstPT = this._pt,
+ overwrittenProps,
+ curLookup,
+ curOverwriteProps,
+ props,
+ p,
+ pt,
+ i;
+
+ if ((!vars || vars === "all") && _arraysMatch(parsedTargets, killingTargets)) {
+ vars === "all" && (this._pt = 0);
+ return _interrupt(this);
+ }
+
+ overwrittenProps = this._op = this._op || [];
+
+ if (vars !== "all") {
+ //so people can pass in a comma-delimited list of property names
+ if (_isString(vars)) {
+ p = {};
+
+ _forEachName(vars, function (name) {
+ return p[name] = 1;
+ });
+
+ vars = p;
+ }
+
+ vars = _addAliasesToVars(parsedTargets, vars);
+ }
+
+ i = parsedTargets.length;
+
+ while (i--) {
+ if (~killingTargets.indexOf(parsedTargets[i])) {
+ curLookup = propTweenLookup[i];
+
+ if (vars === "all") {
+ overwrittenProps[i] = vars;
+ props = curLookup;
+ curOverwriteProps = {};
+ } else {
+ curOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};
+ props = vars;
+ }
+
+ for (p in props) {
+ pt = curLookup && curLookup[p];
+
+ if (pt) {
+ if (!("kill" in pt.d) || pt.d.kill(p) === true) {
+ _removeLinkedListItem(this, pt, "_pt");
+ }
+
+ delete curLookup[p];
+ }
+
+ if (curOverwriteProps !== "all") {
+ curOverwriteProps[p] = 1;
+ }
+ }
+ }
+ }
+
+ this._initted && !this._pt && firstPT && _interrupt(this); //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.
+
+ return this;
+ };
+
+ Tween.to = function to(targets, vars) {
+ return new Tween(targets, vars, arguments[2]);
+ };
+
+ Tween.from = function from(targets, vars) {
+ return _createTweenType(1, arguments);
+ };
+
+ Tween.delayedCall = function delayedCall(delay, callback, params, scope) {
+ return new Tween(callback, 0, {
+ immediateRender: false,
+ lazy: false,
+ overwrite: false,
+ delay: delay,
+ onComplete: callback,
+ onReverseComplete: callback,
+ onCompleteParams: params,
+ onReverseCompleteParams: params,
+ callbackScope: scope
+ });
+ };
+
+ Tween.fromTo = function fromTo(targets, fromVars, toVars) {
+ return _createTweenType(2, arguments);
+ };
+
+ Tween.set = function set(targets, vars) {
+ vars.duration = 0;
+ vars.repeatDelay || (vars.repeat = 0);
+ return new Tween(targets, vars);
+ };
+
+ Tween.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+ return _globalTimeline.killTweensOf(targets, props, onlyActive);
+ };
+
+ return Tween;
+}(Animation);
+
+_setDefaults(Tween.prototype, {
+ _targets: [],
+ _lazy: 0,
+ _startAt: 0,
+ _op: 0,
+ _onInit: 0
+}); //add the pertinent timeline methods to Tween instances so that users can chain conveniently and create a timeline automatically. (removed due to concerns that it'd ultimately add to more confusion especially for beginners)
+// _forEachName("to,from,fromTo,set,call,add,addLabel,addPause", name => {
+// Tween.prototype[name] = function() {
+// let tl = new Timeline();
+// return _addToTimeline(tl, this)[name].apply(tl, toArray(arguments));
+// }
+// });
+//for backward compatibility. Leverage the timeline calls.
+
+
+_forEachName("staggerTo,staggerFrom,staggerFromTo", function (name) {
+ Tween[name] = function () {
+ var tl = new Timeline(),
+ params = _slice.call(arguments, 0);
+
+ params.splice(name === "staggerFromTo" ? 5 : 4, 0, 0);
+ return tl[name].apply(tl, params);
+ };
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * PROPTWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var _setterPlain = function _setterPlain(target, property, value) {
+ return target[property] = value;
+},
+ _setterFunc = function _setterFunc(target, property, value) {
+ return target[property](value);
+},
+ _setterFuncWithParam = function _setterFuncWithParam(target, property, value, data) {
+ return target[property](data.fp, value);
+},
+ _setterAttribute = function _setterAttribute(target, property, value) {
+ return target.setAttribute(property, value);
+},
+ _getSetter = function _getSetter(target, property) {
+ return _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain;
+},
+ _renderPlain = function _renderPlain(ratio, data) {
+ return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 1000000) / 1000000, data);
+},
+ _renderBoolean = function _renderBoolean(ratio, data) {
+ return data.set(data.t, data.p, !!(data.s + data.c * ratio), data);
+},
+ _renderComplexString = function _renderComplexString(ratio, data) {
+ var pt = data._pt,
+ s = "";
+
+ if (!ratio && data.b) {
+ //b = beginning string
+ s = data.b;
+ } else if (ratio === 1 && data.e) {
+ //e = ending string
+ s = data.e;
+ } else {
+ while (pt) {
+ s = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : Math.round((pt.s + pt.c * ratio) * 10000) / 10000) + s; //we use the "p" property for the text inbetween (like a suffix). And in the context of a complex string, the modifier (m) is typically just Math.round(), like for RGB colors.
+
+ pt = pt._next;
+ }
+
+ s += data.c; //we use the "c" of the PropTween to store the final chunk of non-numeric text.
+ }
+
+ data.set(data.t, data.p, s, data);
+},
+ _renderPropTweens = function _renderPropTweens(ratio, data) {
+ var pt = data._pt;
+
+ while (pt) {
+ pt.r(ratio, pt.d);
+ pt = pt._next;
+ }
+},
+ _addPluginModifier = function _addPluginModifier(modifier, tween, target, property) {
+ var pt = this._pt,
+ next;
+
+ while (pt) {
+ next = pt._next;
+ pt.p === property && pt.modifier(modifier, tween, target);
+ pt = next;
+ }
+},
+ _killPropTweensOf = function _killPropTweensOf(property) {
+ var pt = this._pt,
+ hasNonDependentRemaining,
+ next;
+
+ while (pt) {
+ next = pt._next;
+
+ if (pt.p === property && !pt.op || pt.op === property) {
+ _removeLinkedListItem(this, pt, "_pt");
+ } else if (!pt.dep) {
+ hasNonDependentRemaining = 1;
+ }
+
+ pt = next;
+ }
+
+ return !hasNonDependentRemaining;
+},
+ _setterWithModifier = function _setterWithModifier(target, property, value, data) {
+ data.mSet(target, property, data.m.call(data.tween, value, data.mt), data);
+},
+ _sortPropTweensByPriority = function _sortPropTweensByPriority(parent) {
+ var pt = parent._pt,
+ next,
+ pt2,
+ first,
+ last; //sorts the PropTween linked list in order of priority because some plugins need to do their work after ALL of the PropTweens were created (like RoundPropsPlugin and ModifiersPlugin)
+
+ while (pt) {
+ next = pt._next;
+ pt2 = first;
+
+ while (pt2 && pt2.pr > pt.pr) {
+ pt2 = pt2._next;
+ }
+
+ if (pt._prev = pt2 ? pt2._prev : last) {
+ pt._prev._next = pt;
+ } else {
+ first = pt;
+ }
+
+ if (pt._next = pt2) {
+ pt2._prev = pt;
+ } else {
+ last = pt;
+ }
+
+ pt = next;
+ }
+
+ parent._pt = first;
+}; //PropTween key: t = target, p = prop, r = renderer, d = data, s = start, c = change, op = overwriteProperty (ONLY populated when it's different than p), pr = priority, _next/_prev for the linked list siblings, set = setter, m = modifier, mSet = modifierSetter (the original setter, before a modifier was added)
+
+
+export var PropTween = /*#__PURE__*/function () {
+ function PropTween(next, target, prop, start, change, renderer, data, setter, priority) {
+ this.t = target;
+ this.s = start;
+ this.c = change;
+ this.p = prop;
+ this.r = renderer || _renderPlain;
+ this.d = data || this;
+ this.set = setter || _setterPlain;
+ this.pr = priority || 0;
+ this._next = next;
+
+ if (next) {
+ next._prev = this;
+ }
+ }
+
+ var _proto4 = PropTween.prototype;
+
+ _proto4.modifier = function modifier(func, tween, target) {
+ this.mSet = this.mSet || this.set; //in case it was already set (a PropTween can only have one modifier)
+
+ this.set = _setterWithModifier;
+ this.m = func;
+ this.mt = target; //modifier target
+
+ this.tween = tween;
+ };
+
+ return PropTween;
+}(); //Initialization tasks
+
+_forEachName(_callbackNames + "parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger", function (name) {
+ return _reservedProps[name] = 1;
+});
+
+_globals.TweenMax = _globals.TweenLite = Tween;
+_globals.TimelineLite = _globals.TimelineMax = Timeline;
+_globalTimeline = new Timeline({
+ sortChildren: false,
+ defaults: _defaults,
+ autoRemoveChildren: true,
+ id: "root",
+ smoothChildTiming: true
+});
+_config.stringFilter = _colorStringFilter;
+
+var _media = [],
+ _listeners = {},
+ _emptyArray = [],
+ _lastMediaTime = 0,
+ _dispatch = function _dispatch(type) {
+ return (_listeners[type] || _emptyArray).map(function (f) {
+ return f();
+ });
+},
+ _onMediaChange = function _onMediaChange() {
+ var time = Date.now(),
+ matches = [];
+
+ if (time - _lastMediaTime > 2) {
+ _dispatch("matchMediaInit");
+
+ _media.forEach(function (c) {
+ var queries = c.queries,
+ conditions = c.conditions,
+ match,
+ p,
+ anyMatch,
+ toggled;
+
+ for (p in queries) {
+ match = _win.matchMedia(queries[p]).matches; // Firefox doesn't update the "matches" property of the MediaQueryList object correctly - it only does so as it calls its change handler - so we must re-create a media query here to ensure it's accurate.
+
+ match && (anyMatch = 1);
+
+ if (match !== conditions[p]) {
+ conditions[p] = match;
+ toggled = 1;
+ }
+ }
+
+ if (toggled) {
+ c.revert();
+ anyMatch && matches.push(c);
+ }
+ });
+
+ _dispatch("matchMediaRevert");
+
+ matches.forEach(function (c) {
+ return c.onMatch(c);
+ });
+ _lastMediaTime = time;
+
+ _dispatch("matchMedia");
+ }
+};
+
+var Context = /*#__PURE__*/function () {
+ function Context(func, scope) {
+ this.selector = scope && selector(scope);
+ this.data = [];
+ this._r = []; // returned/cleanup functions
+
+ this.isReverted = false;
+ func && this.add(func);
+ }
+
+ var _proto5 = Context.prototype;
+
+ _proto5.add = function add(name, func, scope) {
+ if (_isFunction(name)) {
+ scope = func;
+ func = name;
+ name = _isFunction;
+ }
+
+ var self = this,
+ f = function f() {
+ var prev = _context,
+ prevSelector = self.selector,
+ result;
+ prev && prev.data.push(self);
+ scope && (self.selector = selector(scope));
+ _context = self;
+ result = func.apply(self, arguments);
+ _isFunction(result) && self._r.push(result);
+ _context = prev;
+ self.selector = prevSelector;
+ self.isReverted = false;
+ return result;
+ };
+
+ self.last = f;
+ return name === _isFunction ? f(self) : name ? self[name] = f : f;
+ };
+
+ _proto5.ignore = function ignore(func) {
+ var prev = _context;
+ _context = null;
+ func(this);
+ _context = prev;
+ };
+
+ _proto5.getTweens = function getTweens() {
+ var a = [];
+ this.data.forEach(function (e) {
+ return e instanceof Context ? a.push.apply(a, e.getTweens()) : e instanceof Tween && e._targets[0] !== e.vars.onComplete && a.push(e);
+ }); // don't include delayedCalls
+
+ return a;
+ };
+
+ _proto5.clear = function clear() {
+ this._r.length = this.data.length = 0;
+ };
+
+ _proto5.kill = function kill(revert, matchMedia) {
+ var _this4 = this;
+
+ if (revert) {
+ // save as an object so that we can cache the globalTime for each tween to optimize performance during the sort
+ this.getTweens().map(function (t) {
+ return {
+ g: t.globalTime(0),
+ t: t
+ };
+ }).sort(function (a, b) {
+ return b.g - a.g || -1;
+ }).forEach(function (o) {
+ return o.t.revert(revert);
+ }); // note: all of the _startAt tweens should be reverted in reverse order that thy were created, and they'll all have the same globalTime (-1) so the " || -1" in the sort keeps the order properly.
+
+ this.data.forEach(function (e) {
+ return !(e instanceof Animation) && e.revert && e.revert(revert);
+ });
+
+ this._r.forEach(function (f) {
+ return f(revert, _this4);
+ });
+
+ this.isReverted = true;
+ } else {
+ this.data.forEach(function (e) {
+ return e.kill && e.kill();
+ });
+ }
+
+ this.clear();
+
+ if (matchMedia) {
+ var i = _media.indexOf(this);
+
+ !!~i && _media.splice(i, 1);
+ }
+ };
+
+ _proto5.revert = function revert(config) {
+ this.kill(config || {});
+ };
+
+ return Context;
+}();
+
+var MatchMedia = /*#__PURE__*/function () {
+ function MatchMedia(scope) {
+ this.contexts = [];
+ this.scope = scope;
+ }
+
+ var _proto6 = MatchMedia.prototype;
+
+ _proto6.add = function add(conditions, func, scope) {
+ _isObject(conditions) || (conditions = {
+ matches: conditions
+ });
+ var context = new Context(0, scope || this.scope),
+ cond = context.conditions = {},
+ mq,
+ p,
+ active;
+ this.contexts.push(context);
+ func = context.add("onMatch", func);
+ context.queries = conditions;
+
+ for (p in conditions) {
+ if (p === "all") {
+ active = 1;
+ } else {
+ mq = _win.matchMedia(conditions[p]);
+
+ if (mq) {
+ _media.indexOf(context) < 0 && _media.push(context);
+ (cond[p] = mq.matches) && (active = 1);
+ mq.addListener ? mq.addListener(_onMediaChange) : mq.addEventListener("change", _onMediaChange);
+ }
+ }
+ }
+
+ active && func(context);
+ return this;
+ } // refresh() {
+ // let time = _lastMediaTime,
+ // media = _media;
+ // _lastMediaTime = -1;
+ // _media = this.contexts;
+ // _onMediaChange();
+ // _lastMediaTime = time;
+ // _media = media;
+ // }
+ ;
+
+ _proto6.revert = function revert(config) {
+ this.kill(config || {});
+ };
+
+ _proto6.kill = function kill(revert) {
+ this.contexts.forEach(function (c) {
+ return c.kill(revert, true);
+ });
+ };
+
+ return MatchMedia;
+}();
+/*
+ * --------------------------------------------------------------------------------------
+ * GSAP
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var _gsap = {
+ registerPlugin: function registerPlugin() {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+
+ args.forEach(function (config) {
+ return _createPlugin(config);
+ });
+ },
+ timeline: function timeline(vars) {
+ return new Timeline(vars);
+ },
+ getTweensOf: function getTweensOf(targets, onlyActive) {
+ return _globalTimeline.getTweensOf(targets, onlyActive);
+ },
+ getProperty: function getProperty(target, property, unit, uncache) {
+ _isString(target) && (target = toArray(target)[0]); //in case selector text or an array is passed in
+
+ var getter = _getCache(target || {}).get,
+ format = unit ? _passThrough : _numericIfPossible;
+
+ unit === "native" && (unit = "");
+ return !target ? target : !property ? function (property, unit, uncache) {
+ return format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+ } : format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+ },
+ quickSetter: function quickSetter(target, property, unit) {
+ target = toArray(target);
+
+ if (target.length > 1) {
+ var setters = target.map(function (t) {
+ return gsap.quickSetter(t, property, unit);
+ }),
+ l = setters.length;
+ return function (value) {
+ var i = l;
+
+ while (i--) {
+ setters[i](value);
+ }
+ };
+ }
+
+ target = target[0] || {};
+
+ var Plugin = _plugins[property],
+ cache = _getCache(target),
+ p = cache.harness && (cache.harness.aliases || {})[property] || property,
+ // in case it's an alias, like "rotate" for "rotation".
+ setter = Plugin ? function (value) {
+ var p = new Plugin();
+ _quickTween._pt = 0;
+ p.init(target, unit ? value + unit : value, _quickTween, 0, [target]);
+ p.render(1, p);
+ _quickTween._pt && _renderPropTweens(1, _quickTween);
+ } : cache.set(target, p);
+
+ return Plugin ? setter : function (value) {
+ return setter(target, p, unit ? value + unit : value, cache, 1);
+ };
+ },
+ quickTo: function quickTo(target, property, vars) {
+ var _merge2;
+
+ var tween = gsap.to(target, _merge((_merge2 = {}, _merge2[property] = "+=0.1", _merge2.paused = true, _merge2), vars || {})),
+ func = function func(value, start, startIsRelative) {
+ return tween.resetTo(property, value, start, startIsRelative);
+ };
+
+ func.tween = tween;
+ return func;
+ },
+ isTweening: function isTweening(targets) {
+ return _globalTimeline.getTweensOf(targets, true).length > 0;
+ },
+ defaults: function defaults(value) {
+ value && value.ease && (value.ease = _parseEase(value.ease, _defaults.ease));
+ return _mergeDeep(_defaults, value || {});
+ },
+ config: function config(value) {
+ return _mergeDeep(_config, value || {});
+ },
+ registerEffect: function registerEffect(_ref3) {
+ var name = _ref3.name,
+ effect = _ref3.effect,
+ plugins = _ref3.plugins,
+ defaults = _ref3.defaults,
+ extendTimeline = _ref3.extendTimeline;
+ (plugins || "").split(",").forEach(function (pluginName) {
+ return pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + " effect requires " + pluginName + " plugin.");
+ });
+
+ _effects[name] = function (targets, vars, tl) {
+ return effect(toArray(targets), _setDefaults(vars || {}, defaults), tl);
+ };
+
+ if (extendTimeline) {
+ Timeline.prototype[name] = function (targets, vars, position) {
+ return this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);
+ };
+ }
+ },
+ registerEase: function registerEase(name, ease) {
+ _easeMap[name] = _parseEase(ease);
+ },
+ parseEase: function parseEase(ease, defaultEase) {
+ return arguments.length ? _parseEase(ease, defaultEase) : _easeMap;
+ },
+ getById: function getById(id) {
+ return _globalTimeline.getById(id);
+ },
+ exportRoot: function exportRoot(vars, includeDelayedCalls) {
+ if (vars === void 0) {
+ vars = {};
+ }
+
+ var tl = new Timeline(vars),
+ child,
+ next;
+ tl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);
+
+ _globalTimeline.remove(tl);
+
+ tl._dp = 0; //otherwise it'll get re-activated when adding children and be re-introduced into _globalTimeline's linked list (then added to itself).
+
+ tl._time = tl._tTime = _globalTimeline._time;
+ child = _globalTimeline._first;
+
+ while (child) {
+ next = child._next;
+
+ if (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {
+ _addToTimeline(tl, child, child._start - child._delay);
+ }
+
+ child = next;
+ }
+
+ _addToTimeline(_globalTimeline, tl, 0);
+
+ return tl;
+ },
+ context: function context(func, scope) {
+ return func ? new Context(func, scope) : _context;
+ },
+ matchMedia: function matchMedia(scope) {
+ return new MatchMedia(scope);
+ },
+ matchMediaRefresh: function matchMediaRefresh() {
+ return _media.forEach(function (c) {
+ var cond = c.conditions,
+ found,
+ p;
+
+ for (p in cond) {
+ if (cond[p]) {
+ cond[p] = false;
+ found = 1;
+ }
+ }
+
+ found && c.revert();
+ }) || _onMediaChange();
+ },
+ addEventListener: function addEventListener(type, callback) {
+ var a = _listeners[type] || (_listeners[type] = []);
+ ~a.indexOf(callback) || a.push(callback);
+ },
+ removeEventListener: function removeEventListener(type, callback) {
+ var a = _listeners[type],
+ i = a && a.indexOf(callback);
+ i >= 0 && a.splice(i, 1);
+ },
+ utils: {
+ wrap: wrap,
+ wrapYoyo: wrapYoyo,
+ distribute: distribute,
+ random: random,
+ snap: snap,
+ normalize: normalize,
+ getUnit: getUnit,
+ clamp: clamp,
+ splitColor: splitColor,
+ toArray: toArray,
+ selector: selector,
+ mapRange: mapRange,
+ pipe: pipe,
+ unitize: unitize,
+ interpolate: interpolate,
+ shuffle: shuffle
+ },
+ install: _install,
+ effects: _effects,
+ ticker: _ticker,
+ updateRoot: Timeline.updateRoot,
+ plugins: _plugins,
+ globalTimeline: _globalTimeline,
+ core: {
+ PropTween: PropTween,
+ globals: _addGlobal,
+ Tween: Tween,
+ Timeline: Timeline,
+ Animation: Animation,
+ getCache: _getCache,
+ _removeLinkedListItem: _removeLinkedListItem,
+ reverting: function reverting() {
+ return _reverting;
+ },
+ context: function context(toAdd) {
+ if (toAdd && _context) {
+ _context.data.push(toAdd);
+
+ toAdd._ctx = _context;
+ }
+
+ return _context;
+ },
+ suppressOverwrites: function suppressOverwrites(value) {
+ return _suppressOverwrites = value;
+ }
+ }
+};
+
+_forEachName("to,from,fromTo,delayedCall,set,killTweensOf", function (name) {
+ return _gsap[name] = Tween[name];
+});
+
+_ticker.add(Timeline.updateRoot);
+
+_quickTween = _gsap.to({}, {
+ duration: 0
+}); // ---- EXTRA PLUGINS --------------------------------------------------------
+
+var _getPluginPropTween = function _getPluginPropTween(plugin, prop) {
+ var pt = plugin._pt;
+
+ while (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {
+ pt = pt._next;
+ }
+
+ return pt;
+},
+ _addModifiers = function _addModifiers(tween, modifiers) {
+ var targets = tween._targets,
+ p,
+ i,
+ pt;
+
+ for (p in modifiers) {
+ i = targets.length;
+
+ while (i--) {
+ pt = tween._ptLookup[i][p];
+
+ if (pt && (pt = pt.d)) {
+ if (pt._pt) {
+ // is a plugin
+ pt = _getPluginPropTween(pt, p);
+ }
+
+ pt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);
+ }
+ }
+ }
+},
+ _buildModifierPlugin = function _buildModifierPlugin(name, modifier) {
+ return {
+ name: name,
+ rawVars: 1,
+ //don't pre-process function-based values or "random()" strings.
+ init: function init(target, vars, tween) {
+ tween._onInit = function (tween) {
+ var temp, p;
+
+ if (_isString(vars)) {
+ temp = {};
+
+ _forEachName(vars, function (name) {
+ return temp[name] = 1;
+ }); //if the user passes in a comma-delimited list of property names to roundProps, like "x,y", we round to whole numbers.
+
+
+ vars = temp;
+ }
+
+ if (modifier) {
+ temp = {};
+
+ for (p in vars) {
+ temp[p] = modifier(vars[p]);
+ }
+
+ vars = temp;
+ }
+
+ _addModifiers(tween, vars);
+ };
+ }
+ };
+}; //register core plugins
+
+
+export var gsap = _gsap.registerPlugin({
+ name: "attr",
+ init: function init(target, vars, tween, index, targets) {
+ var p, pt, v;
+ this.tween = tween;
+
+ for (p in vars) {
+ v = target.getAttribute(p) || "";
+ pt = this.add(target, "setAttribute", (v || 0) + "", vars[p], index, targets, 0, 0, p);
+ pt.op = p;
+ pt.b = v; // record the beginning value so we can revert()
+
+ this._props.push(p);
+ }
+ },
+ render: function render(ratio, data) {
+ var pt = data._pt;
+
+ while (pt) {
+ _reverting ? pt.set(pt.t, pt.p, pt.b, pt) : pt.r(ratio, pt.d); // if reverting, go back to the original (pt.b)
+
+ pt = pt._next;
+ }
+ }
+}, {
+ name: "endArray",
+ init: function init(target, value) {
+ var i = value.length;
+
+ while (i--) {
+ this.add(target, i, target[i] || 0, value[i], 0, 0, 0, 0, 0, 1);
+ }
+ }
+}, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.
+
+Tween.version = Timeline.version = gsap.version = "3.11.0";
+_coreReady = 1;
+_windowExists() && _wake();
+var Power0 = _easeMap.Power0,
+ Power1 = _easeMap.Power1,
+ Power2 = _easeMap.Power2,
+ Power3 = _easeMap.Power3,
+ Power4 = _easeMap.Power4,
+ Linear = _easeMap.Linear,
+ Quad = _easeMap.Quad,
+ Cubic = _easeMap.Cubic,
+ Quart = _easeMap.Quart,
+ Quint = _easeMap.Quint,
+ Strong = _easeMap.Strong,
+ Elastic = _easeMap.Elastic,
+ Back = _easeMap.Back,
+ SteppedEase = _easeMap.SteppedEase,
+ Bounce = _easeMap.Bounce,
+ Sine = _easeMap.Sine,
+ Expo = _easeMap.Expo,
+ Circ = _easeMap.Circ;
+export { Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };
+export { Tween as TweenMax, Tween as TweenLite, Timeline as TimelineMax, Timeline as TimelineLite, gsap as default, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, selector, mapRange, pipe, unitize, interpolate, shuffle }; //export some internal methods/orojects for use in CSSPlugin so that we can externalize that file and allow custom builds that exclude it.
+
+export { _getProperty, _numExp, _numWithUnitExp, _isString, _isUndefined, _renderComplexString, _relExp, _setDefaults, _removeLinkedListItem, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _replaceRandom, _checkPlugin, _plugins, _ticker, _config, _roundModifier, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _parseRelative };
\ No newline at end of file
diff --git a/dist/lib/greensock/index.js b/dist/lib/greensock/index.js
new file mode 100644
index 00000000..c94f3329
--- /dev/null
+++ b/dist/lib/greensock/index.js
@@ -0,0 +1,6 @@
+import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from "./gsap-core.js";
+import { CSSPlugin } from "./CSSPlugin.js";
+var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap,
+ // to protect from tree shaking
+TweenMaxWithCSS = gsapWithCSS.core.Tween;
+export { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax, TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };
\ No newline at end of file
diff --git a/dist/lib/greensock/utils/PathEditor.js b/dist/lib/greensock/utils/PathEditor.js
new file mode 100644
index 00000000..6e7a05f6
--- /dev/null
+++ b/dist/lib/greensock/utils/PathEditor.js
@@ -0,0 +1,1805 @@
+/*!
+ * PathEditor 3.11.0
+ * https://greensock.com
+ *
+ * Copyright 2008-2022, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+import { stringToRawPath, rawPathToString, bezierToPoints, simplifyPoints, pointsToSegment, subdivideSegment, getClosestData, copyRawPath, transformRawPath } from "./paths.js";
+import { getGlobalMatrix, Matrix2D } from "./matrix.js";
+
+var _numbersExp = /(?:(-)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig,
+ _doc,
+ _supportsPointer,
+ _win,
+ _body,
+ _selectionColor = "#4e7fff",
+ _minimumMovement = 1,
+ _DEG2RAD = Math.PI / 180,
+ _getTime = Date.now || function () {
+ return new Date().getTime();
+},
+ _lastInteraction = 0,
+ _isPressed = 0,
+ _emptyFunc = function _emptyFunc() {
+ return false;
+},
+ _interacted = function _interacted() {
+ return _lastInteraction = _getTime();
+},
+ _CTRL,
+ _ALT,
+ _SHIFT,
+ _CMD,
+ _recentlyAddedAnchor,
+ _editingAxis = {},
+ //stores the x/y of the most recently-selected anchor point's x and y axis. We tap into this for snapping horizontally and vertically.
+_history = [],
+ _point = {},
+ //reuse to minimize memory and maximize performance (mostly for snapping)
+_temp = [],
+ //reuse this in places like getNormalizedSVG() to conserve memory
+_comma = ",",
+ _selectedPaths = [],
+ _preventDefault = function _preventDefault(event) {
+ if (event.preventDefault) {
+ event.preventDefault();
+
+ if (event.preventManipulation) {
+ event.preventManipulation(); //for some Microsoft browsers
+ }
+ }
+},
+ _createElement = function _createElement(type) {
+ return _doc.createElementNS ? _doc.createElementNS("http://www.w3.org/1999/xhtml", type) : _doc.createElement(type);
+},
+ _createSVG = function _createSVG(type, container, attributes) {
+ var element = _doc.createElementNS("http://www.w3.org/2000/svg", type),
+ reg = /([a-z])([A-Z])/g,
+ p;
+
+ attributes = attributes || {};
+ attributes["class"] = attributes["class"] || "path-editor";
+
+ for (p in attributes) {
+ if (element.style[p] !== undefined) {
+ element.style[p] = attributes[p];
+ } else {
+ element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
+ }
+ }
+
+ container.appendChild(element);
+ return element;
+},
+ _identityMatrixObject = {
+ matrix: new Matrix2D()
+},
+ _getConsolidatedMatrix = function _getConsolidatedMatrix(target) {
+ return (target.transform && target.transform.baseVal.consolidate() || _identityMatrixObject).matrix;
+},
+ _getConcatenatedTransforms = function _getConcatenatedTransforms(target) {
+ var m = _getConsolidatedMatrix(target),
+ owner = target.ownerSVGElement;
+
+ while ((target = target.parentNode) && target.ownerSVGElement === owner) {
+ m.multiply(_getConsolidatedMatrix(target));
+ }
+
+ return "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + m.e + "," + m.f + ")";
+},
+ _addHistory = function _addHistory(pathEditor) {
+ var selectedIndexes = [],
+ a = pathEditor._selectedAnchors,
+ i;
+
+ for (i = 0; i < a.length; i++) {
+ selectedIndexes[i] = a[i].i;
+ }
+
+ _history.unshift({
+ path: pathEditor,
+ d: pathEditor.path.getAttribute("d"),
+ transform: pathEditor.path.getAttribute("transform") || "",
+ selectedIndexes: selectedIndexes
+ });
+
+ if (_history.length > 30) {
+ _history.length = 30;
+ }
+},
+ _round = function _round(value) {
+ return ~~(value * 1000 + (value < 0 ? -.5 : .5)) / 1000;
+},
+ _getSquarePathData = function _getSquarePathData(size) {
+ size = _round(size);
+ return ["M-" + size, -size, size, -size, size, size, -size, size + "z"].join(_comma);
+},
+ _getCirclePathData = function _getCirclePathData(size) {
+ var circ = 0.552284749831,
+ rcirc = _round(size * circ);
+
+ size = _round(size);
+ return "M" + size + ",0C" + [size, rcirc, rcirc, size, 0, size, -rcirc, size, -size, rcirc, -size, 0, -size, -rcirc, -rcirc, -size, 0, -size, rcirc, -size, size, -rcirc, size, 0].join(_comma) + "z";
+},
+ _checkDeselect = function _checkDeselect(e) {
+ if (!e.target._gsSelection && !_isPressed && _getTime() - _lastInteraction > 100) {
+ var i = _selectedPaths.length;
+
+ while (--i > -1) {
+ _selectedPaths[i].deselect();
+ }
+
+ _selectedPaths.length = 0;
+ }
+},
+ _tempDiv,
+ _touchEventLookup,
+ _isMultiTouching = 0,
+ _addListener = function _addListener(element, type, func, capture) {
+ if (element.addEventListener) {
+ var touchType = _touchEventLookup[type];
+ capture = capture || {
+ passive: false
+ };
+ element.addEventListener(touchType || type, func, capture);
+
+ if (touchType && type !== touchType && touchType.substr(0, 7) !== "pointer") {
+ //some browsers actually support both, so must we. But pointer events cover all.
+ element.addEventListener(type, func, capture);
+ }
+ } else if (element.attachEvent) {
+ element.attachEvent("on" + type, func);
+ }
+},
+ _removeListener = function _removeListener(element, type, func) {
+ if (element.removeEventListener) {
+ var touchType = _touchEventLookup[type];
+ element.removeEventListener(touchType || type, func);
+
+ if (touchType && type !== touchType && touchType.substr(0, 7) !== "pointer") {
+ element.removeEventListener(type, func);
+ }
+ } else if (element.detachEvent) {
+ element.detachEvent("on" + type, func);
+ }
+},
+ _hasTouchID = function _hasTouchID(list, ID) {
+ var i = list.length;
+
+ while (--i > -1) {
+ if (list[i].identifier === ID) {
+ return true;
+ }
+ }
+
+ return false;
+},
+ _onMultiTouchDocumentEnd = function _onMultiTouchDocumentEnd(e) {
+ _isMultiTouching = e.touches && _dragCount < e.touches.length;
+
+ _removeListener(e.target, "touchend", _onMultiTouchDocumentEnd);
+},
+ _onMultiTouchDocument = function _onMultiTouchDocument(e) {
+ _isMultiTouching = e.touches && _dragCount < e.touches.length;
+
+ _addListener(e.target, "touchend", _onMultiTouchDocumentEnd);
+},
+ _bind = function _bind(func, scope) {
+ return function (e) {
+ return func.call(scope, e);
+ };
+},
+ _callback = function _callback(type, self, param) {
+ var callback = self.vars[type];
+
+ if (callback) {
+ callback.call(self.vars.callbackScope || self, param || self);
+ }
+
+ return self;
+},
+ _copyElement,
+ _resetSelection = function _resetSelection() {
+ _copyElement.style.display = "block";
+
+ _copyElement.select();
+
+ _copyElement.style.display = "none";
+},
+ _coreInitted,
+ _initCore = function _initCore() {
+ _doc = document;
+ _win = window;
+ _body = _doc.body;
+ _tempDiv = _createElement("div");
+ _copyElement = _createElement("textarea");
+ _copyElement.style.display = "none";
+ _body && _body.appendChild(_copyElement);
+
+ _touchEventLookup = function (types) {
+ //we create an object that makes it easy to translate touch event types into their "pointer" counterparts if we're in a browser that uses those instead. Like IE10 uses "MSPointerDown" instead of "touchstart", for example.
+ var standard = types.split(","),
+ converted = (_tempDiv.onpointerdown !== undefined ? "pointerdown,pointermove,pointerup,pointercancel" : _tempDiv.onmspointerdown !== undefined ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : types).split(","),
+ obj = {},
+ i = 4;
+
+ while (--i > -1) {
+ obj[standard[i]] = converted[i];
+ obj[converted[i]] = standard[i];
+ }
+
+ return obj;
+ }("touchstart,touchmove,touchend,touchcancel");
+
+ SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (e) {
+ //adds Chrome support
+ return e.getScreenCTM().inverse().multiply(this.getScreenCTM());
+ };
+
+ _doc.addEventListener("keydown", function (e) {
+ var key = e.keyCode || e.which,
+ keyString = e.key || key,
+ i,
+ state,
+ a,
+ path;
+
+ if (keyString === "Shift" || key === 16) {
+ _SHIFT = true;
+ } else if (keyString === "Control" || key === 17) {
+ _CTRL = true;
+ } else if (keyString === "Meta" || key === 91) {
+ _CMD = true;
+ } else if (keyString === "Alt" || key === 18) {
+ _ALT = true;
+ i = _selectedPaths.length;
+
+ while (--i > -1) {
+ _selectedPaths[i]._onPressAlt();
+ }
+ } else if ((keyString === "z" || key === 90) && (_CTRL || _CMD) && _history.length > 1) {
+ //UNDO
+ _history.shift();
+
+ state = _history[0];
+
+ if (state) {
+ path = state.path;
+ path.path.setAttribute("d", state.d);
+ path.path.setAttribute("transform", state.transform);
+ path.init();
+ a = path._anchors;
+
+ for (i = 0; i < a.length; i++) {
+ if (state.selectedIndexes.indexOf(a[i].i) !== -1) {
+ path._selectedAnchors.push(a[i]);
+ }
+ }
+
+ path._updateAnchors();
+
+ path.update();
+
+ if (path.vars.onUndo) {
+ path.vars.onUndo.call(path);
+ }
+ }
+ } else if (keyString === "Delete" || keyString === "Backspace" || key === 8 || key === 46 || key === 63272 || key === "d" && (_CTRL || _CMD)) {
+ //DELETE
+ i = _selectedPaths.length;
+
+ while (--i > -1) {
+ _selectedPaths[i]._deleteSelectedAnchors();
+ }
+ } else if ((keyString === "a" || key === 65) && (_CMD || _CTRL)) {
+ //SELECT ALL
+ i = _selectedPaths.length;
+
+ while (--i > -1) {
+ _selectedPaths[i].select(true);
+ }
+ }
+ }, true);
+
+ _doc.addEventListener("keyup", function (e) {
+ var key = e.key || e.keyCode || e.which;
+
+ if (key === "Shift" || key === 16) {
+ _SHIFT = false;
+ } else if (key === "Control" || key === 17) {
+ _CTRL = false;
+ } else if (key === "Meta" || key === 91) {
+ _CMD = false;
+ } else if (key === "Alt" || key === 18) {
+ _ALT = false;
+ var i = _selectedPaths.length;
+
+ while (--i > -1) {
+ _selectedPaths[i]._onReleaseAlt();
+ }
+ }
+ }, true);
+
+ _supportsPointer = !!_win.PointerEvent;
+
+ _addListener(_doc, "mouseup", _checkDeselect);
+
+ _addListener(_doc, "touchend", _checkDeselect);
+
+ _addListener(_doc, "touchcancel", _emptyFunc); //some older Android devices intermittently stop dispatching "touchmove" events if we don't listen for "touchcancel" on the document. Very strange indeed.
+
+
+ _addListener(_win, "touchmove", _emptyFunc); //works around Safari bugs that still allow the page to scroll even when we preventDefault() on the touchmove event.
+
+
+ _body && _body.addEventListener("touchstart", _emptyFunc); //works around Safari bug: https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/
+
+ _coreInitted = 1;
+},
+ _onPress = function _onPress(e) {
+ var self = this,
+ ctm = getGlobalMatrix(self.target.parentNode, true),
+ //previously used self.target.parentNode.getScreenCTM().inverse() but there's a major bug in Firefox that prevents it from working properly when there's an ancestor with a transform applied, so we bootstrapped our own solution that seems to work great across all browsers.
+ touchEventTarget,
+ temp;
+ this._matrix = this.target.transform.baseVal.getItem(0).matrix;
+ this._ctm = ctm;
+
+ if (_touchEventLookup[e.type]) {
+ //note: on iOS, BOTH touchmove and mousemove are dispatched, but the mousemove has pageY and pageX of 0 which would mess up the calculations and needlessly hurt performance.
+ touchEventTarget = e.type.indexOf("touch") !== -1 ? e.currentTarget || e.target : _doc; //pointer-based touches (for Microsoft browsers) don't remain locked to the original target like other browsers, so we must use the document instead. The event type would be "MSPointerDown" or "pointerdown".
+
+ _addListener(touchEventTarget, "touchend", self._onRelease);
+
+ _addListener(touchEventTarget, "touchmove", self._onMove);
+
+ _addListener(touchEventTarget, "touchcancel", self._onRelease);
+
+ _addListener(_doc, "touchstart", _onMultiTouchDocument);
+
+ _addListener(_win, "touchforcechange", _preventDefault); //otherwise iOS will scroll when dragging.
+
+ } else {
+ touchEventTarget = null;
+
+ _addListener(_doc, "mousemove", self._onMove); //attach these to the document instead of the box itself so that if the user's mouse moves too quickly (and off of the box), things still work.
+
+ }
+
+ if (!_supportsPointer) {
+ _addListener(_doc, "mouseup", self._onRelease);
+ }
+
+ _preventDefault(e);
+
+ _resetSelection(); // when a PathEditor is in an iframe in an environment like codepen, this helps avoid situations where the DELETE key won't actually work because the parent frame is intercepting the event.
+
+
+ if (e.changedTouches) {
+ //touch events store the data slightly differently
+ e = self.touch = e.changedTouches[0];
+ self.touchID = e.identifier;
+ } else if (e.pointerId) {
+ self.touchID = e.pointerId; //for some Microsoft browsers
+ } else {
+ self.touch = self.touchID = null;
+ }
+
+ self._startPointerY = self.pointerY = e.pageY; //record the starting x and y so that we can calculate the movement from the original in _onMouseMove
+
+ self._startPointerX = self.pointerX = e.pageX;
+ self._startElementX = self._matrix.e;
+ self._startElementY = self._matrix.f;
+
+ if (this._ctm.a === 1 && this._ctm.b === 0 && this._ctm.c === 0 && this._ctm.d === 1) {
+ this._ctm = null;
+ } else {
+ temp = self._startPointerX * this._ctm.a + self._startPointerY * this._ctm.c + this._ctm.e;
+ self._startPointerY = self._startPointerX * this._ctm.b + self._startPointerY * this._ctm.d + this._ctm.f;
+ self._startPointerX = temp;
+ }
+
+ self.isPressed = _isPressed = true;
+ self.touchEventTarget = touchEventTarget;
+
+ if (self.vars.onPress) {
+ self.vars.onPress.call(self.vars.callbackScope || self, self.pointerEvent);
+ }
+},
+ _onMove = function _onMove(e) {
+ var self = this,
+ originalEvent = e,
+ touches,
+ i;
+
+ if (!self._enabled || _isMultiTouching || !self.isPressed || !e) {
+ return;
+ }
+
+ self.pointerEvent = e;
+ touches = e.changedTouches;
+
+ if (touches) {
+ //touch events store the data slightly differently
+ e = touches[0];
+
+ if (e !== self.touch && e.identifier !== self.touchID) {
+ //Usually changedTouches[0] will be what we're looking for, but in case it's not, look through the rest of the array...(and Android browsers don't reuse the event like iOS)
+ i = touches.length;
+
+ while (--i > -1 && (e = touches[i]).identifier !== self.touchID) {}
+
+ if (i < 0) {
+ return;
+ }
+ }
+ } else if (e.pointerId && self.touchID && e.pointerId !== self.touchID) {
+ //for some Microsoft browsers, we must attach the listener to the doc rather than the trigger so that when the finger moves outside the bounds of the trigger, things still work. So if the event we're receiving has a pointerId that doesn't match the touchID, ignore it (for multi-touch)
+ return;
+ }
+
+ _preventDefault(originalEvent);
+
+ self.setPointerPosition(e.pageX, e.pageY);
+
+ if (self.vars.onDrag) {
+ self.vars.onDrag.call(self.vars.callbackScope || self, self.pointerEvent);
+ }
+},
+ _onRelease = function _onRelease(e, force) {
+ var self = this;
+
+ if (!self._enabled || !self.isPressed || e && self.touchID != null && !force && (e.pointerId && e.pointerId !== self.touchID || e.changedTouches && !_hasTouchID(e.changedTouches, self.touchID))) {
+ //for some Microsoft browsers, we must attach the listener to the doc rather than the trigger so that when the finger moves outside the bounds of the trigger, things still work. So if the event we're receiving has a pointerId that doesn't match the touchID, ignore it (for multi-touch)
+ return;
+ }
+
+ _interacted();
+
+ self.isPressed = _isPressed = false; //TODO: if we want to accommodate multi-touch, we'd need to introduce a counter to track how many touches there are and only toggle this when they're all off.
+
+ var originalEvent = e,
+ wasDragging = self.isDragging,
+ touchEventTarget = self.touchEventTarget,
+ touches,
+ i;
+
+ if (touchEventTarget) {
+ _removeListener(touchEventTarget, "touchend", self._onRelease);
+
+ _removeListener(touchEventTarget, "touchmove", self._onMove);
+
+ _removeListener(touchEventTarget, "touchcancel", self._onRelease);
+
+ _removeListener(_doc, "touchstart", _onMultiTouchDocument);
+ } else {
+ _removeListener(_doc, "mousemove", self._onMove);
+ }
+
+ if (!_supportsPointer) {
+ _removeListener(_doc, "mouseup", self._onRelease);
+
+ if (e && e.target) {
+ _removeListener(e.target, "mouseup", self._onRelease);
+ }
+ }
+
+ if (wasDragging) {
+ self.isDragging = false;
+ } else if (self.vars.onClick) {
+ self.vars.onClick.call(self.vars.callbackScope || self, originalEvent);
+ }
+
+ if (e) {
+ touches = e.changedTouches;
+
+ if (touches) {
+ //touch events store the data slightly differently
+ e = touches[0];
+
+ if (e !== self.touch && e.identifier !== self.touchID) {
+ //Usually changedTouches[0] will be what we're looking for, but in case it's not, look through the rest of the array...(and Android browsers don't reuse the event like iOS)
+ i = touches.length;
+
+ while (--i > -1 && (e = touches[i]).identifier !== self.touchID) {}
+
+ if (i < 0) {
+ return;
+ }
+ }
+ }
+
+ self.pointerEvent = originalEvent;
+ self.pointerX = e.pageX;
+ self.pointerY = e.pageY;
+ }
+
+ if (originalEvent && !wasDragging && self.vars.onDragRelease) {
+ self.vars.onDragRelease.call(self, self.pointerEvent);
+ } else {
+ if (originalEvent) {
+ _preventDefault(originalEvent);
+ }
+
+ if (self.vars.onRelease) {
+ self.vars.onRelease.call(self.vars.callbackScope || self, self.pointerEvent);
+ }
+ }
+
+ if (wasDragging && self.vars.onDragEnd) {
+ self.vars.onDragEnd.call(self.vars.callbackScope || self, self.pointerEvent);
+ }
+
+ return true;
+},
+ _createSegmentAnchors = function _createSegmentAnchors(rawPath, j, editor, vars) {
+ var segment = rawPath[j],
+ l = segment.length - (segment.closed ? 6 : 0),
+ a = [],
+ i;
+
+ for (i = 0; i < l; i += 6) {
+ a.push(new Anchor(editor, rawPath, j, i, vars));
+ }
+
+ segment.closed && (a[0].isClosedStart = true);
+ return a;
+},
+ _getLength = function _getLength(segment, i, i2) {
+ //i is the starting index, and it'll return the length to the next x/y pair. So if you're looking for the length to handle1, you'd feed in the index of the handle control point x whereas if you're looking for the length to handle2, i would be the x of the anchor.
+ var x = segment[i2] - segment[i],
+ y = segment[i2 + 1] - segment[i + 1];
+ return Math.sqrt(x * x + y * y);
+};
+
+var DraggableSVG = /*#__PURE__*/function () {
+ function DraggableSVG(target, vars) {
+ this.target = typeof target === "string" ? _doc.querySelectorAll(target)[0] : target;
+ this.vars = vars || {};
+ this._onPress = _bind(_onPress, this);
+ this._onMove = _bind(_onMove, this);
+ this._onRelease = _bind(_onRelease, this);
+ this.target.setAttribute("transform", (this.target.getAttribute("transform") || "") + " translate(0,0)");
+ this._matrix = _getConsolidatedMatrix(this.target);
+ this.x = this._matrix.e;
+ this.y = this._matrix.f;
+ this.snap = vars.snap;
+
+ if (!isNaN(vars.maxX) || !isNaN(vars.minX)) {
+ this._bounds = 1;
+ this.maxX = +vars.maxX;
+ this.minX = +vars.minX;
+ } else {
+ this._bounds = 0;
+ }
+
+ this.enabled(true);
+ }
+
+ var _proto = DraggableSVG.prototype;
+
+ _proto.setPointerPosition = function setPointerPosition(pointerX, pointerY) {
+ var rnd = 1000,
+ xChange,
+ yChange,
+ x,
+ y,
+ temp;
+ this.pointerX = pointerX;
+ this.pointerY = pointerY;
+
+ if (this._ctm) {
+ temp = pointerX * this._ctm.a + pointerY * this._ctm.c + this._ctm.e;
+ pointerY = pointerX * this._ctm.b + pointerY * this._ctm.d + this._ctm.f;
+ pointerX = temp;
+ }
+
+ yChange = pointerY - this._startPointerY;
+ xChange = pointerX - this._startPointerX;
+
+ if (yChange < _minimumMovement && yChange > -_minimumMovement) {
+ yChange = 0;
+ }
+
+ if (xChange < _minimumMovement && xChange > -_minimumMovement) {
+ xChange = 0;
+ }
+
+ x = ((this._startElementX + xChange) * rnd | 0) / rnd;
+ y = ((this._startElementY + yChange) * rnd | 0) / rnd;
+
+ if (this.snap && !_SHIFT) {
+ _point.x = x;
+ _point.y = y;
+ this.snap.call(this, _point);
+ x = _point.x;
+ y = _point.y;
+ }
+
+ if (this.x !== x || this.y !== y) {
+ this._matrix.f = this.y = y;
+ this._matrix.e = this.x = x;
+
+ if (!this.isDragging && this.isPressed) {
+ this.isDragging = true;
+
+ _callback("onDragStart", this, this.pointerEvent);
+ }
+ }
+ };
+
+ _proto.enabled = function enabled(_enabled) {
+ if (!arguments.length) {
+ return this._enabled;
+ }
+
+ var dragging;
+ this._enabled = _enabled;
+
+ if (_enabled) {
+ if (!_supportsPointer) {
+ _addListener(this.target, "mousedown", this._onPress);
+ }
+
+ _addListener(this.target, "touchstart", this._onPress);
+
+ _addListener(this.target, "click", this._onClick, true); //note: used to pass true for capture but it prevented click-to-play-video functionality in Firefox.
+
+ } else {
+ dragging = this.isDragging;
+
+ _removeListener(this.target, "mousedown", this._onPress);
+
+ _removeListener(this.target, "touchstart", this._onPress);
+
+ _removeListener(_win, "touchforcechange", _preventDefault);
+
+ _removeListener(this.target, "click", this._onClick);
+
+ if (this.touchEventTarget) {
+ _removeListener(this.touchEventTarget, "touchcancel", this._onRelease);
+
+ _removeListener(this.touchEventTarget, "touchend", this._onRelease);
+
+ _removeListener(this.touchEventTarget, "touchmove", this._onMove);
+ }
+
+ _removeListener(_doc, "mouseup", this._onRelease);
+
+ _removeListener(_doc, "mousemove", this._onMove);
+
+ this.isDragging = this.isPressed = false;
+
+ if (dragging) {
+ _callback("onDragEnd", this, this.pointerEvent);
+ }
+ }
+
+ return this;
+ };
+
+ _proto.endDrag = function endDrag(e) {
+ this._onRelease(e);
+ };
+
+ return DraggableSVG;
+}();
+
+var Anchor = /*#__PURE__*/function () {
+ function Anchor(editor, rawPath, j, i, vars) {
+ this.editor = editor;
+ this.element = _createSVG("path", editor._selection, {
+ fill: _selectionColor,
+ stroke: _selectionColor,
+ strokeWidth: 2,
+ vectorEffect: "non-scaling-stroke"
+ });
+ this.update(rawPath, j, i);
+ this.element._gsSelection = true;
+ this.vars = vars || {};
+ this._draggable = new DraggableSVG(this.element, {
+ callbackScope: this,
+ onDrag: this.onDrag,
+ snap: this.vars.snap,
+ onPress: this.onPress,
+ onRelease: this.onRelease,
+ onClick: this.onClick,
+ onDragEnd: this.onDragEnd
+ });
+ }
+
+ var _proto2 = Anchor.prototype;
+
+ _proto2.onPress = function onPress() {
+ _callback("onPress", this);
+ };
+
+ _proto2.onClick = function onClick() {
+ _callback("onClick", this);
+ };
+
+ _proto2.onDrag = function onDrag() {
+ var s = this.segment;
+ this.vars.onDrag.call(this.vars.callbackScope || this, this, this._draggable.x - s[this.i], this._draggable.y - s[this.i + 1]);
+ };
+
+ _proto2.onDragEnd = function onDragEnd() {
+ _callback("onDragEnd", this);
+ };
+
+ _proto2.onRelease = function onRelease() {
+ _callback("onRelease", this);
+ };
+
+ _proto2.update = function update(rawPath, j, i) {
+ if (rawPath) {
+ this.rawPath = rawPath;
+ }
+
+ if (arguments.length <= 1) {
+ j = this.j;
+ i = this.i;
+ } else {
+ this.j = j;
+ this.i = i;
+ }
+
+ var prevSmooth = this.smooth,
+ segment = this.rawPath[j],
+ pi = i === 0 && segment.closed ? segment.length - 4 : i - 2;
+ this.segment = segment;
+ this.smooth = i > 0 && i < segment.length - 2 && Math.abs(Math.atan2(segment[i + 1] - segment[pi + 1], segment[i] - segment[pi]) - Math.atan2(segment[i + 3] - segment[i + 1], segment[i + 2] - segment[i])) < 0.09 ? 2 : 0; //0: corner, 1: smooth but not mirrored, 2: smooth and mirrored.
+
+ if (this.smooth !== prevSmooth) {
+ this.element.setAttribute("d", this.smooth ? this.editor._circleHandle : this.editor._squareHandle);
+ }
+
+ this.element.setAttribute("transform", "translate(" + segment[i] + "," + segment[i + 1] + ")");
+ };
+
+ return Anchor;
+}();
+
+export var PathEditor = /*#__PURE__*/function () {
+ function PathEditor(target, vars) {
+ vars = vars || {};
+
+ if (!_coreInitted) {
+ _initCore();
+ }
+
+ this.vars = vars;
+ this.path = typeof target === "string" ? _doc.querySelectorAll(target)[0] : target;
+ this._g = _createSVG("g", this.path.ownerSVGElement, {
+ "class": "path-editor-g path-editor"
+ });
+ this._selectionHittest = _createSVG("path", this._g, {
+ stroke: "transparent",
+ strokeWidth: 16,
+ fill: "none",
+ vectorEffect: "non-scaling-stroke"
+ });
+ this._selection = vars._selection || _createSVG("g", this._g, {
+ "class": "path-editor-selection path-editor"
+ });
+ this._selectionPath = _createSVG("path", this._selection, {
+ stroke: _selectionColor,
+ strokeWidth: 2,
+ fill: "none",
+ vectorEffect: "non-scaling-stroke"
+ });
+ this._selectedAnchors = [];
+ this._line1 = _createSVG("polyline", this._selection, {
+ stroke: _selectionColor,
+ strokeWidth: 2,
+ vectorEffect: "non-scaling-stroke"
+ });
+ this._line2 = _createSVG("polyline", this._selection, {
+ stroke: _selectionColor,
+ strokeWidth: 2,
+ vectorEffect: "non-scaling-stroke"
+ });
+ this._line1.style.pointerEvents = this._line2.style.pointerEvents = this._selectionPath.style.pointerEvents = "none";
+ this._enabled = true;
+ var ctm = this.path.parentNode.getScreenCTM().inverse(),
+ size = (ctm.a + ctm.d) / 2 * (vars.handleSize || 5);
+ this._squareHandle = _getSquarePathData(size);
+ this._circleHandle = _getCirclePathData(size * 1.15);
+ this._handle1 = _createSVG("path", this._selection, {
+ d: this._squareHandle,
+ fill: _selectionColor,
+ stroke: "transparent",
+ strokeWidth: 6
+ });
+ this._handle2 = _createSVG("path", this._selection, {
+ d: this._squareHandle,
+ fill: _selectionColor,
+ stroke: "transparent",
+ strokeWidth: 6
+ });
+ this._handle1._draggable = new DraggableSVG(this._handle1, {
+ onDrag: this._onDragHandle1,
+ callbackScope: this,
+ onPress: this._onPressHandle1,
+ onRelease: this._onReleaseHandle,
+ onClick: this._onClickHandle1,
+ snap: vars.handleSnap
+ });
+ this._handle2._draggable = new DraggableSVG(this._handle2, {
+ onDrag: this._onDragHandle2,
+ callbackScope: this,
+ onPress: this._onPressHandle2,
+ onRelease: this._onReleaseHandle,
+ onClick: this._onClickHandle2,
+ snap: vars.handleSnap
+ });
+ this._handle1.style.visibility = this._handle2.style.visibility = "hidden";
+ var selectionItems = [this._handle1, this._handle2, this._line1, this._line2, this._selection, this._selectionPath, this._selectionHittest],
+ i = selectionItems.length;
+
+ while (--i > -1) {
+ selectionItems[i]._gsSelection = true; //just a flag we can check in the _checkDeselect() method to detect clicks on things that are selection-related.
+ }
+
+ if (vars.draggable !== false) {
+ this._draggable = new DraggableSVG(this._selectionHittest, {
+ callbackScope: this,
+ onPress: this.select,
+ onRelease: this._onRelease,
+ onDrag: this._onDragPath,
+ onDragEnd: this._saveState,
+ maxX: this.vars.maxX,
+ minX: this.vars.minX
+ });
+ }
+
+ this.init();
+ this._selection.style.visibility = vars.selected === false ? "hidden" : "visible";
+
+ if (vars.selected !== false) {
+ this.path._gsSelection = true;
+
+ _selectedPaths.push(this);
+ }
+
+ this._saveState();
+
+ if (!_supportsPointer) {
+ _addListener(this._selectionHittest, "mousedown", _bind(this._onClickSelectionPath, this));
+
+ _addListener(this._selectionHittest, "mouseup", _bind(this._onRelease, this));
+ }
+
+ _addListener(this._selectionHittest, "touchstart", _bind(this._onClickSelectionPath, this));
+
+ _addListener(this._selectionHittest, "touchend", _bind(this._onRelease, this));
+ }
+
+ var _proto3 = PathEditor.prototype;
+
+ _proto3._onRelease = function _onRelease(e) {
+ var anchor = this._editingAnchor;
+
+ if (anchor) {
+ _editingAxis.x = anchor.segment[anchor.i];
+ _editingAxis.y = anchor.segment[anchor.i + 1];
+ }
+
+ _removeListener(_win, "touchforcechange", _preventDefault); //otherwise iOS will scroll when dragging.
+
+
+ _callback("onRelease", this, e);
+ };
+
+ _proto3.init = function init() {
+ var pathData = this.path.getAttribute("d"),
+ rawPath = stringToRawPath(pathData),
+ transform = this.path.getAttribute("transform") || "translate(0,0)",
+ createAnchors = !this._rawPath || rawPath.totalPoints !== this._rawPath.totalPoints || rawPath.length !== this._rawPath.length,
+ anchorVars = {
+ callbackScope: this,
+ snap: this.vars.anchorSnap,
+ onDrag: this._onDragAnchor,
+ onPress: this._onPressAnchor,
+ onRelease: this._onRelease,
+ onClick: this._onClickAnchor,
+ onDragEnd: this._onDragEndAnchor,
+ maxX: this.vars.maxX,
+ minX: this.vars.minX
+ },
+ l,
+ i;
+
+ if (createAnchors && this._anchors && this._anchors.length) {
+ for (i = 0; i < this._anchors.length; i++) {
+ this._anchors[i].element.parentNode.removeChild(this._anchors[i].element);
+
+ this._anchors[i]._draggable.enabled(false);
+ }
+
+ this._selectedAnchors.length = 0;
+ }
+
+ this._rawPath = rawPath;
+
+ if (createAnchors) {
+ this._anchors = _createSegmentAnchors(rawPath, 0, this, anchorVars);
+ l = rawPath.length;
+
+ if (l > 1) {
+ for (i = 1; i < l; i++) {
+ this._anchors = this._anchors.concat(_createSegmentAnchors(rawPath, i, this, anchorVars));
+ }
+ }
+ } else {
+ i = this._anchors.length;
+
+ while (--i > -1) {
+ this._anchors[i].update(rawPath);
+ }
+ }
+
+ this._selection.appendChild(this._handle1); //for stacking order (handles should always be on top)
+
+
+ this._selection.appendChild(this._handle2); // this._selectedAnchors.length = 0;
+
+
+ this._selectionPath.setAttribute("d", pathData);
+
+ this._selectionHittest.setAttribute("d", pathData);
+
+ this._g.setAttribute("transform", _getConcatenatedTransforms(this.path.parentNode) || "translate(0,0)");
+
+ this._selection.setAttribute("transform", transform);
+
+ this._selectionHittest.setAttribute("transform", transform);
+
+ this._updateAnchors();
+
+ return this;
+ };
+
+ _proto3._saveState = function _saveState() {
+ _addHistory(this);
+ };
+
+ _proto3._onClickSelectionPath = function _onClickSelectionPath(e) {
+ if (this._selection.style.visibility === "hidden") {
+ this.select();
+ } else if (_ALT || e && e.altKey) {
+ var anchorVars = {
+ callbackScope: this,
+ snap: this.vars.anchorSnap,
+ onDrag: this._onDragAnchor,
+ onPress: this._onPressAnchor,
+ onRelease: this._onRelease,
+ onClick: this._onClickAnchor,
+ onDragEnd: this._onDragEndAnchor,
+ maxX: this.vars.maxX,
+ minX: this.vars.minX
+ },
+ ctm = this._selection.getScreenCTM().inverse(),
+ newIndex,
+ _i,
+ anchor,
+ x,
+ y,
+ closestData;
+
+ if (this._draggable) {
+ this._draggable._onRelease(e); //otherwise, ALT-click/dragging on a path would create a new anchor AND drag the entire path.
+
+ }
+
+ if (ctm) {
+ x = e.clientX * ctm.a + e.clientY * ctm.c + ctm.e;
+ y = e.clientX * ctm.b + e.clientY * ctm.d + ctm.f;
+ } //DEBUG: _createSVG("circle", this._selection, {fill:"red", r:5, cx:x, cy:y});
+
+
+ closestData = getClosestData(this._rawPath, x, y);
+ subdivideSegment(this._rawPath[closestData.j], closestData.i, closestData.t);
+ newIndex = closestData.i + 6;
+
+ for (_i = 0; _i < this._anchors.length; _i++) {
+ if (this._anchors[_i].i >= newIndex) {
+ this._anchors[_i].i += 6;
+ }
+ }
+
+ anchor = new Anchor(this, this._rawPath, closestData.j, newIndex, anchorVars);
+
+ this._selection.appendChild(this._handle1); //for stacking order (handles should always be on top)
+
+
+ this._selection.appendChild(this._handle2);
+
+ anchor._draggable._onPress(e);
+
+ _recentlyAddedAnchor = anchor;
+
+ this._anchors.push(anchor);
+
+ this._selectedAnchors.length = 0;
+
+ this._selectedAnchors.push(anchor);
+
+ this._updateAnchors();
+
+ this.update();
+
+ this._saveState();
+ }
+
+ _resetSelection();
+
+ _addListener(_win, "touchforcechange", _preventDefault); //otherwise iOS will scroll when dragging.
+
+
+ _callback("onPress", this);
+ };
+
+ _proto3._onClickHandle1 = function _onClickHandle1() {
+ var anchor = this._editingAnchor,
+ i = anchor.i,
+ s = anchor.segment,
+ pi = anchor.isClosedStart ? s.length - 4 : i - 2;
+
+ if (_ALT && Math.abs(s[i] - s[pi]) < 5 && Math.abs(s[i + 1] - s[pi + 1]) < 5) {
+ this._onClickAnchor(anchor);
+ }
+ };
+
+ _proto3._onClickHandle2 = function _onClickHandle2() {
+ var anchor = this._editingAnchor,
+ i = anchor.i,
+ s = anchor.segment;
+
+ if (_ALT && Math.abs(s[i] - s[i + 2]) < 5 && Math.abs(s[i + 1] - s[i + 3]) < 5) {
+ this._onClickAnchor(anchor);
+ }
+ };
+
+ _proto3._onDragEndAnchor = function _onDragEndAnchor(e) {
+ _recentlyAddedAnchor = null;
+
+ this._saveState();
+ };
+
+ _proto3.isSelected = function isSelected() {
+ return this._selectedAnchors.length > 0;
+ };
+
+ _proto3.select = function select(allAnchors) {
+ this._selection.style.visibility = "visible";
+ this._editingAnchor = null;
+ this.path._gsSelection = true;
+
+ if (allAnchors === true) {
+ var _i2 = this._anchors.length;
+
+ while (--_i2 > -1) {
+ this._selectedAnchors[_i2] = this._anchors[_i2];
+ }
+ }
+
+ if (_selectedPaths.indexOf(this) === -1) {
+ _selectedPaths.push(this);
+ }
+
+ this._updateAnchors();
+
+ return this;
+ };
+
+ _proto3.deselect = function deselect() {
+ this._selection.style.visibility = "hidden";
+ this._selectedAnchors.length = 0;
+ this._editingAnchor = null;
+ this.path._gsSelection = false;
+
+ _selectedPaths.splice(_selectedPaths.indexOf(this), 1);
+
+ this._updateAnchors();
+
+ return this;
+ };
+
+ _proto3._onDragPath = function _onDragPath(e) {
+ var transform = this._selectionHittest.getAttribute("transform") || "translate(0,0)";
+
+ this._selection.setAttribute("transform", transform);
+
+ this.path.setAttribute("transform", transform);
+ };
+
+ _proto3._onPressAnchor = function _onPressAnchor(anchor) {
+ if (this._selectedAnchors.indexOf(anchor) === -1) {
+ //if it isn't already selected...
+ if (!_SHIFT) {
+ this._selectedAnchors.length = 0;
+ }
+
+ this._selectedAnchors.push(anchor);
+ } else if (_SHIFT) {
+ this._selectedAnchors.splice(this._selectedAnchors.indexOf(anchor), 1);
+
+ anchor._draggable.endDrag();
+ }
+
+ _editingAxis.x = anchor.segment[anchor.i];
+ _editingAxis.y = anchor.segment[anchor.i + 1];
+
+ this._updateAnchors();
+
+ _callback("onPress", this);
+ };
+
+ _proto3._deleteSelectedAnchors = function _deleteSelectedAnchors() {
+ var anchors = this._selectedAnchors,
+ i = anchors.length,
+ anchor,
+ index,
+ j;
+
+ while (--i > -1) {
+ anchor = anchors[i];
+ anchor.element.parentNode.removeChild(anchor.element);
+
+ anchor._draggable.enabled(false);
+
+ index = anchor.i;
+
+ if (!index) {
+ //first
+ anchor.segment.splice(index, 6);
+ } else if (index < anchor.segment.length - 2) {
+ anchor.segment.splice(index - 2, 6);
+ } else {
+ //last
+ anchor.segment.splice(index - 4, 6);
+ }
+
+ anchors.splice(i, 1);
+
+ this._anchors.splice(this._anchors.indexOf(anchor), 1);
+
+ for (j = 0; j < this._anchors.length; j++) {
+ if (this._anchors[j].i >= index) {
+ this._anchors[j].i -= 6;
+ }
+ }
+ }
+
+ this._updateAnchors();
+
+ this.update();
+
+ this._saveState();
+
+ if (this.vars.onDeleteAnchor) {
+ this.vars.onDeleteAnchor.call(this.vars.callbackScope || this);
+ }
+ };
+
+ _proto3._onClickAnchor = function _onClickAnchor(anchor) {
+ var i = anchor.i,
+ segment = anchor.segment,
+ pi = anchor.isClosedStart ? segment.length - 4 : i - 2,
+ rnd = 1000,
+ isEnd = !i || i >= segment.length - 2,
+ angle1,
+ angle2,
+ length1,
+ length2,
+ sin,
+ cos;
+
+ if (_ALT && _recentlyAddedAnchor !== anchor && this._editingAnchor) {
+ anchor.smooth = !anchor.smooth;
+
+ if (isEnd && !anchor.isClosedStart) {
+ //the very ends can't be "smooth"
+ anchor.smooth = false;
+ }
+
+ anchor.element.setAttribute("d", anchor.smooth ? this._circleHandle : this._squareHandle);
+
+ if (anchor.smooth && (!isEnd || anchor.isClosedStart)) {
+ angle1 = Math.atan2(segment[i + 1] - segment[pi + 1], segment[i] - segment[pi]);
+ angle2 = Math.atan2(segment[i + 3] - segment[i + 1], segment[i + 2] - segment[i]);
+ angle1 = (angle1 + angle2) / 2;
+ length1 = _getLength(segment, pi, i);
+ length2 = _getLength(segment, i, i + 2);
+
+ if (length1 < 0.2) {
+ length1 = _getLength(segment, i, pi - 4) / 4;
+ angle1 = angle2 || Math.atan2(segment[i + 7] - segment[pi - 3], segment[i + 6] - segment[pi - 4]);
+ }
+
+ if (length2 < 0.2) {
+ length2 = _getLength(segment, i, i + 6) / 4;
+ angle2 = angle1 || Math.atan2(segment[i + 7] - segment[pi - 3], segment[i + 6] - segment[pi - 4]);
+ }
+
+ sin = Math.sin(angle1);
+ cos = Math.cos(angle1);
+
+ if (Math.abs(angle2 - angle1) < Math.PI / 2) {
+ sin = -sin;
+ cos = -cos;
+ }
+
+ segment[pi] = ((segment[i] + cos * length1) * rnd | 0) / rnd;
+ segment[pi + 1] = ((segment[i + 1] + sin * length1) * rnd | 0) / rnd;
+ segment[i + 2] = ((segment[i] - cos * length2) * rnd | 0) / rnd;
+ segment[i + 3] = ((segment[i + 1] - sin * length2) * rnd | 0) / rnd;
+
+ this._updateAnchors();
+
+ this.update();
+
+ this._saveState();
+ } else if (!anchor.smooth && (!isEnd || anchor.isClosedStart)) {
+ if (i || anchor.isClosedStart) {
+ segment[pi] = segment[i];
+ segment[pi + 1] = segment[i + 1];
+ }
+
+ if (i < segment.length - 2) {
+ segment[i + 2] = segment[i];
+ segment[i + 3] = segment[i + 1];
+ }
+
+ this._updateAnchors();
+
+ this.update();
+
+ this._saveState();
+ }
+ } else if (!_SHIFT) {
+ this._selectedAnchors.length = 0;
+
+ this._selectedAnchors.push(anchor);
+ }
+
+ _recentlyAddedAnchor = null;
+
+ this._updateAnchors();
+ };
+
+ _proto3._updateAnchors = function _updateAnchors() {
+ var anchor = this._selectedAnchors.length === 1 ? this._selectedAnchors[0] : null,
+ segment = anchor ? anchor.segment : null,
+ i,
+ x,
+ y;
+ this._editingAnchor = anchor;
+
+ for (i = 0; i < this._anchors.length; i++) {
+ this._anchors[i].element.style.fill = this._selectedAnchors.indexOf(this._anchors[i]) !== -1 ? _selectionColor : "white"; //this._anchors[i].element.setAttribute("fill", (this._selectedAnchors.indexOf(this._anchors[i]) !== -1) ? _selectionColor : "white");
+ }
+
+ if (anchor) {
+ this._handle1.setAttribute("d", anchor.smooth ? this._circleHandle : this._squareHandle);
+
+ this._handle2.setAttribute("d", anchor.smooth ? this._circleHandle : this._squareHandle);
+ }
+
+ i = anchor ? anchor.i : 0;
+
+ if (anchor && (i || anchor.isClosedStart)) {
+ x = anchor.isClosedStart ? segment[segment.length - 4] : segment[i - 2];
+ y = anchor.isClosedStart ? segment[segment.length - 3] : segment[i - 1]; //TODO: if they equal the anchor coordinates, just hide it.
+
+ this._handle1.style.visibility = this._line1.style.visibility = !_ALT && x === segment[i] && y === segment[i + 1] ? "hidden" : "visible";
+
+ this._handle1.setAttribute("transform", "translate(" + x + _comma + y + ")");
+
+ this._line1.setAttribute("points", x + _comma + y + _comma + segment[i] + _comma + segment[i + 1]);
+ } else {
+ this._handle1.style.visibility = this._line1.style.visibility = "hidden";
+ }
+
+ if (anchor && i < segment.length - 2) {
+ x = segment[i + 2];
+ y = segment[i + 3];
+ this._handle2.style.visibility = this._line2.style.visibility = !_ALT && x === segment[i] && y === segment[i + 1] ? "hidden" : "visible";
+
+ this._handle2.setAttribute("transform", "translate(" + x + _comma + y + ")");
+
+ this._line2.setAttribute("points", segment[i] + _comma + segment[i + 1] + _comma + x + _comma + y);
+ } else {
+ this._handle2.style.visibility = this._line2.style.visibility = "hidden";
+ }
+ };
+
+ _proto3._onPressAlt = function _onPressAlt() {
+ var anchor = this._editingAnchor;
+
+ if (anchor) {
+ if (anchor.i || anchor.isClosedStart) {
+ this._handle1.style.visibility = this._line1.style.visibility = "visible";
+ }
+
+ if (anchor.i < anchor.segment.length - 2) {
+ this._handle2.style.visibility = this._line2.style.visibility = "visible";
+ }
+ }
+ };
+
+ _proto3._onReleaseAlt = function _onReleaseAlt() {
+ var anchor = this._editingAnchor,
+ s,
+ i,
+ pi;
+
+ if (anchor) {
+ s = anchor.segment;
+ i = anchor.i;
+ pi = anchor.isClosedStart ? s.length - 4 : i - 2;
+
+ if (s[i] === s[pi] && s[i + 1] === s[pi + 1]) {
+ this._handle1.style.visibility = this._line1.style.visibility = "hidden";
+ }
+
+ if (s[i] === s[i + 2] && s[i + 1] === s[i + 3]) {
+ this._handle2.style.visibility = this._line2.style.visibility = "hidden";
+ }
+ }
+ };
+
+ _proto3._onPressHandle1 = function _onPressHandle1() {
+ if (this._editingAnchor.smooth) {
+ this._oppositeHandleLength = _getLength(this._editingAnchor.segment, this._editingAnchor.i, this._editingAnchor.i + 2);
+ }
+
+ _callback("onPress", this);
+ };
+
+ _proto3._onPressHandle2 = function _onPressHandle2() {
+ if (this._editingAnchor.smooth) {
+ this._oppositeHandleLength = _getLength(this._editingAnchor.segment, this._editingAnchor.isClosedStart ? this._editingAnchor.segment.length - 4 : this._editingAnchor.i - 2, this._editingAnchor.i);
+ }
+
+ _callback("onPress", this);
+ };
+
+ _proto3._onReleaseHandle = function _onReleaseHandle(e) {
+ this._onRelease(e);
+
+ this._saveState();
+ };
+
+ _proto3._onDragHandle1 = function _onDragHandle1() {
+ var anchor = this._editingAnchor,
+ s = anchor.segment,
+ i = anchor.i,
+ pi = anchor.isClosedStart ? s.length - 4 : i - 2,
+ rnd = 1000,
+ x = this._handle1._draggable.x,
+ y = this._handle1._draggable.y,
+ angle;
+ s[pi] = x = (x * rnd | 0) / rnd;
+ s[pi + 1] = y = (y * rnd | 0) / rnd;
+
+ if (anchor.smooth) {
+ if (_ALT) {
+ anchor.smooth = false;
+ anchor.element.setAttribute("d", this._squareHandle);
+
+ this._handle1.setAttribute("d", this._squareHandle);
+
+ this._handle2.setAttribute("d", this._squareHandle);
+ } else {
+ angle = Math.atan2(s[i + 1] - y, s[i] - x);
+ x = this._oppositeHandleLength * Math.cos(angle);
+ y = this._oppositeHandleLength * Math.sin(angle);
+ s[i + 2] = ((s[i] + x) * rnd | 0) / rnd;
+ s[i + 3] = ((s[i + 1] + y) * rnd | 0) / rnd;
+ }
+ }
+
+ this.update();
+ };
+
+ _proto3._onDragHandle2 = function _onDragHandle2() {
+ var anchor = this._editingAnchor,
+ s = anchor.segment,
+ i = anchor.i,
+ pi = anchor.isClosedStart ? s.length - 4 : i - 2,
+ rnd = 1000,
+ x = this._handle2._draggable.x,
+ y = this._handle2._draggable.y,
+ angle;
+ s[i + 2] = x = (x * rnd | 0) / rnd;
+ s[i + 3] = y = (y * rnd | 0) / rnd;
+
+ if (anchor.smooth) {
+ if (_ALT) {
+ anchor.smooth = false;
+ anchor.element.setAttribute("d", this._squareHandle);
+
+ this._handle1.setAttribute("d", this._squareHandle);
+
+ this._handle2.setAttribute("d", this._squareHandle);
+ } else {
+ angle = Math.atan2(s[i + 1] - y, s[i] - x);
+ x = this._oppositeHandleLength * Math.cos(angle);
+ y = this._oppositeHandleLength * Math.sin(angle);
+ s[pi] = ((s[i] + x) * rnd | 0) / rnd;
+ s[pi + 1] = ((s[i + 1] + y) * rnd | 0) / rnd;
+ }
+ }
+
+ this.update();
+ };
+
+ _proto3._onDragAnchor = function _onDragAnchor(anchor, changeX, changeY) {
+ var anchors = this._selectedAnchors,
+ l = anchors.length,
+ rnd = 1000,
+ i,
+ j,
+ s,
+ a,
+ pi;
+
+ for (j = 0; j < l; j++) {
+ a = anchors[j];
+ i = a.i;
+ s = a.segment;
+
+ if (i) {
+ s[i - 2] = ((s[i - 2] + changeX) * rnd | 0) / rnd;
+ s[i - 1] = ((s[i - 1] + changeY) * rnd | 0) / rnd;
+ } else if (a.isClosedStart) {
+ pi = s.length - 2;
+ s[pi] = _round(s[pi] + changeX);
+ s[pi + 1] = _round(s[pi + 1] + changeY);
+ s[pi - 2] = _round(s[pi - 2] + changeX);
+ s[pi - 1] = _round(s[pi - 1] + changeY);
+ }
+
+ s[i] = ((s[i] + changeX) * rnd | 0) / rnd;
+ s[i + 1] = ((s[i + 1] + changeY) * rnd | 0) / rnd;
+
+ if (i < s.length - 2) {
+ s[i + 2] = ((s[i + 2] + changeX) * rnd | 0) / rnd;
+ s[i + 3] = ((s[i + 3] + changeY) * rnd | 0) / rnd;
+ }
+
+ if (a !== anchor) {
+ a.element.setAttribute("transform", "translate(" + s[i] + _comma + s[i + 1] + ")");
+ }
+ }
+
+ this.update();
+ };
+
+ _proto3.enabled = function enabled(_enabled2) {
+ if (!arguments.length) {
+ return this._enabled;
+ }
+
+ var i = this._anchors.length;
+
+ while (--i > -1) {
+ this._anchors[i]._draggable.enabled(_enabled2);
+ }
+
+ this._enabled = _enabled2;
+
+ this._handle1._draggable.enabled(_enabled2);
+
+ this._handle2._draggable.enabled(_enabled2);
+
+ if (this._draggable) {
+ this._draggable.enabled(_enabled2);
+ }
+
+ if (!_enabled2) {
+ this.deselect();
+ this.path.ownerSVGElement.removeChild(this._selectionHittest);
+ this.path.ownerSVGElement.removeChild(this._selection);
+ } else if (!this._selection.parentNode) {
+ this.path.ownerSVGElement.appendChild(this._selectionHittest);
+ this.path.ownerSVGElement.appendChild(this._selection);
+ this.init();
+
+ this._saveState();
+ }
+
+ this._updateAnchors();
+
+ return this.update();
+ };
+
+ _proto3.update = function update(readPath) {
+ var d = "",
+ anchor = this._editingAnchor,
+ i,
+ s,
+ x,
+ y,
+ pi;
+
+ if (readPath) {
+ this.init();
+ }
+
+ if (anchor) {
+ i = anchor.i;
+ s = anchor.segment;
+
+ if (i || anchor.isClosedStart) {
+ pi = anchor.isClosedStart ? s.length - 4 : i - 2;
+ x = s[pi];
+ y = s[pi + 1];
+
+ this._handle1.setAttribute("transform", "translate(" + x + _comma + y + ")");
+
+ this._line1.setAttribute("points", x + _comma + y + _comma + s[i] + _comma + s[i + 1]);
+ }
+
+ if (i < s.length - 2) {
+ x = s[i + 2];
+ y = s[i + 3];
+
+ this._handle2.setAttribute("transform", "translate(" + x + _comma + y + ")");
+
+ this._line2.setAttribute("points", s[i] + _comma + s[i + 1] + _comma + x + _comma + y);
+ }
+ }
+
+ if (readPath) {
+ d = this.path.getAttribute("d");
+ } else {
+ for (i = 0; i < this._rawPath.length; i++) {
+ s = this._rawPath[i];
+
+ if (s.length > 7) {
+ d += "M" + s[0] + _comma + s[1] + "C" + s.slice(2).join(_comma);
+ }
+ }
+
+ this.path.setAttribute("d", d);
+
+ this._selectionPath.setAttribute("d", d);
+
+ this._selectionHittest.setAttribute("d", d);
+ }
+
+ if (this.vars.onUpdate && this._enabled) {
+ _callback("onUpdate", this, d);
+ }
+
+ return this;
+ };
+
+ _proto3.getRawPath = function getRawPath(applyTransforms, offsetX, offsetY) {
+ if (applyTransforms) {
+ var m = _getConsolidatedMatrix(this.path);
+
+ return transformRawPath(copyRawPath(this._rawPath), 1, 0, 0, 1, m.e + (offsetX || 0), m.f + (offsetY || 0));
+ }
+
+ return this._rawPath;
+ };
+
+ _proto3.getString = function getString(applyTransforms, offsetX, offsetY) {
+ if (applyTransforms) {
+ var m = _getConsolidatedMatrix(this.path);
+
+ return rawPathToString(transformRawPath(copyRawPath(this._rawPath), 1, 0, 0, 1, m.e + (offsetX || 0), m.f + (offsetY || 0)));
+ }
+
+ return this.path.getAttribute("d");
+ };
+
+ _proto3.getNormalizedSVG = function getNormalizedSVG(height, originY, shorten, onEaseError) {
+ var s = this._rawPath[0],
+ tx = s[0] * -1,
+ ty = originY === 0 ? 0 : -(originY || s[1]),
+ l = s.length,
+ sx = 1 / (s[l - 2] + tx),
+ sy = -height || s[l - 1] + ty,
+ rnd = 1000,
+ points,
+ i,
+ x1,
+ y1,
+ x2,
+ y2;
+ _temp.length = 0;
+
+ if (sy) {
+ //typically y ends at 1 (so that the end values are reached)
+ sy = 1 / sy;
+ } else {
+ //in case the ease returns to its beginning value, scale everything proportionally
+ sy = -sx;
+ }
+
+ sx *= rnd;
+ sy *= rnd;
+
+ for (i = 0; i < l; i += 2) {
+ _temp[i] = ((s[i] + tx) * sx | 0) / rnd;
+ _temp[i + 1] = ((s[i + 1] + ty) * sy | 0) / rnd;
+ }
+
+ if (onEaseError) {
+ points = [];
+ l = _temp.length;
+
+ for (i = 2; i < l; i += 6) {
+ x1 = _temp[i - 2];
+ y1 = _temp[i - 1];
+ x2 = _temp[i + 4];
+ y2 = _temp[i + 5];
+ points.push(x1, y1, x2, y2);
+ bezierToPoints(x1, y1, _temp[i], _temp[i + 1], _temp[i + 2], _temp[i + 3], x2, y2, 0.001, points, points.length - 2);
+ }
+
+ x1 = points[0];
+ l = points.length;
+
+ for (i = 2; i < l; i += 2) {
+ x2 = points[i];
+
+ if (x2 < x1 || x2 > 1 || x2 < 0) {
+ onEaseError();
+ break;
+ }
+
+ x1 = x2;
+ }
+ }
+
+ if (shorten && l === 8 && _temp[0] === 0 && _temp[1] === 0 && _temp[l - 2] === 1 && _temp[l - 1] === 1) {
+ return _temp.slice(2, 6).join(",");
+ }
+
+ _temp[2] = "C" + _temp[2];
+ return "M" + _temp.join(",");
+ };
+
+ return PathEditor;
+}();
+PathEditor.simplifyPoints = simplifyPoints;
+PathEditor.pointsToSegment = pointsToSegment;
+
+PathEditor.simplifySVG = function (data, vars) {
+ //takes a element or data string and simplifies it according to whatever tolerance you set (default:1, the bigger the number the more variance there can be). vars: {tolerance:1, cornerThreshold:degrees, curved:true}
+ var element, points, i, x1, x2, y1, y2, bezier, precision, tolerance, l, cornerThreshold;
+ vars = vars || {};
+ tolerance = vars.tolerance || 1;
+ precision = vars.precision || 1 / tolerance;
+ cornerThreshold = (vars.cornerThreshold === undefined ? 18 : +vars.cornerThreshold) * _DEG2RAD;
+
+ if (typeof data !== "string") {
+ //element
+ element = data;
+ data = element.getAttribute("d");
+ }
+
+ if (data.charAt(0) === "#" || data.charAt(0) === ".") {
+ //selector text
+ element = _doc.querySelector(data);
+
+ if (element) {
+ data = element.getAttribute("d");
+ }
+ }
+
+ points = vars.curved === false && !/[achqstvz]/ig.test(data) ? data.match(_numbersExp) : stringToRawPath(data)[0];
+
+ if (vars.curved !== false) {
+ bezier = points;
+ points = [];
+ l = bezier.length;
+
+ for (i = 2; i < l; i += 6) {
+ x1 = +bezier[i - 2];
+ y1 = +bezier[i - 1];
+ x2 = +bezier[i + 4];
+ y2 = +bezier[i + 5];
+ points.push(_round(x1), _round(y1), _round(x2), _round(y2));
+ bezierToPoints(x1, y1, +bezier[i], +bezier[i + 1], +bezier[i + 2], +bezier[i + 3], x2, y2, 1 / (precision * 200000), points, points.length - 2);
+ }
+
+ points = pointsToSegment(simplifyPoints(points, tolerance), vars.curviness, cornerThreshold);
+ points[2] = "C" + points[2];
+ } else {
+ points = simplifyPoints(points, tolerance);
+ }
+
+ data = "M" + points.join(",");
+
+ if (element) {
+ element.setAttribute("d", data);
+ }
+
+ return data;
+};
+
+PathEditor.create = function (target, vars) {
+ return new PathEditor(target, vars);
+};
+
+PathEditor.editingAxis = _editingAxis;
+
+PathEditor.getSnapFunction = function (vars) {
+ //{gridSize, radius, x, y, width, height}
+ var r = vars.radius || 2,
+ big = 1e20,
+ minX = vars.x || vars.x === 0 ? vars.x : vars.width ? 0 : -big,
+ minY = vars.y || vars.y === 0 ? vars.y : vars.height ? 0 : -big,
+ maxX = minX + (vars.width || big * big),
+ maxY = minY + (vars.height || big * big),
+ containX = vars.containX !== false,
+ containY = vars.containY !== false,
+ axis = vars.axis,
+ grid = vars.gridSize;
+ r *= r;
+ return function (p) {
+ var x = p.x,
+ y = p.y,
+ gridX,
+ gridY,
+ dx,
+ dy;
+
+ if (containX && x < minX || (dx = x - minX) * dx < r) {
+ x = minX;
+ } else if (containX && x > maxX || (dx = maxX - x) * dx < r) {
+ x = maxX;
+ }
+
+ if (containY && y < minY || (dy = y - minY) * dy < r) {
+ y = minY;
+ } else if (containY && y > maxY || (dy = maxY - y) * dy < r) {
+ y = maxY;
+ }
+
+ if (axis) {
+ dx = x - axis.x;
+ dy = y - axis.y;
+
+ if (dx * dx < r) {
+ x = axis.x;
+ }
+
+ if (dy * dy < r) {
+ y = axis.y;
+ }
+ }
+
+ if (grid) {
+ gridX = minX + Math.round((x - minX) / grid) * grid; //closest grid slot on x-axis
+
+ dx = gridX - x;
+ gridY = minY + Math.round((y - minY) / grid) * grid; //closest grid slot on y-axis
+
+ dy = gridY - y;
+
+ if (dx * dx + dy * dy < r) {
+ x = gridX;
+ y = gridY;
+ }
+ }
+
+ p.x = x;
+ p.y = y;
+ };
+};
+
+PathEditor.version = "3.11.0";
+export { PathEditor as default };
\ No newline at end of file
diff --git a/dist/lib/greensock/utils/VelocityTracker.js b/dist/lib/greensock/utils/VelocityTracker.js
new file mode 100644
index 00000000..02468132
--- /dev/null
+++ b/dist/lib/greensock/utils/VelocityTracker.js
@@ -0,0 +1,253 @@
+/*!
+ * VelocityTracker: 3.11.0
+ * https://greensock.com
+ *
+ * Copyright 2008-2022, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var gsap,
+ _coreInitted,
+ _toArray,
+ _getUnit,
+ _first,
+ _ticker,
+ _time1,
+ _time2,
+ _getCache,
+ _getGSAP = function _getGSAP() {
+ return gsap || typeof window !== "undefined" && (gsap = window.gsap);
+},
+ _lookup = {},
+ _round = function _round(value) {
+ return Math.round(value * 10000) / 10000;
+},
+ _getID = function _getID(target) {
+ return _getCache(target).id;
+},
+ _getByTarget = function _getByTarget(target) {
+ return _lookup[_getID(typeof target === "string" ? _toArray(target)[0] : target)];
+},
+ _onTick = function _onTick(time) {
+ var pt = _first,
+ val; //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values about 20 times per second
+
+ if (time - _time1 >= 0.05) {
+ _time2 = _time1;
+ _time1 = time;
+
+ while (pt) {
+ val = pt.g(pt.t, pt.p);
+
+ if (val !== pt.v1 || time - pt.t1 > 0.2) {
+ //use a threshold of 0.2 seconds for zeroing-out velocity. If we only use 0.05 and things update slightly slower, like some Android devices dispatch "touchmove" events sluggishly so 2 or 3 ticks of the gsap.ticker may elapse inbetween, thus it may appear like the object is not moving but it actually is but it's not updating as frequently. A threshold of 0.2 seconds seems to be a good balance. We want to update things frequently (0.05 seconds) when they're moving so that we can respond to fast motions accurately, but we want to be more resistant to go back to a zero velocity.
+ pt.v2 = pt.v1;
+ pt.v1 = val;
+ pt.t2 = pt.t1;
+ pt.t1 = time;
+ }
+
+ pt = pt._next;
+ }
+ }
+},
+ _types = {
+ deg: 360,
+ rad: Math.PI * 2
+},
+ _initCore = function _initCore() {
+ gsap = _getGSAP();
+
+ if (gsap) {
+ _toArray = gsap.utils.toArray;
+ _getUnit = gsap.utils.getUnit;
+ _getCache = gsap.core.getCache;
+ _ticker = gsap.ticker;
+ _coreInitted = 1;
+ }
+};
+
+var PropTracker = function PropTracker(target, property, type, next) {
+ this.t = target;
+ this.p = property;
+ this.g = target._gsap.get;
+ this.rCap = _types[type || _getUnit(this.g(target, property))]; //rotational cap (for degrees, "deg", it's 360 and for radians, "rad", it's Math.PI * 2)
+
+ this.v1 = this.v2 = 0;
+ this.t1 = this.t2 = _ticker.time;
+
+ if (next) {
+ this._next = next;
+ next._prev = this;
+ }
+};
+
+export var VelocityTracker = /*#__PURE__*/function () {
+ function VelocityTracker(target, property) {
+ if (!_coreInitted) {
+ _initCore();
+ }
+
+ this.target = _toArray(target)[0];
+ _lookup[_getID(this.target)] = this;
+ this._props = {};
+ property && this.add(property);
+ }
+
+ VelocityTracker.register = function register(core) {
+ gsap = core;
+
+ _initCore();
+ };
+
+ var _proto = VelocityTracker.prototype;
+
+ _proto.get = function get(property, skipRecentTick) {
+ var pt = this._props[property] || console.warn("Not tracking " + property + " velocity."),
+ val,
+ dif,
+ rotationCap;
+ val = parseFloat(skipRecentTick ? pt.v1 : pt.g(pt.t, pt.p));
+ dif = val - parseFloat(pt.v2);
+ rotationCap = pt.rCap;
+
+ if (rotationCap) {
+ //rotational values need special interpretation so that if, for example, they go from 179 to -178 degrees it is interpreted as a change of 3 instead of -357.
+ dif = dif % rotationCap;
+
+ if (dif !== dif % (rotationCap / 2)) {
+ dif = dif < 0 ? dif + rotationCap : dif - rotationCap;
+ }
+ }
+
+ return _round(dif / ((skipRecentTick ? pt.t1 : _ticker.time) - pt.t2));
+ };
+
+ _proto.getAll = function getAll() {
+ var result = {},
+ props = this._props,
+ p;
+
+ for (p in props) {
+ result[p] = this.get(p);
+ }
+
+ return result;
+ };
+
+ _proto.isTracking = function isTracking(property) {
+ return property in this._props;
+ };
+
+ _proto.add = function add(property, type) {
+ if (!(property in this._props)) {
+ if (!_first) {
+ _ticker.add(_onTick);
+
+ _time1 = _time2 = _ticker.time;
+ }
+
+ _first = this._props[property] = new PropTracker(this.target, property, type, _first);
+ }
+ };
+
+ _proto.remove = function remove(property) {
+ var pt = this._props[property],
+ prev,
+ next;
+
+ if (pt) {
+ prev = pt._prev;
+ next = pt._next;
+
+ if (prev) {
+ prev._next = next;
+ }
+
+ if (next) {
+ next._prev = prev;
+ } else if (_first === pt) {
+ _ticker.remove(_onTick);
+
+ _first = 0;
+ }
+
+ delete this._props[property];
+ }
+ };
+
+ _proto.kill = function kill(shallow) {
+ for (var p in this._props) {
+ this.remove(p);
+ }
+
+ if (!shallow) {
+ delete _lookup[_getID(this.target)];
+ }
+ };
+
+ VelocityTracker.track = function track(targets, properties, types) {
+ if (!_coreInitted) {
+ _initCore();
+ }
+
+ var result = [],
+ targs = _toArray(targets),
+ a = properties.split(","),
+ t = (types || "").split(","),
+ i = targs.length,
+ tracker,
+ j;
+
+ while (i--) {
+ tracker = _getByTarget(targs[i]) || new VelocityTracker(targs[i]);
+ j = a.length;
+
+ while (j--) {
+ tracker.add(a[j], t[j] || t[0]);
+ }
+
+ result.push(tracker);
+ }
+
+ return result;
+ };
+
+ VelocityTracker.untrack = function untrack(targets, properties) {
+ var props = (properties || "").split(",");
+
+ _toArray(targets).forEach(function (target) {
+ var tracker = _getByTarget(target);
+
+ if (tracker) {
+ if (!props.length) {
+ tracker.kill(1);
+ } else {
+ props.forEach(function (p) {
+ return tracker.remove(p);
+ });
+ }
+ }
+ });
+ };
+
+ VelocityTracker.isTracking = function isTracking(target, property) {
+ var tracker = _getByTarget(target);
+
+ return tracker && tracker.isTracking(property);
+ };
+
+ VelocityTracker.getVelocity = function getVelocity(target, property) {
+ var tracker = _getByTarget(target);
+
+ return !tracker || !tracker.isTracking(property) ? console.warn("Not tracking velocity of " + property) : tracker.get(property);
+ };
+
+ return VelocityTracker;
+}();
+VelocityTracker.getByTarget = _getByTarget;
+_getGSAP() && gsap.registerPlugin(VelocityTracker);
+export { VelocityTracker as default };
\ No newline at end of file
diff --git a/dist/lib/greensock/utils/matrix.js b/dist/lib/greensock/utils/matrix.js
new file mode 100644
index 00000000..7eba9798
--- /dev/null
+++ b/dist/lib/greensock/utils/matrix.js
@@ -0,0 +1,420 @@
+/*!
+ * matrix 3.11.0
+ * https://greensock.com
+ *
+ * Copyright 2008-2022, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var _doc,
+ _win,
+ _docElement,
+ _body,
+ _divContainer,
+ _svgContainer,
+ _identityMatrix,
+ _gEl,
+ _transformProp = "transform",
+ _transformOriginProp = _transformProp + "Origin",
+ _hasOffsetBug,
+ _setDoc = function _setDoc(element) {
+ var doc = element.ownerDocument || element;
+
+ if (!(_transformProp in element.style) && "msTransform" in element.style) {
+ //to improve compatibility with old Microsoft browsers
+ _transformProp = "msTransform";
+ _transformOriginProp = _transformProp + "Origin";
+ }
+
+ while (doc.parentNode && (doc = doc.parentNode)) {}
+
+ _win = window;
+ _identityMatrix = new Matrix2D();
+
+ if (doc) {
+ _doc = doc;
+ _docElement = doc.documentElement;
+ _body = doc.body;
+ _gEl = _doc.createElementNS("http://www.w3.org/2000/svg", "g"); // prevent any existing CSS from transforming it
+
+ _gEl.style.transform = "none"; // now test for the offset reporting bug. Use feature detection instead of browser sniffing to make things more bulletproof and future-proof. Hopefully Safari will fix their bug soon but it's 2020 and it's still not fixed.
+
+ var d1 = doc.createElement("div"),
+ d2 = doc.createElement("div");
+
+ _body.appendChild(d1);
+
+ d1.appendChild(d2);
+ d1.style.position = "static";
+ d1.style[_transformProp] = "translate3d(0,0,1px)";
+ _hasOffsetBug = d2.offsetParent !== d1;
+
+ _body.removeChild(d1);
+ }
+
+ return doc;
+},
+ _forceNonZeroScale = function _forceNonZeroScale(e) {
+ // walks up the element's ancestors and finds any that had their scale set to 0 via GSAP, and changes them to 0.0001 to ensure that measurements work. Firefox has a bug that causes it to incorrectly report getBoundingClientRect() when scale is 0.
+ var a, cache;
+
+ while (e && e !== _body) {
+ cache = e._gsap;
+ cache && cache.uncache && cache.get(e, "x"); // force re-parsing of transforms if necessary
+
+ if (cache && !cache.scaleX && !cache.scaleY && cache.renderTransform) {
+ cache.scaleX = cache.scaleY = 1e-4;
+ cache.renderTransform(1, cache);
+ a ? a.push(cache) : a = [cache];
+ }
+
+ e = e.parentNode;
+ }
+
+ return a;
+},
+ // possible future addition: pass an element to _forceDisplay() and it'll walk up all its ancestors and make sure anything with display: none is set to display: block, and if there's no parentNode, it'll add it to the body. It returns an Array that you can then feed to _revertDisplay() to have it revert all the changes it made.
+// _forceDisplay = e => {
+// let a = [],
+// parent;
+// while (e && e !== _body) {
+// parent = e.parentNode;
+// (_win.getComputedStyle(e).display === "none" || !parent) && a.push(e, e.style.display, parent) && (e.style.display = "block");
+// parent || _body.appendChild(e);
+// e = parent;
+// }
+// return a;
+// },
+// _revertDisplay = a => {
+// for (let i = 0; i < a.length; i+=3) {
+// a[i+1] ? (a[i].style.display = a[i+1]) : a[i].style.removeProperty("display");
+// a[i+2] || a[i].parentNode.removeChild(a[i]);
+// }
+// },
+_svgTemps = [],
+ //we create 3 elements for SVG, and 3 for other DOM elements and cache them for performance reasons. They get nested in _divContainer and _svgContainer so that just one element is added to the DOM on each successive attempt. Again, performance is key.
+_divTemps = [],
+ _getDocScrollTop = function _getDocScrollTop() {
+ return _win.pageYOffset || _doc.scrollTop || _docElement.scrollTop || _body.scrollTop || 0;
+},
+ _getDocScrollLeft = function _getDocScrollLeft() {
+ return _win.pageXOffset || _doc.scrollLeft || _docElement.scrollLeft || _body.scrollLeft || 0;
+},
+ _svgOwner = function _svgOwner(element) {
+ return element.ownerSVGElement || ((element.tagName + "").toLowerCase() === "svg" ? element : null);
+},
+ _isFixed = function _isFixed(element) {
+ if (_win.getComputedStyle(element).position === "fixed") {
+ return true;
+ }
+
+ element = element.parentNode;
+
+ if (element && element.nodeType === 1) {
+ // avoid document fragments which will throw an error.
+ return _isFixed(element);
+ }
+},
+ _createSibling = function _createSibling(element, i) {
+ if (element.parentNode && (_doc || _setDoc(element))) {
+ var svg = _svgOwner(element),
+ ns = svg ? svg.getAttribute("xmlns") || "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml",
+ type = svg ? i ? "rect" : "g" : "div",
+ x = i !== 2 ? 0 : 100,
+ y = i === 3 ? 100 : 0,
+ css = "position:absolute;display:block;pointer-events:none;margin:0;padding:0;",
+ e = _doc.createElementNS ? _doc.createElementNS(ns.replace(/^https/, "http"), type) : _doc.createElement(type);
+
+ if (i) {
+ if (!svg) {
+ if (!_divContainer) {
+ _divContainer = _createSibling(element);
+ _divContainer.style.cssText = css;
+ }
+
+ e.style.cssText = css + "width:0.1px;height:0.1px;top:" + y + "px;left:" + x + "px";
+
+ _divContainer.appendChild(e);
+ } else {
+ _svgContainer || (_svgContainer = _createSibling(element));
+ e.setAttribute("width", 0.01);
+ e.setAttribute("height", 0.01);
+ e.setAttribute("transform", "translate(" + x + "," + y + ")");
+
+ _svgContainer.appendChild(e);
+ }
+ }
+
+ return e;
+ }
+
+ throw "Need document and parent.";
+},
+ _consolidate = function _consolidate(m) {
+ // replaces SVGTransformList.consolidate() because a bug in Firefox causes it to break pointer events. See https://greensock.com/forums/topic/23248-touch-is-not-working-on-draggable-in-firefox-windows-v324/?tab=comments#comment-109800
+ var c = new Matrix2D(),
+ i = 0;
+
+ for (; i < m.numberOfItems; i++) {
+ c.multiply(m.getItem(i).matrix);
+ }
+
+ return c;
+},
+ _getCTM = function _getCTM(svg) {
+ var m = svg.getCTM(),
+ transform;
+
+ if (!m) {
+ // Firefox returns null for getCTM() on root