├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.1770e3b3.jpg ├── 2.07ca36b5.jpg ├── favicon.a64e97b2.ico ├── index.b5e7c14d.js ├── index.d73f7ad5.css ├── index.e9a2d1b4.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg └── 2.jpg ├── index.html └── js ├── cursor.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 -------------------------------------------------------------------------------- /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 | # Lines to Content Layout Animation 2 | 3 | A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content. 4 | 5 | ![Image](https://tympanus.net/codrops/wp-content/uploads/2022/04/lines2layout_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=60052) 8 | 9 | [Demo](http://tympanus.net/Development/LinesToLayout/) 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.1770e3b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LinesToLayout/d4071daba81d188165be6b6254bfc6c28c21ef3a/dist/1.1770e3b3.jpg -------------------------------------------------------------------------------- /dist/2.07ca36b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LinesToLayout/d4071daba81d188165be6b6254bfc6c28c21ef3a/dist/2.07ca36b5.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LinesToLayout/d4071daba81d188165be6b6254bfc6c28c21ef3a/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /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={},i={},n=t.parcelRequiref8c0;function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var i=0;it.length)&&(e=t.length);for(var i=0,n=new Array(e);is;)a=a._prev;return a?(e._next=a._next,a._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[n]=e,e._prev=a,e.parent=e._dp=t,e},Ht=function(t,e,i,n){void 0===i&&(i="_first"),void 0===n&&(n="_last");var r=e._prev,s=e._next;r?r._next=s:t[i]===e&&(t[i]=s),s?s._prev=r:t[n]===e&&(t[n]=r),e._next=e._prev=e.parent=null},Qt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},Gt=function(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},Zt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},$t=function t(e){return!e||e._ts&&t(e.parent)},Jt=function(t){return t._repeat?Kt(t._tTime,t=t.duration()+t._rDelay)*t:0},Kt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},te=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},ee=function(t){return t._end=It(t._start+(t._tDur/Math.abs(t._ts||t._rts||j)||0))},ie=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=It(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),ee(t),i._dirty||Gt(i,t)),t},ne=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=te(t.rawTime(),e),(!e._dur||me(0,e.totalDuration(),i)-e._tTime>j)&&e.render(i,!0)),Gt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&i.totalTime(i._tTime),i=i._dp;t._zTime=-1e-8}},re=function(t,e,i,n){return e.parent&&Qt(e),e._start=It((K(i)?i:i||t!==d?fe(t,i,e):t._time)+e._delay),e._end=It(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),Wt(t,e,"_first","_last",t._sort?"_start":0),ue(e)||(t._recent=e),n||ne(t,e),t},se=function(t,e){return(dt.ScrollTrigger||_t("scrollTrigger",e))&&dt.ScrollTrigger.create(e,t)},ae=function(t,e,i,n){return hi(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&y!==Xe.frame?(xt.push(t),t._lazy=[e,n],1):void 0:1},oe=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},ue=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},he=function(t,e,i,n){var r=t._repeat,s=It(e)||0,a=t._tTime/t._tDur;return a&&!n&&(t._time*=s/t._dur),t._dur=s,t._tDur=r?r<0?1e10:It(s*(r+1)+t._rDelay*r):s,a>0&&!n?ie(t,t._tTime=t._tDur*a):t.parent&&ee(t),i||Gt(t.parent,t),t},le=function(t){return t instanceof ni?Gt(t):he(t,t._dur)},ce={_start:0,endTime:bt,totalDuration:bt},fe=function t(e,i,n){var r,s,a,o=e.labels,u=e._recent||ce,h=e.duration()>=Y?u.endTime(!1):e._dur;return $(i)&&(isNaN(i)||i in o)?(s=i.charAt(0),a="%"===i.substr(-1),r=i.indexOf("="),"<"===s||">"===s?(r>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(a?(r<0?u:n).totalDuration()/100:1)):r<0?(i in o||(o[i]=h),o[i]):(s=parseFloat(i.charAt(r-1)+i.substr(r+1)),a&&n&&(s=s/100*(at(n)?n[0]:n).totalDuration()),r>1?t(e,i.substr(0,r-1),n)+s:h+s)):null==i?h:+i},pe=function(t,e,i){var n,r,s=K(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=i,t){for(n=o,r=i;r&&!("immediateRender"in n);)n=r.vars.defaults||{},r=it(r.vars.inherit)&&r.parent;o.immediateRender=it(n.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new di(e[0],o,e[a+1])},de=function(t,e){return t||0===t?e(t):e},me=function(t,e,i){return ie?e:i},ge=function(t,e){return $(t)&&(e=pt.exec(t))?e[1]:""},_e=[].slice,ve=function(t,e){return t&&et(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&et(t[0]))&&!t.nodeType&&t!==m},ye=function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var n;return $(t)&&!e||ve(t,1)?(n=i).push.apply(n,be(t)):i.push(t)}))||i},be=function(t,e,i){return!$(t)||i||!g&&Ye()?at(t)?ye(t,i):ve(t)?_e.call(t,0):t?[t]:[]:_e.call((e||_).querySelectorAll(t),0)},we=function(t){return t.sort((function(){return.5-Math.random()}))},xe=function(t){if(J(t))return t;var e=et(t)?t:{each:t},i=Ze(e.ease),n=e.from||0,r=parseFloat(e.base)||0,s={},a=n>0&&n<1,o=isNaN(n)||a,u=e.axis,h=n,l=n;return $(n)?h=l={center:.5,edges:.5,end:1}[n]||0:!a&&o&&(h=n[0],l=n[1]),function(t,a,c){var f,p,d,m,g,_,v,y,b,w=(c||e).length,x=s[w];if(!x){if(!(b="auto"===e.grid?0:(e.grid||[1,Y])[1])){for(v=-1e8;v<(v=c[b++].getBoundingClientRect().left)&&bv&&(v=g),gw?w-1:u?"y"===u?w/b:b:Math.max(b,w/b))||0)*("edges"===n?-1:1),x.b=w<0?r-w:r,x.u=ge(e.amount||e.each)||0,i=i&&w<0?Qe(i):i}return w=(x[t]-x.min)/x.max||0,It(x.b+(i?i(w):w)*x.v)+x.u}},Te=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(i){var n=Math.round(parseFloat(i)/t)*t*e;return(n-n%1)/e+(K(i)?0:ge(i))}},Se=function(t,e){var i,n,r=at(t);return!r&&et(t)&&(i=r=t.radius||Y,t.values?(t=be(t.values),(n=!K(t[0]))&&(i*=i)):t=Te(t.increment)),de(e,r?J(t)?function(e){return n=t(e),Math.abs(n-e)<=i?n:e}:function(e){for(var r,s,a=parseFloat(n?e.x:e),o=parseFloat(n?e.y:0),u=Y,h=0,l=t.length;l--;)(r=n?(r=t[l].x-a)*r+(s=t[l].y-o)*s:Math.abs(t[l]-a))(r=Math.abs(r))&&(s=n,o=r);return s},Ae=function(t,e,i){var n,r,s=t.vars,a=s[e];if(a)return n=s[e+"Params"],r=s.callbackScope||t,i&&xt.length&&zt(),n?a.apply(r,n):a.call(r)},De=function(t){return Qt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Ae(t,"onInterrupt"),t},Pe=function(t){var e=(t=!t.name&&t.default||t).name,i=J(t),n=e&&!i&&t.init?function(){this._props=[]}:t,r={init:bt,render:Ti,add:oi,kill:ki,modifier:Si,rawVars:0},s={targetTest:0,get:0,getSetter:yi,aliases:{},register:0};if(Ye(),t!==n){if(St[e])return;Nt(n,Nt(jt(t,r),s)),Xt(n.prototype,Xt(r,jt(t,s))),St[n.prop=e]=n,t.targetTest&&(Et.push(n),wt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}yt(e,n),t.register&&t.register(Pi,n,Ci)},Le=255,Ie={aqua:[0,Le,Le],lime:[0,Le,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Le],navy:[0,0,128],white:[Le,Le,Le],olive:[128,128,0],yellow:[Le,Le,0],orange:[Le,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Le,0,0],pink:[Le,192,203],cyan:[0,Le,Le],transparent:[Le,Le,Le,0]},Be=function(t,e,i){return(6*(t+=t<0?1:t>1?-1:0)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)*Le+.5|0},Re=function(t,e,i){var n,r,s,a,o,u,h,l,c,f,p=t?K(t)?[t>>16,t>>8&Le,t&Le]:0:Ie.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Ie[t])p=Ie[t];else if("#"===t.charAt(0)){if(t.length<6&&(n=t.charAt(1),r=t.charAt(2),s=t.charAt(3),t="#"+n+n+r+r+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&Le,p&Le,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Le,t&Le]}else if("hsl"===t.substr(0,3))if(p=f=t.match(ot),e){if(~t.indexOf("="))return p=t.match(ut),i&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,n=2*(u=+p[2]/100)-(r=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=Be(a+1/3,n,r),p[1]=Be(a,n,r),p[2]=Be(a-1/3,n,r);else p=t.match(ot)||Ie.transparent;p=p.map(Number)}return e&&!f&&(n=p[0]/Le,r=p[1]/Le,s=p[2]/Le,u=((h=Math.max(n,r,s))+(l=Math.min(n,r,s)))/2,h===l?a=o=0:(c=h-l,o=u>.5?c/(2-h-l):c/(h+l),a=h===n?(r-s)/c+(rM&&(D+=a-A),((i=(r=(P+=a)-D)-I)>0||o)&&(s=++k.frame,O=r-1e3*k.time,k.time=r/=1e3,I+=i+(i>=L?4:L-i),n=1),o||(x=T(t)),n)for(E=0;E=e&&E--},_listeners:B=[]}),Ye=function(){return!w&&Xe.wake()},je={},Ue=/^[\d.\-M][\d.\-,\s]/,We=/["']/g,He=function(t){for(var e,i,n,r={},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("{")?[He(s[1])]:(e=t,i=e.indexOf("(")+1,n=e.indexOf(")"),r=e.indexOf("(",i),e.substring(i,~r&&r=1?i:1,s=(n||(e?.3:.45))/(i<1?i:1),a=s/U*(Math.asin(1/r)||0),o=function(t){return 1===t?1:r*Math.pow(2,-10*t)*Z((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Je(o);return s=U/s,u.config=function(i,n){return t(e,i,n)},u},ti=function t(e,i){void 0===i&&(i=1.70158);var n=function(t){return t?--t*t*((i+1)*t+i)+1:0},r="out"===e?n:"in"===e?function(t){return 1-n(1-t)}:Je(n);return r.config=function(i){return t(e,i)},r};Pt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;$e(t+",Power"+(i-1),e?function(t){return Math.pow(t,i)}:function(t){return t},(function(t){return 1-Math.pow(1-t,i)}),(function(t){return t<.5?Math.pow(2*t,i)/2:1-Math.pow(2*(1-t),i)/2}))})),je.Linear.easeNone=je.none=je.Linear.easeIn,$e("Elastic",Ke("in"),Ke("out"),Ke()),z=7.5625,V=1/(F=2.75),$e("Bounce",(function(t){return 1-q(1-t)}),q=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,he(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Ye(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(ie(this,t),!i._dp||i.parent||ne(i,this);i&&i.parent;)i.parent._time!==i._start+(i._ts>=0?i._tTime/i._ts:(i.totalDuration()-i._tTime)/-i._ts)&&i.totalTime(i._tTime,!0),i=i.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&re(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===j||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Ft(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Jt(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)+Jt(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},e.iteration=function(t,e){var i=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*i,e):this._repeat?Kt(this._tTime,i)+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?te(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,this.totalTime(me(-this._delay,this._tDur,e),!0),ee(this),Zt(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):(Ye(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==j&&(this._tTime-=j)))),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)&&re(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(it(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?te(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,i=arguments.length?t:e.rawTime();e;)i=e._start+i/(e._ts||1),e=e._dp;return i},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,le(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,le(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(fe(this,t),it(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,it(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,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(n[t]=e,i&&(n[t+"Params"]=i),"onUpdate"===t&&(this._onUpdate=e)):delete n[t],this):n[t]},e.then=function(t){var e=this;return new Promise((function(i){var n=J(t)?t:qt,r=function(){var t=e.then;e.then=null,J(n)&&(n=n(e))&&(n.then||n===e)&&(e.then=t),i(n),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?r():e._prom=r}))},e.kill=function(){De(this)},t}();Nt(ii.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 ni=function(t){function e(e,i){var n;return void 0===e&&(e={}),(n=t.call(this,e)||this).labels={},n.smoothChildTiming=!!e.smoothChildTiming,n.autoRemoveChildren=!!e.autoRemoveChildren,n._sort=it(e.sortChildren),d&&re(e.parent||d,c(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&se(c(n),e.scrollTrigger),n}f(e,t);var i=e.prototype;return i.to=function(t,e,i){return pe(0,arguments,this),this},i.from=function(t,e,i){return pe(1,arguments,this),this},i.fromTo=function(t,e,i,n){return pe(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,Ut(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new di(t,e,fe(this,i),1),this},i.call=function(t,e,i){return re(this,di.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,n,r,s,a){return i.duration=e,i.stagger=i.stagger||n,i.onComplete=s,i.onCompleteParams=a,i.parent=this,new di(t,i,fe(this,r)),this},i.staggerFrom=function(t,e,i,n,r,s,a){return i.runBackwards=1,Ut(i).immediateRender=it(i.immediateRender),this.staggerTo(t,e,i,n,r,s,a)},i.staggerFromTo=function(t,e,i,n,r,s,a,o){return n.startAt=i,Ut(n).immediateRender=it(n.immediateRender),this.staggerTo(t,e,n,r,s,a,o)},i.render=function(t,e,i){var n,r,s,a,o,u,h,l,c,f,p,m,g=this._time,_=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:It(t),b=this._zTime<0!=t<0&&(this._initted||!v);if(this!==d&&y>_&&t>=0&&(y=_),y!==this._tTime||i||b){if(g!==this._time&&v&&(y+=this._time-g,t+=this._time-g),n=y,c=this._start,u=!(l=this._ts),b&&(v||(g=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(p=this._yoyo,o=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,i);if(n=It(y%o),y===_?(a=this._repeat,n=v):((a=~~(y/o))&&a===y/o&&(n=v,a--),n>v&&(n=v)),f=Kt(this._tTime,o),!g&&this._tTime&&f!==a&&(f=a),p&&1&a&&(n=v-n,m=1),a!==f&&!this._lock){var w=p&&1&f,x=w===(p&&1&a);if(ae)for(n=t._first;n&&n._start<=i;){if("isPause"===n.data&&n._start>e)return n;n=n._next}else for(n=t._last;n&&n._start>=i;){if("isPause"===n.data&&n._start=g&&t>=0)for(r=this._first;r;){if(s=r._next,(r._act||n>=r._start)&&r._ts&&h!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(n-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(n-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=-1e-8);break}}r=s}else{r=this._last;for(var T=t<0?t:n;r;){if(s=r._prev,(r._act||T<=r._end)&&r._ts&&h!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(T-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(T-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=T?-1e-8:j);break}}r=s}}if(h&&!e&&(this.pause(),h.render(n>=g?0:-1e-8)._zTime=n>=g?1:-1,this._ts))return this._start=c,ee(this),this.render(t,e,i);this._onUpdate&&!e&&Ae(this,"onUpdate",!0),(y===_&&this._tTime>=this.totalDuration()||!y&&g)&&(c!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===_&&this._ts>0||!y&&this._ts<0)&&Qt(this,1),e||t<0&&!g||!y&&!g&&_||(Ae(this,y===_&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y<_&&this.timeScale()>0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(K(e)||(e=fe(this,e,t)),!(t instanceof ii)){if(at(t))return t.forEach((function(t){return i.add(t,e)})),this;if($(t))return this.addLabel(t,e);if(!J(t))return this;t=di.delayedCall(0,t)}return this!==t?re(this,t,e):this},i.getChildren=function(t,e,i,n){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===n&&(n=-1e8);for(var r=[],s=this._first;s;)s._start>=n&&(s instanceof di?e&&r.push(s):(i&&r.push(s),t&&r.push.apply(r,s.getChildren(!0,e,i)))),s=s._next;return r},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return $(t)?this.removeLabel(t):J(t)?this.killTweensOf(t):(Ht(this,t),t===this._recent&&(this._recent=this._last),Gt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=It(Xe.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,i),this._forcing=0,this):this._tTime},i.addLabel=function(t,e){return this.labels[t]=fe(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var n=di.delayedCall(0,e||bt,i);return n.data="isPause",this._hasPause=1,re(this,n,fe(this,t))},i.removePause=function(t){var e=this._first;for(t=fe(this,t);e;)e._start===t&&"isPause"===e.data&&Qt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var n=this.getTweensOf(t,i),r=n.length;r--;)ri!==n[r]&&n[r].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,n=[],r=be(t),s=this._first,a=K(e);s;)s instanceof di?Rt(s._targets,r)&&(a?(!ri||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&n.push(s):(i=s.getTweensOf(r,e)).length&&n.push.apply(n,i),s=s._next;return n},i.tweenTo=function(t,e){e=e||{};var i,n=this,r=fe(n,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=di.to(n,Nt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:r,overwrite:"auto",duration:e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale())||j,onStart:function(){if(n.pause(),!i){var t=e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale());l._dur!==t&&he(l,t,0,1).render(l._time,!0,!0),i=1}o&&o.apply(l,u||[])}},e));return h?l.render(0):l},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,Nt({startAt:{time:fe(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),Me(this,fe(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),Me(this,fe(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+j)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var n,r=this._first,s=this.labels;r;)r._start>=i&&(r._start+=t,r._end+=t),r=r._next;if(e)for(n in s)s[n]>=i&&(s[n]+=t);return Gt(this)},i.invalidate=function(){var e=this._first;for(this._lock=0;e;)e.invalidate(),e=e._next;return t.prototype.invalidate.call(this)},i.clear=function(t){void 0===t&&(t=!0);for(var e,i=this._first;i;)e=i._next,this.remove(i),i=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Gt(this)},i.totalDuration=function(t){var e,i,n,r=0,s=this,a=s._last,o=Y;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(n=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,re(s,a,i-a._delay,1)._lock=0):o=i,i<0&&a._ts&&(r-=i,(!n&&!s._dp||n&&n.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),o=0),a._end>r&&a._ts&&(r=a._end),a=e;he(s,s===d&&s._time>r?s._time:r,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(d._ts&&(Ft(d,te(t,d)),y=Xe.frame),Xe.frame>=Ot){Ot+=N.autoSleep||120;var e=d._first;if((!e||!e._ts)&&N.autoSleep&&Xe._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Xe.sleep()}}},e}(ii);Nt(ni.prototype,{_lock:0,_hasPause:0,_forcing:0});var ri,si,ai=function(t,e,i,n,r,s,a){var o,u,h,l,c,f,p,d,m=new Ci(this._pt,t,e,0,1,xi,null,r),g=0,_=0;for(m.b=i,m.e=n,i+="",(p=~(n+="").indexOf("random("))&&(n=Ee(n)),s&&(s(d=[i,n],t,e),i=d[0],n=d[1]),u=i.match(lt)||[];o=lt.exec(n);)l=o[0],c=n.substring(g,o.index),h?h=(h+1)%5:"rgba("===c.substr(-5)&&(h=1),l!==u[_++]&&(f=parseFloat(u[_-1])||0,m._pt={_next:m._pt,p:c||1===_?c:",",s:f,c:"="===l.charAt(1)?Bt(f,l)-f:parseFloat(l)-f,m:h&&h<4?Math.round:0},g=lt.lastIndex);return m.c=g0&&!M&&(e._startAt=0),A&&i<=0)return void(i&&(e._zTime=i))}else!1===M&&(e._startAt=0);else if(O&&A)if(D)!M&&(e._startAt=0);else if(i&&(w=!1),s=Nt({overwrite:!1,data:"isFromStart",lazy:w&&it(x),immediateRender:w,stagger:0,parent:L},n),g&&(s[l.prop]=g),Qt(e._startAt=di.set(P,s)),i<0&&e._startAt.render(-1,!0),e._zTime=i,w){if(!i)return}else t(e._startAt,j);for(e._pt=e._ptCache=0,x=A&&it(x)||x&&!A,r=0;r")}));else{for(l in u={},T)"ease"===l||"easeEach"===l||li(l,T[l],u,T.easeEach);for(l in u)for(M=u[l].sort((function(t,e){return t.t-e.t})),P=0,o=0;op-j&&t>=0?p:td&&(n=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,n=d-n),o=Kt(this._tTime,a),n===f&&!i&&this._initted)return this._tTime=m,this;s!==o&&(l&&this._yEase&&Ge(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(It(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(ae(this,t<0?t:n,i,e))return this._tTime=0,this;if(f!==this._time)return this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=m,this._time=n,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(c||this._ease)(n/d),this._from&&(this.ratio=h=1-h),n&&!f&&!e&&(Ae(this,"onStart"),this._tTime!==m))return this;for(r=this._pt;r;)r.r(h,r.d),r=r._next;l&&l.render(t<0?t:!n&&u?-1e-8:l._dur*l._ease(n/this._dur),e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),Ae(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&Ae(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(m===this._tDur&&this._ts>0||!m&&this._ts<0)&&Qt(this,1),e||t<0&&!f||!m&&!f||(Ae(this,m===p?"onComplete":"onReverseComplete",!0),this._prom&&!(m0)&&this._prom()))}}else!function(t,e,i,n){var r,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&oe(t)&&(t._initted||!ue(t))||(t._ts<0||t._dp._ts<0)&&!ue(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=me(0,t._tDur,e),s=Kt(l,h),t._yoyo&&1&s&&(u=1-u),s!==Kt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||n||t._zTime===j||!e&&t._zTime){if(!t._initted&&ae(t,e,n,i))return;for(a=t._zTime,t._zTime=e||(i?j:0),i||(i=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,r=t._pt;r;)r.r(u,r.d),r=r._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&Ae(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&Ae(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Qt(t,1),i||(Ae(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,i);return this},i.targets=function(){return this._targets},i.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)},i.resetTo=function(t,e,i,n){w||Xe.wake(),this._ts||this.play();var r=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||hi(this,r),function(t,e,i,n,r,s,a){var o,u,h,l=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!l)for(l=t._ptCache[e]=[],u=t._ptLookup,h=t._targets.length;h--;){if((o=u[h][e])&&o.d&&o.d._pt)for(o=o.d._pt;o&&o.p!==e;)o=o._next;if(!o)return si=1,t.vars[e]="+=0",hi(t,a),si=0,1;l.push(o)}for(h=l.length;h--;)(o=l[h]).s=!n&&0!==n||r?o.s+(n||0)+s*o.c:n,o.c=i-o.s,o.e&&(o.e=Lt(i)+ge(o.e)),o.b&&(o.b=o.s+ge(o.b))}(this,t,e,i,n,this._ease(r/this._dur),r)?this.resetTo(t,e,i,n):(ie(this,0),this.parent||Wt(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},i.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?De(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,ri&&!0!==ri.vars.overwrite)._first||De(this),this.parent&&i!==this.timeline.totalDuration()&&he(this,this._dur*this.timeline._tDur/i,0,1),this}var n,r,s,a,o,u,h,l=this._targets,c=t?be(t):l,f=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,n=i===e.length;n&&i--&&t[i]===e[i];);return i<0}(l,c))return"all"===e&&(this._pt=0),De(this);for(n=this._op=this._op||[],"all"!==e&&($(e)&&(o={},Pt(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,n,r,s,a=t[0]?At(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(n in i=Xt({},e),o)if(n in i)for(r=(s=o[n].split(",")).length;r--;)i[s[r]]=i[n];return i}(l,e)),h=l.length;h--;)if(~c.indexOf(l[h]))for(o in r=f[h],"all"===e?(n[h]=e,a=r,s={}):(s=n[h]=n[h]||{},a=e),a)(u=r&&r[o])&&("kill"in u.d&&!0!==u.d.kill(o)||Ht(this,u,"_pt"),delete r[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&De(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return pe(1,arguments)},e.delayedCall=function(t,i,n,r){return new e(i,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:i,onReverseComplete:i,onCompleteParams:n,onReverseCompleteParams:n,callbackScope:r})},e.fromTo=function(t,e,i){return pe(2,arguments)},e.set=function(t,i){return i.duration=0,i.repeatDelay||(i.repeat=0),new e(t,i)},e.killTweensOf=function(t,e,i){return d.killTweensOf(t,e,i)},e}(ii);Nt(di.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Pt("staggerTo,staggerFrom,staggerFromTo",(function(t){di[t]=function(){var e=new ni,i=_e.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var mi=function(t,e,i){return t[e]=i},gi=function(t,e,i){return t[e](i)},_i=function(t,e,i,n){return t[e](n.fp,i)},vi=function(t,e,i){return t.setAttribute(e,i)},yi=function(t,e){return J(t[e])?gi:tt(t[e])&&t.setAttribute?vi:mi},bi=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},wi=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},xi=function(t,e){var i=e._pt,n="";if(!t&&e.b)n=e.b;else if(1===t&&e.e)n=e.e;else{for(;i;)n=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+n,i=i._next;n+=e.c}e.set(e.t,e.p,n,e)},Ti=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},Si=function(t,e,i,n){for(var r,s=this._pt;s;)r=s._next,s.p===n&&s.modifier(t,e,i),s=r},ki=function(t){for(var e,i,n=this._pt;n;)i=n._next,n.p===t&&!n.op||n.op===t?Ht(this,n,"_pt"):n.dep||(e=1),n=i;return!e},Oi=function(t,e,i,n){n.mSet(t,e,n.m.call(n.tween,i,n.mt),n)},Ei=function(t){for(var e,i,n,r,s=t._pt;s;){for(e=s._next,i=n;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:r)?s._prev._next=s:n=s,(s._next=i)?i._prev=s:r=s,s=e}t._pt=n},Ci=function(){function t(t,e,i,n,r,s,a,o,u){this.t=e,this.s=n,this.c=r,this.p=i,this.r=s||bi,this.d=a||this,this.set=o||mi,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,i){this.mSet=this.mSet||this.set,this.set=Oi,this.m=t,this.mt=i,this.tween=e},t}();Pt(Ct+"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 wt[t]=1})),dt.TweenMax=dt.TweenLite=di,dt.TimelineLite=dt.TimelineMax=ni,d=new ni({sortChildren:!1,defaults:X,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),N.stringFilter=Ne;var Mi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var n=t.map((function(t){return Pi.quickSetter(t,e,i)})),r=n.length;return function(t){for(var e=r;e--;)n[e](t)}}t=t[0]||{};var s=St[e],a=At(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var n=new s;b._pt=0,n.init(t,i?e+i:e,b,0,[t]),n.render(1,n),b._pt&&Ti(1,b)}:a.set(t,o);return s?u:function(e){return u(t,o,i?e+i:e,a,1)}},quickTo:function(t,e,i){var n,r=Pi.to(t,Xt(((n={})[e]="+=0.1",n.paused=!0,n),i||{})),s=function(t,i,n){return r.resetTo(e,t,i,n)};return s.tween=r,s},isTweening:function(t){return d.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ze(t.ease,X.ease)),Yt(X,t||{})},config:function(t){return Yt(N,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,n=t.plugins,r=t.defaults,s=t.extendTimeline;(n||"").split(",").forEach((function(t){return t&&!St[t]&&!dt[t]&&vt(e+" effect requires "+t+" plugin.")})),kt[e]=function(t,e,n){return i(be(t),Nt(e||{},r),n)},s&&(ni.prototype[e]=function(t,i,n){return this.add(kt[e](t,et(i)?i:(n=i)&&{},this),n)})},registerEase:function(t,e){je[t]=Ze(e)},parseEase:function(t,e){return arguments.length?Ze(t,e):je},getById:function(t){return d.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,n,r=new ni(t);for(r.smoothChildTiming=it(t.smoothChildTiming),d.remove(r),r._dp=0,r._time=r._tTime=d._time,i=d._first;i;)n=i._next,!e&&!i._dur&&i instanceof di&&i.vars.onComplete===i._targets[0]||re(r,i,i._start-i._delay),i=n;return re(d,r,0),r},utils:{wrap:function t(e,i,n){var r=i-e;return at(e)?Oe(e,t(0,e.length),i):de(n,(function(t){return(r+(t-e)%r)%r+e}))},wrapYoyo:function t(e,i,n){var r=i-e,s=2*r;return at(e)?Oe(e,t(0,e.length-1),i):de(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>r?s-t:t)}))},distribute:xe,random:ke,snap:Se,normalize:function(t,e,i){return Ce(t,e,0,1,i)},getUnit:ge,clamp:function(t,e,i){return de(i,(function(i){return me(t,e,i)}))},splitColor:Re,toArray:be,selector:function(t){return t=be(t)[0]||vt("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return be(e,i.querySelectorAll?i:i===t?vt("Invalid scope")||_.createElement("div"):t)}},mapRange:Ce,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?cn[r]:"")+t},pn=function(){"undefined"!=typeof window&&window.document&&(Li=window,Ii=Li.document,Bi=Ii.documentElement,zi=hn("div")||{style:{}},hn("div"),on=fn(on),un=on+"Origin",zi.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Vi=!!fn("perspective"),Ri=1)},dn=function t(e){var i,n=hn("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),r=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Bi.appendChild(n),n.appendChild(this),this.style.display="block",e)try{i=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(i=this._gsapBBox());return r&&(s?r.insertBefore(this,s):r.appendChild(this)),Bi.removeChild(n),this.style.cssText=a,i},mn=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},gn=function(t){var e;try{e=t.getBBox()}catch(i){e=dn.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===dn||(e=dn.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+mn(t,["x","cx","x1"])||0,y:+mn(t,["y","cy","y1"])||0,width:0,height:0}},_n=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!gn(t))},vn=function(t,e){if(e){var i=t.style;e in qi&&e!==un&&(e=on),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(ji,"-$1").toLowerCase())):i.removeAttribute(e)}},yn=function(t,e,i,n,r,s){var a=new Ci(t._pt,e,i,0,1,s?Ki:Ji);return t._pt=a,a.b=n,a.e=r,t._props.push(i),a},bn={deg:1,rad:1,turn:1},wn=function t(e,i,n,r){var s,a,o,u,h=parseFloat(n)||0,l=(n+"").trim().substr((h+"").length)||"px",c=zi.style,f=Ui.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),m=100,g="px"===r,_="%"===r;return r===l||!h||bn[r]||bn[l]?h:("px"!==l&&!g&&(h=t(e,i,n,"px")),u=e.getCTM&&_n(e),!_&&"%"!==l||!qi[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=m+(g?l:r),a=~i.indexOf("adius")||"em"===r&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==Ii&&a.appendChild||(a=Ii.body),(o=a._gsap)&&_&&o.width&&f&&o.time===Xe.time?Lt(h/o.width*m):((_||"%"===l)&&(c.position=ln(e,"position")),a===e&&(c.position="static"),a.appendChild(zi),s=zi[d],a.removeChild(zi),c.position="absolute",f&&_&&((o=At(a)).time=Xe.time,o.width=a[d]),Lt(g?s*h/m:s&&h?m/s*h:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],Lt(_?h/s*m:h/100*s)))},xn=function(t,e,i,n){var r;return Ri||pn(),e in Hi&&"transform"!==e&&~(e=Hi[e]).indexOf(",")&&(e=e.split(",")[0]),qi[e]&&"transform"!==e?(r=Ln(t,n),r="transformOrigin"!==e?r[e]:r.svg?r.origin:In(ln(t,un))+" "+r.zOrigin+"px"):(!(r=t.style[e])||"auto"===r||n||~(r+"").indexOf("calc("))&&(r=On[e]&&On[e](t,e,i)||ln(t,e)||Dt(t,e)||("opacity"===e?1:0)),i&&!~(r+"").trim().indexOf(" ")?wn(t,e,r,i)+i:r},Tn=function(t,e,i,n){if(!i||"none"===i){var r=fn(e,t,1),s=r&&ln(t,r,1);s&&s!==i?(e=r,i=s):"borderColor"===e&&(i=ln(t,"borderTopColor"))}var a,o,u,h,l,c,f,p,d,m,g,_=new Ci(this._pt,t.style,e,0,1,xi),v=0,y=0;if(_.b=i,_.e=n,i+="","auto"===(n+="")&&(t.style[e]=n,n=ln(t,e)||n,t.style[e]=i),Ne(a=[i,n]),n=a[1],u=(i=a[0]).match(ht)||[],(n.match(ht)||[]).length){for(;o=ht.exec(n);)f=o[0],d=n.substring(v,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),f!==(c=u[y++]||"")&&(h=parseFloat(c)||0,g=c.substr((h+"").length),"="===f.charAt(1)&&(f=Bt(h,f)+g),p=parseFloat(f),m=f.substr((p+"").length),v=ht.lastIndex-m.length,m||(m=m||N.units[e]||g,v===n.length&&(n+=m,_.e+=m)),g!==m&&(h=wn(t,e,c,m)||0),_._pt={_next:_._pt,p:d||1===y?d:",",s:h,c:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});_.c=v-1;)i=o[r],qi[i]&&(n=1,i="transformOrigin"===i?un:on),vn(s,i);n&&(vn(s,on),u&&(u.svg&&s.removeAttribute("transform"),Ln(s,1),u.uncache=1))}},On={clearProps:function(t,e,i,n,r){if("isFromStart"!==r.data){var s=t._pt=new Ci(t._pt,e,i,0,0,kn);return s.u=n,s.pr=-10,s.tween=r,t._props.push(i),1}}},En=[1,0,0,1,0,0],Cn={},Mn=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},An=function(t){var e=ln(t,on);return Mn(e)?En:e.substr(7).match(ut).map(Lt)},Dn=function(t,e){var i,n,r,s,a=t._gsap||At(t),o=t.style,u=An(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(r=t.transform.baseVal.consolidate().matrix).a,r.b,r.c,r.d,r.e,r.f]).join(",")?En:u:(u!==En||t.offsetParent||t===Bi||a.svg||(r=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,Bi.appendChild(t)),u=An(t),r?o.display=r:vn(t,"display"),s&&(n?i.insertBefore(t,n):i?i.appendChild(t):Bi.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},Pn=function(t,e,i,n,r,s){var a,o,u,h=t._gsap,l=r||Dn(t,!0),c=h.xOrigin||0,f=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,m=l[0],g=l[1],_=l[2],v=l[3],y=l[4],b=l[5],w=e.split(" "),x=parseFloat(w[0])||0,T=parseFloat(w[1])||0;i?l!==En&&(o=m*v-g*_)&&(u=x*(-g/o)+T*(m/o)-(m*b-g*y)/o,x=x*(v/o)+T*(-_/o)+(_*b-v*y)/o,T=u):(x=(a=gn(t)).x+(~w[0].indexOf("%")?x/100*a.width:x),T=a.y+(~(w[1]||w[0]).indexOf("%")?T/100*a.height:T)),n||!1!==n&&h.smooth?(y=x-c,b=T-f,h.xOffset=p+(y*m+b*_)-y,h.yOffset=d+(y*g+b*v)-b):h.xOffset=h.yOffset=0,h.xOrigin=x,h.yOrigin=T,h.smooth=!!n,h.origin=e,h.originIsAbsolute=!!i,t.style[un]="0px 0px",s&&(yn(s,h,"xOrigin",c,x),yn(s,h,"yOrigin",f,T),yn(s,h,"xOffset",p,h.xOffset),yn(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",x+" "+T)},Ln=function(t,e){var i=t._gsap||new ei(t);if("x"in i&&!e&&!i.uncache)return i;var n,r,s,a,o,u,h,l,c,f,p,d,m,g,_,v,y,b,w,x,T,S,k,O,E,C,M,A,D,P,L,I,B=t.style,R=i.scaleX<0,z="px",F="deg",V=ln(t,un)||"0";return n=r=s=u=h=l=c=f=p=0,a=o=1,i.svg=!(!t.getCTM||!_n(t)),g=Dn(t,i.svg),i.svg&&(O=(!i.uncache||"0px 0px"===V)&&!e&&t.getAttribute("data-svg-origin"),Pn(t,O||V,!!O||i.originIsAbsolute,!1!==i.smooth,g)),d=i.xOrigin||0,m=i.yOrigin||0,g!==En&&(b=g[0],w=g[1],x=g[2],T=g[3],n=S=g[4],r=k=g[5],6===g.length?(a=Math.sqrt(b*b+w*w),o=Math.sqrt(T*T+x*x),u=b||w?Yi(w,b)*Ni:0,(c=x||T?Yi(x,T)*Ni+u:0)&&(o*=Math.abs(Math.cos(c*Xi))),i.svg&&(n-=d-(d*b+m*x),r-=m-(d*w+m*T))):(I=g[6],P=g[7],M=g[8],A=g[9],D=g[10],L=g[11],n=g[12],r=g[13],s=g[14],h=(_=Yi(I,D))*Ni,_&&(O=S*(v=Math.cos(-_))+M*(y=Math.sin(-_)),E=k*v+A*y,C=I*v+D*y,M=S*-y+M*v,A=k*-y+A*v,D=I*-y+D*v,L=P*-y+L*v,S=O,k=E,I=C),l=(_=Yi(-x,D))*Ni,_&&(v=Math.cos(-_),L=T*(y=Math.sin(-_))+L*v,b=O=b*v-M*y,w=E=w*v-A*y,x=C=x*v-D*y),u=(_=Yi(w,b))*Ni,_&&(O=b*(v=Math.cos(_))+w*(y=Math.sin(_)),E=S*v+k*y,w=w*v-b*y,k=k*v-S*y,b=O,S=E),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=Lt(Math.sqrt(b*b+w*w+x*x)),o=Lt(Math.sqrt(k*k+I*I)),_=Yi(S,k),c=Math.abs(_)>2e-4?_*Ni:0,p=L?1/(L<0?-L:L):0),i.svg&&(O=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!Mn(ln(t,on)),O&&t.setAttribute("transform",O))),Math.abs(c)>90&&Math.abs(c)<270&&(R?(a*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,c+=c<=0?180:-180)),e=e||i.uncache,i.x=n-((i.xPercent=n&&(!e&&i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-n)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+z,i.y=r-((i.yPercent=r&&(!e&&i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-r)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+z,i.z=s+z,i.scaleX=Lt(a),i.scaleY=Lt(o),i.rotation=Lt(u)+F,i.rotationX=Lt(h)+F,i.rotationY=Lt(l)+F,i.skewX=c+F,i.skewY=f+F,i.transformPerspective=p+z,(i.zOrigin=parseFloat(V.split(" ")[2])||0)&&(B[un]=In(V)),i.xOffset=i.yOffset=0,i.force3D=N.force3D,i.renderTransform=i.svg?Nn:Vi?qn:Rn,i.uncache=0,i},In=function(t){return(t=t.split(" "))[0]+" "+t[1]},Bn=function(t,e,i){var n=ge(e);return Lt(parseFloat(e)+parseFloat(wn(t,"x",i+"px",n)))+n},Rn=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,qn(t,e)},zn="0deg",Fn="0px",Vn=") ",qn=function(t,e){var i=e||this,n=i.xPercent,r=i.yPercent,s=i.x,a=i.y,o=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,m=i.transformPerspective,g=i.force3D,_=i.target,v=i.zOrigin,y="",b="auto"===g&&t&&1!==t||!0===g;if(v&&(l!==zn||h!==zn)){var w,x=parseFloat(h)*Xi,T=Math.sin(x),S=Math.cos(x);x=parseFloat(l)*Xi,w=Math.cos(x),s=Bn(_,s,T*w*-v),a=Bn(_,a,-Math.sin(x)*-v),o=Bn(_,o,S*w*-v+v)}m!==Fn&&(y+="perspective("+m+Vn),(n||r)&&(y+="translate("+n+"%, "+r+"%) "),(b||s!==Fn||a!==Fn||o!==Fn)&&(y+=o!==Fn||b?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+Vn),u!==zn&&(y+="rotate("+u+Vn),h!==zn&&(y+="rotateY("+h+Vn),l!==zn&&(y+="rotateX("+l+Vn),c===zn&&f===zn||(y+="skew("+c+", "+f+Vn),1===p&&1===d||(y+="scale("+p+", "+d+Vn),_.style[on]=y||"translate(0, 0)"},Nn=function(t,e){var i,n,r,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,c=o.y,f=o.rotation,p=o.skewX,d=o.skewY,m=o.scaleX,g=o.scaleY,_=o.target,v=o.xOrigin,y=o.yOrigin,b=o.xOffset,w=o.yOffset,x=o.forceCSS,T=parseFloat(l),S=parseFloat(c);f=parseFloat(f),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),f+=d),f||p?(f*=Xi,p*=Xi,i=Math.cos(f)*m,n=Math.sin(f)*m,r=Math.sin(f-p)*-g,s=Math.cos(f-p)*g,p&&(d*=Xi,a=Math.tan(p-d),r*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),i*=a=Math.sqrt(1+a*a),n*=a)),i=Lt(i),n=Lt(n),r=Lt(r),s=Lt(s)):(i=m,s=g,n=r=0),(T&&!~(l+"").indexOf("px")||S&&!~(c+"").indexOf("px"))&&(T=wn(_,"x",l,"px"),S=wn(_,"y",c,"px")),(v||y||b||w)&&(T=Lt(T+v-(v*i+y*r)+b),S=Lt(S+y-(v*n+y*s)+w)),(u||h)&&(a=_.getBBox(),T=Lt(T+u/100*a.width),S=Lt(S+h/100*a.height)),a="matrix("+i+","+n+","+r+","+s+","+T+","+S+")",_.setAttribute("transform",a),x&&(_.style[on]=a)},Xn=function(t,e,i,n,r){var s,a,o=360,u=$(r),h=parseFloat(r)*(u&&~r.indexOf("rad")?Ni:1)-n,l=n+h+"deg";return u&&("short"===(s=r.split("_")[1])&&(h%=o)!==h%180&&(h+=h<0?o:-360),"cw"===s&&h<0?h=(h+36e9)%o-~~(h/o)*o:"ccw"===s&&h>0&&(h=(h-36e9)%o-~~(h/o)*o)),t._pt=a=new Ci(t._pt,e,i,n,h,Gi),a.e=l,a.u="deg",t._props.push(i),a},Yn=function(t,e){for(var i in e)t[i]=e[i];return t},jn=function(t,e,i){var n,r,s,a,o,u,h,l=Yn({},i._gsap),c=i.style;for(r in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[on]=e,n=Ln(i,1),vn(i,on),i.setAttribute("transform",s)):(s=getComputedStyle(i)[on],c[on]=e,n=Ln(i,1),c[on]=s),qi)(s=l[r])!==(a=n[r])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(r)<0&&(o=ge(s)!==(h=ge(a))?wn(i,r,s,h):parseFloat(s),u=parseFloat(a),t._pt=new Ci(t._pt,n,r,o,u-o,Qi),t._pt.u=h||0,t._props.push(r));Yn(n,l)};Pt("padding,margin,Width,Radius",(function(t,e){var i="Top",n="Right",r="Bottom",s="Left",a=(e<3?[i,n,r,s]:[i+s,i+n,r+n,r+s]).map((function(i){return e<2?t+i:"border"+i+t}));On[e>1?"border"+t:t]=function(t,e,i,n,r){var s,o;if(arguments.length<4)return s=a.map((function(e){return xn(t,e,i)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(n+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,r)}}));var Un,Wn,Hn,Qn={name:"css",register:pn,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,n,r){var s,a,o,u,h,c,f,p,d,m,g,_,v,y,b,w,x,T,S,k=this._props,O=t.style,E=i.vars.startAt;for(f in Ri||pn(),e)if("autoRound"!==f&&(a=e[f],!St[f]||!ui(f,e,i,n,t,r)))if(h=void 0===a?"undefined":l(a),c=On[f],"function"===h&&(h=void 0===(a=a.call(i,n,t,r))?"undefined":l(a)),"string"===h&&~a.indexOf("random(")&&(a=Ee(a)),c)c(this,t,f,a,i)&&(b=1);else if("--"===f.substr(0,2))s=(getComputedStyle(t).getPropertyValue(f)+"").trim(),a+="",Ve.lastIndex=0,Ve.test(s)||(p=ge(s),d=ge(a)),d?p!==d&&(s=wn(t,f,s,d)+d):p&&(a+=p),this.add(O,"setProperty",s,a,n,r,0,0,f),k.push(f);else if("undefined"!==h){if(E&&f in E?(s="function"==typeof E[f]?E[f].call(i,n,t,r):E[f],$(s)&&~s.indexOf("random(")&&(s=Ee(s)),ge(s+"")||(s+=N.units[f]||ge(xn(t,f))||""),"="===(s+"").charAt(1)&&(s=xn(t,f))):s=xn(t,f),u=parseFloat(s),(m="string"===h&&"="===a.charAt(1)&&a.substr(0,2))&&(a=a.substr(2)),o=parseFloat(a),f in Hi&&("autoAlpha"===f&&(1===u&&"hidden"===xn(t,"visibility")&&o&&(u=0),yn(this,O,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==f&&"transform"!==f&&~(f=Hi[f]).indexOf(",")&&(f=f.split(",")[0])),g=f in qi)if(_||((v=t._gsap).renderTransform&&!e.parseTransform||Ln(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(_=this._pt=new Ci(this._pt,O,on,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===f)this._pt=new Ci(this._pt,v,"scaleY",v.scaleY,(m?Bt(v.scaleY,m+o):o)-v.scaleY||0),k.push("scaleY",f),f+="X";else{if("transformOrigin"===f){x=void 0,T=void 0,S=void 0,x=(w=a).split(" "),T=x[0],S=x[1]||"50%","top"!==T&&"bottom"!==T&&"left"!==S&&"right"!==S||(w=T,T=S,S=w),x[0]=Sn[T]||T,x[1]=Sn[S]||S,a=x.join(" "),v.svg?Pn(t,a,0,y,0,this):((d=parseFloat(a.split(" ")[2])||0)!==v.zOrigin&&yn(this,v,"zOrigin",v.zOrigin,d),yn(this,O,f,In(s),In(a)));continue}if("svgOrigin"===f){Pn(t,a,1,y,0,this);continue}if(f in Cn){Xn(this,v,f,u,m?Bt(u,m+a):a);continue}if("smoothOrigin"===f){yn(this,v,"smooth",v.smooth,a);continue}if("force3D"===f){v[f]=a;continue}if("transform"===f){jn(this,a,t);continue}}else f in O||(f=fn(f)||f);if(g||(o||0===o)&&(u||0===u)&&!Wi.test(a)&&f in O)o||(o=0),(p=(s+"").substr((u+"").length))!==(d=ge(a)||(f in N.units?N.units[f]:p))&&(u=wn(t,f,s,d)),this._pt=new Ci(this._pt,g?v:O,f,u,(m?Bt(u,m+o):o)-u,g||"px"!==d&&"zIndex"!==f||!1===e.autoRound?Qi:$i),this._pt.u=d||0,p!==d&&"%"!==d&&(this._pt.b=s,this._pt.r=Zi);else if(f in O)Tn.call(this,t,f,s,m?m+a:a);else{if(!(f in t)){_t(f,a);continue}this.add(t,f,s||t[f],m?m+a:a,n,r)}k.push(f)}b&&Ei(this)},get:xn,aliases:Hi,getSetter:function(t,e,i){var n=Hi[e];return n&&n.indexOf(",")<0&&(e=n),e in qi&&e!==un&&(t._gsap.x||xn(t,"x"))?i&&Fi===i?"scale"===e?rn:nn:(Fi=i||{},"scale"===e?sn:an):t.style&&!tt(t.style[e])?tn:~e.indexOf("-")?en:yi(t,e)},core:{_removeProperty:vn,_getMatrix:Dn}};Pi.utils.checkPrefix=fn,Hn=Pt((Un="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Wn="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){qi[t]=1})),Pt(Wn,(function(t){N.units[t]="deg",Cn[t]=1})),Hi[Hn[13]]=Un+","+Wn,Pt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Hi[e[1]]=Hn[e[0]]})),Pt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){N.units[t]="px"})),Pi.registerPlugin(Qn);var Gn=Pi.registerPlugin(Qn)||Pi,Zn=(Gn.core.Tween,function(t,e,i){return(1-i)*t+i*e}),$n={x:0,y:0};window.addEventListener("mousemove",(function(t){return $n=function(t){return{x:t.clientX,y:t.clientY}}(t)}));var Jn=function(){"use strict";function t(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"a",n=this;r(this,t),o(this,"DOM",{elements:null}),o(this,"cursorElements",[]),this.DOM.elements=e,h(this.DOM.elements).forEach((function(t){return n.cursorElements.push(new Kn(t))})),h(document.querySelectorAll(i)).forEach((function(t){var e=n;t.addEventListener("mouseenter",(function(){return e.enter()})),t.addEventListener("mouseleave",(function(){return e.leave()}))}))}return a(t,[{key:"enter",value:function(){var t=!0,e=!1,i=void 0;try{for(var n,r=this.cursorElements[Symbol.iterator]();!(t=(n=r.next()).done);t=!0){n.value.enter()}}catch(t){e=!0,i=t}finally{try{t||null==r.return||r.return()}finally{if(e)throw i}}}},{key:"leave",value:function(){var t=!0,e=!1,i=void 0;try{for(var n,r=this.cursorElements[Symbol.iterator]();!(t=(n=r.next()).done);t=!0){n.value.leave()}}catch(t){e=!0,i=t}finally{try{t||null==r.return||r.return()}finally{if(e)throw i}}}}]),t}(),Kn=function(){"use strict";function t(e){var i=this;for(var n in r(this,t),o(this,"DOM",{el:null,inner:null,feTurbulence:null}),o(this,"radiusOnEnter",30),o(this,"opacityOnEnter",1),o(this,"radius",void 0),o(this,"renderedStyles",{tx:{previous:0,current:0,amt:.2},ty:{previous:0,current:0,amt:.2},radius:{previous:20,current:20,amt:.2},opacity:{previous:1,current:1,amt:.2}}),o(this,"bounds",void 0),o(this,"filterId","#cursor-filter"),o(this,"primitiveValues",{turbulence:0}),this.DOM.el=e,this.DOM.inner=this.DOM.el.querySelector(".cursor__inner"),this.DOM.feTurbulence=document.querySelector("".concat(this.filterId," > feTurbulence")),this.createFilterTimeline(),this.DOM.el.style.opacity=0,this.bounds=this.DOM.el.getBoundingClientRect(),this.radiusOnEnter=this.DOM.el.dataset.radiusEnter||this.radiusOnEnter,this.opacityOnEnter=this.DOM.el.dataset.opacityEnter||this.opacityOnEnter,this.renderedStyles)this.renderedStyles[n].amt=this.DOM.el.dataset.amt||this.renderedStyles[n].amt;this.radius=this.DOM.inner.getAttribute("r"),this.renderedStyles.radius.previous=this.renderedStyles.radius.current=this.radius;var s=function(){var t=i;i.renderedStyles.tx.previous=i.renderedStyles.tx.current=$n.x-i.bounds.width/2,i.renderedStyles.ty.previous=i.renderedStyles.ty.previous=$n.y-i.bounds.height/2,i.DOM.el.style.opacity=1,requestAnimationFrame((function(){return t.render()})),window.removeEventListener("mousemove",s)};window.addEventListener("mousemove",s)}return a(t,[{key:"enter",value:function(){this.renderedStyles.radius.current=this.radiusOnEnter,this.renderedStyles.opacity.current=this.opacityOnEnter,this.filterTimeline.restart()}},{key:"leave",value:function(){this.renderedStyles.radius.current=this.radius,this.renderedStyles.opacity.current=1,this.filterTimeline.progress(1).kill()}},{key:"createFilterTimeline",value:function(){var t=this;this.filterTimeline=Gn.timeline({paused:!0,onStart:function(){t.DOM.inner.style.filter="url(".concat(t.filterId)},onUpdate:function(){t.DOM.feTurbulence.setAttribute("baseFrequency",t.primitiveValues.turbulence)},onComplete:function(){t.DOM.inner.style.filter="none"}}).to(this.primitiveValues,{duration:3,ease:"none",repeat:-1,yoyo:!0,startAt:{turbulence:.15},turbulence:.13})}},{key:"render",value:function(){var t=this;for(var e in this.renderedStyles.tx.current=$n.x-this.bounds.width/2,this.renderedStyles.ty.current=$n.y-this.bounds.height/2,this.renderedStyles)this.renderedStyles[e].previous=Zn(this.renderedStyles[e].previous,this.renderedStyles[e].current,this.renderedStyles[e].amt);this.DOM.el.style.transform="translateX(".concat(this.renderedStyles.tx.previous,"px) translateY(").concat(this.renderedStyles.ty.previous,"px)"),this.DOM.inner.setAttribute("r",this.renderedStyles.radius.previous),this.DOM.el.style.opacity=this.renderedStyles.opacity.previous,requestAnimationFrame((function(){return t.render()}))}}]),t}(),tr={}; 11 | /*! 12 | * imagesLoaded v5.0.0 13 | * JavaScript is all like "You images are done yet or what?" 14 | * MIT License 15 | */ 16 | !function(t,e){tr?tr=e(t,n("hobco")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:void 0,(function(t,e){var i=t.jQuery,n=t.console;function r(t,e,s){if(!(this instanceof r))return new r(t,e,s);var a,o=t;("string"==typeof t&&(o=document.querySelectorAll(t)),o)?(this.elements=(a=o,Array.isArray(a)?a:"object"==typeof a&&"number"==typeof a.length?h(a):[a]),this.options={},"function"==typeof e?s=e:Object.assign(this.options,e),s&&this.on("always",s),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):n.error("Bad element for imagesLoaded ".concat(o||t))}r.prototype=Object.create(e.prototype),r.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};var s=[1,9,11];r.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&s.includes(e)){var i=t.querySelectorAll("img"),n=!0,r=!1,a=void 0;try{for(var o,u=i[Symbol.iterator]();!(n=(o=u.next()).done);n=!0){var h=o.value;this.addImage(h)}}catch(t){r=!0,a=t}finally{try{n||null==u.return||u.return()}finally{if(r)throw a}}if("string"==typeof this.options.background){var l=t.querySelectorAll(this.options.background),c=!0,f=!1,p=void 0;try{for(var d,m=l[Symbol.iterator]();!(c=(d=m.next()).done);c=!0){var g=d.value;this.addElementBackgroundImages(g)}}catch(t){f=!0,p=t}finally{try{c||null==m.return||m.return()}finally{if(f)throw p}}}}};var a=/url\((['"])?(.*?)\1\)/gi;function o(t){this.img=t}function u(t,e){this.url=t,this.element=e,this.img=new Image}return r.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var i=a.exec(e.backgroundImage);null!==i;){var n=i&&i[2];n&&this.addBackground(n,t),i=a.exec(e.backgroundImage)}},r.prototype.addImage=function(t){var e=new o(t);this.images.push(e)},r.prototype.addBackground=function(t,e){var i=new u(t,e);this.images.push(i)},r.prototype.check=function(){var t=this;if(this.progressedCount=0,this.hasAnyBroken=!1,this.images.length){var e=function(e,i,n){var r=t;setTimeout((function(){r.progress(e,i,n)}))};this.images.forEach((function(t){t.once("progress",e),t.check()}))}else this.complete()},r.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&n&&n.log("progress: ".concat(i),t,e)},r.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},o.prototype=Object.create(e.prototype),o.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.img.crossOrigin&&(this.proxyImage.crossOrigin=this.img.crossOrigin),this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.currentSrc||this.img.src)},o.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},o.prototype.confirm=function(t,e){this.isLoaded=t;var i=this.img.parentNode,n="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,n,e])},o.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},o.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},o.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},o.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype=Object.create(o.prototype),u.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},u.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},r.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&((i=e).fn.imagesLoaded=function(t,e){return new r(this,t,e).jqDeferred.promise(i(this))})},r.makeJQueryPlugin(),r}));var er,ir,nr,rr,sr,ar,or,ur,hr,lr="transform",cr=lr+"Origin",fr=function(t){var e=t.ownerDocument||t;!(lr in t.style)&&"msTransform"in t.style&&(cr=(lr="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(ir=window,or=new Tr,e){er=e,nr=e.documentElement,rr=e.body,(ur=er.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),n=e.createElement("div");rr.appendChild(i),i.appendChild(n),i.style.position="static",i.style[lr]="translate3d(0,0,1px)",hr=n.offsetParent!==i,rr.removeChild(i)}return e},pr=[],dr=[],mr=function(){return ir.pageYOffset||er.scrollTop||nr.scrollTop||rr.scrollTop||0},gr=function(){return ir.pageXOffset||er.scrollLeft||nr.scrollLeft||rr.scrollLeft||0},_r=function(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)},vr=function t(e){return"fixed"===ir.getComputedStyle(e).position||((e=e.parentNode)&&1===e.nodeType?t(e):void 0)},yr=function t(e,i){if(e.parentNode&&(er||fr(e))){var n=_r(e),r=n?n.getAttribute("xmlns")||"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s=n?i?"rect":"g":"div",a=2!==i?0:100,o=3===i?100:0,u="position:absolute;display:block;pointer-events:none;margin:0;padding:0;",h=er.createElementNS?er.createElementNS(r.replace(/^https/,"http"),s):er.createElement(s);return i&&(n?(ar||(ar=t(e)),h.setAttribute("width",.01),h.setAttribute("height",.01),h.setAttribute("transform","translate("+a+","+o+")"),ar.appendChild(h)):(sr||((sr=t(e)).style.cssText=u),h.style.cssText=u+"width:0.1px;height:0.1px;top:"+o+"px;left:"+a+"px",sr.appendChild(h))),h}throw"Need document and parent."},br=function(t){var e,i=t.getCTM();return i||(e=t.style[lr],t.style[lr]="none",t.appendChild(ur),i=ur.getCTM(),t.removeChild(ur),e?t.style[lr]=e:t.style.removeProperty(lr.replace(/([A-Z])/g,"-$1").toLowerCase())),i||or.clone()},wr=function(t,e){var i,n,r,s,a,o,u=_r(t),h=t===u,l=u?pr:dr,c=t.parentNode;if(t===ir)return t;if(l.length||l.push(yr(t,1),yr(t,2),yr(t,3)),i=u?ar:sr,u)h?(s=-(r=br(t)).e/r.a,a=-r.f/r.d,n=or):(r=t.getBBox(),n=(n=t.transform?t.transform.baseVal:{}).numberOfItems?n.numberOfItems>1?function(t){for(var e=new Tr,i=0;i4&&(s=r.offsetLeft,a=r.offsetTop,r=0);if("absolute"!==(o=ir.getComputedStyle(t)).position&&"fixed"!==o.position)for(n=t.offsetParent;c&&c!==n;)s+=c.scrollLeft||0,a+=c.scrollTop||0,c=c.parentNode;(r=i.style).top=t.offsetTop-a+"px",r.left=t.offsetLeft-s+"px",r[lr]=o[lr],r[cr]=o[cr],r.position="fixed"===o.position?"fixed":"absolute",t.parentNode.appendChild(i)}return i},xr=function(t,e,i,n,r,s,a){return t.a=e,t.b=i,t.c=n,t.d=r,t.e=s,t.f=a,t},Tr=function(){function t(t,e,i,n,r,s){void 0===t&&(t=1),void 0===e&&(e=0),void 0===i&&(i=0),void 0===n&&(n=1),void 0===r&&(r=0),void 0===s&&(s=0),xr(this,t,e,i,n,r,s)}var e=t.prototype;return e.inverse=function(){var t=this.a,e=this.b,i=this.c,n=this.d,r=this.e,s=this.f,a=t*n-e*i||1e-10;return xr(this,n/a,-e/a,-i/a,t/a,(i*s-n*r)/a,-(t*s-e*r)/a)},e.multiply=function(t){var e=this.a,i=this.b,n=this.c,r=this.d,s=this.e,a=this.f,o=t.a,u=t.c,h=t.b,l=t.d,c=t.e,f=t.f;return xr(this,o*e+h*n,o*i+h*r,u*e+l*n,u*i+l*r,s+c*e+f*n,a+c*i+f*r)},e.clone=function(){return new t(this.a,this.b,this.c,this.d,this.e,this.f)},e.equals=function(t){var e=this.a,i=this.b,n=this.c,r=this.d,s=this.e,a=this.f;return e===t.a&&i===t.b&&n===t.c&&r===t.d&&s===t.e&&a===t.f},e.apply=function(t,e){void 0===e&&(e={});var i=t.x,n=t.y,r=this.a,s=this.b,a=this.c,o=this.d,u=this.e,h=this.f;return e.x=i*r+n*a+u||0,e.y=i*s+n*o+h||0,e},t}();function Sr(t,e,i,n){if(!t||!t.parentNode||(er||fr(t)).documentElement===t)return new Tr;var r=function(t){for(var e,i;t&&t!==rr;)(i=t._gsap)&&i.uncache&&i.get(t,"x"),i&&!i.scaleX&&!i.scaleY&&i.renderTransform&&(i.scaleX=i.scaleY=1e-4,i.renderTransform(1,i),e?e.push(i):e=[i]),t=t.parentNode;return e}(t),s=_r(t)?pr:dr,a=wr(t,i),o=s[0].getBoundingClientRect(),u=s[1].getBoundingClientRect(),h=s[2].getBoundingClientRect(),l=a.parentNode,c=!n&&vr(t),f=new Tr((u.left-o.left)/100,(u.top-o.top)/100,(h.left-o.left)/100,(h.top-o.top)/100,o.left+(c?0:gr()),o.top+(c?0:mr()));if(l.removeChild(a),r)for(o=r.length;o--;)(u=r[o]).scaleX=u.scaleY=0,u.renderTransform(1,u);return e?f.inverse():f}var kr,Or,Er,Cr,Mr,Ar,Dr,Pr=1,Lr=function(t,e){return t.actions.forEach((function(t){return t.vars[e]&&t.vars[e](t)}))},Ir={},Br=180/Math.PI,Rr=Math.PI/180,zr={},Fr={},Vr={},qr=function(t){return"string"==typeof t?t.split(" ").join("").split(","):t},Nr=qr("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),Xr=qr("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),Yr=function(t){return kr(t)[0]||console.warn("Element not found:",t)},jr=function(t){return Math.round(1e4*t)/1e4||0},Ur=function(t,e,i){return t.forEach((function(t){return t.classList[i](e)}))},Wr={zIndex:1,kill:1,simple:1,spin:1,clearProps:1,targets:1,toggleClass:1,onComplete:1,onUpdate:1,onInterrupt:1,onStart:1,delay:1,repeat:1,repeatDelay:1,yoyo:1,scale:1,fade:1,absolute:1,props:1,onEnter:1,onLeave:1,custom:1,paused:1,nested:1,prune:1,absoluteOnLeave:1},Hr={zIndex:1,simple:1,clearProps:1,scale:1,absolute:1,fitChild:1,getVars:1,props:1},Qr=function(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()},Gr=function(t,e){var i,n={};for(i in t)e[i]||(n[i]=t[i]);return n},Zr={},$r=function(t){var e=Zr[t]=qr(t);return Vr[t]=e.concat(Xr),e},Jr=function t(e,i,n){void 0===n&&(n=0);for(var r=e.parentNode,s=1e3*Math.pow(10,n)*(i?-1:1),a=i?900*-s:0;e;)a+=s,e=e.previousSibling;return r?a+t(r,i,n+1):a},Kr=function(t,e,i){return t.forEach((function(t){return t.d=Jr(i?t.element:t.t,e)})),t.sort((function(t,e){return t.d-e.d})),t},ts=function(t,e){for(var i,n,r=t.element.style,s=t.css=t.css||[],a=e.length;a--;)n=r[i=e[a]]||r.getPropertyValue(i),s.push(n?i:Fr[i]||(Fr[i]=Qr(i)),n);return r},es=function(t){var e=t.css,i=t.element.style,n=0;for(t.cache.uncache=1;n0&&B&&(u.style.opacity=G?g.opacity-_.opacity:"0"),cs(g,_,I,V)):_.isVisible!==g.isVisible&&(_.isVisible?g.isVisible||(_.css=g.css,j.push(_),U.splice(o--,1),T&&P&&cs(g,_,I,V)):(g.isVisible&&Y.push(g),U.splice(o--,1))),I||(u.style.maxWidth=Math.max(g.width,_.width)+"px",u.style.maxHeight=Math.max(g.height,_.height)+"px",u.style.minWidth=Math.min(g.width,_.width)+"px",u.style.minHeight=Math.min(g.height,_.height)+"px"),P&&D&&u.classList.add(D)):U.splice(o--,1),f.push(g);var e;if(D&&(e=f.map((function(t){return t.element})),P&&e.forEach((function(t){return t.classList.remove(D)}))),gs(!1),I?(q.scaleX=function(t){return U[t].a.scaleX},q.scaleY=function(t){return U[t].a.scaleY}):(q.width=function(t){return U[t].a.width+"px"},q.height=function(t){return U[t].a.height+"px"},q.autoRound=i.autoRound||!1),q.x=function(t){return U[t].a.x+"px"},q.y=function(t){return U[t].a.y+"px"},q.rotation=function(t){return U[t].a.rotation+(z?360*Q(t,c[t],c):0)},q.skewX=function(t){return U[t].a.skewX},c=U.map((function(t){return t.t})),(L||0===L)&&(q.modifiers={zIndex:function(){return L}},q.zIndex=L,q.immediateRender=!1!==i.immediateRender),B&&(q.opacity=function(t){return U[t].sd<0?0:U[t].sd>0?U[t].a.opacity:"+=0"}),W.length){R=Or.utils.distribute(R);var n=c.slice(W.length);q.stagger=function(t,e){return R(~W.indexOf(e)?c.indexOf(U[t].swap.t):t,e,n)}}if(Nr.forEach((function(t){return i[t]&&N.eventCallback(t,i[t],i[t+"Params"])})),k&&c.length)for(s in X=Gr(q,Wr),"scale"in k&&(k.scaleX=k.scaleY=k.scale,delete k.scale),k)(r=Gr(k[s],Hr))[s]=q[s],!("duration"in r)&&"duration"in q&&(r.duration=q.duration),r.stagger=q.stagger,Z.call(N,c,r,0),delete X[s];(c.length||j.length||Y.length)&&(D&&N.add((function(){return Ur(e,D,N._zTime<0?"remove":"add")}),0)&&!E&&Ur(e,D,"add"),c.length&&Z.call(N,c,X,0)),ls(w,Y,N),ls(x,j,N);var p=Er&&Er.timeline;p&&(p.add(N,0),Er._final.push((function(){return is(U,!b)}))),a=N.duration(),N.call((function(){var t=N.time()>=a;t&&!p&&is(U,!b),D&&Ur(e,D,t?"remove":"add")}))},S&&(T=U.filter((function(t){return!t.sd&&!t.a.isVisible&&t.b.isVisible})).map((function(t){return t.a.element}))),Er)?(T&&(v=Er._abs).push.apply(v,ss(U,T)),Er._run.push(m)):(T&&as(ss(U,T)),m());return Er?Er.timeline:N},vs=function t(e){e.vars.onInterrupt&&e.vars.onInterrupt.apply(e,e.vars.onInterruptParams||[]),e.getChildren(!0,!1,!0).forEach(t)},ys=function(t,e){if(t&&t.progress()<1&&!t.paused())return e&&(vs(t),e<2&&t.progress(1),t.kill()),!0},bs=function(t){for(var e,i=t.idLookup={},n=t.alt={},r=t.elementStates,s=r.length;s--;)i[(e=r[s]).id]?n[e.id]=e:i[e.id]=e},ws=function(){function t(t,e,i){if(this.props=e&&e.props,this.simple=!(!e||!e.simple),i)this.targets=hs(t),this.elementStates=t,bs(this);else{this.targets=kr(t);var n=e&&(!1===e.kill||e.batch&&!e.kill);Er&&!n&&Er._kill.push(this),this.update(n||!!Er)}}var e=t.prototype;return e.update=function(t){var e=this;return this.elementStates=this.targets.map((function(t){return new xs(t,e.props,e.simple)})),bs(this),this.interrupt(t),this.recordInlineStyles(),this},e.clear=function(){return this.targets.length=this.elementStates.length=0,bs(this),this},e.fit=function(t,e,i){for(var n,r,s=Kr(this.elementStates.slice(0),!1,!0),a=(t||this).idLookup,o=0;o=0&&this.actions.splice(e,1),this},e.getState=function(t){var e=this,i=Er,n=Cr;return Er=this,this.state.clear(),this._kill.length=0,this.actions.forEach((function(i){i.vars.getState&&(i.states.length=0,Cr=i,i.state=i.vars.getState(i)),t&&i.states.forEach((function(t){return e.state.add(t)}))})),Cr=n,Er=i,this.killConflicts(),this},e.animate=function(){var t,e,i=this,n=Er,r=this.timeline,s=this.actions.length;for(Er=this,r.clear(),this._abs.length=this._final.length=this._run.length=0,this.actions.forEach((function(t){t.vars.animate&&t.vars.animate(t);var e,i,n=t.vars.onEnter,r=t.vars.onLeave,s=t.targets;s&&s.length&&(n||r)&&(e=new ws,t.states.forEach((function(t){return e.add(t)})),(i=e.compare(ks.getState(s))).enter.length&&n&&n(i.enter),i.leave.length&&r&&r(i.leave))})),as(this._abs),this._run.forEach((function(t){return t()})),e=r.duration(),t=this._final.slice(0),r.add((function(){e<=r.time()&&(t.forEach((function(t){return t()})),Lr(i,"onComplete"))})),Er=n;s--;)this.actions[s].vars.once&&this.actions[s].kill();return Lr(this,"onStart"),r.restart(),this},e.loadState=function(t){t||(t=function(){return 0});var e=[];return this.actions.forEach((function(i){if(i.vars.loadState){var n,r=function r(s){s&&(i.targets=s),~(n=e.indexOf(r))&&(e.splice(n,1),e.length||t())};e.push(r),i.vars.loadState(r)}})),e.length||t(),this},e.setState=function(){return this.actions.forEach((function(t){return t.targets=t.vars.setState&&t.vars.setState(t)})),this},e.killConflicts=function(t){return this.state.interrupt(t),this._kill.forEach((function(e){return e.interrupt(t)})),this},e.run=function(t,e){var i=this;return this!==Er&&(t||this.getState(e),this.loadState((function(){i._killed||(i.setState(),i.animate())}))),this},e.clear=function(t){this.state.clear(),t||(this.actions.length=0)},e.getStateById=function(t){for(var e,i=this.actions.length;i--;)if(e=this.actions[i].getStateById(t))return e;return this.state.idLookup[t]&&this.state},e.kill=function(){this._killed=1,this.clear(),delete Ir[this.id]},t}(),ks=function(){function t(){}return t.getState=function(e,i){var n=fs(e,i);return Cr&&Cr.states.push(n),i&&i.batch&&t.batch(i.batch).state.add(n),n},t.from=function(t,e){return"clearProps"in(e=e||{})||(e.clearProps=!0),_s(t,fs(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,-1)},t.to=function(t,e){return _s(t,fs(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,1)},t.fromTo=function(t,e,i){return _s(t,e,i)},t.fit=function(t,e,i){var n=i?Gr(i,Hr):{},r=i||n,s=r.absolute,a=r.scale,o=r.getVars,u=r.props,h=r.runBackwards,l=r.onComplete,c=r.simple,f=i&&i.fitChild&&Yr(i.fitChild),p=os(e,u,c,t),d=os(t,0,c,p),m=u?Vr[u]:Xr;return u&&us(n,p.props),h&&(ts(d,m),"immediateRender"in n||(n.immediateRender=!0),n.onComplete=function(){es(d),l&&l.apply(this,arguments)}),s&&rs(d,p),n=cs(d,p,a||f,u,f,n.duration||o?n:0),o?n:n.duration?Or.to(d.element,n):null},t.makeAbsolute=function(t,e){return(t instanceof ws?t:new ws(t,e)).makeAbsolute()},t.batch=function(t){return t||(t="default"),Ir[t]||(Ir[t]=new Ss(t))},t.killFlipsOf=function(t,e){(t instanceof ws?t.targets:kr(t)).forEach((function(t){return t&&ys(t._flip,!1!==e?1:2)}))},t.isFlipping=function(e){var i=t.getByTarget(e);return!!i&&i.isActive()},t.getByTarget=function(t){return(Yr(t)||zr)._flip},t.getElementState=function(t,e){return new xs(Yr(t),e)},t.convertCoordinates=function(t,e,i){var n=Sr(e,!0,!0).multiply(Sr(t));return i?n.apply(i):n},t.register=function(t){if(Mr="undefined"!=typeof document&&document.body){Or=t,fr(Mr),kr=Or.utils.toArray;var e=Or.utils.snap(.1);Ar=function(t,i){return e(parseFloat(t)+i)}}},t}();ks.version="3.10.2","undefined"!=typeof window&&window.gsap&&window.gsap.registerPlugin(ks),Gn.registerPlugin(ks);var Os=document.querySelector(".intro"),Es=h(Os.querySelectorAll(".row__text.oh > span")),Cs=h(Os.querySelectorAll(".image")),Ms=h(document.querySelectorAll(".content")),As=[];Ms.forEach((function(t){As.push(h(t.querySelectorAll(".oh > span")))}));var Ds,Ps=h(document.querySelectorAll(".content > .content__row--image")),Ls=h(document.querySelectorAll(".content button.content__back"));Cs.forEach((function(t,e){t.addEventListener("click",(function(){!function(t,e){var i=Cs.filter((function(e){return e!=t})).map((function(t){return t.querySelector(".image__inner")}));Gn.timeline({defaults:{duration:1.1,ease:"power4.inOut"}}).addLabel("start",0).add((function(){var i=ks.getState(t);Ps[e].appendChild(t),ks.from(i,{duration:1.2,ease:"power4.inOut",absolute:!0}),Os.classList.add("intro--close"),Ms[e].classList.add("content--open"),Gn.set(Ls[e],{xPercent:20,opacity:0}),Gn.set(As[e],{yPercent:101})}),"start").to([Es,i],{xPercent:function(t,e){switch(e.dataset.direction){case"right":return 101;case"left":return-101;default:return 0}},yPercent:function(t,e){switch(e.dataset.direction){case"top":return-101;case"bottom":return 101;default:return 0}}},"start").addLabel("content","start+=0.7").to(As[e],{ease:"expo",yPercent:0},"content").to(Ls[e],{ease:"expo",xPercent:0,opacity:1},"content")}(t,e)}))})),Ls.forEach((function(t,e){t.addEventListener("click",(function(){!function(t,e){var i=Cs.filter((function(e){return e!=t})).map((function(t){return t.querySelector(".image__inner")}));Gn.timeline({defaults:{duration:1.1,ease:"power4.inOut"},onComplete:function(){Os.classList.remove("intro--close"),Ms[e].classList.remove("content--open")}}).addLabel("start",0).to(As[e],{duration:.8,yPercent:101},"start").to(Ls[e],{duration:.8,xPercent:20,opacity:0},"start").add((function(){var e=ks.getState(t);Os.appendChild(t),ks.from(e,{duration:1.2,ease:"power4.inOut",absolute:!0})}),"start").addLabel("intro","start+=0.6").to([Es,i],{ease:"expo",xPercent:0,yPercent:0},"intro")}(Cs[e],e)}))})),new Jn(document.querySelectorAll(".cursor"),"a, .intro > .image, .content__back"),Promise.all([function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"img";return new Promise((function(e){tr(document.querySelectorAll(t),{background:!0},e)}))}(".image__inner"),(Ds="jdl7wqk",new Promise((function(t){WebFont.load({typekit:{id:Ds},active:t})})))]).then((function(){return document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:12px}body #cdawrap{margin-left:auto}body{--color-text:#111;--color-bg:#e5e5e5;--color-link:#000;--color-link-hover:#111;--padding-ver:5vw;--padding-hor:1rem;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--cursor-stroke:#c11;margin:0;font-family:acumin-pro,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width:100px;height:100px;border:2px solid var(--cursor-stroke);border-radius:50%;margin:-50px 0 0 -50px;animation:loaderAnim .7s linear infinite alternate forwards;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);outline:0;text-decoration:none}a:hover{color:var(--color-link-hover);outline:0}a:focus{background:#d3d3d3;outline:0}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.hover-line,a.cda-sponsor-link{white-space:nowrap;position:relative;overflow:hidden}.hover-line:before,.cda-sponsor-link:before{content:"";height:1px;width:100%;transform-origin:0%;background:currentColor;transition:transform .3s;position:absolute;top:92%}.hover-line:hover:before,.cda-sponsor-link:hover:before{transform-origin:100%;transform:scaleX(0)}.unbutton{font:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:0}main{height:100vh;padding:0;display:grid;position:relative}.frame{text-align:center;text-transform:uppercase;padding:var(--padding-hor)calc(var(--padding-ver) + .6vw);z-index:100;flex-direction:column;grid-area:1/1/2/2;align-self:start;display:flex;position:relative}.frame__title{margin:1rem 0;font-size:1rem;font-weight:400}.frame__links{display:inline-block}.frame__links a{margin:0 .5rem}.intro,.content-wrap{grid-area:1/1/2/2}.intro{max-height:40vmax;padding:0 var(--padding-ver);grid-column-gap:3%;grid-row-gap:2.5vmax;letter-spacing:-.075vw;text-transform:uppercase;white-space:nowrap;flex:1;grid-template-rows:repeat(4,1fr);grid-template-columns:28% 1fr 22%;align-items:center;margin:auto 0;font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:8.625vw;font-weight:300;line-height:.7;display:grid}.intro--close{pointer-events:none}.image{width:100%;height:100%;cursor:pointer;will-change:transform;align-items:center;justify-items:center;display:grid;position:relative;overflow:hidden}.image--up{grid-area:2/3}.image--down{grid-area:3}.image__inner{width:100%;height:100%;background-position:50%;background-size:cover}.row--1{grid-area:1/1/2/4}.row--2{grid-area:2/1/3/4}.row--3{grid-area:3/2/4/4}.row--4{grid-area:4/1/5/4}.oh{display:inline-block;position:relative;overflow:hidden}.oh>span{will-change:transform;display:inline-block}.row__text span{padding-top:1.5vw}.content-wrap{align-self:stretch;display:grid}.content{opacity:0;pointer-events:none;height:100%;padding:0 var(--padding-ver);grid-area:1/1/2/2;grid-template-rows:1fr 50%;grid-template-columns:100%;display:grid}.content--open{opacity:1;pointer-events:auto}.content--open .content__row--image{pointer-events:none}.content__row--text{padding:calc(var(--padding-hor) + 9rem)0 2.5rem;grid-template:"title number""back back"1fr"meta meta"/1fr auto;display:grid}.content__row--image+.content__row--text{padding-bottom:1.5rem}.content__title{text-transform:uppercase;grid-area:title;margin:0;font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:max(2rem,min(4vw,4rem));font-weight:300;line-height:1}.content__number{grid-area:number;align-content:start;justify-content:start;align-self:start;justify-self:end;align-items:start;font-size:max(3rem,min(10vw,10rem));line-height:.55;display:flex;position:relative}.content__number .oh>span{padding-bottom:1.75vw;padding-left:6vw;display:block;position:relative}.content__number .oh>span:before{content:"";width:1px;height:111%;transform-origin:100% 100%;background:currentColor;position:absolute;bottom:0;left:0;transform:rotate(25deg)}.content__back{grid-area:back;align-self:center;justify-self:start;overflow:hidden}.content__back svg{width:100px;stroke:#000;stroke-width:.3px;transform-origin:0%;transition:transform .2s;transform:scaleX(.8)}.content__back:hover svg{transform:scaleX(1)}.content__meta{text-transform:uppercase;grid-area:meta;justify-content:space-between;font-size:max(.75rem,min(3vw,1.5rem));line-height:1;display:flex}.content__meta-text--center{text-align:center}.cursor{display:none}@media screen and (min-width:53em){.frame{flex-direction:row}.frame__title{margin-top:0}.frame__links{margin-left:8vw}.content__row--text{padding:calc(var(--padding-hor) + 4rem)0 2.5rem}}@media (any-pointer:fine){.cursor{pointer-events:none;z-index:10000;display:block;position:fixed;top:0;left:0}.cursor__inner{fill:none;stroke:var(--cursor-stroke);stroke-width:1.3px}.no-js .cursor{display:none}} -------------------------------------------------------------------------------- /dist/index.e9a2d1b4.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},i={},r=t.parcelRequiref8c0;function n(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function s(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function a(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 2 | /*! 3 | * GSAP 3.10.2 4 | * https://greensock.com 5 | * 6 | * @license Copyright 2008-2022, GreenSock. All rights reserved. 7 | * Subject to the terms at https://greensock.com/standard-license or for 8 | * Club GreenSock members, the agreement issued with that membership. 9 | * @author: Jack Doyle, jack@greensock.com 10 | */null==r&&((r=function(t){if(t in e)return e[t].exports;if(t in i){var r=i[t];delete i[t];var n={id:t,exports:{}};return e[t]=n,r.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){i[t]=e},t.parcelRequiref8c0=r),r.register("4hJWI",(function(t,e){!function(e,i){t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},r=i[t]=i[t]||[];return r.includes(e)||r.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let r=i.indexOf(e);return-1!=r&&i.splice(r,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let r=this._onceEvents&&this._onceEvents[t];for(let n of i){r&&r[n]&&(this.off(t,n),delete r[n]),n.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t}))}));var o,u,h,l,c,f,p,d,m,g,_,v,y,b,x,w,T,k,O,S,E,C,M,A,D,P,L,I,B={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},R={duration:.5,overwrite:!1,delay:0},z=2*Math.PI,F=z/4,V=0,q=Math.sqrt,N=Math.cos,X=Math.sin,Y=function(t){return"string"==typeof t},j=function(t){return"function"==typeof t},U=function(t){return"number"==typeof t},W=function(t){return void 0===t},H=function(t){return"object"==typeof t},$=function(t){return!1!==t},Q=function(){return"undefined"!=typeof window},G=function(t){return j(t)||Y(t)},J="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},Z=Array.isArray,K=/(?:-?\.?\d|\.)+/gi,tt=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,et=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,it=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,rt=/[+-]=-?[.\d]+/,nt=/[^,'"\[\]\s]+/gi,st=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,at={},ot={},ut=function(t){return(ot=It(t,at))&&Ti},ht=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},lt=function(t,e){return!e&&console.warn(t)},ct=function(t,e){return t&&(at[t]=e)&&ot&&(ot[t]=e)||at},ft=function(){return 0},pt={},dt=[],mt={},gt={},_t={},vt=30,yt=[],bt="",xt=function(t){var e,i,r=t[0];if(H(r)||j(r)||(t=[t]),!(e=(r._gsap||{}).harness)){for(i=yt.length;i--&&!yt[i].targetTest(r););e=yt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new We(t[i],e)))||t.splice(i,1);return t},wt=function(t){return t._gsap||xt(fe(t))[0]._gsap},Tt=function(t,e,i){return(i=t[e])&&j(i)?t[e]():W(i)&&t.getAttribute&&t.getAttribute(e)||i},kt=function(t,e){return(t=t.split(",")).forEach(e)||t},Ot=function(t){return Math.round(1e5*t)/1e5||0},St=function(t){return Math.round(1e7*t)/1e7||0},Et=function(t,e){var i=e.charAt(0),r=parseFloat(e.substr(2));return t=parseFloat(t),"+"===i?t+r:"-"===i?t-r:"*"===i?t*r:t/r},Ct=function(t,e){for(var i=e.length,r=0;t.indexOf(e[r])<0&&++rs;)a=a._prev;return a?(e._next=a._next,a._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[r]=e,e._prev=a,e.parent=e._dp=t,e},Vt=function(t,e,i,r){void 0===i&&(i="_first"),void 0===r&&(r="_last");var n=e._prev,s=e._next;n?n._next=s:t[i]===e&&(t[i]=s),s?s._prev=n:t[r]===e&&(t[r]=n),e._next=e._prev=e.parent=null},qt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},Nt=function(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},Xt=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)},jt=function(t){return t._repeat?Ut(t._tTime,t=t.duration()+t._rDelay)*t:0},Ut=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Wt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Ht=function(t){return t._end=St(t._start+(t._tDur/Math.abs(t._ts||t._rts||1e-8)||0))},$t=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=St(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ht(t),i._dirty||Nt(i,t)),t},Qt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Wt(t.rawTime(),e),(!e._dur||oe(0,e.totalDuration(),i)-e._tTime>1e-8)&&e.render(i,!0)),Nt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&i.totalTime(i._tTime),i=i._dp;t._zTime=-1e-8}},Gt=function(t,e,i,r){return e.parent&&qt(e),e._start=St((U(i)?i:i||t!==u?ne(t,i,e):t._time)+e._delay),e._end=St(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),Ft(t,e,"_first","_last",t._sort?"_start":0),te(e)||(t._recent=e),r||Qt(t,e),t},Jt=function(t,e){return(at.ScrollTrigger||ht("scrollTrigger",e))&&at.ScrollTrigger.create(e,t)},Zt=function(t,e,i,r){return ti(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&p!==Le.frame?(dt.push(t),t._lazy=[e,r],1):void 0:1},Kt=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},te=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},ee=function(t,e,i,r){var n=t._repeat,s=St(e)||0,a=t._tTime/t._tDur;return a&&!r&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:St(s*(n+1)+t._rDelay*n):s,a>0&&!r?$t(t,t._tTime=t._tDur*a):t.parent&&Ht(t),i||Nt(t.parent,t),t},ie=function(t){return t instanceof $e?Nt(t):ee(t,t._dur)},re={_start:0,endTime:ft,totalDuration:ft},ne=function t(e,i,r){var n,s,a,o=e.labels,u=e._recent||re,h=e.duration()>=1e8?u.endTime(!1):e._dur;return Y(i)&&(isNaN(i)||i in o)?(s=i.charAt(0),a="%"===i.substr(-1),n=i.indexOf("="),"<"===s||">"===s?(n>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(a?(n<0?u:r).totalDuration()/100:1)):n<0?(i in o||(o[i]=h),o[i]):(s=parseFloat(i.charAt(n-1)+i.substr(n+1)),a&&r&&(s=s/100*(Z(r)?r[0]:r).totalDuration()),n>1?t(e,i.substr(0,n-1),r)+s:h+s)):null==i?h:+i},se=function(t,e,i){var r,n,s=U(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=i,t){for(r=o,n=i;n&&!("immediateRender"in r);)r=n.vars.defaults||{},n=$(n.vars.inherit)&&n.parent;o.immediateRender=$(r.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new si(e[0],o,e[a+1])},ae=function(t,e){return t||0===t?e(t):e},oe=function(t,e,i){return ie?e:i},ue=function(t,e){return Y(t)&&(e=st.exec(t))?e[1]:""},he=[].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,i){return void 0===i&&(i=[]),t.forEach((function(t){var r;return Y(t)&&!e||le(t,1)?(r=i).push.apply(r,fe(t)):i.push(t)}))||i},fe=function(t,e,i){return!Y(t)||i||!l&&Ie()?Z(t)?ce(t,i):le(t)?he.call(t,0):t?[t]:[]:he.call((e||c).querySelectorAll(t),0)},pe=function(t){return t.sort((function(){return.5-Math.random()}))},de=function(t){if(j(t))return t;var e=H(t)?t:{each:t},i=Ne(e.ease),r=e.from||0,n=parseFloat(e.base)||0,s={},a=r>0&&r<1,o=isNaN(r)||a,u=e.axis,h=r,l=r;return Y(r)?h=l={center:.5,edges:.5,end:1}[r]||0:!a&&o&&(h=r[0],l=r[1]),function(t,a,c){var f,p,d,m,g,_,v,y,b,x=(c||e).length,w=s[x];if(!w){if(!(b="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=c[b++].getBoundingClientRect().left)&&bv&&(v=g),gx?x-1:u?"y"===u?x/b:b:Math.max(b,x/b))||0)*("edges"===r?-1:1),w.b=x<0?n-x:n,w.u=ue(e.amount||e.each)||0,i=i&&x<0?Ve(i):i}return x=(w[t]-w.min)/w.max||0,St(w.b+(i?i(x):x)*w.v)+w.u}},me=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(i){var r=Math.round(parseFloat(i)/t)*t*e;return(r-r%1)/e+(U(i)?0:ue(i))}},ge=function(t,e){var i,r,n=Z(t);return!n&&H(t)&&(i=n=t.radius||1e8,t.values?(t=fe(t.values),(r=!U(t[0]))&&(i*=i)):t=me(t.increment)),ae(e,n?j(t)?function(e){return r=t(e),Math.abs(r-e)<=i?r:e}:function(e){for(var n,s,a=parseFloat(r?e.x:e),o=parseFloat(r?e.y:0),u=1e8,h=0,l=t.length;l--;)(n=r?(n=t[l].x-a)*n+(s=t[l].y-o)*s:Math.abs(t[l]-a))(n=Math.abs(n))&&(s=r,o=n);return s},we=function(t,e,i){var r,n,s=t.vars,a=s[e];if(a)return r=s[e+"Params"],n=s.callbackScope||t,i&&dt.length&&Mt(),r?a.apply(n,r):a.call(n)},Te=function(t){return qt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&we(t,"onInterrupt"),t},ke=function(t){var e=(t=!t.name&&t.default||t).name,i=j(t),r=e&&!i&&t.init?function(){this._props=[]}:t,n={init:ft,render:di,add:Ze,kill:gi,modifier:mi,rawVars:0},s={targetTest:0,get:0,getSetter:li,aliases:{},register:0};if(Ie(),t!==r){if(gt[e])return;Lt(r,Lt(Rt(t,n),s)),It(r.prototype,It(n,Rt(t,s))),gt[r.prop=e]=r,t.targetTest&&(yt.push(r),pt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}ct(e,r),t.register&&t.register(Ti,r,yi)},Oe={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]},Se=function(t,e,i){return 255*(6*(t+=t<0?1:t>1?-1:0)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)+.5|0},Ee=function(t,e,i){var r,n,s,a,o,u,h,l,c,f,p=t?U(t)?[t>>16,t>>8&255,255&t]: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&&(r=t.charAt(1),n=t.charAt(2),s=t.charAt(3),t="#"+r+r+n+n+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&255,255&p,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(p=f=t.match(K),e){if(~t.indexOf("="))return p=t.match(tt),i&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,r=2*(u=+p[2]/100)-(n=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=Se(a+1/3,r,n),p[1]=Se(a,r,n),p[2]=Se(a-1/3,r,n);else p=t.match(K)||Oe.transparent;p=p.map(Number)}return e&&!f&&(r=p[0]/255,n=p[1]/255,s=p[2]/255,u=((h=Math.max(r,n,s))+(l=Math.min(r,n,s)))/2,h===l?a=o=0:(c=h-l,o=u>.5?c/(2-h-l):c/(h+l),a=h===r?(n-s)/c+(nT&&(O+=a-k),((i=(n=(S+=a)-O)-C)>0||o)&&(s=++y.frame,b=n-1e3*y.time,y.time=n/=1e3,C+=i+(i>=E?4:E-i),r=1),o||(g=_(t)),r)for(x=0;x=e&&x--},_listeners:M=[]}),Ie=function(){return!m&&Le.wake()},Be={},Re=/^[\d.\-M][\d.\-,\s]/,ze=/["']/g,Fe=function(t){for(var e,i,r,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("{")?[Fe(s[1])]:(e=t,i=e.indexOf("(")+1,r=e.indexOf(")"),n=e.indexOf("(",i),e.substring(i,~n&&n=1?i:1,s=(r||(e?.3:.45))/(i<1?i:1),a=s/z*(Math.asin(1/n)||0),o=function(t){return 1===t?1:n*Math.pow(2,-10*t)*X((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Ye(o);return s=z/s,u.config=function(i,r){return t(e,i,r)},u},Ue=function t(e,i){void 0===i&&(i=1.70158);var r=function(t){return t?--t*t*((i+1)*t+i)+1:0},n="out"===e?r:"in"===e?function(t){return 1-r(1-t)}:Ye(r);return n.config=function(i){return t(e,i)},n};kt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Xe(t+",Power"+(i-1),e?function(t){return Math.pow(t,i)}:function(t){return t},(function(t){return 1-Math.pow(1-t,i)}),(function(t){return t<.5?Math.pow(2*t,i)/2:1-Math.pow(2*(1-t),i)/2}))})),Be.Linear.easeNone=Be.none=Be.Linear.easeIn,Xe("Elastic",je("in"),je("out"),je()),D=7.5625,L=1/(P=2.75),Xe("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,ee(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Ie(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for($t(this,t),!i._dp||i.parent||Qt(i,this);i&&i.parent;)i.parent._time!==i._start+(i._ts>=0?i._tTime/i._ts:(i.totalDuration()-i._tTime)/-i._ts)&&i.totalTime(i._tTime,!0),i=i.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&Gt(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),At(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+jt(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)+jt(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},e.iteration=function(t,e){var i=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*i,e):this._repeat?Ut(this._tTime,i)+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,this.totalTime(oe(-this._delay,this._tDur,e),!0),Ht(this),Xt(this)},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Ie(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&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)&&Gt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+($(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Wt(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,i=arguments.length?t:e.rawTime();e;)i=e._start+i/(e._ts||1),e=e._dp;return i},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(ne(this,t),$(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,$(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(r[t]=e,i&&(r[t+"Params"]=i),"onUpdate"===t&&(this._onUpdate=e)):delete r[t],this):r[t]},e.then=function(t){var e=this;return new Promise((function(i){var r=j(t)?t:Pt,n=function(){var t=e.then;e.then=null,j(r)&&(r=r(e))&&(r.then||r===e)&&(e.then=t),i(r),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}();Lt(He.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 $e=function(t){function e(e,i){var r;return void 0===e&&(e={}),(r=t.call(this,e)||this).labels={},r.smoothChildTiming=!!e.smoothChildTiming,r.autoRemoveChildren=!!e.autoRemoveChildren,r._sort=$(e.sortChildren),u&&Gt(e.parent||u,s(r),i),e.reversed&&r.reverse(),e.paused&&r.paused(!0),e.scrollTrigger&&Jt(s(r),e.scrollTrigger),r}a(e,t);var i=e.prototype;return i.to=function(t,e,i){return se(0,arguments,this),this},i.from=function(t,e,i){return se(1,arguments,this),this},i.fromTo=function(t,e,i,r){return se(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,zt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new si(t,e,ne(this,i),1),this},i.call=function(t,e,i){return Gt(this,si.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,r,n,s,a){return i.duration=e,i.stagger=i.stagger||r,i.onComplete=s,i.onCompleteParams=a,i.parent=this,new si(t,i,ne(this,n)),this},i.staggerFrom=function(t,e,i,r,n,s,a){return i.runBackwards=1,zt(i).immediateRender=$(i.immediateRender),this.staggerTo(t,e,i,r,n,s,a)},i.staggerFromTo=function(t,e,i,r,n,s,a,o){return r.startAt=i,zt(r).immediateRender=$(r.immediateRender),this.staggerTo(t,e,r,n,s,a,o)},i.render=function(t,e,i){var r,n,s,a,o,h,l,c,f,p,d,m,g=this._time,_=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:St(t),b=this._zTime<0!=t<0&&(this._initted||!v);if(this!==u&&y>_&&t>=0&&(y=_),y!==this._tTime||i||b){if(g!==this._time&&v&&(y+=this._time-g,t+=this._time-g),r=y,f=this._start,h=!(c=this._ts),b&&(v||(g=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,i);if(r=St(y%o),y===_?(a=this._repeat,r=v):((a=~~(y/o))&&a===y/o&&(r=v,a--),r>v&&(r=v)),p=Ut(this._tTime,o),!g&&this._tTime&&p!==a&&(p=a),d&&1&a&&(r=v-r,m=1),a!==p&&!this._lock){var x=d&&1&p,w=x===(d&&1&a);if(ae)for(r=t._first;r&&r._start<=i;){if("isPause"===r.data&&r._start>e)return r;r=r._next}else for(r=t._last;r&&r._start>=i;){if("isPause"===r.data&&r._start=g&&t>=0)for(n=this._first;n;){if(s=n._next,(n._act||r>=n._start)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(r-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(r-n._start)*n._ts,e,i),r!==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:r;n;){if(s=n._prev,(n._act||T<=n._end)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(T-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(T-n._start)*n._ts,e,i),r!==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(r>=g?0:-1e-8)._zTime=r>=g?1:-1,this._ts))return this._start=f,Ht(this),this.render(t,e,i);this._onUpdate&&!e&&we(this,"onUpdate",!0),(y===_&&this._tTime>=this.totalDuration()||!y&&g)&&(f!==this._start&&Math.abs(c)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===_&&this._ts>0||!y&&this._ts<0)&&qt(this,1),e||t<0&&!g||!y&&!g&&_||(we(this,y===_&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y<_&&this.timeScale()>0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(U(e)||(e=ne(this,e,t)),!(t instanceof He)){if(Z(t))return t.forEach((function(t){return i.add(t,e)})),this;if(Y(t))return this.addLabel(t,e);if(!j(t))return this;t=si.delayedCall(0,t)}return this!==t?Gt(this,t,e):this},i.getChildren=function(t,e,i,r){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===r&&(r=-1e8);for(var n=[],s=this._first;s;)s._start>=r&&(s instanceof si?e&&n.push(s):(i&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,i)))),s=s._next;return n},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return Y(t)?this.removeLabel(t):j(t)?this.killTweensOf(t):(Vt(this,t),t===this._recent&&(this._recent=this._last),Nt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=St(Le.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,i),this._forcing=0,this):this._tTime},i.addLabel=function(t,e){return this.labels[t]=ne(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var r=si.delayedCall(0,e||ft,i);return r.data="isPause",this._hasPause=1,Gt(this,r,ne(this,t))},i.removePause=function(t){var e=this._first;for(t=ne(this,t);e;)e._start===t&&"isPause"===e.data&&qt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var r=this.getTweensOf(t,i),n=r.length;n--;)Qe!==r[n]&&r[n].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,r=[],n=fe(t),s=this._first,a=U(e);s;)s instanceof si?Ct(s._targets,n)&&(a?(!Qe||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&r.push(s):(i=s.getTweensOf(n,e)).length&&r.push.apply(r,i),s=s._next;return r},i.tweenTo=function(t,e){e=e||{};var i,r=this,n=ne(r,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=si.to(r,Lt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:r._time))/r.timeScale())||1e-8,onStart:function(){if(r.pause(),!i){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:r._time))/r.timeScale());l._dur!==t&&ee(l,t,0,1).render(l._time,!0,!0),i=1}o&&o.apply(l,u||[])}},e));return h?l.render(0):l},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,Lt({startAt:{time:ne(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),xe(this,ne(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),xe(this,ne(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+1e-8)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var r,n=this._first,s=this.labels;n;)n._start>=i&&(n._start+=t,n._end+=t),n=n._next;if(e)for(r in s)s[r]>=i&&(s[r]+=t);return Nt(this)},i.invalidate=function(){var e=this._first;for(this._lock=0;e;)e.invalidate(),e=e._next;return t.prototype.invalidate.call(this)},i.clear=function(t){void 0===t&&(t=!0);for(var e,i=this._first;i;)e=i._next,this.remove(i),i=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Nt(this)},i.totalDuration=function(t){var e,i,r,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(r=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,Gt(s,a,i-a._delay,1)._lock=0):o=i,i<0&&a._ts&&(n-=i,(!r&&!s._dp||r&&r.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),o=0),a._end>n&&a._ts&&(n=a._end),a=e;ee(s,s===u&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(u._ts&&(At(u,Wt(t,u)),p=Le.frame),Le.frame>=vt){vt+=B.autoSleep||120;var e=u._first;if((!e||!e._ts)&&B.autoSleep&&Le._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Le.sleep()}}},e}(He);Lt($e.prototype,{_lock:0,_hasPause:0,_forcing:0});var Qe,Ge,Je=function(t,e,i,r,n,s,a){var o,u,h,l,c,f,p,d,m=new yi(this._pt,t,e,0,1,pi,null,n),g=0,_=0;for(m.b=i,m.e=r,i+="",(p=~(r+="").indexOf("random("))&&(r=ye(r)),s&&(s(d=[i,r],t,e),i=d[0],r=d[1]),u=i.match(it)||[];o=it.exec(r);)l=o[0],c=r.substring(g,o.index),h?h=(h+1)%5:"rgba("===c.substr(-5)&&(h=1),l!==u[_++]&&(f=parseFloat(u[_-1])||0,m._pt={_next:m._pt,p:c||1===_?c:",",s:f,c:"="===l.charAt(1)?Et(f,l)-f:parseFloat(l)-f,m:h&&h<4?Math.round:0},g=it.lastIndex);return m.c=g0&&!M&&(e._startAt=0),A&&i<=0)return void(i&&(e._zTime=i))}else!1===M&&(e._startAt=0);else if(S&&A)if(D)!M&&(e._startAt=0);else if(i&&(x=!1),s=Lt({overwrite:!1,data:"isFromStart",lazy:x&&$(w),immediateRender:x,stagger:0,parent:L},r),g&&(s[f.prop]=g),qt(e._startAt=si.set(P,s)),i<0&&e._startAt.render(-1,!0),e._zTime=i,x){if(!i)return}else t(e._startAt,1e-8);for(e._pt=e._ptCache=0,w=A&&$(w)||w&&!A,n=0;n")}));else{for(p in c={},T)"ease"===p||"easeEach"===p||ei(p,T[p],c,T.easeEach);for(p in c)for(M=c[p].sort((function(t,e){return t.t-e.t})),P=0,l=0;lp-1e-8&&t>=0?p:t<1e-8?0:t;if(d){if(m!==this._tTime||!t||i||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=t<0){if(r=m,l=this.timeline,this._repeat){if(a=d+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*a+t,e,i);if(r=St(m%a),m===p?(s=this._repeat,r=d):((s=~~(m/a))&&s===m/a&&(r=d,s--),r>d&&(r=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,r=d-r),o=Ut(this._tTime,a),r===f&&!i&&this._initted)return this._tTime=m,this;s!==o&&(l&&this._yEase&&qe(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(St(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(Zt(this,t<0?t:r,i,e))return this._tTime=0,this;if(f!==this._time)return this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=m,this._time=r,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(c||this._ease)(r/d),this._from&&(this.ratio=h=1-h),r&&!f&&!e&&(we(this,"onStart"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:!r&&u?-1e-8:l._dur*l._ease(r/this._dur),e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),we(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&we(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(m===this._tDur&&this._ts>0||!m&&this._ts<0)&&qt(this,1),e||t<0&&!f||!m&&!f||(we(this,m===p?"onComplete":"onReverseComplete",!0),this._prom&&!(m0)&&this._prom()))}}else!function(t,e,i,r){var n,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&Kt(t)&&(t._initted||!te(t))||(t._ts<0||t._dp._ts<0)&&!te(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=oe(0,t._tDur,e),s=Ut(l,h),t._yoyo&&1&s&&(u=1-u),s!==Ut(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||r||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&Zt(t,e,r,i))return;for(a=t._zTime,t._zTime=e||(i?1e-8:0),i||(i=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&&!i&&we(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&we(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&qt(t,1),i||(we(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,i);return this},i.targets=function(){return this._targets},i.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)},i.resetTo=function(t,e,i,r){m||Le.wake(),this._ts||this.play();var n=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||ti(this,n),function(t,e,i,r,n,s,a){var o,u,h,l=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!l)for(l=t._ptCache[e]=[],u=t._ptLookup,h=t._targets.length;h--;){if((o=u[h][e])&&o.d&&o.d._pt)for(o=o.d._pt;o&&o.p!==e;)o=o._next;if(!o)return Ge=1,t.vars[e]="+=0",ti(t,a),Ge=0,1;l.push(o)}for(h=l.length;h--;)(o=l[h]).s=!r&&0!==r||n?o.s+(r||0)+s*o.c:r,o.c=i-o.s,o.e&&(o.e=Ot(i)+ue(o.e)),o.b&&(o.b=o.s+ue(o.b))}(this,t,e,i,r,this._ease(n/this._dur),n)?this.resetTo(t,e,i,r):($t(this,0),this.parent||Ft(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},i.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 i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Qe&&!0!==Qe.vars.overwrite)._first||Te(this),this.parent&&i!==this.timeline.totalDuration()&&ee(this,this._dur*this.timeline._tDur/i,0,1),this}var r,n,s,a,o,u,h,l=this._targets,c=t?fe(t):l,f=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,r=i===e.length;r&&i--&&t[i]===e[i];);return i<0}(l,c))return"all"===e&&(this._pt=0),Te(this);for(r=this._op=this._op||[],"all"!==e&&(Y(e)&&(o={},kt(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,r,n,s,a=t[0]?wt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(r in i=It({},e),o)if(r in i)for(n=(s=o[r].split(",")).length;n--;)i[s[n]]=i[r];return i}(l,e)),h=l.length;h--;)if(~c.indexOf(l[h]))for(o in n=f[h],"all"===e?(r[h]=e,a=n,s={}):(s=r[h]=r[h]||{},a=e),a)(u=n&&n[o])&&("kill"in u.d&&!0!==u.d.kill(o)||Vt(this,u,"_pt"),delete n[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&Te(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return se(1,arguments)},e.delayedCall=function(t,i,r,n){return new e(i,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:i,onReverseComplete:i,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:n})},e.fromTo=function(t,e,i){return se(2,arguments)},e.set=function(t,i){return i.duration=0,i.repeatDelay||(i.repeat=0),new e(t,i)},e.killTweensOf=function(t,e,i){return u.killTweensOf(t,e,i)},e}(He);Lt(si.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),kt("staggerTo,staggerFrom,staggerFromTo",(function(t){si[t]=function(){var e=new $e,i=he.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var ai=function(t,e,i){return t[e]=i},oi=function(t,e,i){return t[e](i)},ui=function(t,e,i,r){return t[e](r.fp,i)},hi=function(t,e,i){return t.setAttribute(e,i)},li=function(t,e){return j(t[e])?oi:W(t[e])&&t.setAttribute?hi:ai},ci=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},fi=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},pi=function(t,e){var i=e._pt,r="";if(!t&&e.b)r=e.b;else if(1===t&&e.e)r=e.e;else{for(;i;)r=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+r,i=i._next;r+=e.c}e.set(e.t,e.p,r,e)},di=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},mi=function(t,e,i,r){for(var n,s=this._pt;s;)n=s._next,s.p===r&&s.modifier(t,e,i),s=n},gi=function(t){for(var e,i,r=this._pt;r;)i=r._next,r.p===t&&!r.op||r.op===t?Vt(this,r,"_pt"):r.dep||(e=1),r=i;return!e},_i=function(t,e,i,r){r.mSet(t,e,r.m.call(r.tween,i,r.mt),r)},vi=function(t){for(var e,i,r,n,s=t._pt;s;){for(e=s._next,i=r;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:n)?s._prev._next=s:r=s,(s._next=i)?i._prev=s:n=s,s=e}t._pt=r},yi=function(){function t(t,e,i,r,n,s,a,o,u){this.t=e,this.s=r,this.c=n,this.p=i,this.r=s||ci,this.d=a||this,this.set=o||ai,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,i){this.mSet=this.mSet||this.set,this.set=_i,this.m=t,this.mt=i,this.tween=e},t}();kt(bt+"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 pt[t]=1})),at.TweenMax=at.TweenLite=si,at.TimelineLite=at.TimelineMax=$e,u=new $e({sortChildren:!1,defaults:R,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),B.stringFilter=Pe;var bi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var r=t.map((function(t){return Ti.quickSetter(t,e,i)})),n=r.length;return function(t){for(var e=n;e--;)r[e](t)}}t=t[0]||{};var s=gt[e],a=wt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var r=new s;d._pt=0,r.init(t,i?e+i:e,d,0,[t]),r.render(1,r),d._pt&&di(1,d)}:a.set(t,o);return s?u:function(e){return u(t,o,i?e+i:e,a,1)}},quickTo:function(t,e,i){var r,n=Ti.to(t,It(((r={})[e]="+=0.1",r.paused=!0,r),i||{})),s=function(t,i,r){return n.resetTo(e,t,i,r)};return s.tween=n,s},isTweening:function(t){return u.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ne(t.ease,R.ease)),Bt(R,t||{})},config:function(t){return Bt(B,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,r=t.plugins,n=t.defaults,s=t.extendTimeline;(r||"").split(",").forEach((function(t){return t&&!gt[t]&&!at[t]&<(e+" effect requires "+t+" plugin.")})),_t[e]=function(t,e,r){return i(fe(t),Lt(e||{},n),r)},s&&($e.prototype[e]=function(t,i,r){return this.add(_t[e](t,H(i)?i:(r=i)&&{},this),r)})},registerEase:function(t,e){Be[t]=Ne(e)},parseEase:function(t,e){return arguments.length?Ne(t,e):Be},getById:function(t){return u.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,r,n=new $e(t);for(n.smoothChildTiming=$(t.smoothChildTiming),u.remove(n),n._dp=0,n._time=n._tTime=u._time,i=u._first;i;)r=i._next,!e&&!i._dur&&i instanceof si&&i.vars.onComplete===i._targets[0]||Gt(n,i,i._start-i._delay),i=r;return Gt(u,n,0),n},utils:{wrap:function t(e,i,r){var n=i-e;return Z(e)?ve(e,t(0,e.length),i):ae(r,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,i,r){var n=i-e,s=2*n;return Z(e)?ve(e,t(0,e.length-1),i):ae(r,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:de,random:_e,snap:ge,normalize:function(t,e,i){return be(t,e,0,1,i)},getUnit:ue,clamp:function(t,e,i){return ae(i,(function(i){return oe(t,e,i)}))},splitColor:Ee,toArray:fe,selector:function(t){return t=fe(t)[0]||lt("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return fe(e,i.querySelectorAll?i:i===t?lt("Invalid scope")||c.createElement("div"):t)}},mapRange:be,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?er[n]:"")+t},rr=function(){"undefined"!=typeof window&&window.document&&(ki=window,Oi=ki.document,Si=Oi.documentElement,Ci=Ki("div")||{style:{}},Ki("div"),Ji=ir(Ji),Zi=Ji+"Origin",Ci.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ai=!!ir("perspective"),Ei=1)},nr=function t(e){var i,r=Ki("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Si.appendChild(r),r.appendChild(this),this.style.display="block",e)try{i=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(i=this._gsapBBox());return n&&(s?n.insertBefore(this,s):n.appendChild(this)),Si.removeChild(r),this.style.cssText=a,i},sr=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},ar=function(t){var e;try{e=t.getBBox()}catch(i){e=nr.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===nr||(e=nr.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+sr(t,["x","cx","x1"])||0,y:+sr(t,["y","cy","y1"])||0,width:0,height:0}},or=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!ar(t))},ur=function(t,e){if(e){var i=t.style;e in Di&&e!==Zi&&(e=Ji),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Bi,"-$1").toLowerCase())):i.removeAttribute(e)}},hr=function(t,e,i,r,n,s){var a=new yi(t._pt,e,i,0,1,s?ji:Yi);return t._pt=a,a.b=r,a.e=n,t._props.push(i),a},lr={deg:1,rad:1,turn:1},cr=function t(e,i,r,n){var s,a,o,u,h=parseFloat(r)||0,l=(r+"").trim().substr((h+"").length)||"px",c=Ci.style,f=Ri.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),m=100,g="px"===n,_="%"===n;return n===l||!h||lr[n]||lr[l]?h:("px"!==l&&!g&&(h=t(e,i,r,"px")),u=e.getCTM&&or(e),!_&&"%"!==l||!Di[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=m+(g?l:n),a=~i.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==Oi&&a.appendChild||(a=Oi.body),(o=a._gsap)&&_&&o.width&&f&&o.time===Le.time?Ot(h/o.width*m):((_||"%"===l)&&(c.position=tr(e,"position")),a===e&&(c.position="static"),a.appendChild(Ci),s=Ci[d],a.removeChild(Ci),c.position="absolute",f&&_&&((o=wt(a)).time=Le.time,o.width=a[d]),Ot(g?s*h/m:s&&h?m/s*h:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],Ot(_?h/s*m:h/100*s)))},fr=function(t,e,i,r){var n;return Ei||rr(),e in Fi&&"transform"!==e&&~(e=Fi[e]).indexOf(",")&&(e=e.split(",")[0]),Di[e]&&"transform"!==e?(n=Tr(t,r),n="transformOrigin"!==e?n[e]:n.svg?n.origin:kr(tr(t,Zi))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||r||~(n+"").indexOf("calc("))&&(n=gr[e]&&gr[e](t,e,i)||tr(t,e)||Tt(t,e)||("opacity"===e?1:0)),i&&!~(n+"").trim().indexOf(" ")?cr(t,e,n,i)+i:n},pr=function(t,e,i,r){if(!i||"none"===i){var n=ir(e,t,1),s=n&&tr(t,n,1);s&&s!==i?(e=n,i=s):"borderColor"===e&&(i=tr(t,"borderTopColor"))}var a,o,u,h,l,c,f,p,d,m,g,_=new yi(this._pt,t.style,e,0,1,pi),v=0,y=0;if(_.b=i,_.e=r,i+="","auto"===(r+="")&&(t.style[e]=r,r=tr(t,e)||r,t.style[e]=i),Pe(a=[i,r]),r=a[1],u=(i=a[0]).match(et)||[],(r.match(et)||[]).length){for(;o=et.exec(r);)f=o[0],d=r.substring(v,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),f!==(c=u[y++]||"")&&(h=parseFloat(c)||0,g=c.substr((h+"").length),"="===f.charAt(1)&&(f=Et(h,f)+g),p=parseFloat(f),m=f.substr((p+"").length),v=et.lastIndex-m.length,m||(m=m||B.units[e]||g,v===r.length&&(r+=m,_.e+=m)),g!==m&&(h=cr(t,e,c,m)||0),_._pt={_next:_._pt,p:d||1===y?d:",",s:h,c:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});_.c=v-1;)i=o[n],Di[i]&&(r=1,i="transformOrigin"===i?Zi:Ji),ur(s,i);r&&(ur(s,Ji),u&&(u.svg&&s.removeAttribute("transform"),Tr(s,1),u.uncache=1))}},gr={clearProps:function(t,e,i,r,n){if("isFromStart"!==n.data){var s=t._pt=new yi(t._pt,e,i,0,0,mr);return s.u=r,s.pr=-10,s.tween=n,t._props.push(i),1}}},_r=[1,0,0,1,0,0],vr={},yr=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},br=function(t){var e=tr(t,Ji);return yr(e)?_r:e.substr(7).match(tt).map(Ot)},xr=function(t,e){var i,r,n,s,a=t._gsap||wt(t),o=t.style,u=br(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(",")?_r:u:(u!==_r||t.offsetParent||t===Si||a.svg||(n=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,r=t.nextSibling,Si.appendChild(t)),u=br(t),n?o.display=n:ur(t,"display"),s&&(r?i.insertBefore(t,r):i?i.appendChild(t):Si.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},wr=function(t,e,i,r,n,s){var a,o,u,h=t._gsap,l=n||xr(t,!0),c=h.xOrigin||0,f=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,m=l[0],g=l[1],_=l[2],v=l[3],y=l[4],b=l[5],x=e.split(" "),w=parseFloat(x[0])||0,T=parseFloat(x[1])||0;i?l!==_r&&(o=m*v-g*_)&&(u=w*(-g/o)+T*(m/o)-(m*b-g*y)/o,w=w*(v/o)+T*(-_/o)+(_*b-v*y)/o,T=u):(w=(a=ar(t)).x+(~x[0].indexOf("%")?w/100*a.width:w),T=a.y+(~(x[1]||x[0]).indexOf("%")?T/100*a.height:T)),r||!1!==r&&h.smooth?(y=w-c,b=T-f,h.xOffset=p+(y*m+b*_)-y,h.yOffset=d+(y*g+b*v)-b):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=T,h.smooth=!!r,h.origin=e,h.originIsAbsolute=!!i,t.style[Zi]="0px 0px",s&&(hr(s,h,"xOrigin",c,w),hr(s,h,"yOrigin",f,T),hr(s,h,"xOffset",p,h.xOffset),hr(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+T)},Tr=function(t,e){var i=t._gsap||new We(t);if("x"in i&&!e&&!i.uncache)return i;var r,n,s,a,o,u,h,l,c,f,p,d,m,g,_,v,y,b,x,w,T,k,O,S,E,C,M,A,D,P,L,I,R=t.style,z=i.scaleX<0,F="px",V="deg",q=tr(t,Zi)||"0";return r=n=s=u=h=l=c=f=p=0,a=o=1,i.svg=!(!t.getCTM||!or(t)),g=xr(t,i.svg),i.svg&&(S=(!i.uncache||"0px 0px"===q)&&!e&&t.getAttribute("data-svg-origin"),wr(t,S||q,!!S||i.originIsAbsolute,!1!==i.smooth,g)),d=i.xOrigin||0,m=i.yOrigin||0,g!==_r&&(b=g[0],x=g[1],w=g[2],T=g[3],r=k=g[4],n=O=g[5],6===g.length?(a=Math.sqrt(b*b+x*x),o=Math.sqrt(T*T+w*w),u=b||x?Ii(x,b)*Pi:0,(c=w||T?Ii(w,T)*Pi+u:0)&&(o*=Math.abs(Math.cos(c*Li))),i.svg&&(r-=d-(d*b+m*w),n-=m-(d*x+m*T))):(I=g[6],P=g[7],M=g[8],A=g[9],D=g[10],L=g[11],r=g[12],n=g[13],s=g[14],h=(_=Ii(I,D))*Pi,_&&(S=k*(v=Math.cos(-_))+M*(y=Math.sin(-_)),E=O*v+A*y,C=I*v+D*y,M=k*-y+M*v,A=O*-y+A*v,D=I*-y+D*v,L=P*-y+L*v,k=S,O=E,I=C),l=(_=Ii(-w,D))*Pi,_&&(v=Math.cos(-_),L=T*(y=Math.sin(-_))+L*v,b=S=b*v-M*y,x=E=x*v-A*y,w=C=w*v-D*y),u=(_=Ii(x,b))*Pi,_&&(S=b*(v=Math.cos(_))+x*(y=Math.sin(_)),E=k*v+O*y,x=x*v-b*y,O=O*v-k*y,b=S,k=E),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=Ot(Math.sqrt(b*b+x*x+w*w)),o=Ot(Math.sqrt(O*O+I*I)),_=Ii(k,O),c=Math.abs(_)>2e-4?_*Pi:0,p=L?1/(L<0?-L:L):0),i.svg&&(S=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!yr(tr(t,Ji)),S&&t.setAttribute("transform",S))),Math.abs(c)>90&&Math.abs(c)<270&&(z?(a*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,c+=c<=0?180:-180)),e=e||i.uncache,i.x=r-((i.xPercent=r&&(!e&&i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-r)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+F,i.y=n-((i.yPercent=n&&(!e&&i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+F,i.z=s+F,i.scaleX=Ot(a),i.scaleY=Ot(o),i.rotation=Ot(u)+V,i.rotationX=Ot(h)+V,i.rotationY=Ot(l)+V,i.skewX=c+V,i.skewY=f+V,i.transformPerspective=p+F,(i.zOrigin=parseFloat(q.split(" ")[2])||0)&&(R[Zi]=kr(q)),i.xOffset=i.yOffset=0,i.force3D=B.force3D,i.renderTransform=i.svg?Cr:Ai?Er:Sr,i.uncache=0,i},kr=function(t){return(t=t.split(" "))[0]+" "+t[1]},Or=function(t,e,i){var r=ue(e);return Ot(parseFloat(e)+parseFloat(cr(t,"x",i+"px",r)))+r},Sr=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Er(t,e)},Er=function(t,e){var i=e||this,r=i.xPercent,n=i.yPercent,s=i.x,a=i.y,o=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,m=i.transformPerspective,g=i.force3D,_=i.target,v=i.zOrigin,y="",b="auto"===g&&t&&1!==t||!0===g;if(v&&("0deg"!==l||"0deg"!==h)){var x,w=parseFloat(h)*Li,T=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*Li,x=Math.cos(w),s=Or(_,s,T*x*-v),a=Or(_,a,-Math.sin(w)*-v),o=Or(_,o,k*x*-v+v)}"0px"!==m&&(y+="perspective("+m+") "),(r||n)&&(y+="translate("+r+"%, "+n+"%) "),(b||"0px"!==s||"0px"!==a||"0px"!==o)&&(y+="0px"!==o||b?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+") "),"0deg"!==u&&(y+="rotate("+u+") "),"0deg"!==h&&(y+="rotateY("+h+") "),"0deg"!==l&&(y+="rotateX("+l+") "),"0deg"===c&&"0deg"===f||(y+="skew("+c+", "+f+") "),1===p&&1===d||(y+="scale("+p+", "+d+") "),_.style[Ji]=y||"translate(0, 0)"},Cr=function(t,e){var i,r,n,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,c=o.y,f=o.rotation,p=o.skewX,d=o.skewY,m=o.scaleX,g=o.scaleY,_=o.target,v=o.xOrigin,y=o.yOrigin,b=o.xOffset,x=o.yOffset,w=o.forceCSS,T=parseFloat(l),k=parseFloat(c);f=parseFloat(f),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),f+=d),f||p?(f*=Li,p*=Li,i=Math.cos(f)*m,r=Math.sin(f)*m,n=Math.sin(f-p)*-g,s=Math.cos(f-p)*g,p&&(d*=Li,a=Math.tan(p-d),n*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),i*=a=Math.sqrt(1+a*a),r*=a)),i=Ot(i),r=Ot(r),n=Ot(n),s=Ot(s)):(i=m,s=g,r=n=0),(T&&!~(l+"").indexOf("px")||k&&!~(c+"").indexOf("px"))&&(T=cr(_,"x",l,"px"),k=cr(_,"y",c,"px")),(v||y||b||x)&&(T=Ot(T+v-(v*i+y*n)+b),k=Ot(k+y-(v*r+y*s)+x)),(u||h)&&(a=_.getBBox(),T=Ot(T+u/100*a.width),k=Ot(k+h/100*a.height)),a="matrix("+i+","+r+","+n+","+s+","+T+","+k+")",_.setAttribute("transform",a),w&&(_.style[Ji]=a)},Mr=function(t,e,i,r,n){var s,a,o=360,u=Y(n),h=parseFloat(n)*(u&&~n.indexOf("rad")?Pi:1)-r,l=r+h+"deg";return u&&("short"===(s=n.split("_")[1])&&(h%=o)!==h%180&&(h+=h<0?o:-360),"cw"===s&&h<0?h=(h+36e9)%o-~~(h/o)*o:"ccw"===s&&h>0&&(h=(h-36e9)%o-~~(h/o)*o)),t._pt=a=new yi(t._pt,e,i,r,h,qi),a.e=l,a.u="deg",t._props.push(i),a},Ar=function(t,e){for(var i in e)t[i]=e[i];return t},Dr=function(t,e,i){var r,n,s,a,o,u,h,l=Ar({},i._gsap),c=i.style;for(n in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[Ji]=e,r=Tr(i,1),ur(i,Ji),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Ji],c[Ji]=e,r=Tr(i,1),c[Ji]=s),Di)(s=l[n])!==(a=r[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=ue(s)!==(h=ue(a))?cr(i,n,s,h):parseFloat(s),u=parseFloat(a),t._pt=new yi(t._pt,r,n,o,u-o,Vi),t._pt.u=h||0,t._props.push(n));Ar(r,l)};kt("padding,margin,Width,Radius",(function(t,e){var i="Top",r="Right",n="Bottom",s="Left",a=(e<3?[i,r,n,s]:[i+s,i+r,n+r,n+s]).map((function(i){return e<2?t+i:"border"+i+t}));gr[e>1?"border"+t:t]=function(t,e,i,r,n){var s,o;if(arguments.length<4)return s=a.map((function(e){return fr(t,e,i)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(r+"").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 Pr,Lr,Ir,Br={name:"css",register:rr,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,r,n){var s,a,o,u,h,l,c,f,p,d,m,g,_,v,y,b,x,w,T,k=this._props,O=t.style,S=i.vars.startAt;for(c in Ei||rr(),e)if("autoRound"!==c&&(a=e[c],!gt[c]||!Ke(c,e,i,r,t,n)))if(h=typeof a,l=gr[c],"function"===h&&(h=typeof(a=a.call(i,r,t,n))),"string"===h&&~a.indexOf("random(")&&(a=ye(a)),l)l(this,t,c,a,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),a+="",Ae.lastIndex=0,Ae.test(s)||(f=ue(s),p=ue(a)),p?f!==p&&(s=cr(t,c,s,p)+p):f&&(a+=f),this.add(O,"setProperty",s,a,r,n,0,0,c),k.push(c);else if("undefined"!==h){if(S&&c in S?(s="function"==typeof S[c]?S[c].call(i,r,t,n):S[c],Y(s)&&~s.indexOf("random(")&&(s=ye(s)),ue(s+"")||(s+=B.units[c]||ue(fr(t,c))||""),"="===(s+"").charAt(1)&&(s=fr(t,c))):s=fr(t,c),u=parseFloat(s),(d="string"===h&&"="===a.charAt(1)&&a.substr(0,2))&&(a=a.substr(2)),o=parseFloat(a),c in Fi&&("autoAlpha"===c&&(1===u&&"hidden"===fr(t,"visibility")&&o&&(u=0),hr(this,O,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==c&&"transform"!==c&&~(c=Fi[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in Di)if(g||((_=t._gsap).renderTransform&&!e.parseTransform||Tr(t,e.parseTransform),v=!1!==e.smoothOrigin&&_.smooth,(g=this._pt=new yi(this._pt,O,Ji,0,1,_.renderTransform,_,0,-1)).dep=1),"scale"===c)this._pt=new yi(this._pt,_,"scaleY",_.scaleY,(d?Et(_.scaleY,d+o):o)-_.scaleY||0),k.push("scaleY",c),c+="X";else{if("transformOrigin"===c){x=void 0,w=void 0,T=void 0,x=(b=a).split(" "),w=x[0],T=x[1]||"50%","top"!==w&&"bottom"!==w&&"left"!==T&&"right"!==T||(b=w,w=T,T=b),x[0]=dr[w]||w,x[1]=dr[T]||T,a=x.join(" "),_.svg?wr(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==_.zOrigin&&hr(this,_,"zOrigin",_.zOrigin,p),hr(this,O,c,kr(s),kr(a)));continue}if("svgOrigin"===c){wr(t,a,1,v,0,this);continue}if(c in vr){Mr(this,_,c,u,d?Et(u,d+a):a);continue}if("smoothOrigin"===c){hr(this,_,"smooth",_.smooth,a);continue}if("force3D"===c){_[c]=a;continue}if("transform"===c){Dr(this,a,t);continue}}else c in O||(c=ir(c)||c);if(m||(o||0===o)&&(u||0===u)&&!zi.test(a)&&c in O)o||(o=0),(f=(s+"").substr((u+"").length))!==(p=ue(a)||(c in B.units?B.units[c]:f))&&(u=cr(t,c,s,p)),this._pt=new yi(this._pt,m?_:O,c,u,(d?Et(u,d+o):o)-u,m||"px"!==p&&"zIndex"!==c||!1===e.autoRound?Vi:Xi),this._pt.u=p||0,f!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Ni);else if(c in O)pr.call(this,t,c,s,d?d+a:a);else{if(!(c in t)){ht(c,a);continue}this.add(t,c,s||t[c],d?d+a:a,r,n)}k.push(c)}y&&vi(this)},get:fr,aliases:Fi,getSetter:function(t,e,i){var r=Fi[e];return r&&r.indexOf(",")<0&&(e=r),e in Di&&e!==Zi&&(t._gsap.x||fr(t,"x"))?i&&Mi===i?"scale"===e?$i:Hi:(Mi=i||{},"scale"===e?Qi:Gi):t.style&&!W(t.style[e])?Ui:~e.indexOf("-")?Wi:li(t,e)},core:{_removeProperty:ur,_getMatrix:xr}};Ti.utils.checkPrefix=ir,Ir=kt((Pr="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Lr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Di[t]=1})),kt(Lr,(function(t){B.units[t]="deg",vr[t]=1})),Fi[Ir[13]]=Pr+","+Lr,kt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Fi[e[1]]=Ir[e[0]]})),kt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){B.units[t]="px"})),Ti.registerPlugin(Br);var Rr=Ti.registerPlugin(Br)||Ti;Rr.core.Tween;const zr=(t,e,i)=>(1-i)*t+i*e;let Fr={x:0,y:0};window.addEventListener("mousemove",(t=>Fr=(t=>({x:t.clientX,y:t.clientY}))(t)));class Vr{enter(){this.renderedStyles.radius.current=this.radiusOnEnter,this.renderedStyles.opacity.current=this.opacityOnEnter,this.filterTimeline.restart()}leave(){this.renderedStyles.radius.current=this.radius,this.renderedStyles.opacity.current=1,this.filterTimeline.progress(1).kill()}createFilterTimeline(){this.filterTimeline=Rr.timeline({paused:!0,onStart:()=>{this.DOM.inner.style.filter=`url(${this.filterId}`},onUpdate:()=>{this.DOM.feTurbulence.setAttribute("baseFrequency",this.primitiveValues.turbulence)},onComplete:()=>{this.DOM.inner.style.filter="none"}}).to(this.primitiveValues,{duration:3,ease:"none",repeat:-1,yoyo:!0,startAt:{turbulence:.15},turbulence:.13})}render(){this.renderedStyles.tx.current=Fr.x-this.bounds.width/2,this.renderedStyles.ty.current=Fr.y-this.bounds.height/2;for(const t in this.renderedStyles)this.renderedStyles[t].previous=zr(this.renderedStyles[t].previous,this.renderedStyles[t].current,this.renderedStyles[t].amt);this.DOM.el.style.transform=`translateX(${this.renderedStyles.tx.previous}px) translateY(${this.renderedStyles.ty.previous}px)`,this.DOM.inner.setAttribute("r",this.renderedStyles.radius.previous),this.DOM.el.style.opacity=this.renderedStyles.opacity.previous,requestAnimationFrame((()=>this.render()))}constructor(t){n(this,"DOM",{el:null,inner:null,feTurbulence:null}),n(this,"radiusOnEnter",30),n(this,"opacityOnEnter",1),n(this,"radius",void 0),n(this,"renderedStyles",{tx:{previous:0,current:0,amt:.2},ty:{previous:0,current:0,amt:.2},radius:{previous:20,current:20,amt:.2},opacity:{previous:1,current:1,amt:.2}}),n(this,"bounds",void 0),n(this,"filterId","#cursor-filter"),n(this,"primitiveValues",{turbulence:0}),this.DOM.el=t,this.DOM.inner=this.DOM.el.querySelector(".cursor__inner"),this.DOM.feTurbulence=document.querySelector(`${this.filterId} > feTurbulence`),this.createFilterTimeline(),this.DOM.el.style.opacity=0,this.bounds=this.DOM.el.getBoundingClientRect(),this.radiusOnEnter=this.DOM.el.dataset.radiusEnter||this.radiusOnEnter,this.opacityOnEnter=this.DOM.el.dataset.opacityEnter||this.opacityOnEnter;for(const t in this.renderedStyles)this.renderedStyles[t].amt=this.DOM.el.dataset.amt||this.renderedStyles[t].amt;this.radius=this.DOM.inner.getAttribute("r"),this.renderedStyles.radius.previous=this.renderedStyles.radius.current=this.radius;const e=()=>{this.renderedStyles.tx.previous=this.renderedStyles.tx.current=Fr.x-this.bounds.width/2,this.renderedStyles.ty.previous=this.renderedStyles.ty.previous=Fr.y-this.bounds.height/2,this.DOM.el.style.opacity=1,requestAnimationFrame((()=>this.render())),window.removeEventListener("mousemove",e)};window.addEventListener("mousemove",e)}}var qr={}; 11 | /*! 12 | * imagesLoaded v5.0.0 13 | * JavaScript is all like "You images are done yet or what?" 14 | * MIT License 15 | */!function(t,e){qr?qr=e(t,r("4hJWI")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:qr,(function(t,e){let i=t.jQuery,r=t.console;function n(t,e,s){if(!(this instanceof n))return new n(t,e,s);let a=t;var o;("string"==typeof t&&(a=document.querySelectorAll(t)),a)?(this.elements=(o=a,Array.isArray(o)?o:"object"==typeof o&&"number"==typeof o.length?[...o]:[o]),this.options={},"function"==typeof e?s=e:Object.assign(this.options,e),s&&this.on("always",s),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):r.error(`Bad element for imagesLoaded ${a||t}`)}n.prototype=Object.create(e.prototype),n.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const s=[1,9,11];n.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!s.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const a=/url\((['"])?(.*?)\1\)/gi;function o(t){this.img=t}function u(t,e){this.url=t,this.element=e,this.img=new Image}return n.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=a.exec(e.backgroundImage);for(;null!==i;){let r=i&&i[2];r&&this.addBackground(r,t),i=a.exec(e.backgroundImage)}},n.prototype.addImage=function(t){let e=new o(t);this.images.push(e)},n.prototype.addBackground=function(t,e){let i=new u(t,e);this.images.push(i)},n.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},n.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&r&&r.log(`progress: ${i}`,t,e)},n.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},o.prototype=Object.create(e.prototype),o.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.img.crossOrigin&&(this.proxyImage.crossOrigin=this.img.crossOrigin),this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.currentSrc||this.img.src)},o.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},o.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,r="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,r,e])},o.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},o.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},o.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},o.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype=Object.create(o.prototype),u.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},u.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},n.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new n(this,t,e).jqDeferred.promise(i(this))})},n.makeJQueryPlugin(),n})); 16 | /*! 17 | * matrix 3.10.2 18 | * https://greensock.com 19 | * 20 | * Copyright 2008-2022, GreenSock. All rights reserved. 21 | * Subject to the terms at https://greensock.com/standard-license or for 22 | * Club GreenSock members, the agreement issued with that membership. 23 | * @author: Jack Doyle, jack@greensock.com 24 | */var Nr,Xr,Yr,jr,Ur,Wr,Hr,$r,Qr,Gr="transform",Jr=Gr+"Origin",Zr=function(t){var e=t.ownerDocument||t;!(Gr in t.style)&&"msTransform"in t.style&&(Jr=(Gr="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(Xr=window,Hr=new ln,e){Nr=e,Yr=e.documentElement,jr=e.body,($r=Nr.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),r=e.createElement("div");jr.appendChild(i),i.appendChild(r),i.style.position="static",i.style[Gr]="translate3d(0,0,1px)",Qr=r.offsetParent!==i,jr.removeChild(i)}return e},Kr=[],tn=[],en=function(){return Xr.pageYOffset||Nr.scrollTop||Yr.scrollTop||jr.scrollTop||0},rn=function(){return Xr.pageXOffset||Nr.scrollLeft||Yr.scrollLeft||jr.scrollLeft||0},nn=function(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)},sn=function t(e){return"fixed"===Xr.getComputedStyle(e).position||((e=e.parentNode)&&1===e.nodeType?t(e):void 0)},an=function t(e,i){if(e.parentNode&&(Nr||Zr(e))){var r=nn(e),n=r?r.getAttribute("xmlns")||"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s=r?i?"rect":"g":"div",a=2!==i?0:100,o=3===i?100:0,u="position:absolute;display:block;pointer-events:none;margin:0;padding:0;",h=Nr.createElementNS?Nr.createElementNS(n.replace(/^https/,"http"),s):Nr.createElement(s);return i&&(r?(Wr||(Wr=t(e)),h.setAttribute("width",.01),h.setAttribute("height",.01),h.setAttribute("transform","translate("+a+","+o+")"),Wr.appendChild(h)):(Ur||((Ur=t(e)).style.cssText=u),h.style.cssText=u+"width:0.1px;height:0.1px;top:"+o+"px;left:"+a+"px",Ur.appendChild(h))),h}throw"Need document and parent."},on=function(t){var e,i=t.getCTM();return i||(e=t.style[Gr],t.style[Gr]="none",t.appendChild($r),i=$r.getCTM(),t.removeChild($r),e?t.style[Gr]=e:t.style.removeProperty(Gr.replace(/([A-Z])/g,"-$1").toLowerCase())),i||Hr.clone()},un=function(t,e){var i,r,n,s,a,o,u=nn(t),h=t===u,l=u?Kr:tn,c=t.parentNode;if(t===Xr)return t;if(l.length||l.push(an(t,1),an(t,2),an(t,3)),i=u?Wr:Ur,u)h?(s=-(n=on(t)).e/n.a,a=-n.f/n.d,r=Hr):(n=t.getBBox(),r=(r=t.transform?t.transform.baseVal:{}).numberOfItems?r.numberOfItems>1?function(t){for(var e=new ln,i=0;i4&&(s=n.offsetLeft,a=n.offsetTop,n=0);if("absolute"!==(o=Xr.getComputedStyle(t)).position&&"fixed"!==o.position)for(r=t.offsetParent;c&&c!==r;)s+=c.scrollLeft||0,a+=c.scrollTop||0,c=c.parentNode;(n=i.style).top=t.offsetTop-a+"px",n.left=t.offsetLeft-s+"px",n[Gr]=o[Gr],n[Jr]=o[Jr],n.position="fixed"===o.position?"fixed":"absolute",t.parentNode.appendChild(i)}return i},hn=function(t,e,i,r,n,s,a){return t.a=e,t.b=i,t.c=r,t.d=n,t.e=s,t.f=a,t},ln=function(){function t(t,e,i,r,n,s){void 0===t&&(t=1),void 0===e&&(e=0),void 0===i&&(i=0),void 0===r&&(r=1),void 0===n&&(n=0),void 0===s&&(s=0),hn(this,t,e,i,r,n,s)}var e=t.prototype;return e.inverse=function(){var t=this.a,e=this.b,i=this.c,r=this.d,n=this.e,s=this.f,a=t*r-e*i||1e-10;return hn(this,r/a,-e/a,-i/a,t/a,(i*s-r*n)/a,-(t*s-e*n)/a)},e.multiply=function(t){var e=this.a,i=this.b,r=this.c,n=this.d,s=this.e,a=this.f,o=t.a,u=t.c,h=t.b,l=t.d,c=t.e,f=t.f;return hn(this,o*e+h*r,o*i+h*n,u*e+l*r,u*i+l*n,s+c*e+f*r,a+c*i+f*n)},e.clone=function(){return new t(this.a,this.b,this.c,this.d,this.e,this.f)},e.equals=function(t){var e=this.a,i=this.b,r=this.c,n=this.d,s=this.e,a=this.f;return e===t.a&&i===t.b&&r===t.c&&n===t.d&&s===t.e&&a===t.f},e.apply=function(t,e){void 0===e&&(e={});var i=t.x,r=t.y,n=this.a,s=this.b,a=this.c,o=this.d,u=this.e,h=this.f;return e.x=i*n+r*a+u||0,e.y=i*s+r*o+h||0,e},t}();function cn(t,e,i,r){if(!t||!t.parentNode||(Nr||Zr(t)).documentElement===t)return new ln;var n=function(t){for(var e,i;t&&t!==jr;)(i=t._gsap)&&i.uncache&&i.get(t,"x"),i&&!i.scaleX&&!i.scaleY&&i.renderTransform&&(i.scaleX=i.scaleY=1e-4,i.renderTransform(1,i),e?e.push(i):e=[i]),t=t.parentNode;return e}(t),s=nn(t)?Kr:tn,a=un(t,i),o=s[0].getBoundingClientRect(),u=s[1].getBoundingClientRect(),h=s[2].getBoundingClientRect(),l=a.parentNode,c=!r&&sn(t),f=new ln((u.left-o.left)/100,(u.top-o.top)/100,(h.left-o.left)/100,(h.top-o.top)/100,o.left+(c?0:rn()),o.top+(c?0:en()));if(l.removeChild(a),n)for(o=n.length;o--;)(u=n[o]).scaleX=u.scaleY=0,u.renderTransform(1,u);return e?f.inverse():f}var fn,pn,dn,mn,gn,_n,vn,yn=1,bn=function(t,e){return t.actions.forEach((function(t){return t.vars[e]&&t.vars[e](t)}))},xn={},wn=180/Math.PI,Tn=Math.PI/180,kn={},On={},Sn={},En=function(t){return"string"==typeof t?t.split(" ").join("").split(","):t},Cn=En("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),Mn=En("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),An=function(t){return fn(t)[0]||console.warn("Element not found:",t)},Dn=function(t){return Math.round(1e4*t)/1e4||0},Pn=function(t,e,i){return t.forEach((function(t){return t.classList[i](e)}))},Ln={zIndex:1,kill:1,simple:1,spin:1,clearProps:1,targets:1,toggleClass:1,onComplete:1,onUpdate:1,onInterrupt:1,onStart:1,delay:1,repeat:1,repeatDelay:1,yoyo:1,scale:1,fade:1,absolute:1,props:1,onEnter:1,onLeave:1,custom:1,paused:1,nested:1,prune:1,absoluteOnLeave:1},In={zIndex:1,simple:1,clearProps:1,scale:1,absolute:1,fitChild:1,getVars:1,props:1},Bn=function(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()},Rn=function(t,e){var i,r={};for(i in t)e[i]||(r[i]=t[i]);return r},zn={},Fn=function(t){var e=zn[t]=En(t);return Sn[t]=e.concat(Mn),e},Vn=function t(e,i,r){void 0===r&&(r=0);for(var n=e.parentNode,s=1e3*Math.pow(10,r)*(i?-1:1),a=i?900*-s:0;e;)a+=s,e=e.previousSibling;return n?a+t(n,i,r+1):a},qn=function(t,e,i){return t.forEach((function(t){return t.d=Vn(i?t.element:t.t,e)})),t.sort((function(t,e){return t.d-e.d})),t},Nn=function(t,e){for(var i,r,n=t.element.style,s=t.css=t.css||[],a=e.length;a--;)r=n[i=e[a]]||n.getPropertyValue(i),s.push(r?i:On[i]||(On[i]=Bn(i)),r);return n},Xn=function(t){var e=t.css,i=t.element.style,r=0;for(t.cache.uncache=1;r0&&B&&(u.style.opacity=Q?g.opacity-_.opacity:"0"),Zn(g,_,I,V)):_.isVisible!==g.isVisible&&(_.isVisible?g.isVisible||(_.css=g.css,j.push(_),U.splice(o--,1),T&&P&&Zn(g,_,I,V)):(g.isVisible&&Y.push(g),U.splice(o--,1))),I||(u.style.maxWidth=Math.max(g.width,_.width)+"px",u.style.maxHeight=Math.max(g.height,_.height)+"px",u.style.minWidth=Math.min(g.width,_.width)+"px",u.style.minHeight=Math.min(g.height,_.height)+"px"),P&&D&&u.classList.add(D)):U.splice(o--,1),f.push(g);var e;if(D&&(e=f.map((function(t){return t.element})),P&&e.forEach((function(t){return t.classList.remove(D)}))),rs(!1),I?(q.scaleX=function(t){return U[t].a.scaleX},q.scaleY=function(t){return U[t].a.scaleY}):(q.width=function(t){return U[t].a.width+"px"},q.height=function(t){return U[t].a.height+"px"},q.autoRound=i.autoRound||!1),q.x=function(t){return U[t].a.x+"px"},q.y=function(t){return U[t].a.y+"px"},q.rotation=function(t){return U[t].a.rotation+(z?360*$(t,c[t],c):0)},q.skewX=function(t){return U[t].a.skewX},c=U.map((function(t){return t.t})),(L||0===L)&&(q.modifiers={zIndex:function(){return L}},q.zIndex=L,q.immediateRender=!1!==i.immediateRender),B&&(q.opacity=function(t){return U[t].sd<0?0:U[t].sd>0?U[t].a.opacity:"+=0"}),W.length){R=pn.utils.distribute(R);var r=c.slice(W.length);q.stagger=function(t,e){return R(~W.indexOf(e)?c.indexOf(U[t].swap.t):t,e,r)}}if(Cn.forEach((function(t){return i[t]&&N.eventCallback(t,i[t],i[t+"Params"])})),O&&c.length)for(s in X=Rn(q,Ln),"scale"in O&&(O.scaleX=O.scaleY=O.scale,delete O.scale),O)(n=Rn(O[s],In))[s]=q[s],!("duration"in n)&&"duration"in q&&(n.duration=q.duration),n.stagger=q.stagger,G.call(N,c,n,0),delete X[s];(c.length||j.length||Y.length)&&(D&&N.add((function(){return Pn(e,D,N._zTime<0?"remove":"add")}),0)&&!E&&Pn(e,D,"add"),c.length&&G.call(N,c,X,0)),Jn(x,Y,N),Jn(w,j,N);var p=dn&&dn.timeline;p&&(p.add(N,0),dn._final.push((function(){return Yn(U,!b)}))),a=N.duration(),N.call((function(){var t=N.time()>=a;t&&!p&&Yn(U,!b),D&&Pn(e,D,t?"remove":"add")}))},k&&(T=U.filter((function(t){return!t.sd&&!t.a.isVisible&&t.b.isVisible})).map((function(t){return t.a.element}))),dn)?(T&&(v=dn._abs).push.apply(v,Wn(U,T)),dn._run.push(m)):(T&&Hn(Wn(U,T)),m());return dn?dn.timeline:N},ss=function t(e){e.vars.onInterrupt&&e.vars.onInterrupt.apply(e,e.vars.onInterruptParams||[]),e.getChildren(!0,!1,!0).forEach(t)},as=function(t,e){if(t&&t.progress()<1&&!t.paused())return e&&(ss(t),e<2&&t.progress(1),t.kill()),!0},os=function(t){for(var e,i=t.idLookup={},r=t.alt={},n=t.elementStates,s=n.length;s--;)i[(e=n[s]).id]?r[e.id]=e:i[e.id]=e},us=function(){function t(t,e,i){if(this.props=e&&e.props,this.simple=!(!e||!e.simple),i)this.targets=Gn(t),this.elementStates=t,os(this);else{this.targets=fn(t);var r=e&&(!1===e.kill||e.batch&&!e.kill);dn&&!r&&dn._kill.push(this),this.update(r||!!dn)}}var e=t.prototype;return e.update=function(t){var e=this;return this.elementStates=this.targets.map((function(t){return new hs(t,e.props,e.simple)})),os(this),this.interrupt(t),this.recordInlineStyles(),this},e.clear=function(){return this.targets.length=this.elementStates.length=0,os(this),this},e.fit=function(t,e,i){for(var r,n,s=qn(this.elementStates.slice(0),!1,!0),a=(t||this).idLookup,o=0;o=0&&this.actions.splice(e,1),this},e.getState=function(t){var e=this,i=dn,r=mn;return dn=this,this.state.clear(),this._kill.length=0,this.actions.forEach((function(i){i.vars.getState&&(i.states.length=0,mn=i,i.state=i.vars.getState(i)),t&&i.states.forEach((function(t){return e.state.add(t)}))})),mn=r,dn=i,this.killConflicts(),this},e.animate=function(){var t,e,i=this,r=dn,n=this.timeline,s=this.actions.length;for(dn=this,n.clear(),this._abs.length=this._final.length=this._run.length=0,this.actions.forEach((function(t){t.vars.animate&&t.vars.animate(t);var e,i,r=t.vars.onEnter,n=t.vars.onLeave,s=t.targets;s&&s.length&&(r||n)&&(e=new us,t.states.forEach((function(t){return e.add(t)})),(i=e.compare(fs.getState(s))).enter.length&&r&&r(i.enter),i.leave.length&&n&&n(i.leave))})),Hn(this._abs),this._run.forEach((function(t){return t()})),e=n.duration(),t=this._final.slice(0),n.add((function(){e<=n.time()&&(t.forEach((function(t){return t()})),bn(i,"onComplete"))})),dn=r;s--;)this.actions[s].vars.once&&this.actions[s].kill();return bn(this,"onStart"),n.restart(),this},e.loadState=function(t){t||(t=function(){return 0});var e=[];return this.actions.forEach((function(i){if(i.vars.loadState){var r,n=function n(s){s&&(i.targets=s),~(r=e.indexOf(n))&&(e.splice(r,1),e.length||t())};e.push(n),i.vars.loadState(n)}})),e.length||t(),this},e.setState=function(){return this.actions.forEach((function(t){return t.targets=t.vars.setState&&t.vars.setState(t)})),this},e.killConflicts=function(t){return this.state.interrupt(t),this._kill.forEach((function(e){return e.interrupt(t)})),this},e.run=function(t,e){var i=this;return this!==dn&&(t||this.getState(e),this.loadState((function(){i._killed||(i.setState(),i.animate())}))),this},e.clear=function(t){this.state.clear(),t||(this.actions.length=0)},e.getStateById=function(t){for(var e,i=this.actions.length;i--;)if(e=this.actions[i].getStateById(t))return e;return this.state.idLookup[t]&&this.state},e.kill=function(){this._killed=1,this.clear(),delete xn[this.id]},t}(),fs=function(){function t(){}return t.getState=function(e,i){var r=Kn(e,i);return mn&&mn.states.push(r),i&&i.batch&&t.batch(i.batch).state.add(r),r},t.from=function(t,e){return"clearProps"in(e=e||{})||(e.clearProps=!0),ns(t,Kn(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,-1)},t.to=function(t,e){return ns(t,Kn(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,1)},t.fromTo=function(t,e,i){return ns(t,e,i)},t.fit=function(t,e,i){var r=i?Rn(i,In):{},n=i||r,s=n.absolute,a=n.scale,o=n.getVars,u=n.props,h=n.runBackwards,l=n.onComplete,c=n.simple,f=i&&i.fitChild&&An(i.fitChild),p=$n(e,u,c,t),d=$n(t,0,c,p),m=u?Sn[u]:Mn;return u&&Qn(r,p.props),h&&(Nn(d,m),"immediateRender"in r||(r.immediateRender=!0),r.onComplete=function(){Xn(d),l&&l.apply(this,arguments)}),s&&Un(d,p),r=Zn(d,p,a||f,u,f,r.duration||o?r:0),o?r:r.duration?pn.to(d.element,r):null},t.makeAbsolute=function(t,e){return(t instanceof us?t:new us(t,e)).makeAbsolute()},t.batch=function(t){return t||(t="default"),xn[t]||(xn[t]=new cs(t))},t.killFlipsOf=function(t,e){(t instanceof us?t.targets:fn(t)).forEach((function(t){return t&&as(t._flip,!1!==e?1:2)}))},t.isFlipping=function(e){var i=t.getByTarget(e);return!!i&&i.isActive()},t.getByTarget=function(t){return(An(t)||kn)._flip},t.getElementState=function(t,e){return new hs(An(t),e)},t.convertCoordinates=function(t,e,i){var r=cn(e,!0,!0).multiply(cn(t));return i?r.apply(i):r},t.register=function(t){if(gn="undefined"!=typeof document&&document.body){pn=t,Zr(gn),fn=pn.utils.toArray;var e=pn.utils.snap(.1);_n=function(t,i){return e(parseFloat(t)+i)}}},t}();fs.version="3.10.2","undefined"!=typeof window&&window.gsap&&window.gsap.registerPlugin(fs),Rr.registerPlugin(fs);const ps=document.querySelector(".intro"),ds=[...ps.querySelectorAll(".row__text.oh > span")],ms=[...ps.querySelectorAll(".image")],gs=[...document.querySelectorAll(".content")];let _s=[];gs.forEach((t=>{_s.push([...t.querySelectorAll(".oh > span")])}));const vs=[...document.querySelectorAll(".content > .content__row--image")],ys=[...document.querySelectorAll(".content button.content__back")];var bs;ms.forEach(((t,e)=>{t.addEventListener("click",(()=>{((t,e)=>{const i=ms.filter((e=>e!=t)).map((t=>t.querySelector(".image__inner")));Rr.timeline({defaults:{duration:1.1,ease:"power4.inOut"}}).addLabel("start",0).add((()=>{const i=fs.getState(t);vs[e].appendChild(t),fs.from(i,{duration:1.2,ease:"power4.inOut",absolute:!0}),ps.classList.add("intro--close"),gs[e].classList.add("content--open"),Rr.set(ys[e],{xPercent:20,opacity:0}),Rr.set(_s[e],{yPercent:101})}),"start").to([ds,i],{xPercent:(t,e)=>{switch(e.dataset.direction){case"right":return 101;case"left":return-101;default:return 0}},yPercent:(t,e)=>{switch(e.dataset.direction){case"top":return-101;case"bottom":return 101;default:return 0}}},"start").addLabel("content","start+=0.7").to(_s[e],{ease:"expo",yPercent:0},"content").to(ys[e],{ease:"expo",xPercent:0,opacity:1},"content")})(t,e)}))})),ys.forEach(((t,e)=>{t.addEventListener("click",(()=>{((t,e)=>{const i=ms.filter((e=>e!=t)).map((t=>t.querySelector(".image__inner")));Rr.timeline({defaults:{duration:1.1,ease:"power4.inOut"},onComplete:()=>{ps.classList.remove("intro--close"),gs[e].classList.remove("content--open")}}).addLabel("start",0).to(_s[e],{duration:.8,yPercent:101},"start").to(ys[e],{duration:.8,xPercent:20,opacity:0},"start").add((()=>{const e=fs.getState(t);ps.appendChild(t),fs.from(e,{duration:1.2,ease:"power4.inOut",absolute:!0})}),"start").addLabel("intro","start+=0.6").to([ds,i],{ease:"expo",xPercent:0,yPercent:0},"intro")})(ms[e],e)}))})),new class{enter(){for(const t of this.cursorElements)t.enter()}leave(){for(const t of this.cursorElements)t.leave()}constructor(t,e="a"){n(this,"DOM",{elements:null}),n(this,"cursorElements",[]),this.DOM.elements=t,[...this.DOM.elements].forEach((t=>this.cursorElements.push(new Vr(t)))),[...document.querySelectorAll(e)].forEach((t=>{t.addEventListener("mouseenter",(()=>this.enter())),t.addEventListener("mouseleave",(()=>this.leave()))}))}}(document.querySelectorAll(".cursor"),"a, .intro > .image, .content__back"),Promise.all([((t="img")=>new Promise((e=>{qr(document.querySelectorAll(t),{background:!0},e)})))(".image__inner"),(bs="jdl7wqk",new Promise((t=>{WebFont.load({typekit:{id:bs},active:t})})))]).then((()=>document.body.classList.remove("loading"))); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Lines to Content Layout Animation | Codrops

