diff --git a/README.md b/README.md index 8e13926..80f435a 100644 --- a/README.md +++ b/README.md @@ -1 +1,18 @@ [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10967602&assignment_repo_type=AssignmentRepo) +What the project does? + + +Why the project is useful? + +The goal of this website is to create a + +How users can get started with the project? + + +Where users can get help with your project? + + +Which technology is used? + + +Who maintains and contributes to the project? \ No newline at end of file diff --git a/__MACOSX/gsap-public/._.DS_Store b/__MACOSX/gsap-public/._.DS_Store new file mode 100644 index 0000000..a5b28df Binary files /dev/null and b/__MACOSX/gsap-public/._.DS_Store differ diff --git a/__MACOSX/gsap-public/._docs-link.html b/__MACOSX/gsap-public/._docs-link.html new file mode 100644 index 0000000..0b09af8 Binary files /dev/null and b/__MACOSX/gsap-public/._docs-link.html differ diff --git a/__MACOSX/gsap-public/._getting-started-link.html b/__MACOSX/gsap-public/._getting-started-link.html new file mode 100644 index 0000000..b47934b Binary files /dev/null and b/__MACOSX/gsap-public/._getting-started-link.html differ diff --git a/__MACOSX/gsap-public/esm/._.DS_Store b/__MACOSX/gsap-public/esm/._.DS_Store new file mode 100644 index 0000000..a5b28df Binary files /dev/null and b/__MACOSX/gsap-public/esm/._.DS_Store differ diff --git a/__MACOSX/gsap-public/minified/._.DS_Store b/__MACOSX/gsap-public/minified/._.DS_Store new file mode 100644 index 0000000..a5b28df Binary files /dev/null and b/__MACOSX/gsap-public/minified/._.DS_Store differ diff --git a/__MACOSX/gsap-public/src/._.DS_Store b/__MACOSX/gsap-public/src/._.DS_Store new file mode 100644 index 0000000..a5b28df Binary files /dev/null and b/__MACOSX/gsap-public/src/._.DS_Store differ diff --git a/__MACOSX/gsap-public/umd/._.DS_Store b/__MACOSX/gsap-public/umd/._.DS_Store new file mode 100644 index 0000000..a5b28df Binary files /dev/null and b/__MACOSX/gsap-public/umd/._.DS_Store differ diff --git a/gsap-public/.DS_Store b/gsap-public/.DS_Store new file mode 100644 index 0000000..e2b6f19 Binary files /dev/null and b/gsap-public/.DS_Store differ diff --git a/gsap-public/docs-link.html b/gsap-public/docs-link.html new file mode 100644 index 0000000..9f79b00 --- /dev/null +++ b/gsap-public/docs-link.html @@ -0,0 +1,13 @@ + + + + + + +GSAP Documentation + + + + diff --git a/gsap-public/esm/.DS_Store b/gsap-public/esm/.DS_Store new file mode 100644 index 0000000..ce2147e Binary files /dev/null and b/gsap-public/esm/.DS_Store differ diff --git a/gsap-public/esm/CSSPlugin.js b/gsap-public/esm/CSSPlugin.js new file mode 100644 index 0000000..0dac85a --- /dev/null +++ b/gsap-public/esm/CSSPlugin.js @@ -0,0 +1,1552 @@ +/*! + * CSSPlugin 3.11.5 + * https://greensock.com + * + * Copyright 2008-2023, 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 { gsap, _getProperty, _numExp, _numWithUnitExp, getUnit, _isString, _isUndefined, _renderComplexString, _relExp, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _checkPlugin, _replaceRandom, _plugins, GSCache, PropTween, _config, _ticker, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _parseRelative, _setDefaults, _removeLinkedListItem //for the commented-out className feature. +} from "./gsap-core.js"; + +var _win, + _doc, + _docElement, + _pluginInitted, + _tempDiv, + _tempDivStyler, + _recentSetterPlugin, + _reverting, + _windowExists = function _windowExists() { + return typeof window !== "undefined"; +}, + _transformProps = {}, + _RAD2DEG = 180 / Math.PI, + _DEG2RAD = Math.PI / 180, + _atan2 = Math.atan2, + _bigNum = 1e8, + _capsExp = /([A-Z])/g, + _horizontalExp = /(left|right|width|margin|padding|x)/i, + _complexExp = /[\s,\(]\S/, + _propertyAliases = { + autoAlpha: "opacity,visibility", + scale: "scaleX,scaleY", + alpha: "opacity" +}, + _renderCSSProp = function _renderCSSProp(ratio, data) { + return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data); +}, + _renderPropWithEnd = function _renderPropWithEnd(ratio, data) { + return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data); +}, + _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) { + return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data); +}, + //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0) +_renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) { + var value = data.s + data.c * ratio; + data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data); +}, + _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) { + return data.set(data.t, data.p, ratio ? data.e : data.b, data); +}, + _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) { + return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data); +}, + _setterCSSStyle = function _setterCSSStyle(target, property, value) { + return target.style[property] = value; +}, + _setterCSSProp = function _setterCSSProp(target, property, value) { + return target.style.setProperty(property, value); +}, + _setterTransform = function _setterTransform(target, property, value) { + return target._gsap[property] = value; +}, + _setterScale = function _setterScale(target, property, value) { + return target._gsap.scaleX = target._gsap.scaleY = value; +}, + _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) { + var cache = target._gsap; + cache.scaleX = cache.scaleY = value; + cache.renderTransform(ratio, cache); +}, + _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) { + var cache = target._gsap; + cache[property] = value; + cache.renderTransform(ratio, cache); +}, + _transformProp = "transform", + _transformOriginProp = _transformProp + "Origin", + _saveStyle = function _saveStyle(property, isNotCSS) { + var _this = this; + + var target = this.target, + style = target.style; + + if (property in _transformProps) { + this.tfm = this.tfm || {}; + + if (property !== "transform") { + property = _propertyAliases[property] || property; + ~property.indexOf(",") ? property.split(",").forEach(function (a) { + return _this.tfm[a] = _get(target, a); + }) : this.tfm[property] = target._gsap.x ? target._gsap[property] : _get(target, property); // note: scale would map to "scaleX,scaleY", thus we loop and apply them both. + } else { + return _propertyAliases.transform.split(",").forEach(function (p) { + return _saveStyle.call(_this, p, isNotCSS); + }); + } + + if (this.props.indexOf(_transformProp) >= 0) { + return; + } + + if (target._gsap.svg) { + this.svgo = target.getAttribute("data-svg-origin"); + this.props.push(_transformOriginProp, isNotCSS, ""); + } + + property = _transformProp; + } + + (style || isNotCSS) && this.props.push(property, isNotCSS, style[property]); +}, + _removeIndependentTransforms = function _removeIndependentTransforms(style) { + if (style.translate) { + style.removeProperty("translate"); + style.removeProperty("scale"); + style.removeProperty("rotate"); + } +}, + _revertStyle = function _revertStyle() { + var props = this.props, + target = this.target, + style = target.style, + cache = target._gsap, + i, + p; + + for (i = 0; i < props.length; i += 3) { + // stored like this: property, isNotCSS, value + props[i + 1] ? target[props[i]] = props[i + 2] : props[i + 2] ? style[props[i]] = props[i + 2] : style.removeProperty(props[i].substr(0, 2) === "--" ? props[i] : props[i].replace(_capsExp, "-$1").toLowerCase()); + } + + if (this.tfm) { + for (p in this.tfm) { + cache[p] = this.tfm[p]; + } + + if (cache.svg) { + cache.renderTransform(); + target.setAttribute("data-svg-origin", this.svgo || ""); + } + + i = _reverting(); + + if ((!i || !i.isStart) && !style[_transformProp]) { + _removeIndependentTransforms(style); + + cache.uncache = 1; // if it's a startAt that's being reverted in the _initTween() of the core, we don't need to uncache transforms. This is purely a performance optimization. + } + } +}, + _getStyleSaver = function _getStyleSaver(target, properties) { + var saver = { + target: target, + props: [], + revert: _revertStyle, + save: _saveStyle + }; + target._gsap || gsap.core.getCache(target); // just make sure there's a _gsap cache defined because we read from it in _saveStyle() and it's more efficient to just check it here once. + + properties && properties.split(",").forEach(function (p) { + return saver.save(p); + }); + return saver; +}, + _supports3D, + _createElement = function _createElement(type, ns) { + var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making "style" inaccessible. + + return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/). +}, + _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) { + var cs = getComputedStyle(target); + return cs[property] || cs.getPropertyValue(property.replace(_capsExp, "-$1").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || ""; //css variables may not need caps swapped out for dashes and lowercase. +}, + _prefixes = "O,Moz,ms,Ms,Webkit".split(","), + _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) { + var e = element || _tempDiv, + s = e.style, + i = 5; + + if (property in s && !preferPrefix) { + return property; + } + + property = property.charAt(0).toUpperCase() + property.substr(1); + + while (i-- && !(_prefixes[i] + property in s)) {} + + return i < 0 ? null : (i === 3 ? "ms" : i >= 0 ? _prefixes[i] : "") + property; +}, + _initCore = function _initCore() { + if (_windowExists() && window.document) { + _win = window; + _doc = _win.document; + _docElement = _doc.documentElement; + _tempDiv = _createElement("div") || { + style: {} + }; + _tempDivStyler = _createElement("div"); + _transformProp = _checkPropPrefix(_transformProp); + _transformOriginProp = _transformProp + "Origin"; + _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets. + + _supports3D = !!_checkPropPrefix("perspective"); + _reverting = gsap.core.reverting; + _pluginInitted = 1; + } +}, + _getBBoxHack = function _getBBoxHack(swapIfPossible) { + //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a element and/or . We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it). + var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"), + oldParent = this.parentNode, + oldSibling = this.nextSibling, + oldCSS = this.style.cssText, + bbox; + + _docElement.appendChild(svg); + + svg.appendChild(this); + this.style.display = "block"; + + if (swapIfPossible) { + try { + bbox = this.getBBox(); + this._gsapBBox = this.getBBox; //store the original + + this.getBBox = _getBBoxHack; + } catch (e) {} + } else if (this._gsapBBox) { + bbox = this._gsapBBox(); + } + + if (oldParent) { + if (oldSibling) { + oldParent.insertBefore(this, oldSibling); + } else { + oldParent.appendChild(this); + } + } + + _docElement.removeChild(svg); + + this.style.cssText = oldCSS; + return bbox; +}, + _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) { + var i = attributesArray.length; + + while (i--) { + if (target.hasAttribute(attributesArray[i])) { + return target.getAttribute(attributesArray[i]); + } + } +}, + _getBBox = function _getBBox(target) { + var bounds; + + try { + bounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a or ). https://bugzilla.mozilla.org/show_bug.cgi?id=612118 + } catch (error) { + bounds = _getBBoxHack.call(target, true); + } + + bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true)); //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case. + + return bounds && !bounds.width && !bounds.x && !bounds.y ? { + x: +_getAttributeFallbacks(target, ["x", "cx", "x1"]) || 0, + y: +_getAttributeFallbacks(target, ["y", "cy", "y1"]) || 0, + width: 0, + height: 0 + } : bounds; +}, + _isSVG = function _isSVG(e) { + return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e)); +}, + //reports if the element is an SVG on which getBBox() actually works +_removeProperty = function _removeProperty(target, property) { + if (property) { + var style = target.style; + + if (property in _transformProps && property !== _transformOriginProp) { + property = _transformProp; + } + + if (style.removeProperty) { + if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") { + //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example) + property = "-" + property; + } + + style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase()); + } else { + //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" + style.removeAttribute(property); + } + } +}, + _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) { + var pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue); + plugin._pt = pt; + pt.b = beginning; + pt.e = end; + + plugin._props.push(property); + + return pt; +}, + _nonConvertibleUnits = { + deg: 1, + rad: 1, + turn: 1 +}, + _nonStandardLayouts = { + grid: 1, + flex: 1 +}, + //takes a single value like 20px and converts it to the unit specified, like "%", returning only the numeric amount. +_convertToUnit = function _convertToUnit(target, property, value, unit) { + var curValue = parseFloat(value) || 0, + curUnit = (value + "").trim().substr((curValue + "").length) || "px", + // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim() + style = _tempDiv.style, + horizontal = _horizontalExp.test(property), + isRootSVG = target.tagName.toLowerCase() === "svg", + measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"), + amount = 100, + toPixels = unit === "px", + toPercent = unit === "%", + px, + parent, + cache, + isSVG; + + if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) { + return curValue; + } + + curUnit !== "px" && !toPixels && (curValue = _convertToUnit(target, property, value, "px")); + isSVG = target.getCTM && _isSVG(target); + + if ((toPercent || curUnit === "%") && (_transformProps[property] || ~property.indexOf("adius"))) { + px = isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty]; + return _round(toPercent ? curValue / px * amount : curValue / 100 * px); + } + + style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit); + parent = ~property.indexOf("adius") || unit === "em" && target.appendChild && !isRootSVG ? target : target.parentNode; + + if (isSVG) { + parent = (target.ownerSVGElement || {}).parentNode; + } + + if (!parent || parent === _doc || !parent.appendChild) { + parent = _doc.body; + } + + cache = parent._gsap; + + if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time && !cache.uncache) { + return _round(curValue / cache.width * amount); + } else { + (toPercent || curUnit === "%") && !_nonStandardLayouts[_getComputedProperty(parent, "display")] && (style.position = _getComputedProperty(target, "position")); + parent === target && (style.position = "static"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that. + + parent.appendChild(_tempDiv); + px = _tempDiv[measureProperty]; + parent.removeChild(_tempDiv); + style.position = "absolute"; + + if (horizontal && toPercent) { + cache = _getCache(parent); + cache.time = _ticker.time; + cache.width = parent[measureProperty]; + } + } + + return _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0); +}, + _get = function _get(target, property, unit, uncache) { + var value; + _pluginInitted || _initCore(); + + if (property in _propertyAliases && property !== "transform") { + property = _propertyAliases[property]; + + if (~property.indexOf(",")) { + property = property.split(",")[0]; + } + } + + if (_transformProps[property] && property !== "transform") { + value = _parseTransform(target, uncache); + value = property !== "transformOrigin" ? value[property] : value.svg ? value.origin : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px"; + } else { + value = target.style[property]; + + if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) { + value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || _getProperty(target, property) || (property === "opacity" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like borderTopLeftRadius + } + } + + return unit && !~(value + "").trim().indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value; +}, + _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) { + // note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin. + if (!start || start === "none") { + // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style ("clipPath" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as "none" whereas WebkitClipPath reports accurately like "ellipse(100% 0% at 50% 0%)", so in this case we must SWITCH to using the prefixed property instead. See https://greensock.com/forums/topic/18310-clippath-doesnt-work-on-ios/ + var p = _checkPropPrefix(prop, target, 1), + s = p && _getComputedProperty(target, p, 1); + + if (s && s !== start) { + prop = p; + start = s; + } else if (prop === "borderColor") { + start = _getComputedProperty(target, "borderTopColor"); // Firefox bug: always reports "borderColor" as "", so we must fall back to borderTopColor. See https://greensock.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/ + } + } + + var pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString), + index = 0, + matchIndex = 0, + a, + result, + startValues, + startNum, + color, + startValue, + endValue, + endNum, + chunk, + endUnit, + startUnit, + endValues; + pt.b = start; + pt.e = end; + start += ""; // ensure values are strings + + end += ""; + + if (end === "auto") { + target.style[prop] = end; + end = _getComputedProperty(target, prop) || end; + target.style[prop] = start; + } + + a = [start, end]; + + _colorStringFilter(a); // pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow(). + + + start = a[0]; + end = a[1]; + startValues = start.match(_numWithUnitExp) || []; + endValues = end.match(_numWithUnitExp) || []; + + if (endValues.length) { + while (result = _numWithUnitExp.exec(end)) { + endValue = result[0]; + chunk = end.substring(index, result.index); + + if (color) { + color = (color + 1) % 5; + } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") { + color = 1; + } + + if (endValue !== (startValue = startValues[matchIndex++] || "")) { + startNum = parseFloat(startValue) || 0; + startUnit = startValue.substr((startNum + "").length); + endValue.charAt(1) === "=" && (endValue = _parseRelative(startNum, endValue) + startUnit); + endNum = parseFloat(endValue); + endUnit = endValue.substr((endNum + "").length); + index = _numWithUnitExp.lastIndex - endUnit.length; + + if (!endUnit) { + //if something like "perspective:300" is passed in and we must add a unit to the end + endUnit = endUnit || _config.units[prop] || startUnit; + + if (index === end.length) { + end += endUnit; + pt.e += endUnit; + } + } + + if (startUnit !== endUnit) { + startNum = _convertToUnit(target, prop, startValue, endUnit) || 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 - startNum, + m: color && color < 4 || prop === "zIndex" ? Math.round : 0 + }; + } + } + + 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) + } else { + pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue; + } + + _relExp.test(end) && (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 _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus "this" would refer to the plugin. + + return pt; +}, + _keywordToPercent = { + top: "0%", + bottom: "100%", + left: "0%", + right: "100%", + center: "50%" +}, + _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) { + var split = value.split(" "), + x = split[0], + y = split[1] || "50%"; + + if (x === "top" || x === "bottom" || y === "left" || y === "right") { + //the user provided them in the wrong order, so flip them + value = x; + x = y; + y = value; + } + + split[0] = _keywordToPercent[x] || x; + split[1] = _keywordToPercent[y] || y; + return split.join(" "); +}, + _renderClearProps = function _renderClearProps(ratio, data) { + if (data.tween && data.tween._time === data.tween._dur) { + var target = data.t, + style = target.style, + props = data.u, + cache = target._gsap, + prop, + clearTransforms, + i; + + if (props === "all" || props === true) { + style.cssText = ""; + clearTransforms = 1; + } else { + props = props.split(","); + i = props.length; + + while (--i > -1) { + prop = props[i]; + + if (_transformProps[prop]) { + clearTransforms = 1; + prop = prop === "transformOrigin" ? _transformOriginProp : _transformProp; + } + + _removeProperty(target, prop); + } + } + + if (clearTransforms) { + _removeProperty(target, _transformProp); + + if (cache) { + cache.svg && target.removeAttribute("transform"); + + _parseTransform(target, 1); // force all the cached values back to "normal"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values. + + + cache.uncache = 1; + + _removeIndependentTransforms(style); + } + } + } +}, + // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list. +_specialProps = { + clearProps: function clearProps(plugin, target, property, endValue, tween) { + if (tween.data !== "isFromStart") { + var pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps); + pt.u = endValue; + pt.pr = -10; + pt.tween = tween; + + plugin._props.push(property); + + return 1; + } + } + /* className feature (about 0.4kb gzipped). + , className(plugin, target, property, endValue, tween) { + let _renderClassName = (ratio, data) => { + data.css.render(ratio, data.css); + if (!ratio || ratio === 1) { + let inline = data.rmv, + target = data.t, + p; + target.setAttribute("class", ratio ? data.e : data.b); + for (p in inline) { + _removeProperty(target, p); + } + } + }, + _getAllStyles = (target) => { + let styles = {}, + computed = getComputedStyle(target), + p; + for (p in computed) { + if (isNaN(p) && p !== "cssText" && p !== "length") { + styles[p] = computed[p]; + } + } + _setDefaults(styles, _parseTransform(target, 1)); + return styles; + }, + startClassList = target.getAttribute("class"), + style = target.style, + cssText = style.cssText, + cache = target._gsap, + classPT = cache.classPT, + inlineToRemoveAtEnd = {}, + data = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== "=") ? endValue : startClassList.replace(new RegExp("(?:\\s|^)" + endValue.substr(2) + "(?![\\w-])"), "") + ((endValue.charAt(0) === "+") ? " " + endValue.substr(2) : "")}, + changingVars = {}, + startVars = _getAllStyles(target), + transformRelated = /(transform|perspective)/i, + endVars, p; + if (classPT) { + classPT.r(1, classPT.d); + _removeLinkedListItem(classPT.d.plugin, classPT, "_pt"); + } + target.setAttribute("class", data.e); + endVars = _getAllStyles(target, true); + target.setAttribute("class", startClassList); + for (p in endVars) { + if (endVars[p] !== startVars[p] && !transformRelated.test(p)) { + changingVars[p] = endVars[p]; + if (!style[p] && style[p] !== "0") { + inlineToRemoveAtEnd[p] = 1; + } + } + } + cache.classPT = plugin._pt = new PropTween(plugin._pt, target, "className", 0, 0, _renderClassName, data, 0, -11); + if (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/. + style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity). + } + _parseTransform(target, true); //to clear the caching of transforms + data.css = new gsap.plugins.css(); + data.css.init(target, changingVars, tween); + plugin._props.push(...data.css._props); + return 1; + } + */ + +}, + +/* + * -------------------------------------------------------------------------------------- + * TRANSFORMS + * -------------------------------------------------------------------------------------- + */ +_identity2DMatrix = [1, 0, 0, 1, 0, 0], + _rotationalProperties = {}, + _isNullTransform = function _isNullTransform(value) { + return value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value; +}, + _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) { + var matrixString = _getComputedProperty(target, _transformProp); + + return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round); +}, + _getMatrix = function _getMatrix(target, force2D) { + var cache = target._gsap || _getCache(target), + style = target.style, + matrix = _getComputedTransformMatrixAsArray(target), + parent, + nextSibling, + temp, + addedToDOM; + + if (cache.svg && target.getAttribute("transform")) { + temp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like "translate(50,60) rotate(135,0,0)" are parsed because it mashes it into a matrix. + + matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f]; + return matrix.join(",") === "1,0,0,1,0,0" ? _identity2DMatrix : matrix; + } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) { + //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397 + //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px). + temp = style.display; + style.display = "block"; + parent = target.parentNode; + + if (!parent || !target.offsetParent) { + // note: in 3.3.0 we switched target.offsetParent to _doc.body.contains(target) to avoid [sometimes unnecessary] MutationObserver calls but that wasn't adequate because there are edge cases where nested position: fixed elements need to get reparented to accurately sense transforms. See https://github.com/greensock/GSAP/issues/388 and https://github.com/greensock/GSAP/issues/375 + addedToDOM = 1; //flag + + nextSibling = target.nextElementSibling; + + _docElement.appendChild(target); //we must add it to the DOM in order to get values properly + + } + + matrix = _getComputedTransformMatrixAsArray(target); + temp ? style.display = temp : _removeProperty(target, "display"); + + if (addedToDOM) { + nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target); + } + } + + return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix; +}, + _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) { + var cache = target._gsap, + matrix = matrixArray || _getMatrix(target, true), + xOriginOld = cache.xOrigin || 0, + yOriginOld = cache.yOrigin || 0, + xOffsetOld = cache.xOffset || 0, + yOffsetOld = cache.yOffset || 0, + a = matrix[0], + b = matrix[1], + c = matrix[2], + d = matrix[3], + tx = matrix[4], + ty = matrix[5], + originSplit = origin.split(" "), + xOrigin = parseFloat(originSplit[0]) || 0, + yOrigin = parseFloat(originSplit[1]) || 0, + bounds, + determinant, + x, + y; + + if (!originIsAbsolute) { + bounds = _getBBox(target); + xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin); + yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf("%") ? yOrigin / 100 * bounds.height : yOrigin); + } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) { + //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero. + x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant; + y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant; + xOrigin = x; + yOrigin = y; + } + + if (smooth || smooth !== false && cache.smooth) { + tx = xOrigin - xOriginOld; + ty = yOrigin - yOriginOld; + cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx; + cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty; + } else { + cache.xOffset = cache.yOffset = 0; + } + + cache.xOrigin = xOrigin; + cache.yOrigin = yOrigin; + cache.smooth = !!smooth; + cache.origin = origin; + cache.originIsAbsolute = !!originIsAbsolute; + target.style[_transformOriginProp] = "0px 0px"; //otherwise, if someone sets an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value). + + if (pluginToAddPropTweensTo) { + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin); + + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin); + + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset); + + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset); + } + + target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin); +}, + _parseTransform = function _parseTransform(target, uncache) { + var cache = target._gsap || new GSCache(target); + + if ("x" in cache && !uncache && !cache.uncache) { + return cache; + } + + var style = target.style, + invertedScaleX = cache.scaleX < 0, + px = "px", + deg = "deg", + cs = getComputedStyle(target), + origin = _getComputedProperty(target, _transformOriginProp) || "0", + x, + y, + z, + scaleX, + scaleY, + rotation, + rotationX, + rotationY, + skewX, + skewY, + perspective, + xOrigin, + yOrigin, + matrix, + angle, + cos, + sin, + a, + b, + c, + d, + a12, + a22, + t1, + t2, + t3, + a13, + a23, + a33, + a42, + a43, + a32; + x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0; + scaleX = scaleY = 1; + cache.svg = !!(target.getCTM && _isSVG(target)); + + if (cs.translate) { + // accommodate independent transforms by combining them into normal ones. + if (cs.translate !== "none" || cs.scale !== "none" || cs.rotate !== "none") { + style[_transformProp] = (cs.translate !== "none" ? "translate3d(" + (cs.translate + " 0 0").split(" ").slice(0, 3).join(", ") + ") " : "") + (cs.rotate !== "none" ? "rotate(" + cs.rotate + ") " : "") + (cs.scale !== "none" ? "scale(" + cs.scale.split(" ").join(",") + ") " : "") + (cs[_transformProp] !== "none" ? cs[_transformProp] : ""); + } + + style.scale = style.rotate = style.translate = "none"; + } + + matrix = _getMatrix(target, cache.svg); + + if (cache.svg) { + if (cache.uncache) { + // if cache.uncache is true (and maybe if origin is 0,0), we need to set element.style.transformOrigin = (cache.xOrigin - bbox.x) + "px " + (cache.yOrigin - bbox.y) + "px". Previously we let the data-svg-origin stay instead, but when introducing revert(), it complicated things. + t2 = target.getBBox(); + origin = cache.xOrigin - t2.x + "px " + (cache.yOrigin - t2.y) + "px"; + t1 = ""; + } else { + t1 = !uncache && target.getAttribute("data-svg-origin"); // Remember, to work around browser inconsistencies we always force SVG elements' transformOrigin to 0,0 and offset the translation accordingly. + } + + _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix); + } + + xOrigin = cache.xOrigin || 0; + yOrigin = cache.yOrigin || 0; + + if (matrix !== _identity2DMatrix) { + a = matrix[0]; //a11 + + b = matrix[1]; //a21 + + c = matrix[2]; //a31 + + d = matrix[3]; //a41 + + x = a12 = matrix[4]; + y = a22 = matrix[5]; //2D matrix + + if (matrix.length === 6) { + scaleX = Math.sqrt(a * a + b * b); + scaleY = Math.sqrt(d * d + c * c); + rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist). + + skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0; + skewX && (scaleY *= Math.abs(Math.cos(skewX * _DEG2RAD))); + + if (cache.svg) { + x -= xOrigin - (xOrigin * a + yOrigin * c); + y -= yOrigin - (xOrigin * b + yOrigin * d); + } //3D matrix + + } else { + a32 = matrix[6]; + a42 = matrix[7]; + a13 = matrix[8]; + a23 = matrix[9]; + a33 = matrix[10]; + a43 = matrix[11]; + x = matrix[12]; + y = matrix[13]; + z = matrix[14]; + angle = _atan2(a32, a33); + rotationX = angle * _RAD2DEG; //rotationX + + if (angle) { + cos = Math.cos(-angle); + sin = Math.sin(-angle); + t1 = a12 * cos + a13 * sin; + t2 = a22 * cos + a23 * sin; + t3 = a32 * cos + a33 * sin; + a13 = a12 * -sin + a13 * cos; + a23 = a22 * -sin + a23 * cos; + a33 = a32 * -sin + a33 * cos; + a43 = a42 * -sin + a43 * cos; + a12 = t1; + a22 = t2; + a32 = t3; + } //rotationY + + + angle = _atan2(-c, a33); + rotationY = angle * _RAD2DEG; + + if (angle) { + cos = Math.cos(-angle); + sin = Math.sin(-angle); + t1 = a * cos - a13 * sin; + t2 = b * cos - a23 * sin; + t3 = c * cos - a33 * sin; + a43 = d * sin + a43 * cos; + a = t1; + b = t2; + c = t3; + } //rotationZ + + + angle = _atan2(b, a); + rotation = angle * _RAD2DEG; + + if (angle) { + cos = Math.cos(angle); + sin = Math.sin(angle); + t1 = a * cos + b * sin; + t2 = a12 * cos + a22 * sin; + b = b * cos - a * sin; + a22 = a22 * cos - a12 * sin; + a = t1; + a12 = t2; + } + + if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) { + //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here. + rotationX = rotation = 0; + rotationY = 180 - rotationY; + } + + scaleX = _round(Math.sqrt(a * a + b * b + c * c)); + scaleY = _round(Math.sqrt(a22 * a22 + a32 * a32)); + angle = _atan2(a12, a22); + skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0; + perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0; + } + + if (cache.svg) { + //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline). + t1 = target.getAttribute("transform"); + cache.forceCSS = target.setAttribute("transform", "") || !_isNullTransform(_getComputedProperty(target, _transformProp)); + t1 && target.setAttribute("transform", t1); + } + } + + if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) { + if (invertedScaleX) { + scaleX *= -1; + skewX += rotation <= 0 ? 180 : -180; + rotation += rotation <= 0 ? 180 : -180; + } else { + scaleY *= -1; + skewX += skewX <= 0 ? 180 : -180; + } + } + + uncache = uncache || cache.uncache; + cache.x = x - ((cache.xPercent = x && (!uncache && cache.xPercent || (Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0))) ? target.offsetWidth * cache.xPercent / 100 : 0) + px; + cache.y = y - ((cache.yPercent = y && (!uncache && cache.yPercent || (Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0))) ? target.offsetHeight * cache.yPercent / 100 : 0) + px; + cache.z = z + px; + cache.scaleX = _round(scaleX); + cache.scaleY = _round(scaleY); + cache.rotation = _round(rotation) + deg; + cache.rotationX = _round(rotationX) + deg; + cache.rotationY = _round(rotationY) + deg; + cache.skewX = skewX + deg; + cache.skewY = skewY + deg; + cache.transformPerspective = perspective + px; + + if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) { + style[_transformOriginProp] = _firstTwoOnly(origin); + } + + cache.xOffset = cache.yOffset = 0; + cache.force3D = _config.force3D; + cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms; + cache.uncache = 0; + return cache; +}, + _firstTwoOnly = function _firstTwoOnly(value) { + return (value = value.split(" "))[0] + " " + value[1]; +}, + //for handling transformOrigin values, stripping out the 3rd dimension +_addPxTranslate = function _addPxTranslate(target, start, value) { + var unit = getUnit(start); + return _round(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit; +}, + _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) { + cache.z = "0px"; + cache.rotationY = cache.rotationX = "0deg"; + cache.force3D = 0; + + _renderCSSTransforms(ratio, cache); +}, + _zeroDeg = "0deg", + _zeroPx = "0px", + _endParenthesis = ") ", + _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) { + var _ref = cache || this, + xPercent = _ref.xPercent, + yPercent = _ref.yPercent, + x = _ref.x, + y = _ref.y, + z = _ref.z, + rotation = _ref.rotation, + rotationY = _ref.rotationY, + rotationX = _ref.rotationX, + skewX = _ref.skewX, + skewY = _ref.skewY, + scaleX = _ref.scaleX, + scaleY = _ref.scaleY, + transformPerspective = _ref.transformPerspective, + force3D = _ref.force3D, + target = _ref.target, + zOrigin = _ref.zOrigin, + transforms = "", + use3D = force3D === "auto" && ratio && ratio !== 1 || force3D === true; // Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually) + + + if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) { + var angle = parseFloat(rotationY) * _DEG2RAD, + a13 = Math.sin(angle), + a33 = Math.cos(angle), + cos; + + angle = parseFloat(rotationX) * _DEG2RAD; + cos = Math.cos(angle); + x = _addPxTranslate(target, x, a13 * cos * -zOrigin); + y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin); + z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin); + } + + if (transformPerspective !== _zeroPx) { + transforms += "perspective(" + transformPerspective + _endParenthesis; + } + + if (xPercent || yPercent) { + transforms += "translate(" + xPercent + "%, " + yPercent + "%) "; + } + + if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) { + transforms += z !== _zeroPx || use3D ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis; + } + + if (rotation !== _zeroDeg) { + transforms += "rotate(" + rotation + _endParenthesis; + } + + if (rotationY !== _zeroDeg) { + transforms += "rotateY(" + rotationY + _endParenthesis; + } + + if (rotationX !== _zeroDeg) { + transforms += "rotateX(" + rotationX + _endParenthesis; + } + + if (skewX !== _zeroDeg || skewY !== _zeroDeg) { + transforms += "skew(" + skewX + ", " + skewY + _endParenthesis; + } + + if (scaleX !== 1 || scaleY !== 1) { + transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis; + } + + target.style[_transformProp] = transforms || "translate(0, 0)"; +}, + _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) { + var _ref2 = cache || this, + xPercent = _ref2.xPercent, + yPercent = _ref2.yPercent, + x = _ref2.x, + y = _ref2.y, + rotation = _ref2.rotation, + skewX = _ref2.skewX, + skewY = _ref2.skewY, + scaleX = _ref2.scaleX, + scaleY = _ref2.scaleY, + target = _ref2.target, + xOrigin = _ref2.xOrigin, + yOrigin = _ref2.yOrigin, + xOffset = _ref2.xOffset, + yOffset = _ref2.yOffset, + forceCSS = _ref2.forceCSS, + tx = parseFloat(x), + ty = parseFloat(y), + a11, + a21, + a12, + a22, + temp; + + rotation = parseFloat(rotation); + skewX = parseFloat(skewX); + skewY = parseFloat(skewY); + + if (skewY) { + //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees. + skewY = parseFloat(skewY); + skewX += skewY; + rotation += skewY; + } + + if (rotation || skewX) { + rotation *= _DEG2RAD; + skewX *= _DEG2RAD; + a11 = Math.cos(rotation) * scaleX; + a21 = Math.sin(rotation) * scaleX; + a12 = Math.sin(rotation - skewX) * -scaleY; + a22 = Math.cos(rotation - skewX) * scaleY; + + if (skewX) { + skewY *= _DEG2RAD; + temp = Math.tan(skewX - skewY); + temp = Math.sqrt(1 + temp * temp); + a12 *= temp; + a22 *= temp; + + if (skewY) { + temp = Math.tan(skewY); + temp = Math.sqrt(1 + temp * temp); + a11 *= temp; + a21 *= temp; + } + } + + a11 = _round(a11); + a21 = _round(a21); + a12 = _round(a12); + a22 = _round(a22); + } else { + a11 = scaleX; + a22 = scaleY; + a21 = a12 = 0; + } + + if (tx && !~(x + "").indexOf("px") || ty && !~(y + "").indexOf("px")) { + tx = _convertToUnit(target, "x", x, "px"); + ty = _convertToUnit(target, "y", y, "px"); + } + + if (xOrigin || yOrigin || xOffset || yOffset) { + tx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset); + ty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset); + } + + if (xPercent || yPercent) { + //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the translation to simulate it. + temp = target.getBBox(); + tx = _round(tx + xPercent / 100 * temp.width); + ty = _round(ty + yPercent / 100 * temp.height); + } + + temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")"; + target.setAttribute("transform", temp); + forceCSS && (target.style[_transformProp] = temp); //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the transform attribute changes!) +}, + _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue) { + var cap = 360, + isString = _isString(endValue), + endNum = parseFloat(endValue) * (isString && ~endValue.indexOf("rad") ? _RAD2DEG : 1), + change = endNum - startNum, + finalValue = startNum + change + "deg", + direction, + pt; + + if (isString) { + direction = endValue.split("_")[1]; + + if (direction === "short") { + change %= cap; + + if (change !== change % (cap / 2)) { + change += change < 0 ? cap : -cap; + } + } + + if (direction === "cw" && change < 0) { + change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap; + } else if (direction === "ccw" && change > 0) { + change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap; + } + } + + plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd); + pt.e = finalValue; + pt.u = "deg"; + + plugin._props.push(property); + + return pt; +}, + _assign = function _assign(target, source) { + // Internet Explorer doesn't have Object.assign(), so we recreate it here. + for (var p in source) { + target[p] = source[p]; + } + + return target; +}, + _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) { + //for handling cases where someone passes in a whole transform string, like transform: "scale(2, 3) rotate(20deg) translateY(30em)" + var startCache = _assign({}, target._gsap), + exclude = "perspective,force3D,transformOrigin,svgOrigin", + style = target.style, + endCache, + p, + startValue, + endValue, + startNum, + endNum, + startUnit, + endUnit; + + if (startCache.svg) { + startValue = target.getAttribute("transform"); + target.setAttribute("transform", ""); + style[_transformProp] = transforms; + endCache = _parseTransform(target, 1); + + _removeProperty(target, _transformProp); + + target.setAttribute("transform", startValue); + } else { + startValue = getComputedStyle(target)[_transformProp]; + style[_transformProp] = transforms; + endCache = _parseTransform(target, 1); + style[_transformProp] = startValue; + } + + for (p in _transformProps) { + startValue = startCache[p]; + endValue = endCache[p]; + + if (startValue !== endValue && exclude.indexOf(p) < 0) { + //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case. + startUnit = getUnit(startValue); + endUnit = getUnit(endValue); + startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue); + endNum = parseFloat(endValue); + plugin._pt = new PropTween(plugin._pt, endCache, p, startNum, endNum - startNum, _renderCSSProp); + plugin._pt.u = endUnit || 0; + + plugin._props.push(p); + } + } + + _assign(endCache, startCache); +}; // handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc. + + +_forEachName("padding,margin,Width,Radius", function (name, index) { + var t = "Top", + r = "Right", + b = "Bottom", + l = "Left", + props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) { + return index < 2 ? name + side : "border" + side + name; + }); + + _specialProps[index > 1 ? "border" + name : name] = function (plugin, target, property, endValue, tween) { + var a, vars; + + if (arguments.length < 4) { + // getter, passed target, property, and unit (from _get()) + a = props.map(function (prop) { + return _get(plugin, prop, property); + }); + vars = a.join(" "); + return vars.split(a[0]).length === 5 ? a[0] : vars; + } + + a = (endValue + "").split(" "); + vars = {}; + props.forEach(function (prop, i) { + return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0]; + }); + plugin.init(target, vars, tween); + }; +}); + +export var CSSPlugin = { + name: "css", + register: _initCore, + targetTest: function targetTest(target) { + return target.style && target.nodeType; + }, + init: function init(target, vars, tween, index, targets) { + var props = this._props, + style = target.style, + startAt = tween.vars.startAt, + startValue, + endValue, + endNum, + startNum, + type, + specialProp, + p, + startUnit, + endUnit, + relative, + isTransformRelated, + transformPropTween, + cache, + smooth, + hasPriority, + inlineProps; + _pluginInitted || _initCore(); // we may call init() multiple times on the same plugin instance, like when adding special properties, so make sure we don't overwrite the revert data or inlineProps + + this.styles = this.styles || _getStyleSaver(target); + inlineProps = this.styles.props; + this.tween = tween; + + for (p in vars) { + if (p === "autoRound") { + continue; + } + + endValue = vars[p]; + + if (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) { + // plugins + continue; + } + + type = typeof endValue; + specialProp = _specialProps[p]; + + if (type === "function") { + endValue = endValue.call(tween, index, target, targets); + type = typeof endValue; + } + + if (type === "string" && ~endValue.indexOf("random(")) { + endValue = _replaceRandom(endValue); + } + + if (specialProp) { + specialProp(this, target, p, endValue, tween) && (hasPriority = 1); + } else if (p.substr(0, 2) === "--") { + //CSS variable + startValue = (getComputedStyle(target).getPropertyValue(p) + "").trim(); + endValue += ""; + _colorExp.lastIndex = 0; + + if (!_colorExp.test(startValue)) { + // colors don't have units + startUnit = getUnit(startValue); + endUnit = getUnit(endValue); + } + + endUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit); + this.add(style, "setProperty", startValue, endValue, index, targets, 0, 0, p); + props.push(p); + inlineProps.push(p, 0, style[p]); + } else if (type !== "undefined") { + if (startAt && p in startAt) { + // in case someone hard-codes a complex value as the start, like top: "calc(2vh / 2)". Without this, it'd use the computed value (always in px) + startValue = typeof startAt[p] === "function" ? startAt[p].call(tween, index, target, targets) : startAt[p]; + _isString(startValue) && ~startValue.indexOf("random(") && (startValue = _replaceRandom(startValue)); + getUnit(startValue + "") || (startValue += _config.units[p] || getUnit(_get(target, p)) || ""); // for cases when someone passes in a unitless value like {x: 100}; if we try setting translate(100, 0px) it won't work. + + (startValue + "").charAt(1) === "=" && (startValue = _get(target, p)); // can't work with relative values + } else { + startValue = _get(target, p); + } + + startNum = parseFloat(startValue); + relative = type === "string" && endValue.charAt(1) === "=" && endValue.substr(0, 2); + relative && (endValue = endValue.substr(2)); + endNum = parseFloat(endValue); + + if (p in _propertyAliases) { + if (p === "autoAlpha") { + //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened. + if (startNum === 1 && _get(target, "visibility") === "hidden" && endNum) { + //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience) + startNum = 0; + } + + inlineProps.push("visibility", 0, style.visibility); + + _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum); + } + + if (p !== "scale" && p !== "transform") { + p = _propertyAliases[p]; + ~p.indexOf(",") && (p = p.split(",")[0]); + } + } + + isTransformRelated = p in _transformProps; //--- TRANSFORM-RELATED --- + + if (isTransformRelated) { + this.styles.save(p); + + if (!transformPropTween) { + cache = target._gsap; + cache.renderTransform && !vars.parseTransform || _parseTransform(target, vars.parseTransform); // if, for example, gsap.set(... {transform:"translateX(50vw)"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here. + + smooth = vars.smoothOrigin !== false && cache.smooth; + transformPropTween = this._pt = new PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning) + + transformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween. + } + + if (p === "scale") { + this._pt = new PropTween(this._pt, cache, "scaleY", cache.scaleY, (relative ? _parseRelative(cache.scaleY, relative + endNum) : endNum) - cache.scaleY || 0, _renderCSSProp); + this._pt.u = 0; + props.push("scaleY", p); + p += "X"; + } else if (p === "transformOrigin") { + inlineProps.push(_transformOriginProp, 0, style[_transformOriginProp]); + endValue = _convertKeywordsToPercentages(endValue); //in case something like "left top" or "bottom right" is passed in. Convert to percentages. + + if (cache.svg) { + _applySVGOrigin(target, endValue, 0, smooth, 0, this); + } else { + endUnit = parseFloat(endValue.split(" ")[2]) || 0; //handle the zOrigin separately! + + endUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit); + + _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue)); + } + + continue; + } else if (p === "svgOrigin") { + _applySVGOrigin(target, endValue, 1, smooth, 0, this); + + continue; + } else if (p in _rotationalProperties) { + _addRotationalPropTween(this, cache, p, startNum, relative ? _parseRelative(startNum, relative + endValue) : endValue); + + continue; + } else if (p === "smoothOrigin") { + _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue); + + continue; + } else if (p === "force3D") { + cache[p] = endValue; + continue; + } else if (p === "transform") { + _addRawTransformPTs(this, endValue, target); + + continue; + } + } else if (!(p in style)) { + p = _checkPropPrefix(p) || p; + } + + if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) { + startUnit = (startValue + "").substr((startNum + "").length); + endNum || (endNum = 0); // protect against NaN + + endUnit = getUnit(endValue) || (p in _config.units ? _config.units[p] : startUnit); + startUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit)); + this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, (relative ? _parseRelative(startNum, relative + endNum) : endNum) - startNum, !isTransformRelated && (endUnit === "px" || p === "zIndex") && vars.autoRound !== false ? _renderRoundedCSSProp : _renderCSSProp); + this._pt.u = endUnit || 0; + + if (startUnit !== endUnit && endUnit !== "%") { + //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a "b" (beginning) property and point to a render method that handles that. (performance optimization) + this._pt.b = startValue; + this._pt.r = _renderCSSPropWithBeginning; + } + } else if (!(p in style)) { + if (p in target) { + //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that. + this.add(target, p, startValue || target[p], relative ? relative + endValue : endValue, index, targets); + } else if (p !== "parseTransform") { + _missingPlugin(p, endValue); + + continue; + } + } else { + _tweenComplexCSSString.call(this, target, p, startValue, relative ? relative + endValue : endValue); + } + + isTransformRelated || (p in style ? inlineProps.push(p, 0, style[p]) : inlineProps.push(p, 1, startValue || target[p])); + props.push(p); + } + } + + hasPriority && _sortPropTweensByPriority(this); + }, + render: function render(ratio, data) { + if (data.tween._time || !_reverting()) { + var pt = data._pt; + + while (pt) { + pt.r(ratio, pt.d); + pt = pt._next; + } + } else { + data.styles.revert(); + } + }, + get: _get, + aliases: _propertyAliases, + getSetter: function getSetter(target, property, plugin) { + //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like "x" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer. + var p = _propertyAliases[property]; + p && p.indexOf(",") < 0 && (property = p); + return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, "x")) ? plugin && _recentSetterPlugin === plugin ? property === "scale" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === "scale" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !_isUndefined(target.style[property]) ? _setterCSSStyle : ~property.indexOf("-") ? _setterCSSProp : _getSetter(target, property); + }, + core: { + _removeProperty: _removeProperty, + _getMatrix: _getMatrix + } +}; +gsap.utils.checkPrefix = _checkPropPrefix; +gsap.core.getStyleSaver = _getStyleSaver; + +(function (positionAndScale, rotation, others, aliases) { + var all = _forEachName(positionAndScale + "," + rotation + "," + others, function (name) { + _transformProps[name] = 1; + }); + + _forEachName(rotation, function (name) { + _config.units[name] = "deg"; + _rotationalProperties[name] = 1; + }); + + _propertyAliases[all[13]] = positionAndScale + "," + rotation; + + _forEachName(aliases, function (name) { + var split = name.split(":"); + _propertyAliases[split[1]] = all[split[0]]; + }); +})("x,y,z,scale,scaleX,scaleY,xPercent,yPercent", "rotation,rotationX,rotationY,skewX,skewY", "transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective", "0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY"); + +_forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function (name) { + _config.units[name] = "px"; +}); + +gsap.registerPlugin(CSSPlugin); +export { CSSPlugin as default, _getBBox, _createElement, _checkPropPrefix as checkPrefix }; \ No newline at end of file diff --git a/gsap-public/esm/CSSRulePlugin.js b/gsap-public/esm/CSSRulePlugin.js new file mode 100644 index 0000000..629d362 --- /dev/null +++ b/gsap-public/esm/CSSRulePlugin.js @@ -0,0 +1,134 @@ +/*! + * CSSRulePlugin 3.11.5 + * https://greensock.com + * + * @license Copyright 2008-2023, 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, + _win, + _doc, + CSSPlugin, + _windowExists = function _windowExists() { + return typeof window !== "undefined"; +}, + _getGSAP = function _getGSAP() { + return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap; +}, + _checkRegister = function _checkRegister() { + if (!_coreInitted) { + _initCore(); + + if (!CSSPlugin) { + console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)"); + } + } + + return _coreInitted; +}, + _initCore = function _initCore(core) { + gsap = core || _getGSAP(); + + if (_windowExists()) { + _win = window; + _doc = document; + } + + if (gsap) { + CSSPlugin = gsap.plugins.css; + + if (CSSPlugin) { + _coreInitted = 1; + } + } +}; + +export var CSSRulePlugin = { + version: "3.11.5", + name: "cssRule", + init: function init(target, value, tween, index, targets) { + if (!_checkRegister() || typeof target.cssText === "undefined") { + return false; + } + + var div = target._gsProxy = target._gsProxy || _doc.createElement("div"); + + this.ss = target; + this.style = div.style; + div.style.cssText = target.cssText; + CSSPlugin.prototype.init.call(this, div, value, tween, index, targets); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the render() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both + }, + render: function render(ratio, data) { + var pt = data._pt, + style = data.style, + ss = data.ss, + i; + + while (pt) { + pt.r(ratio, pt.d); + pt = pt._next; + } + + i = style.length; + + while (--i > -1) { + ss[style[i]] = style[style[i]]; + } + }, + getRule: function getRule(selector) { + _checkRegister(); + + var ruleProp = _doc.all ? "rules" : "cssRules", + styleSheets = _doc.styleSheets, + i = styleSheets.length, + pseudo = selector.charAt(0) === ":", + j, + curSS, + cs, + a; + selector = (pseudo ? "" : ",") + selector.split("::").join(":").toLowerCase() + ","; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase. + + if (pseudo) { + a = []; + } + + while (i--) { + //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. + try { + curSS = styleSheets[i][ruleProp]; + + if (!curSS) { + continue; + } + + j = curSS.length; + } catch (e) { + console.warn(e); + continue; + } + + while (--j > -1) { + cs = curSS[j]; + + if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { + //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out. + if (pseudo) { + a.push(cs.style); + } else { + return cs.style; + } + } + } + } + + return a; + }, + register: _initCore +}; +_getGSAP() && gsap.registerPlugin(CSSRulePlugin); +export { CSSRulePlugin as default }; \ No newline at end of file diff --git a/gsap-public/esm/CustomEase.js b/gsap-public/esm/CustomEase.js new file mode 100644 index 0000000..2d3c6fc --- /dev/null +++ b/gsap-public/esm/CustomEase.js @@ -0,0 +1,371 @@ +/*! + * CustomEase 3.11.5 + * https://greensock.com + * + * @license Copyright 2008-2023, 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, transformRawPath } from "./utils/paths.js"; + +var gsap, + _coreInitted, + _getGSAP = function _getGSAP() { + return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap; +}, + _initCore = function _initCore() { + gsap = _getGSAP(); + + if (gsap) { + gsap.registerEase("_CE", CustomEase.create); + _coreInitted = 1; + } else { + console.warn("Please gsap.registerPlugin(CustomEase)"); + } +}, + _bigNum = 1e20, + _round = function _round(value) { + return ~~(value * 1000 + (value < 0 ? -.5 : .5)) / 1000; +}, + _bonusValidated = 1, + //CustomEase +_numExp = /[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/gi, + //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8. +_needsParsingExp = /[cLlsSaAhHvVtTqQ]/g, + _findMinimum = function _findMinimum(values) { + var l = values.length, + min = _bigNum, + i; + + for (i = 1; i < l; i += 6) { + +values[i] < min && (min = +values[i]); + } + + return min; +}, + //takes all the points and translates/scales them so that the x starts at 0 and ends at 1. +_normalize = function _normalize(values, height, originY) { + if (!originY && originY !== 0) { + originY = Math.max(+values[values.length - 1], +values[1]); + } + + var tx = +values[0] * -1, + ty = -originY, + l = values.length, + sx = 1 / (+values[l - 2] + tx), + sy = -height || (Math.abs(+values[l - 1] - +values[1]) < 0.01 * (+values[l - 2] - +values[0]) ? _findMinimum(values) + ty : +values[l - 1] + ty), + i; + + 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; + } + + for (i = 0; i < l; i += 2) { + values[i] = (+values[i] + tx) * sx; + values[i + 1] = (+values[i + 1] + ty) * sy; + } +}, + //note that this function returns point objects like {x, y} rather than working with segments which are arrays with alternating x, y values as in the similar function in paths.js +_bezierToPoints = function _bezierToPoints(x1, y1, x2, y2, x3, y3, x4, y4, threshold, points, index) { + var x12 = (x1 + x2) / 2, + y12 = (y1 + y2) / 2, + x23 = (x2 + x3) / 2, + y23 = (y2 + y3) / 2, + x34 = (x3 + x4) / 2, + y34 = (y3 + y4) / 2, + x123 = (x12 + x23) / 2, + y123 = (y12 + y23) / 2, + x234 = (x23 + x34) / 2, + y234 = (y23 + y34) / 2, + x1234 = (x123 + x234) / 2, + y1234 = (y123 + y234) / 2, + dx = x4 - x1, + dy = y4 - y1, + d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx), + d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx), + length; + + if (!points) { + points = [{ + x: x1, + y: y1 + }, { + x: x4, + y: y4 + }]; + index = 1; + } + + points.splice(index || points.length - 1, 0, { + x: x1234, + y: y1234 + }); + + if ((d2 + d3) * (d2 + d3) > threshold * (dx * dx + dy * dy)) { + length = points.length; + + _bezierToPoints(x1, y1, x12, y12, x123, y123, x1234, y1234, threshold, points, index); + + _bezierToPoints(x1234, y1234, x234, y234, x34, y34, x4, y4, threshold, points, index + 1 + (points.length - length)); + } + + return points; +}; + +export var CustomEase = /*#__PURE__*/function () { + function CustomEase(id, data, config) { + _coreInitted || _initCore(); + this.id = id; + _bonusValidated && this.setData(data, config); + } + + var _proto = CustomEase.prototype; + + _proto.setData = function setData(data, config) { + config = config || {}; + data = data || "0,0,1,1"; + var values = data.match(_numExp), + closest = 1, + points = [], + lookup = [], + precision = config.precision || 1, + fast = precision <= 1, + l, + a1, + a2, + i, + inc, + j, + point, + prevPoint, + p; + this.data = data; + + if (_needsParsingExp.test(data) || ~data.indexOf("M") && data.indexOf("C") < 0) { + values = stringToRawPath(data)[0]; + } + + l = values.length; + + if (l === 4) { + values.unshift(0, 0); + values.push(1, 1); + l = 8; + } else if ((l - 2) % 6) { + throw "Invalid CustomEase"; + } + + if (+values[0] !== 0 || +values[l - 2] !== 1) { + _normalize(values, config.height, config.originY); + } + + this.segment = values; + + for (i = 2; i < l; i += 6) { + a1 = { + x: +values[i - 2], + y: +values[i - 1] + }; + a2 = { + x: +values[i + 4], + y: +values[i + 5] + }; + points.push(a1, a2); + + _bezierToPoints(a1.x, a1.y, +values[i], +values[i + 1], +values[i + 2], +values[i + 3], a2.x, a2.y, 1 / (precision * 200000), points, points.length - 1); + } + + l = points.length; + + for (i = 0; i < l; i++) { + point = points[i]; + prevPoint = points[i - 1] || point; + + if ((point.x > prevPoint.x || prevPoint.y !== point.y && prevPoint.x === point.x || point === prevPoint) && point.x <= 1) { + //if a point goes BACKWARD in time or is a duplicate, just drop it. Also it shouldn't go past 1 on the x axis, as could happen in a string like "M0,0 C0,0 0.12,0.68 0.18,0.788 0.195,0.845 0.308,1 0.32,1 0.403,1.005 0.398,1 0.5,1 0.602,1 0.816,1.005 0.9,1 0.91,1 0.948,0.69 0.962,0.615 1.003,0.376 1,0 1,0". + prevPoint.cx = point.x - prevPoint.x; //change in x between this point and the next point (performance optimization) + + prevPoint.cy = point.y - prevPoint.y; + prevPoint.n = point; + prevPoint.nx = point.x; //next point's x value (performance optimization, making lookups faster in getRatio()). Remember, the lookup will always land on a spot where it's either this point or the very next one (never beyond that) + + if (fast && i > 1 && Math.abs(prevPoint.cy / prevPoint.cx - points[i - 2].cy / points[i - 2].cx) > 2) { + //if there's a sudden change in direction, prioritize accuracy over speed. Like a bounce ease - you don't want to risk the sampling chunks landing on each side of the bounce anchor and having it clipped off. + fast = 0; + } + + if (prevPoint.cx < closest) { + if (!prevPoint.cx) { + prevPoint.cx = 0.001; //avoids math problems in getRatio() (dividing by zero) + + if (i === l - 1) { + //in case the final segment goes vertical RIGHT at the end, make sure we end at the end. + prevPoint.x -= 0.001; + closest = Math.min(closest, 0.001); + fast = 0; + } + } else { + closest = prevPoint.cx; + } + } + } else { + points.splice(i--, 1); + l--; + } + } + + l = 1 / closest + 1 | 0; + inc = 1 / l; + j = 0; + point = points[0]; + + if (fast) { + for (i = 0; i < l; i++) { + //for fastest lookups, we just sample along the path at equal x (time) distance. Uses more memory and is slightly less accurate for anchors that don't land on the sampling points, but for the vast majority of eases it's excellent (and fast). + p = i * inc; + + if (point.nx < p) { + point = points[++j]; + } + + a1 = point.y + (p - point.x) / point.cx * point.cy; + lookup[i] = { + x: p, + cx: inc, + y: a1, + cy: 0, + nx: 9 + }; + + if (i) { + lookup[i - 1].cy = a1 - lookup[i - 1].y; + } + } + + lookup[l - 1].cy = points[points.length - 1].y - a1; + } else { + //this option is more accurate, ensuring that EVERY anchor is hit perfectly. Clipping across a bounce, for example, would never happen. + for (i = 0; i < l; i++) { + //build a lookup table based on the smallest distance so that we can instantly find the appropriate point (well, it'll either be that point or the very next one). We'll look up based on the linear progress. So it's it's 0.5 and the lookup table has 100 elements, it'd be like lookup[Math.floor(0.5 * 100)] + if (point.nx < i * inc) { + point = points[++j]; + } + + lookup[i] = point; + } + + if (j < points.length - 1) { + lookup[i - 1] = points[points.length - 2]; + } + } //this._calcEnd = (points[points.length-1].y !== 1 || points[0].y !== 0); //ensures that we don't run into floating point errors. As long as we're starting at 0 and ending at 1, tell GSAP to skip the final calculation and use 0/1 as the factor. + + + this.ease = function (p) { + var point = lookup[p * l | 0] || lookup[l - 1]; + + if (point.nx < p) { + point = point.n; + } + + return point.y + (p - point.x) / point.cx * point.cy; + }; + + this.ease.custom = this; + this.id && gsap && gsap.registerEase(this.id, this.ease); + return this; + }; + + _proto.getSVGData = function getSVGData(config) { + return CustomEase.getSVGData(this, config); + }; + + CustomEase.create = function create(id, data, config) { + return new CustomEase(id, data, config).ease; + }; + + CustomEase.register = function register(core) { + gsap = core; + + _initCore(); + }; + + CustomEase.get = function get(id) { + return gsap.parseEase(id); + }; + + CustomEase.getSVGData = function getSVGData(ease, config) { + config = config || {}; + var width = config.width || 100, + height = config.height || 100, + x = config.x || 0, + y = (config.y || 0) + height, + e = gsap.utils.toArray(config.path)[0], + a, + slope, + i, + inc, + tx, + ty, + precision, + threshold, + prevX, + prevY; + + if (config.invert) { + height = -height; + y = 0; + } + + if (typeof ease === "string") { + ease = gsap.parseEase(ease); + } + + if (ease.custom) { + ease = ease.custom; + } + + if (ease instanceof CustomEase) { + a = rawPathToString(transformRawPath([ease.segment], width, 0, 0, -height, x, y)); + } else { + a = [x, y]; + precision = Math.max(5, (config.precision || 1) * 200); + inc = 1 / precision; + precision += 2; + threshold = 5 / precision; + prevX = _round(x + inc * width); + prevY = _round(y + ease(inc) * -height); + slope = (prevY - y) / (prevX - x); + + for (i = 2; i < precision; i++) { + tx = _round(x + i * inc * width); + ty = _round(y + ease(i * inc) * -height); + + if (Math.abs((ty - prevY) / (tx - prevX) - slope) > threshold || i === precision - 1) { + //only add points when the slope changes beyond the threshold + a.push(prevX, prevY); + slope = (ty - prevY) / (tx - prevX); + } + + prevX = tx; + prevY = ty; + } + + a = "M" + a.join(","); + } + + e && e.setAttribute("d", a); + return a; + }; + + return CustomEase; +}(); +_getGSAP() && gsap.registerPlugin(CustomEase); +CustomEase.version = "3.11.5"; +export { CustomEase as default }; \ No newline at end of file diff --git a/gsap-public/esm/Draggable.js b/gsap-public/esm/Draggable.js new file mode 100644 index 0000000..954df93 --- /dev/null +++ b/gsap-public/esm/Draggable.js @@ -0,0 +1,2693 @@ +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; } + +/*! + * Draggable 3.11.5 + * https://greensock.com + * + * @license Copyright 2008-2023, 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 { getGlobalMatrix, Matrix2D } from "./utils/matrix.js"; + +var gsap, + _win, + _doc, + _docElement, + _body, + _tempDiv, + _placeholderDiv, + _coreInitted, + _checkPrefix, + _toArray, + _supportsPassive, + _isTouchDevice, + _touchEventLookup, + _isMultiTouching, + _isAndroid, + InertiaPlugin, + _defaultCursor, + _supportsPointer, + _context, + _getStyleSaver, + _dragCount = 0, + _windowExists = function _windowExists() { + return typeof window !== "undefined"; +}, + _getGSAP = function _getGSAP() { + return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap; +}, + _isFunction = function _isFunction(value) { + return typeof value === "function"; +}, + _isObject = function _isObject(value) { + return typeof value === "object"; +}, + _isUndefined = function _isUndefined(value) { + return typeof value === "undefined"; +}, + _emptyFunc = function _emptyFunc() { + return false; +}, + _transformProp = "transform", + _transformOriginProp = "transformOrigin", + _round = function _round(value) { + return Math.round(value * 10000) / 10000; +}, + _isArray = Array.isArray, + _createElement = function _createElement(type, ns) { + var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making "style" inaccessible. + + return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/). +}, + _RAD2DEG = 180 / Math.PI, + _bigNum = 1e20, + _identityMatrix = new Matrix2D(), + _getTime = Date.now || function () { + return new Date().getTime(); +}, + _renderQueue = [], + _lookup = {}, + //when a Draggable is created, the target gets a unique _gsDragID property that allows gets associated with the Draggable instance for quick lookups in Draggable.get(). This avoids circular references that could cause gc problems. +_lookupCount = 0, + _clickableTagExp = /^(?:a|input|textarea|button|select)$/i, + _lastDragTime = 0, + _temp1 = {}, + // a simple object we reuse and populate (usually x/y properties) to conserve memory and improve performance. +_windowProxy = {}, + //memory/performance optimization - we reuse this object during autoScroll to store window-related bounds/offsets. +_copy = function _copy(obj, factor) { + var copy = {}, + p; + + for (p in obj) { + copy[p] = factor ? obj[p] * factor : obj[p]; + } + + return copy; +}, + _extend = function _extend(obj, defaults) { + for (var p in defaults) { + if (!(p in obj)) { + obj[p] = defaults[p]; + } + } + + return obj; +}, + _setTouchActionForAllDescendants = function _setTouchActionForAllDescendants(elements, value) { + var i = elements.length, + children; + + while (i--) { + value ? elements[i].style.touchAction = value : elements[i].style.removeProperty("touch-action"); + children = elements[i].children; + children && children.length && _setTouchActionForAllDescendants(children, value); + } +}, + _renderQueueTick = function _renderQueueTick() { + return _renderQueue.forEach(function (func) { + return func(); + }); +}, + _addToRenderQueue = function _addToRenderQueue(func) { + _renderQueue.push(func); + + if (_renderQueue.length === 1) { + gsap.ticker.add(_renderQueueTick); + } +}, + _renderQueueTimeout = function _renderQueueTimeout() { + return !_renderQueue.length && gsap.ticker.remove(_renderQueueTick); +}, + _removeFromRenderQueue = function _removeFromRenderQueue(func) { + var i = _renderQueue.length; + + while (i--) { + if (_renderQueue[i] === func) { + _renderQueue.splice(i, 1); + } + } + + gsap.to(_renderQueueTimeout, { + overwrite: true, + delay: 15, + duration: 0, + onComplete: _renderQueueTimeout, + data: "_draggable" + }); //remove the "tick" listener only after the render queue is empty for 15 seconds (to improve performance). Adding/removing it constantly for every click/touch wouldn't deliver optimal speed, and we also don't want the ticker to keep calling the render method when things are idle for long periods of time (we want to improve battery life on mobile devices). +}, + _setDefaults = function _setDefaults(obj, defaults) { + for (var p in defaults) { + if (!(p in obj)) { + obj[p] = defaults[p]; + } + } + + return obj; +}, + _addListener = function _addListener(element, type, func, capture) { + if (element.addEventListener) { + var touchType = _touchEventLookup[type]; + capture = capture || (_supportsPassive ? { + passive: false + } : null); + element.addEventListener(touchType || type, func, capture); + touchType && type !== touchType && element.addEventListener(type, func, capture); //some browsers actually support both, so must we. But pointer events cover all. + } +}, + _removeListener = function _removeListener(element, type, func, capture) { + if (element.removeEventListener) { + var touchType = _touchEventLookup[type]; + element.removeEventListener(touchType || type, func, capture); + touchType && type !== touchType && element.removeEventListener(type, func, capture); + } +}, + _preventDefault = function _preventDefault(event) { + event.preventDefault && event.preventDefault(); + event.preventManipulation && event.preventManipulation(); //for some Microsoft browsers +}, + _hasTouchID = function _hasTouchID(list, ID) { + var i = list.length; + + while (i--) { + if (list[i].identifier === ID) { + return true; + } + } +}, + _onMultiTouchDocumentEnd = function _onMultiTouchDocumentEnd(event) { + _isMultiTouching = event.touches && _dragCount < event.touches.length; + + _removeListener(event.target, "touchend", _onMultiTouchDocumentEnd); +}, + _onMultiTouchDocument = function _onMultiTouchDocument(event) { + _isMultiTouching = event.touches && _dragCount < event.touches.length; + + _addListener(event.target, "touchend", _onMultiTouchDocumentEnd); +}, + _getDocScrollTop = function _getDocScrollTop(doc) { + return _win.pageYOffset || doc.scrollTop || doc.documentElement.scrollTop || doc.body.scrollTop || 0; +}, + _getDocScrollLeft = function _getDocScrollLeft(doc) { + return _win.pageXOffset || doc.scrollLeft || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0; +}, + _addScrollListener = function _addScrollListener(e, callback) { + _addListener(e, "scroll", callback); + + if (!_isRoot(e.parentNode)) { + _addScrollListener(e.parentNode, callback); + } +}, + _removeScrollListener = function _removeScrollListener(e, callback) { + _removeListener(e, "scroll", callback); + + if (!_isRoot(e.parentNode)) { + _removeScrollListener(e.parentNode, callback); + } +}, + _isRoot = function _isRoot(e) { + return !!(!e || e === _docElement || e.nodeType === 9 || e === _doc.body || e === _win || !e.nodeType || !e.parentNode); +}, + _getMaxScroll = function _getMaxScroll(element, axis) { + var dim = axis === "x" ? "Width" : "Height", + scroll = "scroll" + dim, + client = "client" + dim; + return Math.max(0, _isRoot(element) ? Math.max(_docElement[scroll], _body[scroll]) - (_win["inner" + dim] || _docElement[client] || _body[client]) : element[scroll] - element[client]); +}, + _recordMaxScrolls = function _recordMaxScrolls(e, skipCurrent) { + //records _gsMaxScrollX and _gsMaxScrollY properties for the element and all ancestors up the chain so that we can cap it, otherwise dragging beyond the edges with autoScroll on can endlessly scroll. + var x = _getMaxScroll(e, "x"), + y = _getMaxScroll(e, "y"); + + if (_isRoot(e)) { + e = _windowProxy; + } else { + _recordMaxScrolls(e.parentNode, skipCurrent); + } + + e._gsMaxScrollX = x; + e._gsMaxScrollY = y; + + if (!skipCurrent) { + e._gsScrollX = e.scrollLeft || 0; + e._gsScrollY = e.scrollTop || 0; + } +}, + _setStyle = function _setStyle(element, property, value) { + var style = element.style; + + if (!style) { + return; + } + + if (_isUndefined(style[property])) { + property = _checkPrefix(property, element) || property; + } + + if (value == null) { + style.removeProperty && style.removeProperty(property.replace(/([A-Z])/g, "-$1").toLowerCase()); + } else { + style[property] = value; + } +}, + _getComputedStyle = function _getComputedStyle(element) { + return _win.getComputedStyle(element instanceof Element ? element : element.host || (element.parentNode || {}).host || element); +}, + //the "host" stuff helps to accommodate ShadowDom objects. +_tempRect = {}, + //reuse to reduce garbage collection tasks +_parseRect = function _parseRect(e) { + //accepts a DOM element, a mouse event, or a rectangle object and returns the corresponding rectangle with left, right, width, height, top, and bottom properties + if (e === _win) { + _tempRect.left = _tempRect.top = 0; + _tempRect.width = _tempRect.right = _docElement.clientWidth || e.innerWidth || _body.clientWidth || 0; + _tempRect.height = _tempRect.bottom = (e.innerHeight || 0) - 20 < _docElement.clientHeight ? _docElement.clientHeight : e.innerHeight || _body.clientHeight || 0; + return _tempRect; + } + + var doc = e.ownerDocument || _doc, + r = !_isUndefined(e.pageX) ? { + left: e.pageX - _getDocScrollLeft(doc), + top: e.pageY - _getDocScrollTop(doc), + right: e.pageX - _getDocScrollLeft(doc) + 1, + bottom: e.pageY - _getDocScrollTop(doc) + 1 + } : !e.nodeType && !_isUndefined(e.left) && !_isUndefined(e.top) ? e : _toArray(e)[0].getBoundingClientRect(); + + if (_isUndefined(r.right) && !_isUndefined(r.width)) { + r.right = r.left + r.width; + r.bottom = r.top + r.height; + } else if (_isUndefined(r.width)) { + //some browsers don't include width and height properties. We can't just set them directly on r because some browsers throw errors, so create a new generic object. + r = { + width: r.right - r.left, + height: r.bottom - r.top, + right: r.right, + left: r.left, + bottom: r.bottom, + top: r.top + }; + } + + return r; +}, + _dispatchEvent = function _dispatchEvent(target, type, callbackName) { + var vars = target.vars, + callback = vars[callbackName], + listeners = target._listeners[type], + result; + + if (_isFunction(callback)) { + result = callback.apply(vars.callbackScope || target, vars[callbackName + "Params"] || [target.pointerEvent]); + } + + if (listeners && target.dispatchEvent(type) === false) { + result = false; + } + + return result; +}, + _getBounds = function _getBounds(target, context) { + //accepts any of the following: a DOM element, jQuery object, selector text, or an object defining bounds as {top, left, width, height} or {minX, maxX, minY, maxY}. Returns an object with left, top, width, and height properties. + var e = _toArray(target)[0], + top, + left, + offset; + + if (!e.nodeType && e !== _win) { + if (!_isUndefined(target.left)) { + offset = { + x: 0, + y: 0 + }; //_getOffsetTransformOrigin(context); //the bounds should be relative to the origin + + return { + left: target.left - offset.x, + top: target.top - offset.y, + width: target.width, + height: target.height + }; + } + + left = target.min || target.minX || target.minRotation || 0; + top = target.min || target.minY || 0; + return { + left: left, + top: top, + width: (target.max || target.maxX || target.maxRotation || 0) - left, + height: (target.max || target.maxY || 0) - top + }; + } + + return _getElementBounds(e, context); +}, + _point1 = {}, + //we reuse to minimize garbage collection tasks. +_getElementBounds = function _getElementBounds(element, context) { + context = _toArray(context)[0]; + var isSVG = element.getBBox && element.ownerSVGElement, + doc = element.ownerDocument || _doc, + left, + right, + top, + bottom, + matrix, + p1, + p2, + p3, + p4, + bbox, + width, + height, + cs; + + if (element === _win) { + top = _getDocScrollTop(doc); + left = _getDocScrollLeft(doc); + right = left + (doc.documentElement.clientWidth || element.innerWidth || doc.body.clientWidth || 0); + bottom = top + ((element.innerHeight || 0) - 20 < doc.documentElement.clientHeight ? doc.documentElement.clientHeight : element.innerHeight || doc.body.clientHeight || 0); //some browsers (like Firefox) ignore absolutely positioned elements, and collapse the height of the documentElement, so it could be 8px, for example, if you have just an absolutely positioned div. In that case, we use the innerHeight to resolve this. + } else if (context === _win || _isUndefined(context)) { + return element.getBoundingClientRect(); + } else { + left = top = 0; + + if (isSVG) { + bbox = element.getBBox(); + width = bbox.width; + height = bbox.height; + } else { + if (element.viewBox && (bbox = element.viewBox.baseVal)) { + left = bbox.x || 0; + top = bbox.y || 0; + width = bbox.width; + height = bbox.height; + } + + if (!width) { + cs = _getComputedStyle(element); + bbox = cs.boxSizing === "border-box"; + width = (parseFloat(cs.width) || element.clientWidth || 0) + (bbox ? 0 : parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth)); + height = (parseFloat(cs.height) || element.clientHeight || 0) + (bbox ? 0 : parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth)); + } + } + + right = width; + bottom = height; + } + + if (element === context) { + return { + left: left, + top: top, + width: right - left, + height: bottom - top + }; + } + + matrix = getGlobalMatrix(context, true).multiply(getGlobalMatrix(element)); + p1 = matrix.apply({ + x: left, + y: top + }); + p2 = matrix.apply({ + x: right, + y: top + }); + p3 = matrix.apply({ + x: right, + y: bottom + }); + p4 = matrix.apply({ + x: left, + y: bottom + }); + left = Math.min(p1.x, p2.x, p3.x, p4.x); + top = Math.min(p1.y, p2.y, p3.y, p4.y); + return { + left: left, + top: top, + width: Math.max(p1.x, p2.x, p3.x, p4.x) - left, + height: Math.max(p1.y, p2.y, p3.y, p4.y) - top + }; +}, + _parseInertia = function _parseInertia(draggable, snap, max, min, factor, forceZeroVelocity) { + var vars = {}, + a, + i, + l; + + if (snap) { + if (factor !== 1 && snap instanceof Array) { + //some data must be altered to make sense, like if the user passes in an array of rotational values in degrees, we must convert it to radians. Or for scrollLeft and scrollTop, we invert the values. + vars.end = a = []; + l = snap.length; + + if (_isObject(snap[0])) { + //if the array is populated with objects, like points ({x:100, y:200}), make copies before multiplying by the factor, otherwise we'll mess up the originals and the user may reuse it elsewhere. + for (i = 0; i < l; i++) { + a[i] = _copy(snap[i], factor); + } + } else { + for (i = 0; i < l; i++) { + a[i] = snap[i] * factor; + } + } + + max += 1.1; //allow 1.1 pixels of wiggle room when snapping in order to work around some browser inconsistencies in the way bounds are reported which can make them roughly a pixel off. For example, if "snap:[-$('#menu').width(), 0]" was defined and #menu had a wrapper that was used as the bounds, some browsers would be one pixel off, making the minimum -752 for example when snap was [-753,0], thus instead of snapping to -753, it would snap to 0 since -753 was below the minimum. + + min -= 1.1; + } else if (_isFunction(snap)) { + vars.end = function (value) { + var result = snap.call(draggable, value), + copy, + p; + + if (factor !== 1) { + if (_isObject(result)) { + copy = {}; + + for (p in result) { + copy[p] = result[p] * factor; + } + + result = copy; + } else { + result *= factor; + } + } + + return result; //we need to ensure that we can scope the function call to the Draggable instance itself so that users can access important values like maxX, minX, maxY, minY, x, and y from within that function. + }; + } else { + vars.end = snap; + } + } + + if (max || max === 0) { + vars.max = max; + } + + if (min || min === 0) { + vars.min = min; + } + + if (forceZeroVelocity) { + vars.velocity = 0; + } + + return vars; +}, + _isClickable = function _isClickable(element) { + //sometimes it's convenient to mark an element as clickable by adding a data-clickable="true" attribute (in which case we won't preventDefault() the mouse/touch event). This method checks if the element is an , , or