├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── favicon.a64e97b2.ico ├── index.01b4f97a.css ├── index.b5e7c14d.js ├── index.e9a2d1b4.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── index.html └── js ├── index.js ├── menu.js ├── menuConfig.js ├── menuItem.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Letter Shuffle Animation for a Menu 2 | 3 | A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/03/shufflemenu_feat-1.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=59837) 8 | 9 | [Demo](http://tympanus.net/Development/LetterShuffleMenu/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from [Unsplash](https://unsplash.com/) 35 | 36 | ## Misc 37 | 38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 39 | 40 | ## License 41 | [MIT](LICENSE) 42 | 43 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LetterShuffleMenu/32cf37157f32f6e3f323de63d872319704429cc7/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.01b4f97a.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:18px}body{--color-text:#867a8b;--color-text-alt:#9b7749;--color-link:#6b4e65;--color-link-hover:#9b7749;--color-menu:#e3dce5;--color-menu-hover:#af449a;--color-menu-border:#4c2d4e;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--size-menu:6vh;background:linear-gradient(180deg,#2b192c,#1a191c);color:var(--color-text);font-family:acumin-pro-wide,sans-serif;font-weight:300;margin:0}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:10000}.js .loading:before{background:linear-gradient(180deg,#2b192c,#1a191c);height:100%;left:0;top:0;width:100%}.js .loading:after{animation:loaderAnim .7s linear infinite alternate forwards;background:var(--color-link);border-radius:50%;height:60px;left:50%;margin:-30px 0 0 -30px;opacity:.4;top:50%;width:60px}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{color:var(--color-link);text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent}.content a:focus-visible,.frame a:focus-visible{background:transparent;outline:2px solid var(--color-link)}.hover-line{overflow:hidden;position:relative;white-space:nowrap}.hover-line:before{background:currentColor;content:"";height:1px;position:absolute;top:92%;transform-origin:0 50%;transition:transform .3s;width:100%}.hover-line:hover:before{transform:scaleX(0);transform-origin:100% 50%}.unbutton{background:none;border:0;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}main{display:grid;grid-template-areas:"side side side frame frame frame" "content content content content content content";grid-template-columns:10vw 10vh 10vw 5vw 32vw 1fr;grid-template-rows:auto 1fr;min-height:100vh;width:100%}.no-js main{grid-template-areas:"content content content content content content"}.frame{background:#2b192c;color:var(--color-text-alt);grid-area:frame;padding:.75rem 1.5rem;position:relative}.frame a{pointer-events:auto}.frame__title{font-size:1rem;font-weight:300;grid-area:title;justify-self:start;margin:0}.frame__links{grid-area:links;justify-self:end;margin:1rem 0;padding:0}.frame__links a:not(:last-child){margin-right:1rem}.content{display:grid;grid-area:content;padding:1rem 5vw;place-content:center}.button-next{align-self:center;background:linear-gradient(180deg,#9b498a,#9b7749);border-radius:70px 0 0 70px;cursor:not-allowed;display:none;grid-area:content;height:140px;justify-self:end;place-items:center;width:70px}.color-alt{color:var(--color-text-alt)}.menu{border-bottom:1px solid var(--color-menu-border);display:grid;grid-area:1/1/2/7;grid-template-columns:5vw 5vw 11vh 5vw 1fr;grid-template-rows:auto 1fr;pointer-events:none;position:relative;z-index:100}.no-js .menu{display:none}.menu__bg{background:linear-gradient(180deg,#2b192c,#1a191c);border-right:1px solid var(--color-menu-border);grid-area:1/1/3/6;height:100%;left:0;pointer-events:none;position:absolute;transform:translateX(-100%) translateX(20vw) translateX(11vh);width:100%}.menu__button{align-self:start;cursor:pointer;grid-area:1/1/2/3;justify-self:start;margin:1.25rem;pointer-events:auto;position:relative}.menu__button path{stroke:var(--color-link);fill:none}.menu__button:focus-visible path,.menu__button:hover path{stroke:var(--color-menu-hover)}.menu__button-cross{opacity:0}.menu__items{align-items:flex-start;display:flex;flex-direction:column;grid-area:2/1/2/6;justify-content:start;margin:1rem;padding-bottom:1rem;pointer-events:none;position:relative}.menu--open .menu__items{pointer-events:auto}.menu__item{color:var(--color-menu);cursor:pointer;font-family:space-mono,monospace;font-size:var(--size-menu);font-weight:400;line-height:.9;position:relative;text-transform:uppercase}.menu__item span{pointer-events:none}.menu__item .letter-wrap span.char,.menu__item .letter-wrap__inner span,.menu__item .letter-wrap__inner span:first-child{transition:color .2s ease}.menu--open .menu__item:focus .letter-wrap span.char,.menu--open .menu__item:focus .letter-wrap__inner span,.menu--open .menu__item:focus .letter-wrap__inner span:first-child,.menu--open .menu__item:hover .letter-wrap span.char,.menu--open .menu__item:hover .letter-wrap__inner span,.menu--open .menu__item:hover .letter-wrap__inner span:first-child{color:var(--color-menu-hover)}.menu--open .menu__item:focus-visible{background:transparent;outline:2px solid var(--color-link)}.menu__item.splitting .word{display:flex}.menu__item.splitting .char{display:flex;flex:none;justify-content:center;transform-origin:50% 100%;will-change:transform,color}.menu__item .char{color:var(--color-link)}.letter-wrap,.letter-wrap__inner span,.menu__item.splitting .char{display:flex;justify-content:center;width:calc(var(--size-menu)*.6666);will-change:transform,color}.letter-wrap__inner span:first-child{color:var(--color-link)}.letter-wrap{align-items:flex-end;display:flex;flex:none;height:calc(var(--size-menu)*.8833);justify-content:center;overflow:hidden}.letter-wrap>span:not(.letter-wrap__inner){opacity:0}.letter-wrap__inner{display:flex;flex-direction:column;height:fit-content}.menu__tagline{display:none;font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:1.75rem;font-style:normal;font-weight:300;grid-area:1/4/2/5;margin:12.5vh 0 0 1.5vw;text-align:right;text-transform:none;transform:rotate(180deg);-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}@media screen and (min-width:54em){body{--size-menu:15vh}main{grid-template-areas:"side side side content content content";grid-template-rows:100%;height:100vh;overflow:hidden}.menu{border:0;grid-area:1/1/2/6;grid-template-rows:100%}.menu__items{grid-area:1/3/2/6;justify-content:center;margin:1vh 0 0;padding-bottom:0}.frame{align-content:space-between;background:none;display:grid;grid-area:content;grid-template-areas:"... sponsor" "... arrow" "title links";grid-template-columns:50% 50%;grid-template-rows:auto auto auto;pointer-events:none}.frame:after{background:linear-gradient(180deg,#2b192c,#1a191c);content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity 1s ease-in-out .3s;width:100%;z-index:10}.menu--open~.frame:after{opacity:.8;pointer-events:auto;transition-delay:0s}.button-next{display:grid}.menu__tagline{display:block}.menu__button{align-self:center;grid-area:1/1/2/2;justify-self:center;margin:0}.content{align-items:center;display:flex;justify-content:center;padding:0}.content__column{max-width:34ch;padding:0 1.5rem}.content__column:first-child{margin-top:-10vh}.content__column:last-child{margin-top:10vh}.frame__links{margin:0}}.splitting .char,.splitting .word{display:inline-block}.splitting .char{position:relative}.splitting .char:after,.splitting .char:before{content:attr(data-char);left:0;position:absolute;top:0;transition:inherit;user-select:none;visibility:hidden}.splitting{--word-center:calc((var(--word-total) - 1)/2);--char-center:calc((var(--char-total) - 1)/2);--line-center:calc((var(--line-total) - 1)/2)}.splitting .word{--word-percent:calc(var(--word-index)/var(--word-total));--line-percent:calc(var(--line-index)/var(--line-total))}.splitting .char{--char-percent:calc(var(--char-index)/var(--char-total));--char-offset:calc(var(--char-index) - var(--char-center));--distance:calc((var(--char-offset)*var(--char-offset))/var(--char-center));--distance-sine:calc(var(--char-offset)/var(--char-center));--distance-percent:(var(--distance)/var(--char-center))}.splitting.cells img{display:block;width:100%}@supports (display:grid){.splitting.cells{background-size:cover;overflow:hidden;position:relative;visibility:hidden}.splitting .cell-grid{background:inherit;display:grid;grid-template:repeat(var(--row-total),1fr) /repeat(var(--col-total),1fr);height:100%;left:0;position:absolute;top:0;width:100%}.splitting .cell{background:inherit;overflow:hidden;position:relative}.splitting .cell-inner{background:inherit;height:calc(100%*var(--row-total));left:calc(-100%*var(--col-index));position:absolute;top:calc(-100%*var(--row-index));visibility:visible;width:calc(100%*var(--col-total))}.splitting .cell{--center-x:calc((var(--col-total) - 1)/2);--center-y:calc((var(--row-total) - 1)/2);--offset-x:calc(var(--col-index) - var(--center-x));--offset-y:calc(var(--row-index) - var(--center-y));--distance-x:calc((var(--offset-x)*var(--offset-x))/var(--center-x));--distance-y:calc((var(--offset-y)*var(--offset-y))/var(--center-y))}} -------------------------------------------------------------------------------- /dist/index.b5e7c14d.js: -------------------------------------------------------------------------------- 1 | !function(){function t(t){return t&&t.__esModule?t.default:t}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var r=0;rt._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t},Vt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},jt=function t(e){return!e||e._ts&&t(e.parent)},Ht=function(t){return t._repeat?Wt(t._tTime,t=t.duration()+t._rDelay)*t:0},Wt=function(t,e){var r=Math.floor(t/=e);return t&&r===t?r-1:r},Gt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Qt=function(t){return t._end=St(t._start+(t._tDur/Math.abs(t._ts||t._rts||U)||0))},Zt=function(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=St(r._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Qt(t),r._dirty||Yt(r,t)),t},Kt=function(t,e){var r;if((e._time||e._initted&&!e._dur)&&(r=Gt(t.rawTime(),e),(!e._dur||he(0,e.totalDuration(),r)-e._tTime>U)&&e.render(r,!0)),Yt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&r.totalTime(r._tTime),r=r._dp;t._zTime=-1e-8}},$t=function(t,e,r,n){return e.parent&&Xt(e),e._start=St((Q(r)?r:r||t!==l?ae(t,r,e):t._time)+e._delay),e._end=St(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function(t,e,r,n,i){void 0===r&&(r="_first"),void 0===n&&(n="_last");var s,a=t[n];if(i)for(s=e[i];a&&a[i]>s;)a=a._prev;a?(e._next=a._next,a._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[n]=e,e._prev=a,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),re(e)||(t._recent=e),n||Kt(t,e),t},Jt=function(t,e){return(lt.ScrollTrigger||pt("scrollTrigger",e))&<.ScrollTrigger.create(e,t)},te=function(t,e,r,n){return rr(t,e),t._initted?!r&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&_!==Le.frame?(vt.push(t),t._lazy=[e,n],1):void 0:1},ee=function t(e){var r=e.parent;return r&&r._ts&&r._initted&&!r._lock&&(r.rawTime()<0||t(r))},re=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},ne=function(t,e,r,n){var i=t._repeat,s=St(e)||0,a=t._tTime/t._tDur;return a&&!n&&(t._time*=s/t._dur),t._dur=s,t._tDur=i?i<0?1e10:St(s*(i+1)+t._rDelay*i):s,a>0&&!n?Zt(t,t._tTime=t._tDur*a):t.parent&&Qt(t),r||Yt(t.parent,t),t},ie=function(t){return t instanceof Ke?Yt(t):ne(t,t._dur)},se={_start:0,endTime:mt,totalDuration:mt},ae=function t(e,r,n){var i,s,a,o=e.labels,u=e._recent||se,h=e.duration()>=N?u.endTime(!1):e._dur;return W(r)&&(isNaN(r)||r in o)?(s=r.charAt(0),a="%"===r.substr(-1),i=r.indexOf("="),"<"===s||">"===s?(i>=0&&(r=r.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(r.substr(1))||0)*(a?(i<0?u:n).totalDuration()/100:1)):i<0?(r in o||(o[r]=h),o[r]):(s=parseFloat(r.charAt(i-1)+r.substr(i+1)),a&&n&&(s=s/100*(rt(n)?n[0]:n).totalDuration()),i>1?t(e,r.substr(0,i-1),n)+s:h+s)):null==r?h:+r},oe=function(t,e,r){var n,i,s=Q(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=r,t){for(n=o,i=r;i&&!("immediateRender"in n);)n=i.vars.defaults||{},i=$(i.vars.inherit)&&i.parent;o.immediateRender=$(n.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new or(e[0],o,e[a+1])},ue=function(t,e){return t||0===t?e(t):e},he=function(t,e,r){return re?e:r},le=function(t,e){return W(t)&&(e=ht.exec(t))?t.substr(e.index+e[0].length):""},fe=[].slice,ce=function(t,e){return t&&K(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&K(t[0]))&&!t.nodeType&&t!==f},pe=function(t,e,r){return void 0===r&&(r=[]),t.forEach((function(t){var n;return W(t)&&!e||ce(t,1)?(n=r).push.apply(n,de(t)):r.push(t)}))||r},de=function(t,e,r){return!W(t)||r||!c&&Ie()?rt(t)?pe(t,r):ce(t)?fe.call(t,0):t?[t]:[]:fe.call((e||p).querySelectorAll(t),0)},_e=function(t){return t.sort((function(){return.5-Math.random()}))},me=function(t){if(G(t))return t;var e=K(t)?t:{each:t},r=Ve(e.ease),n=e.from||0,i=parseFloat(e.base)||0,s={},a=n>0&&n<1,o=isNaN(n)||a,u=e.axis,h=n,l=n;return W(n)?h=l={center:.5,edges:.5,end:1}[n]||0:!a&&o&&(h=n[0],l=n[1]),function(t,a,f){var c,p,d,_,m,g,v,y,b,w=(f||e).length,T=s[w];if(!T){if(!(b="auto"===e.grid?0:(e.grid||[1,N])[1])){for(v=-1e8;v<(v=f[b++].getBoundingClientRect().left)&&bv&&(v=m),mw?w-1:u?"y"===u?w/b:b:Math.max(b,w/b))||0)*("edges"===n?-1:1),T.b=w<0?i-w:i,T.u=le(e.amount||e.each)||0,r=r&&w<0?Xe(r):r}return w=(T[t]-T.min)/T.max||0,St(T.b+(r?r(w):w)*T.v)+T.u}},ge=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(r){var n=Math.round(parseFloat(r)/t)*t*e;return(n-n%1)/e+(Q(r)?0:le(r))}},ve=function(t,e){var r,n,i=rt(t);return!i&&K(t)&&(r=i=t.radius||N,t.values?(t=de(t.values),(n=!Q(t[0]))&&(r*=r)):t=ge(t.increment)),ue(e,i?G(t)?function(e){return n=t(e),Math.abs(n-e)<=r?n:e}:function(e){for(var i,s,a=parseFloat(n?e.x:e),o=parseFloat(n?e.y:0),u=N,h=0,l=t.length;l--;)(i=n?(i=t[l].x-a)*i+(s=t[l].y-o)*s:Math.abs(t[l]-a))(i=Math.abs(i))&&(s=n,o=i);return s},Oe=function(t,e,r){var n,i,s=t.vars,a=s[e];if(a)return n=s[e+"Params"],i=s.callbackScope||t,r&&vt.length&&Et(),n?a.apply(i,n):a.call(i)},Me=function(t){return Xt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Oe(t,"onInterrupt"),t},De=function(t){var e=(t=!t.name&&t.default||t).name,r=G(t),n=e&&!r&&t.init?function(){this._props=[]}:t,i={init:mt,render:mr,add:tr,kill:vr,modifier:gr,rawVars:0},s={targetTest:0,get:0,getSetter:cr,aliases:{},register:0};if(Ie(),t!==n){if(bt[e])return;Lt(n,Lt(Nt(t,i),s)),It(n.prototype,It(i,Nt(t,s))),bt[n.prop=e]=n,t.targetTest&&(xt.push(n),gt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}_t(e,n),t.register&&t.register(Mr,n,wr)},Ae=255,ke={aqua:[0,Ae,Ae],lime:[0,Ae,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Ae],navy:[0,0,128],white:[Ae,Ae,Ae],olive:[128,128,0],yellow:[Ae,Ae,0],orange:[Ae,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Ae,0,0],pink:[Ae,192,203],cyan:[0,Ae,Ae],transparent:[Ae,Ae,Ae,0]},Ce=function(t,e,r){return(6*(t+=t<0?1:t>1?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*Ae+.5|0},Se=function(t,e,r){var n,i,s,a,o,u,h,l,f,c,p=t?Q(t)?[t>>16,t>>8&Ae,t&Ae]:0:ke.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),ke[t])p=ke[t];else if("#"===t.charAt(0)){if(t.length<6&&(n=t.charAt(1),i=t.charAt(2),s=t.charAt(3),t="#"+n+n+i+i+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&Ae,p&Ae,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Ae,t&Ae]}else if("hsl"===t.substr(0,3))if(p=c=t.match(nt),e){if(~t.indexOf("="))return p=t.match(it),r&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,n=2*(u=+p[2]/100)-(i=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=Ce(a+1/3,n,i),p[1]=Ce(a,n,i),p[2]=Ce(a-1/3,n,i);else p=t.match(nt)||ke.transparent;p=p.map(Number)}return e&&!c&&(n=p[0]/Ae,i=p[1]/Ae,s=p[2]/Ae,u=((h=Math.max(n,i,s))+(l=Math.min(n,i,s)))/2,h===l?a=o=0:(f=h-l,o=u>.5?f/(2-h-l):f/(h+l),a=h===n?(i-s)/f+(iM&&(A+=a-D),((r=(i=(k+=a)-A)-S)>0||o)&&(s=++w.frame,T=i-1e3*w.time,w.time=i/=1e3,S+=r+(r>=C?4:C-r),n=1),o||(v=y(t)),n)for(x=0;x=e&&x--},_listeners:P=[]}),Ie=function(){return!g&&Le.wake()},Be={},Ne=/^[\d.\-M][\d.\-,\s]/,Ue=/["']/g,qe=function(t){for(var e,r,n,i={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,u=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[qe(s[1])]:(e=t,r=e.indexOf("(")+1,n=e.indexOf(")"),i=e.indexOf("(",r),e.substring(r,~i&&i=1?r:1,s=(n||(e?.3:.45))/(r<1?r:1),a=s/q*(Math.asin(1/i)||0),o=function(t){return 1===t?1:i*Math.pow(2,-10*t)*H((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:He(o);return s=q/s,u.config=function(r,n){return t(e,r,n)},u},Ge=function t(e,r){void 0===r&&(r=1.70158);var n=function(t){return t?--t*t*((r+1)*t+r)+1:0},i="out"===e?n:"in"===e?function(t){return 1-n(1-t)}:He(n);return i.config=function(r){return t(e,r)},i};kt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var r=e<5?e+1:e;je(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},(function(t){return 1-Math.pow(1-t,r)}),(function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2}))})),Be.Linear.easeNone=Be.none=Be.Linear.easeIn,je("Elastic",We("in"),We("out"),We()),z=7.5625,F=1/(R=2.75),je("Bounce",(function(t){return 1-L(1-t)}),L=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,ne(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Ie(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(Zt(this,t),!r._dp||r.parent||Kt(r,this);r&&r.parent;)r.parent._time!==r._start+(r._ts>=0?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&$t(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===U||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),zt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ht(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},e.totalProgress=function(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},e.progress=function(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ht(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},e.iteration=function(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?Wt(this._tTime,r)+1:1},e.timeScale=function(t){if(!arguments.length)return-1e-8===this._rts?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?Gt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,Vt(this.totalTime(he(-this._delay,this._tDur,e),!0)),Qt(this),this},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Ie(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==U&&(this._tTime-=U)))),this):this._ps},e.startTime=function(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return e&&(e._sort||!this.parent)&&$t(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+($(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Gt(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(e._ts||1),e=e._dp;return r},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,ie(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,ie(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(ae(this,t),$(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,$(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t1?(e?(n[t]=e,r&&(n[t+"Params"]=r),"onUpdate"===t&&(this._onUpdate=e)):delete n[t],this):n[t]},e.then=function(t){var e=this;return new Promise((function(r){var n=G(t)?t:Ft,i=function(){var t=e.then;e.then=null,G(n)&&(n=n(e))&&(n.then||n===e)&&(e.then=t),r(n),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?i():e._prom=i}))},e.kill=function(){Me(this)},t}();Lt(Ze.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Ke=function(t){function e(e,r){var n;return void 0===e&&(e={}),(n=t.call(this,e)||this).labels={},n.smoothChildTiming=!!e.smoothChildTiming,n.autoRemoveChildren=!!e.autoRemoveChildren,n._sort=$(e.sortChildren),l&&$t(e.parent||l,o(n),r),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&Jt(o(n),e.scrollTrigger),n}u(e,t);var r=e.prototype;return r.to=function(t,e,r){return oe(0,arguments,this),this},r.from=function(t,e,r){return oe(1,arguments,this),this},r.fromTo=function(t,e,r,n){return oe(2,arguments,this),this},r.set=function(t,e,r){return e.duration=0,e.parent=this,Ut(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new or(t,e,ae(this,r),1),this},r.call=function(t,e,r){return $t(this,or.delayedCall(0,t,e),r)},r.staggerTo=function(t,e,r,n,i,s,a){return r.duration=e,r.stagger=r.stagger||n,r.onComplete=s,r.onCompleteParams=a,r.parent=this,new or(t,r,ae(this,i)),this},r.staggerFrom=function(t,e,r,n,i,s,a){return r.runBackwards=1,Ut(r).immediateRender=$(r.immediateRender),this.staggerTo(t,e,r,n,i,s,a)},r.staggerFromTo=function(t,e,r,n,i,s,a,o){return n.startAt=r,Ut(n).immediateRender=$(n.immediateRender),this.staggerTo(t,e,n,i,s,a,o)},r.render=function(t,e,r){var n,i,s,a,o,u,h,f,c,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:St(t),b=this._zTime<0!=t<0&&(this._initted||!v);if(this!==l&&y>g&&t>=0&&(y=g),y!==this._tTime||r||b){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),n=y,c=this._start,u=!(f=this._ts),b&&(v||(m=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(d=this._yoyo,o=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(n=St(y%o),y===g?(a=this._repeat,n=v):((a=~~(y/o))&&a===y/o&&(n=v,a--),n>v&&(n=v)),p=Wt(this._tTime,o),!m&&this._tTime&&p!==a&&(p=a),d&&1&a&&(n=v-n,_=1),a!==p&&!this._lock){var w=d&&1&p,T=w===(d&&1&a);if(ae)for(n=t._first;n&&n._start<=r;){if("isPause"===n.data&&n._start>e)return n;n=n._next}else for(n=t._last;n&&n._start>=r;){if("isPause"===n.data&&n._start=m&&t>=0)for(i=this._first;i;){if(s=i._next,(i._act||n>=i._start)&&i._ts&&h!==i){if(i.parent!==this)return this.render(t,e,r);if(i.render(i._ts>0?(n-i._start)*i._ts:(i._dirty?i.totalDuration():i._tDur)+(n-i._start)*i._ts,e,r),n!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=-1e-8);break}}i=s}else{i=this._last;for(var x=t<0?t:n;i;){if(s=i._prev,(i._act||x<=i._end)&&i._ts&&h!==i){if(i.parent!==this)return this.render(t,e,r);if(i.render(i._ts>0?(x-i._start)*i._ts:(i._dirty?i.totalDuration():i._tDur)+(x-i._start)*i._ts,e,r),n!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=x?-1e-8:U);break}}i=s}}if(h&&!e&&(this.pause(),h.render(n>=m?0:-1e-8)._zTime=n>=m?1:-1,this._ts))return this._start=c,Qt(this),this.render(t,e,r);this._onUpdate&&!e&&Oe(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&m)&&(c!==this._start&&Math.abs(f)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Xt(this,1),e||t<0&&!m||!y&&!m&&g||(Oe(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},r.add=function(t,e){var r=this;if(Q(e)||(e=ae(this,e,t)),!(t instanceof Ze)){if(rt(t))return t.forEach((function(t){return r.add(t,e)})),this;if(W(t))return this.addLabel(t,e);if(!G(t))return this;t=or.delayedCall(0,t)}return this!==t?$t(this,t,e):this},r.getChildren=function(t,e,r,n){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===n&&(n=-1e8);for(var i=[],s=this._first;s;)s._start>=n&&(s instanceof or?e&&i.push(s):(r&&i.push(s),t&&i.push.apply(i,s.getChildren(!0,e,r)))),s=s._next;return i},r.getById=function(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},r.remove=function(t){return W(t)?this.removeLabel(t):G(t)?this.killTweensOf(t):(qt(this,t),t===this._recent&&(this._recent=this._last),Yt(this))},r.totalTime=function(e,r){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=St(Le.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,r),this._forcing=0,this):this._tTime},r.addLabel=function(t,e){return this.labels[t]=ae(this,e),this},r.removeLabel=function(t){return delete this.labels[t],this},r.addPause=function(t,e,r){var n=or.delayedCall(0,e||mt,r);return n.data="isPause",this._hasPause=1,$t(this,n,ae(this,t))},r.removePause=function(t){var e=this._first;for(t=ae(this,t);e;)e._start===t&&"isPause"===e.data&&Xt(e),e=e._next},r.killTweensOf=function(t,e,r){for(var n=this.getTweensOf(t,r),i=n.length;i--;)$e!==n[i]&&n[i].kill(t,e);return this},r.getTweensOf=function(t,e){for(var r,n=[],i=de(t),s=this._first,a=Q(e);s;)s instanceof or?Pt(s._targets,i)&&(a?(!$e||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&n.push(s):(r=s.getTweensOf(i,e)).length&&n.push.apply(n,r),s=s._next;return n},r.tweenTo=function(t,e){e=e||{};var r,n=this,i=ae(n,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=or.to(n,Lt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:i,overwrite:"auto",duration:e.duration||Math.abs((i-(a&&"time"in a?a.time:n._time))/n.timeScale())||U,onStart:function(){if(n.pause(),!r){var t=e.duration||Math.abs((i-(a&&"time"in a?a.time:n._time))/n.timeScale());l._dur!==t&&ne(l,t,0,1).render(l._time,!0,!0),r=1}o&&o.apply(l,u||[])}},e));return h?l.render(0):l},r.tweenFromTo=function(t,e,r){return this.tweenTo(e,Lt({startAt:{time:ae(this,t)}},r))},r.recent=function(){return this._recent},r.nextLabel=function(t){return void 0===t&&(t=this._time),xe(this,ae(this,t))},r.previousLabel=function(t){return void 0===t&&(t=this._time),xe(this,ae(this,t),1)},r.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+U)},r.shiftChildren=function(t,e,r){void 0===r&&(r=0);for(var n,i=this._first,s=this.labels;i;)i._start>=r&&(i._start+=t,i._end+=t),i=i._next;if(e)for(n in s)s[n]>=r&&(s[n]+=t);return Yt(this)},r.invalidate=function(){var e=this._first;for(this._lock=0;e;)e.invalidate(),e=e._next;return t.prototype.invalidate.call(this)},r.clear=function(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Yt(this)},r.totalDuration=function(t){var e,r,n,i=0,s=this,a=s._last,o=N;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(n=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(r=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,$t(s,a,r-a._delay,1)._lock=0):o=r,r<0&&a._ts&&(i-=r,(!n&&!s._dp||n&&n.smoothChildTiming)&&(s._start+=r/s._ts,s._time-=r,s._tTime-=r),s.shiftChildren(-r,!1,-1/0),o=0),a._end>i&&a._ts&&(i=a._end),a=e;ne(s,s===l&&s._time>i?s._time:i,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(l._ts&&(zt(l,Gt(t,l)),_=Le.frame),Le.frame>=Tt){Tt+=I.autoSleep||120;var e=l._first;if((!e||!e._ts)&&I.autoSleep&&Le._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Le.sleep()}}},e}(Ze);Lt(Ke.prototype,{_lock:0,_hasPause:0,_forcing:0});var $e,Je=function(t,e,r,n,i,s,a){var o,u,h,l,f,c,p,d,_=new wr(this._pt,t,e,0,1,_r,null,i),m=0,g=0;for(_.b=r,_.e=n,r+="",(p=~(n+="").indexOf("random("))&&(n=we(n)),s&&(s(d=[r,n],t,e),r=d[0],n=d[1]),u=r.match(at)||[];o=at.exec(n);)l=o[0],f=n.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-c,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m0&&!C&&(e._startAt=0),S&&r<=0)return void(r&&(e._zTime=r))}else!1===C&&(e._startAt=0);else if(D&&S)if(P)!C&&(e._startAt=0);else if(r&&(w=!1),s=Lt({overwrite:!1,data:"isFromStart",lazy:w&&$(T),immediateRender:w,stagger:0,parent:z},n),m&&(s[c.prop]=m),Xt(e._startAt=or.set(E,s)),r<0&&e._startAt.render(-1,!0),e._zTime=r,w){if(!r)return}else t(e._startAt,U);for(e._pt=0,T=S&&$(T)||T&&!S,i=0;i")}));else{var z=function(t){for(C=f[t].sort((function(t,e){return t.t-e.t})),E=0,u=0;up-U&&t>=0?p:td&&(n=d)),(u=this._yoyo&&1&s)&&(f=this._yEase,n=d-n),o=Wt(this._tTime,a),n===c&&!r&&this._initted)return this;s!==o&&(l&&this._yEase&&Ye(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=r=1,this.render(St(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(te(this,t<0?t:n,r,e))return this._tTime=0,this;if(d!==this._dur)return this.render(t,e,r)}if(this._tTime=_,this._time=n,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(n/d),this._from&&(this.ratio=h=1-h),n&&!c&&!e&&(Oe(this,"onStart"),this._tTime!==_))return this;for(i=this._pt;i;)i.r(h,i.d),i=i._next;l&&l.render(t<0?t:!n&&u?-1e-8:l._dur*l._ease(n/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,r),Oe(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&Oe(this,"onRepeat"),_!==this._tDur&&_||this._tTime!==_||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(_===this._tDur&&this._ts>0||!_&&this._ts<0)&&Xt(this,1),e||t<0&&!c||!_&&!c||(Oe(this,_===p?"onComplete":"onReverseComplete",!0),this._prom&&!(_0)&&this._prom()))}}else!function(t,e,r,n){var i,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&ee(t)&&(t._initted||!re(t))||(t._ts<0||t._dp._ts<0)&&!re(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=he(0,t._tDur,e),s=Wt(l,h),t._yoyo&&1&s&&(u=1-u),s!==Wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||n||t._zTime===U||!e&&t._zTime){if(!t._initted&&te(t,e,n,r))return;for(a=t._zTime,t._zTime=e||(r?U:0),r||(r=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,i=t._pt;i;)i.r(u,i.d),i=i._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!r&&Oe(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&Oe(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Xt(t,1),r||(Oe(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},r.targets=function(){return this._targets},r.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},r.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?Me(this):this;if(this.timeline){var r=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,$e&&!0!==$e.vars.overwrite)._first||Me(this),this.parent&&r!==this.timeline.totalDuration()&&ne(this,this._dur*this.timeline._tDur/r,0,1),this}var n,i,s,a,o,u,h,l=this._targets,f=t?de(t):l,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var r=t.length,n=r===e.length;n&&r--&&t[r]===e[r];);return r<0}(l,f))return"all"===e&&(this._pt=0),Me(this);for(n=this._op=this._op||[],"all"!==e&&(W(e)&&(o={},kt(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var r,n,i,s,a=t[0]?Dt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(n in r=It({},e),o)if(n in r)for(i=(s=o[n].split(",")).length;i--;)r[s[i]]=r[n];return r}(l,e)),h=l.length;h--;)if(~f.indexOf(l[h]))for(o in i=c[h],"all"===e?(n[h]=e,a=i,s={}):(s=n[h]=n[h]||{},a=e),a)(u=i&&i[o])&&("kill"in u.d&&!0!==u.d.kill(o)||qt(this,u,"_pt"),delete i[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&Me(this),this},e.to=function(t,r){return new e(t,r,arguments[2])},e.from=function(t,e){return oe(1,arguments)},e.delayedCall=function(t,r,n,i){return new e(r,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:r,onReverseComplete:r,onCompleteParams:n,onReverseCompleteParams:n,callbackScope:i})},e.fromTo=function(t,e,r){return oe(2,arguments)},e.set=function(t,r){return r.duration=0,r.repeatDelay||(r.repeat=0),new e(t,r)},e.killTweensOf=function(t,e,r){return l.killTweensOf(t,e,r)},e}(Ze);Lt(or.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),kt("staggerTo,staggerFrom,staggerFromTo",(function(t){or[t]=function(){var e=new Ke,r=fe.call(arguments,0);return r.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,r)}}));var ur=function(t,e,r){return t[e]=r},hr=function(t,e,r){return t[e](r)},lr=function(t,e,r,n){return t[e](n.fp,r)},fr=function(t,e,r){return t.setAttribute(e,r)},cr=function(t,e){return G(t[e])?hr:Z(t[e])&&t.setAttribute?fr:ur},pr=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},dr=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},_r=function(t,e){var r=e._pt,n="";if(!t&&e.b)n=e.b;else if(1===t&&e.e)n=e.e;else{for(;r;)n=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+n,r=r._next;n+=e.c}e.set(e.t,e.p,n,e)},mr=function(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},gr=function(t,e,r,n){for(var i,s=this._pt;s;)i=s._next,s.p===n&&s.modifier(t,e,r),s=i},vr=function(t){for(var e,r,n=this._pt;n;)r=n._next,n.p===t&&!n.op||n.op===t?qt(this,n,"_pt"):n.dep||(e=1),n=r;return!e},yr=function(t,e,r,n){n.mSet(t,e,n.m.call(n.tween,r,n.mt),n)},br=function(t){for(var e,r,n,i,s=t._pt;s;){for(e=s._next,r=n;r&&r.pr>s.pr;)r=r._next;(s._prev=r?r._prev:i)?s._prev._next=s:n=s,(s._next=r)?r._prev=s:i=s,s=e}t._pt=n},wr=function(){function t(t,e,r,n,i,s,a,o,u){this.t=e,this.s=n,this.c=i,this.p=r,this.r=s||pr,this.d=a||this,this.set=o||ur,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,r){this.mSet=this.mSet||this.set,this.set=yr,this.m=t,this.mt=r,this.tween=e},t}();kt(Ot+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",(function(t){return gt[t]=1})),lt.TweenMax=lt.TweenLite=or,lt.TimelineLite=lt.TimelineMax=Ke,l=new Ke({sortChildren:!1,defaults:B,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),I.stringFilter=Fe;var Tr={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),r=0;r1){var n=t.map((function(t){return Mr.quickSetter(t,e,r)})),i=n.length;return function(t){for(var e=i;e--;)n[e](t)}}t=t[0]||{};var s=bt[e],a=Dt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var n=new s;m._pt=0,n.init(t,r?e+r:e,m,0,[t]),n.render(1,n),m._pt&&mr(1,m)}:a.set(t,o);return s?u:function(e){return u(t,o,r?e+r:e,a,1)}},isTweening:function(t){return l.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ve(t.ease,B.ease)),Bt(B,t||{})},config:function(t){return Bt(I,t||{})},registerEffect:function(t){var e=t.name,r=t.effect,n=t.plugins,i=t.defaults,s=t.extendTimeline;(n||"").split(",").forEach((function(t){return t&&!bt[t]&&!lt[t]&&dt(e+" effect requires "+t+" plugin.")})),wt[e]=function(t,e,n){return r(de(t),Lt(e||{},i),n)},s&&(Ke.prototype[e]=function(t,r,n){return this.add(wt[e](t,K(r)?r:(n=r)&&{},this),n)})},registerEase:function(t,e){Be[t]=Ve(e)},parseEase:function(t,e){return arguments.length?Ve(t,e):Be},getById:function(t){return l.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var r,n,i=new Ke(t);for(i.smoothChildTiming=$(t.smoothChildTiming),l.remove(i),i._dp=0,i._time=i._tTime=l._time,r=l._first;r;)n=r._next,!e&&!r._dur&&r instanceof or&&r.vars.onComplete===r._targets[0]||$t(i,r,r._start-r._delay),r=n;return $t(l,i,0),i},utils:{wrap:function t(e,r,n){var i=r-e;return rt(e)?be(e,t(0,e.length),r):ue(n,(function(t){return(i+(t-e)%i)%i+e}))},wrapYoyo:function t(e,r,n){var i=r-e,s=2*i;return rt(e)?be(e,t(0,e.length-1),r):ue(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>i?s-t:t)}))},distribute:me,random:ye,snap:ve,normalize:function(t,e,r){return Te(t,e,0,1,r)},getUnit:le,clamp:function(t,e,r){return ue(r,(function(r){return he(t,e,r)}))},splitColor:Se,toArray:de,selector:function(t){return t=de(t)[0]||dt("Invalid scope")||{},function(e){var r=t.current||t.nativeElement||t;return de(e,r.querySelectorAll?r:r===t?dt("Invalid scope")||p.createElement("div"):t)}},mapRange:Te,pipe:function(){for(var t=arguments.length,e=new Array(t),r=0;r=0?nn[i]:"")+t},an=function(){"undefined"!=typeof window&&window.document&&(Dr=window,Ar=Dr.document,kr=Ar.documentElement,Sr=en("div")||{style:{}},en("div"),Jr=sn(Jr),tn=Jr+"Origin",Sr.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Er=!!sn("perspective"),Cr=1)},on=function t(e){var r,n=en("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),i=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(kr.appendChild(n),n.appendChild(this),this.style.display="block",e)try{r=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(r=this._gsapBBox());return i&&(s?i.insertBefore(this,s):i.appendChild(this)),kr.removeChild(n),this.style.cssText=a,r},un=function(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])},hn=function(t){var e;try{e=t.getBBox()}catch(r){e=on.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===on||(e=on.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+un(t,["x","cx","x1"])||0,y:+un(t,["y","cy","y1"])||0,width:0,height:0}},ln=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!hn(t))},fn=function(t,e){if(e){var r=t.style;e in zr&&e!==tn&&(e=Jr),r.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),r.removeProperty(e.replace(Ir,"-$1").toLowerCase())):r.removeAttribute(e)}},cn=function(t,e,r,n,i,s){var a=new wr(t._pt,e,r,0,1,s?Hr:jr);return t._pt=a,a.b=n,a.e=i,t._props.push(r),a},pn={deg:1,rad:1,turn:1},dn=function t(e,r,n,i){var s,a,o,u,h=parseFloat(n)||0,l=(n+"").trim().substr((h+"").length)||"px",f=Sr.style,c=Br.test(r),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(c?"Width":"Height"),_=100,m="px"===i,g="%"===i;return i===l||!h||pn[i]||pn[l]?h:("px"!==l&&!m&&(h=t(e,r,n,"px")),u=e.getCTM&&ln(e),!g&&"%"!==l||!zr[r]&&!~r.indexOf("adius")?(f[c?"width":"height"]=_+(m?l:i),a=~r.indexOf("adius")||"em"===i&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==Ar&&a.appendChild||(a=Ar.body),(o=a._gsap)&&g&&o.width&&c&&o.time===Le.time?Ct(h/o.width*_):((g||"%"===l)&&(f.position=rn(e,"position")),a===e&&(f.position="static"),a.appendChild(Sr),s=Sr[d],a.removeChild(Sr),f.position="absolute",c&&g&&((o=Dt(a)).time=Le.time,o.width=a[d]),Ct(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[c?"width":"height"]:e[d],Ct(g?h/s*_:h/100*s)))},_n=function(t,e,r,n){var i;return Cr||an(),e in Ur&&"transform"!==e&&~(e=Ur[e]).indexOf(",")&&(e=e.split(",")[0]),zr[e]&&"transform"!==e?(i=Dn(t,n),i="transformOrigin"!==e?i[e]:i.svg?i.origin:An(rn(t,tn))+" "+i.zOrigin+"px"):(!(i=t.style[e])||"auto"===i||n||~(i+"").indexOf("calc("))&&(i=yn[e]&&yn[e](t,e,r)||rn(t,e)||At(t,e)||("opacity"===e?1:0)),r&&!~(i+"").trim().indexOf(" ")?dn(t,e,i,r)+r:i},mn=function(t,e,r,n){if(!r||"none"===r){var i=sn(e,t,1),s=i&&rn(t,i,1);s&&s!==r?(e=i,r=s):"borderColor"===e&&(r=rn(t,"borderTopColor"))}var a,o,u,h,l,f,c,p,d,_,m,g,v=new wr(this._pt,t.style,e,0,1,_r),y=0,b=0;if(v.b=r,v.e=n,r+="","auto"===(n+="")&&(t.style[e]=n,n=rn(t,e)||n,t.style[e]=r),Fe(a=[r,n]),n=a[1],u=(r=a[0]).match(st)||[],(n.match(st)||[]).length){for(;o=st.exec(n);)c=o[0],d=n.substring(y,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),c!==(f=u[b++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),(g="="===c.charAt(1)?+(c.charAt(0)+"1"):0)&&(c=c.substr(2)),p=parseFloat(c),_=c.substr((p+"").length),y=st.lastIndex-_.length,_||(_=_||I.units[e]||m,y===n.length&&(n+=_,v.e+=_)),m!==_&&(h=dn(t,e,f,_)||0),v._pt={_next:v._pt,p:d||1===b?d:",",s:h,c:g?g*p:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});v.c=y-1;)r=o[i],zr[r]&&(n=1,r="transformOrigin"===r?tn:Jr),fn(s,r);n&&(fn(s,Jr),u&&(u.svg&&s.removeAttribute("transform"),Dn(s,1),u.uncache=1))}},yn={clearProps:function(t,e,r,n,i){if("isFromStart"!==i.data){var s=t._pt=new wr(t._pt,e,r,0,0,vn);return s.u=n,s.pr=-10,s.tween=i,t._props.push(r),1}}},bn=[1,0,0,1,0,0],wn={},Tn=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},xn=function(t){var e=rn(t,Jr);return Tn(e)?bn:e.substr(7).match(it).map(Ct)},On=function(t,e){var r,n,i,s,a=t._gsap||Dt(t),o=t.style,u=xn(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(i=t.transform.baseVal.consolidate().matrix).a,i.b,i.c,i.d,i.e,i.f]).join(",")?bn:u:(u!==bn||t.offsetParent||t===kr||a.svg||(i=o.display,o.display="block",(r=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,kr.appendChild(t)),u=xn(t),i?o.display=i:fn(t,"display"),s&&(n?r.insertBefore(t,n):r?r.appendChild(t):kr.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},Mn=function(t,e,r,n,i,s){var a,o,u,h=t._gsap,l=i||On(t,!0),f=h.xOrigin||0,c=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],b=l[5],w=e.split(" "),T=parseFloat(w[0])||0,x=parseFloat(w[1])||0;r?l!==bn&&(o=_*v-m*g)&&(u=T*(-m/o)+x*(_/o)-(_*b-m*y)/o,T=T*(v/o)+x*(-g/o)+(g*b-v*y)/o,x=u):(T=(a=hn(t)).x+(~w[0].indexOf("%")?T/100*a.width:T),x=a.y+(~(w[1]||w[0]).indexOf("%")?x/100*a.height:x)),n||!1!==n&&h.smooth?(y=T-f,b=x-c,h.xOffset=p+(y*_+b*g)-y,h.yOffset=d+(y*m+b*v)-b):h.xOffset=h.yOffset=0,h.xOrigin=T,h.yOrigin=x,h.smooth=!!n,h.origin=e,h.originIsAbsolute=!!r,t.style[tn]="0px 0px",s&&(cn(s,h,"xOrigin",f,T),cn(s,h,"yOrigin",c,x),cn(s,h,"xOffset",p,h.xOffset),cn(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",T+" "+x)},Dn=function(t,e){var r=t._gsap||new Qe(t);if("x"in r&&!e&&!r.uncache)return r;var n,i,s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,b,w,T,x,O,M,D,A,k,C,S,P,E,z,R,F=t.style,L=r.scaleX<0,B="px",N="deg",U=rn(t,tn)||"0";return n=i=s=u=h=l=f=c=p=0,a=o=1,r.svg=!(!t.getCTM||!ln(t)),m=On(t,r.svg),r.svg&&(D=(!r.uncache||"0px 0px"===U)&&!e&&t.getAttribute("data-svg-origin"),Mn(t,D||U,!!D||r.originIsAbsolute,!1!==r.smooth,m)),d=r.xOrigin||0,_=r.yOrigin||0,m!==bn&&(b=m[0],w=m[1],T=m[2],x=m[3],n=O=m[4],i=M=m[5],6===m.length?(a=Math.sqrt(b*b+w*w),o=Math.sqrt(x*x+T*T),u=b||w?Lr(w,b)*Rr:0,(f=T||x?Lr(T,x)*Rr+u:0)&&(o*=Math.abs(Math.cos(f*Fr))),r.svg&&(n-=d-(d*b+_*T),i-=_-(d*w+_*x))):(R=m[6],E=m[7],C=m[8],S=m[9],P=m[10],z=m[11],n=m[12],i=m[13],s=m[14],h=(g=Lr(R,P))*Rr,g&&(D=O*(v=Math.cos(-g))+C*(y=Math.sin(-g)),A=M*v+S*y,k=R*v+P*y,C=O*-y+C*v,S=M*-y+S*v,P=R*-y+P*v,z=E*-y+z*v,O=D,M=A,R=k),l=(g=Lr(-T,P))*Rr,g&&(v=Math.cos(-g),z=x*(y=Math.sin(-g))+z*v,b=D=b*v-C*y,w=A=w*v-S*y,T=k=T*v-P*y),u=(g=Lr(w,b))*Rr,g&&(D=b*(v=Math.cos(g))+w*(y=Math.sin(g)),A=O*v+M*y,w=w*v-b*y,M=M*v-O*y,b=D,O=A),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=Ct(Math.sqrt(b*b+w*w+T*T)),o=Ct(Math.sqrt(M*M+R*R)),g=Lr(O,M),f=Math.abs(g)>2e-4?g*Rr:0,p=z?1/(z<0?-z:z):0),r.svg&&(D=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!Tn(rn(t,Jr)),D&&t.setAttribute("transform",D))),Math.abs(f)>90&&Math.abs(f)<270&&(L?(a*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),r.x=n-((r.xPercent=n&&(r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-n)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+B,r.y=i-((r.yPercent=i&&(r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-i)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+B,r.z=s+B,r.scaleX=Ct(a),r.scaleY=Ct(o),r.rotation=Ct(u)+N,r.rotationX=Ct(h)+N,r.rotationY=Ct(l)+N,r.skewX=f+N,r.skewY=c+N,r.transformPerspective=p+B,(r.zOrigin=parseFloat(U.split(" ")[2])||0)&&(F[tn]=An(U)),r.xOffset=r.yOffset=0,r.force3D=I.force3D,r.renderTransform=r.svg?Rn:Er?zn:Cn,r.uncache=0,r},An=function(t){return(t=t.split(" "))[0]+" "+t[1]},kn=function(t,e,r){var n=le(e);return Ct(parseFloat(e)+parseFloat(dn(t,"x",r+"px",n)))+n},Cn=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,zn(t,e)},Sn="0deg",Pn="0px",En=") ",zn=function(t,e){var r=e||this,n=r.xPercent,i=r.yPercent,s=r.x,a=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,c=r.skewY,p=r.scaleX,d=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",b="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==Sn||h!==Sn)){var w,T=parseFloat(h)*Fr,x=Math.sin(T),O=Math.cos(T);T=parseFloat(l)*Fr,w=Math.cos(T),s=kn(g,s,x*w*-v),a=kn(g,a,-Math.sin(T)*-v),o=kn(g,o,O*w*-v+v)}_!==Pn&&(y+="perspective("+_+En),(n||i)&&(y+="translate("+n+"%, "+i+"%) "),(b||s!==Pn||a!==Pn||o!==Pn)&&(y+=o!==Pn||b?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+En),u!==Sn&&(y+="rotate("+u+En),h!==Sn&&(y+="rotateY("+h+En),l!==Sn&&(y+="rotateX("+l+En),f===Sn&&c===Sn||(y+="skew("+f+", "+c+En),1===p&&1===d||(y+="scale("+p+", "+d+En),g.style[Jr]=y||"translate(0, 0)"},Rn=function(t,e){var r,n,i,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,c=o.rotation,p=o.skewX,d=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,b=o.xOffset,w=o.yOffset,T=o.forceCSS,x=parseFloat(l),O=parseFloat(f);c=parseFloat(c),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),c+=d),c||p?(c*=Fr,p*=Fr,r=Math.cos(c)*_,n=Math.sin(c)*_,i=Math.sin(c-p)*-m,s=Math.cos(c-p)*m,p&&(d*=Fr,a=Math.tan(p-d),i*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),r*=a=Math.sqrt(1+a*a),n*=a)),r=Ct(r),n=Ct(n),i=Ct(i),s=Ct(s)):(r=_,s=m,n=i=0),(x&&!~(l+"").indexOf("px")||O&&!~(f+"").indexOf("px"))&&(x=dn(g,"x",l,"px"),O=dn(g,"y",f,"px")),(v||y||b||w)&&(x=Ct(x+v-(v*r+y*i)+b),O=Ct(O+y-(v*n+y*s)+w)),(u||h)&&(a=g.getBBox(),x=Ct(x+u/100*a.width),O=Ct(O+h/100*a.height)),a="matrix("+r+","+n+","+i+","+s+","+x+","+O+")",g.setAttribute("transform",a),T&&(g.style[Jr]=a)},Fn=function(t,e,r,n,i,s){var a,o,u=360,h=W(i),l=parseFloat(i)*(h&&~i.indexOf("rad")?Rr:1),f=s?l*s:l-n,c=n+f+"deg";return h&&("short"===(a=i.split("_")[1])&&(f%=u)!==f%180&&(f+=f<0?u:-360),"cw"===a&&f<0?f=(f+36e9)%u-~~(f/u)*u:"ccw"===a&&f>0&&(f=(f-36e9)%u-~~(f/u)*u)),t._pt=o=new wr(t._pt,e,r,n,f,Xr),o.e=c,o.u="deg",t._props.push(r),o},Ln=function(t,e){for(var r in e)t[r]=e[r];return t},In=function(t,e,r){var n,i,s,a,o,u,h,l=Ln({},r._gsap),f=r.style;for(i in l.svg?(s=r.getAttribute("transform"),r.setAttribute("transform",""),f[Jr]=e,n=Dn(r,1),fn(r,Jr),r.setAttribute("transform",s)):(s=getComputedStyle(r)[Jr],f[Jr]=e,n=Dn(r,1),f[Jr]=s),zr)(s=l[i])!==(a=n[i])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(i)<0&&(o=le(s)!==(h=le(a))?dn(r,i,s,h):parseFloat(s),u=parseFloat(a),t._pt=new wr(t._pt,n,i,o,u-o,qr),t._pt.u=h||0,t._props.push(i));Ln(n,l)};kt("padding,margin,Width,Radius",(function(t,e){var r="Top",n="Right",i="Bottom",s="Left",a=(e<3?[r,n,i,s]:[r+s,r+n,i+n,i+s]).map((function(r){return e<2?t+r:"border"+r+t}));yn[e>1?"border"+t:t]=function(t,e,r,n,i){var s,o;if(arguments.length<4)return s=a.map((function(e){return _n(t,e,r)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(n+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,i)}}));var Bn,Nn,Un,qn={name:"css",register:an,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,r,n,i){var s,o,u,h,l,f,c,p,d,_,m,g,v,y,b,w,T,x,O,M=this._props,D=t.style,A=r.vars.startAt;for(c in Cr||an(),e)if("autoRound"!==c&&(o=e[c],!bt[c]||!er(c,e,r,n,t,i)))if(l=void 0===o?"undefined":a(o),f=yn[c],"function"===l&&(l=void 0===(o=o.call(r,n,t,i))?"undefined":a(o)),"string"===l&&~o.indexOf("random(")&&(o=we(o)),f)f(this,t,c,o,r)&&(b=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),o+="",ze.lastIndex=0,ze.test(s)||(p=le(s),d=le(o)),d?p!==d&&(s=dn(t,c,s,d)+d):p&&(o+=p),this.add(D,"setProperty",s,o,n,i,0,0,c),M.push(c);else if("undefined"!==l){if(A&&c in A?(s="function"==typeof A[c]?A[c].call(r,n,t,i):A[c],W(s)&&~s.indexOf("random(")&&(s=we(s)),le(s+"")||(s+=I.units[c]||le(_n(t,c))||""),"="===(s+"").charAt(1)&&(s=_n(t,c))):s=_n(t,c),h=parseFloat(s),(_="string"===l&&"="===o.charAt(1)?+(o.charAt(0)+"1"):0)&&(o=o.substr(2)),u=parseFloat(o),c in Ur&&("autoAlpha"===c&&(1===h&&"hidden"===_n(t,"visibility")&&u&&(h=0),cn(this,D,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==c&&"transform"!==c&&~(c=Ur[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in zr)if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Dn(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new wr(this._pt,D,Jr,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===c)this._pt=new wr(this._pt,v,"scaleY",v.scaleY,(_?_*u:u-v.scaleY)||0),M.push("scaleY",c),c+="X";else{if("transformOrigin"===c){T=void 0,x=void 0,O=void 0,T=(w=o).split(" "),x=T[0],O=T[1]||"50%","top"!==x&&"bottom"!==x&&"left"!==O&&"right"!==O||(w=x,x=O,O=w),T[0]=gn[x]||x,T[1]=gn[O]||O,o=T.join(" "),v.svg?Mn(t,o,0,y,0,this):((d=parseFloat(o.split(" ")[2])||0)!==v.zOrigin&&cn(this,v,"zOrigin",v.zOrigin,d),cn(this,D,c,An(s),An(o)));continue}if("svgOrigin"===c){Mn(t,o,1,y,0,this);continue}if(c in wn){Fn(this,v,c,h,o,_);continue}if("smoothOrigin"===c){cn(this,v,"smooth",v.smooth,o);continue}if("force3D"===c){v[c]=o;continue}if("transform"===c){In(this,o,t);continue}}else c in D||(c=sn(c)||c);if(m||(u||0===u)&&(h||0===h)&&!Nr.test(o)&&c in D)u||(u=0),(p=(s+"").substr((h+"").length))!==(d=le(o)||(c in I.units?I.units[c]:p))&&(h=dn(t,c,s,d)),this._pt=new wr(this._pt,m?v:D,c,h,_?_*u:u-h,m||"px"!==d&&"zIndex"!==c||!1===e.autoRound?qr:Vr),this._pt.u=d||0,p!==d&&"%"!==d&&(this._pt.b=s,this._pt.r=Yr);else if(c in D)mn.call(this,t,c,s,o);else{if(!(c in t)){pt(c,o);continue}this.add(t,c,s||t[c],o,n,i)}M.push(c)}b&&br(this)},get:_n,aliases:Ur,getSetter:function(t,e,r){var n=Ur[e];return n&&n.indexOf(",")<0&&(e=n),e in zr&&e!==tn&&(t._gsap.x||_n(t,"x"))?r&&Pr===r?"scale"===e?Zr:Qr:(Pr=r||{},"scale"===e?Kr:$r):t.style&&!Z(t.style[e])?Wr:~e.indexOf("-")?Gr:cr(t,e)},core:{_removeProperty:fn,_getMatrix:On}};Mr.utils.checkPrefix=sn,Un=kt((Bn="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Nn="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){zr[t]=1})),kt(Nn,(function(t){I.units[t]="deg",wn[t]=1})),Ur[Un[13]]=Bn+","+Nn,kt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Ur[e[1]]=Un[e[0]]})),kt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){I.units[t]="px"})),Mr.registerPlugin(qn);var Xn,Yn,Vn=Mr.registerPlugin(qn)||Mr,jn=(Vn.core.Tween,{});Xn=jn,Yn=function(){"use strict";var t=document,e=t.createTextNode.bind(t);function r(t,e,r){t.style.setProperty(e,r)}function n(t,e){return t.appendChild(e)}function i(e,r,i,s){var a=t.createElement("span");return r&&(a.className=r),i&&(!s&&a.setAttribute("data-"+r,i),a.textContent=i),e&&n(e,a)||a}function s(t,e){return t.getAttribute("data-"+e)}function a(e,r){return e&&0!=e.length?e.nodeName?[e]:[].slice.call(e[0].nodeName?e:(r||t).querySelectorAll(e)):[]}function o(t){for(var e=[];t--;)e[t]=[];return e}function u(t,e){t&&t.some(e)}function h(t){return function(e){return t[e]}}var l={};function f(t,e,r){var n=r.indexOf(t);if(-1==n)r.unshift(t),u(l[t].depends,(function(e){f(e,t,r)}));else{var i=r.indexOf(e);r.splice(n,1),r.splice(i,0,t)}return r}function c(t,e,r,n){return{by:t,depends:e,key:r,split:n}}function p(t){return f(t,0,[]).map(h(l))}function d(t){l[t.by]=t}function _(t,r,s,o,h){t.normalize();var l=[],f=document.createDocumentFragment();o&&l.push(t.previousSibling);var c=[];return a(t.childNodes).some((function(t){if(!t.tagName||t.hasChildNodes()){if(t.childNodes&&t.childNodes.length)return c.push(t),void l.push.apply(l,_(t,r,s,o,h));var n=t.wholeText||"",a=n.trim();a.length&&(" "===n[0]&&c.push(e(" ")),u(a.split(s),(function(t,e){e&&h&&c.push(i(f,"whitespace"," ",h));var n=i(f,r,t);l.push(n),c.push(n)}))," "===n[n.length-1]&&c.push(e(" ")))}else c.push(t)})),u(c,(function(t){n(f,t)})),t.innerHTML="",n(t,f),l}var m="words",g=c(m,0,"word",(function(t){return _(t,"word",/\s+/,0,1)})),v="chars",y=c(v,[m],"char",(function(t,e,r){var n=[];return u(r.words,(function(t,r){n.push.apply(n,_(t,"char","",e.whitespace&&r))})),n}));function b(t){var e=(t=t||{}).key;return a(t.target||"[data-splitting]").map((function(n){var i=n["🍌"];if(!t.force&&i)return i;i=n["🍌"]={el:n};var a=p(t.by||s(n,"splitting")||v),o=function(t,e){for(var r in e)t[r]=e[r];return t}({},t);return u(a,(function(t){if(t.split){var s=t.by,a=(e?"-"+e:"")+t.key,h=t.split(n,o,i);a&&function(t,e,n){var i="--"+e,s=i+"-index";u(n,(function(t,e){Array.isArray(t)?u(t,(function(t){r(t,s,e)})):r(t,s,e)})),r(t,i+"-total",n.length)}(n,a,h),i[s]=h,n.classList.add(s)}})),n.classList.add("splitting"),i}))}function w(t,e,r){var n=a(e.matching||t.children,t),i={};return u(n,(function(t){var e=Math.round(t[r]);(i[e]||(i[e]=[])).push(t)})),Object.keys(i).map(Number).sort(T).map(h(i))}function T(t,e){return t-e}b.html=function(t){var e=(t=t||{}).target=i();return e.innerHTML=t.content,b(t),e.outerHTML},b.add=d;var x=c("lines",[m],"line",(function(t,e,r){return w(t,{matching:r.words},"offsetTop")})),O=c("items",0,"item",(function(t,e){return a(e.matching||t.children,t)})),M=c("rows",0,"row",(function(t,e){return w(t,e,"offsetTop")})),D=c("cols",0,"col",(function(t,e){return w(t,e,"offsetLeft")})),A=c("grid",["rows","cols"]),k="layout",C=c(k,0,0,(function(t,e){var o=e.rows=+(e.rows||s(t,"rows")||1),u=e.columns=+(e.columns||s(t,"columns")||1);if(e.image=e.image||s(t,"image")||t.currentSrc||t.src,e.image){var h=a("img",t)[0];e.image=h&&(h.currentSrc||h.src)}e.image&&r(t,"background-image","url("+e.image+")");for(var l=o*u,f=[],c=i(0,"cell-grid");l--;){var p=i(c,"cell");i(p,"cell-inner"),f.push(p)}return n(t,c),f})),S=c("cellRows",[k],"row",(function(t,e,r){var n=e.rows,i=o(n);return u(r.layout,(function(t,e,r){i[Math.floor(e/(r.length/n))].push(t)})),i})),P=c("cellColumns",[k],"col",(function(t,e,r){var n=e.columns,i=o(n);return u(r.layout,(function(t,e){i[e%n].push(t)})),i})),E=c("cells",["cellRows","cellColumns"],"cell",(function(t,e,r){return r.layout}));return d(g),d(y),d(x),d(O),d(M),d(D),d(A),d(C),d(S),d(P),d(E),b},"object"==typeof jn?jn=Yn():"function"==typeof define&&define.amd?define(Yn):Xn.Splitting=Yn();var Hn,Wn={slotMachineTotalLetters:8,displayVerticalTitle:"HAPUKU"},Gn=function(){"use strict";function t(r){e(this,t),i(this,"DOM",{el:null,chars:null,slotMachine:null}),i(this,"itemPosition",void 0),this.DOM={el:r},this.DOM.chars=s(this.DOM.el.querySelectorAll("span.char")),this.itemPosition=s(this.DOM.el.parentNode.children).indexOf(this.DOM.el),this.layout()}return n(t,[{key:"layout",value:function(){var t=this,e=Wn.slotMachineTotalLetters-2,r="ABCDEFGHIJKLMNOPRSTUVWXYZ";this.DOM.chars.forEach((function(n,i){var s=document.createElement("span");if(s.classList="letter-wrap",n.parentNode.appendChild(s),s.appendChild(n),0===i){t.DOM.slotMachine=document.createElement("span"),t.DOM.slotMachine.classList="letter-wrap__inner",s.appendChild(t.DOM.slotMachine);for(var a=Array.from({length:e},(function(t){return r.charAt(Math.floor(Math.random()*r.length))})),o="".concat(n.innerHTML,""),u=0;u<=e-1;++u)o+=u===e-1?"".concat(a[u],"").concat(Wn.displayVerticalTitle.charAt(t.itemPosition),""):"".concat(a[u],"");t.DOM.slotMachine.innerHTML=o,s.removeChild(n)}}))}}]),t}();t(jn)(),new(function(){"use strict";function t(r){var n=this;e(this,t),i(this,"DOM",{el:null,items:null,menuCtrl:{el:null,lines:null,cross:null},bg:null,tagline:null}),i(this,"menuItems",[]),i(this,"menuStatus",{isOpen:!1,isAnimating:!1}),this.DOM={el:r},this.DOM.items=s(this.DOM.el.querySelectorAll(".menu__item")),this.DOM.menuCtrl={el:this.DOM.el.querySelector(".menu__button")},this.DOM.menuCtrl.lines=this.DOM.menuCtrl.el.querySelector("path.menu__button-lines"),this.DOM.menuCtrl.cross=this.DOM.menuCtrl.el.querySelector("path.menu__button-cross"),this.DOM.bg=this.DOM.el.querySelector(".menu__bg"),this.DOM.tagline=this.DOM.el.querySelector(".menu__tagline"),this.DOM.items.forEach((function(t){return n.menuItems.push(new Gn(t))})),this.initEvents()}return n(t,[{key:"initEvents",value:function(){var t=this;this.DOM.menuCtrl.el.addEventListener("click",(function(){t.menuStatus.isAnimating||(t.menuStatus.isOpen?t.close():t.open())}))}},{key:"open",value:function(){var t=this;if(!this.menuStatus.isAnimating&&!this.menuStatus.isOpen){this.menuStatus.isAnimating=!0,this.menuStatus.isOpen=!0;var e={value:"linear-gradient(to bottom, #2b192c, #1a191c)"};this.menuTimeline=Vn.timeline({defaults:{duration:1.7,ease:"expo.inOut"},onComplete:function(){return t.menuStatus.isAnimating=!1}}).addLabel("start",0).add((function(){t.DOM.el.classList.add("menu--open")}),"start").to(this.DOM.bg,{startAt:{x:-1*this.DOM.bg.offsetWidth+.2*window.innerWidth+.11*window.innerHeight},x:0},"start").to(e,{value:"linear-gradient(rgb(68, 37, 61), rgb(29 24 39))",onUpdate:function(){return t.DOM.bg.style.backgroundImage=e.value}},"start").to(this.DOM.tagline,{opacity:0,x:"-50%"},"start").to(this.DOM.menuCtrl.cross,{duration:.5,ease:"power2.inOut",opacity:1},"start").to(this.DOM.menuCtrl.lines,{duration:.5,ease:"power2.inOut",opacity:0},"start").to(this.menuItems.map((function(t){return t.DOM.slotMachine})),{y:"".concat(100/Wn.slotMachineTotalLetters*(Wn.slotMachineTotalLetters-1),"%"),stagger:.03},"start"),this.menuItems.forEach((function(e){t.menuTimeline.to(e.DOM.chars,{startAt:{x:"100%",rotation:10,opacity:1},x:"0%",opacity:1,rotation:0,stagger:.04},"start")}))}}},{key:"close",value:function(){var t=this;if(!this.menuStatus.isAnimating&&this.menuStatus.isOpen){this.menuStatus.isAnimating=!0,this.menuStatus.isOpen=!1;var e={value:"linear-gradient(rgb(68, 37, 61), rgb(29 24 39))"};this.menuTimeline=Vn.timeline({defaults:{duration:1.3,ease:"expo.inOut"},onComplete:function(){return t.menuStatus.isAnimating=!1}}).addLabel("start",0).add((function(){t.DOM.el.classList.remove("menu--open")}),"start").to(this.DOM.menuCtrl.cross,{duration:.5,ease:"power2.inOut",opacity:0},"start").to(this.DOM.menuCtrl.lines,{duration:.5,ease:"power2.inOut",opacity:1},"start").to(this.menuItems.map((function(t){return t.DOM.slotMachine})),{duration:1.5,y:"0%",stagger:-.01},"start"),this.menuItems.forEach((function(e){t.menuTimeline.to(e.DOM.chars,{x:"100%",rotation:10,stagger:-.04},"start")})),this.menuTimeline.to(this.DOM.bg,{x:-1*this.DOM.bg.offsetWidth+.2*window.innerWidth+.11*window.innerHeight,onComplete:function(){t.DOM.bg.style.transform="translateX(-100%) translateX(20vw) translateX(11vh)"}},"start+=0.2").to(e,{value:"linear-gradient(to bottom, #2b192c, #1a191c)",onUpdate:function(){return t.DOM.bg.style.backgroundImage=e.value}},"start+=0.2").to(this.DOM.tagline,{opacity:1,x:"0%"},"start+=0.2")}}}]),t}())(document.querySelector(".menu")),(Hn="zhn4ifz",new Promise((function(t){WebFont.load({typekit:{id:Hn},active:t})}))).then((function(){return document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index.e9a2d1b4.js: -------------------------------------------------------------------------------- 1 | function t(t){return t&&t.__esModule?t.default:t}function e(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function r(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function i(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 2 | /*! 3 | * GSAP 3.9.1 4 | * https://greensock.com 5 | * 6 | * @license Copyright 2008-2021, GreenSock. All rights reserved. 7 | * Subject to the terms at https://greensock.com/standard-license or for 8 | * Club GreenSock members, the agreement issued with that membership. 9 | * @author: Jack Doyle, jack@greensock.com 10 | */var n,s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,b,T,w,x,M,O,D,A,C,k,S,P,E={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},z={duration:.5,overwrite:!1,delay:0},R=2*Math.PI,F=R/4,L=0,I=Math.sqrt,B=Math.cos,N=Math.sin,U=function(t){return"string"==typeof t},q=function(t){return"function"==typeof t},X=function(t){return"number"==typeof t},Y=function(t){return void 0===t},V=function(t){return"object"==typeof t},H=function(t){return!1!==t},W=function(){return"undefined"!=typeof window},j=function(t){return q(t)||U(t)},G="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},Q=Array.isArray,$=/(?:-?\.?\d|\.)+/gi,Z=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,K=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,J=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,tt=/[+-]=-?[.\d]+/,et=/[^,'"\[\]\s]+/gi,rt=/[\d.+\-=]+(?:e[-+]\d*)*/i,it={},nt={},st=function(t){return(nt=St(t,it))&&gr},at=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},ot=function(t,e){return!e&&console.warn(t)},ut=function(t,e){return t&&(it[t]=e)&&nt&&(nt[t]=e)||it},ht=function(){return 0},lt={},ft=[],ct={},pt={},dt={},_t=30,mt=[],gt="",vt=function(t){var e,r,i=t[0];if(V(i)||q(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=mt.length;r--&&!mt[r].targetTest(i););e=mt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new qe(t[r],e)))||t.splice(r,1);return t},yt=function(t){return t._gsap||vt(oe(t))[0]._gsap},bt=function(t,e,r){return(r=t[e])&&q(r)?t[e]():Y(r)&&t.getAttribute&&t.getAttribute(e)||r},Tt=function(t,e){return(t=t.split(",")).forEach(e)||t},wt=function(t){return Math.round(1e5*t)/1e5||0},xt=function(t){return Math.round(1e7*t)/1e7||0},Mt=function(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++it._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t},It=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Bt=function t(e){return!e||e._ts&&t(e.parent)},Nt=function(t){return t._repeat?Ut(t._tTime,t=t.duration()+t._rDelay)*t:0},Ut=function(t,e){var r=Math.floor(t/=e);return t&&r===t?r-1:r},qt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Xt=function(t){return t._end=xt(t._start+(t._tDur/Math.abs(t._ts||t._rts||1e-8)||0))},Yt=function(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=xt(r._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Xt(t),r._dirty||Lt(r,t)),t},Vt=function(t,e){var r;if((e._time||e._initted&&!e._dur)&&(r=qt(t.rawTime(),e),(!e._dur||re(0,e.totalDuration(),r)-e._tTime>1e-8)&&e.render(r,!0)),Lt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&r.totalTime(r._tTime),r=r._dp;t._zTime=-1e-8}},Ht=function(t,e,r,i){return e.parent&&Ft(e),e._start=xt((X(r)?r:r||t!==s?Jt(t,r,e):t._time)+e._delay),e._end=xt(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var s,a=t[i];if(n)for(s=e[n];a&&a[n]>s;)a=a._prev;a?(e._next=a._next,a._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=a,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),Qt(e)||(t._recent=e),i||Vt(t,e),t},Wt=function(t,e){return(it.ScrollTrigger||at("scrollTrigger",e))&&it.ScrollTrigger.create(e,t)},jt=function(t,e,r,i){return Ge(t,e),t._initted?!r&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&l!==Ce.frame?(ft.push(t),t._lazy=[e,i],1):void 0:1},Gt=function t(e){var r=e.parent;return r&&r._ts&&r._initted&&!r._lock&&(r.rawTime()<0||t(r))},Qt=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},$t=function(t,e,r,i){var n=t._repeat,s=xt(e)||0,a=t._tTime/t._tDur;return a&&!i&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:xt(s*(n+1)+t._rDelay*n):s,a>0&&!i?Yt(t,t._tTime=t._tDur*a):t.parent&&Xt(t),r||Lt(t.parent,t),t},Zt=function(t){return t instanceof Ye?Lt(t):$t(t,t._dur)},Kt={_start:0,endTime:ht,totalDuration:ht},Jt=function t(e,r,i){var n,s,a,o=e.labels,u=e._recent||Kt,h=e.duration()>=1e8?u.endTime(!1):e._dur;return U(r)&&(isNaN(r)||r in o)?(s=r.charAt(0),a="%"===r.substr(-1),n=r.indexOf("="),"<"===s||">"===s?(n>=0&&(r=r.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(r.substr(1))||0)*(a?(n<0?u:i).totalDuration()/100:1)):n<0?(r in o||(o[r]=h),o[r]):(s=parseFloat(r.charAt(n-1)+r.substr(n+1)),a&&i&&(s=s/100*(Q(i)?i[0]:i).totalDuration()),n>1?t(e,r.substr(0,n-1),i)+s:h+s)):null==r?h:+r},te=function(t,e,r){var i,n,s=X(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=r,t){for(i=o,n=r;n&&!("immediateRender"in i);)i=n.vars.defaults||{},n=H(n.vars.inherit)&&n.parent;o.immediateRender=H(i.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new Je(e[0],o,e[a+1])},ee=function(t,e){return t||0===t?e(t):e},re=function(t,e,r){return re?e:r},ie=function(t,e){return U(t)&&(e=rt.exec(t))?t.substr(e.index+e[0].length):""},ne=[].slice,se=function(t,e){return t&&V(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&V(t[0]))&&!t.nodeType&&t!==a},ae=function(t,e,r){return void 0===r&&(r=[]),t.forEach((function(t){var i;return U(t)&&!e||se(t,1)?(i=r).push.apply(i,oe(t)):r.push(t)}))||r},oe=function(t,e,r){return!U(t)||r||!o&&ke()?Q(t)?ae(t,r):se(t)?ne.call(t,0):t?[t]:[]:ne.call((e||u).querySelectorAll(t),0)},ue=function(t){return t.sort((function(){return.5-Math.random()}))},he=function(t){if(q(t))return t;var e=V(t)?t:{each:t},r=Le(e.ease),i=e.from||0,n=parseFloat(e.base)||0,s={},a=i>0&&i<1,o=isNaN(i)||a,u=e.axis,h=i,l=i;return U(i)?h=l={center:.5,edges:.5,end:1}[i]||0:!a&&o&&(h=i[0],l=i[1]),function(t,a,f){var c,p,d,_,m,g,v,y,b,T=(f||e).length,w=s[T];if(!w){if(!(b="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=f[b++].getBoundingClientRect().left)&&bv&&(v=m),mT?T-1:u?"y"===u?T/b:b:Math.max(b,T/b))||0)*("edges"===i?-1:1),w.b=T<0?n-T:n,w.u=ie(e.amount||e.each)||0,r=r&&T<0?Re(r):r}return T=(w[t]-w.min)/w.max||0,xt(w.b+(r?r(T):T)*w.v)+w.u}},le=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(r){var i=Math.round(parseFloat(r)/t)*t*e;return(i-i%1)/e+(X(r)?0:ie(r))}},fe=function(t,e){var r,i,n=Q(t);return!n&&V(t)&&(r=n=t.radius||1e8,t.values?(t=oe(t.values),(i=!X(t[0]))&&(r*=r)):t=le(t.increment)),ee(e,n?q(t)?function(e){return i=t(e),Math.abs(i-e)<=r?i:e}:function(e){for(var n,s,a=parseFloat(i?e.x:e),o=parseFloat(i?e.y:0),u=1e8,h=0,l=t.length;l--;)(n=i?(n=t[l].x-a)*n+(s=t[l].y-o)*s:Math.abs(t[l]-a))(n=Math.abs(n))&&(s=i,o=n);return s},ge=function(t,e,r){var i,n,s=t.vars,a=s[e];if(a)return i=s[e+"Params"],n=s.callbackScope||t,r&&ft.length&&Ot(),i?a.apply(n,i):a.call(n)},ve=function(t){return Ft(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&ge(t,"onInterrupt"),t},ye=function(t){var e=(t=!t.name&&t.default||t).name,r=q(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:ht,render:ur,add:We,kill:lr,modifier:hr,rawVars:0},s={targetTest:0,get:0,getSetter:nr,aliases:{},register:0};if(ke(),t!==i){if(pt[e])return;kt(i,kt(Et(t,n),s)),St(i.prototype,St(n,Et(t,s))),pt[i.prop=e]=i,t.targetTest&&(mt.push(i),lt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}ut(e,i),t.register&&t.register(gr,i,pr)},be={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},Te=function(t,e,r){return 255*(6*(t+=t<0?1:t>1?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)+.5|0},we=function(t,e,r){var i,n,s,a,o,u,h,l,f,c,p=t?X(t)?[t>>16,t>>8&255,255&t]:0:be.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),be[t])p=be[t];else if("#"===t.charAt(0)){if(t.length<6&&(i=t.charAt(1),n=t.charAt(2),s=t.charAt(3),t="#"+i+i+n+n+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&255,255&p,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(p=c=t.match($),e){if(~t.indexOf("="))return p=t.match(Z),r&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,i=2*(u=+p[2]/100)-(n=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=Te(a+1/3,i,n),p[1]=Te(a,i,n),p[2]=Te(a-1/3,i,n);else p=t.match($)||be.transparent;p=p.map(Number)}return e&&!c&&(i=p[0]/255,n=p[1]/255,s=p[2]/255,u=((h=Math.max(i,n,s))+(l=Math.min(i,n,s)))/2,h===l?a=o=0:(f=h-l,o=u>.5?f/(2-h-l):f/(h+l),a=h===i?(n-s)/f+(nb&&(w+=a-T),((r=(n=(x+=a)-w)-O)>0||o)&&(s=++m.frame,g=n-1e3*m.time,m.time=n/=1e3,O+=r+(r>=M?4:M-r),i=1),o||(p=d(t)),i)for(v=0;v=e&&v--},_listeners:D=[]}),ke=function(){return!c&&Ce.wake()},Se={},Pe=/^[\d.\-M][\d.\-,\s]/,Ee=/["']/g,ze=function(t){for(var e,r,i,n={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,u=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[ze(s[1])]:(e=t,r=e.indexOf("(")+1,i=e.indexOf(")"),n=e.indexOf("(",r),e.substring(r,~n&&n=1?r:1,s=(i||(e?.3:.45))/(r<1?r:1),a=s/R*(Math.asin(1/n)||0),o=function(t){return 1===t?1:n*Math.pow(2,-10*t)*N((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Be(o);return s=R/s,u.config=function(r,i){return t(e,r,i)},u},Ue=function t(e,r){void 0===r&&(r=1.70158);var i=function(t){return t?--t*t*((r+1)*t+r)+1:0},n="out"===e?i:"in"===e?function(t){return 1-i(1-t)}:Be(i);return n.config=function(r){return t(e,r)},n};Tt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var r=e<5?e+1:e;Ie(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},(function(t){return 1-Math.pow(1-t,r)}),(function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2}))})),Se.Linear.easeNone=Se.none=Se.Linear.easeIn,Ie("Elastic",Ne("in"),Ne("out"),Ne()),C=7.5625,S=1/(k=2.75),Ie("Bounce",(function(t){return 1-P(1-t)}),P=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,$t(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(ke(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(Yt(this,t),!r._dp||r.parent||Vt(r,this);r&&r.parent;)r.parent._time!==r._start+(r._ts>=0?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&Ht(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&1e-8===Math.abs(this._zTime)||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Dt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Nt(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},e.totalProgress=function(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},e.progress=function(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Nt(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},e.iteration=function(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?Ut(this._tTime,r)+1:1},e.timeScale=function(t){if(!arguments.length)return-1e-8===this._rts?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?qt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,It(this.totalTime(re(-this._delay,this._tDur,e),!0)),Xt(this),this},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(ke(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&1e-8!==Math.abs(this._zTime)&&(this._tTime-=1e-8)))),this):this._ps},e.startTime=function(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return e&&(e._sort||!this.parent)&&Ht(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(H(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?qt(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(e._ts||1),e=e._dp;return r},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,Zt(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,Zt(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(Jt(this,t),H(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,H(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t1?(e?(i[t]=e,r&&(i[t+"Params"]=r),"onUpdate"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},e.then=function(t){var e=this;return new Promise((function(r){var i=q(t)?t:Ct,n=function(){var t=e.then;e.then=null,q(i)&&(i=i(e))&&(i.then||i===e)&&(e.then=t),r(i),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?n():e._prom=n}))},e.kill=function(){ve(this)},t}();kt(Xe.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Ye=function(t){function e(e,i){var n;return void 0===e&&(e={}),(n=t.call(this,e)||this).labels={},n.smoothChildTiming=!!e.smoothChildTiming,n.autoRemoveChildren=!!e.autoRemoveChildren,n._sort=H(e.sortChildren),s&&Ht(e.parent||s,r(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&Wt(r(n),e.scrollTrigger),n}i(e,t);var n=e.prototype;return n.to=function(t,e,r){return te(0,arguments,this),this},n.from=function(t,e,r){return te(1,arguments,this),this},n.fromTo=function(t,e,r,i){return te(2,arguments,this),this},n.set=function(t,e,r){return e.duration=0,e.parent=this,zt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new Je(t,e,Jt(this,r),1),this},n.call=function(t,e,r){return Ht(this,Je.delayedCall(0,t,e),r)},n.staggerTo=function(t,e,r,i,n,s,a){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=s,r.onCompleteParams=a,r.parent=this,new Je(t,r,Jt(this,n)),this},n.staggerFrom=function(t,e,r,i,n,s,a){return r.runBackwards=1,zt(r).immediateRender=H(r.immediateRender),this.staggerTo(t,e,r,i,n,s,a)},n.staggerFromTo=function(t,e,r,i,n,s,a,o){return i.startAt=r,zt(i).immediateRender=H(i.immediateRender),this.staggerTo(t,e,i,n,s,a,o)},n.render=function(t,e,r){var i,n,a,o,u,h,l,f,c,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:xt(t),b=this._zTime<0!=t<0&&(this._initted||!v);if(this!==s&&y>g&&t>=0&&(y=g),y!==this._tTime||r||b){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),i=y,c=this._start,h=!(f=this._ts),b&&(v||(m=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(d=this._yoyo,u=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*u+t,e,r);if(i=xt(y%u),y===g?(o=this._repeat,i=v):((o=~~(y/u))&&o===y/u&&(i=v,o--),i>v&&(i=v)),p=Ut(this._tTime,u),!m&&this._tTime&&p!==o&&(p=o),d&&1&o&&(i=v-i,_=1),o!==p&&!this._lock){var T=d&&1&p,w=T===(d&&1&o);if(oe)for(i=t._first;i&&i._start<=r;){if("isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=m&&t>=0)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(n._ts>0?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!h){l=0,a&&(y+=this._zTime=-1e-8);break}}n=a}else{n=this._last;for(var x=t<0?t:i;n;){if(a=n._prev,(n._act||x<=n._end)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(n._ts>0?(x-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(x-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!h){l=0,a&&(y+=this._zTime=x?-1e-8:1e-8);break}}n=a}}if(l&&!e&&(this.pause(),l.render(i>=m?0:-1e-8)._zTime=i>=m?1:-1,this._ts))return this._start=c,Xt(this),this.render(t,e,r);this._onUpdate&&!e&&ge(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&m)&&(c!==this._start&&Math.abs(f)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Ft(this,1),e||t<0&&!m||!y&&!m&&g||(ge(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},n.add=function(t,e){var r=this;if(X(e)||(e=Jt(this,e,t)),!(t instanceof Xe)){if(Q(t))return t.forEach((function(t){return r.add(t,e)})),this;if(U(t))return this.addLabel(t,e);if(!q(t))return this;t=Je.delayedCall(0,t)}return this!==t?Ht(this,t,e):this},n.getChildren=function(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-1e8);for(var n=[],s=this._first;s;)s._start>=i&&(s instanceof Je?e&&n.push(s):(r&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,r)))),s=s._next;return n},n.getById=function(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},n.remove=function(t){return U(t)?this.removeLabel(t):q(t)?this.killTweensOf(t):(Rt(this,t),t===this._recent&&(this._recent=this._last),Lt(this))},n.totalTime=function(e,r){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=xt(Ce.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,r),this._forcing=0,this):this._tTime},n.addLabel=function(t,e){return this.labels[t]=Jt(this,e),this},n.removeLabel=function(t){return delete this.labels[t],this},n.addPause=function(t,e,r){var i=Je.delayedCall(0,e||ht,r);return i.data="isPause",this._hasPause=1,Ht(this,i,Jt(this,t))},n.removePause=function(t){var e=this._first;for(t=Jt(this,t);e;)e._start===t&&"isPause"===e.data&&Ft(e),e=e._next},n.killTweensOf=function(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Ve!==i[n]&&i[n].kill(t,e);return this},n.getTweensOf=function(t,e){for(var r,i=[],n=oe(t),s=this._first,a=X(e);s;)s instanceof Je?Mt(s._targets,n)&&(a?(!Ve||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&i.push(s):(r=s.getTweensOf(n,e)).length&&i.push.apply(i,r),s=s._next;return i},n.tweenTo=function(t,e){e=e||{};var r,i=this,n=Jt(i,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=Je.to(i,kt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||1e-8,onStart:function(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());l._dur!==t&&$t(l,t,0,1).render(l._time,!0,!0),r=1}o&&o.apply(l,u||[])}},e));return h?l.render(0):l},n.tweenFromTo=function(t,e,r){return this.tweenTo(e,kt({startAt:{time:Jt(this,t)}},r))},n.recent=function(){return this._recent},n.nextLabel=function(t){return void 0===t&&(t=this._time),me(this,Jt(this,t))},n.previousLabel=function(t){return void 0===t&&(t=this._time),me(this,Jt(this,t),1)},n.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+1e-8)},n.shiftChildren=function(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,s=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in s)s[i]>=r&&(s[i]+=t);return Lt(this)},n.invalidate=function(){var e=this._first;for(this._lock=0;e;)e.invalidate(),e=e._next;return t.prototype.invalidate.call(this)},n.clear=function(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Lt(this)},n.totalDuration=function(t){var e,r,i,n=0,a=this,o=a._last,u=1e8;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;o;)e=o._prev,o._dirty&&o.totalDuration(),(r=o._start)>u&&a._sort&&o._ts&&!a._lock?(a._lock=1,Ht(a,o,r-o._delay,1)._lock=0):u=r,r<0&&o._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-1/0),u=0),o._end>n&&o._ts&&(n=o._end),o=e;$t(a,a===s&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},e.updateRoot=function(t){if(s._ts&&(Dt(s,qt(t,s)),l=Ce.frame),Ce.frame>=_t){_t+=E.autoSleep||120;var e=s._first;if((!e||!e._ts)&&E.autoSleep&&Ce._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Ce.sleep()}}},e}(Xe);kt(Ye.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ve,He=function(t,e,r,i,n,s,a){var o,u,h,l,f,c,p,d,_=new pr(this._pt,t,e,0,1,or,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(p=~(i+="").indexOf("random("))&&(i=de(i)),s&&(s(d=[r,i],t,e),r=d[0],i=d[1]),u=r.match(J)||[];o=J.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-c,m:h&&h<4?Math.round:0},m=J.lastIndex);return _.c=m0&&!k&&(e._startAt=0),S&&r<=0)return void(r&&(e._zTime=r))}else!1===k&&(e._startAt=0);else if(D&&S)if(P)!k&&(e._startAt=0);else if(r&&(T=!1),o=kt({overwrite:!1,data:"isFromStart",lazy:T&&H(w),immediateRender:T,stagger:0,parent:R},i),m&&(o[c.prop]=m),Ft(e._startAt=Je.set(E,o)),r<0&&e._startAt.render(-1,!0),e._zTime=r,T){if(!r)return}else t(e._startAt,1e-8);for(e._pt=0,w=S&&H(w)||w&&!S,a=0;a")}));else{for(p in f={},x)"ease"===p||"easeEach"===p||Qe(p,x[p],f,x.easeEach);for(p in f)for(k=f[p].sort((function(t,e){return t.t-e.t})),z=0,l=0;lp-1e-8&&t>=0?p:t<1e-8?0:t;if(d){if(_!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=t<0){if(i=_,l=this.timeline,this._repeat){if(a=d+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*a+t,e,r);if(i=xt(_%a),_===p?(s=this._repeat,i=d):((s=~~(_/a))&&s===_/a&&(i=d,s--),i>d&&(i=d)),(u=this._yoyo&&1&s)&&(f=this._yEase,i=d-i),o=Ut(this._tTime,a),i===c&&!r&&this._initted)return this;s!==o&&(l&&this._yEase&&Fe(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=r=1,this.render(xt(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(jt(this,t<0?t:i,r,e))return this._tTime=0,this;if(d!==this._dur)return this.render(t,e,r)}if(this._tTime=_,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/d),this._from&&(this.ratio=h=1-h),i&&!c&&!e&&(ge(this,"onStart"),this._tTime!==_))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:!i&&u?-1e-8:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,r),ge(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&ge(this,"onRepeat"),_!==this._tDur&&_||this._tTime!==_||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(_===this._tDur&&this._ts>0||!_&&this._ts<0)&&Ft(this,1),e||t<0&&!c||!_&&!c||(ge(this,_===p?"onComplete":"onReverseComplete",!0),this._prom&&!(_0)&&this._prom()))}}else!function(t,e,r,i){var n,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&Gt(t)&&(t._initted||!Qt(t))||(t._ts<0||t._dp._ts<0)&&!Qt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=re(0,t._tDur,e),s=Ut(l,h),t._yoyo&&1&s&&(u=1-u),s!==Ut(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||i||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&jt(t,e,i,r))return;for(a=t._zTime,t._zTime=e||(r?1e-8:0),r||(r=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!r&&ge(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&ge(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ft(t,1),r||(ge(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},a.targets=function(){return this._targets},a.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},a.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?ve(this):this;if(this.timeline){var r=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ve&&!0!==Ve.vars.overwrite)._first||ve(this),this.parent&&r!==this.timeline.totalDuration()&&$t(this,this._dur*this.timeline._tDur/r,0,1),this}var i,n,s,a,o,u,h,l=this._targets,f=t?oe(t):l,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(l,f))return"all"===e&&(this._pt=0),ve(this);for(i=this._op=this._op||[],"all"!==e&&(U(e)&&(o={},Tt(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var r,i,n,s,a=t[0]?yt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(i in r=St({},e),o)if(i in r)for(n=(s=o[i].split(",")).length;n--;)r[s[n]]=r[i];return r}(l,e)),h=l.length;h--;)if(~f.indexOf(l[h]))for(o in n=c[h],"all"===e?(i[h]=e,a=n,s={}):(s=i[h]=i[h]||{},a=e),a)(u=n&&n[o])&&("kill"in u.d&&!0!==u.d.kill(o)||Rt(this,u,"_pt"),delete n[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&ve(this),this},e.to=function(t,r){return new e(t,r,arguments[2])},e.from=function(t,e){return te(1,arguments)},e.delayedCall=function(t,r,i,n){return new e(r,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:r,onReverseComplete:r,onCompleteParams:i,onReverseCompleteParams:i,callbackScope:n})},e.fromTo=function(t,e,r){return te(2,arguments)},e.set=function(t,r){return r.duration=0,r.repeatDelay||(r.repeat=0),new e(t,r)},e.killTweensOf=function(t,e,r){return s.killTweensOf(t,e,r)},e}(Xe);kt(Je.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Tt("staggerTo,staggerFrom,staggerFromTo",(function(t){Je[t]=function(){var e=new Ye,r=ne.call(arguments,0);return r.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,r)}}));var tr=function(t,e,r){return t[e]=r},er=function(t,e,r){return t[e](r)},rr=function(t,e,r,i){return t[e](i.fp,r)},ir=function(t,e,r){return t.setAttribute(e,r)},nr=function(t,e){return q(t[e])?er:Y(t[e])&&t.setAttribute?ir:tr},sr=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},ar=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},or=function(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ur=function(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},hr=function(t,e,r,i){for(var n,s=this._pt;s;)n=s._next,s.p===i&&s.modifier(t,e,r),s=n},lr=function(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Rt(this,i,"_pt"):i.dep||(e=1),i=r;return!e},fr=function(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)},cr=function(t){for(var e,r,i,n,s=t._pt;s;){for(e=s._next,r=i;r&&r.pr>s.pr;)r=r._next;(s._prev=r?r._prev:n)?s._prev._next=s:i=s,(s._next=r)?r._prev=s:n=s,s=e}t._pt=i},pr=function(){function t(t,e,r,i,n,s,a,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=s||sr,this.d=a||this,this.set=o||tr,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,r){this.mSet=this.mSet||this.set,this.set=fr,this.m=t,this.mt=r,this.tween=e},t}();Tt(gt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",(function(t){return lt[t]=1})),it.TweenMax=it.TweenLite=Je,it.TimelineLite=it.TimelineMax=Ye,s=new Ye({sortChildren:!1,defaults:z,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),E.stringFilter=Ae;var dr={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),r=0;r1){var i=t.map((function(t){return gr.quickSetter(t,e,r)})),n=i.length;return function(t){for(var e=n;e--;)i[e](t)}}t=t[0]||{};var s=pt[e],a=yt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var i=new s;f._pt=0,i.init(t,r?e+r:e,f,0,[t]),i.render(1,i),f._pt&&ur(1,f)}:a.set(t,o);return s?u:function(e){return u(t,o,r?e+r:e,a,1)}},isTweening:function(t){return s.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Le(t.ease,z.ease)),Pt(z,t||{})},config:function(t){return Pt(E,t||{})},registerEffect:function(t){var e=t.name,r=t.effect,i=t.plugins,n=t.defaults,s=t.extendTimeline;(i||"").split(",").forEach((function(t){return t&&!pt[t]&&!it[t]&&ot(e+" effect requires "+t+" plugin.")})),dt[e]=function(t,e,i){return r(oe(t),kt(e||{},n),i)},s&&(Ye.prototype[e]=function(t,r,i){return this.add(dt[e](t,V(r)?r:(i=r)&&{},this),i)})},registerEase:function(t,e){Se[t]=Le(e)},parseEase:function(t,e){return arguments.length?Le(t,e):Se},getById:function(t){return s.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var r,i,n=new Ye(t);for(n.smoothChildTiming=H(t.smoothChildTiming),s.remove(n),n._dp=0,n._time=n._tTime=s._time,r=s._first;r;)i=r._next,!e&&!r._dur&&r instanceof Je&&r.vars.onComplete===r._targets[0]||Ht(n,r,r._start-r._delay),r=i;return Ht(s,n,0),n},utils:{wrap:function t(e,r,i){var n=r-e;return Q(e)?pe(e,t(0,e.length),r):ee(i,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,r,i){var n=r-e,s=2*n;return Q(e)?pe(e,t(0,e.length-1),r):ee(i,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:he,random:ce,snap:fe,normalize:function(t,e,r){return _e(t,e,0,1,r)},getUnit:ie,clamp:function(t,e,r){return ee(r,(function(r){return re(t,e,r)}))},splitColor:we,toArray:oe,selector:function(t){return t=oe(t)[0]||ot("Invalid scope")||{},function(e){var r=t.current||t.nativeElement||t;return oe(e,r.querySelectorAll?r:r===t?ot("Invalid scope")||u.createElement("div"):t)}},mapRange:_e,pipe:function(){for(var t=arguments.length,e=new Array(t),r=0;r=0?Qr[n]:"")+t},Zr=function(){"undefined"!=typeof window&&window.document&&(vr=window,yr=vr.document,br=yr.documentElement,wr=jr("div")||{style:{}},jr("div"),Hr=$r(Hr),Wr=Hr+"Origin",wr.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Mr=!!$r("perspective"),Tr=1)},Kr=function t(e){var r,i=jr("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(br.appendChild(i),i.appendChild(this),this.style.display="block",e)try{r=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(r=this._gsapBBox());return n&&(s?n.insertBefore(this,s):n.appendChild(this)),br.removeChild(i),this.style.cssText=a,r},Jr=function(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])},ti=function(t){var e;try{e=t.getBBox()}catch(r){e=Kr.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===Kr||(e=Kr.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+Jr(t,["x","cx","x1"])||0,y:+Jr(t,["y","cy","y1"])||0,width:0,height:0}},ei=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!ti(t))},ri=function(t,e){if(e){var r=t.style;e in Or&&e!==Wr&&(e=Hr),r.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),r.removeProperty(e.replace(kr,"-$1").toLowerCase())):r.removeAttribute(e)}},ii=function(t,e,r,i,n,s){var a=new pr(t._pt,e,r,0,1,s?Br:Ir);return t._pt=a,a.b=i,a.e=n,t._props.push(r),a},ni={deg:1,rad:1,turn:1},si=function t(e,r,i,n){var s,a,o,u,h=parseFloat(i)||0,l=(i+"").trim().substr((h+"").length)||"px",f=wr.style,c=Sr.test(r),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(c?"Width":"Height"),_=100,m="px"===n,g="%"===n;return n===l||!h||ni[n]||ni[l]?h:("px"!==l&&!m&&(h=t(e,r,i,"px")),u=e.getCTM&&ei(e),!g&&"%"!==l||!Or[r]&&!~r.indexOf("adius")?(f[c?"width":"height"]=_+(m?l:n),a=~r.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==yr&&a.appendChild||(a=yr.body),(o=a._gsap)&&g&&o.width&&c&&o.time===Ce.time?wt(h/o.width*_):((g||"%"===l)&&(f.position=Gr(e,"position")),a===e&&(f.position="static"),a.appendChild(wr),s=wr[d],a.removeChild(wr),f.position="absolute",c&&g&&((o=yt(a)).time=Ce.time,o.width=a[d]),wt(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[c?"width":"height"]:e[d],wt(g?h/s*_:h/100*s)))},ai=function(t,e,r,i){var n;return Tr||Zr(),e in Er&&"transform"!==e&&~(e=Er[e]).indexOf(",")&&(e=e.split(",")[0]),Or[e]&&"transform"!==e?(n=gi(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:vi(Gr(t,Wr))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||i||~(n+"").indexOf("calc("))&&(n=li[e]&&li[e](t,e,r)||Gr(t,e)||bt(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?si(t,e,n,r)+r:n},oi=function(t,e,r,i){if(!r||"none"===r){var n=$r(e,t,1),s=n&&Gr(t,n,1);s&&s!==r?(e=n,r=s):"borderColor"===e&&(r=Gr(t,"borderTopColor"))}var a,o,u,h,l,f,c,p,d,_,m,g,v=new pr(this._pt,t.style,e,0,1,or),y=0,b=0;if(v.b=r,v.e=i,r+="","auto"===(i+="")&&(t.style[e]=i,i=Gr(t,e)||i,t.style[e]=r),Ae(a=[r,i]),i=a[1],u=(r=a[0]).match(K)||[],(i.match(K)||[]).length){for(;o=K.exec(i);)c=o[0],d=i.substring(y,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),c!==(f=u[b++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),(g="="===c.charAt(1)?+(c.charAt(0)+"1"):0)&&(c=c.substr(2)),p=parseFloat(c),_=c.substr((p+"").length),y=K.lastIndex-_.length,_||(_=_||E.units[e]||m,y===i.length&&(i+=_,v.e+=_)),m!==_&&(h=si(t,e,f,_)||0),v._pt={_next:v._pt,p:d||1===b?d:",",s:h,c:g?g*p:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});v.c=y-1;)r=o[n],Or[r]&&(i=1,r="transformOrigin"===r?Wr:Hr),ri(s,r);i&&(ri(s,Hr),u&&(u.svg&&s.removeAttribute("transform"),gi(s,1),u.uncache=1))}},li={clearProps:function(t,e,r,i,n){if("isFromStart"!==n.data){var s=t._pt=new pr(t._pt,e,r,0,0,hi);return s.u=i,s.pr=-10,s.tween=n,t._props.push(r),1}}},fi=[1,0,0,1,0,0],ci={},pi=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},di=function(t){var e=Gr(t,Hr);return pi(e)?fi:e.substr(7).match(Z).map(wt)},_i=function(t,e){var r,i,n,s,a=t._gsap||yt(t),o=t.style,u=di(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?fi:u:(u!==fi||t.offsetParent||t===br||a.svg||(n=o.display,o.display="block",(r=t.parentNode)&&t.offsetParent||(s=1,i=t.nextSibling,br.appendChild(t)),u=di(t),n?o.display=n:ri(t,"display"),s&&(i?r.insertBefore(t,i):r?r.appendChild(t):br.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},mi=function(t,e,r,i,n,s){var a,o,u,h=t._gsap,l=n||_i(t,!0),f=h.xOrigin||0,c=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],b=l[5],T=e.split(" "),w=parseFloat(T[0])||0,x=parseFloat(T[1])||0;r?l!==fi&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*b-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*b-v*y)/o,x=u):(w=(a=ti(t)).x+(~T[0].indexOf("%")?w/100*a.width:w),x=a.y+(~(T[1]||T[0]).indexOf("%")?x/100*a.height:x)),i||!1!==i&&h.smooth?(y=w-f,b=x-c,h.xOffset=p+(y*_+b*g)-y,h.yOffset=d+(y*m+b*v)-b):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[Wr]="0px 0px",s&&(ii(s,h,"xOrigin",f,w),ii(s,h,"yOrigin",c,x),ii(s,h,"xOffset",p,h.xOffset),ii(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+x)},gi=function(t,e){var r=t._gsap||new qe(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,b,T,w,x,M,O,D,A,C,k,S,P,z,R,F,L=t.style,I=r.scaleX<0,B="px",N="deg",U=Gr(t,Wr)||"0";return i=n=s=u=h=l=f=c=p=0,a=o=1,r.svg=!(!t.getCTM||!ei(t)),m=_i(t,r.svg),r.svg&&(D=(!r.uncache||"0px 0px"===U)&&!e&&t.getAttribute("data-svg-origin"),mi(t,D||U,!!D||r.originIsAbsolute,!1!==r.smooth,m)),d=r.xOrigin||0,_=r.yOrigin||0,m!==fi&&(b=m[0],T=m[1],w=m[2],x=m[3],i=M=m[4],n=O=m[5],6===m.length?(a=Math.sqrt(b*b+T*T),o=Math.sqrt(x*x+w*w),u=b||T?Cr(T,b)*Dr:0,(f=w||x?Cr(w,x)*Dr+u:0)&&(o*=Math.abs(Math.cos(f*Ar))),r.svg&&(i-=d-(d*b+_*w),n-=_-(d*T+_*x))):(F=m[6],z=m[7],k=m[8],S=m[9],P=m[10],R=m[11],i=m[12],n=m[13],s=m[14],h=(g=Cr(F,P))*Dr,g&&(D=M*(v=Math.cos(-g))+k*(y=Math.sin(-g)),A=O*v+S*y,C=F*v+P*y,k=M*-y+k*v,S=O*-y+S*v,P=F*-y+P*v,R=z*-y+R*v,M=D,O=A,F=C),l=(g=Cr(-w,P))*Dr,g&&(v=Math.cos(-g),R=x*(y=Math.sin(-g))+R*v,b=D=b*v-k*y,T=A=T*v-S*y,w=C=w*v-P*y),u=(g=Cr(T,b))*Dr,g&&(D=b*(v=Math.cos(g))+T*(y=Math.sin(g)),A=M*v+O*y,T=T*v-b*y,O=O*v-M*y,b=D,M=A),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=wt(Math.sqrt(b*b+T*T+w*w)),o=wt(Math.sqrt(O*O+F*F)),g=Cr(M,O),f=Math.abs(g)>2e-4?g*Dr:0,p=R?1/(R<0?-R:R):0),r.svg&&(D=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!pi(Gr(t,Hr)),D&&t.setAttribute("transform",D))),Math.abs(f)>90&&Math.abs(f)<270&&(I?(a*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),r.x=i-((r.xPercent=i&&(r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+B,r.y=n-((r.yPercent=n&&(r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+B,r.z=s+B,r.scaleX=wt(a),r.scaleY=wt(o),r.rotation=wt(u)+N,r.rotationX=wt(h)+N,r.rotationY=wt(l)+N,r.skewX=f+N,r.skewY=c+N,r.transformPerspective=p+B,(r.zOrigin=parseFloat(U.split(" ")[2])||0)&&(L[Wr]=vi(U)),r.xOffset=r.yOffset=0,r.force3D=E.force3D,r.renderTransform=r.svg?wi:Mr?Ti:bi,r.uncache=0,r},vi=function(t){return(t=t.split(" "))[0]+" "+t[1]},yi=function(t,e,r){var i=ie(e);return wt(parseFloat(e)+parseFloat(si(t,"x",r+"px",i)))+i},bi=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Ti(t,e)},Ti=function(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,s=r.x,a=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,c=r.skewY,p=r.scaleX,d=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",b="auto"===m&&t&&1!==t||!0===m;if(v&&("0deg"!==l||"0deg"!==h)){var T,w=parseFloat(h)*Ar,x=Math.sin(w),M=Math.cos(w);w=parseFloat(l)*Ar,T=Math.cos(w),s=yi(g,s,x*T*-v),a=yi(g,a,-Math.sin(w)*-v),o=yi(g,o,M*T*-v+v)}"0px"!==_&&(y+="perspective("+_+") "),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),(b||"0px"!==s||"0px"!==a||"0px"!==o)&&(y+="0px"!==o||b?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+") "),"0deg"!==u&&(y+="rotate("+u+") "),"0deg"!==h&&(y+="rotateY("+h+") "),"0deg"!==l&&(y+="rotateX("+l+") "),"0deg"===f&&"0deg"===c||(y+="skew("+f+", "+c+") "),1===p&&1===d||(y+="scale("+p+", "+d+") "),g.style[Hr]=y||"translate(0, 0)"},wi=function(t,e){var r,i,n,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,c=o.rotation,p=o.skewX,d=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,b=o.xOffset,T=o.yOffset,w=o.forceCSS,x=parseFloat(l),M=parseFloat(f);c=parseFloat(c),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),c+=d),c||p?(c*=Ar,p*=Ar,r=Math.cos(c)*_,i=Math.sin(c)*_,n=Math.sin(c-p)*-m,s=Math.cos(c-p)*m,p&&(d*=Ar,a=Math.tan(p-d),n*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),r*=a=Math.sqrt(1+a*a),i*=a)),r=wt(r),i=wt(i),n=wt(n),s=wt(s)):(r=_,s=m,i=n=0),(x&&!~(l+"").indexOf("px")||M&&!~(f+"").indexOf("px"))&&(x=si(g,"x",l,"px"),M=si(g,"y",f,"px")),(v||y||b||T)&&(x=wt(x+v-(v*r+y*n)+b),M=wt(M+y-(v*i+y*s)+T)),(u||h)&&(a=g.getBBox(),x=wt(x+u/100*a.width),M=wt(M+h/100*a.height)),a="matrix("+r+","+i+","+n+","+s+","+x+","+M+")",g.setAttribute("transform",a),w&&(g.style[Hr]=a)},xi=function(t,e,r,i,n,s){var a,o,u=360,h=U(n),l=parseFloat(n)*(h&&~n.indexOf("rad")?Dr:1),f=s?l*s:l-i,c=i+f+"deg";return h&&("short"===(a=n.split("_")[1])&&(f%=u)!==f%180&&(f+=f<0?u:-360),"cw"===a&&f<0?f=(f+36e9)%u-~~(f/u)*u:"ccw"===a&&f>0&&(f=(f-36e9)%u-~~(f/u)*u)),t._pt=o=new pr(t._pt,e,r,i,f,Rr),o.e=c,o.u="deg",t._props.push(r),o},Mi=function(t,e){for(var r in e)t[r]=e[r];return t},Oi=function(t,e,r){var i,n,s,a,o,u,h,l=Mi({},r._gsap),f=r.style;for(n in l.svg?(s=r.getAttribute("transform"),r.setAttribute("transform",""),f[Hr]=e,i=gi(r,1),ri(r,Hr),r.setAttribute("transform",s)):(s=getComputedStyle(r)[Hr],f[Hr]=e,i=gi(r,1),f[Hr]=s),Or)(s=l[n])!==(a=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=ie(s)!==(h=ie(a))?si(r,n,s,h):parseFloat(s),u=parseFloat(a),t._pt=new pr(t._pt,i,n,o,u-o,zr),t._pt.u=h||0,t._props.push(n));Mi(i,l)};Tt("padding,margin,Width,Radius",(function(t,e){var r="Top",i="Right",n="Bottom",s="Left",a=(e<3?[r,i,n,s]:[r+s,r+i,n+i,n+s]).map((function(r){return e<2?t+r:"border"+r+t}));li[e>1?"border"+t:t]=function(t,e,r,i,n){var s,o;if(arguments.length<4)return s=a.map((function(e){return ai(t,e,r)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(i+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,n)}}));var Di,Ai,Ci,ki={name:"css",register:Zr,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,r,i,n){var s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,b,T,w,x,M=this._props,O=t.style,D=r.vars.startAt;for(f in Tr||Zr(),e)if("autoRound"!==f&&(a=e[f],!pt[f]||!je(f,e,r,i,t,n)))if(h=typeof a,l=li[f],"function"===h&&(h=typeof(a=a.call(r,i,t,n))),"string"===h&&~a.indexOf("random(")&&(a=de(a)),l)l(this,t,f,a,r)&&(y=1);else if("--"===f.substr(0,2))s=(getComputedStyle(t).getPropertyValue(f)+"").trim(),a+="",Oe.lastIndex=0,Oe.test(s)||(c=ie(s),p=ie(a)),p?c!==p&&(s=si(t,f,s,p)+p):c&&(a+=c),this.add(O,"setProperty",s,a,i,n,0,0,f),M.push(f);else if("undefined"!==h){if(D&&f in D?(s="function"==typeof D[f]?D[f].call(r,i,t,n):D[f],U(s)&&~s.indexOf("random(")&&(s=de(s)),ie(s+"")||(s+=E.units[f]||ie(ai(t,f))||""),"="===(s+"").charAt(1)&&(s=ai(t,f))):s=ai(t,f),u=parseFloat(s),(d="string"===h&&"="===a.charAt(1)?+(a.charAt(0)+"1"):0)&&(a=a.substr(2)),o=parseFloat(a),f in Er&&("autoAlpha"===f&&(1===u&&"hidden"===ai(t,"visibility")&&o&&(u=0),ii(this,O,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==f&&"transform"!==f&&~(f=Er[f]).indexOf(",")&&(f=f.split(",")[0])),_=f in Or)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||gi(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new pr(this._pt,O,Hr,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===f)this._pt=new pr(this._pt,g,"scaleY",g.scaleY,(d?d*o:o-g.scaleY)||0),M.push("scaleY",f),f+="X";else{if("transformOrigin"===f){T=void 0,w=void 0,x=void 0,T=(b=a).split(" "),w=T[0],x=T[1]||"50%","top"!==w&&"bottom"!==w&&"left"!==x&&"right"!==x||(b=w,w=x,x=b),T[0]=ui[w]||w,T[1]=ui[x]||x,a=T.join(" "),g.svg?mi(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==g.zOrigin&&ii(this,g,"zOrigin",g.zOrigin,p),ii(this,O,f,vi(s),vi(a)));continue}if("svgOrigin"===f){mi(t,a,1,v,0,this);continue}if(f in ci){xi(this,g,f,u,a,d);continue}if("smoothOrigin"===f){ii(this,g,"smooth",g.smooth,a);continue}if("force3D"===f){g[f]=a;continue}if("transform"===f){Oi(this,a,t);continue}}else f in O||(f=$r(f)||f);if(_||(o||0===o)&&(u||0===u)&&!Pr.test(a)&&f in O)o||(o=0),(c=(s+"").substr((u+"").length))!==(p=ie(a)||(f in E.units?E.units[f]:c))&&(u=si(t,f,s,p)),this._pt=new pr(this._pt,_?g:O,f,u,d?d*o:o-u,_||"px"!==p&&"zIndex"!==f||!1===e.autoRound?zr:Lr),this._pt.u=p||0,c!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Fr);else if(f in O)oi.call(this,t,f,s,a);else{if(!(f in t)){at(f,a);continue}this.add(t,f,s||t[f],a,i,n)}M.push(f)}y&&cr(this)},get:ai,aliases:Er,getSetter:function(t,e,r){var i=Er[e];return i&&i.indexOf(",")<0&&(e=i),e in Or&&e!==Wr&&(t._gsap.x||ai(t,"x"))?r&&xr===r?"scale"===e?Xr:qr:(xr=r||{},"scale"===e?Yr:Vr):t.style&&!Y(t.style[e])?Nr:~e.indexOf("-")?Ur:nr(t,e)},core:{_removeProperty:ri,_getMatrix:_i}};gr.utils.checkPrefix=$r,Ci=Tt((Di="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Ai="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Or[t]=1})),Tt(Ai,(function(t){E.units[t]="deg",ci[t]=1})),Er[Ci[13]]=Di+","+Ai,Tt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Er[e[1]]=Ci[e[0]]})),Tt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){E.units[t]="px"})),gr.registerPlugin(ki);var Si,Pi,Ei=gr.registerPlugin(ki)||gr,zi=(Ei.core.Tween,{});Si=zi,Pi=function(){var t=document,e=t.createTextNode.bind(t);function r(t,e,r){t.style.setProperty(e,r)}function i(t,e){return t.appendChild(e)}function n(e,r,n,s){var a=t.createElement("span");return r&&(a.className=r),n&&(!s&&a.setAttribute("data-"+r,n),a.textContent=n),e&&i(e,a)||a}function s(t,e){return t.getAttribute("data-"+e)}function a(e,r){return e&&0!=e.length?e.nodeName?[e]:[].slice.call(e[0].nodeName?e:(r||t).querySelectorAll(e)):[]}function o(t){for(var e=[];t--;)e[t]=[];return e}function u(t,e){t&&t.some(e)}function h(t){return function(e){return t[e]}}var l={};function f(t,e,r){var i=r.indexOf(t);if(-1==i)r.unshift(t),u(l[t].depends,(function(e){f(e,t,r)}));else{var n=r.indexOf(e);r.splice(i,1),r.splice(n,0,t)}return r}function c(t,e,r,i){return{by:t,depends:e,key:r,split:i}}function p(t){return f(t,0,[]).map(h(l))}function d(t){l[t.by]=t}function _(t,r,s,o,h){t.normalize();var l=[],f=document.createDocumentFragment();o&&l.push(t.previousSibling);var c=[];return a(t.childNodes).some((function(t){if(!t.tagName||t.hasChildNodes()){if(t.childNodes&&t.childNodes.length)return c.push(t),void l.push.apply(l,_(t,r,s,o,h));var i=t.wholeText||"",a=i.trim();a.length&&(" "===i[0]&&c.push(e(" ")),u(a.split(s),(function(t,e){e&&h&&c.push(n(f,"whitespace"," ",h));var i=n(f,r,t);l.push(i),c.push(i)}))," "===i[i.length-1]&&c.push(e(" ")))}else c.push(t)})),u(c,(function(t){i(f,t)})),t.innerHTML="",i(t,f),l}var m="words",g=c(m,0,"word",(function(t){return _(t,"word",/\s+/,0,1)})),v="chars",y=c(v,[m],"char",(function(t,e,r){var i=[];return u(r.words,(function(t,r){i.push.apply(i,_(t,"char","",e.whitespace&&r))})),i}));function b(t){var e=(t=t||{}).key;return a(t.target||"[data-splitting]").map((function(i){var n=i["🍌"];if(!t.force&&n)return n;n=i["🍌"]={el:i};var a=p(t.by||s(i,"splitting")||v),o=function(t,e){for(var r in e)t[r]=e[r];return t}({},t);return u(a,(function(t){if(t.split){var s=t.by,a=(e?"-"+e:"")+t.key,h=t.split(i,o,n);a&&function(t,e,i){var n="--"+e,s=n+"-index";u(i,(function(t,e){Array.isArray(t)?u(t,(function(t){r(t,s,e)})):r(t,s,e)})),r(t,n+"-total",i.length)}(i,a,h),n[s]=h,i.classList.add(s)}})),i.classList.add("splitting"),n}))}function T(t,e,r){var i=a(e.matching||t.children,t),n={};return u(i,(function(t){var e=Math.round(t[r]);(n[e]||(n[e]=[])).push(t)})),Object.keys(n).map(Number).sort(w).map(h(n))}function w(t,e){return t-e}b.html=function(t){var e=(t=t||{}).target=n();return e.innerHTML=t.content,b(t),e.outerHTML},b.add=d;var x=c("lines",[m],"line",(function(t,e,r){return T(t,{matching:r.words},"offsetTop")})),M=c("items",0,"item",(function(t,e){return a(e.matching||t.children,t)})),O=c("rows",0,"row",(function(t,e){return T(t,e,"offsetTop")})),D=c("cols",0,"col",(function(t,e){return T(t,e,"offsetLeft")})),A=c("grid",["rows","cols"]),C="layout",k=c(C,0,0,(function(t,e){var o=e.rows=+(e.rows||s(t,"rows")||1),u=e.columns=+(e.columns||s(t,"columns")||1);if(e.image=e.image||s(t,"image")||t.currentSrc||t.src,e.image){var h=a("img",t)[0];e.image=h&&(h.currentSrc||h.src)}e.image&&r(t,"background-image","url("+e.image+")");for(var l=o*u,f=[],c=n(0,"cell-grid");l--;){var p=n(c,"cell");n(p,"cell-inner"),f.push(p)}return i(t,c),f})),S=c("cellRows",[C],"row",(function(t,e,r){var i=e.rows,n=o(i);return u(r.layout,(function(t,e,r){n[Math.floor(e/(r.length/i))].push(t)})),n})),P=c("cellColumns",[C],"col",(function(t,e,r){var i=e.columns,n=o(i);return u(r.layout,(function(t,e){n[e%i].push(t)})),n})),E=c("cells",["cellRows","cellColumns"],"cell",(function(t,e,r){return r.layout}));return d(g),d(y),d(x),d(M),d(O),d(D),d(A),d(k),d(S),d(P),d(E),b},"object"==typeof zi?zi=Pi():"function"==typeof define&&define.amd?define(Pi):Si.Splitting=Pi();let Ri={slotMachineTotalLetters:8,displayVerticalTitle:"HAPUKU"};class Fi{layout(){const t=Ri.slotMachineTotalLetters-2,e="ABCDEFGHIJKLMNOPRSTUVWXYZ";this.DOM.chars.forEach(((r,i)=>{const n=document.createElement("span");if(n.classList="letter-wrap",r.parentNode.appendChild(n),n.appendChild(r),0===i){this.DOM.slotMachine=document.createElement("span"),this.DOM.slotMachine.classList="letter-wrap__inner",n.appendChild(this.DOM.slotMachine);const i=Array.from({length:t},(t=>e.charAt(Math.floor(Math.random()*e.length))));let s=`${r.innerHTML}`;for(let e=0;e<=t-1;++e)s+=e===t-1?`${i[e]}${Ri.displayVerticalTitle.charAt(this.itemPosition)}`:`${i[e]}`;this.DOM.slotMachine.innerHTML=s,n.removeChild(r)}}))}constructor(t){e(this,"DOM",{el:null,chars:null,slotMachine:null}),e(this,"itemPosition",void 0),this.DOM={el:t},this.DOM.chars=[...this.DOM.el.querySelectorAll("span.char")],this.itemPosition=[...this.DOM.el.parentNode.children].indexOf(this.DOM.el),this.layout()}}t(zi)();var Li;new class{initEvents(){this.DOM.menuCtrl.el.addEventListener("click",(()=>{this.menuStatus.isAnimating||(this.menuStatus.isOpen?this.close():this.open())}))}open(){if(this.menuStatus.isAnimating||this.menuStatus.isOpen)return;this.menuStatus.isAnimating=!0,this.menuStatus.isOpen=!0;const t={value:"linear-gradient(to bottom, #2b192c, #1a191c)"};this.menuTimeline=Ei.timeline({defaults:{duration:1.7,ease:"expo.inOut"},onComplete:()=>this.menuStatus.isAnimating=!1}).addLabel("start",0).add((()=>{this.DOM.el.classList.add("menu--open")}),"start").to(this.DOM.bg,{startAt:{x:-1*this.DOM.bg.offsetWidth+.2*window.innerWidth+.11*window.innerHeight},x:0},"start").to(t,{value:"linear-gradient(rgb(68, 37, 61), rgb(29 24 39))",onUpdate:()=>this.DOM.bg.style.backgroundImage=t.value},"start").to(this.DOM.tagline,{opacity:0,x:"-50%"},"start").to(this.DOM.menuCtrl.cross,{duration:.5,ease:"power2.inOut",opacity:1},"start").to(this.DOM.menuCtrl.lines,{duration:.5,ease:"power2.inOut",opacity:0},"start").to(this.menuItems.map((t=>t.DOM.slotMachine)),{y:100/Ri.slotMachineTotalLetters*(Ri.slotMachineTotalLetters-1)+"%",stagger:.03},"start"),this.menuItems.forEach((t=>{this.menuTimeline.to(t.DOM.chars,{startAt:{x:"100%",rotation:10,opacity:1},x:"0%",opacity:1,rotation:0,stagger:.04},"start")}))}close(){if(this.menuStatus.isAnimating||!this.menuStatus.isOpen)return;this.menuStatus.isAnimating=!0,this.menuStatus.isOpen=!1;const t={value:"linear-gradient(rgb(68, 37, 61), rgb(29 24 39))"};this.menuTimeline=Ei.timeline({defaults:{duration:1.3,ease:"expo.inOut"},onComplete:()=>this.menuStatus.isAnimating=!1}).addLabel("start",0).add((()=>{this.DOM.el.classList.remove("menu--open")}),"start").to(this.DOM.menuCtrl.cross,{duration:.5,ease:"power2.inOut",opacity:0},"start").to(this.DOM.menuCtrl.lines,{duration:.5,ease:"power2.inOut",opacity:1},"start").to(this.menuItems.map((t=>t.DOM.slotMachine)),{duration:1.5,y:"0%",stagger:-.01},"start"),this.menuItems.forEach((t=>{this.menuTimeline.to(t.DOM.chars,{x:"100%",rotation:10,stagger:-.04},"start")})),this.menuTimeline.to(this.DOM.bg,{x:-1*this.DOM.bg.offsetWidth+.2*window.innerWidth+.11*window.innerHeight,onComplete:()=>{this.DOM.bg.style.transform="translateX(-100%) translateX(20vw) translateX(11vh)"}},"start+=0.2").to(t,{value:"linear-gradient(to bottom, #2b192c, #1a191c)",onUpdate:()=>this.DOM.bg.style.backgroundImage=t.value},"start+=0.2").to(this.DOM.tagline,{opacity:1,x:"0%"},"start+=0.2")}constructor(t){e(this,"DOM",{el:null,items:null,menuCtrl:{el:null,lines:null,cross:null},bg:null,tagline:null}),e(this,"menuItems",[]),e(this,"menuStatus",{isOpen:!1,isAnimating:!1}),this.DOM={el:t},this.DOM.items=[...this.DOM.el.querySelectorAll(".menu__item")],this.DOM.menuCtrl={el:this.DOM.el.querySelector(".menu__button")},this.DOM.menuCtrl.lines=this.DOM.menuCtrl.el.querySelector("path.menu__button-lines"),this.DOM.menuCtrl.cross=this.DOM.menuCtrl.el.querySelector("path.menu__button-cross"),this.DOM.bg=this.DOM.el.querySelector(".menu__bg"),this.DOM.tagline=this.DOM.el.querySelector(".menu__tagline"),this.DOM.items.forEach((t=>this.menuItems.push(new Fi(t)))),this.initEvents()}}(document.querySelector(".menu")),(Li="zhn4ifz",new Promise((t=>{WebFont.load({typekit:{id:Li},active:t})}))).then((()=>document.body.classList.remove("loading"))); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Letter Shuffle Menu | Codrops

Letter Shuffle Menu

I began trying to make my confession to Buddha; but tears choked me and my voice fell to a whisper. It was now quite dark. I went to the window and looked out. The Chapel stood high, and below it was what seemed like a precipitous ravine; it lay in a cup or hollow and the steep banks on either side were overgrown with tall trees, so that the place was very closed-in and dark.

The moon was some twenty days old and having risen late in the night was now shining with extraordinary brilliance. Here and there the moonlight pierced through the trees, making sudden patches of brightness; there was one such just at the foot of the cliff. Looking straight below me I could see what appeared to be a vast lake, but was indeed only a small drinking-pool.

Murasaki, The Sacred Tree

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lettershufflemenu", 3 | "version": "1.0.0", 4 | "browserslist": "> 0.5%, last 2 versions, not dead", 5 | "description": "A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/codrops/LetterShuffleMenu.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/LetterShuffleMenu/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "^2.3.2" 25 | }, 26 | "dependencies": { 27 | "gsap": "^3.9.1", 28 | "splitting": "^1.0.6" 29 | } 30 | } -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 18px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #867a8b; 14 | --color-text-alt: #9b7749; 15 | --color-link: #6b4e65; 16 | --color-link-hover: #9b7749; 17 | --color-menu: #e3dce5; 18 | --color-menu-hover: #af449a; 19 | --color-menu-border: #4c2d4e; 20 | color: var(--color-text); 21 | background: linear-gradient(to bottom, #2b192c, #1a191c); 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | font-family: acumin-pro-wide, sans-serif; 25 | font-weight: 300; 26 | --size-menu: 6vh; 27 | } 28 | 29 | /* Page Loader */ 30 | .js .loading::before, 31 | .js .loading::after { 32 | content: ''; 33 | position: fixed; 34 | z-index: 10000; 35 | } 36 | 37 | .js .loading::before { 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background: linear-gradient(to bottom, #2b192c, #1a191c); 43 | } 44 | 45 | .js .loading::after { 46 | top: 50%; 47 | left: 50%; 48 | width: 60px; 49 | height: 60px; 50 | margin: -30px 0 0 -30px; 51 | border-radius: 50%; 52 | opacity: 0.4; 53 | background: var(--color-link); 54 | animation: loaderAnim 0.7s linear infinite alternate forwards; 55 | 56 | } 57 | 58 | @keyframes loaderAnim { 59 | to { 60 | opacity: 1; 61 | transform: scale3d(0.5,0.5,1); 62 | } 63 | } 64 | 65 | a { 66 | text-decoration: none; 67 | color: var(--color-link); 68 | outline: none; 69 | } 70 | 71 | a:hover { 72 | color: var(--color-link-hover); 73 | outline: none; 74 | } 75 | 76 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 77 | a:focus { 78 | /* Provide a fallback style for browsers 79 | that don't support :focus-visible */ 80 | outline: none; 81 | background: lightgrey; 82 | } 83 | 84 | a:focus:not(:focus-visible) { 85 | /* Remove the focus indicator on mouse-focus for browsers 86 | that do support :focus-visible */ 87 | background: transparent; 88 | } 89 | 90 | a:focus-visible { 91 | background: transparent; 92 | } 93 | 94 | .content a:focus-visible, 95 | .frame a:focus-visible { 96 | /* Draw a very noticeable focus style for 97 | keyboard-focus on browsers that do support 98 | :focus-visible */ 99 | outline: 2px solid var(--color-link); 100 | background: transparent; 101 | } 102 | 103 | /* Line hover */ 104 | .hover-line { 105 | white-space: nowrap; 106 | overflow: hidden; 107 | position: relative; 108 | } 109 | 110 | .hover-line::before { 111 | content: ''; 112 | height: 1px; 113 | width: 100%; 114 | background: currentColor; 115 | position: absolute; 116 | top: 92%; 117 | transition: transform 0.3s; 118 | transform-origin: 0% 50%; 119 | } 120 | 121 | .hover-line:hover::before { 122 | transform: scaleX(0); 123 | transform-origin: 100% 50%; 124 | } 125 | 126 | .unbutton { 127 | background: none; 128 | border: 0; 129 | padding: 0; 130 | margin: 0; 131 | font: inherit; 132 | } 133 | 134 | .unbutton:focus { 135 | outline: none; 136 | } 137 | 138 | main { 139 | width: 100%; 140 | min-height: 100vh; 141 | display: grid; 142 | grid-template-columns: 10vw 10vh 10vw 5vw 32vw 1fr; 143 | grid-template-rows: auto 1fr; 144 | grid-template-areas: 'side side side frame frame frame' 145 | 'content content content content content content'; 146 | } 147 | 148 | .no-js main { 149 | grid-template-areas: 'content content content content content content'; 150 | } 151 | 152 | .frame { 153 | position: relative; 154 | color: var(--color-text-alt); 155 | grid-area: frame; 156 | padding: 0.75rem 1.5rem; 157 | background: #2b192c; 158 | } 159 | 160 | .frame a { 161 | pointer-events: auto; 162 | } 163 | 164 | .frame__title { 165 | font-size: 1rem; 166 | font-weight: 300; 167 | margin: 0; 168 | justify-self: start; 169 | grid-area: title; 170 | } 171 | 172 | .frame__links { 173 | grid-area: links; 174 | padding: 0; 175 | margin: 1rem 0; 176 | justify-self: end; 177 | } 178 | 179 | .frame__links a:not(:last-child) { 180 | margin-right: 1rem; 181 | } 182 | 183 | .content { 184 | grid-area: content; 185 | display: grid; 186 | place-content: center; 187 | padding: 1rem 5vw; 188 | } 189 | 190 | .button-next { 191 | cursor: not-allowed; 192 | grid-area: content; 193 | align-self: center; 194 | justify-self: end; 195 | width: 70px; 196 | height: 140px; 197 | display: none; 198 | place-items: center; 199 | border-radius: 70px 0 0 70px; 200 | background: linear-gradient(to bottom, #9b498a, #9b7749); 201 | } 202 | 203 | .color-alt { 204 | color: var(--color-text-alt); 205 | } 206 | 207 | .menu { 208 | grid-area: 1 / 1 / 2 / 7; 209 | display: grid; 210 | grid-template-columns: 5vw 5vw 11vh 5vw 1fr; 211 | grid-template-rows: auto 1fr; 212 | position: relative; 213 | pointer-events: none; 214 | z-index: 100; 215 | border-bottom: 1px solid var(--color-menu-border); 216 | } 217 | 218 | .no-js .menu { 219 | display: none; 220 | } 221 | 222 | .menu__bg { 223 | transform: translateX(-100%) translateX(20vw) translateX(11vh); 224 | grid-area: 1 / 1 / 3 / 6; 225 | position: absolute; 226 | left: 0; 227 | width: 100%; 228 | height: 100%; 229 | background: linear-gradient(to bottom, #2b192c, #1a191c); 230 | border-right: 1px solid var(--color-menu-border); 231 | pointer-events: none; 232 | } 233 | 234 | .menu__button { 235 | margin: 1.25rem; 236 | position: relative; 237 | align-self: start; 238 | cursor: pointer; 239 | pointer-events: auto; 240 | grid-area: 1 / 1 / 2 / 3; 241 | justify-self: start; 242 | } 243 | 244 | .menu__button path { 245 | stroke: var(--color-link); 246 | fill: none; 247 | } 248 | 249 | .menu__button:hover path, 250 | .menu__button:focus-visible path { 251 | stroke: var(--color-menu-hover); 252 | } 253 | 254 | .menu__button-cross { 255 | opacity: 0; 256 | } 257 | 258 | .menu__items { 259 | grid-area: 2 / 1 / 2 / 6; 260 | justify-content: start; 261 | display: flex; 262 | flex-direction: column; 263 | align-items: flex-start; 264 | position: relative; 265 | pointer-events: none; 266 | margin: 1rem; 267 | padding-bottom: 1rem; 268 | } 269 | 270 | .menu--open .menu__items { 271 | pointer-events: auto; 272 | } 273 | 274 | .menu__item { 275 | font-family: space-mono, monospace; 276 | font-weight: 400; 277 | text-transform: uppercase; 278 | font-size: var(--size-menu); 279 | line-height: 0.9; 280 | color: var(--color-menu); 281 | position: relative; 282 | cursor: pointer; 283 | } 284 | 285 | .menu__item span { 286 | pointer-events: none; 287 | } 288 | 289 | .menu__item .letter-wrap__inner span:first-child, 290 | .menu__item .letter-wrap__inner span, 291 | .menu__item .letter-wrap span.char { 292 | transition: color 0.2s ease; 293 | } 294 | 295 | .menu--open .menu__item:hover .letter-wrap__inner span:first-child, 296 | .menu--open .menu__item:hover .letter-wrap__inner span, 297 | .menu--open .menu__item:hover .letter-wrap span.char, 298 | .menu--open .menu__item:focus .letter-wrap__inner span:first-child, 299 | .menu--open .menu__item:focus .letter-wrap__inner span, 300 | .menu--open .menu__item:focus .letter-wrap span.char { 301 | color: var(--color-menu-hover); 302 | } 303 | 304 | .menu--open .menu__item:focus-visible { 305 | outline: 2px solid var(--color-link); 306 | background: transparent; 307 | } 308 | 309 | .menu__item.splitting .word { 310 | display: flex; 311 | } 312 | 313 | .menu__item.splitting .char { 314 | flex: none; 315 | display: flex; 316 | justify-content: center; 317 | transform-origin: 50% 100%; 318 | will-change: transform, color; 319 | } 320 | 321 | .menu__item .char { 322 | color: var(--color-link); 323 | } 324 | 325 | .letter-wrap, 326 | .letter-wrap__inner span, 327 | .menu__item.splitting .char { 328 | width: calc(var(--size-menu) * 0.6666); 329 | display: flex; 330 | justify-content: center; 331 | will-change: transform, color; 332 | } 333 | 334 | .letter-wrap__inner span:first-child { 335 | color: var(--color-link); 336 | } 337 | 338 | .letter-wrap { 339 | flex: none; 340 | height: calc(var(--size-menu) * 0.8833); 341 | overflow: hidden; 342 | display: flex; 343 | align-items: flex-end; 344 | justify-content: center; 345 | } 346 | 347 | .letter-wrap > span:not(.letter-wrap__inner) { 348 | opacity: 0; 349 | } 350 | 351 | .letter-wrap__inner { 352 | display: flex; 353 | flex-direction: column; 354 | height: fit-content; 355 | } 356 | 357 | .menu__tagline { 358 | display: none; 359 | font-family: kudryashev-d-excontrast-sans, sans-serif; 360 | font-weight: 300; 361 | font-style: normal; 362 | font-size: 1.75rem; 363 | grid-area: 1 / 4 / 2 / 5; 364 | text-transform: none; 365 | margin: 12.5vh 0 0 1.5vw; 366 | text-align: right; 367 | -webkit-writing-mode: vertical-rl; 368 | writing-mode: vertical-rl; 369 | transform: rotate(180deg); 370 | } 371 | 372 | @media screen and (min-width: 54em) { 373 | body { 374 | --size-menu: 15vh; 375 | } 376 | main { 377 | height: 100vh; 378 | overflow: hidden; 379 | grid-template-rows: 100%; 380 | grid-template-areas: 'side side side content content content' 381 | } 382 | 383 | .menu { 384 | grid-area: 1 / 1 / 2 / 6; 385 | grid-template-rows: 100%; 386 | border: 0; 387 | } 388 | 389 | .menu__items { 390 | grid-area: 1 / 3 / 2 / 6; 391 | justify-content: center; 392 | margin: 1vh 0 0 0; 393 | padding-bottom: 0; 394 | } 395 | 396 | .frame { 397 | background: none; 398 | grid-area: content; 399 | display: grid; 400 | align-content: space-between; 401 | pointer-events: none; 402 | grid-template-columns: 50% 50%; 403 | grid-template-rows: auto auto auto; 404 | grid-template-areas: '... sponsor' 405 | '... arrow' 406 | 'title links'; 407 | } 408 | 409 | .frame::after { 410 | content: ''; 411 | position: absolute; 412 | top: 0; 413 | left: 0; 414 | pointer-events: none; 415 | width: 100%; 416 | height: 100%; 417 | z-index: 10; 418 | background: linear-gradient(to bottom, #2b192c, #1a191c); 419 | opacity: 0; 420 | transition: opacity 1s ease-in-out 0.3s; 421 | } 422 | 423 | .menu--open ~ .frame::after { 424 | opacity: 0.8; 425 | transition-delay: 0s; 426 | pointer-events: auto; 427 | } 428 | 429 | .button-next { 430 | display: grid; 431 | } 432 | .menu__tagline { 433 | display: block; 434 | } 435 | 436 | .menu__button { 437 | align-self: center; 438 | justify-self: center; 439 | margin: 0; 440 | grid-area: 1 / 1 / 2 / 2; 441 | } 442 | 443 | .content { 444 | display: flex; 445 | justify-content: center; 446 | align-items: center; 447 | padding: 0; 448 | } 449 | 450 | .content__column { 451 | max-width: 34ch; 452 | padding: 0 1.5rem; 453 | } 454 | 455 | .content__column:first-child { 456 | margin-top: -10vh; 457 | } 458 | 459 | .content__column:last-child { 460 | margin-top: 10vh; 461 | } 462 | 463 | .frame__links { 464 | margin: 0; 465 | } 466 | 467 | } 468 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LetterShuffleMenu/32cf37157f32f6e3f323de63d872319704429cc7/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Letter Shuffle Menu | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 53 |
54 |

