├── .gitattributes ├── .gitignore ├── .htmlnanorc ├── LICENSE ├── README.md ├── dist ├── 1.04213a58.jpg ├── 2.3ff1fdb6.jpg ├── 3.b606be87.jpg ├── 4.24fd614c.jpg ├── 5.d13f5e61.jpg ├── 6.786c7db4.jpg ├── 7.df95fe5c.jpg ├── 8.e7faf38e.jpg ├── 9.ea63bab4.jpg ├── favicon.a64e97b2.ico ├── index.01b4f97a.css ├── index.b5e7c14d.js ├── index.e9a2d1b4.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── arrow.svg ├── menu.svg └── menuback.svg ├── index.html └── js ├── index.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 -------------------------------------------------------------------------------- /.htmlnanorc: -------------------------------------------------------------------------------- 1 | { 2 | "minifySvg": false 3 | } -------------------------------------------------------------------------------- /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 | # Infinite Menu Background Animation 2 | 3 | A page transition with an animated SVG path for a menu that has an infinite background animation. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2021/11/Theodore_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=57286) 8 | 9 | [Demo](http://tympanus.net/Development/Theodore/) 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/1.04213a58.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/1.04213a58.jpg -------------------------------------------------------------------------------- /dist/2.3ff1fdb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/2.3ff1fdb6.jpg -------------------------------------------------------------------------------- /dist/3.b606be87.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/3.b606be87.jpg -------------------------------------------------------------------------------- /dist/4.24fd614c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/4.24fd614c.jpg -------------------------------------------------------------------------------- /dist/5.d13f5e61.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/5.d13f5e61.jpg -------------------------------------------------------------------------------- /dist/6.786c7db4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/6.786c7db4.jpg -------------------------------------------------------------------------------- /dist/7.df95fe5c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/7.df95fe5c.jpg -------------------------------------------------------------------------------- /dist/8.e7faf38e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/8.e7faf38e.jpg -------------------------------------------------------------------------------- /dist/9.ea63bab4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/9.ea63bab4.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Theodore/e7bfd13c67e63aac864f812d0fa0f56a3eb7ee18/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.01b4f97a.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:15px}body{--color-text:#000;--color-text-alt:#3e4843;--color-heading-main:#000;--color-heading-main-alt:#fff;--color-heading-sub:#374b41;--color-menu:#7ec59d;--color-menu-hover:#128b47;--color-bg:#4f6c5e;--color-bg-menu:#000;--color-link:#000;--color-link-alt:#3e4843;--color-link-hover:#000;--color-link-alt-hover:#fff;--color-button-menu:#000;--color-button-menu-hover:#79a18a;--color-button-close:#fff;--color-button-close-hover:#79a18a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);font-family:meno-banner,serif;margin:0;overflow:hidden}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{background:var(--color-bg);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;outline:2px solid #fff}.unbutton{background:none;border:0;cursor:pointer;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}.hover-line{display:inline-block;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%}main{grid-template-columns:100%;grid-template-rows:100vh}.frame,main{display:grid}.frame{align-content:space-between;align-items:center;font-size:1rem;grid-area:1/1/2/2;grid-template-areas:"author heading heading button" "... ... ... ..." "links links links links" "title title title title";grid-template-columns:repeat(4,25%);grid-template-rows:auto auto 1fr auto;height:100vh;padding:1rem 1rem .5rem;pointer-events:none;z-index:100}.frame--menu-open{--color-link:var(--color-link-alt);--color-link-hover:(--color-link-hover-alt);--color-heading-main:var(--color-heading-main-alt);color:var(--color-text-alt)}.frame__title{font-size:inherit;font-weight:400;grid-area:title;justify-self:center;margin:.5rem 0 0}.frame__links{align-self:end;display:flex;flex-wrap:wrap;grid-area:links;justify-self:center}.frame__links a{margin:0 .5rem}.frame__author{grid-area:author;margin:0}.frame__button{grid-area:button;justify-self:end}.frame--menu-open .frame__author{opacity:0;pointer-events:none}.frame__heading{display:flex;flex-direction:column;grid-area:heading;justify-self:center;margin:0;text-align:center;white-space:nowrap}.frame__heading-main{color:var(--color-heading-main);display:block;font-size:1.5rem;line-height:.8}.frame__heading-sub{color:var(--color-heading-sub);font-size:.75rem;line-height:1}.frame--menu-open .frame__heading-sub{opacity:0;pointer-events:none}.frame a,.frame button{pointer-events:auto}.button-menu{fill:var(--color-button-menu);border:1px solid var(--color-button-menu);border-radius:50%;display:inline-grid;height:64px;place-items:center;width:64px}.button-menu svg{transition:transform .5s ease}.button-menu:focus-visible,.button-menu:hover{fill:var(--color-button-menu-hover);border-color:var(--color-button-menu-hover)}.button-menu:hover svg{transform:scale(1.1)}.frame--menu-open .button-menu{opacity:0;pointer-events:none}.content{align-items:center;display:flex;flex-direction:column;grid-area:1/1/2/2;height:100vh;justify-content:center;position:relative;width:100vw}.content__title{cursor:default;font-size:7.5vw;font-weight:400;line-height:.75;margin:10vh 0 0;text-align:center}.content__title-main{font-size:23vw}.content__title-main,.content__title-sub{display:block;will-change:opacity,transform}.button-enter{cursor:not-allowed;margin-top:4vh;transition:transform .5s ease}.button-enter:hover{transform:translateX(15px) rotate(-40deg)}.menu-wrap{background:var(--color-bg-menu);display:grid;grid-area:1/1/2/2;grid-template-columns:100%;grid-template-rows:100vh;opacity:0;pointer-events:none;position:relative}.menu-wrap.menu-wrap--open{opacity:1;pointer-events:auto}.overlay{pointer-events:none;width:100%;z-index:1000}.menu,.overlay{grid-area:1/1/2/2;height:100%;position:relative}.menu{align-items:center;display:flex;flex-direction:column;justify-content:center}.menu__item{color:#fff;cursor:pointer;font-size:9vw;font-weight:300;line-height:1;position:relative;text-align:right;will-change:opacity,transform}.menu__item:hover .menu__item-tiny{color:#fff}.menu__item-tiny{font-size:1rem}.menu__item:nth-child(odd){margin-left:-10vw}.menu__item-text{color:var(--color-menu)}.menu__item:hover .menu__item-text{color:var(--color-menu-hover)}.tiles{display:flex;flex-direction:column;height:150vh;justify-content:center;left:50%;opacity:.5;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(22.5deg)}.tiles__line{animation:runner 10s linear infinite;display:flex;transform:translateX(25%)}.tiles__line:nth-child(2){animation-duration:16s}.tiles__line:nth-child(3){animation-duration:22s}@keyframes runner{to{transform:translateX(-25%)}}.tiles__line-img{--tile-margin:3vw;background-position:50% 50%;background-size:cover;border-radius:50%;flex:none;height:30vh;margin:var(--tile-margin);width:30vh}.tiles__line-img--large{border-radius:20vh;width:100vh}.button-close{stroke:var(--color-button-close);fill:none;margin:2rem;position:absolute;right:0;top:0}.button-close:focus-visible,.button-close:hover{stroke:var(--color-button-close-hover)}@media screen and (min-width:53em){.frame{font-size:1.5rem;grid-template-areas:"author heading button" "... ... ..." "title links links";grid-template-columns:390px 1fr 390px}.frame__title{align-self:end;justify-self:start;margin:0 3rem 0 0}.frame__links{display:flex;justify-self:start;padding:0}.frame__links a:not(:last-child){margin-right:.5rem}.frame__heading-main{font-size:2.15rem}.frame__heading-sub{font-size:1rem}.menu__item-tiny{font-size:2rem}} -------------------------------------------------------------------------------- /dist/index.b5e7c14d.js: -------------------------------------------------------------------------------- 1 | !function(){var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},r={},i=t.parcelRequire7566;null==i&&((i=function(t){if(t in e)return e[t].exports;if(t in r){var i=r[t];delete r[t];var n={id:t,exports:{}};return e[t]=n,i.call(n.exports,n,n.exports),n.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){r[t]=e},t.parcelRequire7566=i);var n={};i.register("hobco",(function(t,e){!function(e,r){"function"==typeof define&&define.amd?define(r):t.exports?t.exports=r():e.EvEmitter=r()}("undefined"!=typeof window?window:t.exports,(function(){"use strict";function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var r=this._events=this._events||{},i=r[t]=r[t]||[];return-1==i.indexOf(e)&&i.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var r=this._onceEvents=this._onceEvents||{};return(r[t]=r[t]||{})[e]=!0,this}},e.off=function(t,e){var r=this._events&&this._events[t];if(r&&r.length){var i=r.indexOf(e);return-1!=i&&r.splice(i,1),this}},e.emitEvent=function(t,e){var r=this._events&&this._events[t];if(r&&r.length){r=r.slice(0),e=e||[];for(var i=this._onceEvents&&this._onceEvents[t],n=0;nt._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t},Ut=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Yt=function t(e){return!e||e._ts&&t(e.parent)},Qt=function(t){return t._repeat?Xt(t._tTime,t=t.duration()+t._rDelay)*t:0},Xt=function(t,e){var r=Math.floor(t/=e);return t&&r===t?r-1:r},Wt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Gt=function(t){return t._end=Et(t._start+(t._tDur/Math.abs(t._ts||t._rts||B)||0))},Ht=function(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=Et(r._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Gt(t),r._dirty||Nt(r,t)),t},Zt=function(t,e){var r;if((e._time||e._initted&&!e._dur)&&(r=Wt(t.rawTime(),e),(!e._dur||ue(0,e.totalDuration(),r)-e._tTime>B)&&e.render(r,!0)),Nt(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}},Jt=function(t,e,r,i){return e.parent&&jt(e),e._start=Et((W(r)?r:r||t!==u?se(t,r,e):t._time)+e._delay),e._end=Et(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),ee(e)||(t._recent=e),i||Zt(t,e),t},$t=function(t,e){return(ut.ScrollTrigger||lt("scrollTrigger",e))&&ut.ScrollTrigger.create(e,t)},Kt=function(t,e,r,i){return tr(t,e),t._initted?!r&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&p!==Ie.frame?(mt.push(t),t._lazy=[e,i],1):void 0:1},te=function t(e){var r=e.parent;return r&&r._ts&&r._initted&&!r._lock&&(r.rawTime()<0||t(r))},ee=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},re=function(t,e,r,i){var n=t._repeat,s=Et(e)||0,a=t._tTime/t._tDur;return a&&!i&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:Et(s*(n+1)+t._rDelay*n):s,a&&!i?Ht(t,t._tTime=t._tDur*a):t.parent&&Gt(t),r||Nt(t.parent,t),t},ie=function(t){return t instanceof He?Nt(t):re(t,t._dur)},ne={_start:0,endTime:dt,totalDuration:dt},se=function t(e,r,i){var n,s,a,o=e.labels,u=e._recent||ne,h=e.duration()>=F?u.endTime(!1):e._dur;return Q(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*(tt(i)?i[0]:i).totalDuration()),n>1?t(e,r.substr(0,n-1),i)+s:h+s)):null==r?h:+r},ae=function(t,e,r){var i,n,s=W(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=Z(n.vars.inherit)&&n.parent;o.immediateRender=Z(i.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new nr(e[0],o,e[a+1])},oe=function(t,e){return t||0===t?e(t):e},ue=function(t,e,r){return re?e:r},he=function(t){if("string"!=typeof t)return"";var e=ot.exec(t);return e?t.substr(e.index+e[0].length):""},fe=[].slice,le=function(t,e){return t&&H(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&H(t[0]))&&!t.nodeType&&t!==h},ce=function(t,e,r){return!Q(t)||r||!f&&Re()?tt(t)?function(t,e,r){return void 0===r&&(r=[]),t.forEach((function(t){var i;return Q(t)&&!e||le(t,1)?(i=r).push.apply(i,ce(t)):r.push(t)}))||r}(t,r):le(t)?fe.call(t,0):t?[t]:[]:fe.call((e||l).querySelectorAll(t),0)},pe=function(t){return t.sort((function(){return.5-Math.random()}))},de=function(t){if(X(t))return t;var e=H(t)?t:{each:t},r=Ne(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,f=i;return Q(i)?h=f={center:.5,edges:.5,end:1}[i]||0:!a&&o&&(h=i[0],f=i[1]),function(t,a,l){var c,p,d,_,m,g,v,y,w,b=(l||e).length,x=s[b];if(!x){if(!(w="auto"===e.grid?0:(e.grid||[1,F])[1])){for(v=-1e8;v<(v=l[w++].getBoundingClientRect().left)&&wv&&(v=m),mb?b-1:u?"y"===u?b/w:w:Math.max(w,b/w))||0)*("edges"===i?-1:1),x.b=b<0?n-b:n,x.u=he(e.amount||e.each)||0,r=r&&b<0?qe(r):r}return b=(x[t]-x.min)/x.max||0,Et(x.b+(r?r(b):b)*x.v)+x.u}},_e=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+(W(r)?0:he(r))}},me=function(t,e){var r,i,n=tt(t);return!n&&H(t)&&(r=n=t.radius||F,t.values?(t=ce(t.values),(i=!W(t[0]))&&(r*=r)):t=_e(t.increment)),oe(e,n?X(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=F,h=0,f=t.length;f--;)(n=i?(n=t[f].x-a)*n+(s=t[f].y-o)*s:Math.abs(t[f]-a))(n=Math.abs(n))&&(s=i,o=n);return s},xe=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&&mt.length&&Dt(),i?a.apply(n,i):a.call(n)},Te=function(t){return jt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&xe(t,"onInterrupt"),t},ke=function(t){var e=(t=!t.name&&t.default||t).name,r=X(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:dt,render:pr,add:$e,kill:_r,modifier:dr,rawVars:0},s={targetTest:0,get:0,getSetter:hr,aliases:{},register:0};if(Re(),t!==i){if(vt[e])return;It(i,It(Bt(t,n),s)),Lt(i.prototype,Lt(n,Bt(t,s))),vt[i.prop=e]=i,t.targetTest&&(bt.push(i),_t[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}pt(e,i),t.register&&t.register(xr,i,vr)},Me=255,Oe={aqua:[0,Me,Me],lime:[0,Me,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Me],navy:[0,0,128],white:[Me,Me,Me],olive:[128,128,0],yellow:[Me,Me,0],orange:[Me,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Me,0,0],pink:[Me,192,203],cyan:[0,Me,Me],transparent:[Me,Me,Me,0]},Ae=function(t,e,r){return(6*(t=t<0?t+1:t>1?t-1:t)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*Me+.5|0},Ee=function(t,e,r){var i,n,s,a,o,u,h,f,l,c,p=t?W(t)?[t>>16,t>>8&Me,t&Me]:0:Oe.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Oe[t])p=Oe[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&Me,p&Me,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Me,t&Me]}else if("hsl"===t.substr(0,3))if(p=c=t.match(et),e){if(~t.indexOf("="))return p=t.match(rt),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]=Ae(a+1/3,i,n),p[1]=Ae(a,i,n),p[2]=Ae(a-1/3,i,n);else p=t.match(et)||Oe.transparent;p=p.map(Number)}return e&&!c&&(i=p[0]/Me,n=p[1]/Me,s=p[2]/Me,u=((h=Math.max(i,n,s))+(f=Math.min(i,n,s)))/2,h===f?a=o=0:(l=h-f,o=u>.5?l/(2-h-f):l/(h+f),a=h===i?(n-s)/l+(nT&&(M+=a-k),((r=(n=(O+=a)-M)-E)>0||o)&&(s=++y.frame,w=n-1e3*y.time,y.time=n/=1e3,E+=r+(r>=A?4:A-r),i=1),o||(m=g(t)),i)for(b=0;b=e&&b--},_listeners:C=[]}),Re=function(){return!_&&Ie.wake()},Le={},Fe=/^[\d.\-M][\d.\-,\s]/,Be=/["']/g,Ve=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("{")?[Ve(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/V*(Math.asin(1/n)||0),o=function(t){return 1===t?1:n*Math.pow(2,-10*t)*Y((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Ye(o);return s=V/s,u.config=function(r,i){return t(e,r,i)},u},Xe=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)}:Ye(i);return n.config=function(r){return t(e,r)},n};Ot("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var r=e<5?e+1:e;Ue(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}))})),Le.Linear.easeNone=Le.none=Le.Linear.easeIn,Ue("Elastic",Qe("in"),Qe("out"),Qe()),S=7.5625,z=1/(P=2.75),Ue("Bounce",(function(t){return 1-I(1-t)}),I=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,re(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Re(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(Ht(this,t),!r._dp||r.parent||Zt(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)&&Jt(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===B||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),St(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Qt(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)+Qt(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?Xt(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?Wt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,Ut(this.totalTime(ue(-this._delay,this._tDur,e),!0)),Gt(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):(Re(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==B&&(this._tTime-=B)))),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)&&Jt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(Z(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?Wt(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(se(this,t),Z(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,Z(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=X(t)?t:zt,n=function(){var t=e.then;e.then=null,X(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(){Te(this)},t}();It(Ge.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 He=function(t){function e(e,r){var i;return void 0===e&&(e={}),(i=t.call(this,e)||this).labels={},i.smoothChildTiming=!!e.smoothChildTiming,i.autoRemoveChildren=!!e.autoRemoveChildren,i._sort=Z(e.sortChildren),u&&Jt(e.parent||u,s(i),r),e.reversed&&i.reverse(),e.paused&&i.paused(!0),e.scrollTrigger&&$t(s(i),e.scrollTrigger),i}a(e,t);var r=e.prototype;return r.to=function(t,e,r){return ae(0,arguments,this),this},r.from=function(t,e,r){return ae(1,arguments,this),this},r.fromTo=function(t,e,r,i){return ae(2,arguments,this),this},r.set=function(t,e,r){return e.duration=0,e.parent=this,Vt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new nr(t,e,se(this,r),1),this},r.call=function(t,e,r){return Jt(this,nr.delayedCall(0,t,e),r)},r.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 nr(t,r,se(this,n)),this},r.staggerFrom=function(t,e,r,i,n,s,a){return r.runBackwards=1,Vt(r).immediateRender=Z(r.immediateRender),this.staggerTo(t,e,r,i,n,s,a)},r.staggerFromTo=function(t,e,r,i,n,s,a,o){return i.startAt=r,Vt(i).immediateRender=Z(i.immediateRender),this.staggerTo(t,e,i,n,s,a,o)},r.render=function(t,e,r){var i,n,s,a,o,h,f,l,c,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:Et(t),w=this._zTime<0!=t<0&&(this._initted||!v);if(this!==u&&y>g&&t>=0&&(y=g),y!==this._tTime||r||w){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),i=y,c=this._start,h=!(l=this._ts),w&&(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(i=Et(y%o),y===g?(a=this._repeat,i=v):((a=~~(y/o))&&a===y/o&&(i=v,a--),i>v&&(i=v)),p=Xt(this._tTime,o),!m&&this._tTime&&p!==a&&(p=a),d&&1&a&&(i=v-i,_=1),a!==p&&!this._lock){var b=d&&1&p,x=b===(d&&1&a);if(ae)for(i=t._first;i&&i._start<=r;){if(!i._dur&&"isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(!i._dur&&"isPause"===i.data&&i._start=m&&t>=0)for(n=this._first;n;){if(s=n._next,(n._act||i>=n._start)&&n._ts&&f!==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){f=0,s&&(y+=this._zTime=-1e-8);break}}n=s}else{n=this._last;for(var T=t<0?t:i;n;){if(s=n._prev,(n._act||T<=n._end)&&n._ts&&f!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(n._ts>0?(T-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(T-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!h){f=0,s&&(y+=this._zTime=T?-1e-8:B);break}}n=s}}if(f&&!e&&(this.pause(),f.render(i>=m?0:-1e-8)._zTime=i>=m?1:-1,this._ts))return this._start=c,Gt(this),this.render(t,e,r);this._onUpdate&&!e&&xe(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&m)&&(c!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&jt(this,1),e||t<0&&!m||!y&&!m&&g||(xe(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},r.add=function(t,e){var r=this;if(W(e)||(e=se(this,e,t)),!(t instanceof Ge)){if(tt(t))return t.forEach((function(t){return r.add(t,e)})),this;if(Q(t))return this.addLabel(t,e);if(!X(t))return this;t=nr.delayedCall(0,t)}return this!==t?Jt(this,t,e):this},r.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 nr?e&&n.push(s):(r&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,r)))),s=s._next;return n},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 Q(t)?this.removeLabel(t):X(t)?this.killTweensOf(t):(qt(this,t),t===this._recent&&(this._recent=this._last),Nt(this))},r.totalTime=function(e,r){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Et(Ie.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]=se(this,e),this},r.removeLabel=function(t){return delete this.labels[t],this},r.addPause=function(t,e,r){var i=nr.delayedCall(0,e||dt,r);return i.data="isPause",this._hasPause=1,Jt(this,i,se(this,t))},r.removePause=function(t){var e=this._first;for(t=se(this,t);e;)e._start===t&&"isPause"===e.data&&jt(e),e=e._next},r.killTweensOf=function(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Ze!==i[n]&&i[n].kill(t,e);return this},r.getTweensOf=function(t,e){for(var r,i=[],n=ce(t),s=this._first,a=W(e);s;)s instanceof nr?Ct(s._targets,n)&&(a?(!Ze||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},r.tweenTo=function(t,e){e=e||{};var r,i=this,n=se(i,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,f=nr.to(i,It({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())||B,onStart:function(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());f._dur!==t&&re(f,t,0,1).render(f._time,!0,!0),r=1}o&&o.apply(f,u||[])}},e));return h?f.render(0):f},r.tweenFromTo=function(t,e,r){return this.tweenTo(e,It({startAt:{time:se(this,t)}},r))},r.recent=function(){return this._recent},r.nextLabel=function(t){return void 0===t&&(t=this._time),be(this,se(this,t))},r.previousLabel=function(t){return void 0===t&&(t=this._time),be(this,se(this,t),1)},r.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+B)},r.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 Nt(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={}),Nt(this)},r.totalDuration=function(t){var e,r,i,n=0,s=this,a=s._last,o=F;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(i=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(r=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,Jt(s,a,r-a._delay,1)._lock=0):o=r,r<0&&a._ts&&(n-=r,(!i&&!s._dp||i&&i.smoothChildTiming)&&(s._start+=r/s._ts,s._time-=r,s._tTime-=r),s.shiftChildren(-r,!1,-1/0),o=0),a._end>n&&a._ts&&(n=a._end),a=e;re(s,s===u&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(u._ts&&(St(u,Wt(t,u)),p=Ie.frame),Ie.frame>=wt){wt+=R.autoSleep||120;var e=u._first;if((!e||!e._ts)&&R.autoSleep&&Ie._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Ie.sleep()}}},e}(Ge);It(He.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ze,Je=function(t,e,r,i,n,s,a){var o,u,h,f,l,c,p,d,_=new vr(this._pt,t,e,0,1,cr,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(p=~(i+="").indexOf("random("))&&(i=ye(i)),s&&(s(d=[r,i],t,e),r=d[0],i=d[1]),u=r.match(nt)||[];o=nt.exec(i);)f=o[0],l=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===l.substr(-5)&&(h=1),f!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:l||1===g?l:",",s:c,c:"="===f.charAt(1)?parseFloat(f.substr(2))*("-"===f.charAt(0)?-1:1):parseFloat(f)-c,m:h&&h<4?Math.round:0},m=nt.lastIndex);return _.c=m0&&!C&&(e._startAt=0),D&&r<=0)return void(r&&(e._zTime=r))}else!1===C&&(e._startAt=0);else if(O&&D)if(S)!C&&(e._startAt=0);else if(r&&(b=!1),s=It({overwrite:!1,data:"isFromStart",lazy:b&&Z(x),immediateRender:b,stagger:0,parent:z},i),m&&(s[c.prop]=m),jt(e._startAt=nr.set(P,s)),r<0&&e._startAt.render(-1,!0),b){if(!r)return}else t(e._startAt,B);for(e._pt=0,x=D&&Z(x)||x&&!D,n=0;n":e*b)}))})):T.forEach((function(t){return h.to(E,t,">")}));else{if(c=E.length,_=b?de(b):dt,H(b))for(p in b)~rr.indexOf(p)&&(m||(m={}),m[p]=b[p]);for(f=0;fp-B&&t>=0?p:td&&(i=d)),(u=this._yoyo&&1&s)&&(l=this._yEase,i=d-i),o=Xt(this._tTime,a),i===c&&!r&&this._initted)return this;s!==o&&(f&&this._yEase&&je(f,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=r=1,this.render(Et(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(Kt(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=(l||this._ease)(i/d),this._from&&(this.ratio=h=1-h),i&&!c&&!e&&(xe(this,"onStart"),this._tTime!==_))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;f&&f.render(t<0?t:!i&&u?-1e-8:f._dur*h,e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,r),xe(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&xe(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)&&jt(this,1),e||t<0&&!c||!_&&!c||(xe(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&&te(t)&&(t._initted||!ee(t))||(t._ts<0||t._dp._ts<0)&&!ee(t))?0:1,h=t._rDelay,f=0;if(h&&t._repeat&&(f=ue(0,t._tDur,e),s=Xt(f,h),a=Xt(t._tTime,h),t._yoyo&&1&s&&(u=1-u),s!==a&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||i||t._zTime===B||!e&&t._zTime){if(!t._initted&&Kt(t,e,i,r))return;for(a=t._zTime,t._zTime=e||(r?B:0),r||(r=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=f,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&&xe(t,"onUpdate"),f&&t._repeat&&!r&&t.parent&&xe(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&jt(t,1),r||(xe(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?Te(this):this;if(this.timeline){var r=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ze&&!0!==Ze.vars.overwrite)._first||Te(this),this.parent&&r!==this.timeline.totalDuration()&&re(this,this._dur*this.timeline._tDur/r,0,1),this}var i,n,s,a,o,u,h,f=this._targets,l=t?ce(t):f,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}(f,l))return"all"===e&&(this._pt=0),Te(this);for(i=this._op=this._op||[],"all"!==e&&(Q(e)&&(o={},Ot(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var r,i,n,s,a=t[0]?kt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(i in r=Lt({},e),o)if(i in r)for(n=(s=o[i].split(",")).length;n--;)r[s[n]]=r[i];return r}(f,e)),h=f.length;h--;)if(~l.indexOf(f[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)||qt(this,u,"_pt"),delete n[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&Te(this),this},e.to=function(t,r){return new e(t,r,arguments[2])},e.from=function(t,e){return ae(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 ae(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 u.killTweensOf(t,e,r)},e}(Ge);It(nr.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Ot("staggerTo,staggerFrom,staggerFromTo",(function(t){nr[t]=function(){var e=new He,r=fe.call(arguments,0);return r.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,r)}}));var sr=function(t,e,r){return t[e]=r},ar=function(t,e,r){return t[e](r)},or=function(t,e,r,i){return t[e](i.fp,r)},ur=function(t,e,r){return t.setAttribute(e,r)},hr=function(t,e){return X(t[e])?ar:G(t[e])&&t.setAttribute?ur:sr},fr=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},lr=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},cr=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)},pr=function(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},dr=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},_r=function(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?qt(this,i,"_pt"):i.dep||(e=1),i=r;return!e},mr=function(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)},gr=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},vr=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||fr,this.d=a||this,this.set=o||sr,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=mr,this.m=t,this.mt=r,this.tween=e},t}();Ot(xt+"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 _t[t]=1})),ut.TweenMax=ut.TweenLite=nr,ut.TimelineLite=ut.TimelineMax=He,u=new He({sortChildren:!1,defaults:L,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),R.stringFilter=ze;var yr={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),r=0;r1){var i=t.map((function(t){return xr.quickSetter(t,e,r)})),n=i.length;return function(t){for(var e=n;e--;)i[e](t)}}t=t[0]||{};var s=vt[e],a=kt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var i=new s;d._pt=0,i.init(t,r?e+r:e,d,0,[t]),i.render(1,i),d._pt&&pr(1,d)}:a.set(t,o);return s?u:function(e){return u(t,o,r?e+r:e,a,1)}},isTweening:function(t){return u.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ne(t.ease,L.ease)),Ft(L,t||{})},config:function(t){return Ft(R,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&&!vt[t]&&!ut[t]&&ct(e+" effect requires "+t+" plugin.")})),yt[e]=function(t,e,i){return r(ce(t),It(e||{},n),i)},s&&(He.prototype[e]=function(t,r,i){return this.add(yt[e](t,H(r)?r:(i=r)&&{},this),i)})},registerEase:function(t,e){Le[t]=Ne(e)},parseEase:function(t,e){return arguments.length?Ne(t,e):Le},getById:function(t){return u.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var r,i,n=new He(t);for(n.smoothChildTiming=Z(t.smoothChildTiming),u.remove(n),n._dp=0,n._time=n._tTime=u._time,r=u._first;r;)i=r._next,!e&&!r._dur&&r instanceof nr&&r.vars.onComplete===r._targets[0]||Jt(n,r,r._start-r._delay),r=i;return Jt(u,n,0),n},utils:{wrap:function t(e,r,i){var n=r-e;return tt(e)?ve(e,t(0,e.length),r):oe(i,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,r,i){var n=r-e,s=2*n;return tt(e)?ve(e,t(0,e.length-1),r):oe(i,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:de,random:ge,snap:me,normalize:function(t,e,r){return we(t,e,0,1,r)},getUnit:he,clamp:function(t,e,r){return oe(r,(function(r){return ue(t,e,r)}))},splitColor:Ee,toArray:ce,selector:function(t){return t=ce(t)[0]||ct("Invalid scope")||{},function(e){var r=t.current||t.nativeElement||t;return ce(e,r.querySelectorAll?r:r===t?ct("Invalid scope")||l.createElement("div"):t)}},mapRange:we,pipe:function(){for(var t=arguments.length,e=new Array(t),r=0;r=0?ti[n]:"")+t},ri=function(){"undefined"!=typeof window&&window.document&&(Tr=window,kr=Tr.document,Mr=kr.documentElement,Ar=$r("div")||{style:{}},$r("div"),Zr=ei(Zr),Jr=Zr+"Origin",Ar.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Cr=!!ei("perspective"),Or=1)},ii=function t(e){var r,i=$r("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Mr.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)),Mr.removeChild(i),this.style.cssText=a,r},ni=function(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])},si=function(t){var e;try{e=t.getBBox()}catch(r){e=ii.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===ii||(e=ii.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+ni(t,["x","cx","x1"])||0,y:+ni(t,["y","cy","y1"])||0,width:0,height:0}},ai=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!si(t))},oi=function(t,e){if(e){var r=t.style;e in Dr&&e!==Jr&&(e=Zr),r.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),r.removeProperty(e.replace(Ir,"-$1").toLowerCase())):r.removeAttribute(e)}},ui=function(t,e,r,i,n,s){var a=new vr(t._pt,e,r,0,1,s?Ur:Nr);return t._pt=a,a.b=i,a.e=n,t._props.push(r),a},hi={deg:1,rad:1,turn:1},fi=function t(e,r,i,n){var s,a,o,u,h=parseFloat(i)||0,f=(i+"").trim().substr((h+"").length)||"px",l=Ar.style,c=Rr.test(r),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(c?"Width":"Height"),_=100,m="px"===n,g="%"===n;return n===f||!h||hi[n]||hi[f]?h:("px"!==f&&!m&&(h=t(e,r,i,"px")),u=e.getCTM&&ai(e),!g&&"%"!==f||!Dr[r]&&!~r.indexOf("adius")?(l[c?"width":"height"]=_+(m?f:n),a=~r.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==kr&&a.appendChild||(a=kr.body),(o=a._gsap)&&g&&o.width&&c&&o.time===Ie.time?At(h/o.width*_):((g||"%"===f)&&(l.position=Kr(e,"position")),a===e&&(l.position="static"),a.appendChild(Ar),s=Ar[d],a.removeChild(Ar),l.position="absolute",c&&g&&((o=kt(a)).time=Ie.time,o.width=a[d]),At(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[c?"width":"height"]:e[d],At(g?h/s*_:h/100*s)))},li=function(t,e,r,i){var n;return Or||ri(),e in Fr&&"transform"!==e&&~(e=Fr[e]).indexOf(",")&&(e=e.split(",")[0]),Dr[e]&&"transform"!==e?(n=xi(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Ti(Kr(t,Jr))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||i||~(n+"").indexOf("calc("))&&(n=_i[e]&&_i[e](t,e,r)||Kr(t,e)||Mt(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?fi(t,e,n,r)+r:n},ci=function(t,e,r,i){if(!r||"none"===r){var n=ei(e,t,1),s=n&&Kr(t,n,1);s&&s!==r?(e=n,r=s):"borderColor"===e&&(r=Kr(t,"borderTopColor"))}var a,o,u,h,f,l,c,p,d,_,m,g,v=new vr(this._pt,t.style,e,0,1,cr),y=0,w=0;if(v.b=r,v.e=i,r+="","auto"===(i+="")&&(t.style[e]=i,i=Kr(t,e)||i,t.style[e]=r),ze(a=[r,i]),i=a[1],u=(r=a[0]).match(it)||[],(i.match(it)||[]).length){for(;o=it.exec(i);)c=o[0],d=i.substring(y,o.index),f?f=(f+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(f=1),c!==(l=u[w++]||"")&&(h=parseFloat(l)||0,m=l.substr((h+"").length),(g="="===c.charAt(1)?+(c.charAt(0)+"1"):0)&&(c=c.substr(2)),p=parseFloat(c),_=c.substr((p+"").length),y=it.lastIndex-_.length,_||(_=_||R.units[e]||m,y===i.length&&(i+=_,v.e+=_)),m!==_&&(h=fi(t,e,l,_)||0),v._pt={_next:v._pt,p:d||1===w?d:",",s:h,c:g?g*p:p-h,m:f&&f<4||"zIndex"===e?Math.round:0});v.c=y-1;)r=o[n],Dr[r]&&(i=1,r="transformOrigin"===r?Jr:Zr),oi(s,r);i&&(oi(s,Zr),u&&(u.svg&&s.removeAttribute("transform"),xi(s,1),u.uncache=1))}},_i={clearProps:function(t,e,r,i,n){if("isFromStart"!==n.data){var s=t._pt=new vr(t._pt,e,r,0,0,di);return s.u=i,s.pr=-10,s.tween=n,t._props.push(r),1}}},mi=[1,0,0,1,0,0],gi={},vi=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},yi=function(t){var e=Kr(t,Zr);return vi(e)?mi:e.substr(7).match(rt).map(At)},wi=function(t,e){var r,i,n,s,a=t._gsap||kt(t),o=t.style,u=yi(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(",")?mi:u:(u!==mi||t.offsetParent||t===Mr||a.svg||(n=o.display,o.display="block",(r=t.parentNode)&&t.offsetParent||(s=1,i=t.nextSibling,Mr.appendChild(t)),u=yi(t),n?o.display=n:oi(t,"display"),s&&(i?r.insertBefore(t,i):r?r.appendChild(t):Mr.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},bi=function(t,e,r,i,n,s){var a,o,u,h=t._gsap,f=n||wi(t,!0),l=h.xOrigin||0,c=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,_=f[0],m=f[1],g=f[2],v=f[3],y=f[4],w=f[5],b=e.split(" "),x=parseFloat(b[0])||0,T=parseFloat(b[1])||0;r?f!==mi&&(o=_*v-m*g)&&(u=x*(-m/o)+T*(_/o)-(_*w-m*y)/o,x=x*(v/o)+T*(-g/o)+(g*w-v*y)/o,T=u):(x=(a=si(t)).x+(~b[0].indexOf("%")?x/100*a.width:x),T=a.y+(~(b[1]||b[0]).indexOf("%")?T/100*a.height:T)),i||!1!==i&&h.smooth?(y=x-l,w=T-c,h.xOffset=p+(y*_+w*g)-y,h.yOffset=d+(y*m+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=x,h.yOrigin=T,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[Jr]="0px 0px",s&&(ui(s,h,"xOrigin",l,x),ui(s,h,"yOrigin",c,T),ui(s,h,"xOffset",p,h.xOffset),ui(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",x+" "+T)},xi=function(t,e){var r=t._gsap||new We(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,s,a,o,u,h,f,l,c,p,d,_,m,g,v,y,w,b,x,T,k,M,O,A,E,C,D,S,P,z,I,L=t.style,F=r.scaleX<0,B="px",V="deg",q=Kr(t,Jr)||"0";return i=n=s=u=h=f=l=c=p=0,a=o=1,r.svg=!(!t.getCTM||!ai(t)),m=wi(t,r.svg),r.svg&&(O=(!r.uncache||"0px 0px"===q)&&!e&&t.getAttribute("data-svg-origin"),bi(t,O||q,!!O||r.originIsAbsolute,!1!==r.smooth,m)),d=r.xOrigin||0,_=r.yOrigin||0,m!==mi&&(w=m[0],b=m[1],x=m[2],T=m[3],i=k=m[4],n=M=m[5],6===m.length?(a=Math.sqrt(w*w+b*b),o=Math.sqrt(T*T+x*x),u=w||b?zr(b,w)*Sr:0,(l=x||T?zr(x,T)*Sr+u:0)&&(o*=Math.abs(Math.cos(l*Pr))),r.svg&&(i-=d-(d*w+_*x),n-=_-(d*b+_*T))):(I=m[6],P=m[7],C=m[8],D=m[9],S=m[10],z=m[11],i=m[12],n=m[13],s=m[14],h=(g=zr(I,S))*Sr,g&&(O=k*(v=Math.cos(-g))+C*(y=Math.sin(-g)),A=M*v+D*y,E=I*v+S*y,C=k*-y+C*v,D=M*-y+D*v,S=I*-y+S*v,z=P*-y+z*v,k=O,M=A,I=E),f=(g=zr(-x,S))*Sr,g&&(v=Math.cos(-g),z=T*(y=Math.sin(-g))+z*v,w=O=w*v-C*y,b=A=b*v-D*y,x=E=x*v-S*y),u=(g=zr(b,w))*Sr,g&&(O=w*(v=Math.cos(g))+b*(y=Math.sin(g)),A=k*v+M*y,b=b*v-w*y,M=M*v-k*y,w=O,k=A),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,f=180-f),a=At(Math.sqrt(w*w+b*b+x*x)),o=At(Math.sqrt(M*M+I*I)),g=zr(k,M),l=Math.abs(g)>2e-4?g*Sr:0,p=z?1/(z<0?-z:z):0),r.svg&&(O=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!vi(Kr(t,Zr)),O&&t.setAttribute("transform",O))),Math.abs(l)>90&&Math.abs(l)<270&&(F?(a*=-1,l+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,l+=l<=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=At(a),r.scaleY=At(o),r.rotation=At(u)+V,r.rotationX=At(h)+V,r.rotationY=At(f)+V,r.skewX=l+V,r.skewY=c+V,r.transformPerspective=p+B,(r.zOrigin=parseFloat(q.split(" ")[2])||0)&&(L[Jr]=Ti(q)),r.xOffset=r.yOffset=0,r.force3D=R.force3D,r.renderTransform=r.svg?Di:Cr?Ci:Mi,r.uncache=0,r},Ti=function(t){return(t=t.split(" "))[0]+" "+t[1]},ki=function(t,e,r){var i=he(e);return At(parseFloat(e)+parseFloat(fi(t,"x",r+"px",i)))+i},Mi=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Ci(t,e)},Oi="0deg",Ai="0px",Ei=") ",Ci=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,f=r.rotationX,l=r.skewX,c=r.skewY,p=r.scaleX,d=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",w="auto"===m&&t&&1!==t||!0===m;if(v&&(f!==Oi||h!==Oi)){var b,x=parseFloat(h)*Pr,T=Math.sin(x),k=Math.cos(x);x=parseFloat(f)*Pr,b=Math.cos(x),s=ki(g,s,T*b*-v),a=ki(g,a,-Math.sin(x)*-v),o=ki(g,o,k*b*-v+v)}_!==Ai&&(y+="perspective("+_+Ei),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),(w||s!==Ai||a!==Ai||o!==Ai)&&(y+=o!==Ai||w?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+Ei),u!==Oi&&(y+="rotate("+u+Ei),h!==Oi&&(y+="rotateY("+h+Ei),f!==Oi&&(y+="rotateX("+f+Ei),l===Oi&&c===Oi||(y+="skew("+l+", "+c+Ei),1===p&&1===d||(y+="scale("+p+", "+d+Ei),g.style[Zr]=y||"translate(0, 0)"},Di=function(t,e){var r,i,n,s,a,o=e||this,u=o.xPercent,h=o.yPercent,f=o.x,l=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,w=o.xOffset,b=o.yOffset,x=o.forceCSS,T=parseFloat(f),k=parseFloat(l);c=parseFloat(c),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),c+=d),c||p?(c*=Pr,p*=Pr,r=Math.cos(c)*_,i=Math.sin(c)*_,n=Math.sin(c-p)*-m,s=Math.cos(c-p)*m,p&&(d*=Pr,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=At(r),i=At(i),n=At(n),s=At(s)):(r=_,s=m,i=n=0),(T&&!~(f+"").indexOf("px")||k&&!~(l+"").indexOf("px"))&&(T=fi(g,"x",f,"px"),k=fi(g,"y",l,"px")),(v||y||w||b)&&(T=At(T+v-(v*r+y*n)+w),k=At(k+y-(v*i+y*s)+b)),(u||h)&&(a=g.getBBox(),T=At(T+u/100*a.width),k=At(k+h/100*a.height)),a="matrix("+r+","+i+","+n+","+s+","+T+","+k+")",g.setAttribute("transform",a),x&&(g.style[Zr]=a)},Si=function(t,e,r,i,n,s){var a,o,u=360,h=Q(n),f=parseFloat(n)*(h&&~n.indexOf("rad")?Sr:1),l=s?f*s:f-i,c=i+l+"deg";return h&&("short"===(a=n.split("_")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-360),"cw"===a&&l<0?l=(l+36e9)%u-~~(l/u)*u:"ccw"===a&&l>0&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new vr(t._pt,e,r,i,l,Vr),o.e=c,o.u="deg",t._props.push(r),o},Pi=function(t,e){for(var r in e)t[r]=e[r];return t},zi=function(t,e,r){var i,n,s,a,o,u,h,f=Pi({},r._gsap),l=r.style;for(n in f.svg?(s=r.getAttribute("transform"),r.setAttribute("transform",""),l[Zr]=e,i=xi(r,1),oi(r,Zr),r.setAttribute("transform",s)):(s=getComputedStyle(r)[Zr],l[Zr]=e,i=xi(r,1),l[Zr]=s),Dr)(s=f[n])!==(a=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=he(s)!==(h=he(a))?fi(r,n,s,h):parseFloat(s),u=parseFloat(a),t._pt=new vr(t._pt,i,n,o,u-o,Br),t._pt.u=h||0,t._props.push(n));Pi(i,f)};Ot("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}));_i[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 li(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 Ii,Ri,Li,Fi={name:"css",register:ri,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,r,i,n){var s,a,o,u,h,f,l,c,p,d,_,m,g,v,y,w,b,x,T,k=this._props,M=t.style,O=r.vars.startAt;for(l in Or||ri(),e)if("autoRound"!==l&&(a=e[l],!vt[l]||!Ke(l,e,r,i,t,n)))if(h=typeof a,f=_i[l],"function"===h&&(h=typeof(a=a.call(r,i,t,n))),"string"===h&&~a.indexOf("random(")&&(a=ye(a)),f)f(this,t,l,a,r)&&(y=1);else if("--"===l.substr(0,2))s=(getComputedStyle(t).getPropertyValue(l)+"").trim(),a+="",Se.lastIndex=0,Se.test(s)||(c=he(s),p=he(a)),p?c!==p&&(s=fi(t,l,s,p)+p):c&&(a+=c),this.add(M,"setProperty",s,a,i,n,0,0,l),k.push(l);else if("undefined"!==h){if(O&&l in O?(s="function"==typeof O[l]?O[l].call(r,i,t,n):O[l],l in R.units&&!he(s)&&(s+=R.units[l]),Q(s)&&~s.indexOf("random(")&&(s=ye(s)),"="===(s+"").charAt(1)&&(s=li(t,l))):s=li(t,l),u=parseFloat(s),(d="string"===h&&"="===a.charAt(1)?+(a.charAt(0)+"1"):0)&&(a=a.substr(2)),o=parseFloat(a),l in Fr&&("autoAlpha"===l&&(1===u&&"hidden"===li(t,"visibility")&&o&&(u=0),ui(this,M,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==l&&"transform"!==l&&~(l=Fr[l]).indexOf(",")&&(l=l.split(",")[0])),_=l in Dr)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||xi(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new vr(this._pt,M,Zr,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===l)this._pt=new vr(this._pt,g,"scaleY",g.scaleY,(d?d*o:o-g.scaleY)||0),k.push("scaleY",l),l+="X";else{if("transformOrigin"===l){b=void 0,x=void 0,T=void 0,b=(w=a).split(" "),x=b[0],T=b[1]||"50%","top"!==x&&"bottom"!==x&&"left"!==T&&"right"!==T||(w=x,x=T,T=w),b[0]=pi[x]||x,b[1]=pi[T]||T,a=b.join(" "),g.svg?bi(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==g.zOrigin&&ui(this,g,"zOrigin",g.zOrigin,p),ui(this,M,l,Ti(s),Ti(a)));continue}if("svgOrigin"===l){bi(t,a,1,v,0,this);continue}if(l in gi){Si(this,g,l,u,a,d);continue}if("smoothOrigin"===l){ui(this,g,"smooth",g.smooth,a);continue}if("force3D"===l){g[l]=a;continue}if("transform"===l){zi(this,a,t);continue}}else l in M||(l=ei(l)||l);if(_||(o||0===o)&&(u||0===u)&&!Lr.test(a)&&l in M)o||(o=0),(c=(s+"").substr((u+"").length))!==(p=he(a)||(l in R.units?R.units[l]:c))&&(u=fi(t,l,s,p)),this._pt=new vr(this._pt,_?g:M,l,u,d?d*o:o-u,_||"px"!==p&&"zIndex"!==l||!1===e.autoRound?Br:jr),this._pt.u=p||0,c!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=qr);else if(l in M)ci.call(this,t,l,s,a);else{if(!(l in t)){lt(l,a);continue}this.add(t,l,s||t[l],a,i,n)}k.push(l)}y&&gr(this)},get:li,aliases:Fr,getSetter:function(t,e,r){var i=Fr[e];return i&&i.indexOf(",")<0&&(e=i),e in Dr&&e!==Jr&&(t._gsap.x||li(t,"x"))?r&&Er===r?"scale"===e?Wr:Xr:(Er=r||{},"scale"===e?Gr:Hr):t.style&&!G(t.style[e])?Yr:~e.indexOf("-")?Qr:hr(t,e)},core:{_removeProperty:oi,_getMatrix:wi}};xr.utils.checkPrefix=ei,Li=Ot((Ii="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Ri="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Dr[t]=1})),Ot(Ri,(function(t){R.units[t]="deg",gi[t]=1})),Fr[Li[13]]=Ii+","+Ri,Ot("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Fr[e[1]]=Li[e[0]]})),Ot("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){R.units[t]="px"})),xr.registerPlugin(Fi);var Bi,Vi,qi=xr.registerPlugin(Fi)||xr;qi.core.Tween;(Bi=".tiles__line-img",Vi=void 0===Bi?"img":Bi,new Promise((function(t){n(document.querySelectorAll(Vi),{background:!0},t)}))).then((function(){return document.body.classList.remove("loading")}));var ji=document.querySelector(".frame"),Ni=document.querySelector(".overlay__path"),Ui=document.querySelector(".menu-wrap"),Yi=Ui.querySelectorAll(".menu__item"),Qi=document.querySelector("button.button-menu"),Xi=Ui.querySelector(".button-close"),Wi={main:document.querySelector(".content__title-main"),sub:document.querySelector(".content__title-sub")},Gi=!1;Qi.addEventListener("click",(function(){Gi||(Gi=!0,qi.timeline({onComplete:function(){return Gi=!1}}).set(Ni,{attr:{d:"M 0 100 V 100 Q 50 100 100 100 V 100 z"}}).to(Ni,{duration:.8,ease:"power4.in",attr:{d:"M 0 100 V 50 Q 50 0 100 50 V 100 z"}},0).to(Ni,{duration:.3,ease:"power2",attr:{d:"M 0 100 V 0 Q 50 0 100 0 V 100 z"},onComplete:function(){ji.classList.add("frame--menu-open"),Ui.classList.add("menu-wrap--open")}}).to([Wi.main,Wi.sub],{duration:.8,ease:"power3.in",y:-200,stagger:.05},.2).set(Yi,{opacity:0}).set(Ni,{attr:{d:"M 0 0 V 100 Q 50 100 100 100 V 0 z"}}).to(Ni,{duration:.3,ease:"power2.in",attr:{d:"M 0 0 V 50 Q 50 0 100 50 V 0 z"}}).to(Ni,{duration:.8,ease:"power4",attr:{d:"M 0 0 V 0 Q 50 0 100 0 V 0 z"}}).to(Yi,{duration:1.1,ease:"power4",startAt:{y:150},y:0,opacity:1,stagger:.05},">-=1.1"))})),Xi.addEventListener("click",(function(){Gi||(Gi=!0,qi.timeline({onComplete:function(){return Gi=!1}}).set(Ni,{attr:{d:"M 0 0 V 0 Q 50 0 100 0 V 0 z"}}).to(Ni,{duration:.8,ease:"power4.in",attr:{d:"M 0 0 V 50 Q 50 100 100 50 V 0 z"}},0).to(Ni,{duration:.3,ease:"power2",attr:{d:"M 0 0 V 100 Q 50 100 100 100 V 0 z"},onComplete:function(){ji.classList.remove("frame--menu-open"),Ui.classList.remove("menu-wrap--open")}}).set(Ni,{attr:{d:"M 0 100 V 0 Q 50 0 100 0 V 100 z"}}).to(Ni,{duration:.3,ease:"power2.in",attr:{d:"M 0 100 V 50 Q 50 100 100 50 V 100 z"}}).to(Ni,{duration:.8,ease:"power4",attr:{d:"M 0 100 V 100 Q 50 100 100 100 V 100 z"}}).to([Wi.main,Wi.sub],{duration:1.1,ease:"power4",y:0,stagger:-.05},">-=1.1").to(Yi,{duration:.8,ease:"power2.in",y:100,opacity:0,stagger:-.05},0))}))}(); -------------------------------------------------------------------------------- /dist/index.e9a2d1b4.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},r={},i=t.parcelRequire7566;null==i&&((i=function(t){if(t in e)return e[t].exports;if(t in r){var i=r[t];delete r[t];var n={id:t,exports:{}};return e[t]=n,i.call(n.exports,n,n.exports),n.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){r[t]=e},t.parcelRequire7566=i);var n={};i.register("4hJWI",(function(t,e){!function(e,r){"function"==typeof define&&define.amd?define(r):t.exports?t.exports=r():e.EvEmitter=r()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var r=this._events=this._events||{},i=r[t]=r[t]||[];return-1==i.indexOf(e)&&i.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var r=this._onceEvents=this._onceEvents||{};return(r[t]=r[t]||{})[e]=!0,this}},e.off=function(t,e){var r=this._events&&this._events[t];if(r&&r.length){var i=r.indexOf(e);return-1!=i&&r.splice(i,1),this}},e.emitEvent=function(t,e){var r=this._events&&this._events[t];if(r&&r.length){r=r.slice(0),e=e||[];for(var i=this._onceEvents&&this._onceEvents[t],n=0;nt._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t},jt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Nt=function t(e){return!e||e._ts&&t(e.parent)},Ut=function(t){return t._repeat?Yt(t._tTime,t=t.duration()+t._rDelay)*t:0},Yt=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=Ot(t._start+(t._tDur/Math.abs(t._ts||t._rts||1e-8)||0))},Wt=function(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=Ot(r._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Xt(t),r._dirty||qt(r,t)),t},Gt=function(t,e){var r;if((e._time||e._initted&&!e._dur)&&(r=Qt(t.rawTime(),e),(!e._dur||ae(0,e.totalDuration(),r)-e._tTime>1e-8)&&e.render(r,!0)),qt(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&&Vt(e),e._start=Ot((Q(r)?r:r||t!==u?ie(t,r,e):t._time)+e._delay),e._end=Ot(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),Kt(e)||(t._recent=e),i||Gt(t,e),t},Jt=function(t,e){return(at.ScrollTrigger||ht("scrollTrigger",e))&&at.ScrollTrigger.create(e,t)},Zt=function(t,e,r,i){return Ze(t,e),t._initted?!r&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&c!==Se.frame?(dt.push(t),t._lazy=[e,i],1):void 0:1},$t=function t(e){var r=e.parent;return r&&r._ts&&r._initted&&!r._lock&&(r.rawTime()<0||t(r))},Kt=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},te=function(t,e,r,i){var n=t._repeat,s=Ot(e)||0,a=t._tTime/t._tDur;return a&&!i&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:Ot(s*(n+1)+t._rDelay*n):s,a&&!i?Wt(t,t._tTime=t._tDur*a):t.parent&&Xt(t),r||qt(t.parent,t),t},ee=function(t){return t instanceof Xe?qt(t):te(t,t._dur)},re={_start:0,endTime:pt,totalDuration:pt},ie=function t(e,r,i){var n,s,a,o=e.labels,u=e._recent||re,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*($(i)?i[0]:i).totalDuration()),n>1?t(e,r.substr(0,n-1),i)+s:h+s)):null==r?h:+r},ne=function(t,e,r){var i,n,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(i=o,n=r;n&&!("immediateRender"in i);)i=n.vars.defaults||{},n=G(n.vars.inherit)&&n.parent;o.immediateRender=G(i.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new er(e[0],o,e[a+1])},se=function(t,e){return t||0===t?e(t):e},ae=function(t,e,r){return re?e:r},oe=function(t){if("string"!=typeof t)return"";var e=st.exec(t);return e?t.substr(e.index+e[0].length):""},ue=[].slice,he=function(t,e){return t&&W(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&W(t[0]))&&!t.nodeType&&t!==h},le=function(t,e,r){return!U(t)||r||!l&&Pe()?$(t)?function(t,e,r){return void 0===r&&(r=[]),t.forEach((function(t){var i;return U(t)&&!e||he(t,1)?(i=r).push.apply(i,le(t)):r.push(t)}))||r}(t,r):he(t)?ue.call(t,0):t?[t]:[]:ue.call((e||f).querySelectorAll(t),0)},fe=function(t){return t.sort((function(){return.5-Math.random()}))},pe=function(t){if(Y(t))return t;var e=W(t)?t:{each:t},r=Ve(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 p,c,d,_,m,g,v,y,w,x=(f||e).length,b=s[x];if(!b){if(!(w="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=f[w++].getBoundingClientRect().left)&&wv&&(v=m),mx?x-1:u?"y"===u?x/w:w:Math.max(w,x/w))||0)*("edges"===i?-1:1),b.b=x<0?n-x:n,b.u=oe(e.amount||e.each)||0,r=r&&x<0?Fe(r):r}return x=(b[t]-b.min)/b.max||0,Ot(b.b+(r?r(x):x)*b.v)+b.u}},ce=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+(Q(r)?0:oe(r))}},de=function(t,e){var r,i,n=$(t);return!n&&W(t)&&(r=n=t.radius||1e8,t.values?(t=le(t.values),(i=!Q(t[0]))&&(r*=r)):t=ce(t.increment)),se(e,n?Y(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},we=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&&dt.length&&Et(),i?a.apply(n,i):a.call(n)},xe=function(t){return Vt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&we(t,"onInterrupt"),t},be=function(t){var e=(t=!t.name&&t.default||t).name,r=Y(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:pt,render:lr,add:He,kill:pr,modifier:fr,rawVars:0},s={targetTest:0,get:0,getSetter:ar,aliases:{},register:0};if(Pe(),t!==i){if(mt[e])return;Pt(i,Pt(Lt(t,n),s)),It(i.prototype,It(n,Lt(t,s))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}ft(e,i),t.register&&t.register(yr,i,_r)},Te={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]},ke=function(t,e,r){return 255*(6*(t=t<0?t+1:t>1?t-1:t)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)+.5|0},Me=function(t,e,r){var i,n,s,a,o,u,h,l,f,p,c=t?Q(t)?[t>>16,t>>8&255,255&t]:0:Te.black;if(!c){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Te[t])c=Te[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[(c=parseInt(t.substr(1,6),16))>>16,c>>8&255,255&c,parseInt(t.substr(7),16)/255];c=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(c=p=t.match(K),e){if(~t.indexOf("="))return c=t.match(tt),r&&c.length<4&&(c[3]=1),c}else a=+c[0]%360/360,o=+c[1]/100,i=2*(u=+c[2]/100)-(n=u<=.5?u*(o+1):u+o-u*o),c.length>3&&(c[3]*=1),c[0]=ke(a+1/3,i,n),c[1]=ke(a,i,n),c[2]=ke(a-1/3,i,n);else c=t.match(K)||Te.transparent;c=c.map(Number)}return e&&!p&&(i=c[0]/255,n=c[1]/255,s=c[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+(nT&&(M+=a-k),((r=(n=(O+=a)-M)-E)>0||o)&&(s=++y.frame,w=n-1e3*y.time,y.time=n/=1e3,E+=r+(r>=A?4:A-r),i=1),o||(m=g(t)),i)for(x=0;x=e&&x--},_listeners:C=[]}),Pe=function(){return!_&&Se.wake()},ze={},Ie=/^[\d.\-M][\d.\-,\s]/,Re=/["']/g,Le=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("{")?[Le(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/F*(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)}:je(o);return s=F/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)}:je(i);return n.config=function(r){return t(e,r)},n};kt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var r=e<5?e+1:e;qe(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}))})),ze.Linear.easeNone=ze.none=ze.Linear.easeIn,qe("Elastic",Ne("in"),Ne("out"),Ne()),S=7.5625,z=1/(P=2.75),qe("Bounce",(function(t){return 1-I(1-t)}),I=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,te(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Pe(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(Wt(this,t),!r._dp||r.parent||Gt(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),Ct(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ut(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)+Ut(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?Yt(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,jt(this.totalTime(ae(-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):(Pe(),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+(G(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,ee(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,ee(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(ie(this,t),G(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,G(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=Y(t)?t:St,n=function(){var t=e.then;e.then=null,Y(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(){xe(this)},t}();Pt(Qe.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 Xe=function(t){function e(e,r){var i;return void 0===e&&(e={}),(i=t.call(this,e)||this).labels={},i.smoothChildTiming=!!e.smoothChildTiming,i.autoRemoveChildren=!!e.autoRemoveChildren,i._sort=G(e.sortChildren),u&&Ht(e.parent||u,s(i),r),e.reversed&&i.reverse(),e.paused&&i.paused(!0),e.scrollTrigger&&Jt(s(i),e.scrollTrigger),i}a(e,t);var r=e.prototype;return r.to=function(t,e,r){return ne(0,arguments,this),this},r.from=function(t,e,r){return ne(1,arguments,this),this},r.fromTo=function(t,e,r,i){return ne(2,arguments,this),this},r.set=function(t,e,r){return e.duration=0,e.parent=this,Ft(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new er(t,e,ie(this,r),1),this},r.call=function(t,e,r){return Ht(this,er.delayedCall(0,t,e),r)},r.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 er(t,r,ie(this,n)),this},r.staggerFrom=function(t,e,r,i,n,s,a){return r.runBackwards=1,Ft(r).immediateRender=G(r.immediateRender),this.staggerTo(t,e,r,i,n,s,a)},r.staggerFromTo=function(t,e,r,i,n,s,a,o){return i.startAt=r,Ft(i).immediateRender=G(i.immediateRender),this.staggerTo(t,e,i,n,s,a,o)},r.render=function(t,e,r){var i,n,s,a,o,h,l,f,p,c,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:Ot(t),w=this._zTime<0!=t<0&&(this._initted||!v);if(this!==u&&y>g&&t>=0&&(y=g),y!==this._tTime||r||w){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),i=y,p=this._start,h=!(f=this._ts),w&&(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(i=Ot(y%o),y===g?(a=this._repeat,i=v):((a=~~(y/o))&&a===y/o&&(i=v,a--),i>v&&(i=v)),c=Yt(this._tTime,o),!m&&this._tTime&&c!==a&&(c=a),d&&1&a&&(i=v-i,_=1),a!==c&&!this._lock){var x=d&&1&c,b=x===(d&&1&a);if(ae)for(i=t._first;i&&i._start<=r;){if(!i._dur&&"isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(!i._dur&&"isPause"===i.data&&i._start=m&&t>=0)for(n=this._first;n;){if(s=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,s&&(y+=this._zTime=-1e-8);break}}n=s}else{n=this._last;for(var T=t<0?t:i;n;){if(s=n._prev,(n._act||T<=n._end)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(n._ts>0?(T-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(T-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!h){l=0,s&&(y+=this._zTime=T?-1e-8:1e-8);break}}n=s}}if(l&&!e&&(this.pause(),l.render(i>=m?0:-1e-8)._zTime=i>=m?1:-1,this._ts))return this._start=p,Xt(this),this.render(t,e,r);this._onUpdate&&!e&&we(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&m)&&(p!==this._start&&Math.abs(f)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Vt(this,1),e||t<0&&!m||!y&&!m&&g||(we(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=ie(this,e,t)),!(t instanceof Qe)){if($(t))return t.forEach((function(t){return r.add(t,e)})),this;if(U(t))return this.addLabel(t,e);if(!Y(t))return this;t=er.delayedCall(0,t)}return this!==t?Ht(this,t,e):this},r.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 er?e&&n.push(s):(r&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,r)))),s=s._next;return n},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 U(t)?this.removeLabel(t):Y(t)?this.killTweensOf(t):(Bt(this,t),t===this._recent&&(this._recent=this._last),qt(this))},r.totalTime=function(e,r){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Ot(Se.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]=ie(this,e),this},r.removeLabel=function(t){return delete this.labels[t],this},r.addPause=function(t,e,r){var i=er.delayedCall(0,e||pt,r);return i.data="isPause",this._hasPause=1,Ht(this,i,ie(this,t))},r.removePause=function(t){var e=this._first;for(t=ie(this,t);e;)e._start===t&&"isPause"===e.data&&Vt(e),e=e._next},r.killTweensOf=function(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)We!==i[n]&&i[n].kill(t,e);return this},r.getTweensOf=function(t,e){for(var r,i=[],n=le(t),s=this._first,a=Q(e);s;)s instanceof er?At(s._targets,n)&&(a?(!We||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},r.tweenTo=function(t,e){e=e||{};var r,i=this,n=ie(i,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=er.to(i,Pt({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&&te(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,Pt({startAt:{time:ie(this,t)}},r))},r.recent=function(){return this._recent},r.nextLabel=function(t){return void 0===t&&(t=this._time),ye(this,ie(this,t))},r.previousLabel=function(t){return void 0===t&&(t=this._time),ye(this,ie(this,t),1)},r.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+1e-8)},r.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 qt(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={}),qt(this)},r.totalDuration=function(t){var e,r,i,n=0,s=this,a=s._last,o=1e8;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(i=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(r=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,Ht(s,a,r-a._delay,1)._lock=0):o=r,r<0&&a._ts&&(n-=r,(!i&&!s._dp||i&&i.smoothChildTiming)&&(s._start+=r/s._ts,s._time-=r,s._tTime-=r),s.shiftChildren(-r,!1,-1/0),o=0),a._end>n&&a._ts&&(n=a._end),a=e;te(s,s===u&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(u._ts&&(Ct(u,Qt(t,u)),c=Se.frame),Se.frame>=vt){vt+=R.autoSleep||120;var e=u._first;if((!e||!e._ts)&&R.autoSleep&&Se._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Se.sleep()}}},e}(Qe);Pt(Xe.prototype,{_lock:0,_hasPause:0,_forcing:0});var We,Ge=function(t,e,r,i,n,s,a){var o,u,h,l,f,p,c,d,_=new _r(this._pt,t,e,0,1,hr,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=ge(i)),s&&(s(d=[r,i],t,e),r=d[0],i=d[1]),u=r.match(rt)||[];o=rt.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++]&&(p=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:p,c:"="===l.charAt(1)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-p,m:h&&h<4?Math.round:0},m=rt.lastIndex);return _.c=m0&&!C&&(e._startAt=0),D&&r<=0)return void(r&&(e._zTime=r))}else!1===C&&(e._startAt=0);else if(O&&D)if(S)!C&&(e._startAt=0);else if(r&&(x=!1),s=Pt({overwrite:!1,data:"isFromStart",lazy:x&&G(b),immediateRender:x,stagger:0,parent:z},i),m&&(s[p.prop]=m),Vt(e._startAt=er.set(P,s)),r<0&&e._startAt.render(-1,!0),x){if(!r)return}else t(e._startAt,1e-8);for(e._pt=0,b=D&&G(b)||b&&!D,n=0;n":e*x)}))})):T.forEach((function(t){return h.to(E,t,">")}));else{if(p=E.length,_=x?pe(x):pt,W(x))for(c in x)~Ke.indexOf(c)&&(m||(m={}),m[c]=x[c]);for(l=0;lc-1e-8&&t>=0?c: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=Ot(_%a),_===c?(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=Yt(this._tTime,a),i===p&&!r&&this._initted)return this;s!==o&&(l&&this._yEase&&Be(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=r=1,this.render(Ot(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(Zt(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&&!p&&!e&&(we(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*h,e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,r),we(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&we(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)&&Vt(this,1),e||t<0&&!p||!_&&!p||(we(this,_===c?"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&&$t(t)&&(t._initted||!Kt(t))||(t._ts<0||t._dp._ts<0)&&!Kt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=ae(0,t._tDur,e),s=Yt(l,h),a=Yt(t._tTime,h),t._yoyo&&1&s&&(u=1-u),s!==a&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||i||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&Zt(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&&we(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&we(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Vt(t,1),r||(we(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?xe(this):this;if(this.timeline){var r=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,We&&!0!==We.vars.overwrite)._first||xe(this),this.parent&&r!==this.timeline.totalDuration()&&te(this,this._dur*this.timeline._tDur/r,0,1),this}var i,n,s,a,o,u,h,l=this._targets,f=t?le(t):l,p=this._ptLookup,c=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),xe(this);for(i=this._op=this._op||[],"all"!==e&&(U(e)&&(o={},kt(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var r,i,n,s,a=t[0]?bt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(i in r=It({},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=p[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)||Bt(this,u,"_pt"),delete n[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&c&&xe(this),this},e.to=function(t,r){return new e(t,r,arguments[2])},e.from=function(t,e){return ne(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 ne(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 u.killTweensOf(t,e,r)},e}(Qe);Pt(er.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),kt("staggerTo,staggerFrom,staggerFromTo",(function(t){er[t]=function(){var e=new Xe,r=ue.call(arguments,0);return r.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,r)}}));var rr=function(t,e,r){return t[e]=r},ir=function(t,e,r){return t[e](r)},nr=function(t,e,r,i){return t[e](i.fp,r)},sr=function(t,e,r){return t.setAttribute(e,r)},ar=function(t,e){return Y(t[e])?ir:X(t[e])&&t.setAttribute?sr:rr},or=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},ur=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},hr=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)},lr=function(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},fr=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},pr=function(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Bt(this,i,"_pt"):i.dep||(e=1),i=r;return!e},cr=function(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)},dr=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},_r=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||or,this.d=a||this,this.set=o||rr,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=cr,this.m=t,this.mt=r,this.tween=e},t}();kt(wt+"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 ct[t]=1})),at.TweenMax=at.TweenLite=er,at.TimelineLite=at.TimelineMax=Xe,u=new Xe({sortChildren:!1,defaults:L,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),R.stringFilter=De;var mr={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),r=0;r1){var i=t.map((function(t){return yr.quickSetter(t,e,r)})),n=i.length;return function(t){for(var e=n;e--;)i[e](t)}}t=t[0]||{};var s=mt[e],a=bt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var i=new s;d._pt=0,i.init(t,r?e+r:e,d,0,[t]),i.render(1,i),d._pt&&lr(1,d)}:a.set(t,o);return s?u:function(e){return u(t,o,r?e+r:e,a,1)}},isTweening:function(t){return u.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ve(t.ease,L.ease)),Rt(L,t||{})},config:function(t){return Rt(R,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&&!mt[t]&&!at[t]&<(e+" effect requires "+t+" plugin.")})),gt[e]=function(t,e,i){return r(le(t),Pt(e||{},n),i)},s&&(Xe.prototype[e]=function(t,r,i){return this.add(gt[e](t,W(r)?r:(i=r)&&{},this),i)})},registerEase:function(t,e){ze[t]=Ve(e)},parseEase:function(t,e){return arguments.length?Ve(t,e):ze},getById:function(t){return u.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var r,i,n=new Xe(t);for(n.smoothChildTiming=G(t.smoothChildTiming),u.remove(n),n._dp=0,n._time=n._tTime=u._time,r=u._first;r;)i=r._next,!e&&!r._dur&&r instanceof er&&r.vars.onComplete===r._targets[0]||Ht(n,r,r._start-r._delay),r=i;return Ht(u,n,0),n},utils:{wrap:function t(e,r,i){var n=r-e;return $(e)?me(e,t(0,e.length),r):se(i,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,r,i){var n=r-e,s=2*n;return $(e)?me(e,t(0,e.length-1),r):se(i,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:pe,random:_e,snap:de,normalize:function(t,e,r){return ve(t,e,0,1,r)},getUnit:oe,clamp:function(t,e,r){return se(r,(function(r){return ae(t,e,r)}))},splitColor:Me,toArray:le,selector:function(t){return t=le(t)[0]||lt("Invalid scope")||{},function(e){var r=t.current||t.nativeElement||t;return le(e,r.querySelectorAll?r:r===t?lt("Invalid scope")||f.createElement("div"):t)}},mapRange:ve,pipe:function(){for(var t=arguments.length,e=new Array(t),r=0;r=0?Zr[n]:"")+t},Kr=function(){"undefined"!=typeof window&&window.document&&(wr=window,xr=wr.document,br=xr.documentElement,kr=Hr("div")||{style:{}},Hr("div"),Wr=$r(Wr),Gr=Wr+"Origin",kr.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Or=!!$r("perspective"),Tr=1)},ti=function t(e){var r,i=Hr("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},ei=function(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])},ri=function(t){var e;try{e=t.getBBox()}catch(r){e=ti.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===ti||(e=ti.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+ei(t,["x","cx","x1"])||0,y:+ei(t,["y","cy","y1"])||0,width:0,height:0}},ii=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!ri(t))},ni=function(t,e){if(e){var r=t.style;e in Ar&&e!==Gr&&(e=Wr),r.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),r.removeProperty(e.replace(Sr,"-$1").toLowerCase())):r.removeAttribute(e)}},si=function(t,e,r,i,n,s){var a=new _r(t._pt,e,r,0,1,s?qr:Vr);return t._pt=a,a.b=i,a.e=n,t._props.push(r),a},ai={deg:1,rad:1,turn:1},oi=function t(e,r,i,n){var s,a,o,u,h=parseFloat(i)||0,l=(i+"").trim().substr((h+"").length)||"px",f=kr.style,p=Pr.test(r),c="svg"===e.tagName.toLowerCase(),d=(c?"client":"offset")+(p?"Width":"Height"),_=100,m="px"===n,g="%"===n;return n===l||!h||ai[n]||ai[l]?h:("px"!==l&&!m&&(h=t(e,r,i,"px")),u=e.getCTM&&ii(e),!g&&"%"!==l||!Ar[r]&&!~r.indexOf("adius")?(f[p?"width":"height"]=_+(m?l:n),a=~r.indexOf("adius")||"em"===n&&e.appendChild&&!c?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==xr&&a.appendChild||(a=xr.body),(o=a._gsap)&&g&&o.width&&p&&o.time===Se.time?Mt(h/o.width*_):((g||"%"===l)&&(f.position=Jr(e,"position")),a===e&&(f.position="static"),a.appendChild(kr),s=kr[d],a.removeChild(kr),f.position="absolute",p&&g&&((o=bt(a)).time=Se.time,o.width=a[d]),Mt(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[p?"width":"height"]:e[d],Mt(g?h/s*_:h/100*s)))},ui=function(t,e,r,i){var n;return Tr||Kr(),e in Ir&&"transform"!==e&&~(e=Ir[e]).indexOf(",")&&(e=e.split(",")[0]),Ar[e]&&"transform"!==e?(n=yi(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:wi(Jr(t,Gr))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||i||~(n+"").indexOf("calc("))&&(n=pi[e]&&pi[e](t,e,r)||Jr(t,e)||Tt(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?oi(t,e,n,r)+r:n},hi=function(t,e,r,i){if(!r||"none"===r){var n=$r(e,t,1),s=n&&Jr(t,n,1);s&&s!==r?(e=n,r=s):"borderColor"===e&&(r=Jr(t,"borderTopColor"))}var a,o,u,h,l,f,p,c,d,_,m,g,v=new _r(this._pt,t.style,e,0,1,hr),y=0,w=0;if(v.b=r,v.e=i,r+="","auto"===(i+="")&&(t.style[e]=i,i=Jr(t,e)||i,t.style[e]=r),De(a=[r,i]),i=a[1],u=(r=a[0]).match(et)||[],(i.match(et)||[]).length){for(;o=et.exec(i);)p=o[0],d=i.substring(y,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),p!==(f=u[w++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),(g="="===p.charAt(1)?+(p.charAt(0)+"1"):0)&&(p=p.substr(2)),c=parseFloat(p),_=p.substr((c+"").length),y=et.lastIndex-_.length,_||(_=_||R.units[e]||m,y===i.length&&(i+=_,v.e+=_)),m!==_&&(h=oi(t,e,f,_)||0),v._pt={_next:v._pt,p:d||1===w?d:",",s:h,c:g?g*c:c-h,m:l&&l<4||"zIndex"===e?Math.round:0});v.c=y-1;)r=o[n],Ar[r]&&(i=1,r="transformOrigin"===r?Gr:Wr),ni(s,r);i&&(ni(s,Wr),u&&(u.svg&&s.removeAttribute("transform"),yi(s,1),u.uncache=1))}},pi={clearProps:function(t,e,r,i,n){if("isFromStart"!==n.data){var s=t._pt=new _r(t._pt,e,r,0,0,fi);return s.u=i,s.pr=-10,s.tween=n,t._props.push(r),1}}},ci=[1,0,0,1,0,0],di={},_i=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},mi=function(t){var e=Jr(t,Wr);return _i(e)?ci:e.substr(7).match(tt).map(Mt)},gi=function(t,e){var r,i,n,s,a=t._gsap||bt(t),o=t.style,u=mi(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(",")?ci:u:(u!==ci||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=mi(t),n?o.display=n:ni(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)},vi=function(t,e,r,i,n,s){var a,o,u,h=t._gsap,l=n||gi(t,!0),f=h.xOrigin||0,p=h.yOrigin||0,c=h.xOffset||0,d=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],w=l[5],x=e.split(" "),b=parseFloat(x[0])||0,T=parseFloat(x[1])||0;r?l!==ci&&(o=_*v-m*g)&&(u=b*(-m/o)+T*(_/o)-(_*w-m*y)/o,b=b*(v/o)+T*(-g/o)+(g*w-v*y)/o,T=u):(b=(a=ri(t)).x+(~x[0].indexOf("%")?b/100*a.width:b),T=a.y+(~(x[1]||x[0]).indexOf("%")?T/100*a.height:T)),i||!1!==i&&h.smooth?(y=b-f,w=T-p,h.xOffset=c+(y*_+w*g)-y,h.yOffset=d+(y*m+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=b,h.yOrigin=T,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[Gr]="0px 0px",s&&(si(s,h,"xOrigin",f,b),si(s,h,"yOrigin",p,T),si(s,h,"xOffset",c,h.xOffset),si(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",b+" "+T)},yi=function(t,e){var r=t._gsap||new Ye(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,s,a,o,u,h,l,f,p,c,d,_,m,g,v,y,w,x,b,T,k,M,O,A,E,C,D,S,P,z,I,L=t.style,F=r.scaleX<0,B="px",V="deg",q=Jr(t,Gr)||"0";return i=n=s=u=h=l=f=p=c=0,a=o=1,r.svg=!(!t.getCTM||!ii(t)),m=gi(t,r.svg),r.svg&&(O=(!r.uncache||"0px 0px"===q)&&!e&&t.getAttribute("data-svg-origin"),vi(t,O||q,!!O||r.originIsAbsolute,!1!==r.smooth,m)),d=r.xOrigin||0,_=r.yOrigin||0,m!==ci&&(w=m[0],x=m[1],b=m[2],T=m[3],i=k=m[4],n=M=m[5],6===m.length?(a=Math.sqrt(w*w+x*x),o=Math.sqrt(T*T+b*b),u=w||x?Dr(x,w)*Er:0,(f=b||T?Dr(b,T)*Er+u:0)&&(o*=Math.abs(Math.cos(f*Cr))),r.svg&&(i-=d-(d*w+_*b),n-=_-(d*x+_*T))):(I=m[6],P=m[7],C=m[8],D=m[9],S=m[10],z=m[11],i=m[12],n=m[13],s=m[14],h=(g=Dr(I,S))*Er,g&&(O=k*(v=Math.cos(-g))+C*(y=Math.sin(-g)),A=M*v+D*y,E=I*v+S*y,C=k*-y+C*v,D=M*-y+D*v,S=I*-y+S*v,z=P*-y+z*v,k=O,M=A,I=E),l=(g=Dr(-b,S))*Er,g&&(v=Math.cos(-g),z=T*(y=Math.sin(-g))+z*v,w=O=w*v-C*y,x=A=x*v-D*y,b=E=b*v-S*y),u=(g=Dr(x,w))*Er,g&&(O=w*(v=Math.cos(g))+x*(y=Math.sin(g)),A=k*v+M*y,x=x*v-w*y,M=M*v-k*y,w=O,k=A),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=Mt(Math.sqrt(w*w+x*x+b*b)),o=Mt(Math.sqrt(M*M+I*I)),g=Dr(k,M),f=Math.abs(g)>2e-4?g*Er:0,c=z?1/(z<0?-z:z):0),r.svg&&(O=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!_i(Jr(t,Wr)),O&&t.setAttribute("transform",O))),Math.abs(f)>90&&Math.abs(f)<270&&(F?(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=Mt(a),r.scaleY=Mt(o),r.rotation=Mt(u)+V,r.rotationX=Mt(h)+V,r.rotationY=Mt(l)+V,r.skewX=f+V,r.skewY=p+V,r.transformPerspective=c+B,(r.zOrigin=parseFloat(q.split(" ")[2])||0)&&(L[Gr]=wi(q)),r.xOffset=r.yOffset=0,r.force3D=R.force3D,r.renderTransform=r.svg?ki:Or?Ti:bi,r.uncache=0,r},wi=function(t){return(t=t.split(" "))[0]+" "+t[1]},xi=function(t,e,r){var i=oe(e);return Mt(parseFloat(e)+parseFloat(oi(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,p=r.skewY,c=r.scaleX,d=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",w="auto"===m&&t&&1!==t||!0===m;if(v&&("0deg"!==l||"0deg"!==h)){var x,b=parseFloat(h)*Cr,T=Math.sin(b),k=Math.cos(b);b=parseFloat(l)*Cr,x=Math.cos(b),s=xi(g,s,T*x*-v),a=xi(g,a,-Math.sin(b)*-v),o=xi(g,o,k*x*-v+v)}"0px"!==_&&(y+="perspective("+_+") "),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),(w||"0px"!==s||"0px"!==a||"0px"!==o)&&(y+="0px"!==o||w?"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"===p||(y+="skew("+f+", "+p+") "),1===c&&1===d||(y+="scale("+c+", "+d+") "),g.style[Wr]=y||"translate(0, 0)"},ki=function(t,e){var r,i,n,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,p=o.rotation,c=o.skewX,d=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,w=o.xOffset,x=o.yOffset,b=o.forceCSS,T=parseFloat(l),k=parseFloat(f);p=parseFloat(p),c=parseFloat(c),(d=parseFloat(d))&&(c+=d=parseFloat(d),p+=d),p||c?(p*=Cr,c*=Cr,r=Math.cos(p)*_,i=Math.sin(p)*_,n=Math.sin(p-c)*-m,s=Math.cos(p-c)*m,c&&(d*=Cr,a=Math.tan(c-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=Mt(r),i=Mt(i),n=Mt(n),s=Mt(s)):(r=_,s=m,i=n=0),(T&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(T=oi(g,"x",l,"px"),k=oi(g,"y",f,"px")),(v||y||w||x)&&(T=Mt(T+v-(v*r+y*n)+w),k=Mt(k+y-(v*i+y*s)+x)),(u||h)&&(a=g.getBBox(),T=Mt(T+u/100*a.width),k=Mt(k+h/100*a.height)),a="matrix("+r+","+i+","+n+","+s+","+T+","+k+")",g.setAttribute("transform",a),b&&(g.style[Wr]=a)},Mi=function(t,e,r,i,n,s){var a,o,u=360,h=U(n),l=parseFloat(n)*(h&&~n.indexOf("rad")?Er:1),f=s?l*s:l-i,p=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 _r(t._pt,e,r,i,f,Lr),o.e=p,o.u="deg",t._props.push(r),o},Oi=function(t,e){for(var r in e)t[r]=e[r];return t},Ai=function(t,e,r){var i,n,s,a,o,u,h,l=Oi({},r._gsap),f=r.style;for(n in l.svg?(s=r.getAttribute("transform"),r.setAttribute("transform",""),f[Wr]=e,i=yi(r,1),ni(r,Wr),r.setAttribute("transform",s)):(s=getComputedStyle(r)[Wr],f[Wr]=e,i=yi(r,1),f[Wr]=s),Ar)(s=l[n])!==(a=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=oe(s)!==(h=oe(a))?oi(r,n,s,h):parseFloat(s),u=parseFloat(a),t._pt=new _r(t._pt,i,n,o,u-o,Rr),t._pt.u=h||0,t._props.push(n));Oi(i,l)};kt("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}));pi[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 ui(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 Ei,Ci,Di,Si={name:"css",register:Kr,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,r,i,n){var s,a,o,u,h,l,f,p,c,d,_,m,g,v,y,w,x,b,T,k=this._props,M=t.style,O=r.vars.startAt;for(f in Tr||Kr(),e)if("autoRound"!==f&&(a=e[f],!mt[f]||!Je(f,e,r,i,t,n)))if(h=typeof a,l=pi[f],"function"===h&&(h=typeof(a=a.call(r,i,t,n))),"string"===h&&~a.indexOf("random(")&&(a=ge(a)),l)l(this,t,f,a,r)&&(y=1);else if("--"===f.substr(0,2))s=(getComputedStyle(t).getPropertyValue(f)+"").trim(),a+="",Ee.lastIndex=0,Ee.test(s)||(p=oe(s),c=oe(a)),c?p!==c&&(s=oi(t,f,s,c)+c):p&&(a+=p),this.add(M,"setProperty",s,a,i,n,0,0,f),k.push(f);else if("undefined"!==h){if(O&&f in O?(s="function"==typeof O[f]?O[f].call(r,i,t,n):O[f],f in R.units&&!oe(s)&&(s+=R.units[f]),U(s)&&~s.indexOf("random(")&&(s=ge(s)),"="===(s+"").charAt(1)&&(s=ui(t,f))):s=ui(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 Ir&&("autoAlpha"===f&&(1===u&&"hidden"===ui(t,"visibility")&&o&&(u=0),si(this,M,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==f&&"transform"!==f&&~(f=Ir[f]).indexOf(",")&&(f=f.split(",")[0])),_=f in Ar)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||yi(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new _r(this._pt,M,Wr,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===f)this._pt=new _r(this._pt,g,"scaleY",g.scaleY,(d?d*o:o-g.scaleY)||0),k.push("scaleY",f),f+="X";else{if("transformOrigin"===f){x=void 0,b=void 0,T=void 0,x=(w=a).split(" "),b=x[0],T=x[1]||"50%","top"!==b&&"bottom"!==b&&"left"!==T&&"right"!==T||(w=b,b=T,T=w),x[0]=li[b]||b,x[1]=li[T]||T,a=x.join(" "),g.svg?vi(t,a,0,v,0,this):((c=parseFloat(a.split(" ")[2])||0)!==g.zOrigin&&si(this,g,"zOrigin",g.zOrigin,c),si(this,M,f,wi(s),wi(a)));continue}if("svgOrigin"===f){vi(t,a,1,v,0,this);continue}if(f in di){Mi(this,g,f,u,a,d);continue}if("smoothOrigin"===f){si(this,g,"smooth",g.smooth,a);continue}if("force3D"===f){g[f]=a;continue}if("transform"===f){Ai(this,a,t);continue}}else f in M||(f=$r(f)||f);if(_||(o||0===o)&&(u||0===u)&&!zr.test(a)&&f in M)o||(o=0),(p=(s+"").substr((u+"").length))!==(c=oe(a)||(f in R.units?R.units[f]:p))&&(u=oi(t,f,s,c)),this._pt=new _r(this._pt,_?g:M,f,u,d?d*o:o-u,_||"px"!==c&&"zIndex"!==f||!1===e.autoRound?Rr:Br),this._pt.u=c||0,p!==c&&"%"!==c&&(this._pt.b=s,this._pt.r=Fr);else if(f in M)hi.call(this,t,f,s,a);else{if(!(f in t)){ht(f,a);continue}this.add(t,f,s||t[f],a,i,n)}k.push(f)}y&&dr(this)},get:ui,aliases:Ir,getSetter:function(t,e,r){var i=Ir[e];return i&&i.indexOf(",")<0&&(e=i),e in Ar&&e!==Gr&&(t._gsap.x||ui(t,"x"))?r&&Mr===r?"scale"===e?Yr:Ur:(Mr=r||{},"scale"===e?Qr:Xr):t.style&&!X(t.style[e])?jr:~e.indexOf("-")?Nr:ar(t,e)},core:{_removeProperty:ni,_getMatrix:gi}};yr.utils.checkPrefix=$r,Di=kt((Ei="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Ci="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Ar[t]=1})),kt(Ci,(function(t){R.units[t]="deg",di[t]=1})),Ir[Di[13]]=Ei+","+Ci,kt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Ir[e[1]]=Di[e[0]]})),kt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){R.units[t]="px"})),yr.registerPlugin(Si);var Pi=yr.registerPlugin(Si)||yr;Pi.core.Tween;((t="img")=>new Promise((e=>{n(document.querySelectorAll(t),{background:!0},e)})))(".tiles__line-img").then((()=>document.body.classList.remove("loading")));const zi=document.querySelector(".frame"),Ii=document.querySelector(".overlay__path"),Ri=document.querySelector(".menu-wrap"),Li=Ri.querySelectorAll(".menu__item"),Fi=document.querySelector("button.button-menu"),Bi=Ri.querySelector(".button-close"),Vi={main:document.querySelector(".content__title-main"),sub:document.querySelector(".content__title-sub")};let qi=!1;Fi.addEventListener("click",(()=>{qi||(qi=!0,Pi.timeline({onComplete:()=>qi=!1}).set(Ii,{attr:{d:"M 0 100 V 100 Q 50 100 100 100 V 100 z"}}).to(Ii,{duration:.8,ease:"power4.in",attr:{d:"M 0 100 V 50 Q 50 0 100 50 V 100 z"}},0).to(Ii,{duration:.3,ease:"power2",attr:{d:"M 0 100 V 0 Q 50 0 100 0 V 100 z"},onComplete:()=>{zi.classList.add("frame--menu-open"),Ri.classList.add("menu-wrap--open")}}).to([Vi.main,Vi.sub],{duration:.8,ease:"power3.in",y:-200,stagger:.05},.2).set(Li,{opacity:0}).set(Ii,{attr:{d:"M 0 0 V 100 Q 50 100 100 100 V 0 z"}}).to(Ii,{duration:.3,ease:"power2.in",attr:{d:"M 0 0 V 50 Q 50 0 100 50 V 0 z"}}).to(Ii,{duration:.8,ease:"power4",attr:{d:"M 0 0 V 0 Q 50 0 100 0 V 0 z"}}).to(Li,{duration:1.1,ease:"power4",startAt:{y:150},y:0,opacity:1,stagger:.05},">-=1.1"))})),Bi.addEventListener("click",(()=>{qi||(qi=!0,Pi.timeline({onComplete:()=>qi=!1}).set(Ii,{attr:{d:"M 0 0 V 0 Q 50 0 100 0 V 0 z"}}).to(Ii,{duration:.8,ease:"power4.in",attr:{d:"M 0 0 V 50 Q 50 100 100 50 V 0 z"}},0).to(Ii,{duration:.3,ease:"power2",attr:{d:"M 0 0 V 100 Q 50 100 100 100 V 0 z"},onComplete:()=>{zi.classList.remove("frame--menu-open"),Ri.classList.remove("menu-wrap--open")}}).set(Ii,{attr:{d:"M 0 100 V 0 Q 50 0 100 0 V 100 z"}}).to(Ii,{duration:.3,ease:"power2.in",attr:{d:"M 0 100 V 50 Q 50 100 100 50 V 100 z"}}).to(Ii,{duration:.8,ease:"power4",attr:{d:"M 0 100 V 100 Q 50 100 100 100 V 100 z"}}).to([Vi.main,Vi.sub],{duration:1.1,ease:"power4",y:0,stagger:-.05},">-=1.1").to(Li,{duration:.8,ease:"power2.in",y:100,opacity:0,stagger:-.05},0))})); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Infinite Menu Background Animation | Codrops

