├── example.js ├── package.json ├── otherLibs └── gsap │ ├── index.js │ ├── all.js │ ├── CSSRulePlugin.js │ ├── TextPlugin.js │ ├── EasePack.js │ ├── ScrollToPlugin.js │ ├── EaselPlugin.js │ ├── utils │ ├── strings.js │ ├── matrix.js │ └── paths.js │ ├── MotionPathPlugin.js │ ├── CustomEase.js │ ├── PixiPlugin.js │ └── CSSPlugin.js ├── README.md ├── example.html └── src └── splitText.js /example.js: -------------------------------------------------------------------------------- 1 | import { gsap, TimelineLite } from "./otherLibs/gsap/all.js"; 2 | import { SplitText } from "./src/splitText.js"; 3 | 4 | const timeline = new TimelineLite() 5 | 6 | const text = new SplitText(".header"); 7 | console.log(text); 8 | 9 | gsap.set(text.chars, { 10 | perspective: "500", 11 | transformOrigin: "50% 1em", 12 | transformStyle: 'preserve-3d', 13 | }) 14 | 15 | timeline.staggerFromTo( 16 | text.chars, 17 | 0.5, 18 | { 19 | opacity:0, 20 | rotateY: 45, 21 | rotateZ: 360 22 | }, 23 | { 24 | opacity:1, 25 | rotateY: 0, 26 | rotateZ: 0 27 | }, 28 | 0.01 29 | ) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@0x21106/splittext", 3 | "version": "1.0.0", 4 | "description": "```javascript\r \timport { SplitText } from \"./assets/splitText.js\"", 5 | "main": "example.js", 6 | "scripts": {}, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/0x21106/gsap-class-based-splitText-plugin.git" 10 | }, 11 | "keywords": [ 12 | "gsap", 13 | "split-text", 14 | "split", 15 | "text", 16 | "splitText" 17 | ], 18 | "author": "Ayhanexe", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/0x21106/gsap-class-based-splitText-plugin/issues" 22 | }, 23 | "homepage": "https://github.com/0x21106/gsap-class-based-splitText-plugin#readme" 24 | } 25 | -------------------------------------------------------------------------------- /otherLibs/gsap/index.js: -------------------------------------------------------------------------------- 1 | import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from "./gsap-core.js"; 2 | import { CSSPlugin } from "./CSSPlugin.js"; 3 | 4 | const gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, // to protect from tree shaking 5 | TweenMaxWithCSS = gsapWithCSS.core.Tween; 6 | 7 | export { 8 | gsapWithCSS as gsap, 9 | gsapWithCSS as default, 10 | CSSPlugin, 11 | TweenMaxWithCSS as TweenMax, 12 | TweenLite, 13 | TimelineMax, 14 | TimelineLite, 15 | Power0, 16 | Power1, 17 | Power2, 18 | Power3, 19 | Power4, 20 | Linear, 21 | Quad, 22 | Cubic, 23 | Quart, 24 | Quint, 25 | Strong, 26 | Elastic, 27 | Back, 28 | SteppedEase, 29 | Bounce, 30 | Sine, 31 | Expo, 32 | Circ 33 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Important! Thanks to Webflow, Gsap is free to use now with it's plugins like `SplitText` 2 | Its good to see and know how it works under the hood plugins like this but its better to use original `SplitText` plugin 3 | 4 | see: https://gsap.com/pricing/ 5 | 6 | # GSAP Split Text Tool 7 | 8 | ### Basic Usage 9 | ```javascript 10 | import { SplitText } from "./assets/splitText.js" 11 | 12 | const text = document.querySelector("h1.test") 13 | const splittedText = new SplitText(text) // or new SplitText("h1.test") 14 | ``` 15 | 16 | ### And Animating with GSAP 17 | 18 | ```javascript 19 | import { gsap, TimelineLite } from "./assets/gsap/all.js" 20 | import { SplitText } from "./assets/splitText.js" 21 | 22 | const text = document.querySelector("h1.test") 23 | const splittedText = new SplitText(text) // or new SplitText("h1.test") 24 | 25 | const textTimeline = new TimelineLite() 26 | 27 | textTimeline.staggerFromTo(splittedText.chars, 0.5, 28 | // From 29 | { 30 | rotateZ:360, 31 | opacity:0 32 | }, 33 | // To 34 | { 35 | rotateZ:0, 36 | opacity:1 37 | }, 38 | 0.02) 39 | 40 | ``` 41 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Split Text Demo 6 | 30 | 31 | 32 | 33 |

Hello am 48 year man from somalia. Sorry for my bed england. I selled my wife for internet connection for play "conter stirk" and i want to become the goodest player like you I play with 400 ping on brazil server and i am Global elite 2.

