1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import { gsap, _getProperty, _numExp, _numWithUnitExp, getUnit, _isString, _isUndefined, _renderComplexString, _relExp, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _checkPlugin, _replaceRandom, _plugins, GSCache, PropTween, _config, _ticker, _round, _missingPlugin, _getSetter, _getCache, _setDefaults, _removeLinkedListItem
|
13 | } from "./gsap-core.js";
|
14 |
|
15 | var _win,
|
16 | _doc,
|
17 | _docElement,
|
18 | _pluginInitted,
|
19 | _tempDiv,
|
20 | _tempDivStyler,
|
21 | _recentSetterPlugin,
|
22 | _windowExists = function _windowExists() {
|
23 | return typeof window !== "undefined";
|
24 | },
|
25 | _transformProps = {},
|
26 | _RAD2DEG = 180 / Math.PI,
|
27 | _DEG2RAD = Math.PI / 180,
|
28 | _atan2 = Math.atan2,
|
29 | _bigNum = 1e8,
|
30 | _capsExp = /([A-Z])/g,
|
31 | _horizontalExp = /(?:left|right|width|margin|padding|x)/i,
|
32 | _complexExp = /[\s,\(]\S/,
|
33 | _propertyAliases = {
|
34 | autoAlpha: "opacity,visibility",
|
35 | scale: "scaleX,scaleY",
|
36 | alpha: "opacity"
|
37 | },
|
38 | _renderCSSProp = function _renderCSSProp(ratio, data) {
|
39 | return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
|
40 | },
|
41 | _renderPropWithEnd = function _renderPropWithEnd(ratio, data) {
|
42 | return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
|
43 | },
|
44 | _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) {
|
45 | return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);
|
46 | },
|
47 |
|
48 | _renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) {
|
49 | var value = data.s + data.c * ratio;
|
50 | data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data);
|
51 | },
|
52 | _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) {
|
53 | return data.set(data.t, data.p, ratio ? data.e : data.b, data);
|
54 | },
|
55 | _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) {
|
56 | return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data);
|
57 | },
|
58 | _setterCSSStyle = function _setterCSSStyle(target, property, value) {
|
59 | return target.style[property] = value;
|
60 | },
|
61 | _setterCSSProp = function _setterCSSProp(target, property, value) {
|
62 | return target.style.setProperty(property, value);
|
63 | },
|
64 | _setterTransform = function _setterTransform(target, property, value) {
|
65 | return target._gsap[property] = value;
|
66 | },
|
67 | _setterScale = function _setterScale(target, property, value) {
|
68 | return target._gsap.scaleX = target._gsap.scaleY = value;
|
69 | },
|
70 | _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) {
|
71 | var cache = target._gsap;
|
72 | cache.scaleX = cache.scaleY = value;
|
73 | cache.renderTransform(ratio, cache);
|
74 | },
|
75 | _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) {
|
76 | var cache = target._gsap;
|
77 | cache[property] = value;
|
78 | cache.renderTransform(ratio, cache);
|
79 | },
|
80 | _transformProp = "transform",
|
81 | _transformOriginProp = _transformProp + "Origin",
|
82 | _supports3D,
|
83 | _createElement = function _createElement(type, ns) {
|
84 | var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type);
|
85 |
|
86 | return e.style ? e : _doc.createElement(type);
|
87 | },
|
88 | _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) {
|
89 | var cs = getComputedStyle(target);
|
90 | return cs[property] || cs.getPropertyValue(property.replace(_capsExp, "-$1").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || "";
|
91 | },
|
92 | _prefixes = "O,Moz,ms,Ms,Webkit".split(","),
|
93 | _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) {
|
94 | var e = element || _tempDiv,
|
95 | s = e.style,
|
96 | i = 5;
|
97 |
|
98 | if (property in s && !preferPrefix) {
|
99 | return property;
|
100 | }
|
101 |
|
102 | property = property.charAt(0).toUpperCase() + property.substr(1);
|
103 |
|
104 | while (i-- && !(_prefixes[i] + property in s)) {}
|
105 |
|
106 | return i < 0 ? null : (i === 3 ? "ms" : i >= 0 ? _prefixes[i] : "") + property;
|
107 | },
|
108 | _initCore = function _initCore() {
|
109 | if (_windowExists() && window.document) {
|
110 | _win = window;
|
111 | _doc = _win.document;
|
112 | _docElement = _doc.documentElement;
|
113 | _tempDiv = _createElement("div") || {
|
114 | style: {}
|
115 | };
|
116 | _tempDivStyler = _createElement("div");
|
117 | _transformProp = _checkPropPrefix(_transformProp);
|
118 | _transformOriginProp = _transformProp + "Origin";
|
119 | _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0";
|
120 |
|
121 | _supports3D = !!_checkPropPrefix("perspective");
|
122 | _pluginInitted = 1;
|
123 | }
|
124 | },
|
125 | _getBBoxHack = function _getBBoxHack(swapIfPossible) {
|
126 |
|
127 | var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"),
|
128 | oldParent = this.parentNode,
|
129 | oldSibling = this.nextSibling,
|
130 | oldCSS = this.style.cssText,
|
131 | bbox;
|
132 |
|
133 | _docElement.appendChild(svg);
|
134 |
|
135 | svg.appendChild(this);
|
136 | this.style.display = "block";
|
137 |
|
138 | if (swapIfPossible) {
|
139 | try {
|
140 | bbox = this.getBBox();
|
141 | this._gsapBBox = this.getBBox;
|
142 |
|
143 | this.getBBox = _getBBoxHack;
|
144 | } catch (e) {}
|
145 | } else if (this._gsapBBox) {
|
146 | bbox = this._gsapBBox();
|
147 | }
|
148 |
|
149 | if (oldParent) {
|
150 | if (oldSibling) {
|
151 | oldParent.insertBefore(this, oldSibling);
|
152 | } else {
|
153 | oldParent.appendChild(this);
|
154 | }
|
155 | }
|
156 |
|
157 | _docElement.removeChild(svg);
|
158 |
|
159 | this.style.cssText = oldCSS;
|
160 | return bbox;
|
161 | },
|
162 | _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) {
|
163 | var i = attributesArray.length;
|
164 |
|
165 | while (i--) {
|
166 | if (target.hasAttribute(attributesArray[i])) {
|
167 | return target.getAttribute(attributesArray[i]);
|
168 | }
|
169 | }
|
170 | },
|
171 | _getBBox = function _getBBox(target) {
|
172 | var bounds;
|
173 |
|
174 | try {
|
175 | bounds = target.getBBox();
|
176 | } catch (error) {
|
177 | bounds = _getBBoxHack.call(target, true);
|
178 | }
|
179 |
|
180 | bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true));
|
181 |
|
182 | return bounds && !bounds.width && !bounds.x && !bounds.y ? {
|
183 | x: +_getAttributeFallbacks(target, ["x", "cx", "x1"]) || 0,
|
184 | y: +_getAttributeFallbacks(target, ["y", "cy", "y1"]) || 0,
|
185 | width: 0,
|
186 | height: 0
|
187 | } : bounds;
|
188 | },
|
189 | _isSVG = function _isSVG(e) {
|
190 | return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e));
|
191 | },
|
192 |
|
193 | _removeProperty = function _removeProperty(target, property) {
|
194 | if (property) {
|
195 | var style = target.style;
|
196 |
|
197 | if (property in _transformProps && property !== _transformOriginProp) {
|
198 | property = _transformProp;
|
199 | }
|
200 |
|
201 | if (style.removeProperty) {
|
202 | if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") {
|
203 |
|
204 | property = "-" + property;
|
205 | }
|
206 |
|
207 | style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase());
|
208 | } else {
|
209 |
|
210 | style.removeAttribute(property);
|
211 | }
|
212 | }
|
213 | },
|
214 | _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) {
|
215 | var pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);
|
216 | plugin._pt = pt;
|
217 | pt.b = beginning;
|
218 | pt.e = end;
|
219 |
|
220 | plugin._props.push(property);
|
221 |
|
222 | return pt;
|
223 | },
|
224 | _nonConvertibleUnits = {
|
225 | deg: 1,
|
226 | rad: 1,
|
227 | turn: 1
|
228 | },
|
229 |
|
230 | _convertToUnit = function _convertToUnit(target, property, value, unit) {
|
231 | var curValue = parseFloat(value) || 0,
|
232 | curUnit = (value + "").trim().substr((curValue + "").length) || "px",
|
233 |
|
234 | style = _tempDiv.style,
|
235 | horizontal = _horizontalExp.test(property),
|
236 | isRootSVG = target.tagName.toLowerCase() === "svg",
|
237 | measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"),
|
238 | amount = 100,
|
239 | toPixels = unit === "px",
|
240 | toPercent = unit === "%",
|
241 | px,
|
242 | parent,
|
243 | cache,
|
244 | isSVG;
|
245 |
|
246 | if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {
|
247 | return curValue;
|
248 | }
|
249 |
|
250 | curUnit !== "px" && !toPixels && (curValue = _convertToUnit(target, property, value, "px"));
|
251 | isSVG = target.getCTM && _isSVG(target);
|
252 |
|
253 | if (toPercent && (_transformProps[property] || ~property.indexOf("adius"))) {
|
254 |
|
255 | return _round(curValue / (isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty]) * amount);
|
256 | }
|
257 |
|
258 | style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit);
|
259 | parent = ~property.indexOf("adius") || unit === "em" && target.appendChild && !isRootSVG ? target : target.parentNode;
|
260 |
|
261 | if (isSVG) {
|
262 | parent = (target.ownerSVGElement || {}).parentNode;
|
263 | }
|
264 |
|
265 | if (!parent || parent === _doc || !parent.appendChild) {
|
266 | parent = _doc.body;
|
267 | }
|
268 |
|
269 | cache = parent._gsap;
|
270 |
|
271 | if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time) {
|
272 | return _round(curValue / cache.width * amount);
|
273 | } else {
|
274 | (toPercent || curUnit === "%") && (style.position = _getComputedProperty(target, "position"));
|
275 | parent === target && (style.position = "static");
|
276 |
|
277 | parent.appendChild(_tempDiv);
|
278 | px = _tempDiv[measureProperty];
|
279 | parent.removeChild(_tempDiv);
|
280 | style.position = "absolute";
|
281 |
|
282 | if (horizontal && toPercent) {
|
283 | cache = _getCache(parent);
|
284 | cache.time = _ticker.time;
|
285 | cache.width = parent[measureProperty];
|
286 | }
|
287 | }
|
288 |
|
289 | return _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);
|
290 | },
|
291 | _get = function _get(target, property, unit, uncache) {
|
292 | var value;
|
293 | _pluginInitted || _initCore();
|
294 |
|
295 | if (property in _propertyAliases && property !== "transform") {
|
296 | property = _propertyAliases[property];
|
297 |
|
298 | if (~property.indexOf(",")) {
|
299 | property = property.split(",")[0];
|
300 | }
|
301 | }
|
302 |
|
303 | if (_transformProps[property] && property !== "transform") {
|
304 | value = _parseTransform(target, uncache);
|
305 | value = property !== "transformOrigin" ? value[property] : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px";
|
306 | } else {
|
307 | value = target.style[property];
|
308 |
|
309 | if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) {
|
310 | value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || _getProperty(target, property) || (property === "opacity" ? 1 : 0);
|
311 | }
|
312 | }
|
313 |
|
314 | return unit && !~(value + "").indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value;
|
315 | },
|
316 | _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) {
|
317 |
|
318 | if (!start || start === "none") {
|
319 |
|
320 | var p = _checkPropPrefix(prop, target, 1),
|
321 | s = p && _getComputedProperty(target, p, 1);
|
322 |
|
323 | if (s && s !== start) {
|
324 | prop = p;
|
325 | start = s;
|
326 | } else if (prop === "borderColor") {
|
327 | start = _getComputedProperty(target, "borderTopColor");
|
328 | }
|
329 | }
|
330 |
|
331 | var pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString),
|
332 | index = 0,
|
333 | matchIndex = 0,
|
334 | a,
|
335 | result,
|
336 | startValues,
|
337 | startNum,
|
338 | color,
|
339 | startValue,
|
340 | endValue,
|
341 | endNum,
|
342 | chunk,
|
343 | endUnit,
|
344 | startUnit,
|
345 | relative,
|
346 | endValues;
|
347 | pt.b = start;
|
348 | pt.e = end;
|
349 | start += "";
|
350 |
|
351 | end += "";
|
352 |
|
353 | if (end === "auto") {
|
354 | target.style[prop] = end;
|
355 | end = _getComputedProperty(target, prop) || end;
|
356 | target.style[prop] = start;
|
357 | }
|
358 |
|
359 | a = [start, end];
|
360 |
|
361 | _colorStringFilter(a);
|
362 |
|
363 |
|
364 | start = a[0];
|
365 | end = a[1];
|
366 | startValues = start.match(_numWithUnitExp) || [];
|
367 | endValues = end.match(_numWithUnitExp) || [];
|
368 |
|
369 | if (endValues.length) {
|
370 | while (result = _numWithUnitExp.exec(end)) {
|
371 | endValue = result[0];
|
372 | chunk = end.substring(index, result.index);
|
373 |
|
374 | if (color) {
|
375 | color = (color + 1) % 5;
|
376 | } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") {
|
377 | color = 1;
|
378 | }
|
379 |
|
380 | if (endValue !== (startValue = startValues[matchIndex++] || "")) {
|
381 | startNum = parseFloat(startValue) || 0;
|
382 | startUnit = startValue.substr((startNum + "").length);
|
383 | relative = endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
|
384 |
|
385 | if (relative) {
|
386 | endValue = endValue.substr(2);
|
387 | }
|
388 |
|
389 | endNum = parseFloat(endValue);
|
390 | endUnit = endValue.substr((endNum + "").length);
|
391 | index = _numWithUnitExp.lastIndex - endUnit.length;
|
392 |
|
393 | if (!endUnit) {
|
394 |
|
395 | endUnit = endUnit || _config.units[prop] || startUnit;
|
396 |
|
397 | if (index === end.length) {
|
398 | end += endUnit;
|
399 | pt.e += endUnit;
|
400 | }
|
401 | }
|
402 |
|
403 | if (startUnit !== endUnit) {
|
404 | startNum = _convertToUnit(target, prop, startValue, endUnit) || 0;
|
405 | }
|
406 |
|
407 |
|
408 | pt._pt = {
|
409 | _next: pt._pt,
|
410 | p: chunk || matchIndex === 1 ? chunk : ",",
|
411 |
|
412 | s: startNum,
|
413 | c: relative ? relative * endNum : endNum - startNum,
|
414 | m: color && color < 4 ? Math.round : 0
|
415 | };
|
416 | }
|
417 | }
|
418 |
|
419 | pt.c = index < end.length ? end.substring(index, end.length) : "";
|
420 | } else {
|
421 | pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;
|
422 | }
|
423 |
|
424 | if (_relExp.test(end)) {
|
425 | pt.e = 0;
|
426 | }
|
427 |
|
428 | this._pt = pt;
|
429 |
|
430 | return pt;
|
431 | },
|
432 | _keywordToPercent = {
|
433 | top: "0%",
|
434 | bottom: "100%",
|
435 | left: "0%",
|
436 | right: "100%",
|
437 | center: "50%"
|
438 | },
|
439 | _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) {
|
440 | var split = value.split(" "),
|
441 | x = split[0],
|
442 | y = split[1] || "50%";
|
443 |
|
444 | if (x === "top" || x === "bottom" || y === "left" || y === "right") {
|
445 |
|
446 | value = x;
|
447 | x = y;
|
448 | y = value;
|
449 | }
|
450 |
|
451 | split[0] = _keywordToPercent[x] || x;
|
452 | split[1] = _keywordToPercent[y] || y;
|
453 | return split.join(" ");
|
454 | },
|
455 | _renderClearProps = function _renderClearProps(ratio, data) {
|
456 | if (data.tween && data.tween._time === data.tween._dur) {
|
457 | var target = data.t,
|
458 | style = target.style,
|
459 | props = data.u,
|
460 | cache = target._gsap,
|
461 | prop,
|
462 | clearTransforms,
|
463 | i;
|
464 |
|
465 | if (props === "all" || props === true) {
|
466 | style.cssText = "";
|
467 | clearTransforms = 1;
|
468 | } else {
|
469 | props = props.split(",");
|
470 | i = props.length;
|
471 |
|
472 | while (--i > -1) {
|
473 | prop = props[i];
|
474 |
|
475 | if (_transformProps[prop]) {
|
476 | clearTransforms = 1;
|
477 | prop = prop === "transformOrigin" ? _transformOriginProp : _transformProp;
|
478 | }
|
479 |
|
480 | _removeProperty(target, prop);
|
481 | }
|
482 | }
|
483 |
|
484 | if (clearTransforms) {
|
485 | _removeProperty(target, _transformProp);
|
486 |
|
487 | if (cache) {
|
488 | cache.svg && target.removeAttribute("transform");
|
489 |
|
490 | _parseTransform(target, 1);
|
491 |
|
492 |
|
493 | cache.uncache = 1;
|
494 | }
|
495 | }
|
496 | }
|
497 | },
|
498 |
|
499 | _specialProps = {
|
500 | clearProps: function clearProps(plugin, target, property, endValue, tween) {
|
501 | if (tween.data !== "isFromStart") {
|
502 | var pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);
|
503 | pt.u = endValue;
|
504 | pt.pr = -10;
|
505 | pt.tween = tween;
|
506 |
|
507 | plugin._props.push(property);
|
508 |
|
509 | return 1;
|
510 | }
|
511 | }
|
512 | |
513 |
|
514 |
|
515 |
|
516 |
|
517 |
|
518 |
|
519 |
|
520 |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 |
|
527 |
|
528 |
|
529 |
|
530 |
|
531 |
|
532 |
|
533 |
|
534 |
|
535 |
|
536 |
|
537 |
|
538 |
|
539 |
|
540 |
|
541 |
|
542 |
|
543 |
|
544 |
|
545 |
|
546 |
|
547 |
|
548 |
|
549 |
|
550 |
|
551 |
|
552 |
|
553 |
|
554 |
|
555 |
|
556 |
|
557 |
|
558 |
|
559 |
|
560 |
|
561 |
|
562 |
|
563 |
|
564 |
|
565 |
|
566 |
|
567 |
|
568 |
|
569 |
|
570 |
|
571 |
|
572 |
|
573 |
|
574 |
|
575 |
|
576 | },
|
577 |
|
578 |
|
579 |
|
580 |
|
581 |
|
582 |
|
583 | _identity2DMatrix = [1, 0, 0, 1, 0, 0],
|
584 | _rotationalProperties = {},
|
585 | _isNullTransform = function _isNullTransform(value) {
|
586 | return value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value;
|
587 | },
|
588 | _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) {
|
589 | var matrixString = _getComputedProperty(target, _transformProp);
|
590 |
|
591 | return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round);
|
592 | },
|
593 | _getMatrix = function _getMatrix(target, force2D) {
|
594 | var cache = target._gsap || _getCache(target),
|
595 | style = target.style,
|
596 | matrix = _getComputedTransformMatrixAsArray(target),
|
597 | parent,
|
598 | nextSibling,
|
599 | temp,
|
600 | addedToDOM;
|
601 |
|
602 | if (cache.svg && target.getAttribute("transform")) {
|
603 | temp = target.transform.baseVal.consolidate().matrix;
|
604 |
|
605 | matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];
|
606 | return matrix.join(",") === "1,0,0,1,0,0" ? _identity2DMatrix : matrix;
|
607 | } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) {
|
608 |
|
609 |
|
610 | temp = style.display;
|
611 | style.display = "block";
|
612 | parent = target.parentNode;
|
613 |
|
614 | if (!parent || !target.offsetParent) {
|
615 |
|
616 | addedToDOM = 1;
|
617 |
|
618 | nextSibling = target.nextSibling;
|
619 |
|
620 | _docElement.appendChild(target);
|
621 |
|
622 | }
|
623 |
|
624 | matrix = _getComputedTransformMatrixAsArray(target);
|
625 | temp ? style.display = temp : _removeProperty(target, "display");
|
626 |
|
627 | if (addedToDOM) {
|
628 | nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target);
|
629 | }
|
630 | }
|
631 |
|
632 | return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;
|
633 | },
|
634 | _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) {
|
635 | var cache = target._gsap,
|
636 | matrix = matrixArray || _getMatrix(target, true),
|
637 | xOriginOld = cache.xOrigin || 0,
|
638 | yOriginOld = cache.yOrigin || 0,
|
639 | xOffsetOld = cache.xOffset || 0,
|
640 | yOffsetOld = cache.yOffset || 0,
|
641 | a = matrix[0],
|
642 | b = matrix[1],
|
643 | c = matrix[2],
|
644 | d = matrix[3],
|
645 | tx = matrix[4],
|
646 | ty = matrix[5],
|
647 | originSplit = origin.split(" "),
|
648 | xOrigin = parseFloat(originSplit[0]) || 0,
|
649 | yOrigin = parseFloat(originSplit[1]) || 0,
|
650 | bounds,
|
651 | determinant,
|
652 | x,
|
653 | y;
|
654 |
|
655 | if (!originIsAbsolute) {
|
656 | bounds = _getBBox(target);
|
657 | xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin);
|
658 | yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf("%") ? yOrigin / 100 * bounds.height : yOrigin);
|
659 | } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) {
|
660 |
|
661 | x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant;
|
662 | y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant;
|
663 | xOrigin = x;
|
664 | yOrigin = y;
|
665 | }
|
666 |
|
667 | if (smooth || smooth !== false && cache.smooth) {
|
668 | tx = xOrigin - xOriginOld;
|
669 | ty = yOrigin - yOriginOld;
|
670 | cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;
|
671 | cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;
|
672 | } else {
|
673 | cache.xOffset = cache.yOffset = 0;
|
674 | }
|
675 |
|
676 | cache.xOrigin = xOrigin;
|
677 | cache.yOrigin = yOrigin;
|
678 | cache.smooth = !!smooth;
|
679 | cache.origin = origin;
|
680 | cache.originIsAbsolute = !!originIsAbsolute;
|
681 | target.style[_transformOriginProp] = "0px 0px";
|
682 |
|
683 | if (pluginToAddPropTweensTo) {
|
684 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin);
|
685 |
|
686 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin);
|
687 |
|
688 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset);
|
689 |
|
690 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset);
|
691 | }
|
692 |
|
693 | target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin);
|
694 | },
|
695 | _parseTransform = function _parseTransform(target, uncache) {
|
696 | var cache = target._gsap || new GSCache(target);
|
697 |
|
698 | if ("x" in cache && !uncache && !cache.uncache) {
|
699 | return cache;
|
700 | }
|
701 |
|
702 | var style = target.style,
|
703 | invertedScaleX = cache.scaleX < 0,
|
704 | px = "px",
|
705 | deg = "deg",
|
706 | origin = _getComputedProperty(target, _transformOriginProp) || "0",
|
707 | x,
|
708 | y,
|
709 | z,
|
710 | scaleX,
|
711 | scaleY,
|
712 | rotation,
|
713 | rotationX,
|
714 | rotationY,
|
715 | skewX,
|
716 | skewY,
|
717 | perspective,
|
718 | xOrigin,
|
719 | yOrigin,
|
720 | matrix,
|
721 | angle,
|
722 | cos,
|
723 | sin,
|
724 | a,
|
725 | b,
|
726 | c,
|
727 | d,
|
728 | a12,
|
729 | a22,
|
730 | t1,
|
731 | t2,
|
732 | t3,
|
733 | a13,
|
734 | a23,
|
735 | a33,
|
736 | a42,
|
737 | a43,
|
738 | a32;
|
739 | x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;
|
740 | scaleX = scaleY = 1;
|
741 | cache.svg = !!(target.getCTM && _isSVG(target));
|
742 | matrix = _getMatrix(target, cache.svg);
|
743 |
|
744 | if (cache.svg) {
|
745 | t1 = !cache.uncache && target.getAttribute("data-svg-origin");
|
746 |
|
747 | _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);
|
748 | }
|
749 |
|
750 | xOrigin = cache.xOrigin || 0;
|
751 | yOrigin = cache.yOrigin || 0;
|
752 |
|
753 | if (matrix !== _identity2DMatrix) {
|
754 | a = matrix[0];
|
755 |
|
756 | b = matrix[1];
|
757 |
|
758 | c = matrix[2];
|
759 |
|
760 | d = matrix[3];
|
761 |
|
762 | x = a12 = matrix[4];
|
763 | y = a22 = matrix[5];
|
764 |
|
765 | if (matrix.length === 6) {
|
766 | scaleX = Math.sqrt(a * a + b * b);
|
767 | scaleY = Math.sqrt(d * d + c * c);
|
768 | rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0;
|
769 |
|
770 | skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0;
|
771 | skewX && (scaleY *= Math.cos(skewX * _DEG2RAD));
|
772 |
|
773 | if (cache.svg) {
|
774 | x -= xOrigin - (xOrigin * a + yOrigin * c);
|
775 | y -= yOrigin - (xOrigin * b + yOrigin * d);
|
776 | }
|
777 |
|
778 | } else {
|
779 | a32 = matrix[6];
|
780 | a42 = matrix[7];
|
781 | a13 = matrix[8];
|
782 | a23 = matrix[9];
|
783 | a33 = matrix[10];
|
784 | a43 = matrix[11];
|
785 | x = matrix[12];
|
786 | y = matrix[13];
|
787 | z = matrix[14];
|
788 | angle = _atan2(a32, a33);
|
789 | rotationX = angle * _RAD2DEG;
|
790 |
|
791 | if (angle) {
|
792 | cos = Math.cos(-angle);
|
793 | sin = Math.sin(-angle);
|
794 | t1 = a12 * cos + a13 * sin;
|
795 | t2 = a22 * cos + a23 * sin;
|
796 | t3 = a32 * cos + a33 * sin;
|
797 | a13 = a12 * -sin + a13 * cos;
|
798 | a23 = a22 * -sin + a23 * cos;
|
799 | a33 = a32 * -sin + a33 * cos;
|
800 | a43 = a42 * -sin + a43 * cos;
|
801 | a12 = t1;
|
802 | a22 = t2;
|
803 | a32 = t3;
|
804 | }
|
805 |
|
806 |
|
807 | angle = _atan2(-c, a33);
|
808 | rotationY = angle * _RAD2DEG;
|
809 |
|
810 | if (angle) {
|
811 | cos = Math.cos(-angle);
|
812 | sin = Math.sin(-angle);
|
813 | t1 = a * cos - a13 * sin;
|
814 | t2 = b * cos - a23 * sin;
|
815 | t3 = c * cos - a33 * sin;
|
816 | a43 = d * sin + a43 * cos;
|
817 | a = t1;
|
818 | b = t2;
|
819 | c = t3;
|
820 | }
|
821 |
|
822 |
|
823 | angle = _atan2(b, a);
|
824 | rotation = angle * _RAD2DEG;
|
825 |
|
826 | if (angle) {
|
827 | cos = Math.cos(angle);
|
828 | sin = Math.sin(angle);
|
829 | t1 = a * cos + b * sin;
|
830 | t2 = a12 * cos + a22 * sin;
|
831 | b = b * cos - a * sin;
|
832 | a22 = a22 * cos - a12 * sin;
|
833 | a = t1;
|
834 | a12 = t2;
|
835 | }
|
836 |
|
837 | if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) {
|
838 |
|
839 | rotationX = rotation = 0;
|
840 | rotationY = 180 - rotationY;
|
841 | }
|
842 |
|
843 | scaleX = _round(Math.sqrt(a * a + b * b + c * c));
|
844 | scaleY = _round(Math.sqrt(a22 * a22 + a32 * a32));
|
845 | angle = _atan2(a12, a22);
|
846 | skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0;
|
847 | perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0;
|
848 | }
|
849 |
|
850 | if (cache.svg) {
|
851 |
|
852 | t1 = target.getAttribute("transform");
|
853 | cache.forceCSS = target.setAttribute("transform", "") || !_isNullTransform(_getComputedProperty(target, _transformProp));
|
854 | t1 && target.setAttribute("transform", t1);
|
855 | }
|
856 | }
|
857 |
|
858 | if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {
|
859 | if (invertedScaleX) {
|
860 | scaleX *= -1;
|
861 | skewX += rotation <= 0 ? 180 : -180;
|
862 | rotation += rotation <= 0 ? 180 : -180;
|
863 | } else {
|
864 | scaleY *= -1;
|
865 | skewX += skewX <= 0 ? 180 : -180;
|
866 | }
|
867 | }
|
868 |
|
869 | cache.x = ((cache.xPercent = x && Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0) ? 0 : x) + px;
|
870 | cache.y = ((cache.yPercent = y && Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0) ? 0 : y) + px;
|
871 | cache.z = z + px;
|
872 | cache.scaleX = _round(scaleX);
|
873 | cache.scaleY = _round(scaleY);
|
874 | cache.rotation = _round(rotation) + deg;
|
875 | cache.rotationX = _round(rotationX) + deg;
|
876 | cache.rotationY = _round(rotationY) + deg;
|
877 | cache.skewX = skewX + deg;
|
878 | cache.skewY = skewY + deg;
|
879 | cache.transformPerspective = perspective + px;
|
880 |
|
881 | if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) {
|
882 | style[_transformOriginProp] = _firstTwoOnly(origin);
|
883 | }
|
884 |
|
885 | cache.xOffset = cache.yOffset = 0;
|
886 | cache.force3D = _config.force3D;
|
887 | cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;
|
888 | cache.uncache = 0;
|
889 | return cache;
|
890 | },
|
891 | _firstTwoOnly = function _firstTwoOnly(value) {
|
892 | return (value = value.split(" "))[0] + " " + value[1];
|
893 | },
|
894 |
|
895 | _addPxTranslate = function _addPxTranslate(target, start, value) {
|
896 | var unit = getUnit(start);
|
897 | return _round(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit;
|
898 | },
|
899 | _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) {
|
900 | cache.z = "0px";
|
901 | cache.rotationY = cache.rotationX = "0deg";
|
902 | cache.force3D = 0;
|
903 |
|
904 | _renderCSSTransforms(ratio, cache);
|
905 | },
|
906 | _zeroDeg = "0deg",
|
907 | _zeroPx = "0px",
|
908 | _endParenthesis = ") ",
|
909 | _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) {
|
910 | var _ref = cache || this,
|
911 | xPercent = _ref.xPercent,
|
912 | yPercent = _ref.yPercent,
|
913 | x = _ref.x,
|
914 | y = _ref.y,
|
915 | z = _ref.z,
|
916 | rotation = _ref.rotation,
|
917 | rotationY = _ref.rotationY,
|
918 | rotationX = _ref.rotationX,
|
919 | skewX = _ref.skewX,
|
920 | skewY = _ref.skewY,
|
921 | scaleX = _ref.scaleX,
|
922 | scaleY = _ref.scaleY,
|
923 | transformPerspective = _ref.transformPerspective,
|
924 | force3D = _ref.force3D,
|
925 | target = _ref.target,
|
926 | zOrigin = _ref.zOrigin,
|
927 | transforms = "",
|
928 | use3D = force3D === "auto" && ratio && ratio !== 1 || force3D === true;
|
929 |
|
930 |
|
931 | if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {
|
932 | var angle = parseFloat(rotationY) * _DEG2RAD,
|
933 | a13 = Math.sin(angle),
|
934 | a33 = Math.cos(angle),
|
935 | cos;
|
936 |
|
937 | angle = parseFloat(rotationX) * _DEG2RAD;
|
938 | cos = Math.cos(angle);
|
939 | x = _addPxTranslate(target, x, a13 * cos * -zOrigin);
|
940 | y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);
|
941 | z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);
|
942 | }
|
943 |
|
944 | if (transformPerspective !== _zeroPx) {
|
945 | transforms += "perspective(" + transformPerspective + _endParenthesis;
|
946 | }
|
947 |
|
948 | if (xPercent || yPercent) {
|
949 | transforms += "translate(" + xPercent + "%, " + yPercent + "%) ";
|
950 | }
|
951 |
|
952 | if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {
|
953 | transforms += z !== _zeroPx || use3D ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis;
|
954 | }
|
955 |
|
956 | if (rotation !== _zeroDeg) {
|
957 | transforms += "rotate(" + rotation + _endParenthesis;
|
958 | }
|
959 |
|
960 | if (rotationY !== _zeroDeg) {
|
961 | transforms += "rotateY(" + rotationY + _endParenthesis;
|
962 | }
|
963 |
|
964 | if (rotationX !== _zeroDeg) {
|
965 | transforms += "rotateX(" + rotationX + _endParenthesis;
|
966 | }
|
967 |
|
968 | if (skewX !== _zeroDeg || skewY !== _zeroDeg) {
|
969 | transforms += "skew(" + skewX + ", " + skewY + _endParenthesis;
|
970 | }
|
971 |
|
972 | if (scaleX !== 1 || scaleY !== 1) {
|
973 | transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis;
|
974 | }
|
975 |
|
976 | target.style[_transformProp] = transforms || "translate(0, 0)";
|
977 | },
|
978 | _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) {
|
979 | var _ref2 = cache || this,
|
980 | xPercent = _ref2.xPercent,
|
981 | yPercent = _ref2.yPercent,
|
982 | x = _ref2.x,
|
983 | y = _ref2.y,
|
984 | rotation = _ref2.rotation,
|
985 | skewX = _ref2.skewX,
|
986 | skewY = _ref2.skewY,
|
987 | scaleX = _ref2.scaleX,
|
988 | scaleY = _ref2.scaleY,
|
989 | target = _ref2.target,
|
990 | xOrigin = _ref2.xOrigin,
|
991 | yOrigin = _ref2.yOrigin,
|
992 | xOffset = _ref2.xOffset,
|
993 | yOffset = _ref2.yOffset,
|
994 | forceCSS = _ref2.forceCSS,
|
995 | tx = parseFloat(x),
|
996 | ty = parseFloat(y),
|
997 | a11,
|
998 | a21,
|
999 | a12,
|
1000 | a22,
|
1001 | temp;
|
1002 |
|
1003 | rotation = parseFloat(rotation);
|
1004 | skewX = parseFloat(skewX);
|
1005 | skewY = parseFloat(skewY);
|
1006 |
|
1007 | if (skewY) {
|
1008 |
|
1009 | skewY = parseFloat(skewY);
|
1010 | skewX += skewY;
|
1011 | rotation += skewY;
|
1012 | }
|
1013 |
|
1014 | if (rotation || skewX) {
|
1015 | rotation *= _DEG2RAD;
|
1016 | skewX *= _DEG2RAD;
|
1017 | a11 = Math.cos(rotation) * scaleX;
|
1018 | a21 = Math.sin(rotation) * scaleX;
|
1019 | a12 = Math.sin(rotation - skewX) * -scaleY;
|
1020 | a22 = Math.cos(rotation - skewX) * scaleY;
|
1021 |
|
1022 | if (skewX) {
|
1023 | skewY *= _DEG2RAD;
|
1024 | temp = Math.tan(skewX - skewY);
|
1025 | temp = Math.sqrt(1 + temp * temp);
|
1026 | a12 *= temp;
|
1027 | a22 *= temp;
|
1028 |
|
1029 | if (skewY) {
|
1030 | temp = Math.tan(skewY);
|
1031 | temp = Math.sqrt(1 + temp * temp);
|
1032 | a11 *= temp;
|
1033 | a21 *= temp;
|
1034 | }
|
1035 | }
|
1036 |
|
1037 | a11 = _round(a11);
|
1038 | a21 = _round(a21);
|
1039 | a12 = _round(a12);
|
1040 | a22 = _round(a22);
|
1041 | } else {
|
1042 | a11 = scaleX;
|
1043 | a22 = scaleY;
|
1044 | a21 = a12 = 0;
|
1045 | }
|
1046 |
|
1047 | if (tx && !~(x + "").indexOf("px") || ty && !~(y + "").indexOf("px")) {
|
1048 | tx = _convertToUnit(target, "x", x, "px");
|
1049 | ty = _convertToUnit(target, "y", y, "px");
|
1050 | }
|
1051 |
|
1052 | if (xOrigin || yOrigin || xOffset || yOffset) {
|
1053 | tx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);
|
1054 | ty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);
|
1055 | }
|
1056 |
|
1057 | if (xPercent || yPercent) {
|
1058 |
|
1059 | temp = target.getBBox();
|
1060 | tx = _round(tx + xPercent / 100 * temp.width);
|
1061 | ty = _round(ty + yPercent / 100 * temp.height);
|
1062 | }
|
1063 |
|
1064 | temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")";
|
1065 | target.setAttribute("transform", temp);
|
1066 |
|
1067 | if (forceCSS) {
|
1068 |
|
1069 | target.style[_transformProp] = temp;
|
1070 | }
|
1071 | },
|
1072 | _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue, relative) {
|
1073 | var cap = 360,
|
1074 | isString = _isString(endValue),
|
1075 | endNum = parseFloat(endValue) * (isString && ~endValue.indexOf("rad") ? _RAD2DEG : 1),
|
1076 | change = relative ? endNum * relative : endNum - startNum,
|
1077 | finalValue = startNum + change + "deg",
|
1078 | direction,
|
1079 | pt;
|
1080 |
|
1081 | if (isString) {
|
1082 | direction = endValue.split("_")[1];
|
1083 |
|
1084 | if (direction === "short") {
|
1085 | change %= cap;
|
1086 |
|
1087 | if (change !== change % (cap / 2)) {
|
1088 | change += change < 0 ? cap : -cap;
|
1089 | }
|
1090 | }
|
1091 |
|
1092 | if (direction === "cw" && change < 0) {
|
1093 | change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap;
|
1094 | } else if (direction === "ccw" && change > 0) {
|
1095 | change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap;
|
1096 | }
|
1097 | }
|
1098 |
|
1099 | plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);
|
1100 | pt.e = finalValue;
|
1101 | pt.u = "deg";
|
1102 |
|
1103 | plugin._props.push(property);
|
1104 |
|
1105 | return pt;
|
1106 | },
|
1107 | _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) {
|
1108 |
|
1109 | var style = _tempDivStyler.style,
|
1110 | startCache = target._gsap,
|
1111 | exclude = "perspective,force3D,transformOrigin,svgOrigin",
|
1112 | endCache,
|
1113 | p,
|
1114 | startValue,
|
1115 | endValue,
|
1116 | startNum,
|
1117 | endNum,
|
1118 | startUnit,
|
1119 | endUnit;
|
1120 | style.cssText = getComputedStyle(target).cssText + ";position:absolute;display:block;";
|
1121 |
|
1122 | style[_transformProp] = transforms;
|
1123 |
|
1124 | _doc.body.appendChild(_tempDivStyler);
|
1125 |
|
1126 | endCache = _parseTransform(_tempDivStyler, 1);
|
1127 |
|
1128 | for (p in _transformProps) {
|
1129 | startValue = startCache[p];
|
1130 | endValue = endCache[p];
|
1131 |
|
1132 | if (startValue !== endValue && exclude.indexOf(p) < 0) {
|
1133 |
|
1134 | startUnit = getUnit(startValue);
|
1135 | endUnit = getUnit(endValue);
|
1136 | startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);
|
1137 | endNum = parseFloat(endValue);
|
1138 | plugin._pt = new PropTween(plugin._pt, startCache, p, startNum, endNum - startNum, _renderCSSProp);
|
1139 | plugin._pt.u = endUnit || 0;
|
1140 |
|
1141 | plugin._props.push(p);
|
1142 | }
|
1143 | }
|
1144 |
|
1145 | _doc.body.removeChild(_tempDivStyler);
|
1146 | };
|
1147 |
|
1148 |
|
1149 | _forEachName("padding,margin,Width,Radius", function (name, index) {
|
1150 | var t = "Top",
|
1151 | r = "Right",
|
1152 | b = "Bottom",
|
1153 | l = "Left",
|
1154 | props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) {
|
1155 | return index < 2 ? name + side : "border" + side + name;
|
1156 | });
|
1157 |
|
1158 | _specialProps[index > 1 ? "border" + name : name] = function (plugin, target, property, endValue, tween) {
|
1159 | var a, vars;
|
1160 |
|
1161 | if (arguments.length < 4) {
|
1162 |
|
1163 | a = props.map(function (prop) {
|
1164 | return _get(plugin, prop, property);
|
1165 | });
|
1166 | vars = a.join(" ");
|
1167 | return vars.split(a[0]).length === 5 ? a[0] : vars;
|
1168 | }
|
1169 |
|
1170 | a = (endValue + "").split(" ");
|
1171 | vars = {};
|
1172 | props.forEach(function (prop, i) {
|
1173 | return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0];
|
1174 | });
|
1175 | plugin.init(target, vars, tween);
|
1176 | };
|
1177 | });
|
1178 |
|
1179 | export var CSSPlugin = {
|
1180 | name: "css",
|
1181 | register: _initCore,
|
1182 | targetTest: function targetTest(target) {
|
1183 | return target.style && target.nodeType;
|
1184 | },
|
1185 | init: function init(target, vars, tween, index, targets) {
|
1186 | var props = this._props,
|
1187 | style = target.style,
|
1188 | startValue,
|
1189 | endValue,
|
1190 | endNum,
|
1191 | startNum,
|
1192 | type,
|
1193 | specialProp,
|
1194 | p,
|
1195 | startUnit,
|
1196 | endUnit,
|
1197 | relative,
|
1198 | isTransformRelated,
|
1199 | transformPropTween,
|
1200 | cache,
|
1201 | smooth,
|
1202 | hasPriority;
|
1203 | _pluginInitted || _initCore();
|
1204 |
|
1205 | for (p in vars) {
|
1206 | if (p === "autoRound") {
|
1207 | continue;
|
1208 | }
|
1209 |
|
1210 | endValue = vars[p];
|
1211 |
|
1212 | if (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) {
|
1213 |
|
1214 | continue;
|
1215 | }
|
1216 |
|
1217 | type = typeof endValue;
|
1218 | specialProp = _specialProps[p];
|
1219 |
|
1220 | if (type === "function") {
|
1221 | endValue = endValue.call(tween, index, target, targets);
|
1222 | type = typeof endValue;
|
1223 | }
|
1224 |
|
1225 | if (type === "string" && ~endValue.indexOf("random(")) {
|
1226 | endValue = _replaceRandom(endValue);
|
1227 | }
|
1228 |
|
1229 | if (specialProp) {
|
1230 | if (specialProp(this, target, p, endValue, tween)) {
|
1231 | hasPriority = 1;
|
1232 | }
|
1233 | } else if (p.substr(0, 2) === "--") {
|
1234 |
|
1235 | this.add(style, "setProperty", getComputedStyle(target).getPropertyValue(p) + "", endValue + "", index, targets, 0, 0, p);
|
1236 | } else if (type !== "undefined") {
|
1237 | startValue = _get(target, p);
|
1238 | startNum = parseFloat(startValue);
|
1239 | relative = type === "string" && endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
|
1240 |
|
1241 | if (relative) {
|
1242 | endValue = endValue.substr(2);
|
1243 | }
|
1244 |
|
1245 | endNum = parseFloat(endValue);
|
1246 |
|
1247 | if (p in _propertyAliases) {
|
1248 | if (p === "autoAlpha") {
|
1249 |
|
1250 | if (startNum === 1 && _get(target, "visibility") === "hidden" && endNum) {
|
1251 |
|
1252 | startNum = 0;
|
1253 | }
|
1254 |
|
1255 | _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum);
|
1256 | }
|
1257 |
|
1258 | if (p !== "scale" && p !== "transform") {
|
1259 | p = _propertyAliases[p];
|
1260 | ~p.indexOf(",") && (p = p.split(",")[0]);
|
1261 | }
|
1262 | }
|
1263 |
|
1264 | isTransformRelated = p in _transformProps;
|
1265 |
|
1266 | if (isTransformRelated) {
|
1267 | if (!transformPropTween) {
|
1268 | cache = target._gsap;
|
1269 | cache.renderTransform || _parseTransform(target);
|
1270 |
|
1271 | smooth = vars.smoothOrigin !== false && cache.smooth;
|
1272 | transformPropTween = this._pt = new PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1);
|
1273 |
|
1274 | transformPropTween.dep = 1;
|
1275 | }
|
1276 |
|
1277 | if (p === "scale") {
|
1278 | this._pt = new PropTween(this._pt, cache, "scaleY", cache.scaleY, relative ? relative * endNum : endNum - cache.scaleY);
|
1279 | props.push("scaleY", p);
|
1280 | p += "X";
|
1281 | } else if (p === "transformOrigin") {
|
1282 | endValue = _convertKeywordsToPercentages(endValue);
|
1283 |
|
1284 | if (cache.svg) {
|
1285 | _applySVGOrigin(target, endValue, 0, smooth, 0, this);
|
1286 | } else {
|
1287 | endUnit = parseFloat(endValue.split(" ")[2]) || 0;
|
1288 |
|
1289 | endUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit);
|
1290 |
|
1291 | _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));
|
1292 | }
|
1293 |
|
1294 | continue;
|
1295 | } else if (p === "svgOrigin") {
|
1296 | _applySVGOrigin(target, endValue, 1, smooth, 0, this);
|
1297 |
|
1298 | continue;
|
1299 | } else if (p in _rotationalProperties) {
|
1300 | _addRotationalPropTween(this, cache, p, startNum, endValue, relative);
|
1301 |
|
1302 | continue;
|
1303 | } else if (p === "smoothOrigin") {
|
1304 | _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue);
|
1305 |
|
1306 | continue;
|
1307 | } else if (p === "force3D") {
|
1308 | cache[p] = endValue;
|
1309 | continue;
|
1310 | } else if (p === "transform") {
|
1311 | _addRawTransformPTs(this, endValue, target);
|
1312 |
|
1313 | continue;
|
1314 | }
|
1315 | } else if (!(p in style)) {
|
1316 | p = _checkPropPrefix(p) || p;
|
1317 | }
|
1318 |
|
1319 | if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) {
|
1320 | startUnit = (startValue + "").substr((startNum + "").length);
|
1321 | endNum || (endNum = 0);
|
1322 |
|
1323 | endUnit = getUnit(endValue) || (p in _config.units ? _config.units[p] : startUnit);
|
1324 | startUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit));
|
1325 | this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, relative ? relative * endNum : endNum - startNum, endUnit === "px" && vars.autoRound !== false && !isTransformRelated ? _renderRoundedCSSProp : _renderCSSProp);
|
1326 | this._pt.u = endUnit || 0;
|
1327 |
|
1328 | if (startUnit !== endUnit) {
|
1329 |
|
1330 | this._pt.b = startValue;
|
1331 | this._pt.r = _renderCSSPropWithBeginning;
|
1332 | }
|
1333 | } else if (!(p in style)) {
|
1334 | if (p in target) {
|
1335 |
|
1336 | this.add(target, p, target[p], endValue, index, targets);
|
1337 | } else {
|
1338 | _missingPlugin(p, endValue);
|
1339 |
|
1340 | continue;
|
1341 | }
|
1342 | } else {
|
1343 | _tweenComplexCSSString.call(this, target, p, startValue, endValue);
|
1344 | }
|
1345 |
|
1346 | props.push(p);
|
1347 | }
|
1348 | }
|
1349 |
|
1350 | hasPriority && _sortPropTweensByPriority(this);
|
1351 | },
|
1352 | get: _get,
|
1353 | aliases: _propertyAliases,
|
1354 | getSetter: function getSetter(target, property, plugin) {
|
1355 |
|
1356 | var p = _propertyAliases[property];
|
1357 | p && p.indexOf(",") < 0 && (property = p);
|
1358 | 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);
|
1359 | },
|
1360 | core: {
|
1361 | _removeProperty: _removeProperty,
|
1362 | _getMatrix: _getMatrix
|
1363 | }
|
1364 | };
|
1365 | gsap.utils.checkPrefix = _checkPropPrefix;
|
1366 |
|
1367 | (function (positionAndScale, rotation, others, aliases) {
|
1368 | var all = _forEachName(positionAndScale + "," + rotation + "," + others, function (name) {
|
1369 | _transformProps[name] = 1;
|
1370 | });
|
1371 |
|
1372 | _forEachName(rotation, function (name) {
|
1373 | _config.units[name] = "deg";
|
1374 | _rotationalProperties[name] = 1;
|
1375 | });
|
1376 |
|
1377 | _propertyAliases[all[13]] = positionAndScale + "," + rotation;
|
1378 |
|
1379 | _forEachName(aliases, function (name) {
|
1380 | var split = name.split(":");
|
1381 | _propertyAliases[split[1]] = all[split[0]];
|
1382 | });
|
1383 | })("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");
|
1384 |
|
1385 | _forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function (name) {
|
1386 | _config.units[name] = "px";
|
1387 | });
|
1388 |
|
1389 | gsap.registerPlugin(CSSPlugin);
|
1390 | export { CSSPlugin as default, _getBBox, _createElement, _checkPropPrefix as checkPrefix }; |
\ | No newline at end of file |