Infinite Menu Background Animation

@codrops
London 2022 spring / summer collection

Theodore Stravassos

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

Infinite Menu Background Animation

34 | 39 |
@codrops
40 |
41 | London 2022 42 | spring / summer collection 43 |
44 |
45 |
46 |

47 | Theodore 48 | Stravassos 49 |

50 | 58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 104 | 107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 |
115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import { gsap } from 'gsap'; 3 | 4 | // preload images then remove loader (loading class) 5 | preloadImages('.tiles__line-img').then(() => document.body.classList.remove('loading')); 6 | 7 | // frame element 8 | const frame = document.querySelector('.frame'); 9 | 10 | // overlay (SVG path element) 11 | const overlayPath = document.querySelector('.overlay__path'); 12 | 13 | // menu (wrap) element 14 | const menuWrap = document.querySelector('.menu-wrap'); 15 | 16 | // menu items 17 | const menuItems = menuWrap.querySelectorAll('.menu__item'); 18 | 19 | // open menu button 20 | const openMenuCtrl = document.querySelector('button.button-menu'); 21 | 22 | // close menu button 23 | const closeMenuCtrl = menuWrap.querySelector('.button-close'); 24 | 25 | // big title elements 26 | const title = { 27 | main: document.querySelector('.content__title-main'), 28 | sub: document.querySelector('.content__title-sub') 29 | }; 30 | 31 | let isAnimating = false; 32 | 33 | // opens the menu 34 | const openMenu = () => { 35 | 36 | if ( isAnimating ) return; 37 | isAnimating = true; 38 | gsap.timeline({ 39 | onComplete: () => isAnimating = false 40 | }) 41 | .set(overlayPath, { 42 | attr: { d: 'M 0 100 V 100 Q 50 100 100 100 V 100 z' } 43 | }) 44 | .to(overlayPath, { 45 | duration: 0.8, 46 | ease: 'power4.in', 47 | attr: { d: 'M 0 100 V 50 Q 50 0 100 50 V 100 z' } 48 | }, 0) 49 | .to(overlayPath, { 50 | duration: 0.3, 51 | ease: 'power2', 52 | attr: { d: 'M 0 100 V 0 Q 50 0 100 0 V 100 z' }, 53 | onComplete: () => { 54 | frame.classList.add('frame--menu-open'); 55 | menuWrap.classList.add('menu-wrap--open'); 56 | } 57 | }) 58 | // title elements 59 | .to([title.main, title.sub], { 60 | duration: 0.8, 61 | ease: 'power3.in', 62 | y: -200, 63 | stagger: 0.05 64 | }, 0.2) 65 | 66 | // now reveal 67 | .set(menuItems, { 68 | opacity: 0 69 | }) 70 | .set(overlayPath, { 71 | attr: { d: 'M 0 0 V 100 Q 50 100 100 100 V 0 z' } 72 | }) 73 | .to(overlayPath, { 74 | duration: 0.3, 75 | ease: 'power2.in', 76 | attr: { d: 'M 0 0 V 50 Q 50 0 100 50 V 0 z' } 77 | }) 78 | .to(overlayPath, { 79 | duration: 0.8, 80 | ease: 'power4', 81 | attr: { d: 'M 0 0 V 0 Q 50 0 100 0 V 0 z' } 82 | }) 83 | // menu items translate animation 84 | .to(menuItems, { 85 | duration: 1.1, 86 | ease: 'power4', 87 | startAt: {y: 150}, 88 | y: 0, 89 | opacity: 1, 90 | stagger: 0.05 91 | }, '>-=1.1'); 92 | 93 | } 94 | 95 | // closes the menu 96 | const closeMenu = () => { 97 | 98 | if ( isAnimating ) return; 99 | isAnimating = true; 100 | gsap.timeline({ 101 | onComplete: () => isAnimating = false 102 | }) 103 | .set(overlayPath, { 104 | attr: { d: 'M 0 0 V 0 Q 50 0 100 0 V 0 z' } 105 | }) 106 | .to(overlayPath, { 107 | duration: 0.8, 108 | ease: 'power4.in', 109 | attr: { d: 'M 0 0 V 50 Q 50 100 100 50 V 0 z' } 110 | }, 0) 111 | .to(overlayPath, { 112 | duration: 0.3, 113 | ease: 'power2', 114 | attr: { d: 'M 0 0 V 100 Q 50 100 100 100 V 0 z' }, 115 | onComplete: () => { 116 | frame.classList.remove('frame--menu-open'); 117 | menuWrap.classList.remove('menu-wrap--open'); 118 | } 119 | }) 120 | // now reveal 121 | .set(overlayPath, { 122 | attr: { d: 'M 0 100 V 0 Q 50 0 100 0 V 100 z' } 123 | }) 124 | .to(overlayPath, { 125 | duration: 0.3, 126 | ease: 'power2.in', 127 | attr: { d: 'M 0 100 V 50 Q 50 100 100 50 V 100 z' } 128 | }) 129 | .to(overlayPath, { 130 | duration: 0.8, 131 | ease: 'power4', 132 | attr: { d: 'M 0 100 V 100 Q 50 100 100 100 V 100 z' } 133 | }) 134 | // title elements 135 | .to([title.main, title.sub], { 136 | duration: 1.1, 137 | ease: 'power4', 138 | y: 0, 139 | stagger: -0.05 140 | }, '>-=1.1') 141 | // menu items translate animation 142 | .to(menuItems, { 143 | duration: 0.8, 144 | ease: 'power2.in', 145 | y: 100, 146 | opacity: 0, 147 | stagger: -0.05 148 | }, 0) 149 | 150 | } 151 | 152 | 153 | // click on menu button 154 | openMenuCtrl.addEventListener('click', openMenu); 155 | // click on close menu button 156 | closeMenuCtrl.addEventListener('click', closeMenu); -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Preload images 4 | const preloadImages = (selector = 'img') => { 5 | return new Promise((resolve) => { 6 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 7 | }); 8 | }; 9 | 10 | export { 11 | preloadImages 12 | }; --------------------------------------------------------------------------------