34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /otherLibs/gsap/all.js: -------------------------------------------------------------------------------- 1 | import gsap from "./gsap-core.js"; 2 | import CSSPlugin from "./CSSPlugin.js"; 3 | const gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, // to protect from tree shaking 4 | TweenMaxWithCSS = gsapWithCSS.core.Tween; 5 | 6 | export { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax }; 7 | 8 | export { TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, mapRange, pipe, unitize, interpolate, shuffle } from "./gsap-core.js"; 9 | export * from "./Draggable.js"; 10 | export * from "./CSSRulePlugin.js"; 11 | export * from "./EaselPlugin.js"; 12 | export * from "./EasePack.js"; 13 | export * from "./MotionPathPlugin.js"; 14 | export * from "./PixiPlugin.js"; 15 | export * from "./ScrollToPlugin.js"; 16 | export * from "./ScrollTrigger.js"; 17 | export * from "./TextPlugin.js"; 18 | 19 | //BONUS EXPORTS 20 | export * from "./CustomEase.js"; 21 | //export * from "./DrawSVGPlugin.js"; 22 | //export * from "./Physics2DPlugin.js"; 23 | //export * from "./PhysicsPropsPlugin.js"; 24 | //export * from "./ScrambleTextPlugin.js"; 25 | //export * from "./CustomBounce.js"; 26 | //export * from "./CustomWiggle.js"; 27 | //export * from "./GSDevTools.js"; 28 | //export * from "./InertiaPlugin.js"; 29 | //export * from "./MorphSVGPlugin.js"; 30 | //export * from "./MotionPathHelper.js"; 31 | //export * from "./SplitText.js"; -------------------------------------------------------------------------------- /otherLibs/gsap/CSSRulePlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * CSSRulePlugin 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, _win, _doc, CSSPlugin, 13 | _windowExists = () => typeof(window) !== "undefined", 14 | _getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap), 15 | _checkRegister = () => { 16 | if (!_coreInitted) { 17 | _initCore(); 18 | if (!CSSPlugin) { 19 | console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)"); 20 | } 21 | } 22 | return _coreInitted; 23 | }, 24 | _initCore = core => { 25 | gsap = core || _getGSAP(); 26 | if (_windowExists()) { 27 | _win = window; 28 | _doc = document; 29 | } 30 | if (gsap) { 31 | CSSPlugin = gsap.plugins.css; 32 | if (CSSPlugin) { 33 | _coreInitted = 1; 34 | } 35 | } 36 | }; 37 | 38 | 39 | export const CSSRulePlugin = { 40 | version: "3.5.1", 41 | name: "cssRule", 42 | init(target, value, tween, index, targets) { 43 | if (!_checkRegister() || typeof(target.cssText) === "undefined") { 44 | return false; 45 | } 46 | let div = target._gsProxy = target._gsProxy || _doc.createElement("div"); 47 | this.ss = target; 48 | this.style = div.style; 49 | div.style.cssText = target.cssText; 50 | 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 51 | }, 52 | render(ratio, data) { 53 | let pt = data._pt, 54 | style = data.style, 55 | ss = data.ss, 56 | i; 57 | while (pt) { 58 | pt.r(ratio, pt.d); 59 | pt = pt._next; 60 | } 61 | i = style.length; 62 | while (--i > -1) { 63 | ss[style[i]] = style[style[i]]; 64 | } 65 | }, 66 | getRule(selector) { 67 | _checkRegister(); 68 | let ruleProp = _doc.all ? "rules" : "cssRules", 69 | styleSheets = _doc.styleSheets, 70 | i = styleSheets.length, 71 | pseudo = (selector.charAt(0) === ":"), 72 | j, curSS, cs, a; 73 | 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. 74 | if (pseudo) { 75 | a = []; 76 | } 77 | while (i--) { 78 | //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. 79 | try { 80 | curSS = styleSheets[i][ruleProp]; 81 | if (!curSS) { 82 | continue; 83 | } 84 | j = curSS.length; 85 | } catch (e) { 86 | console.warn(e); 87 | continue; 88 | } 89 | while (--j > -1) { 90 | cs = curSS[j]; 91 | 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. 92 | if (pseudo) { 93 | a.push(cs.style); 94 | } else { 95 | return cs.style; 96 | } 97 | } 98 | } 99 | } 100 | return a; 101 | }, 102 | register: _initCore 103 | }; 104 | 105 | _getGSAP() && gsap.registerPlugin(CSSRulePlugin); 106 | 107 | export { CSSRulePlugin as default }; -------------------------------------------------------------------------------- /otherLibs/gsap/TextPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * TextPlugin 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | import { emojiSafeSplit, getText, splitInnerHTML } from "./utils/strings.js"; 13 | 14 | let gsap, _tempDiv, 15 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap); 16 | 17 | 18 | export const TextPlugin = { 19 | version:"3.5.1", 20 | name:"text", 21 | init(target, value, tween) { 22 | let i = target.nodeName.toUpperCase(), 23 | data = this, 24 | short, text, original, j, condensedText, condensedOriginal, aggregate, s; 25 | data.svg = (target.getBBox && (i === "TEXT" || i === "TSPAN")); 26 | if (!("innerHTML" in target) && !data.svg) { 27 | return false; 28 | } 29 | data.target = target; 30 | if (typeof(value) !== "object") { 31 | value = {value:value}; 32 | } 33 | if (!("value" in value)) { 34 | data.text = data.original = [""]; 35 | return; 36 | } 37 | data.delimiter = value.delimiter || ""; 38 | original = splitInnerHTML(target, data.delimiter); 39 | if (!_tempDiv) { 40 | _tempDiv = document.createElement("div"); 41 | } 42 | _tempDiv.innerHTML = value.value; 43 | text = splitInnerHTML(_tempDiv, data.delimiter); 44 | data.from = tween._from; 45 | if (data.from) { 46 | i = original; 47 | original = text; 48 | text = i; 49 | } 50 | data.hasClass = !!(value.newClass || value.oldClass); 51 | data.newClass = value.newClass; 52 | data.oldClass = value.oldClass; 53 | i = original.length - text.length; 54 | short = (i < 0) ? original : text; 55 | data.fillChar = value.fillChar || (value.padSpace ? " " : ""); 56 | if (i < 0) { 57 | i = -i; 58 | } 59 | while (--i > -1) { 60 | short.push(data.fillChar); 61 | } 62 | if (value.type === "diff") { 63 | j = 0; 64 | condensedText = []; 65 | condensedOriginal = []; 66 | aggregate = ""; 67 | for (i = 0; i < text.length; i++) { 68 | s = text[i]; 69 | if (s === original[i]) { 70 | aggregate += s; 71 | } else { 72 | condensedText[j] = aggregate + s; 73 | condensedOriginal[j++] = aggregate + original[i]; 74 | aggregate = ""; 75 | } 76 | } 77 | text = condensedText; 78 | original = condensedOriginal; 79 | if (aggregate) { 80 | text.push(aggregate); 81 | original.push(aggregate); 82 | } 83 | } 84 | if (value.speed) { 85 | tween.duration(Math.min(0.05 / value.speed * short.length, value.maxDuration || 9999)); 86 | } 87 | this.original = original; 88 | this.text = text; 89 | this._props.push("text"); 90 | }, 91 | render(ratio, data) { 92 | if (ratio > 1) { 93 | ratio = 1; 94 | } else if (ratio < 0) { 95 | ratio = 0; 96 | } 97 | if (data.from) { 98 | ratio = 1 - ratio; 99 | } 100 | let { text, hasClass, newClass, oldClass, delimiter, target, fillChar, original } = data, 101 | l = text.length, 102 | i = (ratio * l + 0.5) | 0, 103 | applyNew, applyOld, str; 104 | if (hasClass) { 105 | applyNew = (newClass && i); 106 | applyOld = (oldClass && i !== l); 107 | str = (applyNew ? "" : "") + text.slice(0, i).join(delimiter) + (applyNew ? "" : "") + (applyOld ? "" : "") + delimiter + original.slice(i).join(delimiter) + (applyOld ? "" : ""); 108 | } else { 109 | str = text.slice(0, i).join(delimiter) + delimiter + original.slice(i).join(delimiter); 110 | } 111 | if (data.svg) { //SVG text elements don't have an "innerHTML" in Microsoft browsers. 112 | target.textContent = str; 113 | } else { 114 | target.innerHTML = (fillChar === " " && ~str.indexOf(" ")) ? str.split(" ").join("  ") : str; 115 | } 116 | } 117 | }; 118 | 119 | TextPlugin.splitInnerHTML = splitInnerHTML; 120 | TextPlugin.emojiSafeSplit = emojiSafeSplit; 121 | TextPlugin.getText = getText; 122 | 123 | _getGSAP() && gsap.registerPlugin(TextPlugin); 124 | 125 | export { TextPlugin as default }; -------------------------------------------------------------------------------- /otherLibs/gsap/EasePack.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * EasePack 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, _registerEase, 13 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap), 14 | _boolean = (value, defaultValue) => !!(typeof(value) === "undefined" ? defaultValue : value && !~((value + "").indexOf("false"))), 15 | _initCore = core => { 16 | gsap = core || _getGSAP(); 17 | if (gsap) { 18 | _registerEase = gsap.registerEase; 19 | //add weighted ease capabilities to standard eases so users can do "power2.inOut(0.8)" for example to push everything toward the "out", or (-0.8) to push it toward the "in" (0 is neutral) 20 | let eases = gsap.parseEase(), 21 | createConfig = ease => ratio => { 22 | let y = 0.5 + ratio / 2; 23 | ease.config = p => ease(2 * (1 - p) * p * y + p * p); 24 | }, 25 | p; 26 | for (p in eases) { 27 | if (!eases[p].config) { 28 | createConfig(eases[p]); 29 | } 30 | } 31 | _registerEase("slow", SlowMo); 32 | _registerEase("expoScale", ExpoScaleEase); 33 | _registerEase("rough", RoughEase); 34 | for (p in EasePack) { 35 | p !== "version" && gsap.core.globals(p, EasePack[p]); 36 | } 37 | _coreInitted = 1; 38 | } 39 | }, 40 | _createSlowMo = (linearRatio, power, yoyoMode) => { 41 | linearRatio = Math.min(1, linearRatio || 0.7); 42 | let pow = linearRatio < 1 ? ((power || power === 0) ? power : 0.7) : 0, 43 | p1 = (1 - linearRatio) / 2, 44 | p3 = p1 + linearRatio, 45 | calcEnd = _boolean(yoyoMode); 46 | return p => { 47 | let r = p + (0.5 - p) * pow; 48 | return (p < p1) ? (calcEnd ? 1 - ((p = 1 - (p / p1)) * p) : r - ((p = 1 - (p / p1)) * p * p * p * r)) : (p > p3) ? (calcEnd ? (p === 1 ? 0 : 1 - (p = (p - p3) / p1) * p) : r + ((p - r) * (p = (p - p3) / p1) * p * p * p)) : (calcEnd ? 1 : r); 49 | } 50 | }, 51 | _createExpoScale = (start, end, ease) => { 52 | let p1 = Math.log(end / start), 53 | p2 = end - start; 54 | ease && (ease = gsap.parseEase(ease)); 55 | return p => (start * Math.exp(p1 * (ease ? ease(p) : p)) - start) / p2; 56 | }, 57 | EasePoint = function(time, value, next) { 58 | this.t = time; 59 | this.v = value; 60 | if (next) { 61 | this.next = next; 62 | next.prev = this; 63 | this.c = next.v - value; 64 | this.gap = next.t - time; 65 | } 66 | }, 67 | _createRoughEase = vars => { 68 | if (typeof(vars) !== "object") { //users may pass in via a string, like "rough(30)" 69 | vars = {points: +vars || 20}; 70 | } 71 | let taper = vars.taper || "none", 72 | a = [], 73 | cnt = 0, 74 | points = (+vars.points || 20) | 0, 75 | i = points, 76 | randomize = _boolean(vars.randomize, true), 77 | clamp = _boolean(vars.clamp), 78 | template = gsap ? gsap.parseEase(vars.template) : 0, 79 | strength = (+vars.strength || 1) * 0.4, 80 | x, y, bump, invX, obj, pnt, recent; 81 | while (--i > -1) { 82 | x = randomize ? Math.random() : (1 / points) * i; 83 | y = template ? template(x) : x; 84 | if (taper === "none") { 85 | bump = strength; 86 | } else if (taper === "out") { 87 | invX = 1 - x; 88 | bump = invX * invX * strength; 89 | } else if (taper === "in") { 90 | bump = x * x * strength; 91 | } else if (x < 0.5) { //"both" (start) 92 | invX = x * 2; 93 | bump = invX * invX * 0.5 * strength; 94 | } else { //"both" (end) 95 | invX = (1 - x) * 2; 96 | bump = invX * invX * 0.5 * strength; 97 | } 98 | if (randomize) { 99 | y += (Math.random() * bump) - (bump * 0.5); 100 | } else if (i % 2) { 101 | y += bump * 0.5; 102 | } else { 103 | y -= bump * 0.5; 104 | } 105 | if (clamp) { 106 | if (y > 1) { 107 | y = 1; 108 | } else if (y < 0) { 109 | y = 0; 110 | } 111 | } 112 | a[cnt++] = {x:x, y:y}; 113 | } 114 | a.sort((a, b) => a.x - b.x); 115 | pnt = new EasePoint(1, 1, null); 116 | i = points; 117 | while (i--) { 118 | obj = a[i]; 119 | pnt = new EasePoint(obj.x, obj.y, pnt); 120 | } 121 | recent = new EasePoint(0, 0, pnt.t ? pnt : pnt.next); 122 | return p => { 123 | let pnt = recent; 124 | if (p > pnt.t) { 125 | while (pnt.next && p >= pnt.t) { 126 | pnt = pnt.next; 127 | } 128 | pnt = pnt.prev; 129 | } else { 130 | while (pnt.prev && p <= pnt.t) { 131 | pnt = pnt.prev; 132 | } 133 | } 134 | recent = pnt; 135 | return pnt.v + ((p - pnt.t) / pnt.gap) * pnt.c; 136 | }; 137 | }; 138 | 139 | export const SlowMo = _createSlowMo(0.7); 140 | SlowMo.ease = SlowMo; //for backward compatibility 141 | SlowMo.config = _createSlowMo; 142 | 143 | export const ExpoScaleEase = _createExpoScale(1, 2); 144 | ExpoScaleEase.config = _createExpoScale; 145 | 146 | export const RoughEase = _createRoughEase(); 147 | RoughEase.ease = RoughEase; //for backward compatibility 148 | RoughEase.config = _createRoughEase; 149 | 150 | export const EasePack = { 151 | SlowMo: SlowMo, 152 | RoughEase: RoughEase, 153 | ExpoScaleEase: ExpoScaleEase 154 | }; 155 | 156 | for (let p in EasePack) { 157 | EasePack[p].register = _initCore; 158 | EasePack[p].version = "3.5.1"; 159 | } 160 | 161 | _getGSAP() && gsap.registerPlugin(SlowMo); 162 | 163 | export { EasePack as default }; -------------------------------------------------------------------------------- /src/splitText.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // // coded by: Ayhanexe with <3 4 | // // I do not care about money 5 | // // This code is fully free 6 | // // use it as you want ;) 7 | export class SplitText { 8 | #options = { 9 | charClass: "aki__char", 10 | wordClass: "aki__word", 11 | lineClass: "aki__line", 12 | globalClass: "aki_wrapper", 13 | emptySpaceName: "__AKI__EMPTY__SPACE__", 14 | }; 15 | 16 | #rawChars = []; 17 | chars = []; 18 | #rawWords = []; 19 | words = []; 20 | lines = []; 21 | 22 | constructor(elementOrSelector) { 23 | this.init(elementOrSelector); 24 | 25 | this.target = null; 26 | this.textContent = null; 27 | } 28 | 29 | #isElement(obj) { 30 | try { 31 | return obj instanceof HTMLElement; 32 | } catch (e) { 33 | return ( 34 | typeof obj === "object" && 35 | obj.nodeType === 1 && 36 | typeof obj.style === "object" && 37 | typeof obj.ownerDocument === "object" 38 | ); 39 | } 40 | } 41 | 42 | #createElement(tagname, content = "", htmlAttributes = {}, ...cssClass) { 43 | const __element__ = document.createElement(tagname); 44 | __element__.classList.add(...cssClass); 45 | __element__.innerHTML = content; 46 | 47 | for (const [key, value] of Object.entries(htmlAttributes)) { 48 | __element__.setAttribute(key, value); 49 | } 50 | 51 | return __element__; 52 | } 53 | 54 | #splitChars() { 55 | const textChars = `${this.textContent}`.split(""); 56 | 57 | textChars.forEach((char) => { 58 | const charElement = this.#createElement( 59 | "div", 60 | `${char}`, 61 | { 62 | style: "position:relative; display:inline-block;", 63 | }, 64 | `${this.#options.globalClass}`, 65 | `${this.#options.charClass}` 66 | ); 67 | 68 | this.#rawChars.push(char === " " ? " " : charElement); 69 | this.chars.push(charElement); 70 | }); 71 | this.#rawChars.push(" "); 72 | } 73 | 74 | #splitWords() { 75 | let startIndex = 0; 76 | this.#rawChars.forEach((rawChar, index) => { 77 | if (rawChar === " ") { 78 | const wordArray = this.#rawChars 79 | .slice(startIndex, index) 80 | .filter((word) => word !== " "); 81 | 82 | const wordDiv = this.#createElement( 83 | "div", 84 | "", 85 | { 86 | style: "position:relative; display:inline-block;", 87 | }, 88 | `${this.#options.globalClass}`, 89 | `${this.#options.wordClass}` 90 | ); 91 | 92 | wordArray.forEach((word) => { 93 | wordDiv.append(word); 94 | }); 95 | 96 | this.words.push(wordDiv); 97 | this.#rawWords.push(wordDiv, " "); 98 | startIndex = index; 99 | } 100 | }); 101 | } 102 | 103 | #splitLines() { 104 | let startIndex = 0; 105 | let lineArrays = []; 106 | 107 | const appendToLineArray = () => { 108 | 109 | lineArrays.forEach((lineArray) => { 110 | const lineDiv = this.#createElement( 111 | "div", 112 | "", 113 | { 114 | style: "position:relative; display:inline-block", 115 | }, 116 | `${this.#options.globalClass}`, 117 | `${this.#options.lineClass}` 118 | ); 119 | 120 | lineArray.forEach(lineWord => { 121 | lineDiv.append(lineWord) 122 | lineDiv.append(" ") 123 | }) 124 | this.lines.push(lineDiv); 125 | this.target.append(lineDiv); 126 | }); 127 | }; 128 | 129 | this.words.reduce((oldOffsetTop, word, index) => { 130 | const currentOffsetTop = word.offsetTop; 131 | 132 | if ( 133 | (oldOffsetTop !== currentOffsetTop && oldOffsetTop !== null) || 134 | index === this.words.length - 1 135 | ) { 136 | const computedIndex = 137 | index === this.words.length - 1 ? index + 1 : index; 138 | const lineArray = this.words.slice(startIndex, computedIndex); 139 | lineArrays.push(lineArray); 140 | startIndex = index; 141 | } 142 | 143 | return currentOffsetTop; 144 | }, null); 145 | 146 | appendToLineArray(); 147 | } 148 | 149 | #combineAll() { 150 | this.words.forEach((word) => { 151 | this.target.append(word); 152 | this.target.append(" "); 153 | }); 154 | this.#splitLines(); 155 | } 156 | 157 | #splitStart() { 158 | this.#splitChars(); 159 | this.#splitWords(); 160 | this.#combineAll(); 161 | } 162 | 163 | #getTextContent() { 164 | this.textContent = this.target.textContent; 165 | } 166 | 167 | #clearContent(element) { 168 | element.innerHTML = ""; 169 | } 170 | 171 | #logError(message) { 172 | console.error(`${message}`, "color:red", "color:inherit"); 173 | } 174 | 175 | #logAndThrowError(message) { 176 | if (message.includes("%c")) { 177 | console.error(`${message}`, "color:red", "color:inherit"); 178 | } else { 179 | console.error(`${message}`); 180 | } 181 | throw "SplitTextException! ⬆️"; 182 | } 183 | 184 | init(elementOrSelector) { 185 | if (this.#isElement(elementOrSelector)) { 186 | this.target = elementOrSelector; 187 | this.#getTextContent(); 188 | } else { 189 | if (elementOrSelector !== "") { 190 | const element = document.querySelector(`${elementOrSelector}`); 191 | if (element) { 192 | this.target = element; 193 | this.#getTextContent(); 194 | // window.addEventListener("resize", () => resizeFunction(element)) 195 | } else { 196 | this.#logAndThrowError( 197 | `can't found %c${elementOrSelector}%c in DOM tree!` 198 | ); 199 | } 200 | } else { 201 | this.#logAndThrowError( 202 | `selector is empty! %cplease give a valid%c selector!` 203 | ); 204 | } 205 | } 206 | 207 | this.#clearContent(this.target); 208 | this.#splitStart(); 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /otherLibs/gsap/ScrollToPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * ScrollToPlugin 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, _window, _docEl, _body, _toArray, _config, 13 | _windowExists = () => typeof(window) !== "undefined", 14 | _getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap), 15 | _isString = value => typeof(value) === "string", 16 | _max = (element, axis) => { 17 | let dim = (axis === "x") ? "Width" : "Height", 18 | scroll = "scroll" + dim, 19 | client = "client" + dim; 20 | return (element === _window || element === _docEl || element === _body) ? Math.max(_docEl[scroll], _body[scroll]) - (_window["inner" + dim] || _docEl[client] || _body[client]) : element[scroll] - element["offset" + dim]; 21 | }, 22 | _buildGetter = (e, axis) => { //pass in an element and an axis ("x" or "y") and it'll return a getter function for the scroll position of that element (like scrollTop or scrollLeft, although if the element is the window, it'll use the pageXOffset/pageYOffset or the documentElement's scrollTop/scrollLeft or document.body's. Basically this streamlines things and makes a very fast getter across browsers. 23 | let p = "scroll" + ((axis === "x") ? "Left" : "Top"); 24 | if (e === _window) { 25 | if (e.pageXOffset != null) { 26 | p = "page" + axis.toUpperCase() + "Offset"; 27 | } else { 28 | e = _docEl[p] != null ? _docEl : _body; 29 | } 30 | } 31 | return () => e[p]; 32 | }, 33 | _getOffset = (element, container) => { 34 | let rect = _toArray(element)[0].getBoundingClientRect(), 35 | isRoot = (!container || container === _window || container === _body), 36 | cRect = isRoot ? {top:_docEl.clientTop - (_window.pageYOffset || _docEl.scrollTop || _body.scrollTop || 0), left:_docEl.clientLeft - (_window.pageXOffset || _docEl.scrollLeft || _body.scrollLeft || 0)} : container.getBoundingClientRect(), 37 | offsets = {x: rect.left - cRect.left, y: rect.top - cRect.top}; 38 | if (!isRoot && container) { //only add the current scroll position if it's not the window/body. 39 | offsets.x += _buildGetter(container, "x")(); 40 | offsets.y += _buildGetter(container, "y")(); 41 | } 42 | return offsets; 43 | }, 44 | _parseVal = (value, target, axis, currentVal, offset) => !isNaN(value) && typeof(value) !== "object" ? parseFloat(value) - offset : (_isString(value) && value.charAt(1) === "=") ? parseFloat(value.substr(2)) * (value.charAt(0) === "-" ? -1 : 1) + currentVal - offset : (value === "max") ? _max(target, axis) - offset : Math.min(_max(target, axis), _getOffset(value, target)[axis] - offset), 45 | _initCore = () => { 46 | gsap = _getGSAP(); 47 | if (_windowExists() && gsap && document.body) { 48 | _window = window; 49 | _body = document.body; 50 | _docEl = document.documentElement; 51 | _toArray = gsap.utils.toArray; 52 | gsap.config({autoKillThreshold:7}); 53 | _config = gsap.config(); 54 | _coreInitted = 1; 55 | } 56 | }; 57 | 58 | 59 | export const ScrollToPlugin = { 60 | version:"3.5.1", 61 | name:"scrollTo", 62 | rawVars:1, 63 | register(core) { 64 | gsap = core; 65 | _initCore(); 66 | }, 67 | init(target, value, tween, index, targets) { 68 | if (!_coreInitted) { 69 | _initCore(); 70 | } 71 | let data = this; 72 | data.isWin = (target === _window); 73 | data.target = target; 74 | data.tween = tween; 75 | if (typeof(value) !== "object") { 76 | value = {y:value}; //if we don't receive an object as the parameter, assume the user intends "y". 77 | if (_isString(value.y) && value.y !== "max" && value.y.charAt(1) !== "=") { 78 | value.x = value.y; 79 | } 80 | } else if (value.nodeType) { 81 | value = {y:value, x:value}; 82 | } 83 | data.vars = value; 84 | data.autoKill = !!value.autoKill; 85 | data.getX = _buildGetter(target, "x"); 86 | data.getY = _buildGetter(target, "y"); 87 | data.x = data.xPrev = data.getX(); 88 | data.y = data.yPrev = data.getY(); 89 | if (value.x != null) { 90 | data.add(data, "x", data.x, _parseVal(value.x, target, "x", data.x, value.offsetX || 0), index, targets, Math.round); 91 | data._props.push("scrollTo_x"); 92 | } else { 93 | data.skipX = 1; 94 | } 95 | if (value.y != null) { 96 | data.add(data, "y", data.y, _parseVal(value.y, target, "y", data.y, value.offsetY || 0), index, targets, Math.round); 97 | data._props.push("scrollTo_y"); 98 | } else { 99 | data.skipY = 1; 100 | } 101 | }, 102 | render(ratio, data) { 103 | let pt = data._pt, 104 | { target, tween, autoKill, xPrev, yPrev, isWin } = data, 105 | x, y, yDif, xDif, threshold; 106 | while (pt) { 107 | pt.r(ratio, pt.d); 108 | pt = pt._next; 109 | } 110 | x = (isWin || !data.skipX) ? data.getX() : xPrev; 111 | y = (isWin || !data.skipY) ? data.getY() : yPrev; 112 | yDif = y - yPrev; 113 | xDif = x - xPrev; 114 | threshold = _config.autoKillThreshold; 115 | if (data.x < 0) { //can't scroll to a position less than 0! Might happen if someone uses a Back.easeOut or Elastic.easeOut when scrolling back to the top of the page (for example) 116 | data.x = 0; 117 | } 118 | if (data.y < 0) { 119 | data.y = 0; 120 | } 121 | if (autoKill) { 122 | //note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match. 123 | if (!data.skipX && (xDif > threshold || xDif < -threshold) && x < _max(target, "x")) { 124 | data.skipX = 1; //if the user scrolls separately, we should stop tweening! 125 | } 126 | if (!data.skipY && (yDif > threshold || yDif < -threshold) && y < _max(target, "y")) { 127 | data.skipY = 1; //if the user scrolls separately, we should stop tweening! 128 | } 129 | if (data.skipX && data.skipY) { 130 | tween.kill(); 131 | if (data.vars.onAutoKill) { 132 | data.vars.onAutoKill.apply(tween, data.vars.onAutoKillParams || []); 133 | } 134 | } 135 | } 136 | if (isWin) { 137 | _window.scrollTo((!data.skipX) ? data.x : x, (!data.skipY) ? data.y : y); 138 | } else { 139 | if (!data.skipY) { 140 | target.scrollTop = data.y; 141 | } 142 | if (!data.skipX) { 143 | target.scrollLeft = data.x; 144 | } 145 | } 146 | data.xPrev = data.x; 147 | data.yPrev = data.y; 148 | }, 149 | kill(property) { 150 | let both = (property === "scrollTo"); 151 | if (both || property === "scrollTo_x") { 152 | this.skipX = 1; 153 | } 154 | if (both || property === "scrollTo_y") { 155 | this.skipY = 1; 156 | } 157 | } 158 | }; 159 | 160 | ScrollToPlugin.max = _max; 161 | ScrollToPlugin.getOffset = _getOffset; 162 | ScrollToPlugin.buildGetter = _buildGetter; 163 | 164 | _getGSAP() && gsap.registerPlugin(ScrollToPlugin); 165 | 166 | export { ScrollToPlugin as default }; -------------------------------------------------------------------------------- /otherLibs/gsap/EaselPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * EaselPlugin 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, _win, _createJS, _ColorFilter, _ColorMatrixFilter, 13 | _colorProps = "redMultiplier,greenMultiplier,blueMultiplier,alphaMultiplier,redOffset,greenOffset,blueOffset,alphaOffset".split(","), 14 | _windowExists = () => typeof(window) !== "undefined", 15 | _getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap), 16 | _getCreateJS = () => _createJS || (_win && _win.createjs) || _win || {}, 17 | _warn = message => console.warn(message), 18 | _cache = target => { 19 | let b = target.getBounds && target.getBounds(); 20 | if (!b) { 21 | b = target.nominalBounds || {x:0, y:0, width: 100, height: 100}; 22 | target.setBounds && target.setBounds(b.x, b.y, b.width, b.height); 23 | } 24 | target.cache && target.cache(b.x, b.y, b.width, b.height); 25 | _warn("EaselPlugin: for filters to display in EaselJS, you must call the object's cache() method first. GSAP attempted to use the target's getBounds() for the cache but that may not be completely accurate. " + target); 26 | }, 27 | _parseColorFilter = (target, v, plugin) => { 28 | if (!_ColorFilter) { 29 | _ColorFilter = _getCreateJS().ColorFilter; 30 | if (!_ColorFilter) { 31 | _warn("EaselPlugin error: The EaselJS ColorFilter JavaScript file wasn't loaded."); 32 | } 33 | } 34 | let filters = target.filters || [], 35 | i = filters.length, 36 | c, s, e, a, p, pt; 37 | while (i--) { 38 | if (filters[i] instanceof _ColorFilter) { 39 | s = filters[i]; 40 | break; 41 | } 42 | } 43 | if (!s) { 44 | s = new _ColorFilter(); 45 | filters.push(s); 46 | target.filters = filters; 47 | } 48 | e = s.clone(); 49 | if (v.tint != null) { 50 | c = gsap.utils.splitColor(v.tint); 51 | a = (v.tintAmount != null) ? +v.tintAmount : 1; 52 | e.redOffset = +c[0] * a; 53 | e.greenOffset = +c[1] * a; 54 | e.blueOffset = +c[2] * a; 55 | e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1 - a; 56 | } else { 57 | for (p in v) { 58 | if (p !== "exposure") if (p !== "brightness") { 59 | e[p] = +v[p]; 60 | } 61 | } 62 | } 63 | if (v.exposure != null) { 64 | e.redOffset = e.greenOffset = e.blueOffset = 255 * (+v.exposure - 1); 65 | e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1; 66 | } else if (v.brightness != null) { 67 | a = +v.brightness - 1; 68 | e.redOffset = e.greenOffset = e.blueOffset = (a > 0) ? a * 255 : 0; 69 | e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1 - Math.abs(a); 70 | } 71 | i = 8; 72 | while (i--) { 73 | p = _colorProps[i]; 74 | if (s[p] !== e[p]) { 75 | pt = plugin.add(s, p, s[p], e[p]); 76 | if (pt) { 77 | pt.op = "easel_colorFilter"; 78 | } 79 | } 80 | } 81 | plugin._props.push("easel_colorFilter"); 82 | if (!target.cacheID) { 83 | _cache(target); 84 | } 85 | }, 86 | 87 | _idMatrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0], 88 | _lumR = 0.212671, 89 | _lumG = 0.715160, 90 | _lumB = 0.072169, 91 | 92 | _applyMatrix = (m, m2) => { 93 | if (!(m instanceof Array) || !(m2 instanceof Array)) { 94 | return m2; 95 | } 96 | let temp = [], 97 | i = 0, 98 | z = 0, 99 | y, x; 100 | for (y = 0; y < 4; y++) { 101 | for (x = 0; x < 5; x++) { 102 | z = (x === 4) ? m[i + 4] : 0; 103 | temp[i + x] = m[i] * m2[x] + m[i+1] * m2[x + 5] + m[i+2] * m2[x + 10] + m[i+3] * m2[x + 15] + z; 104 | } 105 | i += 5; 106 | } 107 | return temp; 108 | }, 109 | 110 | _setSaturation = (m, n) => { 111 | if (isNaN(n)) { 112 | return m; 113 | } 114 | let inv = 1 - n, 115 | r = inv * _lumR, 116 | g = inv * _lumG, 117 | b = inv * _lumB; 118 | return _applyMatrix([r + n, g, b, 0, 0, r, g + n, b, 0, 0, r, g, b + n, 0, 0, 0, 0, 0, 1, 0], m); 119 | }, 120 | 121 | _colorize = (m, color, amount) => { 122 | if (isNaN(amount)) { 123 | amount = 1; 124 | } 125 | let c = gsap.utils.splitColor(color), 126 | r = c[0] / 255, 127 | g = c[1] / 255, 128 | b = c[2] / 255, 129 | inv = 1 - amount; 130 | return _applyMatrix([inv + amount * r * _lumR, amount * r * _lumG, amount * r * _lumB, 0, 0, amount * g * _lumR, inv + amount * g * _lumG, amount * g * _lumB, 0, 0, amount * b * _lumR, amount * b * _lumG, inv + amount * b * _lumB, 0, 0, 0, 0, 0, 1, 0], m); 131 | }, 132 | 133 | _setHue = (m, n) => { 134 | if (isNaN(n)) { 135 | return m; 136 | } 137 | n *= Math.PI / 180; 138 | let c = Math.cos(n), 139 | s = Math.sin(n); 140 | return _applyMatrix([(_lumR + (c * (1 - _lumR))) + (s * (-_lumR)), (_lumG + (c * (-_lumG))) + (s * (-_lumG)), (_lumB + (c * (-_lumB))) + (s * (1 - _lumB)), 0, 0, (_lumR + (c * (-_lumR))) + (s * 0.143), (_lumG + (c * (1 - _lumG))) + (s * 0.14), (_lumB + (c * (-_lumB))) + (s * -0.283), 0, 0, (_lumR + (c * (-_lumR))) + (s * (-(1 - _lumR))), (_lumG + (c * (-_lumG))) + (s * _lumG), (_lumB + (c * (1 - _lumB))) + (s * _lumB), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1], m); 141 | }, 142 | 143 | _setContrast = (m, n) => { 144 | if (isNaN(n)) { 145 | return m; 146 | } 147 | n += 0.01; 148 | return _applyMatrix([n,0,0,0,128 * (1 - n), 0,n,0,0,128 * (1 - n), 0,0,n,0,128 * (1 - n), 0,0,0,1,0], m); 149 | }, 150 | 151 | _parseColorMatrixFilter = (target, v, plugin) => { 152 | if (!_ColorMatrixFilter) { 153 | _ColorMatrixFilter = _getCreateJS().ColorMatrixFilter; 154 | if (!_ColorMatrixFilter) { 155 | _warn("EaselPlugin: The EaselJS ColorMatrixFilter JavaScript file wasn't loaded."); 156 | } 157 | } 158 | let filters = target.filters || [], 159 | i = filters.length, 160 | matrix, startMatrix, s, pg; 161 | while (--i > -1) { 162 | if (filters[i] instanceof _ColorMatrixFilter) { 163 | s = filters[i]; 164 | break; 165 | } 166 | } 167 | if (!s) { 168 | s = new _ColorMatrixFilter(_idMatrix.slice()); 169 | filters.push(s); 170 | target.filters = filters; 171 | } 172 | startMatrix = s.matrix; 173 | matrix = _idMatrix.slice(); 174 | if (v.colorize != null) { 175 | matrix = _colorize(matrix, v.colorize, Number(v.colorizeAmount)); 176 | } 177 | if (v.contrast != null) { 178 | matrix = _setContrast(matrix, Number(v.contrast)); 179 | } 180 | if (v.hue != null) { 181 | matrix = _setHue(matrix, Number(v.hue)); 182 | } 183 | if (v.saturation != null) { 184 | matrix = _setSaturation(matrix, Number(v.saturation)); 185 | } 186 | 187 | i = matrix.length; 188 | while (--i > -1) { 189 | if (matrix[i] !== startMatrix[i]) { 190 | pg = plugin.add(startMatrix, i, startMatrix[i], matrix[i]); 191 | if (pg) { 192 | pg.op = "easel_colorMatrixFilter"; 193 | } 194 | } 195 | } 196 | 197 | plugin._props.push("easel_colorMatrixFilter"); 198 | if (!target.cacheID) { 199 | _cache(); 200 | } 201 | 202 | plugin._matrix = startMatrix; 203 | }, 204 | 205 | _initCore = core => { 206 | gsap = core || _getGSAP(); 207 | if (_windowExists()) { 208 | _win = window; 209 | } 210 | if (gsap) { 211 | 212 | _coreInitted = 1; 213 | } 214 | }; 215 | 216 | 217 | export const EaselPlugin = { 218 | version: "3.5.1", 219 | name: "easel", 220 | init(target, value, tween, index, targets) { 221 | if (!_coreInitted) { 222 | _initCore(); 223 | if (!gsap) { 224 | _warn("Please gsap.registerPlugin(EaselPlugin)"); 225 | } 226 | } 227 | this.target = target; 228 | let p, pt, tint, colorMatrix, end, labels, i; 229 | for (p in value) { 230 | 231 | end = value[p]; 232 | if (p === "colorFilter" || p === "tint" || p === "tintAmount" || p === "exposure" || p === "brightness") { 233 | if (!tint) { 234 | _parseColorFilter(target, value.colorFilter || value, this); 235 | tint = true; 236 | } 237 | 238 | } else if (p === "saturation" || p === "contrast" || p === "hue" || p === "colorize" || p === "colorizeAmount") { 239 | if (!colorMatrix) { 240 | _parseColorMatrixFilter(target, value.colorMatrixFilter || value, this); 241 | colorMatrix = true; 242 | } 243 | 244 | } else if (p === "frame") { 245 | if (typeof(end) === "string" && end.charAt(1) !== "=" && (labels = target.labels)) { 246 | for (i = 0; i < labels.length; i++) { 247 | if (labels[i].label === end) { 248 | end = labels[i].position; 249 | } 250 | } 251 | } 252 | pt = this.add(target, "gotoAndStop", target.currentFrame, end, index, targets, Math.round); 253 | if (pt) { 254 | pt.op = p; 255 | } 256 | 257 | } else if (target[p] != null) { 258 | this.add(target, p, "get", end); 259 | } 260 | 261 | } 262 | }, 263 | render(ratio, data) { 264 | let pt = data._pt; 265 | while (pt) { 266 | pt.r(ratio, pt.d); 267 | pt = pt._next; 268 | } 269 | if (data.target.cacheID) { 270 | data.target.updateCache(); 271 | } 272 | }, 273 | register: _initCore 274 | }; 275 | 276 | EaselPlugin.registerCreateJS = createjs => { 277 | _createJS = createjs; 278 | }; 279 | 280 | _getGSAP() && gsap.registerPlugin(EaselPlugin); 281 | 282 | export { EaselPlugin as default }; -------------------------------------------------------------------------------- /otherLibs/gsap/utils/strings.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * strings: 3.5.1 3 | * https://greensock.com 4 | * 5 | * Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let _trimExp = /(^\s+|\s+$)/g; 13 | 14 | export const emojiExp = /([\uD800-\uDBFF][\uDC00-\uDFFF](?:[\u200D\uFE0F][\uD800-\uDBFF][\uDC00-\uDFFF]){2,}|\uD83D\uDC69(?:\u200D(?:(?:\uD83D\uDC69\u200D)?\uD83D\uDC67|(?:\uD83D\uDC69\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642]\uFE0F|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC6F\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3C-\uDD3E\uDDD6-\uDDDF])\u200D[\u2640\u2642]\uFE0F|\uD83C\uDDFD\uD83C\uDDF0|\uD83C\uDDF6\uD83C\uDDE6|\uD83C\uDDF4\uD83C\uDDF2|\uD83C\uDDE9(?:\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF])|\uD83C\uDDF7(?:\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC])|\uD83C\uDDE8(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uFE0F\u200D[\u2640\u2642]|(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642])\uFE0F|(?:\uD83D\uDC41\uFE0F\u200D\uD83D\uDDE8|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\uD83D\uDC69\u200D[\u2695\u2696\u2708]|\uD83D\uDC68(?:(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\u200D[\u2695\u2696\u2708]))\uFE0F|\uD83C\uDDF2(?:\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF])|\uD83D\uDC69\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D(?:\uD83D[\uDC68\uDC69])|\uD83D[\uDC68\uDC69]))|\uD83C\uDDF1(?:\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE])|\uD83C\uDDEF(?:\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5])|\uD83C\uDDED(?:\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA])|\uD83C\uDDEB(?:\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7])|[#\*0-9]\uFE0F\u20E3|\uD83C\uDDE7(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF])|\uD83C\uDDE6(?:\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF])|\uD83C\uDDFF(?:\uD83C[\uDDE6\uDDF2\uDDFC])|\uD83C\uDDF5(?:\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE])|\uD83C\uDDFB(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA])|\uD83C\uDDF3(?:\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF])|\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62(?:\uDB40\uDC77\uDB40\uDC6C\uDB40\uDC73|\uDB40\uDC73\uDB40\uDC63\uDB40\uDC74|\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67)\uDB40\uDC7F|\uD83D\uDC68(?:\u200D(?:\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D)?\uD83D\uDC68|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]))|\uD83C\uDDF8(?:\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF])|\uD83C\uDDF0(?:\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF])|\uD83C\uDDFE(?:\uD83C[\uDDEA\uDDF9])|\uD83C\uDDEE(?:\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9])|\uD83C\uDDF9(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF])|\uD83C\uDDEC(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE])|\uD83C\uDDFA(?:\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF])|\uD83C\uDDEA(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA])|\uD83C\uDDFC(?:\uD83C[\uDDEB\uDDF8])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uD83C[\uDFFB-\uDFFF])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u270A-\u270D]|\uD83C[\uDF85\uDFC2\uDFC7]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC70\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDCAA\uDD74\uDD7A\uDD90\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD30-\uDD36\uDDD1-\uDDD5])(?:\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC68(?:\u200D(?:(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85\uDFC2-\uDFC4\uDFC7\uDFCA-\uDFCC]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66-\uDC69\uDC6E\uDC70-\uDC78\uDC7C\uDC81-\uDC83\uDC85-\uDC87\uDCAA\uDD74\uDD75\uDD7A\uDD90\uDD95\uDD96\uDE45-\uDE47\uDE4B-\uDE4F\uDEA3\uDEB4-\uDEB6\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD26\uDD30-\uDD39\uDD3D\uDD3E\uDDD1-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])?|(?:[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55]|\uD83C[\uDC04\uDCCF\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF93\uDFA0-\uDFCA\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF4\uDFF8-\uDFFF]|\uD83D[\uDC00-\uDC3E\uDC40\uDC42-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDD7A\uDD95\uDD96\uDDA4\uDDFB-\uDE4F\uDE80-\uDEC5\uDECC\uDED0-\uDED2\uDEEB\uDEEC\uDEF4-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])|(?:[#\*0-9\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692-\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF]|\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F\uDD70\uDD73-\uDD7A\uDD87\uDD8A-\uDD8D\uDD90\uDD95\uDD96\uDDA4\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED2\uDEE0-\uDEE5\uDEE9\uDEEB\uDEEC\uDEF0\uDEF3-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])\uFE0F)/; 15 | 16 | export function getText(e) { 17 | let type = e.nodeType, 18 | result = ""; 19 | if (type === 1 || type === 9 || type === 11) { 20 | if (typeof(e.textContent) === "string") { 21 | return e.textContent; 22 | } else { 23 | for (e = e.firstChild; e; e = e.nextSibling ) { 24 | result += getText(e); 25 | } 26 | } 27 | } else if (type === 3 || type === 4) { 28 | return e.nodeValue; 29 | } 30 | return result; 31 | } 32 | 33 | export function splitInnerHTML(element, delimiter, trim) { 34 | let node = element.firstChild, 35 | result = []; 36 | while (node) { 37 | if (node.nodeType === 3) { 38 | result.push(...emojiSafeSplit((node.nodeValue + "").replace(/^\n+/g, "").replace(/\s+/g, " "), delimiter, trim)); 39 | } else if ((node.nodeName + "").toLowerCase() === "br") { 40 | result[result.length-1] += "
"; 41 | } else { 42 | result.push(node.outerHTML); 43 | } 44 | node = node.nextSibling; 45 | } 46 | return result; 47 | } 48 | 49 | /* 50 | //smaller kb version that only handles the simpler emoji's, which is often perfectly adequate. 51 | 52 | let _emoji = "[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2694-\u2697]|\uD83E[\uDD10-\uDD5D]|[\uD800-\uDBFF][\uDC00-\uDFFF]", 53 | _emojiExp = new RegExp(_emoji), 54 | _emojiAndCharsExp = new RegExp(_emoji + "|.", "g"), 55 | _emojiSafeSplit = (text, delimiter, trim) => { 56 | if (trim) { 57 | text = text.replace(_trimExp, ""); 58 | } 59 | return ((delimiter === "" || !delimiter) && _emojiExp.test(text)) ? text.match(_emojiAndCharsExp) : text.split(delimiter || ""); 60 | }; 61 | */ 62 | export function emojiSafeSplit(text, delimiter, trim) { 63 | text += ""; // make sure it's cast as a string. Someone may pass in a number. 64 | if (trim) { 65 | text = text.replace(_trimExp, ""); 66 | } 67 | if (delimiter && delimiter !== "") { 68 | return text.replace(/>/g, ">").replace(/= 0xD800 && character.charCodeAt(0) <= 0xDBFF) || (text.charCodeAt(i+1) >= 0xFE00 && text.charCodeAt(i+1) <= 0xFE0F)) { //special emoji characters use 2 or 4 unicode characters that we must keep together. 77 | j = ((text.substr(i, 12).split(emojiExp) || [])[1] || "").length || 2; 78 | character = text.substr(i, j); 79 | result.emoji = 1; 80 | i += j - 1; 81 | } 82 | result.push(character === ">" ? ">" : (character === "<") ? "<" : character); 83 | } 84 | return result; 85 | } -------------------------------------------------------------------------------- /otherLibs/gsap/MotionPathPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * MotionPathPlugin 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | import { getRawPath, cacheRawPathMeasurements, getPositionOnPath, pointsToSegment, flatPointsToSegment, sliceRawPath, stringToRawPath, rawPathToString, transformRawPath, convertToPath } from "./utils/paths.js"; 13 | import { getGlobalMatrix } from "./utils/matrix.js"; 14 | 15 | let _xProps = ["x","translateX","left","marginLeft"], 16 | _yProps = ["y","translateY","top","marginTop"], 17 | _DEG2RAD = Math.PI / 180, 18 | gsap, PropTween, _getUnit, _toArray, 19 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap), 20 | _populateSegmentFromArray = (segment, values, property, mode) => { //mode: 0 = x but don't fill y yet, 1 = y, 2 = x and fill y with 0. 21 | let l = values.length, 22 | si = mode === 2 ? 0 : mode, 23 | i = 0; 24 | for (; i < l; i++) { 25 | segment[si] = parseFloat(values[i][property]); 26 | mode === 2 && (segment[si+1] = 0); 27 | si += 2; 28 | } 29 | return segment; 30 | }, 31 | _getPropNum = (target, prop, unit) => parseFloat(target._gsap.get(target, prop, unit || "px")) || 0, 32 | _relativize = segment => { 33 | let x = segment[0], 34 | y = segment[1], 35 | i; 36 | for (i = 2; i < segment.length; i+=2) { 37 | x = (segment[i] += x); 38 | y = (segment[i+1] += y); 39 | } 40 | }, 41 | _segmentToRawPath = (plugin, segment, target, x, y, slicer, vars) => { 42 | if (vars.type === "cubic") { 43 | segment = [segment]; 44 | } else { 45 | segment.unshift(_getPropNum(target, x, vars.unitX), y ? _getPropNum(target, y, vars.unitY) : 0); 46 | vars.relative && _relativize(segment); 47 | let pointFunc = y ? pointsToSegment : flatPointsToSegment; 48 | segment = [pointFunc(segment, vars.curviness)]; 49 | } 50 | segment = slicer(_align(segment, target, vars)); 51 | _addDimensionalPropTween(plugin, target, x, segment, "x", vars.unitX); 52 | y && _addDimensionalPropTween(plugin, target, y, segment, "y", vars.unitY); 53 | return cacheRawPathMeasurements(segment, vars.resolution || (vars.curviness === 0 ? 20 : 12)); //when curviness is 0, it creates control points right on top of the anchors which makes it more sensitive to resolution, thus we change the default accordingly. 54 | }, 55 | _emptyFunc = v => v, 56 | _numExp = /[-+\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/g, 57 | _originToPoint = (element, origin, parentMatrix) => { // origin is an array of normalized values (0-1) in relation to the width/height, so [0.5, 0.5] would be the center. It can also be "auto" in which case it will be the top left unless it's a , when it will start at the beginning of the path itself. 58 | let m = getGlobalMatrix(element), 59 | svg, x, y; 60 | if ((element.tagName + "").toLowerCase() === "svg") { 61 | svg = element.viewBox.baseVal; 62 | x = svg.x; 63 | y = svg.y; 64 | svg.width || (svg = {width: +element.getAttribute("width"), height: +element.getAttribute("height")}); 65 | } else { 66 | svg = origin && element.getBBox && element.getBBox(); 67 | x = y = 0; 68 | } 69 | if (origin && origin !== "auto") { 70 | x += origin.push ? origin[0] * (svg ? svg.width : element.offsetWidth || 0) : origin.x; 71 | y += origin.push ? origin[1] * (svg ? svg.height : element.offsetHeight || 0) : origin.y; 72 | } 73 | return parentMatrix.apply( x || y ? m.apply({x: x, y: y}) : {x: m.e, y: m.f} ); 74 | }, 75 | _getAlignMatrix = (fromElement, toElement, fromOrigin, toOrigin) => { 76 | let parentMatrix = getGlobalMatrix(fromElement.parentNode, true, true), 77 | m = parentMatrix.clone().multiply(getGlobalMatrix(toElement)), 78 | fromPoint = _originToPoint(fromElement, fromOrigin, parentMatrix), 79 | {x, y} = _originToPoint(toElement, toOrigin, parentMatrix), 80 | p; 81 | m.e = m.f = 0; 82 | if (toOrigin === "auto" && toElement.getTotalLength && toElement.tagName.toLowerCase() === "path") { 83 | p = toElement.getAttribute("d").match(_numExp) || []; 84 | p = m.apply({x:+p[0], y:+p[1]}); 85 | x += p.x; 86 | y += p.y; 87 | } 88 | if (p || (toElement.getBBox && fromElement.getBBox && toElement.ownerSVGElement === fromElement.ownerSVGElement)) { 89 | p = m.apply(toElement.getBBox()); 90 | x -= p.x; 91 | y -= p.y; 92 | } 93 | m.e = x - fromPoint.x; 94 | m.f = y - fromPoint.y; 95 | return m; 96 | }, 97 | _align = (rawPath, target, {align, matrix, offsetX, offsetY, alignOrigin}) => { 98 | let x = rawPath[0][0], 99 | y = rawPath[0][1], 100 | curX = _getPropNum(target, "x"), 101 | curY = _getPropNum(target, "y"), 102 | alignTarget, m, p; 103 | if (!rawPath || !rawPath.length) { 104 | return getRawPath("M0,0L0,0"); 105 | } 106 | if (align) { 107 | if (align === "self" || ((alignTarget = _toArray(align)[0] || target) === target)) { 108 | transformRawPath(rawPath, 1, 0, 0, 1, curX - x, curY - y); 109 | } else { 110 | if (alignOrigin && alignOrigin[2] !== false) { 111 | gsap.set(target, {transformOrigin:(alignOrigin[0] * 100) + "% " + (alignOrigin[1] * 100) + "%"}); 112 | } else { 113 | alignOrigin = [_getPropNum(target, "xPercent") / -100, _getPropNum(target, "yPercent") / -100]; 114 | } 115 | m = _getAlignMatrix(target, alignTarget, alignOrigin, "auto"); 116 | p = m.apply({x: x, y: y}); 117 | transformRawPath(rawPath, m.a, m.b, m.c, m.d, curX + m.e - (p.x - m.e), curY + m.f - (p.y - m.f)); 118 | } 119 | } 120 | if (matrix) { 121 | transformRawPath(rawPath, matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f); 122 | } else if (offsetX || offsetY) { 123 | transformRawPath(rawPath, 1, 0, 0, 1, offsetX || 0, offsetY || 0); 124 | } 125 | return rawPath; 126 | }, 127 | _addDimensionalPropTween = (plugin, target, property, rawPath, pathProperty, forceUnit) => { 128 | let cache = target._gsap, 129 | harness = cache.harness, 130 | alias = (harness && harness.aliases && harness.aliases[property]), 131 | prop = alias && alias.indexOf(",") < 0 ? alias : property, 132 | pt = plugin._pt = new PropTween(plugin._pt, target, prop, 0, 0, _emptyFunc, 0, cache.set(target, prop, plugin)); 133 | pt.u = _getUnit(cache.get(target, prop, forceUnit)) || 0; 134 | pt.path = rawPath; 135 | pt.pp = pathProperty; 136 | plugin._props.push(prop); 137 | }, 138 | _sliceModifier = (start, end) => rawPath => (start || end !== 1) ? sliceRawPath(rawPath, start, end) : rawPath; 139 | 140 | 141 | export const MotionPathPlugin = { 142 | version: "3.5.1", 143 | name: "motionPath", 144 | register(core, Plugin, propTween) { 145 | gsap = core; 146 | _getUnit = gsap.utils.getUnit; 147 | _toArray = gsap.utils.toArray; 148 | PropTween = propTween; 149 | }, 150 | init(target, vars) { 151 | if (!gsap) { 152 | console.warn("Please gsap.registerPlugin(MotionPathPlugin)"); 153 | return false; 154 | } 155 | if (!(typeof(vars) === "object" && !vars.style) || !vars.path) { 156 | vars = {path:vars}; 157 | } 158 | let rawPaths = [], 159 | path = vars.path, 160 | firstObj = path[0], 161 | autoRotate = vars.autoRotate, 162 | slicer = _sliceModifier(vars.start, ("end" in vars) ? vars.end : 1), 163 | rawPath, p, x, y; 164 | this.rawPaths = rawPaths; 165 | this.target = target; 166 | if ((this.rotate = (autoRotate || autoRotate === 0))) { //get the rotational data FIRST so that the setTransform() method is called in the correct order in the render() loop - rotation gets set last. 167 | this.rOffset = parseFloat(autoRotate) || 0; 168 | this.radians = !!vars.useRadians; 169 | this.rProp = vars.rotation || "rotation"; // rotation property 170 | this.rSet = target._gsap.set(target, this.rProp, this); // rotation setter 171 | this.ru = _getUnit(target._gsap.get(target, this.rProp)) || 0; // rotation units 172 | } 173 | if (Array.isArray(path) && !("closed" in path) && typeof(firstObj) !== "number") { 174 | for (p in firstObj) { 175 | if (~_xProps.indexOf(p)) { 176 | x = p; 177 | } else if (~_yProps.indexOf(p)) { 178 | y = p; 179 | } 180 | } 181 | if (x && y) { //correlated values 182 | rawPaths.push(_segmentToRawPath(this, _populateSegmentFromArray(_populateSegmentFromArray([], path, x, 0), path, y, 1), target, vars.x || x, vars.y || y, slicer, vars)); 183 | } else { 184 | x = y = 0; 185 | } 186 | for (p in firstObj) { 187 | p !== x && p !== y && rawPaths.push(_segmentToRawPath(this, _populateSegmentFromArray([], path, p, 2), target, p, 0, slicer, vars)); 188 | } 189 | } else { 190 | rawPath = slicer(_align(getRawPath(vars.path), target, vars)); 191 | cacheRawPathMeasurements(rawPath, vars.resolution); 192 | rawPaths.push(rawPath); 193 | _addDimensionalPropTween(this, target, vars.x || "x", rawPath, "x", vars.unitX || "px"); 194 | _addDimensionalPropTween(this, target, vars.y || "y", rawPath, "y", vars.unitY || "px"); 195 | } 196 | }, 197 | render(ratio, data) { 198 | let rawPaths = data.rawPaths, 199 | i = rawPaths.length, 200 | pt = data._pt; 201 | if (ratio > 1) { 202 | ratio = 1; 203 | } else if (ratio < 0) { 204 | ratio = 0; 205 | } 206 | while (i--) { 207 | getPositionOnPath(rawPaths[i], ratio, !i && data.rotate, rawPaths[i]); 208 | } 209 | while (pt) { 210 | pt.set(pt.t, pt.p, pt.path[pt.pp] + pt.u, pt.d, ratio); 211 | pt = pt._next; 212 | } 213 | data.rotate && data.rSet(data.target, data.rProp, rawPaths[0].angle * (data.radians ? _DEG2RAD : 1) + data.rOffset + data.ru, data, ratio); 214 | }, 215 | getLength(path) { 216 | return cacheRawPathMeasurements(getRawPath(path)).totalLength; 217 | }, 218 | sliceRawPath, 219 | getRawPath, 220 | pointsToSegment, 221 | stringToRawPath, 222 | rawPathToString, 223 | transformRawPath, 224 | getGlobalMatrix, 225 | getPositionOnPath, 226 | cacheRawPathMeasurements, 227 | convertToPath: (targets, swap) => _toArray(targets).map(target => convertToPath(target, swap !== false)), 228 | convertCoordinates(fromElement, toElement, point) { 229 | let m = getGlobalMatrix(toElement, true, true).multiply(getGlobalMatrix(fromElement)); 230 | return point ? m.apply(point) : m; 231 | }, 232 | getAlignMatrix: _getAlignMatrix, 233 | getRelativePosition(fromElement, toElement, fromOrigin, toOrigin) { 234 | let m =_getAlignMatrix(fromElement, toElement, fromOrigin, toOrigin); 235 | return {x: m.e, y: m.f}; 236 | }, 237 | arrayToRawPath(value, vars) { 238 | vars = vars || {}; 239 | let segment = _populateSegmentFromArray(_populateSegmentFromArray([], value, vars.x || "x", 0), value, vars.y || "y", 1); 240 | vars.relative && _relativize(segment); 241 | return [(vars.type === "cubic") ? segment : pointsToSegment(segment, vars.curviness)]; 242 | } 243 | }; 244 | 245 | _getGSAP() && gsap.registerPlugin(MotionPathPlugin); 246 | 247 | export { MotionPathPlugin as default }; -------------------------------------------------------------------------------- /otherLibs/gsap/CustomEase.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * CustomEase 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | import { stringToRawPath, rawPathToString, transformRawPath } from "./utils/paths.js"; 13 | 14 | let gsap, _coreInitted, 15 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap), 16 | _initCore = () => { 17 | gsap = _getGSAP(); 18 | if (gsap) { 19 | gsap.registerEase("_CE", CustomEase.create); 20 | _coreInitted = 1; 21 | } else { 22 | console.warn("Please gsap.registerPlugin(CustomEase)"); 23 | } 24 | }, 25 | _bigNum = 1e20, 26 | _round = value => ~~(value * 1000 + (value < 0 ? -.5 : .5)) / 1000, 27 | _bonusValidated = 1, //CustomEase 28 | _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. 29 | _needsParsingExp = /[cLlsSaAhHvVtTqQ]/g, 30 | _findMinimum = values => { 31 | let l = values.length, 32 | min = _bigNum, 33 | i; 34 | for (i = 1; i < l; i += 6) { 35 | +values[i] < min && (min = +values[i]); 36 | } 37 | return min; 38 | }, 39 | //takes all the points and translates/scales them so that the x starts at 0 and ends at 1. 40 | _normalize = (values, height, originY) => { 41 | if (!originY && originY !== 0) { 42 | originY = Math.max(+values[values.length-1], +values[1]); 43 | } 44 | let tx = +values[0] * -1, 45 | ty = -originY, 46 | l = values.length, 47 | sx = 1 / (+values[l - 2] + tx), 48 | sy = -height || ((Math.abs(+values[l - 1] - +values[1]) < 0.01 * (+values[l - 2] - +values[0])) ? _findMinimum(values) + ty : +values[l - 1] + ty), 49 | i; 50 | if (sy) { //typically y ends at 1 (so that the end values are reached) 51 | sy = 1 / sy; 52 | } else { //in case the ease returns to its beginning value, scale everything proportionally 53 | sy = -sx; 54 | } 55 | for (i = 0; i < l; i += 2) { 56 | values[i] = (+values[i] + tx) * sx; 57 | values[i + 1] = (+values[i + 1] + ty) * sy; 58 | } 59 | }, 60 | //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 61 | _bezierToPoints = function (x1, y1, x2, y2, x3, y3, x4, y4, threshold, points, index) { 62 | let x12 = (x1 + x2) / 2, 63 | y12 = (y1 + y2) / 2, 64 | x23 = (x2 + x3) / 2, 65 | y23 = (y2 + y3) / 2, 66 | x34 = (x3 + x4) / 2, 67 | y34 = (y3 + y4) / 2, 68 | x123 = (x12 + x23) / 2, 69 | y123 = (y12 + y23) / 2, 70 | x234 = (x23 + x34) / 2, 71 | y234 = (y23 + y34) / 2, 72 | x1234 = (x123 + x234) / 2, 73 | y1234 = (y123 + y234) / 2, 74 | dx = x4 - x1, 75 | dy = y4 - y1, 76 | d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx), 77 | d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx), 78 | length; 79 | if (!points) { 80 | points = [{x: x1, y: y1}, {x: x4, y: y4}]; 81 | index = 1; 82 | } 83 | points.splice(index || points.length - 1, 0, {x: x1234, y: y1234}); 84 | if ((d2 + d3) * (d2 + d3) > threshold * (dx * dx + dy * dy)) { 85 | length = points.length; 86 | _bezierToPoints(x1, y1, x12, y12, x123, y123, x1234, y1234, threshold, points, index); 87 | _bezierToPoints(x1234, y1234, x234, y234, x34, y34, x4, y4, threshold, points, index + 1 + (points.length - length)); 88 | } 89 | return points; 90 | }; 91 | 92 | export class CustomEase { 93 | 94 | constructor(id, data, config) { 95 | _coreInitted || _initCore(); 96 | this.id = id; 97 | _bonusValidated && this.setData(data, config); 98 | } 99 | 100 | setData(data, config) { 101 | config = config || {}; 102 | data = data || "0,0,1,1"; 103 | let values = data.match(_numExp), 104 | closest = 1, 105 | points = [], 106 | lookup = [], 107 | precision = config.precision || 1, 108 | fast = (precision <= 1), 109 | l, a1, a2, i, inc, j, point, prevPoint, p; 110 | this.data = data; 111 | if (_needsParsingExp.test(data) || (~data.indexOf("M") && data.indexOf("C") < 0)) { 112 | values = stringToRawPath(data)[0]; 113 | } 114 | l = values.length; 115 | if (l === 4) { 116 | values.unshift(0, 0); 117 | values.push(1, 1); 118 | l = 8; 119 | } else if ((l - 2) % 6) { 120 | throw "Invalid CustomEase"; 121 | } 122 | if (+values[0] !== 0 || +values[l - 2] !== 1) { 123 | _normalize(values, config.height, config.originY); 124 | } 125 | this.segment = values; 126 | for (i = 2; i < l; i += 6) { 127 | a1 = {x: +values[i - 2], y: +values[i - 1]}; 128 | a2 = {x: +values[i + 4], y: +values[i + 5]}; 129 | points.push(a1, a2); 130 | _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); 131 | } 132 | l = points.length; 133 | for (i = 0; i < l; i++) { 134 | point = points[i]; 135 | prevPoint = points[i - 1] || point; 136 | 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". 137 | prevPoint.cx = point.x - prevPoint.x; //change in x between this point and the next point (performance optimization) 138 | prevPoint.cy = point.y - prevPoint.y; 139 | prevPoint.n = point; 140 | 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) 141 | 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. 142 | fast = 0; 143 | } 144 | if (prevPoint.cx < closest) { 145 | if (!prevPoint.cx) { 146 | prevPoint.cx = 0.001; //avoids math problems in getRatio() (dividing by zero) 147 | if (i === l - 1) { //in case the final segment goes vertical RIGHT at the end, make sure we end at the end. 148 | prevPoint.x -= 0.001; 149 | closest = Math.min(closest, 0.001); 150 | fast = 0; 151 | } 152 | } else { 153 | closest = prevPoint.cx; 154 | } 155 | } 156 | } else { 157 | points.splice(i--, 1); 158 | l--; 159 | } 160 | } 161 | l = (1 / closest + 1) | 0; 162 | inc = 1 / l; 163 | j = 0; 164 | point = points[0]; 165 | if (fast) { 166 | 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). 167 | p = i * inc; 168 | if (point.nx < p) { 169 | point = points[++j]; 170 | } 171 | a1 = point.y + ((p - point.x) / point.cx) * point.cy; 172 | lookup[i] = {x: p, cx: inc, y: a1, cy: 0, nx: 9}; 173 | if (i) { 174 | lookup[i - 1].cy = a1 - lookup[i - 1].y; 175 | } 176 | } 177 | lookup[l - 1].cy = points[points.length - 1].y - a1; 178 | } else { //this option is more accurate, ensuring that EVERY anchor is hit perfectly. Clipping across a bounce, for example, would never happen. 179 | 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)] 180 | if (point.nx < i * inc) { 181 | point = points[++j]; 182 | } 183 | lookup[i] = point; 184 | } 185 | 186 | if (j < points.length - 1) { 187 | lookup[i-1] = points[points.length-2]; 188 | } 189 | } 190 | //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. 191 | 192 | this.ease = p => { 193 | let point = lookup[(p * l) | 0] || lookup[l - 1]; 194 | if (point.nx < p) { 195 | point = point.n; 196 | } 197 | return point.y + ((p - point.x) / point.cx) * point.cy; 198 | }; 199 | 200 | this.ease.custom = this; 201 | 202 | this.id && gsap.registerEase(this.id, this.ease); 203 | 204 | return this; 205 | } 206 | 207 | getSVGData(config) { 208 | return CustomEase.getSVGData(this, config); 209 | } 210 | 211 | static create(id, data, config) { 212 | return (new CustomEase(id, data, config)).ease; 213 | } 214 | 215 | static register(core) { 216 | gsap = core; 217 | _initCore(); 218 | } 219 | 220 | static get(id) { 221 | return gsap.parseEase(id); 222 | } 223 | 224 | static getSVGData(ease, config) { 225 | config = config || {}; 226 | let width = config.width || 100, 227 | height = config.height || 100, 228 | x = config.x || 0, 229 | y = (config.y || 0) + height, 230 | e = gsap.utils.toArray(config.path)[0], 231 | a, slope, i, inc, tx, ty, precision, threshold, prevX, prevY; 232 | if (config.invert) { 233 | height = -height; 234 | y = 0; 235 | } 236 | if (typeof(ease) === "string") { 237 | ease = gsap.parseEase(ease); 238 | } 239 | if (ease.custom) { 240 | ease = ease.custom; 241 | } 242 | if (ease instanceof CustomEase) { 243 | a = rawPathToString(transformRawPath([ease.segment], width, 0, 0, -height, x, y)); 244 | } else { 245 | a = [x, y]; 246 | precision = Math.max(5, (config.precision || 1) * 200); 247 | inc = 1 / precision; 248 | precision += 2; 249 | threshold = 5 / precision; 250 | prevX = _round(x + inc * width); 251 | prevY = _round(y + ease(inc) * -height); 252 | slope = (prevY - y) / (prevX - x); 253 | for (i = 2; i < precision; i++) { 254 | tx = _round(x + i * inc * width); 255 | ty = _round(y + ease(i * inc) * -height); 256 | if (Math.abs((ty - prevY) / (tx - prevX) - slope) > threshold || i === precision - 1) { //only add points when the slope changes beyond the threshold 257 | a.push(prevX, prevY); 258 | slope = (ty - prevY) / (tx - prevX); 259 | } 260 | prevX = tx; 261 | prevY = ty; 262 | } 263 | a = "M" + a.join(","); 264 | } 265 | e && e.setAttribute("d", a); 266 | return a; 267 | } 268 | 269 | } 270 | 271 | _getGSAP() && gsap.registerPlugin(CustomEase); 272 | 273 | CustomEase.version = "3.5.1"; 274 | 275 | export { CustomEase as default }; -------------------------------------------------------------------------------- /otherLibs/gsap/utils/matrix.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * matrix 3.5.1 3 | * https://greensock.com 4 | * 5 | * Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let _doc, _win, _docElement, _body, _divContainer, _svgContainer, _identityMatrix, 13 | _transformProp = "transform", 14 | _transformOriginProp = _transformProp + "Origin", 15 | _hasOffsetBug, 16 | _setDoc = element => { 17 | let doc = element.ownerDocument || element; 18 | if (!(_transformProp in element.style) && "msTransform" in element.style) { //to improve compatibility with old Microsoft browsers 19 | _transformProp = "msTransform"; 20 | _transformOriginProp = _transformProp + "Origin"; 21 | } 22 | while (doc.parentNode && (doc = doc.parentNode)) { } 23 | _win = window; 24 | _identityMatrix = new Matrix2D(); 25 | if (doc) { 26 | _doc = doc; 27 | _docElement = doc.documentElement; 28 | _body = doc.body; 29 | // now test for the offset reporting bug. Use feature detection instead of browser sniffing to make things more bulletproof and future-proof. Hopefully Safari will fix their bug soon but it's 2020 and it's still not fixed. 30 | let d1 = doc.createElement("div"), 31 | d2 = doc.createElement("div"); 32 | _body.appendChild(d1); 33 | d1.appendChild(d2); 34 | d1.style.position = "static"; 35 | d1.style[_transformProp] = "translate3d(0,0,1px)"; 36 | _hasOffsetBug = (d2.offsetParent !== d1); 37 | _body.removeChild(d1); 38 | } 39 | return doc; 40 | }, 41 | _forceNonZeroScale = e => { // walks up the element's ancestors and finds any that had their scale set to 0 via GSAP, and changes them to 0.0001 to ensure that measurements work 42 | let a, cache; 43 | while (e && e !== _body) { 44 | cache = e._gsap; 45 | if (cache && !cache.scaleX && !cache.scaleY && cache.renderTransform) { 46 | cache.scaleX = cache.scaleY = 1e-4; 47 | cache.renderTransform(1, cache); 48 | a ? a.push(cache) : (a = [cache]); 49 | } 50 | e = e.parentNode; 51 | } 52 | return a; 53 | }, 54 | // possible future addition: pass an element to _forceDisplay() and it'll walk up all its ancestors and make sure anything with display: none is set to display: block, and if there's no parentNode, it'll add it to the body. It returns an Array that you can then feed to _revertDisplay() to have it revert all the changes it made. 55 | // _forceDisplay = e => { 56 | // let a = [], 57 | // parent; 58 | // while (e && e !== _body) { 59 | // parent = e.parentNode; 60 | // (_win.getComputedStyle(e).display === "none" || !parent) && a.push(e, e.style.display, parent) && (e.style.display = "block"); 61 | // parent || _body.appendChild(e); 62 | // e = parent; 63 | // } 64 | // return a; 65 | // }, 66 | // _revertDisplay = a => { 67 | // for (let i = 0; i < a.length; i+=3) { 68 | // a[i+1] ? (a[i].style.display = a[i+1]) : a[i].style.removeProperty("display"); 69 | // a[i+2] || a[i].parentNode.removeChild(a[i]); 70 | // } 71 | // }, 72 | _svgTemps = [], //we create 3 elements for SVG, and 3 for other DOM elements and cache them for performance reasons. They get nested in _divContainer and _svgContainer so that just one element is added to the DOM on each successive attempt. Again, performance is key. 73 | _divTemps = [], 74 | _getDocScrollTop = () => _win.pageYOffset || _doc.scrollTop || _docElement.scrollTop || _body.scrollTop || 0, 75 | _getDocScrollLeft = () => _win.pageXOffset || _doc.scrollLeft || _docElement.scrollLeft || _body.scrollLeft || 0, 76 | _svgOwner = element => element.ownerSVGElement || ((element.tagName + "").toLowerCase() === "svg" ? element : null), 77 | _isFixed = element => { 78 | if (_win.getComputedStyle(element).position === "fixed") { 79 | return true; 80 | } 81 | element = element.parentNode; 82 | if (element && element.nodeType === 1) { // avoid document fragments which will throw an error. 83 | return _isFixed(element); 84 | } 85 | }, 86 | _createSibling = (element, i) => { 87 | if (element.parentNode && (_doc || _setDoc(element))) { 88 | let svg = _svgOwner(element), 89 | ns = svg ? (svg.getAttribute("xmlns") || "http://www.w3.org/2000/svg") : "http://www.w3.org/1999/xhtml", 90 | type = svg ? (i ? "rect" : "g") : "div", 91 | x = i !== 2 ? 0 : 100, 92 | y = i === 3 ? 100 : 0, 93 | css = "position:absolute;display:block;pointer-events:none;", 94 | e = _doc.createElementNS ? _doc.createElementNS(ns.replace(/^https/, "http"), type) : _doc.createElement(type); 95 | if (i) { 96 | if (!svg) { 97 | if (!_divContainer) { 98 | _divContainer = _createSibling(element); 99 | _divContainer.style.cssText = css; 100 | } 101 | e.style.cssText = css + "width:0.1px;height:0.1px;top:" + y + "px;left:" + x + "px"; 102 | _divContainer.appendChild(e); 103 | 104 | } else { 105 | if (!_svgContainer) { 106 | _svgContainer = _createSibling(element); 107 | } 108 | e.setAttribute("width", 0.01); 109 | e.setAttribute("height", 0.01); 110 | e.setAttribute("transform", "translate(" + x + "," + y + ")"); 111 | _svgContainer.appendChild(e); 112 | } 113 | } 114 | return e; 115 | } 116 | throw "Need document and parent."; 117 | }, 118 | _consolidate = m => { // replaces SVGTransformList.consolidate() because a bug in Firefox causes it to break pointer events. See https://greensock.com/forums/topic/23248-touch-is-not-working-on-draggable-in-firefox-windows-v324/?tab=comments#comment-109800 119 | let c = new Matrix2D(), 120 | i = 0; 121 | for (; i < m.numberOfItems; i++) { 122 | c.multiply(m.getItem(i).matrix); 123 | } 124 | return c; 125 | }, 126 | _placeSiblings = (element, adjustGOffset) => { 127 | let svg = _svgOwner(element), 128 | isRootSVG = element === svg, 129 | siblings = svg ? _svgTemps : _divTemps, 130 | container, m, b, x, y; 131 | if (element === _win) { 132 | return element; 133 | } 134 | if (!siblings.length) { 135 | siblings.push(_createSibling(element, 1), _createSibling(element, 2), _createSibling(element, 3)); 136 | } 137 | container = svg ? _svgContainer : _divContainer; 138 | if (svg) { 139 | b = isRootSVG ? {x:0, y:0} : element.getBBox(); 140 | m = element.transform ? element.transform.baseVal : {}; // IE11 doesn't follow the spec. 141 | if (m.numberOfItems) { 142 | m = m.numberOfItems > 1 ? _consolidate(m) : m.getItem(0).matrix; // don't call m.consolidate().matrix because a bug in Firefox makes pointer events not work when consolidate() is called on the same tick as getBoundingClientRect()! See https://greensock.com/forums/topic/23248-touch-is-not-working-on-draggable-in-firefox-windows-v324/?tab=comments#comment-109800 143 | x = m.a * b.x + m.c * b.y; 144 | y = m.b * b.x + m.d * b.y; 145 | } else { 146 | m = _identityMatrix; 147 | x = b.x; 148 | y = b.y; 149 | } 150 | if (adjustGOffset && element.tagName.toLowerCase() === "g") { 151 | x = y = 0; 152 | } 153 | container.setAttribute("transform", "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + (m.e + x) + "," + (m.f + y) + ")"); 154 | (isRootSVG ? svg : element.parentNode).appendChild(container); 155 | } else { 156 | x = y = 0; 157 | if (_hasOffsetBug) { // some browsers (like Safari) have a bug that causes them to misreport offset values. When an ancestor element has a transform applied, it's supposed to treat it as if it's position: relative (new context). Safari botches this, so we need to find the closest ancestor (between the element and its offsetParent) that has a transform applied and if one is found, grab its offsetTop/Left and subtract them to compensate. 158 | m = element.offsetParent; 159 | b = element; 160 | while (b && (b = b.parentNode) && b !== m && b.parentNode) { 161 | if ((_win.getComputedStyle(b)[_transformProp] + "").length > 4) { 162 | x = b.offsetLeft; 163 | y = b.offsetTop; 164 | b = 0; 165 | } 166 | } 167 | } 168 | b = container.style; 169 | b.top = (element.offsetTop - y) + "px"; 170 | b.left = (element.offsetLeft - x) + "px"; 171 | m = _win.getComputedStyle(element); 172 | b[_transformProp] = m[_transformProp]; 173 | b[_transformOriginProp] = m[_transformOriginProp]; 174 | b.border = m.border; 175 | b.borderLeftStyle = m.borderLeftStyle; 176 | b.borderTopStyle = m.borderTopStyle; 177 | b.borderLeftWidth = m.borderLeftWidth; 178 | b.borderTopWidth = m.borderTopWidth; 179 | b.position = m.position === "fixed" ? "fixed" : "absolute"; 180 | element.parentNode.appendChild(container); 181 | } 182 | return container; 183 | }, 184 | _setMatrix = (m, a, b, c, d, e, f) => { 185 | m.a = a; 186 | m.b = b; 187 | m.c = c; 188 | m.d = d; 189 | m.e = e; 190 | m.f = f; 191 | return m; 192 | }; 193 | 194 | export class Matrix2D { 195 | constructor(a=1, b=0, c=0, d=1, e=0, f=0) { 196 | _setMatrix(this, a, b, c, d, e, f); 197 | } 198 | 199 | inverse() { 200 | let {a, b, c, d, e, f} = this, 201 | determinant = (a * d - b * c) || 1e-10; 202 | return _setMatrix( 203 | this, 204 | d / determinant, 205 | -b / determinant, 206 | -c / determinant, 207 | a / determinant, 208 | (c * f - d * e) / determinant, 209 | -(a * f - b * e) / determinant 210 | ); 211 | } 212 | 213 | multiply(matrix) { 214 | let {a, b, c, d, e, f} = this, 215 | a2 = matrix.a, 216 | b2 = matrix.c, 217 | c2 = matrix.b, 218 | d2 = matrix.d, 219 | e2 = matrix.e, 220 | f2 = matrix.f; 221 | return _setMatrix(this, 222 | a2 * a + c2 * c, 223 | a2 * b + c2 * d, 224 | b2 * a + d2 * c, 225 | b2 * b + d2 * d, 226 | e + e2 * a + f2 * c, 227 | f + e2 * b + f2 * d); 228 | } 229 | 230 | clone() { 231 | return new Matrix2D(this.a, this.b, this.c, this.d, this.e, this.f); 232 | } 233 | 234 | equals(matrix) { 235 | let {a, b, c, d, e, f} = this; 236 | return (a === matrix.a && b === matrix.b && c === matrix.c && d === matrix.d && e === matrix.e && f === matrix.f); 237 | } 238 | 239 | apply(point, decoratee={}) { 240 | let {x, y} = point, 241 | {a, b, c, d, e, f} = this; 242 | decoratee.x = (x * a + y * c + e) || 0; 243 | decoratee.y = (x * b + y * d + f) || 0; 244 | return decoratee; 245 | } 246 | 247 | } 248 | 249 | //feed in an element and it'll return a 2D matrix (optionally inverted) so that you can translate between coordinate spaces. 250 | // Inverting lets you translate a global point into a local coordinate space. No inverting lets you go the other way. 251 | // We needed this to work around various browser bugs, like Firefox doesn't accurately report getScreenCTM() when there 252 | // are transforms applied to ancestor elements. 253 | // The matrix math to convert any x/y coordinate is as follows, which is wrapped in a convenient apply() method of Matrix2D above: 254 | // tx = m.a * x + m.c * y + m.e 255 | // ty = m.b * x + m.d * y + m.f 256 | export function getGlobalMatrix(element, inverse, adjustGOffset) { // adjustGOffset is typically used only when grabbing an element's PARENT's global matrix, and it ignores the x/y offset of any SVG elements because they behave in a special way. 257 | if (!element || !element.parentNode || (_doc || _setDoc(element)).documentElement === element) { 258 | return new Matrix2D(); 259 | } 260 | let zeroScales = _forceNonZeroScale(element.parentNode), 261 | svg = _svgOwner(element), 262 | temps = svg ? _svgTemps : _divTemps, 263 | container = _placeSiblings(element, adjustGOffset), 264 | b1 = temps[0].getBoundingClientRect(), 265 | b2 = temps[1].getBoundingClientRect(), 266 | b3 = temps[2].getBoundingClientRect(), 267 | parent = container.parentNode, 268 | isFixed = _isFixed(element), 269 | m = new Matrix2D( 270 | (b2.left - b1.left) / 100, 271 | (b2.top - b1.top) / 100, 272 | (b3.left - b1.left) / 100, 273 | (b3.top - b1.top) / 100, 274 | b1.left + (isFixed ? 0 : _getDocScrollLeft()), 275 | b1.top + (isFixed ? 0 : _getDocScrollTop()) 276 | ); 277 | parent.removeChild(container); 278 | if (zeroScales) { 279 | b1 = zeroScales.length; 280 | while (b1--) { 281 | b2 = zeroScales[b1]; 282 | b2.scaleX = b2.scaleY = 0; 283 | b2.renderTransform(1, b2); 284 | } 285 | } 286 | return inverse ? m.inverse() : m; 287 | } 288 | 289 | // export function getMatrix(element) { 290 | // _doc || _setDoc(element); 291 | // let m = (_win.getComputedStyle(element)[_transformProp] + "").substr(7).match(/[-.]*\d+[.e\-+]*\d*[e\-\+]*\d*/g), 292 | // is2D = m && m.length === 6; 293 | // return !m || m.length < 6 ? new Matrix2D() : new Matrix2D(+m[0], +m[1], +m[is2D ? 2 : 4], +m[is2D ? 3 : 5], +m[is2D ? 4 : 12], +m[is2D ? 5 : 13]); 294 | // } -------------------------------------------------------------------------------- /otherLibs/gsap/PixiPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * PixiPlugin 3.5.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _win, _splitColor, _coreInitted, _PIXI, PropTween, _getSetter, 13 | _windowExists = () => typeof(window) !== "undefined", 14 | _getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap), 15 | _isFunction = value => typeof(value) === "function", 16 | _warn = message => console.warn(message), 17 | _idMatrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0], 18 | _lumR = 0.212671, 19 | _lumG = 0.715160, 20 | _lumB = 0.072169, 21 | _applyMatrix = (m, m2) => { 22 | let temp = [], 23 | i = 0, 24 | z = 0, 25 | y, x; 26 | for (y = 0; y < 4; y++) { 27 | for (x = 0; x < 5; x++) { 28 | z = (x === 4) ? m[i + 4] : 0; 29 | temp[i + x] = m[i] * m2[x] + m[i+1] * m2[x + 5] + m[i+2] * m2[x + 10] + m[i+3] * m2[x + 15] + z; 30 | } 31 | i += 5; 32 | } 33 | return temp; 34 | }, 35 | _setSaturation = (m, n) => { 36 | let inv = 1 - n, 37 | r = inv * _lumR, 38 | g = inv * _lumG, 39 | b = inv * _lumB; 40 | return _applyMatrix([r + n, g, b, 0, 0, r, g + n, b, 0, 0, r, g, b + n, 0, 0, 0, 0, 0, 1, 0], m); 41 | }, 42 | _colorize = (m, color, amount) => { 43 | let c = _splitColor(color), 44 | r = c[0] / 255, 45 | g = c[1] / 255, 46 | b = c[2] / 255, 47 | inv = 1 - amount; 48 | return _applyMatrix([inv + amount * r * _lumR, amount * r * _lumG, amount * r * _lumB, 0, 0, amount * g * _lumR, inv + amount * g * _lumG, amount * g * _lumB, 0, 0, amount * b * _lumR, amount * b * _lumG, inv + amount * b * _lumB, 0, 0, 0, 0, 0, 1, 0], m); 49 | }, 50 | _setHue = (m, n) => { 51 | n *= Math.PI / 180; 52 | let c = Math.cos(n), 53 | s = Math.sin(n); 54 | return _applyMatrix([(_lumR + (c * (1 - _lumR))) + (s * (-_lumR)), (_lumG + (c * (-_lumG))) + (s * (-_lumG)), (_lumB + (c * (-_lumB))) + (s * (1 - _lumB)), 0, 0, (_lumR + (c * (-_lumR))) + (s * 0.143), (_lumG + (c * (1 - _lumG))) + (s * 0.14), (_lumB + (c * (-_lumB))) + (s * -0.283), 0, 0, (_lumR + (c * (-_lumR))) + (s * (-(1 - _lumR))), (_lumG + (c * (-_lumG))) + (s * _lumG), (_lumB + (c * (1 - _lumB))) + (s * _lumB), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1], m); 55 | }, 56 | _setContrast = (m, n) => _applyMatrix([n,0,0,0,0.5 * (1 - n), 0,n,0,0,0.5 * (1 - n), 0,0,n,0,0.5 * (1 - n), 0,0,0,1,0], m), 57 | _getFilter = (target, type) => { 58 | let filterClass = _PIXI.filters[type], 59 | filters = target.filters || [], 60 | i = filters.length, 61 | filter; 62 | if (!filterClass) { 63 | _warn(type + " not found. PixiPlugin.registerPIXI(PIXI)"); 64 | } 65 | while (--i > -1) { 66 | if (filters[i] instanceof filterClass) { 67 | return filters[i]; 68 | } 69 | } 70 | filter = new filterClass(); 71 | if (type === "BlurFilter") { 72 | filter.blur = 0; 73 | } 74 | filters.push(filter); 75 | target.filters = filters; 76 | return filter; 77 | }, 78 | _addColorMatrixFilterCacheTween = (p, plugin, cache, vars) => { //we cache the ColorMatrixFilter components in a _gsColorMatrixFilter object attached to the target object so that it's easy to grab the current value at any time. 79 | plugin.add(cache, p, cache[p], vars[p]); 80 | plugin._props.push(p); 81 | }, 82 | _applyBrightnessToMatrix = (brightness, matrix) => { 83 | let temp = new _PIXI.filters.ColorMatrixFilter(); 84 | temp.matrix = matrix; 85 | temp.brightness(brightness, true); 86 | return temp.matrix; 87 | }, 88 | _copy = obj => { 89 | let copy = {}, 90 | p; 91 | for (p in obj) { 92 | copy[p] = obj[p]; 93 | } 94 | return copy; 95 | }, 96 | _CMFdefaults = {contrast:1, saturation:1, colorizeAmount:0, colorize:"rgb(255,255,255)", hue:0, brightness:1}, 97 | _parseColorMatrixFilter = (target, v, pg) => { 98 | let filter = _getFilter(target, "ColorMatrixFilter"), 99 | cache = target._gsColorMatrixFilter = target._gsColorMatrixFilter || _copy(_CMFdefaults), 100 | combine = v.combineCMF && !("colorMatrixFilter" in v && !v.colorMatrixFilter), 101 | i, matrix, startMatrix; 102 | startMatrix = filter.matrix; 103 | if (v.resolution) { 104 | filter.resolution = v.resolution; 105 | } 106 | if (v.matrix && v.matrix.length === startMatrix.length) { 107 | matrix = v.matrix; 108 | if (cache.contrast !== 1) { 109 | _addColorMatrixFilterCacheTween("contrast", pg, cache, _CMFdefaults); 110 | } 111 | if (cache.hue) { 112 | _addColorMatrixFilterCacheTween("hue", pg, cache, _CMFdefaults); 113 | } 114 | if (cache.brightness !== 1) { 115 | _addColorMatrixFilterCacheTween("brightness", pg, cache, _CMFdefaults); 116 | } 117 | if (cache.colorizeAmount) { 118 | _addColorMatrixFilterCacheTween("colorize", pg, cache, _CMFdefaults); 119 | _addColorMatrixFilterCacheTween("colorizeAmount", pg, cache, _CMFdefaults); 120 | } 121 | if (cache.saturation !== 1) { 122 | _addColorMatrixFilterCacheTween("saturation", pg, cache, _CMFdefaults); 123 | } 124 | 125 | } else { 126 | matrix = _idMatrix.slice(); 127 | if (v.contrast != null) { 128 | matrix = _setContrast(matrix, +v.contrast); 129 | _addColorMatrixFilterCacheTween("contrast", pg, cache, v); 130 | } else if (cache.contrast !== 1) { 131 | if (combine) { 132 | matrix = _setContrast(matrix, cache.contrast); 133 | } else { 134 | _addColorMatrixFilterCacheTween("contrast", pg, cache, _CMFdefaults); 135 | } 136 | } 137 | if (v.hue != null) { 138 | matrix = _setHue(matrix, +v.hue); 139 | _addColorMatrixFilterCacheTween("hue", pg, cache, v); 140 | } else if (cache.hue) { 141 | if (combine) { 142 | matrix = _setHue(matrix, cache.hue); 143 | } else { 144 | _addColorMatrixFilterCacheTween("hue", pg, cache, _CMFdefaults); 145 | } 146 | } 147 | if (v.brightness != null) { 148 | matrix = _applyBrightnessToMatrix(+v.brightness, matrix); 149 | _addColorMatrixFilterCacheTween("brightness", pg, cache, v); 150 | } else if (cache.brightness !== 1) { 151 | if (combine) { 152 | matrix = _applyBrightnessToMatrix(cache.brightness, matrix); 153 | } else { 154 | _addColorMatrixFilterCacheTween("brightness", pg, cache, _CMFdefaults); 155 | } 156 | } 157 | if (v.colorize != null) { 158 | v.colorizeAmount = ("colorizeAmount" in v) ? +v.colorizeAmount : 1; 159 | matrix = _colorize(matrix, v.colorize, v.colorizeAmount); 160 | _addColorMatrixFilterCacheTween("colorize", pg, cache, v); 161 | _addColorMatrixFilterCacheTween("colorizeAmount", pg, cache, v); 162 | } else if (cache.colorizeAmount) { 163 | if (combine) { 164 | matrix = _colorize(matrix, cache.colorize, cache.colorizeAmount); 165 | } else { 166 | _addColorMatrixFilterCacheTween("colorize", pg, cache, _CMFdefaults); 167 | _addColorMatrixFilterCacheTween("colorizeAmount", pg, cache, _CMFdefaults); 168 | } 169 | } 170 | if (v.saturation != null) { 171 | matrix = _setSaturation(matrix, +v.saturation); 172 | _addColorMatrixFilterCacheTween("saturation", pg, cache, v); 173 | } else if (cache.saturation !== 1) { 174 | if (combine) { 175 | matrix = _setSaturation(matrix, cache.saturation); 176 | } else { 177 | _addColorMatrixFilterCacheTween("saturation", pg, cache, _CMFdefaults); 178 | } 179 | } 180 | } 181 | i = matrix.length; 182 | while (--i > -1) { 183 | if (matrix[i] !== startMatrix[i]) { 184 | pg.add(startMatrix, i, startMatrix[i], matrix[i], "colorMatrixFilter"); 185 | } 186 | } 187 | pg._props.push("colorMatrixFilter"); 188 | }, 189 | _renderColor = (ratio, {t, p, color, set}) => { 190 | set(t, p, color[0] << 16 | color[1] << 8 | color[2]); 191 | }, 192 | _renderDirtyCache = (ratio, {g}) => { 193 | if (g) { //in order for PixiJS to actually redraw GraphicsData, we've gotta increment the "dirty" and "clearDirty" values. If we don't do this, the values will be tween properly, but not rendered. 194 | g.dirty++; 195 | g.clearDirty++; 196 | } 197 | }, 198 | _renderAutoAlpha = (ratio, data) => { 199 | data.t.visible = !!data.t.alpha; 200 | }, 201 | _addColorTween = (target, p, value, plugin) => { 202 | let currentValue = target[p], 203 | startColor = _splitColor(_isFunction(currentValue) ? target[ ((p.indexOf("set") || !_isFunction(target["get" + p.substr(3)])) ? p : "get" + p.substr(3)) ]() : currentValue), 204 | endColor = _splitColor(value); 205 | plugin._pt = new PropTween(plugin._pt, target, p, 0, 0, _renderColor, {t:target, p:p, color:startColor, set:_getSetter(target, p)}); 206 | plugin.add(startColor, 0, startColor[0], endColor[0]); 207 | plugin.add(startColor, 1, startColor[1], endColor[1]); 208 | plugin.add(startColor, 2, startColor[2], endColor[2]); 209 | }, 210 | 211 | _colorProps = {tint:1, lineColor:1, fillColor:1}, 212 | _xyContexts = "position,scale,skew,pivot,anchor,tilePosition,tileScale".split(","), 213 | _contexts = {x:"position", y:"position", tileX:"tilePosition", tileY:"tilePosition"}, 214 | _colorMatrixFilterProps = {colorMatrixFilter:1, saturation:1, contrast:1, hue:1, colorize:1, colorizeAmount:1, brightness:1, combineCMF:1}, 215 | _DEG2RAD = Math.PI / 180, 216 | _isString = value => typeof(value) === "string", 217 | _degreesToRadians = value => (_isString(value) && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD, 218 | _renderPropWithEnd = (ratio, data) => data.set(data.t, data.p, ratio === 1 ? data.e : (Math.round((data.s + data.c * ratio) * 100000) / 100000), data), 219 | _addRotationalPropTween = (plugin, target, property, startNum, endValue, radians) => { 220 | let cap = 360 * (radians ? _DEG2RAD : 1), 221 | isString = _isString(endValue), 222 | relative = (isString && endValue.charAt(1) === "=") ? +(endValue.charAt(0) + "1") : 0, 223 | endNum = parseFloat(relative ? endValue.substr(2) : endValue) * (radians ? _DEG2RAD : 1), 224 | change = relative ? endNum * relative : endNum - startNum, 225 | finalValue = startNum + change, 226 | direction, pt; 227 | if (isString) { 228 | direction = endValue.split("_")[1]; 229 | if (direction === "short") { 230 | change %= cap; 231 | if (change !== change % (cap / 2)) { 232 | change += (change < 0) ? cap : -cap; 233 | } 234 | } 235 | if (direction === "cw" && change < 0) { 236 | change = ((change + cap * 1e10) % cap) - ~~(change / cap) * cap; 237 | } else if (direction === "ccw" && change > 0) { 238 | change = ((change - cap * 1e10) % cap) - ~~(change / cap) * cap; 239 | } 240 | } 241 | plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd); 242 | pt.e = finalValue; 243 | return pt; 244 | }, 245 | _initCore = () => { 246 | if (_windowExists()) { 247 | _win = window; 248 | gsap = _coreInitted = _getGSAP(); 249 | _PIXI = _PIXI || _win.PIXI; 250 | _splitColor = color => gsap.utils.splitColor((color + "").substr(0,2) === "0x" ? "#" + color.substr(2) : color); // some colors in PIXI are reported as "0xFF4421" instead of "#FF4421". 251 | } 252 | }, i, p; 253 | 254 | //context setup... 255 | for (i = 0; i < _xyContexts.length; i++) { 256 | p = _xyContexts[i]; 257 | _contexts[p + "X"] = p; 258 | _contexts[p + "Y"] = p; 259 | } 260 | 261 | 262 | export const PixiPlugin = { 263 | version:"3.5.1", 264 | name:"pixi", 265 | register(core, Plugin, propTween) { 266 | gsap = core; 267 | PropTween = propTween; 268 | _getSetter = Plugin.getSetter; 269 | _initCore(); 270 | }, 271 | registerPIXI(pixi) { 272 | _PIXI = pixi; 273 | }, 274 | init(target, values, tween, index, targets) { 275 | if (!_PIXI) { 276 | _initCore(); 277 | } 278 | if (!target instanceof _PIXI.DisplayObject) { 279 | return false; 280 | } 281 | let isV4 = _PIXI.VERSION.charAt(0) === "4", 282 | context, axis, value, colorMatrix, filter, p, padding, i, data; 283 | for (p in values) { 284 | context = _contexts[p]; 285 | value = values[p]; 286 | if (context) { 287 | axis = ~p.charAt(p.length-1).toLowerCase().indexOf("x") ? "x" : "y"; 288 | this.add(target[context], axis, target[context][axis], (context === "skew") ? _degreesToRadians(value) : value); 289 | } else if (p === "scale" || p === "anchor" || p === "pivot" || p === "tileScale") { 290 | this.add(target[p], "x", target[p].x, value); 291 | this.add(target[p], "y", target[p].y, value); 292 | } else if (p === "rotation" || p === "angle") { //PIXI expects rotation in radians, but as a convenience we let folks define it in degrees and we do the conversion. 293 | _addRotationalPropTween(this, target, p, target[p], value, p === "rotation"); 294 | } else if (_colorMatrixFilterProps[p]) { 295 | if (!colorMatrix) { 296 | _parseColorMatrixFilter(target, values.colorMatrixFilter || values, this); 297 | colorMatrix = true; 298 | } 299 | } else if (p === "blur" || p === "blurX" || p === "blurY" || p === "blurPadding") { 300 | filter = _getFilter(target, "BlurFilter"); 301 | this.add(filter, p, filter[p], value); 302 | if (values.blurPadding !== 0) { 303 | padding = values.blurPadding || Math.max(filter[p], value) * 2; 304 | i = target.filters.length; 305 | while (--i > -1) { 306 | target.filters[i].padding = Math.max(target.filters[i].padding, padding); //if we don't expand the padding on all the filters, it can look clipped. 307 | } 308 | } 309 | } else if (_colorProps[p]) { 310 | if ((p === "lineColor" || p === "fillColor") && target instanceof _PIXI.Graphics) { 311 | data = (target.geometry || target).graphicsData; //"geometry" was introduced in PIXI version 5 312 | this._pt = new PropTween(this._pt, target, p, 0, 0, _renderDirtyCache, {g: target.geometry || target}); 313 | i = data.length; 314 | while (--i > -1) { 315 | _addColorTween(isV4 ? data[i] : data[i][p.substr(0, 4) + "Style"], isV4 ? p : "color", value, this); 316 | } 317 | } else { 318 | _addColorTween(target, p, value, this); 319 | } 320 | } else if (p === "autoAlpha") { 321 | this._pt = new PropTween(this._pt, target, "visible", 0, 0, _renderAutoAlpha); 322 | this.add(target, "alpha", target.alpha, value); 323 | this._props.push("alpha", "visible"); 324 | } else if (p !== "resolution") { 325 | this.add(target, p, "get", value); 326 | } 327 | this._props.push(p); 328 | } 329 | } 330 | }; 331 | 332 | _getGSAP() && gsap.registerPlugin(PixiPlugin); 333 | 334 | export { PixiPlugin as default }; -------------------------------------------------------------------------------- /otherLibs/gsap/utils/paths.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * paths 3.5.1 3 | * https://greensock.com 4 | * 5 | * Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let _svgPathExp = /[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, 13 | _numbersExp = /(?:(-)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, 14 | _scientific = /[\+\-]?\d*\.?\d+e[\+\-]?\d+/ig, 15 | _selectorExp = /(^[#\.][a-z]|[a-y][a-z])/i, 16 | _DEG2RAD = Math.PI / 180, 17 | _RAD2DEG = 180 / Math.PI, 18 | _sin = Math.sin, 19 | _cos = Math.cos, 20 | _abs = Math.abs, 21 | _sqrt = Math.sqrt, 22 | _atan2 = Math.atan2, 23 | _largeNum = 1e8, 24 | _isString = value => typeof(value) === "string", 25 | _isNumber = value => typeof(value) === "number", 26 | _isUndefined = value => typeof(value) === "undefined", 27 | _temp = {}, 28 | _temp2 = {}, 29 | _roundingNum = 1e5, 30 | _wrapProgress = progress => (Math.round((progress + _largeNum) % 1 * _roundingNum) / _roundingNum) || ((progress < 0) ? 0 : 1), //if progress lands on 1, the % will make it 0 which is why we || 1, but not if it's negative because it makes more sense for motion to end at 0 in that case. 31 | _round = value => (Math.round(value * _roundingNum) / _roundingNum) || 0, 32 | _splitSegment = (rawPath, segIndex, i, t) => { 33 | let segment = rawPath[segIndex], 34 | shift = t === 1 ? 6 : subdivideSegment(segment, i, t); 35 | if (shift && shift + i + 2 < segment.length) { 36 | rawPath.splice(segIndex, 0, segment.slice(0, i + shift + 2)); 37 | segment.splice(0, i + shift); 38 | return 1; 39 | } 40 | }, 41 | _reverseRawPath = (rawPath, skipOuter) => { 42 | let i = rawPath.length; 43 | if (!skipOuter) { 44 | rawPath.reverse(); 45 | } 46 | while (i--) { 47 | if (!rawPath[i].reversed) { 48 | reverseSegment(rawPath[i]); 49 | } 50 | } 51 | }, 52 | _copyMetaData = (source, copy) => { 53 | copy.totalLength = source.totalLength; 54 | if (source.samples) { //segment 55 | copy.samples = source.samples.slice(0); 56 | copy.lookup = source.lookup.slice(0); 57 | copy.minLength = source.minLength; 58 | copy.resolution = source.resolution; 59 | } else { //rawPath 60 | copy.totalPoints = source.totalPoints; 61 | } 62 | return copy; 63 | }, 64 | //pushes a new segment into a rawPath, but if its starting values match the ending values of the last segment, it'll merge it into that same segment (to reduce the number of segments) 65 | _appendOrMerge = (rawPath, segment) => { 66 | let index = rawPath.length, 67 | prevSeg = rawPath[index - 1] || [], 68 | l = prevSeg.length; 69 | if (segment[0] === prevSeg[l-2] && segment[1] === prevSeg[l-1]) { 70 | segment = prevSeg.concat(segment.slice(2)); 71 | index--; 72 | } 73 | rawPath[index] = segment; 74 | }, 75 | _bestDistance; 76 | 77 | /* TERMINOLOGY 78 | - RawPath - an array of arrays, one for each Segment. A single RawPath could have multiple "M" commands, defining Segments (paths aren't always connected). 79 | - Segment - an array containing a sequence of Cubic Bezier coordinates in alternating x, y, x, y format. Starting anchor, then control point 1, control point 2, and ending anchor, then the next control point 1, control point 2, anchor, etc. Uses less memory than an array with a bunch of {x, y} points. 80 | - Bezier - a single cubic Bezier with a starting anchor, two control points, and an ending anchor. 81 | - the variable "t" is typically the position along an individual Bezier path (time) and it's NOT linear, meaning it could accelerate/decelerate based on the control points whereas the "p" or "progress" value is linearly mapped to the whole path, so it shouldn't really accelerate/decelerate based on control points. So a progress of 0.2 would be almost exactly 20% along the path. "t" is ONLY in an individual Bezier piece. 82 | */ 83 | 84 | //accepts basic selector text, a path instance, a RawPath instance, or a Segment and returns a RawPath (makes it easy to homogenize things). If an element or selector text is passed in, it'll also cache the value so that if it's queried again, it'll just take the path data from there instead of parsing it all over again (as long as the path data itself hasn't changed - it'll check). 85 | export function getRawPath(value) { 86 | value = (_isString(value) && _selectorExp.test(value)) ? document.querySelector(value) || value : value; 87 | let e = value.getAttribute ? value : 0, 88 | rawPath; 89 | if (e && (value = value.getAttribute("d"))) { 90 | //implements caching 91 | if (!e._gsPath) { 92 | e._gsPath = {}; 93 | } 94 | rawPath = e._gsPath[value]; 95 | return (rawPath && !rawPath._dirty) ? rawPath : (e._gsPath[value] = stringToRawPath(value)); 96 | } 97 | return !value ? console.warn("Expecting a element or an SVG path data string") : _isString(value) ? stringToRawPath(value) : (_isNumber(value[0])) ? [value] : value; 98 | } 99 | 100 | //copies a RawPath WITHOUT the length meta data (for speed) 101 | export function copyRawPath(rawPath) { 102 | let a = [], 103 | i = 0; 104 | for (; i < rawPath.length; i++) { 105 | a[i] = _copyMetaData(rawPath[i], rawPath[i].slice(0)); 106 | } 107 | return _copyMetaData(rawPath, a); 108 | } 109 | 110 | export function reverseSegment(segment) { 111 | let i = 0, 112 | y; 113 | segment.reverse(); //this will invert the order y, x, y, x so we must flip it back. 114 | for (; i < segment.length; i += 2) { 115 | y = segment[i]; 116 | segment[i] = segment[i+1]; 117 | segment[i+1] = y; 118 | } 119 | segment.reversed = !segment.reversed; 120 | } 121 | 122 | 123 | 124 | let _createPath = (e, ignore) => { 125 | let path = document.createElementNS("http://www.w3.org/2000/svg", "path"), 126 | attr = [].slice.call(e.attributes), 127 | i = attr.length, 128 | name; 129 | ignore = "," + ignore + ","; 130 | while (--i > -1) { 131 | name = attr[i].nodeName.toLowerCase(); //in Microsoft Edge, if you don't set the attribute with a lowercase name, it doesn't render correctly! Super weird. 132 | if (ignore.indexOf("," + name + ",") < 0) { 133 | path.setAttributeNS(null, name, attr[i].nodeValue); 134 | } 135 | } 136 | return path; 137 | }, 138 | _typeAttrs = { 139 | rect:"rx,ry,x,y,width,height", 140 | circle:"r,cx,cy", 141 | ellipse:"rx,ry,cx,cy", 142 | line:"x1,x2,y1,y2" 143 | }, 144 | _attrToObj = (e, attrs) => { 145 | let props = attrs ? attrs.split(",") : [], 146 | obj = {}, 147 | i = props.length; 148 | while (--i > -1) { 149 | obj[props[i]] = +e.getAttribute(props[i]) || 0; 150 | } 151 | return obj; 152 | }; 153 | 154 | //converts an SVG shape like , , , , , etc. to a , swapping it in and copying the attributes to match. 155 | export function convertToPath(element, swap) { 156 | let type = element.tagName.toLowerCase(), 157 | circ = 0.552284749831, 158 | data, x, y, r, ry, path, rcirc, rycirc, points, w, h, x2, x3, x4, x5, x6, y2, y3, y4, y5, y6, attr; 159 | if (type === "path" || !element.getBBox) { 160 | return element; 161 | } 162 | path = _createPath(element, "x,y,width,height,cx,cy,rx,ry,r,x1,x2,y1,y2,points"); 163 | attr = _attrToObj(element, _typeAttrs[type]); 164 | if (type === "rect") { 165 | r = attr.rx; 166 | ry = attr.ry || r; 167 | x = attr.x; 168 | y = attr.y; 169 | w = attr.width - r * 2; 170 | h = attr.height - ry * 2; 171 | if (r || ry) { //if there are rounded corners, render cubic beziers 172 | x2 = x + r * (1 - circ); 173 | x3 = x + r; 174 | x4 = x3 + w; 175 | x5 = x4 + r * circ; 176 | x6 = x4 + r; 177 | y2 = y + ry * (1 - circ); 178 | y3 = y + ry; 179 | y4 = y3 + h; 180 | y5 = y4 + ry * circ; 181 | y6 = y4 + ry; 182 | data = "M" + x6 + "," + y3 + " V" + y4 + " C" + [x6, y5, x5, y6, x4, y6, x4 - (x4 - x3) / 3, y6, x3 + (x4 - x3) / 3, y6, x3, y6, x2, y6, x, y5, x, y4, x, y4 - (y4 - y3) / 3, x, y3 + (y4 - y3) / 3, x, y3, x, y2, x2, y, x3, y, x3 + (x4 - x3) / 3, y, x4 - (x4 - x3) / 3, y, x4, y, x5, y, x6, y2, x6, y3].join(",") + "z"; 183 | } else { 184 | data = "M" + (x + w) + "," + y + " v" + h + " h" + (-w) + " v" + (-h) + " h" + w + "z"; 185 | } 186 | 187 | } else if (type === "circle" || type === "ellipse") { 188 | if (type === "circle") { 189 | r = ry = attr.r; 190 | rycirc = r * circ; 191 | } else { 192 | r = attr.rx; 193 | ry = attr.ry; 194 | rycirc = ry * circ; 195 | } 196 | x = attr.cx; 197 | y = attr.cy; 198 | rcirc = r * circ; 199 | data = "M" + (x+r) + "," + y + " C" + [x+r, y + rycirc, x + rcirc, y + ry, x, y + ry, x - rcirc, y + ry, x - r, y + rycirc, x - r, y, x - r, y - rycirc, x - rcirc, y - ry, x, y - ry, x + rcirc, y - ry, x + r, y - rycirc, x + r, y].join(",") + "z"; 200 | } else if (type === "line") { 201 | data = "M" + attr.x1 + "," + attr.y1 + " L" + attr.x2 + "," + attr.y2; //previously, we just converted to "Mx,y Lx,y" but Safari has bugs that cause that not to render properly when using a stroke-dasharray that's not fully visible! Using a cubic bezier fixes that issue. 202 | } else if (type === "polyline" || type === "polygon") { 203 | points = (element.getAttribute("points") + "").match(_numbersExp) || []; 204 | x = points.shift(); 205 | y = points.shift(); 206 | data = "M" + x + "," + y + " L" + points.join(","); 207 | if (type === "polygon") { 208 | data += "," + x + "," + y + "z"; 209 | } 210 | } 211 | path.setAttribute("d", rawPathToString(path._gsRawPath = stringToRawPath(data))); 212 | if (swap && element.parentNode) { 213 | element.parentNode.insertBefore(path, element); 214 | element.parentNode.removeChild(element); 215 | } 216 | return path; 217 | } 218 | 219 | 220 | 221 | //returns the rotation (in degrees) at a particular progress on a rawPath (the slope of the tangent) 222 | export function getRotationAtProgress(rawPath, progress) { 223 | let d = getProgressData(rawPath, progress >= 1 ? 1 - 1e-9 : progress ? progress : 1e-9); 224 | return getRotationAtBezierT(d.segment, d.i, d.t); 225 | } 226 | 227 | function getRotationAtBezierT(segment, i, t) { 228 | let a = segment[i], 229 | b = segment[i+2], 230 | c = segment[i+4], 231 | x; 232 | a += (b - a) * t; 233 | b += (c - b) * t; 234 | a += (b - a) * t; 235 | x = b + ((c + (segment[i+6] - c) * t) - b) * t - a; 236 | a = segment[i+1]; 237 | b = segment[i+3]; 238 | c = segment[i+5]; 239 | a += (b - a) * t; 240 | b += (c - b) * t; 241 | a += (b - a) * t; 242 | return _round(_atan2(b + ((c + (segment[i+7] - c) * t) - b) * t - a, x) * _RAD2DEG); 243 | } 244 | 245 | export function sliceRawPath(rawPath, start, end) { 246 | if (_isUndefined(end)) { 247 | end = 1; 248 | } 249 | start = start || 0; 250 | let reverse = start > end, 251 | loops = Math.max(0, ~~(_abs(end - start) - 1e-8)); 252 | if (reverse) { 253 | reverse = end; 254 | end = start; 255 | start = reverse; 256 | reverse = 1; 257 | loops -= loops ? 1 : 0; 258 | } 259 | if (start < 0 || end < 0) { 260 | let offset = ~~Math.min(start, end) + 1; 261 | start += offset; 262 | end += offset; 263 | } 264 | let path = copyRawPath(rawPath.totalLength ? rawPath : cacheRawPathMeasurements(rawPath)), 265 | wrap = (end > 1), 266 | s = getProgressData(path, start, _temp, true), 267 | e = getProgressData(path, end, _temp2), 268 | eSeg = e.segment, 269 | sSeg = s.segment, 270 | eSegIndex = e.segIndex, 271 | sSegIndex = s.segIndex, 272 | ei = e.i, 273 | si = s.i, 274 | sameSegment = (sSegIndex === eSegIndex), 275 | sameBezier = (ei === si && sameSegment), 276 | invertedOrder = ((sameSegment && si > ei) || (sameBezier && s.t > e.t)), 277 | sShift, eShift, i, copy, totalSegments, l, j; 278 | if (wrap || loops) { 279 | if (_splitSegment(path, sSegIndex, si, s.t)) { 280 | sShift = 1; 281 | sSegIndex++; 282 | if (sameBezier) { 283 | if (invertedOrder) { 284 | e.t /= s.t; 285 | } else { 286 | e.t = (e.t - s.t) / (1 - s.t); 287 | eSegIndex++; 288 | ei = 0; 289 | } 290 | } else if (sSegIndex <= eSegIndex + 1 && !invertedOrder) { 291 | eSegIndex++; 292 | if (sameSegment) { 293 | ei -= si; 294 | } 295 | } 296 | } 297 | if (!e.t) { 298 | eSegIndex--; 299 | reverse && sSegIndex--; 300 | } else if (_splitSegment(path, eSegIndex, ei, e.t)) { 301 | invertedOrder && sShift && sSegIndex++; 302 | reverse && eSegIndex++; 303 | } 304 | copy = []; 305 | totalSegments = path.length; 306 | l = 1 + totalSegments * loops; 307 | j = sSegIndex; 308 | if (reverse) { 309 | eSegIndex = (eSegIndex || totalSegments) - 1; 310 | l += (totalSegments - eSegIndex + sSegIndex) % totalSegments; 311 | for (i = 0; i < l; i++) { 312 | _appendOrMerge(copy, path[j]); 313 | j = (j || totalSegments) - 1; 314 | } 315 | } else { 316 | l += ((totalSegments - sSegIndex) + eSegIndex) % totalSegments; 317 | for (i = 0; i < l; i++) { 318 | _appendOrMerge(copy, path[j++ % totalSegments]); 319 | } 320 | } 321 | path = copy; 322 | } else { 323 | eShift = e.t === 1 ? 6 : subdivideSegment(eSeg, ei, e.t); 324 | if (start !== end) { 325 | sShift = subdivideSegment(sSeg, si, sameBezier ? s.t / e.t : s.t); 326 | if (sameSegment) { 327 | eShift += sShift; 328 | } 329 | eSeg.splice(ei + eShift + 2); 330 | if (sShift || si) { 331 | sSeg.splice(0, si + sShift); 332 | } 333 | i = path.length; 334 | while (i--) { 335 | //chop off any extra segments 336 | if (i < sSegIndex || i > eSegIndex) { 337 | path.splice(i, 1); 338 | } 339 | } 340 | } else { 341 | eSeg.angle = getRotationAtBezierT(eSeg, ei + eShift, 0); //record the value before we chop because it'll be impossible to determine the angle after its length is 0! 342 | ei += eShift; 343 | s = eSeg[ei]; 344 | e = eSeg[ei+1]; 345 | eSeg.length = eSeg.totalLength = 0; 346 | eSeg.totalPoints = path.totalPoints = 8; 347 | eSeg.push(s, e, s, e, s, e, s, e); 348 | } 349 | } 350 | reverse && _reverseRawPath(path, wrap || loops); 351 | path.totalLength = 0; 352 | return path; 353 | } 354 | 355 | //measures a Segment according to its resolution (so if segment.resolution is 6, for example, it'll take 6 samples equally across each Bezier) and create/populate a "samples" Array that has the length up to each of those sample points (always increasing from the start) as well as a "lookup" array that's broken up according to the smallest distance between 2 samples. This gives us a very fast way of looking up a progress position rather than looping through all the points/Beziers. You can optionally have it only measure a subset, starting at startIndex and going for a specific number of beziers (remember, there are 3 x/y pairs each, for a total of 6 elements for each Bezier). It will also populate a "totalLength" property, but that's not generally super accurate because by default it'll only take 6 samples per Bezier. But for performance reasons, it's perfectly adequate for measuring progress values along the path. If you need a more accurate totalLength, either increase the resolution or use the more advanced bezierToPoints() method which keeps adding points until they don't deviate by more than a certain precision value. 356 | function measureSegment(segment, startIndex, bezierQty) { 357 | startIndex = startIndex || 0; 358 | if (!segment.samples) { 359 | segment.samples = []; 360 | segment.lookup = []; 361 | } 362 | let resolution = ~~segment.resolution || 12, 363 | inc = 1 / resolution, 364 | endIndex = bezierQty ? startIndex + bezierQty * 6 + 1 : segment.length, 365 | x1 = segment[startIndex], 366 | y1 = segment[startIndex + 1], 367 | samplesIndex = startIndex ? (startIndex / 6) * resolution : 0, 368 | samples = segment.samples, 369 | lookup = segment.lookup, 370 | min = (startIndex ? segment.minLength : _largeNum) || _largeNum, 371 | prevLength = samples[samplesIndex + bezierQty * resolution - 1], 372 | length = startIndex ? samples[samplesIndex-1] : 0, 373 | i, j, x4, x3, x2, xd, xd1, y4, y3, y2, yd, yd1, inv, t, lengthIndex, l, segLength; 374 | samples.length = lookup.length = 0; 375 | for (j = startIndex + 2; j < endIndex; j += 6) { 376 | x4 = segment[j + 4] - x1; 377 | x3 = segment[j + 2] - x1; 378 | x2 = segment[j] - x1; 379 | y4 = segment[j + 5] - y1; 380 | y3 = segment[j + 3] - y1; 381 | y2 = segment[j + 1] - y1; 382 | xd = xd1 = yd = yd1 = 0; 383 | if (_abs(x4) < 1e-5 && _abs(y4) < 1e-5 && _abs(x2) + _abs(y2) < 1e-5) { //dump points that are sufficiently close (basically right on top of each other, making a bezier super tiny or 0 length) 384 | if (segment.length > 8) { 385 | segment.splice(j, 6); 386 | j -= 6; 387 | endIndex -= 6; 388 | } 389 | } else { 390 | for (i = 1; i <= resolution; i++) { 391 | t = inc * i; 392 | inv = 1 - t; 393 | xd = xd1 - (xd1 = (t * t * x4 + 3 * inv * (t * x3 + inv * x2)) * t); 394 | yd = yd1 - (yd1 = (t * t * y4 + 3 * inv * (t * y3 + inv * y2)) * t); 395 | l = _sqrt(yd * yd + xd * xd); 396 | if (l < min) { 397 | min = l; 398 | } 399 | length += l; 400 | samples[samplesIndex++] = length; 401 | } 402 | } 403 | x1 += x4; 404 | y1 += y4; 405 | } 406 | if (prevLength) { 407 | prevLength -= length; 408 | for (; samplesIndex < samples.length; samplesIndex++) { 409 | samples[samplesIndex] += prevLength; 410 | } 411 | } 412 | if (samples.length && min) { 413 | segment.totalLength = segLength = samples[samples.length-1] || 0; 414 | segment.minLength = min; 415 | l = lengthIndex = 0; 416 | for (i = 0; i < segLength; i += min) { 417 | lookup[l++] = (samples[lengthIndex] < i) ? ++lengthIndex : lengthIndex; 418 | } 419 | } else { 420 | segment.totalLength = samples[0] = 0; 421 | } 422 | return startIndex ? length - samples[startIndex / 2 - 1] : length; 423 | } 424 | 425 | export function cacheRawPathMeasurements(rawPath, resolution) { 426 | let pathLength, points, i; 427 | for (i = pathLength = points = 0; i < rawPath.length; i++) { 428 | rawPath[i].resolution = ~~resolution || 12; //steps per Bezier curve (anchor, 2 control points, to anchor) 429 | points += rawPath[i].length; 430 | pathLength += measureSegment(rawPath[i]); 431 | } 432 | rawPath.totalPoints = points; 433 | rawPath.totalLength = pathLength; 434 | return rawPath; 435 | } 436 | 437 | //divide segment[i] at position t (value between 0 and 1, progress along that particular cubic bezier segment that starts at segment[i]). Returns how many elements were spliced into the segment array (either 0 or 6) 438 | export function subdivideSegment(segment, i, t) { 439 | if (t <= 0 || t >= 1) { 440 | return 0; 441 | } 442 | let ax = segment[i], 443 | ay = segment[i+1], 444 | cp1x = segment[i+2], 445 | cp1y = segment[i+3], 446 | cp2x = segment[i+4], 447 | cp2y = segment[i+5], 448 | bx = segment[i+6], 449 | by = segment[i+7], 450 | x1a = ax + (cp1x - ax) * t, 451 | x2 = cp1x + (cp2x - cp1x) * t, 452 | y1a = ay + (cp1y - ay) * t, 453 | y2 = cp1y + (cp2y - cp1y) * t, 454 | x1 = x1a + (x2 - x1a) * t, 455 | y1 = y1a + (y2 - y1a) * t, 456 | x2a = cp2x + (bx - cp2x) * t, 457 | y2a = cp2y + (by - cp2y) * t; 458 | x2 += (x2a - x2) * t; 459 | y2 += (y2a - y2) * t; 460 | segment.splice(i + 2, 4, 461 | _round(x1a), //first control point 462 | _round(y1a), 463 | _round(x1), //second control point 464 | _round(y1), 465 | _round(x1 + (x2 - x1) * t), //new fabricated anchor on line 466 | _round(y1 + (y2 - y1) * t), 467 | _round(x2), //third control point 468 | _round(y2), 469 | _round(x2a), //fourth control point 470 | _round(y2a) 471 | ); 472 | segment.samples && segment.samples.splice(((i / 6) * segment.resolution) | 0, 0, 0, 0, 0, 0, 0, 0); 473 | return 6; 474 | } 475 | 476 | // returns an object {path, segment, segIndex, i, t} 477 | function getProgressData(rawPath, progress, decoratee, pushToNextIfAtEnd) { 478 | decoratee = decoratee || {}; 479 | rawPath.totalLength || cacheRawPathMeasurements(rawPath); 480 | if (progress < 0 || progress > 1) { 481 | progress = _wrapProgress(progress); 482 | } 483 | let segIndex = 0, 484 | segment = rawPath[0], 485 | samples, resolution, length, min, max, i, t; 486 | if (rawPath.length > 1) { //speed optimization: most of the time, there's only one segment so skip the recursion. 487 | length = rawPath.totalLength * progress; 488 | max = i = 0; 489 | while ((max += rawPath[i++].totalLength) < length) { 490 | segIndex = i; 491 | } 492 | segment = rawPath[segIndex]; 493 | min = max - segment.totalLength; 494 | progress = ((length - min) / (max - min)) || 0; 495 | } 496 | samples = segment.samples; 497 | resolution = segment.resolution; //how many samples per cubic bezier chunk 498 | length = segment.totalLength * progress; 499 | i = segment.lookup[~~(length / segment.minLength)] || 0; 500 | min = i ? samples[i-1] : 0; 501 | max = samples[i]; 502 | if (max < length) { 503 | min = max; 504 | max = samples[++i]; 505 | } 506 | t = (1 / resolution) * (((length - min) / (max - min)) + ((i % resolution))); 507 | i = ~~(i / resolution) * 6; 508 | if (pushToNextIfAtEnd && t === 1) { 509 | if (i + 6 < segment.length) { 510 | i += 6; 511 | t = 0; 512 | } else if (segIndex + 1 < rawPath.length) { 513 | i = t = 0; 514 | segment = rawPath[++segIndex]; 515 | } 516 | } 517 | decoratee.t = t; 518 | decoratee.i = i; 519 | decoratee.path = rawPath; 520 | decoratee.segment = segment; 521 | decoratee.segIndex = segIndex; 522 | return decoratee; 523 | } 524 | 525 | export function getPositionOnPath(rawPath, progress, includeAngle, point) { 526 | let segment = rawPath[0], 527 | result = point || {}, 528 | samples, resolution, length, min, max, i, t, a, inv; 529 | if (progress < 0 || progress > 1) { 530 | progress = _wrapProgress(progress); 531 | } 532 | if (rawPath.length > 1) { //speed optimization: most of the time, there's only one segment so skip the recursion. 533 | length = rawPath.totalLength * progress; 534 | max = i = 0; 535 | while ((max += rawPath[i++].totalLength) < length) { 536 | segment = rawPath[i]; 537 | } 538 | min = max - segment.totalLength; 539 | progress = ((length - min) / (max - min)) || 0; 540 | } 541 | samples = segment.samples; 542 | resolution = segment.resolution; 543 | length = segment.totalLength * progress; 544 | i = segment.lookup[~~(length / segment.minLength)] || 0; 545 | min = i ? samples[i-1] : 0; 546 | max = samples[i]; 547 | if (max < length) { 548 | min = max; 549 | max = samples[++i]; 550 | } 551 | t = ((1 / resolution) * (((length - min) / (max - min)) + ((i % resolution)))) || 0; 552 | inv = 1 - t; 553 | i = ~~(i / resolution) * 6; 554 | a = segment[i]; 555 | result.x = _round((t * t * (segment[i + 6] - a) + 3 * inv * (t * (segment[i + 4] - a) + inv * (segment[i + 2] - a))) * t + a); 556 | result.y = _round((t * t * (segment[i + 7] - (a = segment[i+1])) + 3 * inv * (t * (segment[i + 5] - a) + inv * (segment[i + 3] - a))) * t + a); 557 | if (includeAngle) { 558 | result.angle = segment.totalLength ? getRotationAtBezierT(segment, i, t >= 1 ? 1 - 1e-9 : t ? t : 1e-9) : segment.angle || 0; 559 | } 560 | return result; 561 | } 562 | 563 | 564 | 565 | //applies a matrix transform to RawPath (or a segment in a RawPath) and returns whatever was passed in (it transforms the values in the array(s), not a copy). 566 | export function transformRawPath(rawPath, a, b, c, d, tx, ty) { 567 | let j = rawPath.length, 568 | segment, l, i, x, y; 569 | while (--j > -1) { 570 | segment = rawPath[j]; 571 | l = segment.length; 572 | for (i = 0; i < l; i += 2) { 573 | x = segment[i]; 574 | y = segment[i+1]; 575 | segment[i] = x * a + y * c + tx; 576 | segment[i+1] = x * b + y * d + ty; 577 | } 578 | } 579 | rawPath._dirty = 1; 580 | return rawPath; 581 | } 582 | 583 | 584 | 585 | // translates SVG arc data into a segment (cubic beziers). Angle is in degrees. 586 | function arcToSegment(lastX, lastY, rx, ry, angle, largeArcFlag, sweepFlag, x, y) { 587 | if (lastX === x && lastY === y) { 588 | return; 589 | } 590 | rx = _abs(rx); 591 | ry = _abs(ry); 592 | let angleRad = (angle % 360) * _DEG2RAD, 593 | cosAngle = _cos(angleRad), 594 | sinAngle = _sin(angleRad), 595 | PI = Math.PI, 596 | TWOPI = PI * 2, 597 | dx2 = (lastX - x) / 2, 598 | dy2 = (lastY - y) / 2, 599 | x1 = (cosAngle * dx2 + sinAngle * dy2), 600 | y1 = (-sinAngle * dx2 + cosAngle * dy2), 601 | x1_sq = x1 * x1, 602 | y1_sq = y1 * y1, 603 | radiiCheck = x1_sq / (rx * rx) + y1_sq / (ry * ry); 604 | if (radiiCheck > 1) { 605 | rx = _sqrt(radiiCheck) * rx; 606 | ry = _sqrt(radiiCheck) * ry; 607 | } 608 | let rx_sq = rx * rx, 609 | ry_sq = ry * ry, 610 | sq = ((rx_sq * ry_sq) - (rx_sq * y1_sq) - (ry_sq * x1_sq)) / ((rx_sq * y1_sq) + (ry_sq * x1_sq)); 611 | if (sq < 0) { 612 | sq = 0; 613 | } 614 | let coef = ((largeArcFlag === sweepFlag) ? -1 : 1) * _sqrt(sq), 615 | cx1 = coef * ((rx * y1) / ry), 616 | cy1 = coef * -((ry * x1) / rx), 617 | sx2 = (lastX + x) / 2, 618 | sy2 = (lastY + y) / 2, 619 | cx = sx2 + (cosAngle * cx1 - sinAngle * cy1), 620 | cy = sy2 + (sinAngle * cx1 + cosAngle * cy1), 621 | ux = (x1 - cx1) / rx, 622 | uy = (y1 - cy1) / ry, 623 | vx = (-x1 - cx1) / rx, 624 | vy = (-y1 - cy1) / ry, 625 | temp = ux * ux + uy * uy, 626 | angleStart = ((uy < 0) ? -1 : 1) * Math.acos(ux / _sqrt(temp)), 627 | angleExtent = ((ux * vy - uy * vx < 0) ? -1 : 1) * Math.acos((ux * vx + uy * vy) / _sqrt(temp * (vx * vx + vy * vy))); 628 | isNaN(angleExtent) && (angleExtent = PI); //rare edge case. Math.cos(-1) is NaN. 629 | if (!sweepFlag && angleExtent > 0) { 630 | angleExtent -= TWOPI; 631 | } else if (sweepFlag && angleExtent < 0) { 632 | angleExtent += TWOPI; 633 | } 634 | angleStart %= TWOPI; 635 | angleExtent %= TWOPI; 636 | let segments = Math.ceil(_abs(angleExtent) / (TWOPI / 4)), 637 | rawPath = [], 638 | angleIncrement = angleExtent / segments, 639 | controlLength = 4 / 3 * _sin(angleIncrement / 2) / (1 + _cos(angleIncrement / 2)), 640 | ma = cosAngle * rx, 641 | mb = sinAngle * rx, 642 | mc = sinAngle * -ry, 643 | md = cosAngle * ry, 644 | i; 645 | for (i = 0; i < segments; i++) { 646 | angle = angleStart + i * angleIncrement; 647 | x1 = _cos(angle); 648 | y1 = _sin(angle); 649 | ux = _cos(angle += angleIncrement); 650 | uy = _sin(angle); 651 | rawPath.push(x1 - controlLength * y1, y1 + controlLength * x1, ux + controlLength * uy, uy - controlLength * ux, ux, uy); 652 | } 653 | //now transform according to the actual size of the ellipse/arc (the beziers were noramlized, between 0 and 1 on a circle). 654 | for (i = 0; i < rawPath.length; i+=2) { 655 | x1 = rawPath[i]; 656 | y1 = rawPath[i+1]; 657 | rawPath[i] = x1 * ma + y1 * mc + cx; 658 | rawPath[i+1] = x1 * mb + y1 * md + cy; 659 | } 660 | rawPath[i-2] = x; //always set the end to exactly where it's supposed to be 661 | rawPath[i-1] = y; 662 | return rawPath; 663 | } 664 | 665 | //Spits back a RawPath with absolute coordinates. Each segment starts with a "moveTo" command (x coordinate, then y) and then 2 control points (x, y, x, y), then anchor. The goal is to minimize memory and maximize speed. 666 | export function stringToRawPath(d) { 667 | let a = (d + "").replace(_scientific, m => { let n = +m; return (n < 0.0001 && n > -0.0001) ? 0 : n; }).match(_svgPathExp) || [], //some authoring programs spit out very small numbers in scientific notation like "1e-5", so make sure we round that down to 0 first. 668 | path = [], 669 | relativeX = 0, 670 | relativeY = 0, 671 | twoThirds = 2 / 3, 672 | elements = a.length, 673 | points = 0, 674 | errorMessage = "ERROR: malformed path: " + d, 675 | i, j, x, y, command, isRelative, segment, startX, startY, difX, difY, beziers, prevCommand, flag1, flag2, 676 | line = function(sx, sy, ex, ey) { 677 | difX = (ex - sx) / 3; 678 | difY = (ey - sy) / 3; 679 | segment.push(sx + difX, sy + difY, ex - difX, ey - difY, ex, ey); 680 | }; 681 | if (!d || !isNaN(a[0]) || isNaN(a[1])) { 682 | console.log(errorMessage); 683 | return path; 684 | } 685 | for (i = 0; i < elements; i++) { 686 | prevCommand = command; 687 | if (isNaN(a[i])) { 688 | command = a[i].toUpperCase(); 689 | isRelative = (command !== a[i]); //lower case means relative 690 | } else { //commands like "C" can be strung together without any new command characters between. 691 | i--; 692 | } 693 | x = +a[i + 1]; 694 | y = +a[i + 2]; 695 | if (isRelative) { 696 | x += relativeX; 697 | y += relativeY; 698 | } 699 | if (!i) { 700 | startX = x; 701 | startY = y; 702 | } 703 | 704 | // "M" (move) 705 | if (command === "M") { 706 | if (segment) { 707 | if (segment.length < 8) { //if the path data was funky and just had a M with no actual drawing anywhere, skip it. 708 | path.length -= 1; 709 | } else { 710 | points += segment.length; 711 | } 712 | } 713 | relativeX = startX = x; 714 | relativeY = startY = y; 715 | segment = [x, y]; 716 | path.push(segment); 717 | i += 2; 718 | command = "L"; //an "M" with more than 2 values gets interpreted as "lineTo" commands ("L"). 719 | 720 | // "C" (cubic bezier) 721 | } else if (command === "C") { 722 | if (!segment) { 723 | segment = [0, 0]; 724 | } 725 | if (!isRelative) { 726 | relativeX = relativeY = 0; 727 | } 728 | //note: "*1" is just a fast/short way to cast the value as a Number. WAAAY faster in Chrome, slightly slower in Firefox. 729 | segment.push(x, y, relativeX + a[i + 3] * 1, relativeY + a[i + 4] * 1, (relativeX += a[i + 5] * 1), (relativeY += a[i + 6] * 1)); 730 | i += 6; 731 | 732 | // "S" (continuation of cubic bezier) 733 | } else if (command === "S") { 734 | difX = relativeX; 735 | difY = relativeY; 736 | if (prevCommand === "C" || prevCommand === "S") { 737 | difX += relativeX - segment[segment.length - 4]; 738 | difY += relativeY - segment[segment.length - 3]; 739 | } 740 | if (!isRelative) { 741 | relativeX = relativeY = 0; 742 | } 743 | segment.push(difX, difY, x, y, (relativeX += a[i + 3] * 1), (relativeY += a[i + 4] * 1)); 744 | i += 4; 745 | 746 | // "Q" (quadratic bezier) 747 | } else if (command === "Q") { 748 | difX = relativeX + (x - relativeX) * twoThirds; 749 | difY = relativeY + (y - relativeY) * twoThirds; 750 | if (!isRelative) { 751 | relativeX = relativeY = 0; 752 | } 753 | relativeX += a[i + 3] * 1; 754 | relativeY += a[i + 4] * 1; 755 | segment.push(difX, difY, relativeX + (x - relativeX) * twoThirds, relativeY + (y - relativeY) * twoThirds, relativeX, relativeY); 756 | i += 4; 757 | 758 | // "T" (continuation of quadratic bezier) 759 | } else if (command === "T") { 760 | difX = relativeX - segment[segment.length - 4]; 761 | difY = relativeY - segment[segment.length - 3]; 762 | segment.push(relativeX + difX, relativeY + difY, x + ((relativeX + difX * 1.5) - x) * twoThirds, y + ((relativeY + difY * 1.5) - y) * twoThirds, (relativeX = x), (relativeY = y)); 763 | i += 2; 764 | 765 | // "H" (horizontal line) 766 | } else if (command === "H") { 767 | line(relativeX, relativeY, (relativeX = x), relativeY); 768 | i += 1; 769 | 770 | // "V" (vertical line) 771 | } else if (command === "V") { 772 | //adjust values because the first (and only one) isn't x in this case, it's y. 773 | line(relativeX, relativeY, relativeX, (relativeY = x + (isRelative ? relativeY - relativeX : 0))); 774 | i += 1; 775 | 776 | // "L" (line) or "Z" (close) 777 | } else if (command === "L" || command === "Z") { 778 | if (command === "Z") { 779 | x = startX; 780 | y = startY; 781 | segment.closed = true; 782 | } 783 | if (command === "L" || _abs(relativeX - x) > 0.5 || _abs(relativeY - y) > 0.5) { 784 | line(relativeX, relativeY, x, y); 785 | if (command === "L") { 786 | i += 2; 787 | } 788 | } 789 | relativeX = x; 790 | relativeY = y; 791 | 792 | // "A" (arc) 793 | } else if (command === "A") { 794 | flag1 = a[i+4]; 795 | flag2 = a[i+5]; 796 | difX = a[i+6]; 797 | difY = a[i+7]; 798 | j = 7; 799 | if (flag1.length > 1) { // for cases when the flags are merged, like "a8 8 0 018 8" (the 0 and 1 flags are WITH the x value of 8, but it could also be "a8 8 0 01-8 8" so it may include x or not) 800 | if (flag1.length < 3) { 801 | difY = difX; 802 | difX = flag2; 803 | j--; 804 | } else { 805 | difY = flag2; 806 | difX = flag1.substr(2); 807 | j-=2; 808 | } 809 | flag2 = flag1.charAt(1); 810 | flag1 = flag1.charAt(0); 811 | } 812 | beziers = arcToSegment(relativeX, relativeY, +a[i+1], +a[i+2], +a[i+3], +flag1, +flag2, (isRelative ? relativeX : 0) + difX*1, (isRelative ? relativeY : 0) + difY*1); 813 | i += j; 814 | if (beziers) { 815 | for (j = 0; j < beziers.length; j++) { 816 | segment.push(beziers[j]); 817 | } 818 | } 819 | relativeX = segment[segment.length-2]; 820 | relativeY = segment[segment.length-1]; 821 | 822 | } else { 823 | console.log(errorMessage); 824 | } 825 | } 826 | i = segment.length; 827 | if (i < 6) { //in case there's odd SVG like a M0,0 command at the very end. 828 | path.pop(); 829 | i = 0; 830 | } else if (segment[0] === segment[i-2] && segment[1] === segment[i-1]) { 831 | segment.closed = true; 832 | } 833 | path.totalPoints = points + i; 834 | return path; 835 | } 836 | 837 | //populates the points array in alternating x/y values (like [x, y, x, y...] instead of individual point objects [{x, y}, {x, y}...] to conserve memory and stay in line with how we're handling segment arrays 838 | export function bezierToPoints(x1, y1, x2, y2, x3, y3, x4, y4, threshold, points, index) { 839 | let x12 = (x1 + x2) / 2, 840 | y12 = (y1 + y2) / 2, 841 | x23 = (x2 + x3) / 2, 842 | y23 = (y2 + y3) / 2, 843 | x34 = (x3 + x4) / 2, 844 | y34 = (y3 + y4) / 2, 845 | x123 = (x12 + x23) / 2, 846 | y123 = (y12 + y23) / 2, 847 | x234 = (x23 + x34) / 2, 848 | y234 = (y23 + y34) / 2, 849 | x1234 = (x123 + x234) / 2, 850 | y1234 = (y123 + y234) / 2, 851 | dx = x4 - x1, 852 | dy = y4 - y1, 853 | d2 = _abs((x2 - x4) * dy - (y2 - y4) * dx), 854 | d3 = _abs((x3 - x4) * dy - (y3 - y4) * dx), 855 | length; 856 | if (!points) { 857 | points = [x1, y1, x4, y4]; 858 | index = 2; 859 | } 860 | points.splice(index || points.length - 2, 0, x1234, y1234); 861 | if ((d2 + d3) * (d2 + d3) > threshold * (dx * dx + dy * dy)) { 862 | length = points.length; 863 | bezierToPoints(x1, y1, x12, y12, x123, y123, x1234, y1234, threshold, points, index); 864 | bezierToPoints(x1234, y1234, x234, y234, x34, y34, x4, y4, threshold, points, index + 2 + (points.length - length)); 865 | } 866 | return points; 867 | } 868 | 869 | /* 870 | function getAngleBetweenPoints(x0, y0, x1, y1, x2, y2) { //angle between 3 points in radians 871 | var dx1 = x1 - x0, 872 | dy1 = y1 - y0, 873 | dx2 = x2 - x1, 874 | dy2 = y2 - y1, 875 | dx3 = x2 - x0, 876 | dy3 = y2 - y0, 877 | a = dx1 * dx1 + dy1 * dy1, 878 | b = dx2 * dx2 + dy2 * dy2, 879 | c = dx3 * dx3 + dy3 * dy3; 880 | return Math.acos( (a + b - c) / _sqrt(4 * a * b) ); 881 | }, 882 | */ 883 | 884 | //pointsToSegment() doesn't handle flat coordinates (where y is always 0) the way we need (the resulting control points are always right on top of the anchors), so this function basically makes the control points go directly up and down, varying in length based on the curviness (more curvy, further control points) 885 | export function flatPointsToSegment(points, curviness=1) { 886 | let x = points[0], 887 | y = 0, 888 | segment = [x, y], 889 | i = 2; 890 | for (; i < points.length; i+=2) { 891 | segment.push( 892 | x, 893 | y, 894 | points[i], 895 | (y = (points[i] - x) * curviness / 2), 896 | (x = points[i]), 897 | -y 898 | ); 899 | } 900 | return segment; 901 | } 902 | 903 | //points is an array of x/y points, like [x, y, x, y, x, y] 904 | export function pointsToSegment(points, curviness, cornerThreshold) { 905 | //points = simplifyPoints(points, tolerance); 906 | let l = points.length-2, 907 | x = +points[0], 908 | y = +points[1], 909 | nextX = +points[2], 910 | nextY = +points[3], 911 | segment = [x, y, x, y], 912 | dx2 = nextX - x, 913 | dy2 = nextY - y, 914 | closed = Math.abs(points[l] - x) < 0.001 && Math.abs(points[l+1] - y) < 0.001, 915 | prevX, prevY, angle, slope, i, dx1, dx3, dy1, dy3, d1, d2, a, b, c; 916 | if (isNaN(cornerThreshold)) { 917 | cornerThreshold = Math.PI / 10; 918 | } 919 | if (closed) { // if the start and end points are basically on top of each other, close the segment by adding the 2nd point to the end, and the 2nd-to-last point to the beginning (we'll remove them at the end, but this allows the curvature to look perfect) 920 | points.push(nextX, nextY); 921 | nextX = x; 922 | nextY = y; 923 | x = points[l-2]; 924 | y = points[l-1]; 925 | points.unshift(x, y); 926 | l+=4; 927 | } 928 | curviness = (curviness || curviness === 0) ? +curviness : 1; 929 | for (i = 2; i < l; i+=2) { 930 | prevX = x; 931 | prevY = y; 932 | x = nextX; 933 | y = nextY; 934 | nextX = +points[i+2]; 935 | nextY = +points[i+3]; 936 | dx1 = dx2; 937 | dy1 = dy2; 938 | dx2 = nextX - x; 939 | dy2 = nextY - y; 940 | dx3 = nextX - prevX; 941 | dy3 = nextY - prevY; 942 | a = dx1 * dx1 + dy1 * dy1; 943 | b = dx2 * dx2 + dy2 * dy2; 944 | c = dx3 * dx3 + dy3 * dy3; 945 | angle = Math.acos( (a + b - c) / _sqrt(4 * a * b) ); //angle between the 3 points 946 | d2 = (angle / Math.PI) * curviness; //temporary precalculation for speed (reusing d2 variable) 947 | d1 = _sqrt(a) * d2; //the tighter the angle, the shorter we make the handles in proportion. 948 | d2 *= _sqrt(b); 949 | if (x !== prevX || y !== prevY) { 950 | if (angle > cornerThreshold) { 951 | slope = _atan2(dy3, dx3); 952 | segment.push( 953 | _round(x - _cos(slope) * d1), //first control point 954 | _round(y - _sin(slope) * d1), 955 | _round(x), //anchor 956 | _round(y), 957 | _round(x + _cos(slope) * d2), //second control point 958 | _round(y + _sin(slope) * d2) 959 | ); 960 | } else { 961 | slope = _atan2(dy1, dx1); 962 | segment.push( 963 | _round(x - _cos(slope) * d1), //first control point 964 | _round(y - _sin(slope) * d1)); 965 | slope = _atan2(dy2, dx2); 966 | segment.push( 967 | _round(x), //anchor 968 | _round(y), 969 | _round(x + _cos(slope) * d2), //second control point 970 | _round(y + _sin(slope) * d2) 971 | ); 972 | } 973 | } 974 | } 975 | segment.push(_round(nextX), _round(nextY), _round(nextX), _round(nextY)); 976 | if (closed) { 977 | segment.splice(0, 6); 978 | segment.length = segment.length - 6; 979 | } 980 | return segment; 981 | } 982 | 983 | //returns the squared distance between an x/y coordinate and a segment between x1/y1 and x2/y2 984 | function pointToSegDist(x, y, x1, y1, x2, y2) { 985 | let dx = x2 - x1, 986 | dy = y2 - y1, 987 | t; 988 | if (dx || dy) { 989 | t = ((x - x1) * dx + (y - y1) * dy) / (dx * dx + dy * dy); 990 | if (t > 1) { 991 | x1 = x2; 992 | y1 = y2; 993 | } else if (t > 0) { 994 | x1 += dx * t; 995 | y1 += dy * t; 996 | } 997 | } 998 | return (x - x1) ** 2 + (y - y1) ** 2; 999 | } 1000 | 1001 | function simplifyStep(points, first, last, tolerance, simplified) { 1002 | let maxSqDist = tolerance, 1003 | firstX = points[first], 1004 | firstY = points[first+1], 1005 | lastX = points[last], 1006 | lastY = points[last+1], 1007 | index, i, d; 1008 | for (i = first + 2; i < last; i += 2) { 1009 | d = pointToSegDist(points[i], points[i+1], firstX, firstY, lastX, lastY); 1010 | if (d > maxSqDist) { 1011 | index = i; 1012 | maxSqDist = d; 1013 | } 1014 | } 1015 | if (maxSqDist > tolerance) { 1016 | if (index - first > 2) { 1017 | simplifyStep(points, first, index, tolerance, simplified); 1018 | } 1019 | simplified.push(points[index], points[index+1]); 1020 | if (last - index > 2) { 1021 | simplifyStep(points, index, last, tolerance, simplified); 1022 | } 1023 | } 1024 | } 1025 | 1026 | //points is an array of x/y values like [x, y, x, y, x, y] 1027 | export function simplifyPoints(points, tolerance) { 1028 | let prevX = parseFloat(points[0]), 1029 | prevY = parseFloat(points[1]), 1030 | temp = [prevX, prevY], 1031 | l = points.length - 2, 1032 | i, x, y, dx, dy, result, last; 1033 | tolerance = (tolerance || 1) ** 2; 1034 | for (i = 2; i < l; i += 2) { 1035 | x = parseFloat(points[i]); 1036 | y = parseFloat(points[i+1]); 1037 | dx = prevX - x; 1038 | dy = prevY - y; 1039 | if (dx * dx + dy * dy > tolerance) { 1040 | temp.push(x, y); 1041 | prevX = x; 1042 | prevY = y; 1043 | } 1044 | } 1045 | temp.push(parseFloat(points[l]), parseFloat(points[l+1])); 1046 | last = temp.length - 2; 1047 | result = [temp[0], temp[1]]; 1048 | simplifyStep(temp, 0, last, tolerance, result); 1049 | result.push(temp[last], temp[last+1]); 1050 | return result; 1051 | } 1052 | 1053 | function getClosestProgressOnBezier(iterations, px, py, start, end, slices, x0, y0, x1, y1, x2, y2, x3, y3) { 1054 | let inc = (end - start) / slices, 1055 | best = 0, 1056 | t = start, 1057 | x, y, d, dx, dy, inv; 1058 | _bestDistance = _largeNum; 1059 | while (t <= end) { 1060 | inv = 1 - t; 1061 | x = inv * inv * inv * x0 + 3 * inv * inv * t * x1 + 3 * inv * t * t * x2 + t * t * t * x3; 1062 | y = inv * inv * inv * y0 + 3 * inv * inv * t * y1 + 3 * inv * t * t * y2 + t * t * t * y3; 1063 | dx = x - px; 1064 | dy = y - py; 1065 | d = dx * dx + dy * dy; 1066 | if (d < _bestDistance) { 1067 | _bestDistance = d; 1068 | best = t; 1069 | } 1070 | t += inc; 1071 | } 1072 | return (iterations > 1) ? getClosestProgressOnBezier(iterations - 1, px, py, Math.max(best - inc, 0), Math.min(best + inc, 1), slices, x0, y0, x1, y1, x2, y2, x3, y3) : best; 1073 | } 1074 | 1075 | export function getClosestData(rawPath, x, y, slices) { //returns an object with the closest j, i, and t (j is the segment index, i is the index of the point in that segment, and t is the time/progress along that bezier) 1076 | let closest = {j:0, i:0, t:0}, 1077 | bestDistance = _largeNum, 1078 | i, j, t, segment; 1079 | for (j = 0; j < rawPath.length; j++) { 1080 | segment = rawPath[j]; 1081 | for (i = 0; i < segment.length; i+=6) { 1082 | t = getClosestProgressOnBezier(1, x, y, 0, 1, slices || 20, segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5], segment[i+6], segment[i+7]); 1083 | if (bestDistance > _bestDistance) { 1084 | bestDistance = _bestDistance; 1085 | closest.j = j; 1086 | closest.i = i; 1087 | closest.t = t; 1088 | } 1089 | } 1090 | } 1091 | return closest; 1092 | } 1093 | 1094 | //subdivide a Segment closest to a specific x,y coordinate 1095 | export function subdivideSegmentNear(x, y, segment, slices, iterations) { 1096 | let l = segment.length, 1097 | bestDistance = _largeNum, 1098 | bestT = 0, 1099 | bestSegmentIndex = 0, 1100 | t, i; 1101 | slices = slices || 20; 1102 | iterations = iterations || 3; 1103 | for (i = 0; i < l; i += 6) { 1104 | t = getClosestProgressOnBezier(1, x, y, 0, 1, slices, segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5], segment[i+6], segment[i+7]); 1105 | if (bestDistance > _bestDistance) { 1106 | bestDistance = _bestDistance; 1107 | bestT = t; 1108 | bestSegmentIndex = i; 1109 | } 1110 | } 1111 | t = getClosestProgressOnBezier(iterations, x, y, bestT - 0.05, bestT + 0.05, slices, segment[bestSegmentIndex], segment[bestSegmentIndex+1], segment[bestSegmentIndex+2], segment[bestSegmentIndex+3], segment[bestSegmentIndex+4], segment[bestSegmentIndex+5], segment[bestSegmentIndex+6], segment[bestSegmentIndex+7]); 1112 | subdivideSegment(segment, bestSegmentIndex, t); 1113 | return bestSegmentIndex + 6; 1114 | } 1115 | 1116 | /* 1117 | Takes any of the following and converts it to an all Cubic Bezier SVG data string: 1118 | - A data string like "M0,0 L2,4 v20,15 H100" 1119 | - A RawPath, like [[x, y, x, y, x, y, x, y][[x, y, x, y, x, y, x, y]] 1120 | - A Segment, like [x, y, x, y, x, y, x, y] 1121 | 1122 | Note: all numbers are rounded down to the closest 0.001 to minimize memory, maximize speed, and avoid odd numbers like 1e-13 1123 | */ 1124 | export function rawPathToString(rawPath) { 1125 | if (_isNumber(rawPath[0])) { //in case a segment is passed in instead 1126 | rawPath = [rawPath]; 1127 | } 1128 | let result = "", 1129 | l = rawPath.length, 1130 | sl, s, i, segment; 1131 | for (s = 0; s < l; s++) { 1132 | segment = rawPath[s]; 1133 | result += "M" + _round(segment[0]) + "," + _round(segment[1]) + " C"; 1134 | sl = segment.length; 1135 | for (i = 2; i < sl; i++) { 1136 | result += _round(segment[i++]) + "," + _round(segment[i++]) + " " + _round(segment[i++]) + "," + _round(segment[i++]) + " " + _round(segment[i++]) + "," + _round(segment[i]) + " "; 1137 | } 1138 | if (segment.closed) { 1139 | result += "z"; 1140 | } 1141 | } 1142 | return result; 1143 | } 1144 | 1145 | /* 1146 | // takes a segment with coordinates [x, y, x, y, ...] and converts the control points into angles and lengths [x, y, angle, length, angle, length, x, y, angle, length, ...] so that it animates more cleanly and avoids odd breaks/kinks. For example, if you animate from 1 o'clock to 6 o'clock, it'd just go directly/linearly rather than around. So the length would be very short in the middle of the tween. 1147 | export function cpCoordsToAngles(segment, copy) { 1148 | var result = copy ? segment.slice(0) : segment, 1149 | x, y, i; 1150 | for (i = 0; i < segment.length; i+=6) { 1151 | x = segment[i+2] - segment[i]; 1152 | y = segment[i+3] - segment[i+1]; 1153 | result[i+2] = Math.atan2(y, x); 1154 | result[i+3] = Math.sqrt(x * x + y * y); 1155 | x = segment[i+6] - segment[i+4]; 1156 | y = segment[i+7] - segment[i+5]; 1157 | result[i+4] = Math.atan2(y, x); 1158 | result[i+5] = Math.sqrt(x * x + y * y); 1159 | } 1160 | return result; 1161 | } 1162 | 1163 | // takes a segment that was converted with cpCoordsToAngles() to have angles and lengths instead of coordinates for the control points, and converts it BACK into coordinates. 1164 | export function cpAnglesToCoords(segment, copy) { 1165 | var result = copy ? segment.slice(0) : segment, 1166 | length = segment.length, 1167 | rnd = 1000, 1168 | angle, l, i, j; 1169 | for (i = 0; i < length; i+=6) { 1170 | angle = segment[i+2]; 1171 | l = segment[i+3]; //length 1172 | result[i+2] = (((segment[i] + Math.cos(angle) * l) * rnd) | 0) / rnd; 1173 | result[i+3] = (((segment[i+1] + Math.sin(angle) * l) * rnd) | 0) / rnd; 1174 | angle = segment[i+4]; 1175 | l = segment[i+5]; //length 1176 | result[i+4] = (((segment[i+6] - Math.cos(angle) * l) * rnd) | 0) / rnd; 1177 | result[i+5] = (((segment[i+7] - Math.sin(angle) * l) * rnd) | 0) / rnd; 1178 | } 1179 | return result; 1180 | } 1181 | 1182 | //adds an "isSmooth" array to each segment and populates it with a boolean value indicating whether or not it's smooth (the control points have basically the same slope). For any smooth control points, it converts the coordinates into angle (x, in radians) and length (y) and puts them into the same index value in a smoothData array. 1183 | export function populateSmoothData(rawPath) { 1184 | let j = rawPath.length, 1185 | smooth, segment, x, y, x2, y2, i, l, a, a2, isSmooth, smoothData; 1186 | while (--j > -1) { 1187 | segment = rawPath[j]; 1188 | isSmooth = segment.isSmooth = segment.isSmooth || [0, 0, 0, 0]; 1189 | smoothData = segment.smoothData = segment.smoothData || [0, 0, 0, 0]; 1190 | isSmooth.length = 4; 1191 | l = segment.length - 2; 1192 | for (i = 6; i < l; i += 6) { 1193 | x = segment[i] - segment[i - 2]; 1194 | y = segment[i + 1] - segment[i - 1]; 1195 | x2 = segment[i + 2] - segment[i]; 1196 | y2 = segment[i + 3] - segment[i + 1]; 1197 | a = _atan2(y, x); 1198 | a2 = _atan2(y2, x2); 1199 | smooth = (Math.abs(a - a2) < 0.09); 1200 | if (smooth) { 1201 | smoothData[i - 2] = a; 1202 | smoothData[i + 2] = a2; 1203 | smoothData[i - 1] = _sqrt(x * x + y * y); 1204 | smoothData[i + 3] = _sqrt(x2 * x2 + y2 * y2); 1205 | } 1206 | isSmooth.push(smooth, smooth, 0, 0, smooth, smooth); 1207 | } 1208 | //if the first and last points are identical, check to see if there's a smooth transition. We must handle this a bit differently due to their positions in the array. 1209 | if (segment[l] === segment[0] && segment[l+1] === segment[1]) { 1210 | x = segment[0] - segment[l-2]; 1211 | y = segment[1] - segment[l-1]; 1212 | x2 = segment[2] - segment[0]; 1213 | y2 = segment[3] - segment[1]; 1214 | a = _atan2(y, x); 1215 | a2 = _atan2(y2, x2); 1216 | if (Math.abs(a - a2) < 0.09) { 1217 | smoothData[l-2] = a; 1218 | smoothData[2] = a2; 1219 | smoothData[l-1] = _sqrt(x * x + y * y); 1220 | smoothData[3] = _sqrt(x2 * x2 + y2 * y2); 1221 | isSmooth[l-2] = isSmooth[l-1] = true; //don't change indexes 2 and 3 because we'll trigger everything from the END, and this will optimize file size a bit. 1222 | } 1223 | } 1224 | } 1225 | return rawPath; 1226 | } 1227 | export function pointToScreen(svgElement, point) { 1228 | if (arguments.length < 2) { //by default, take the first set of coordinates in the path as the point 1229 | let rawPath = getRawPath(svgElement); 1230 | point = svgElement.ownerSVGElement.createSVGPoint(); 1231 | point.x = rawPath[0][0]; 1232 | point.y = rawPath[0][1]; 1233 | } 1234 | return point.matrixTransform(svgElement.getScreenCTM()); 1235 | } 1236 | 1237 | */ -------------------------------------------------------------------------------- /otherLibs/gsap/CSSPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * CSSPlugin 3.5.1 3 | * https://greensock.com 4 | * 5 | * Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 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, 13 | _setDefaults, _removeLinkedListItem //for the commented-out className feature. 14 | } from "./gsap-core.js"; 15 | 16 | let _win, _doc, _docElement, _pluginInitted, _tempDiv, _tempDivStyler, _recentSetterPlugin, 17 | _windowExists = () => typeof(window) !== "undefined", 18 | _transformProps = {}, 19 | _RAD2DEG = 180 / Math.PI, 20 | _DEG2RAD = Math.PI / 180, 21 | _atan2 = Math.atan2, 22 | _bigNum = 1e8, 23 | _capsExp = /([A-Z])/g, 24 | _horizontalExp = /(?:left|right|width|margin|padding|x)/i, 25 | _complexExp = /[\s,\(]\S/, 26 | _propertyAliases = {autoAlpha:"opacity,visibility", scale:"scaleX,scaleY", alpha:"opacity"}, 27 | _renderCSSProp = (ratio, data) => data.set(data.t, data.p, (Math.round((data.s + data.c * ratio) * 10000) / 10000) + data.u, data), 28 | _renderPropWithEnd = (ratio, data) => data.set(data.t, data.p, ratio === 1 ? data.e : (Math.round((data.s + data.c * ratio) * 10000) / 10000) + data.u, data), 29 | _renderCSSPropWithBeginning = (ratio, data) => 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) 30 | _renderRoundedCSSProp = (ratio, data) => { 31 | let value = data.s + data.c * ratio; 32 | data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data); 33 | }, 34 | _renderNonTweeningValue = (ratio, data) => data.set(data.t, data.p, ratio ? data.e : data.b, data), 35 | _renderNonTweeningValueOnlyAtEnd = (ratio, data) => data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data), 36 | _setterCSSStyle = (target, property, value) => target.style[property] = value, 37 | _setterCSSProp = (target, property, value) => target.style.setProperty(property, value), 38 | _setterTransform = (target, property, value) => target._gsap[property] = value, 39 | _setterScale = (target, property, value) => target._gsap.scaleX = target._gsap.scaleY = value, 40 | _setterScaleWithRender = (target, property, value, data, ratio) => { 41 | let cache = target._gsap; 42 | cache.scaleX = cache.scaleY = value; 43 | cache.renderTransform(ratio, cache); 44 | }, 45 | _setterTransformWithRender = (target, property, value, data, ratio) => { 46 | let cache = target._gsap; 47 | cache[property] = value; 48 | cache.renderTransform(ratio, cache); 49 | }, 50 | _transformProp = "transform", 51 | _transformOriginProp = _transformProp + "Origin", 52 | _supports3D, 53 | _createElement = (type, ns) => { 54 | let 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. 55 | 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/). 56 | }, 57 | _getComputedProperty = (target, property, skipPrefixFallback) => { 58 | let cs = getComputedStyle(target); 59 | 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. 60 | }, 61 | _prefixes = "O,Moz,ms,Ms,Webkit".split(","), 62 | _checkPropPrefix = (property, element, preferPrefix) => { 63 | let e = element || _tempDiv, 64 | s = e.style, 65 | i = 5; 66 | if (property in s && !preferPrefix) { 67 | return property; 68 | } 69 | property = property.charAt(0).toUpperCase() + property.substr(1); 70 | while (i-- && !((_prefixes[i]+property) in s)) { } 71 | return (i < 0) ? null : ((i === 3) ? "ms" : (i >= 0) ? _prefixes[i] : "") + property; 72 | }, 73 | _initCore = () => { 74 | if (_windowExists() && window.document) { 75 | _win = window; 76 | _doc = _win.document; 77 | _docElement = _doc.documentElement; 78 | _tempDiv = _createElement("div") || {style:{}}; 79 | _tempDivStyler = _createElement("div"); 80 | _transformProp = _checkPropPrefix(_transformProp); 81 | _transformOriginProp = _transformProp + "Origin"; 82 | _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. 83 | _supports3D = !!_checkPropPrefix("perspective"); 84 | _pluginInitted = 1; 85 | } 86 | }, 87 | _getBBoxHack = function(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). 88 | let svg = _createElement("svg", (this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns")) || "http://www.w3.org/2000/svg"), 89 | oldParent = this.parentNode, 90 | oldSibling = this.nextSibling, 91 | oldCSS = this.style.cssText, 92 | bbox; 93 | _docElement.appendChild(svg); 94 | svg.appendChild(this); 95 | this.style.display = "block"; 96 | if (swapIfPossible) { 97 | try { 98 | bbox = this.getBBox(); 99 | this._gsapBBox = this.getBBox; //store the original 100 | this.getBBox = _getBBoxHack; 101 | } catch (e) { } 102 | } else if (this._gsapBBox) { 103 | bbox = this._gsapBBox(); 104 | } 105 | if (oldParent) { 106 | if (oldSibling) { 107 | oldParent.insertBefore(this, oldSibling); 108 | } else { 109 | oldParent.appendChild(this); 110 | } 111 | } 112 | _docElement.removeChild(svg); 113 | this.style.cssText = oldCSS; 114 | return bbox; 115 | }, 116 | _getAttributeFallbacks = (target, attributesArray) => { 117 | let i = attributesArray.length; 118 | while (i--) { 119 | if (target.hasAttribute(attributesArray[i])) { 120 | return target.getAttribute(attributesArray[i]); 121 | } 122 | } 123 | }, 124 | _getBBox = target => { 125 | let bounds; 126 | try { 127 | 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 128 | } catch (error) { 129 | bounds = _getBBoxHack.call(target, true); 130 | } 131 | (bounds && (bounds.width || bounds.height)) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true)); 132 | //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. 133 | 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; 134 | }, 135 | _isSVG = e => !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e)), //reports if the element is an SVG on which getBBox() actually works 136 | _removeProperty = (target, property) => { 137 | if (property) { 138 | let style = target.style; 139 | if (property in _transformProps && property !== _transformOriginProp) { 140 | property = _transformProp; 141 | } 142 | if (style.removeProperty) { 143 | 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) 144 | property = "-" + property; 145 | } 146 | style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase()); 147 | } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" 148 | style.removeAttribute(property); 149 | } 150 | } 151 | }, 152 | _addNonTweeningPT = (plugin, target, property, beginning, end, onlySetAtEnd) => { 153 | let pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue); 154 | plugin._pt = pt; 155 | pt.b = beginning; 156 | pt.e = end; 157 | plugin._props.push(property); 158 | return pt; 159 | }, 160 | _nonConvertibleUnits = {deg:1, rad:1, turn:1}, 161 | //takes a single value like 20px and converts it to the unit specified, like "%", returning only the numeric amount. 162 | _convertToUnit = (target, property, value, unit) => { 163 | let curValue = parseFloat(value) || 0, 164 | curUnit = (value + "").trim().substr((curValue + "").length) || "px", // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim() 165 | style = _tempDiv.style, 166 | horizontal = _horizontalExp.test(property), 167 | isRootSVG = target.tagName.toLowerCase() === "svg", 168 | measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"), 169 | amount = 100, 170 | toPixels = unit === "px", 171 | toPercent = unit === "%", 172 | px, parent, cache, isSVG; 173 | if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) { 174 | return curValue; 175 | } 176 | (curUnit !== "px" && !toPixels) && (curValue = _convertToUnit(target, property, value, "px")); 177 | isSVG = target.getCTM && _isSVG(target); 178 | if (toPercent && (_transformProps[property] || ~property.indexOf("adius"))) { //transforms and borderRadius are relative to the size of the element itself! 179 | return _round(curValue / (isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty]) * amount); 180 | } 181 | style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit); 182 | parent = (~property.indexOf("adius") || (unit === "em" && target.appendChild && !isRootSVG)) ? target : target.parentNode; 183 | if (isSVG) { 184 | parent = (target.ownerSVGElement || {}).parentNode; 185 | } 186 | if (!parent || parent === _doc || !parent.appendChild) { 187 | parent = _doc.body; 188 | } 189 | cache = parent._gsap; 190 | if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time) { 191 | return _round(curValue / cache.width * amount); 192 | } else { 193 | (toPercent || curUnit === "%") && (style.position = _getComputedProperty(target, "position")); 194 | (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. 195 | parent.appendChild(_tempDiv); 196 | px = _tempDiv[measureProperty]; 197 | parent.removeChild(_tempDiv); 198 | style.position = "absolute"; 199 | if (horizontal && toPercent) { 200 | cache = _getCache(parent); 201 | cache.time = _ticker.time; 202 | cache.width = parent[measureProperty]; 203 | } 204 | } 205 | return _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0); 206 | }, 207 | _get = (target, property, unit, uncache) => { 208 | let value; 209 | _pluginInitted || _initCore(); 210 | if ((property in _propertyAliases) && property !== "transform") { 211 | property = _propertyAliases[property]; 212 | if (~property.indexOf(",")) { 213 | property = property.split(",")[0]; 214 | } 215 | } 216 | if (_transformProps[property] && property !== "transform") { 217 | value = _parseTransform(target, uncache); 218 | value = (property !== "transformOrigin") ? value[property] : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px"; 219 | } else { 220 | value = target.style[property]; 221 | if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) { 222 | 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 223 | } 224 | } 225 | return unit && !~(value + "").indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value; 226 | 227 | }, 228 | _tweenComplexCSSString = function(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. 229 | 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/ 230 | let p = _checkPropPrefix(prop, target, 1), 231 | s = p && _getComputedProperty(target, p, 1); 232 | if (s && s !== start) { 233 | prop = p; 234 | start = s; 235 | } else if (prop === "borderColor") { 236 | 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/ 237 | } 238 | } 239 | let pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString), 240 | index = 0, 241 | matchIndex = 0, 242 | a, result, startValues, startNum, color, startValue, endValue, endNum, chunk, endUnit, startUnit, relative, endValues; 243 | pt.b = start; 244 | pt.e = end; 245 | start += ""; //ensure values are strings 246 | end += ""; 247 | if (end === "auto") { 248 | target.style[prop] = end; 249 | end = _getComputedProperty(target, prop) || end; 250 | target.style[prop] = start; 251 | } 252 | a = [start, end]; 253 | _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(). 254 | start = a[0]; 255 | end = a[1]; 256 | startValues = start.match(_numWithUnitExp) || []; 257 | endValues = end.match(_numWithUnitExp) || []; 258 | if (endValues.length) { 259 | while ((result = _numWithUnitExp.exec(end))) { 260 | endValue = result[0]; 261 | chunk = end.substring(index, result.index); 262 | if (color) { 263 | color = (color + 1) % 5; 264 | } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") { 265 | color = 1; 266 | } 267 | if (endValue !== (startValue = startValues[matchIndex++] || "")) { 268 | startNum = parseFloat(startValue) || 0; 269 | startUnit = startValue.substr((startNum + "").length); 270 | relative = (endValue.charAt(1) === "=") ? +(endValue.charAt(0) + "1") : 0; 271 | if (relative) { 272 | endValue = endValue.substr(2); 273 | } 274 | endNum = parseFloat(endValue); 275 | endUnit = endValue.substr((endNum + "").length); 276 | index = _numWithUnitExp.lastIndex - endUnit.length; 277 | if (!endUnit) { //if something like "perspective:300" is passed in and we must add a unit to the end 278 | endUnit = endUnit || _config.units[prop] || startUnit; 279 | if (index === end.length) { 280 | end += endUnit; 281 | pt.e += endUnit; 282 | } 283 | } 284 | if (startUnit !== endUnit) { 285 | startNum = _convertToUnit(target, prop, startValue, endUnit) || 0; 286 | } 287 | //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. 288 | pt._pt = { 289 | _next:pt._pt, 290 | 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. 291 | s:startNum, 292 | c:relative ? relative * endNum : endNum - startNum, 293 | m:(color && color < 4) ? Math.round : 0 294 | }; 295 | } 296 | } 297 | 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) 298 | } else { 299 | pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue; 300 | } 301 | if (_relExp.test(end)) { 302 | 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). 303 | } 304 | 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. 305 | return pt; 306 | }, 307 | _keywordToPercent = {top:"0%", bottom:"100%", left:"0%", right:"100%", center:"50%"}, 308 | _convertKeywordsToPercentages = value => { 309 | let split = value.split(" "), 310 | x = split[0], 311 | y = split[1] || "50%"; 312 | if (x === "top" || x === "bottom" || y === "left" || y === "right") { //the user provided them in the wrong order, so flip them 313 | value = x; 314 | x = y; 315 | y = value; 316 | } 317 | split[0] = _keywordToPercent[x] || x; 318 | split[1] = _keywordToPercent[y] || y; 319 | return split.join(" "); 320 | }, 321 | _renderClearProps = (ratio, data) => { 322 | if (data.tween && data.tween._time === data.tween._dur) { 323 | let target = data.t, 324 | style = target.style, 325 | props = data.u, 326 | cache = target._gsap, 327 | prop, clearTransforms, i; 328 | if (props === "all" || props === true) { 329 | style.cssText = ""; 330 | clearTransforms = 1; 331 | } else { 332 | props = props.split(","); 333 | i = props.length; 334 | while (--i > -1) { 335 | prop = props[i]; 336 | if (_transformProps[prop]) { 337 | clearTransforms = 1; 338 | prop = (prop === "transformOrigin") ? _transformOriginProp : _transformProp; 339 | } 340 | _removeProperty(target, prop); 341 | } 342 | } 343 | if (clearTransforms) { 344 | _removeProperty(target, _transformProp); 345 | if (cache) { 346 | cache.svg && target.removeAttribute("transform"); 347 | _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. 348 | cache.uncache = 1; 349 | } 350 | } 351 | } 352 | }, 353 | // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list. 354 | _specialProps = { 355 | clearProps(plugin, target, property, endValue, tween) { 356 | if (tween.data !== "isFromStart") { 357 | let pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps); 358 | pt.u = endValue; 359 | pt.pr = -10; 360 | pt.tween = tween; 361 | plugin._props.push(property); 362 | return 1; 363 | } 364 | } 365 | /* className feature (about 0.4kb gzipped). 366 | , className(plugin, target, property, endValue, tween) { 367 | let _renderClassName = (ratio, data) => { 368 | data.css.render(ratio, data.css); 369 | if (!ratio || ratio === 1) { 370 | let inline = data.rmv, 371 | target = data.t, 372 | p; 373 | target.setAttribute("class", ratio ? data.e : data.b); 374 | for (p in inline) { 375 | _removeProperty(target, p); 376 | } 377 | } 378 | }, 379 | _getAllStyles = (target) => { 380 | let styles = {}, 381 | computed = getComputedStyle(target), 382 | p; 383 | for (p in computed) { 384 | if (isNaN(p) && p !== "cssText" && p !== "length") { 385 | styles[p] = computed[p]; 386 | } 387 | } 388 | _setDefaults(styles, _parseTransform(target, 1)); 389 | return styles; 390 | }, 391 | startClassList = target.getAttribute("class"), 392 | style = target.style, 393 | cssText = style.cssText, 394 | cache = target._gsap, 395 | classPT = cache.classPT, 396 | inlineToRemoveAtEnd = {}, 397 | 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) : "")}, 398 | changingVars = {}, 399 | startVars = _getAllStyles(target), 400 | transformRelated = /(transform|perspective)/i, 401 | endVars, p; 402 | if (classPT) { 403 | classPT.r(1, classPT.d); 404 | _removeLinkedListItem(classPT.d.plugin, classPT, "_pt"); 405 | } 406 | target.setAttribute("class", data.e); 407 | endVars = _getAllStyles(target, true); 408 | target.setAttribute("class", startClassList); 409 | for (p in endVars) { 410 | if (endVars[p] !== startVars[p] && !transformRelated.test(p)) { 411 | changingVars[p] = endVars[p]; 412 | if (!style[p] && style[p] !== "0") { 413 | inlineToRemoveAtEnd[p] = 1; 414 | } 415 | } 416 | } 417 | cache.classPT = plugin._pt = new PropTween(plugin._pt, target, "className", 0, 0, _renderClassName, data, 0, -11); 418 | 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/. 419 | 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). 420 | } 421 | _parseTransform(target, true); //to clear the caching of transforms 422 | data.css = new gsap.plugins.css(); 423 | data.css.init(target, changingVars, tween); 424 | plugin._props.push(...data.css._props); 425 | return 1; 426 | } 427 | */ 428 | }, 429 | 430 | 431 | 432 | 433 | 434 | /* 435 | * -------------------------------------------------------------------------------------- 436 | * TRANSFORMS 437 | * -------------------------------------------------------------------------------------- 438 | */ 439 | _identity2DMatrix = [1,0,0,1,0,0], 440 | _rotationalProperties = {}, 441 | _isNullTransform = value => (value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value), 442 | _getComputedTransformMatrixAsArray = target => { 443 | let matrixString = _getComputedProperty(target, _transformProp); 444 | return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round); 445 | }, 446 | _getMatrix = (target, force2D) => { 447 | let cache = target._gsap || _getCache(target), 448 | style = target.style, 449 | matrix = _getComputedTransformMatrixAsArray(target), 450 | parent, nextSibling, temp, addedToDOM; 451 | if (cache.svg && target.getAttribute("transform")) { 452 | 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. 453 | matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f]; 454 | return (matrix.join(",") === "1,0,0,1,0,0") ? _identity2DMatrix : matrix; 455 | } 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 456 | //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). 457 | temp = style.display; 458 | style.display = "block"; 459 | parent = target.parentNode; 460 | 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 461 | addedToDOM = 1; //flag 462 | nextSibling = target.nextSibling; 463 | _docElement.appendChild(target); //we must add it to the DOM in order to get values properly 464 | } 465 | matrix = _getComputedTransformMatrixAsArray(target); 466 | temp ? (style.display = temp) : _removeProperty(target, "display"); 467 | if (addedToDOM) { 468 | nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target); 469 | } 470 | } 471 | return (force2D && matrix.length > 6) ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix; 472 | }, 473 | _applySVGOrigin = (target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) => { 474 | let cache = target._gsap, 475 | matrix = matrixArray || _getMatrix(target, true), 476 | xOriginOld = cache.xOrigin || 0, 477 | yOriginOld = cache.yOrigin || 0, 478 | xOffsetOld = cache.xOffset || 0, 479 | yOffsetOld = cache.yOffset || 0, 480 | a = matrix[0], 481 | b = matrix[1], 482 | c = matrix[2], 483 | d = matrix[3], 484 | tx = matrix[4], 485 | ty = matrix[5], 486 | originSplit = origin.split(" "), 487 | xOrigin = parseFloat(originSplit[0]) || 0, 488 | yOrigin = parseFloat(originSplit[1]) || 0, 489 | bounds, determinant, x, y; 490 | if (!originIsAbsolute) { 491 | bounds = _getBBox(target); 492 | xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin); 493 | yOrigin = bounds.y + (~((originSplit[1] || originSplit[0]).indexOf("%")) ? yOrigin / 100 * bounds.height : yOrigin); 494 | } 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. 495 | x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + ((c * ty - d * tx) / determinant); 496 | y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - ((a * ty - b * tx) / determinant); 497 | xOrigin = x; 498 | yOrigin = y; 499 | } 500 | if (smooth || (smooth !== false && cache.smooth)) { 501 | tx = xOrigin - xOriginOld; 502 | ty = yOrigin - yOriginOld; 503 | cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx; 504 | cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty; 505 | } else { 506 | cache.xOffset = cache.yOffset = 0; 507 | } 508 | cache.xOrigin = xOrigin; 509 | cache.yOrigin = yOrigin; 510 | cache.smooth = !!smooth; 511 | cache.origin = origin; 512 | cache.originIsAbsolute = !!originIsAbsolute; 513 | 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). 514 | if (pluginToAddPropTweensTo) { 515 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin); 516 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin); 517 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset); 518 | _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset); 519 | } 520 | target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin); 521 | }, 522 | _parseTransform = (target, uncache) => { 523 | let cache = target._gsap || new GSCache(target); 524 | if ("x" in cache && !uncache && !cache.uncache) { 525 | return cache; 526 | } 527 | let style = target.style, 528 | invertedScaleX = cache.scaleX < 0, 529 | px = "px", 530 | deg = "deg", 531 | origin = _getComputedProperty(target, _transformOriginProp) || "0", 532 | x, y, z, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY, perspective, xOrigin, yOrigin, 533 | matrix, angle, cos, sin, a, b, c, d, a12, a22, t1, t2, t3, a13, a23, a33, a42, a43, a32; 534 | x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0; 535 | scaleX = scaleY = 1; 536 | cache.svg = !!(target.getCTM && _isSVG(target)); 537 | matrix = _getMatrix(target, cache.svg); 538 | if (cache.svg) { 539 | t1 = !cache.uncache && target.getAttribute("data-svg-origin"); 540 | _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix); 541 | } 542 | xOrigin = cache.xOrigin || 0; 543 | yOrigin = cache.yOrigin || 0; 544 | if (matrix !== _identity2DMatrix) { 545 | a = matrix[0]; //a11 546 | b = matrix[1]; //a21 547 | c = matrix[2]; //a31 548 | d = matrix[3]; //a41 549 | x = a12 = matrix[4]; 550 | y = a22 = matrix[5]; 551 | 552 | //2D matrix 553 | if (matrix.length === 6) { 554 | scaleX = Math.sqrt(a * a + b * b); 555 | scaleY = Math.sqrt(d * d + c * c); 556 | 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). 557 | skewX = (c || d) ? _atan2(c, d) * _RAD2DEG + rotation : 0; 558 | skewX && (scaleY *= Math.cos(skewX * _DEG2RAD)); 559 | if (cache.svg) { 560 | x -= xOrigin - (xOrigin * a + yOrigin * c); 561 | y -= yOrigin - (xOrigin * b + yOrigin * d); 562 | } 563 | 564 | //3D matrix 565 | } else { 566 | a32 = matrix[6]; 567 | a42 = matrix[7]; 568 | a13 = matrix[8]; 569 | a23 = matrix[9]; 570 | a33 = matrix[10]; 571 | a43 = matrix[11]; 572 | x = matrix[12]; 573 | y = matrix[13]; 574 | z = matrix[14]; 575 | 576 | angle = _atan2(a32, a33); 577 | rotationX = angle * _RAD2DEG; 578 | //rotationX 579 | if (angle) { 580 | cos = Math.cos(-angle); 581 | sin = Math.sin(-angle); 582 | t1 = a12*cos+a13*sin; 583 | t2 = a22*cos+a23*sin; 584 | t3 = a32*cos+a33*sin; 585 | a13 = a12*-sin+a13*cos; 586 | a23 = a22*-sin+a23*cos; 587 | a33 = a32*-sin+a33*cos; 588 | a43 = a42*-sin+a43*cos; 589 | a12 = t1; 590 | a22 = t2; 591 | a32 = t3; 592 | } 593 | //rotationY 594 | angle = _atan2(-c, a33); 595 | rotationY = angle * _RAD2DEG; 596 | if (angle) { 597 | cos = Math.cos(-angle); 598 | sin = Math.sin(-angle); 599 | t1 = a*cos-a13*sin; 600 | t2 = b*cos-a23*sin; 601 | t3 = c*cos-a33*sin; 602 | a43 = d*sin+a43*cos; 603 | a = t1; 604 | b = t2; 605 | c = t3; 606 | } 607 | //rotationZ 608 | angle = _atan2(b, a); 609 | rotation = angle * _RAD2DEG; 610 | if (angle) { 611 | cos = Math.cos(angle); 612 | sin = Math.sin(angle); 613 | t1 = a*cos+b*sin; 614 | t2 = a12*cos+a22*sin; 615 | b = b*cos-a*sin; 616 | a22 = a22*cos-a12*sin; 617 | a = t1; 618 | a12 = t2; 619 | } 620 | 621 | 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. 622 | rotationX = rotation = 0; 623 | rotationY = 180 - rotationY; 624 | } 625 | scaleX = _round(Math.sqrt(a * a + b * b + c * c)); 626 | scaleY = _round(Math.sqrt(a22 * a22 + a32 * a32)); 627 | angle = _atan2(a12, a22); 628 | skewX = (Math.abs(angle) > 0.0002) ? angle * _RAD2DEG : 0; 629 | perspective = a43 ? 1 / ((a43 < 0) ? -a43 : a43) : 0; 630 | } 631 | 632 | 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). 633 | t1 = target.getAttribute("transform"); 634 | cache.forceCSS = target.setAttribute("transform", "") || (!_isNullTransform(_getComputedProperty(target, _transformProp))); 635 | t1 && target.setAttribute("transform", t1); 636 | } 637 | } 638 | 639 | if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) { 640 | if (invertedScaleX) { 641 | scaleX *= -1; 642 | skewX += (rotation <= 0) ? 180 : -180; 643 | rotation += (rotation <= 0) ? 180 : -180; 644 | } else { 645 | scaleY *= -1; 646 | skewX += (skewX <= 0) ? 180 : -180; 647 | } 648 | } 649 | 650 | cache.x = ((cache.xPercent = (x && Math.round(target.offsetWidth / 2) === Math.round(-x)) ? -50 : 0) ? 0 : x) + px; 651 | cache.y = ((cache.yPercent = (y && Math.round(target.offsetHeight / 2) === Math.round(-y)) ? -50 : 0) ? 0 : y) + px; 652 | cache.z = z + px; 653 | cache.scaleX = _round(scaleX); 654 | cache.scaleY = _round(scaleY); 655 | cache.rotation = _round(rotation) + deg; 656 | cache.rotationX = _round(rotationX) + deg; 657 | cache.rotationY = _round(rotationY) + deg; 658 | cache.skewX = skewX + deg; 659 | cache.skewY = skewY + deg; 660 | cache.transformPerspective = perspective + px; 661 | if ((cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0)) { 662 | style[_transformOriginProp] = _firstTwoOnly(origin); 663 | } 664 | cache.xOffset = cache.yOffset = 0; 665 | cache.force3D = _config.force3D; 666 | cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms; 667 | cache.uncache = 0; 668 | return cache; 669 | }, 670 | _firstTwoOnly = value => (value = value.split(" "))[0] + " " + value[1], //for handling transformOrigin values, stripping out the 3rd dimension 671 | _addPxTranslate = (target, start, value) => { 672 | let unit = getUnit(start); 673 | return _round(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit; 674 | }, 675 | _renderNon3DTransforms = (ratio, cache) => { 676 | cache.z = "0px"; 677 | cache.rotationY = cache.rotationX = "0deg"; 678 | cache.force3D = 0; 679 | _renderCSSTransforms(ratio, cache); 680 | }, 681 | _zeroDeg = "0deg", 682 | _zeroPx = "0px", 683 | _endParenthesis = ") ", 684 | _renderCSSTransforms = function(ratio, cache) { 685 | let {xPercent, yPercent, x, y, z, rotation, rotationY, rotationX, skewX, skewY, scaleX, scaleY, transformPerspective, force3D, target, zOrigin} = cache || this, 686 | transforms = "", 687 | use3D = (force3D === "auto" && ratio && ratio !== 1) || force3D === true; 688 | 689 | // 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) 690 | if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) { 691 | let angle = parseFloat(rotationY) * _DEG2RAD, 692 | a13 = Math.sin(angle), 693 | a33 = Math.cos(angle), 694 | cos; 695 | angle = parseFloat(rotationX) * _DEG2RAD; 696 | cos = Math.cos(angle); 697 | x = _addPxTranslate(target, x, a13 * cos * -zOrigin); 698 | y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin); 699 | z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin); 700 | } 701 | 702 | if (transformPerspective !== _zeroPx) { 703 | transforms += "perspective(" + transformPerspective + _endParenthesis; 704 | } 705 | if (xPercent || yPercent) { 706 | transforms += "translate(" + xPercent + "%, " + yPercent + "%) "; 707 | } 708 | if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) { 709 | transforms += (z !== _zeroPx || use3D) ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis; 710 | } 711 | if (rotation !== _zeroDeg) { 712 | transforms += "rotate(" + rotation + _endParenthesis; 713 | } 714 | if (rotationY !== _zeroDeg) { 715 | transforms += "rotateY(" + rotationY + _endParenthesis; 716 | } 717 | if (rotationX !== _zeroDeg) { 718 | transforms += "rotateX(" + rotationX + _endParenthesis; 719 | } 720 | if (skewX !== _zeroDeg || skewY !== _zeroDeg) { 721 | transforms += "skew(" + skewX + ", " + skewY + _endParenthesis; 722 | } 723 | if (scaleX !== 1 || scaleY !== 1) { 724 | transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis; 725 | } 726 | target.style[_transformProp] = transforms || "translate(0, 0)"; 727 | }, 728 | _renderSVGTransforms = function(ratio, cache) { 729 | let {xPercent, yPercent, x, y, rotation, skewX, skewY, scaleX, scaleY, target, xOrigin, yOrigin, xOffset, yOffset, forceCSS} = cache || this, 730 | tx = parseFloat(x), 731 | ty = parseFloat(y), 732 | a11, a21, a12, a22, temp; 733 | rotation = parseFloat(rotation); 734 | skewX = parseFloat(skewX); 735 | skewY = parseFloat(skewY); 736 | 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. 737 | skewY = parseFloat(skewY); 738 | skewX += skewY; 739 | rotation += skewY; 740 | } 741 | if (rotation || skewX) { 742 | rotation *= _DEG2RAD; 743 | skewX *= _DEG2RAD; 744 | a11 = Math.cos(rotation) * scaleX; 745 | a21 = Math.sin(rotation) * scaleX; 746 | a12 = Math.sin(rotation - skewX) * -scaleY; 747 | a22 = Math.cos(rotation - skewX) * scaleY; 748 | if (skewX) { 749 | skewY *= _DEG2RAD; 750 | temp = Math.tan(skewX - skewY); 751 | temp = Math.sqrt(1 + temp * temp); 752 | a12 *= temp; 753 | a22 *= temp; 754 | if (skewY) { 755 | temp = Math.tan(skewY); 756 | temp = Math.sqrt(1 + temp * temp); 757 | a11 *= temp; 758 | a21 *= temp; 759 | } 760 | } 761 | a11 = _round(a11); 762 | a21 = _round(a21); 763 | a12 = _round(a12); 764 | a22 = _round(a22); 765 | } else { 766 | a11 = scaleX; 767 | a22 = scaleY; 768 | a21 = a12 = 0; 769 | } 770 | if ((tx && !~(x + "").indexOf("px")) || (ty && !~(y + "").indexOf("px"))) { 771 | tx = _convertToUnit(target, "x", x, "px"); 772 | ty = _convertToUnit(target, "y", y, "px"); 773 | } 774 | if (xOrigin || yOrigin || xOffset || yOffset) { 775 | tx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset); 776 | ty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset); 777 | } 778 | if (xPercent || yPercent) { 779 | //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the translation to simulate it. 780 | temp = target.getBBox(); 781 | tx = _round(tx + xPercent / 100 * temp.width); 782 | ty = _round(ty + yPercent / 100 * temp.height); 783 | } 784 | temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")"; 785 | target.setAttribute("transform", temp); 786 | if (forceCSS) { //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!) 787 | target.style[_transformProp] = temp; 788 | } 789 | }, 790 | _addRotationalPropTween = function(plugin, target, property, startNum, endValue, relative) { 791 | let cap = 360, 792 | isString = _isString(endValue), 793 | endNum = parseFloat(endValue) * ((isString && ~endValue.indexOf("rad")) ? _RAD2DEG : 1), 794 | change = relative ? endNum * relative : endNum - startNum, 795 | finalValue = (startNum + change) + "deg", 796 | direction, pt; 797 | if (isString) { 798 | direction = endValue.split("_")[1]; 799 | if (direction === "short") { 800 | change %= cap; 801 | if (change !== change % (cap / 2)) { 802 | change += (change < 0) ? cap : -cap; 803 | } 804 | } 805 | if (direction === "cw" && change < 0) { 806 | change = ((change + cap * _bigNum) % cap) - ~~(change / cap) * cap; 807 | } else if (direction === "ccw" && change > 0) { 808 | change = ((change - cap * _bigNum) % cap) - ~~(change / cap) * cap; 809 | } 810 | } 811 | plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd); 812 | pt.e = finalValue; 813 | pt.u = "deg"; 814 | plugin._props.push(property); 815 | return pt; 816 | }, 817 | _addRawTransformPTs = (plugin, transforms, target) => { //for handling cases where someone passes in a whole transform string, like transform: "scale(2, 3) rotate(20deg) translateY(30em)" 818 | let style = _tempDivStyler.style, 819 | startCache = target._gsap, 820 | exclude = "perspective,force3D,transformOrigin,svgOrigin", 821 | endCache, p, startValue, endValue, startNum, endNum, startUnit, endUnit; 822 | style.cssText = getComputedStyle(target).cssText + ";position:absolute;display:block;"; //%-based translations will fail unless we set the width/height to match the original target (and padding/borders can affect it) 823 | style[_transformProp] = transforms; 824 | _doc.body.appendChild(_tempDivStyler); 825 | endCache = _parseTransform(_tempDivStyler, 1); 826 | for (p in _transformProps) { 827 | startValue = startCache[p]; 828 | endValue = endCache[p]; 829 | if (startValue !== endValue && exclude.indexOf(p) < 0) { //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case. 830 | startUnit = getUnit(startValue); 831 | endUnit = getUnit(endValue); 832 | startNum = (startUnit !== endUnit) ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue); 833 | endNum = parseFloat(endValue); 834 | plugin._pt = new PropTween(plugin._pt, startCache, p, startNum, endNum - startNum, _renderCSSProp); 835 | plugin._pt.u = endUnit || 0; 836 | plugin._props.push(p); 837 | } 838 | } 839 | _doc.body.removeChild(_tempDivStyler); 840 | }; 841 | 842 | // 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. 843 | _forEachName("padding,margin,Width,Radius", (name, index) => { 844 | let t = "Top", 845 | r = "Right", 846 | b = "Bottom", 847 | l = "Left", 848 | props = (index < 3 ? [t,r,b,l] : [t+l, t+r, b+r, b+l]).map(side => index < 2 ? name + side : "border" + side + name); 849 | _specialProps[(index > 1 ? "border" + name : name)] = function(plugin, target, property, endValue, tween) { 850 | let a, vars; 851 | if (arguments.length < 4) { // getter, passed target, property, and unit (from _get()) 852 | a = props.map(prop => _get(plugin, prop, property)); 853 | vars = a.join(" "); 854 | return vars.split(a[0]).length === 5 ? a[0] : vars; 855 | } 856 | a = (endValue + "").split(" "); 857 | vars = {}; 858 | props.forEach((prop, i) => vars[prop] = a[i] = a[i] || a[(((i - 1) / 2) | 0)]); 859 | plugin.init(target, vars, tween); 860 | } 861 | }); 862 | 863 | 864 | export const CSSPlugin = { 865 | name: "css", 866 | register: _initCore, 867 | targetTest(target) { 868 | return target.style && target.nodeType; 869 | }, 870 | init(target, vars, tween, index, targets) { 871 | let props = this._props, 872 | style = target.style, 873 | startValue, endValue, endNum, startNum, type, specialProp, p, startUnit, endUnit, relative, isTransformRelated, transformPropTween, cache, smooth, hasPriority; 874 | _pluginInitted || _initCore(); 875 | for (p in vars) { 876 | if (p === "autoRound") { 877 | continue; 878 | } 879 | endValue = vars[p]; 880 | if (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) { //plugins 881 | continue; 882 | } 883 | type = typeof(endValue); 884 | specialProp = _specialProps[p]; 885 | if (type === "function") { 886 | endValue = endValue.call(tween, index, target, targets); 887 | type = typeof(endValue); 888 | } 889 | if (type === "string" && ~endValue.indexOf("random(")) { 890 | endValue = _replaceRandom(endValue); 891 | } 892 | if (specialProp) { 893 | if (specialProp(this, target, p, endValue, tween)) { 894 | hasPriority = 1; 895 | } 896 | } else if (p.substr(0,2) === "--") { //CSS variable 897 | this.add(style, "setProperty", getComputedStyle(target).getPropertyValue(p) + "", endValue + "", index, targets, 0, 0, p); 898 | } else if (type !== "undefined") { 899 | startValue = _get(target, p); 900 | startNum = parseFloat(startValue); 901 | relative = (type === "string" && endValue.charAt(1) === "=") ? +(endValue.charAt(0) + "1") : 0; 902 | if (relative) { 903 | endValue = endValue.substr(2); 904 | } 905 | endNum = parseFloat(endValue); 906 | if (p in _propertyAliases) { 907 | 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. 908 | 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) 909 | startNum = 0; 910 | } 911 | _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum); 912 | } 913 | if (p !== "scale" && p !== "transform") { 914 | p = _propertyAliases[p]; 915 | ~p.indexOf(",") && (p = p.split(",")[0]); 916 | } 917 | } 918 | 919 | isTransformRelated = (p in _transformProps); 920 | 921 | //--- TRANSFORM-RELATED --- 922 | if (isTransformRelated) { 923 | if (!transformPropTween) { 924 | cache = target._gsap; 925 | cache.renderTransform || _parseTransform(target); // 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. 926 | smooth = (vars.smoothOrigin !== false && cache.smooth); 927 | 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) 928 | 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. 929 | } 930 | if (p === "scale") { 931 | this._pt = new PropTween(this._pt, cache, "scaleY", cache.scaleY, relative ? relative * endNum : endNum - cache.scaleY); 932 | props.push("scaleY", p); 933 | p += "X"; 934 | } else if (p === "transformOrigin") { 935 | endValue = _convertKeywordsToPercentages(endValue); //in case something like "left top" or "bottom right" is passed in. Convert to percentages. 936 | if (cache.svg) { 937 | _applySVGOrigin(target, endValue, 0, smooth, 0, this); 938 | } else { 939 | endUnit = parseFloat(endValue.split(" ")[2]) || 0; //handle the zOrigin separately! 940 | endUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit); 941 | _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue)); 942 | } 943 | continue; 944 | } else if (p === "svgOrigin") { 945 | _applySVGOrigin(target, endValue, 1, smooth, 0, this); 946 | continue; 947 | } else if (p in _rotationalProperties) { 948 | _addRotationalPropTween(this, cache, p, startNum, endValue, relative); 949 | continue; 950 | 951 | } else if (p === "smoothOrigin") { 952 | _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue); 953 | continue; 954 | } else if (p === "force3D") { 955 | cache[p] = endValue; 956 | continue; 957 | } else if (p === "transform") { 958 | _addRawTransformPTs(this, endValue, target); 959 | continue; 960 | } 961 | } else if (!(p in style)) { 962 | p = _checkPropPrefix(p) || p; 963 | } 964 | 965 | if (isTransformRelated || ((endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && (p in style))) { 966 | startUnit = (startValue + "").substr((startNum + "").length); 967 | endNum || (endNum = 0); // protect against NaN 968 | endUnit = getUnit(endValue) || ((p in _config.units) ? _config.units[p] : startUnit); 969 | startUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit)); 970 | this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, relative ? relative * endNum : endNum - startNum, (endUnit === "px" && vars.autoRound !== false && !isTransformRelated) ? _renderRoundedCSSProp : _renderCSSProp); 971 | this._pt.u = endUnit || 0; 972 | if (startUnit !== 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) 973 | this._pt.b = startValue; 974 | this._pt.r = _renderCSSPropWithBeginning; 975 | } 976 | } else if (!(p in style)) { 977 | 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. 978 | this.add(target, p, target[p], endValue, index, targets); 979 | } else { 980 | _missingPlugin(p, endValue); 981 | continue; 982 | } 983 | } else { 984 | _tweenComplexCSSString.call(this, target, p, startValue, endValue); 985 | } 986 | props.push(p); 987 | } 988 | } 989 | hasPriority && _sortPropTweensByPriority(this); 990 | 991 | }, 992 | get: _get, 993 | aliases: _propertyAliases, 994 | 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. 995 | let p = _propertyAliases[property]; 996 | (p && p.indexOf(",") < 0) && (property = p); 997 | 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); 998 | }, 999 | core: { _removeProperty, _getMatrix } 1000 | 1001 | }; 1002 | 1003 | gsap.utils.checkPrefix = _checkPropPrefix; 1004 | (function(positionAndScale, rotation, others, aliases) { 1005 | let all = _forEachName(positionAndScale + "," + rotation + "," + others, name => {_transformProps[name] = 1}); 1006 | _forEachName(rotation, name => {_config.units[name] = "deg"; _rotationalProperties[name] = 1}); 1007 | _propertyAliases[all[13]] = positionAndScale + "," + rotation; 1008 | _forEachName(aliases, name => { 1009 | let split = name.split(":"); 1010 | _propertyAliases[split[1]] = all[split[0]]; 1011 | }); 1012 | })("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"); 1013 | _forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", name => {_config.units[name] = "px"}); 1014 | 1015 | gsap.registerPlugin(CSSPlugin); 1016 | 1017 | export { CSSPlugin as default, _getBBox, _createElement, _checkPropPrefix as checkPrefix }; --------------------------------------------------------------------------------