Letter Shuffle Menu

55 | 60 |
61 |
62 |
63 |

I began trying to make my confession to Buddha; but tears choked me and my voice fell to a whisper. It was now quite dark. I went to the window and looked out. The Chapel stood high, and below it was what seemed like a precipitous ravine; it lay in a cup or hollow and the steep banks on either side were overgrown with tall trees, so that the place was very closed-in and dark.

64 |
65 |
66 |

The moon was some twenty days old and having risen late in the night was now shining with extraordinary brilliance. Here and there the moonlight pierced through the trees, making sudden patches of brightness; there was one such just at the foot of the cliff. Looking straight below me I could see what appeared to be a vast lake, but was indeed only a small drinking-pool.

67 |

Murasaki, The Sacred Tree

68 |
69 |
70 | 73 |
74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadFonts } from './utils'; 2 | import { Menu } from './menu'; 3 | 4 | // Initialize Menu instance 5 | new Menu(document.querySelector('.menu')); 6 | // Preloading webkit font 7 | preloadFonts('zhn4ifz').then(() => document.body.classList.remove('loading')); -------------------------------------------------------------------------------- /src/js/menu.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import "splitting/dist/splitting.css"; 3 | import "splitting/dist/splitting-cells.css"; 4 | import Splitting from 'splitting'; 5 | import { menuConfig } from './menuConfig'; 6 | import { MenuItem } from './menuItem'; 7 | 8 | // initialize Splitting 9 | Splitting(); 10 | 11 | /** 12 | * Class representing the menu element (.menu) 13 | */ 14 | export class Menu { 15 | // DOM elements 16 | DOM = { 17 | // Main element (.menu) 18 | el: null, 19 | // Menu items (.menu__item) 20 | items: null, 21 | // Menu button control 22 | menuCtrl: { 23 | el: null, 24 | lines: null, 25 | cross: null 26 | }, 27 | // (.menu__bg) 28 | bg: null, 29 | // (.menu__tagline) 30 | tagline: null, 31 | } 32 | // The Menu Items instances array 33 | menuItems = []; 34 | // Checks if the menu is open or is currently animating 35 | menuStatus = { 36 | isOpen: false, 37 | isAnimating: false 38 | }; 39 | 40 | /** 41 | * Constructor. 42 | * @param {Element} DOM_el - the .menu element 43 | */ 44 | constructor(DOM_el) { 45 | this.DOM = {el: DOM_el}; 46 | this.DOM.items = [...this.DOM.el.querySelectorAll('.menu__item')]; 47 | this.DOM.menuCtrl = {el: this.DOM.el.querySelector('.menu__button')}; 48 | this.DOM.menuCtrl.lines = this.DOM.menuCtrl.el.querySelector('path.menu__button-lines') 49 | this.DOM.menuCtrl.cross = this.DOM.menuCtrl.el.querySelector('path.menu__button-cross') 50 | this.DOM.bg = this.DOM.el.querySelector('.menu__bg'); 51 | this.DOM.tagline = this.DOM.el.querySelector('.menu__tagline'); 52 | 53 | // Create the MenuItem instances 54 | this.DOM.items.forEach(item => this.menuItems.push(new MenuItem(item))); 55 | 56 | this.initEvents(); 57 | } 58 | /** 59 | * Initializes some events. 60 | */ 61 | initEvents() { 62 | this.DOM.menuCtrl.el.addEventListener('click', () => { 63 | if ( this.menuStatus.isAnimating ) return; 64 | 65 | if ( !this.menuStatus.isOpen ) { 66 | this.open(); 67 | } 68 | else { 69 | this.close(); 70 | } 71 | }); 72 | } 73 | /** 74 | * Opens the menu 75 | */ 76 | open() { 77 | if ( this.menuStatus.isAnimating || this.menuStatus.isOpen ) return; 78 | this.menuStatus.isAnimating = true; 79 | this.menuStatus.isOpen = true; 80 | 81 | const gradient = {value: 'linear-gradient(to bottom, #2b192c, #1a191c)'}; 82 | 83 | this.menuTimeline = gsap.timeline({ 84 | defaults: { 85 | duration: 1.7, 86 | ease: 'expo.inOut' 87 | }, 88 | onComplete: () => this.menuStatus.isAnimating = false 89 | }) 90 | .addLabel('start', 0) 91 | .add(() => { 92 | this.DOM.el.classList.add('menu--open'); 93 | }, 'start') 94 | .to(this.DOM.bg, { 95 | startAt: {x: -1*this.DOM.bg.offsetWidth + .2*window.innerWidth + .11*window.innerHeight}, 96 | x: 0 97 | }, 'start') 98 | .to(gradient, { 99 | value: 'linear-gradient(rgb(68, 37, 61), rgb(29 24 39))', 100 | //value: 'linear-gradient(to bottom, #9b498a, #9b7749)', 101 | onUpdate: () => this.DOM.bg.style.backgroundImage = gradient.value 102 | }, 'start') 103 | .to(this.DOM.tagline, { 104 | opacity: 0, 105 | x: '-50%' 106 | }, 'start') 107 | .to(this.DOM.menuCtrl.cross, { 108 | duration: 0.5, 109 | ease: 'power2.inOut', 110 | opacity: 1 111 | }, 'start') 112 | .to(this.DOM.menuCtrl.lines, { 113 | duration: 0.5, 114 | ease: 'power2.inOut', 115 | opacity: 0 116 | }, 'start') 117 | .to(this.menuItems.map(item => item.DOM.slotMachine), { 118 | //ease: 'power3.inOut', 119 | y: `${100/menuConfig.slotMachineTotalLetters*(menuConfig.slotMachineTotalLetters-1)}%`, 120 | stagger: 0.03 121 | }, 'start') 122 | 123 | this.menuItems.forEach(item => { 124 | this.menuTimeline.to(item.DOM.chars, { 125 | startAt: {x: '100%', rotation: 10, opacity: 1}, 126 | x: '0%', 127 | opacity: 1, 128 | rotation: 0, 129 | stagger: 0.04 130 | }, 'start'); 131 | }); 132 | } 133 | /** 134 | * Closes the menu 135 | */ 136 | close() { 137 | if ( this.menuStatus.isAnimating || !this.menuStatus.isOpen ) return; 138 | this.menuStatus.isAnimating = true; 139 | this.menuStatus.isOpen = false; 140 | 141 | const gradient = {value: 'linear-gradient(rgb(68, 37, 61), rgb(29 24 39))'}; 142 | 143 | this.menuTimeline = gsap.timeline({ 144 | defaults: { 145 | duration: 1.3, 146 | ease: 'expo.inOut' 147 | }, 148 | onComplete: () => this.menuStatus.isAnimating = false 149 | }) 150 | .addLabel('start', 0) 151 | .add(() => { 152 | this.DOM.el.classList.remove('menu--open'); 153 | }, 'start') 154 | .to(this.DOM.menuCtrl.cross, { 155 | duration: 0.5, 156 | ease: 'power2.inOut', 157 | opacity: 0 158 | }, 'start') 159 | .to(this.DOM.menuCtrl.lines, { 160 | duration: 0.5, 161 | ease: 'power2.inOut', 162 | opacity: 1 163 | }, 'start') 164 | .to(this.menuItems.map(item => item.DOM.slotMachine), { 165 | duration: 1.5, 166 | y: '0%', 167 | stagger: -0.01 168 | }, 'start') 169 | 170 | this.menuItems.forEach(item => { 171 | this.menuTimeline.to(item.DOM.chars, { 172 | x: '100%', 173 | rotation: 10, 174 | stagger: -0.04 175 | }, 'start'); 176 | }); 177 | 178 | this.menuTimeline 179 | .to(this.DOM.bg, { 180 | x: -1*this.DOM.bg.offsetWidth + .2*window.innerWidth + .11*window.innerHeight, 181 | onComplete: () => { 182 | this.DOM.bg.style.transform = 'translateX(-100%) translateX(20vw) translateX(11vh)'; 183 | } 184 | }, 'start+=0.2') 185 | .to(gradient, { 186 | value: 'linear-gradient(to bottom, #2b192c, #1a191c)', 187 | onUpdate: () => this.DOM.bg.style.backgroundImage = gradient.value 188 | }, 'start+=0.2') 189 | .to(this.DOM.tagline, { 190 | opacity: 1, 191 | x: '0%' 192 | }, 'start+=0.2') 193 | } 194 | } -------------------------------------------------------------------------------- /src/js/menuConfig.js: -------------------------------------------------------------------------------- 1 | /** 2 | * exports some default options. 3 | */ 4 | export let menuConfig = { 5 | slotMachineTotalLetters: 8, 6 | displayVerticalTitle: 'HAPUKU' 7 | }; -------------------------------------------------------------------------------- /src/js/menuItem.js: -------------------------------------------------------------------------------- 1 | import { menuConfig } from './menuConfig'; 2 | 3 | /** 4 | * Class representing the menu item (.menu__item) 5 | */ 6 | export class MenuItem { 7 | // DOM elements 8 | DOM = { 9 | // Main element (.menu__item) 10 | el: null, 11 | // The span.char created by calling Splitting 12 | chars: null, 13 | // the element that stores all the vertical letters (.letter-wrap__inner) and that will animate up/down before revealing the menu item tex 14 | slotMachine: null, 15 | } 16 | // The position of this item in the menu 17 | itemPosition; 18 | 19 | /** 20 | * Constructor. 21 | * @param {Element} DOM_el - the .menu__item element 22 | */ 23 | constructor(DOM_el) { 24 | this.DOM = {el: DOM_el}; 25 | this.DOM.chars = [...this.DOM.el.querySelectorAll('span.char')]; 26 | this.itemPosition = [...this.DOM.el.parentNode.children].indexOf(this.DOM.el); 27 | 28 | // Creates the necessary DOM elements to store all the letters and the extra random letters for the slot machine effect 29 | this.layout(); 30 | } 31 | /** 32 | * This DOM modification will happen for every menu item e.g. ABOUT 33 | * 34 | * The a.menu__item will get transformed into: 35 | * 36 | * 37 | * 38 | * 39 | * A // first letter in "ABOUT" 40 | * H // random letter 41 | * W // random letter 42 | * P // random letter 43 | * ... // random letters 44 | * P // first letter in "HAPUKU" 45 | * 46 | * 47 | * B 48 | * O 49 | * U 50 | * T 51 | * 52 | */ 53 | layout() { 54 | // We need slotMachineTotalLetters-2 random letters. 55 | // The first span inside the .letter-wrap__inner is the first letter in the original link name 56 | // The last span inside the .letter-wrap__inner is the nth letter (this menu item'position) in the menuConfig.displayVerticalTitle 57 | const totalRandomChars = menuConfig.slotMachineTotalLetters-2; 58 | const allChars = 'ABCDEFGHIJKLMNOPRSTUVWXYZ'; 59 | 60 | this.DOM.chars.forEach((char, charPosition) => { 61 | const wrapEl = document.createElement('span'); 62 | wrapEl.classList = 'letter-wrap'; 63 | char.parentNode.appendChild(wrapEl); 64 | wrapEl.appendChild(char); 65 | 66 | // First char needs a vertical structure (slot machine) 67 | if ( charPosition === 0 ) { 68 | this.DOM.slotMachine = document.createElement('span'); 69 | this.DOM.slotMachine.classList = 'letter-wrap__inner'; 70 | wrapEl.appendChild(this.DOM.slotMachine); 71 | 72 | const randomCharsArray = Array.from({ length: totalRandomChars }, _ => allChars.charAt(Math.floor(Math.random() * allChars.length))); 73 | let htmlStr = `${char.innerHTML}`; 74 | for (let i = 0; i <= totalRandomChars-1; ++i ) { 75 | htmlStr += i === totalRandomChars-1 ? `${randomCharsArray[i]}${menuConfig.displayVerticalTitle.charAt(this.itemPosition)}` : `${randomCharsArray[i]}` 76 | }; 77 | this.DOM.slotMachine.innerHTML = htmlStr; 78 | wrapEl.removeChild(char); 79 | } 80 | }); 81 | } 82 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | // Preload images 2 | const preloadFonts = id => { 3 | return new Promise((resolve) => { 4 | WebFont.load({ 5 | typekit: { 6 | id: id 7 | }, 8 | active: resolve 9 | }); 10 | }); 11 | }; 12 | 13 | export { 14 | preloadFonts 15 | }; --------------------------------------------------------------------------------