Lines to Content Layout Animation

Facts do not
cease to exist
because they
are ignored

The progressive power
of frequencies

1
Mind Depth Souls
for freedom Made by Humans
in 2022

Quantum enhancement
for the world

2
Novel World Souls
for love Made by Humans
in 2022
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "linestolayout", 3 | "version": "1.0.0", 4 | "browserslist": "> 0.5%, last 2 versions, not dead", 5 | "description": "", 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/LinesToLayout.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/LinesToLayout/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "^2.4.1" 25 | }, 26 | "dependencies": { 27 | "gsap": "^3.10.2", 28 | "imagesloaded": "^5.0.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12px; 9 | } 10 | 11 | body #cdawrap { 12 | margin-left: auto; 13 | } 14 | 15 | body { 16 | margin: 0; 17 | --color-text: #111; 18 | --color-bg: #e5e5e5; 19 | --color-link: #000; 20 | --color-link-hover: #111; 21 | --padding-ver: 5vw; 22 | --padding-hor: 1rem; 23 | color: var(--color-text); 24 | background-color: var(--color-bg); 25 | font-family: acumin-pro, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | --cursor-stroke: #cc1111; 29 | } 30 | 31 | /* Page Loader */ 32 | .js .loading::before, 33 | .js .loading::after { 34 | content: ''; 35 | position: fixed; 36 | z-index: 1000; 37 | } 38 | 39 | .js .loading::before { 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background: var(--color-bg); 45 | } 46 | 47 | .js .loading::after { 48 | top: 50%; 49 | left: 50%; 50 | width: 100px; 51 | height: 100px; 52 | margin: -50px 0 0 -50px; 53 | border-radius: 50%; 54 | border: 2px solid var(--cursor-stroke); 55 | animation: loaderAnim 0.7s linear infinite alternate forwards; 56 | 57 | } 58 | 59 | @keyframes loaderAnim { 60 | to { 61 | opacity: 1; 62 | transform: scale3d(0.5,0.5,1); 63 | } 64 | } 65 | 66 | a { 67 | text-decoration: none; 68 | color: var(--color-link); 69 | outline: none; 70 | } 71 | 72 | a:hover { 73 | color: var(--color-link-hover); 74 | outline: none; 75 | } 76 | 77 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 78 | a:focus { 79 | /* Provide a fallback style for browsers 80 | that don't support :focus-visible */ 81 | outline: none; 82 | background: lightgrey; 83 | } 84 | 85 | a:focus:not(:focus-visible) { 86 | /* Remove the focus indicator on mouse-focus for browsers 87 | that do support :focus-visible */ 88 | background: transparent; 89 | } 90 | 91 | a:focus-visible { 92 | /* Draw a very noticeable focus style for 93 | keyboard-focus on browsers that do support 94 | :focus-visible */ 95 | outline: 2px solid red; 96 | background: transparent; 97 | } 98 | 99 | .hover-line, 100 | a.cda-sponsor-link { 101 | white-space: nowrap; 102 | overflow: hidden; 103 | position: relative; 104 | } 105 | 106 | .hover-line::before, 107 | .cda-sponsor-link::before { 108 | content: ''; 109 | height: 1px; 110 | width: 100%; 111 | background: currentColor; 112 | position: absolute; 113 | top: 92%; 114 | transition: transform 0.3s; 115 | transform-origin: 0% 50%; 116 | } 117 | 118 | .hover-line:hover::before, 119 | .cda-sponsor-link:hover::before { 120 | transform: scaleX(0); 121 | transform-origin: 100% 50%; 122 | } 123 | 124 | .unbutton { 125 | background: none; 126 | border: 0; 127 | padding: 0; 128 | margin: 0; 129 | font: inherit; 130 | cursor: pointer; 131 | } 132 | 133 | .unbutton:focus { 134 | outline: none; 135 | } 136 | 137 | main { 138 | display: grid; 139 | height: 100vh; 140 | padding: 0; 141 | position: relative; 142 | } 143 | 144 | .frame { 145 | grid-area: 1 / 1 / 2 / 2; 146 | text-align: center; 147 | text-transform: uppercase; 148 | display: flex; 149 | padding: var(--padding-hor) calc(var(--padding-ver) + 0.6vw); 150 | flex-direction: column; 151 | align-self: start; 152 | position: relative; 153 | z-index: 100; 154 | } 155 | 156 | .frame__title { 157 | font-size: 1rem; 158 | margin: 1rem 0; 159 | font-weight: normal; 160 | } 161 | 162 | .frame__links { 163 | display: inline-block; 164 | } 165 | 166 | .frame__links a { 167 | margin: 0 0.5rem; 168 | } 169 | 170 | .intro, 171 | .content-wrap { 172 | grid-area: 1 / 1 / 2 / 2; 173 | } 174 | 175 | .intro { 176 | flex: 1; 177 | display: grid; 178 | max-height: 40vmax; 179 | margin: auto 0; 180 | padding: 0 var(--padding-ver); 181 | grid-template-columns: 28% 1fr 22%; 182 | grid-template-rows: repeat(4,1fr); 183 | align-items: center; 184 | grid-column-gap: 3%; 185 | grid-row-gap: 2.5vmax; 186 | font-size: 8.625vw; 187 | line-height: 0.7; 188 | letter-spacing: -0.075vw; 189 | font-family: kudryashev-d-excontrast-sans, sans-serif; 190 | font-weight: 300; 191 | text-transform: uppercase; 192 | white-space: nowrap; 193 | } 194 | 195 | .intro--close { 196 | pointer-events: none; 197 | } 198 | 199 | .image { 200 | overflow: hidden; 201 | width: 100%; 202 | height: 100%; 203 | position: relative; 204 | display: grid; 205 | place-items: center; 206 | cursor: pointer; 207 | will-change: transform; 208 | } 209 | 210 | .image--up { 211 | grid-area: 2 / 3; 212 | } 213 | 214 | .image--down { 215 | grid-area: 3; 216 | } 217 | 218 | .image__inner { 219 | width: 100%; 220 | height: 100%; 221 | background-size: cover; 222 | background-position: 50% 50%; 223 | } 224 | 225 | .row--1 { 226 | grid-area: 1 / 1 / 2 / 4; 227 | } 228 | 229 | .row--2 { 230 | grid-area: 2 / 1 / 3 / 4; 231 | } 232 | 233 | .row--3 { 234 | grid-area: 3 / 2 / 4 / 4; 235 | } 236 | 237 | .row--4 { 238 | grid-area: 4 / 1 / 5 / 4; 239 | } 240 | 241 | .oh { 242 | position: relative; 243 | display: inline-block; 244 | overflow: hidden; 245 | } 246 | 247 | .oh > span { 248 | display: inline-block; 249 | will-change: transform; 250 | } 251 | 252 | .row__text span { 253 | padding-top: 1.5vw; 254 | } 255 | 256 | .content-wrap { 257 | align-self: stretch; 258 | display: grid; 259 | } 260 | 261 | .content { 262 | opacity: 0; 263 | pointer-events: none; 264 | grid-area: 1 / 1 / 2 / 2; 265 | display: grid; 266 | grid-template-columns: 100%; 267 | height: 100%; 268 | grid-template-rows: 1fr 50%; 269 | padding: 0 var(--padding-ver); 270 | } 271 | 272 | .content--open { 273 | opacity: 1; 274 | pointer-events: auto; 275 | } 276 | 277 | .content--open .content__row--image { 278 | pointer-events: none; 279 | } 280 | 281 | .content__row--text { 282 | padding: calc(var(--padding-hor) + 9rem) 0 2.5rem; 283 | display: grid; 284 | grid-template-areas: 'title number' 'back back' 'meta meta'; 285 | grid-template-columns: 1fr auto; 286 | grid-template-rows: auto 1fr auto; 287 | } 288 | 289 | .content__row--image + .content__row--text { 290 | padding-bottom: 1.5rem; 291 | } 292 | 293 | .content__title { 294 | grid-area: title; 295 | font-family: kudryashev-d-excontrast-sans, sans-serif; 296 | font-weight: 300; 297 | text-transform: uppercase; 298 | font-size: clamp(2rem,4vw,4rem); 299 | line-height: 1; 300 | margin: 0; 301 | } 302 | 303 | .content__number { 304 | grid-area: number; 305 | place-self: start end; 306 | font-size: clamp(3rem, 10vw, 10rem); 307 | line-height: 0.55; 308 | position: relative; 309 | display: flex; 310 | align-items: start; 311 | justify-content: start; 312 | align-content: start; 313 | } 314 | 315 | .content__number .oh > span { 316 | padding-bottom: 1.75vw; 317 | padding-left: 6vw; 318 | position: relative; 319 | display: block; 320 | } 321 | 322 | .content__number .oh > span::before { 323 | content: ""; 324 | width: 1px; 325 | height: 111%; 326 | background: currentColor; 327 | position: absolute; 328 | bottom: 0; 329 | left: 0; 330 | transform: rotate(25deg); 331 | transform-origin: 100% 100%; 332 | } 333 | 334 | .content__back { 335 | grid-area: back; 336 | justify-self: start; 337 | align-self: center; 338 | overflow: hidden; 339 | } 340 | 341 | .content__back svg { 342 | width: 100px; 343 | stroke: #000; 344 | stroke-width: 0.3px; 345 | transition: transform 0.2s; 346 | transform-origin: 0% 50%; 347 | transform: scaleX(0.8); 348 | } 349 | 350 | .content__back:hover svg { 351 | transform: scaleX(1); 352 | } 353 | 354 | .content__meta { 355 | grid-area: meta; 356 | text-transform: uppercase; 357 | display: flex; 358 | justify-content: space-between; 359 | font-size: clamp(0.75rem, 3vw, 1.5rem); 360 | line-height: 1; 361 | } 362 | 363 | .content__meta-text--center { 364 | text-align: center; 365 | } 366 | 367 | .cursor { 368 | display: none; 369 | } 370 | 371 | @media screen and (min-width: 53em) { 372 | .frame { 373 | flex-direction: row; 374 | } 375 | .frame__title { 376 | margin-top: 0; 377 | } 378 | .frame__links { 379 | margin-left: 8vw; 380 | } 381 | .content__row--text { 382 | padding: calc(var(--padding-hor) + 4rem) 0 2.5rem; 383 | } 384 | } 385 | 386 | @media (any-pointer:fine) { 387 | .cursor { 388 | position: fixed; 389 | top: 0; 390 | left: 0; 391 | display: block; 392 | pointer-events: none; 393 | z-index: 10000; 394 | } 395 | 396 | .cursor__inner { 397 | fill: none; 398 | stroke: var(--cursor-stroke); 399 | stroke-width: 1.3px; 400 | } 401 | 402 | .no-js .cursor { 403 | display: none; 404 | } 405 | } 406 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LinesToLayout/d4071daba81d188165be6b6254bfc6c28c21ef3a/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LinesToLayout/d4071daba81d188165be6b6254bfc6c28c21ef3a/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LinesToLayout/d4071daba81d188165be6b6254bfc6c28c21ef3a/src/img/2.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines to Content Layout Animation | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |

Lines to Content Layout Animation

22 | 27 |
28 |
29 |
Facts do not
30 |
cease to exist
31 |
because they
32 |
are ignored
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |

45 | The progressive power
46 | of frequencies 47 |

48 | 1 49 | 52 |
53 | Mind Depth 54 | Souls
for freedom 55 | Made by Humans
in 2022 56 |
57 |
58 |
59 |
60 |
61 |

62 | Quantum enhancement
63 | for the world 64 |

65 | 2 66 | 69 |
70 | Novel World 71 | Souls
for love 72 | Made by Humans
in 2022 73 |
74 |
75 |
76 |
77 |
78 |
79 | 80 | 81 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /src/js/cursor.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | 3 | /** 4 | * Linear interpolation 5 | * @param {Number} a - first value to interpolate 6 | * @param {Number} b - second value to interpolate 7 | * @param {Number} n - amount to interpolate 8 | */ 9 | const lerp = (a, b, n) => (1 - n) * a + n * b; 10 | 11 | /** 12 | * Gets the cursor position 13 | * @param {Event} ev - mousemove event 14 | */ 15 | const getCursorPos = ev => { 16 | return { 17 | x : ev.clientX, 18 | y : ev.clientY 19 | }; 20 | }; 21 | 22 | // Track the cursor position 23 | let cursor = {x: 0, y: 0}; 24 | window.addEventListener('mousemove', ev => cursor = getCursorPos(ev)); 25 | 26 | /** 27 | * Class representing a custom cursor. 28 | * A Cursor can have multiple elements/svgs 29 | */ 30 | export class Cursor { 31 | // DOM elements 32 | DOM = { 33 | // cursor elements (SVGs .cursor) 34 | elements: null, 35 | } 36 | // All CursorElement instances 37 | cursorElements = []; 38 | 39 | /** 40 | * Constructor. 41 | * @param {NodeList} Dom_elems - all .cursor elements 42 | * @param {String} triggerSelector - Trigger the cursor enter/leave method on the this selector returned elements. Default is all . 43 | */ 44 | constructor(Dom_elems, triggerSelector = 'a') { 45 | this.DOM.elements = Dom_elems; 46 | 47 | [...this.DOM.elements].forEach(el => this.cursorElements.push(new CursorElement(el))); 48 | 49 | [...document.querySelectorAll(triggerSelector)].forEach(link => { 50 | link.addEventListener('mouseenter', () => this.enter()); 51 | link.addEventListener('mouseleave', () => this.leave()); 52 | }); 53 | } 54 | /** 55 | * Mouseenter event 56 | */ 57 | enter() { 58 | for (const el of this.cursorElements) { 59 | el.enter(); 60 | } 61 | } 62 | 63 | /** 64 | * Mouseleave event 65 | */ 66 | leave() { 67 | for (const el of this.cursorElements) { 68 | el.leave(); 69 | } 70 | } 71 | } 72 | 73 | /** 74 | * Class representing a .cursor element 75 | */ 76 | class CursorElement { 77 | // DOM elements 78 | DOM = { 79 | // Main element (.cursor) 80 | el: null, 81 | // Inner element (.cursor__inner) 82 | inner: null, 83 | // feTurbulence element 84 | feTurbulence: null 85 | } 86 | // Scales value when entering an element 87 | radiusOnEnter = 30; 88 | // Opacity value when entering an element 89 | opacityOnEnter = 1; 90 | // radius 91 | radius; 92 | // Element style properties 93 | renderedStyles = { 94 | // With interpolation, we can achieve a smooth animation effect when moving the cursor. 95 | // The "previous" and "current" values are the values that will interpolate. 96 | // The returned value will be one between these two (previous and current) at a specific increment. 97 | // The "amt" is the amount to interpolate. 98 | // As an example, the following formula calculates the x-axis translation value to apply to the cursor element: 99 | // this.renderedStyles.tx.previous = lerp(this.renderedStyles.tx.previous, this.renderedStyles.tx.current, this.renderedStyles.tx.amt); 100 | 101 | // translation, scale and opacity values 102 | // The lower the amt, the slower the cursor "follows" the user gesture 103 | tx: {previous: 0, current: 0, amt: 0.2}, 104 | ty: {previous: 0, current: 0, amt: 0.2}, 105 | // The scale and opacity will change when hovering over any element specified in [triggerSelector] 106 | // Defaults are 1 for both properties 107 | //scale: {previous: 1, current: 1, amt: 0.2}, 108 | radius: {previous: 20, current: 20, amt: 0.2}, 109 | opacity: {previous: 1, current: 1, amt: 0.2} 110 | }; 111 | // Element size and position 112 | bounds; 113 | // SVG filter id 114 | filterId = '#cursor-filter'; 115 | // for the filter animation 116 | primitiveValues = {turbulence: 0}; 117 | 118 | /** 119 | * Constructor. 120 | */ 121 | constructor(DOM_el) { 122 | this.DOM.el = DOM_el; 123 | this.DOM.inner = this.DOM.el.querySelector('.cursor__inner'); 124 | this.DOM.feTurbulence = document.querySelector(`${this.filterId} > feTurbulence`); 125 | 126 | this.createFilterTimeline(); 127 | 128 | // Hide it initially 129 | this.DOM.el.style.opacity = 0; 130 | 131 | // Calculate size and position 132 | this.bounds = this.DOM.el.getBoundingClientRect(); 133 | 134 | // Check if any options passed in data attributes 135 | this.radiusOnEnter = this.DOM.el.dataset.radiusEnter || this.radiusOnEnter; 136 | this.opacityOnEnter = this.DOM.el.dataset.opacityEnter || this.opacityOnEnter; 137 | for (const key in this.renderedStyles) { 138 | this.renderedStyles[key].amt = this.DOM.el.dataset.amt || this.renderedStyles[key].amt; 139 | } 140 | 141 | this.radius = this.DOM.inner.getAttribute('r'); 142 | this.renderedStyles['radius'].previous = this.renderedStyles['radius'].current = this.radius; 143 | 144 | // Show the element and start tracking its position as soon as the user moves the cursor. 145 | const onMouseMoveEv = () => { 146 | // Set up the initial values to be the same 147 | this.renderedStyles.tx.previous = this.renderedStyles.tx.current = cursor.x - this.bounds.width/2; 148 | this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = cursor.y - this.bounds.height/2; 149 | // Show it 150 | this.DOM.el.style.opacity = 1; 151 | // Start rAF loop 152 | requestAnimationFrame(() => this.render()); 153 | // Remove the initial mousemove event 154 | window.removeEventListener('mousemove', onMouseMoveEv); 155 | }; 156 | window.addEventListener('mousemove', onMouseMoveEv); 157 | } 158 | 159 | /** 160 | * Mouseenter event 161 | * Scale up and fade out. 162 | */ 163 | enter() { 164 | this.renderedStyles['radius'].current = this.radiusOnEnter; 165 | this.renderedStyles['opacity'].current = this.opacityOnEnter; 166 | 167 | this.filterTimeline.restart(); 168 | } 169 | 170 | /** 171 | * Mouseleave event 172 | * Reset scale and opacity. 173 | */ 174 | leave() { 175 | this.renderedStyles['radius'].current = this.radius; 176 | this.renderedStyles['opacity'].current = 1; 177 | 178 | this.filterTimeline.progress(1).kill(); 179 | } 180 | 181 | createFilterTimeline() { 182 | this.filterTimeline = gsap.timeline({ 183 | paused: true, 184 | onStart: () => { 185 | this.DOM.inner.style.filter = `url(${this.filterId}`; 186 | }, 187 | onUpdate: () => { 188 | this.DOM.feTurbulence.setAttribute('baseFrequency', this.primitiveValues.turbulence); 189 | }, 190 | onComplete: () => { 191 | this.DOM.inner.style.filter = 'none'; 192 | } 193 | }) 194 | .to(this.primitiveValues, { 195 | duration: 3, 196 | ease: 'none', 197 | repeat: -1, 198 | yoyo: true, 199 | startAt: {turbulence: 0.15}, 200 | turbulence: 0.13 201 | }); 202 | } 203 | 204 | /** 205 | * Loop / Interpolation 206 | */ 207 | render() { 208 | // New cursor positions 209 | this.renderedStyles['tx'].current = cursor.x - this.bounds.width/2; 210 | this.renderedStyles['ty'].current = cursor.y - this.bounds.height/2; 211 | 212 | // Interpolation 213 | for (const key in this.renderedStyles ) { 214 | this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt); 215 | } 216 | 217 | // Apply interpolated values (smooth effect) 218 | this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`; 219 | this.DOM.inner.setAttribute('r', this.renderedStyles['radius'].previous); 220 | this.DOM.el.style.opacity = this.renderedStyles['opacity'].previous; 221 | 222 | // loop... 223 | requestAnimationFrame(() => this.render()); 224 | } 225 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { Cursor } from './cursor'; 2 | import { preloadImages, preloadFonts } from './utils'; 3 | import { gsap } from 'gsap'; 4 | import { Flip } from 'gsap/Flip'; 5 | 6 | gsap.registerPlugin(Flip); 7 | 8 | // intro section 9 | const intro = document.querySelector('.intro'); 10 | // an array with the intro text spans that we want to animate (data-direction will define the animation direction) 11 | const introTexts = [...intro.querySelectorAll('.row__text.oh > span')]; 12 | // an array with the intro images that will trigger the effect when clicked 13 | const images = [...intro.querySelectorAll('.image')]; 14 | // an array with the content sections. These will map with the images (one content element per image) 15 | const contents = [...document.querySelectorAll('.content')]; 16 | // an array of arrays for the content text spans (one sub array per content). 17 | let contentTexts = []; 18 | contents.forEach(content => { 19 | contentTexts.push([...content.querySelectorAll('.oh > span')]); 20 | }); 21 | // these will be the area where the intro image will be animated/moved to 22 | const contentRowImages = [...document.querySelectorAll('.content > .content__row--image')]; 23 | const contentBackCtrls = [...document.querySelectorAll('.content button.content__back')]; 24 | 25 | // Opens the content view when clicking on the intro images 26 | const openContent = (image, position) => { 27 | 28 | // Other intro images (we'll need to hide them) 29 | const otherImages = images.filter(el => el != image).map(el => el.querySelector('.image__inner')); 30 | 31 | gsap.timeline({ 32 | defaults: { 33 | duration: 1.1, 34 | ease: 'power4.inOut', 35 | } 36 | }) 37 | .addLabel('start', 0) 38 | .add(() => { 39 | // Get state 40 | const state = Flip.getState(image); 41 | // Change place 42 | contentRowImages[position].appendChild(image); 43 | // Flip 44 | Flip.from(state, { 45 | duration: 1.2, 46 | ease: 'power4.inOut', 47 | absolute: true 48 | }); 49 | 50 | intro.classList.add('intro--close'); 51 | contents[position].classList.add('content--open'); 52 | 53 | // hide back arrow ctrl 54 | gsap.set(contentBackCtrls[position], { 55 | xPercent: 20, 56 | opacity: 0 57 | }); 58 | // hide text spans 59 | gsap.set(contentTexts[position], { 60 | yPercent: 101 61 | }); 62 | }, 'start') 63 | .to([introTexts, otherImages], { 64 | xPercent: (_,target) => { 65 | switch (target.dataset.direction) { 66 | case 'right': return 101; 67 | case 'left': return -101; 68 | default: return 0; 69 | } 70 | }, 71 | yPercent: (_,target) => { 72 | switch (target.dataset.direction) { 73 | case 'top': return -101; 74 | case 'bottom': return 101; 75 | default: return 0; 76 | } 77 | } 78 | }, 'start') 79 | .addLabel('content', 'start+=0.7') 80 | .to(contentTexts[position], { 81 | ease: 'expo', 82 | yPercent: 0 83 | }, 'content') 84 | .to(contentBackCtrls[position], { 85 | ease: 'expo', 86 | xPercent: 0, 87 | opacity: 1 88 | }, 'content'); 89 | 90 | }; 91 | 92 | const closeContent = (image, position) => { 93 | 94 | // Other intro images (we'll need to hide them) 95 | const otherImages = images.filter(el => el != image).map(el => el.querySelector('.image__inner')); 96 | 97 | gsap.timeline({ 98 | defaults: { 99 | duration: 1.1, 100 | ease: 'power4.inOut', 101 | }, 102 | onComplete: () => { 103 | intro.classList.remove('intro--close'); 104 | contents[position].classList.remove('content--open'); 105 | } 106 | }) 107 | .addLabel('start', 0) 108 | .to(contentTexts[position], { 109 | duration: 0.8, 110 | yPercent: 101 111 | }, 'start') 112 | .to(contentBackCtrls[position], { 113 | duration: 0.8, 114 | xPercent: 20, 115 | opacity: 0 116 | }, 'start') 117 | .add(() => { 118 | // Get state 119 | const state = Flip.getState(image); 120 | // Change place 121 | intro.appendChild(image); 122 | // Flip 123 | Flip.from(state, { 124 | duration: 1.2, 125 | ease: 'power4.inOut', 126 | absolute: true 127 | }); 128 | }, 'start') 129 | .addLabel('intro', 'start+=0.6') 130 | .to([introTexts, otherImages], { 131 | ease: 'expo', 132 | xPercent: 0, 133 | yPercent: 0, 134 | /*stagger: { 135 | each: 0.08, 136 | grid: 'auto', 137 | from: 'random' 138 | }*/ 139 | }, 'intro'); 140 | 141 | }; 142 | 143 | // Images click event 144 | images.forEach((image, position) => { 145 | image.addEventListener('click', () => { 146 | openContent(image, position); 147 | }); 148 | }); 149 | 150 | contentBackCtrls.forEach((ctrl, position) => { 151 | ctrl.addEventListener('click', () => { 152 | closeContent(images[position], position); 153 | }); 154 | }); 155 | 156 | // Initialize custom cursor 157 | new Cursor(document.querySelectorAll('.cursor'), 'a, .intro > .image, .content__back'); 158 | 159 | // Preload images and fonts and remove loader 160 | Promise.all([ 161 | preloadImages('.image__inner'), 162 | preloadFonts('jdl7wqk') 163 | ]).then(() => document.body.classList.remove('loading')); -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | /** 4 | * Preload fonts 5 | * @param {String} id 6 | */ 7 | const preloadFonts = id => { 8 | return new Promise((resolve) => { 9 | WebFont.load({ 10 | typekit: { 11 | id: id 12 | }, 13 | active: resolve 14 | }); 15 | }); 16 | }; 17 | 18 | /** 19 | * Preload images 20 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img' 21 | */ 22 | const preloadImages = (selector = 'img') => { 23 | return new Promise((resolve) => { 24 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 25 | }); 26 | }; 27 | 28 | export { 29 | preloadFonts, 30 | preloadImages 31 | }; --------------------------------------------------------------------------------