├── .gitattributes ├── .gitignore ├── .htmlnanorc ├── LICENSE ├── README.md ├── dist ├── 1.1770e3b3.jpg ├── 10.f7990335.jpg ├── 11.ef4a18eb.jpg ├── 2.07ca36b5.jpg ├── 3.f6f48295.jpg ├── 4.516b9c03.jpg ├── 5.95d97ae8.jpg ├── 6.56a5d53b.jpg ├── 7.87dc6e8b.jpg ├── 8.0bda5054.jpg ├── 9.27ccf354.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 ├── 10.jpg ├── 11.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html └── js ├── index.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /.htmlnanorc: -------------------------------------------------------------------------------- 1 | { 2 | "minifySvg": false 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Image to Grid Transition 2 | 3 | A simple transition where a large image animates to its place in a grid. 4 | 5 | ![Image to Grid Transition featured image](https://tympanus.net/codrops/wp-content/uploads/2022/05/ImageToGridTransition.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=63608) 8 | 9 | [Demo](http://tympanus.net/Development/ImageToGridTransition/) 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/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/1.1770e3b3.jpg -------------------------------------------------------------------------------- /dist/10.f7990335.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/10.f7990335.jpg -------------------------------------------------------------------------------- /dist/11.ef4a18eb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/11.ef4a18eb.jpg -------------------------------------------------------------------------------- /dist/2.07ca36b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/2.07ca36b5.jpg -------------------------------------------------------------------------------- /dist/3.f6f48295.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/3.f6f48295.jpg -------------------------------------------------------------------------------- /dist/4.516b9c03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/4.516b9c03.jpg -------------------------------------------------------------------------------- /dist/5.95d97ae8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/5.95d97ae8.jpg -------------------------------------------------------------------------------- /dist/6.56a5d53b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/6.56a5d53b.jpg -------------------------------------------------------------------------------- /dist/7.87dc6e8b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/7.87dc6e8b.jpg -------------------------------------------------------------------------------- /dist/8.0bda5054.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/8.0bda5054.jpg -------------------------------------------------------------------------------- /dist/9.27ccf354.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/dist/9.27ccf354.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/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.parcelRequirec455;null==n&&((n=function(t){if(t in e)return e[t].exports;if(t in i){var n=i[t];delete i[t];var r={id:t,exports:{}};return e[t]=r,n.call(r.exports,r,r.exports),r.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){i[t]=e},t.parcelRequirec455=n),n.register("hobco",(function(t,e){!function(e,i){t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;var i=this._events=this._events||{},n=i[t]=i[t]||[];return n.includes(e)||n.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);var i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length)return this;var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];var n=this._onceEvents&&this._onceEvents[t],r=!0,s=!1,a=void 0;try{for(var o,u=i[Symbol.iterator]();!(r=(o=u.next()).done);r=!0){var h=o.value;n&&n[h]&&(this.off(t,h),delete n[h]),h.apply(this,e)}}catch(t){s=!0,a=t}finally{try{r||null==u.return||u.return()}finally{if(s)throw a}}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t}))}));var r={};function s(t,e){(null==e||e>t.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},Ut=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},Wt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},Ht=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},Qt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Gt=function t(e){return!e||e._ts&&t(e.parent)},Zt=function(t){return t._repeat?$t(t._tTime,t=t.duration()+t._rDelay)*t:0},$t=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Jt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Kt=function(t){return t._end=It(t._start+(t._tDur/Math.abs(t._ts||t._rts||X)||0))},te=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)),Kt(t),i._dirty||Ht(i,t)),t},ee=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Jt(t.rawTime(),e),(!e._dur||pe(0,e.totalDuration(),i)-e._tTime>X)&&e.render(i,!0)),Ht(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}},ie=function(t,e,i,n){return e.parent&&Wt(e),e._start=It(($(i)?i:i||t!==c?le(t,i,e):t._time)+e._delay),e._end=It(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),jt(t,e,"_first","_last",t._sort?"_start":0),ae(e)||(t._recent=e),n||ee(t,e),t},ne=function(t,e){return(ct.ScrollTrigger||mt("scrollTrigger",e))&&ct.ScrollTrigger.create(e,t)},re=function(t,e,i,n){return oi(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&_!==Ne.frame?(bt.push(t),t._lazy=[e,n],1):void 0:1},se=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},ae=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},oe=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?te(t,t._tTime=t._tDur*a):t.parent&&Kt(t),i||Ht(t.parent,t),t},ue=function(t){return t instanceof ei?Ht(t):oe(t,t._dur)},he={_start:0,endTime:vt,totalDuration:vt},le=function t(e,i,n){var r,s,a,o=e.labels,u=e._recent||he,h=e.duration()>=q?u.endTime(!1):e._dur;return G(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*(rt(n)?n[0]:n).totalDuration()),r>1?t(e,i.substr(0,r-1),n)+s:h+s)):null==i?h:+i},fe=function(t,e,i){var n,r,s=$(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=tt(r.vars.inherit)&&r.parent;o.immediateRender=tt(n.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new ci(e[0],o,e[a+1])},ce=function(t,e){return t||0===t?e(t):e},pe=function(t,e,i){return ie?e:i},de=function(t,e){return G(t)&&(e=ft.exec(t))?e[1]:""},me=[].slice,ge=function(t,e){return t&&K(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&K(t[0]))&&!t.nodeType&&t!==p},_e=function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var n;return G(t)&&!e||ge(t,1)?(n=i).push.apply(n,ve(t)):i.push(t)}))||i},ve=function(t,e,i){return!G(t)||i||!d&&qe()?rt(t)?_e(t,i):ge(t)?me.call(t,0):t?[t]:[]:me.call((e||m).querySelectorAll(t),0)},ye=function(t){return t.sort((function(){return.5-Math.random()}))},be=function(t){if(Z(t))return t;var e=K(t)?t:{each:t},i=Qe(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 G(n)?h=l={center:.5,edges:.5,end:1}[n]||0:!a&&o&&(h=n[0],l=n[1]),function(t,a,f){var c,p,d,m,g,_,v,y,b,x=(f||e).length,w=s[x];if(!w){if(!(b="auto"===e.grid?0:(e.grid||[1,q])[1])){for(v=-1e8;v<(v=f[b++].getBoundingClientRect().left)&&bv&&(v=g),gx?x-1:u?"y"===u?x/b:b:Math.max(b,x/b))||0)*("edges"===n?-1:1),w.b=x<0?r-x:r,w.u=de(e.amount||e.each)||0,i=i&&x<0?We(i):i}return x=(w[t]-w.min)/w.max||0,It(w.b+(i?i(x):x)*w.v)+w.u}},xe=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+($(i)?0:de(i))}},we=function(t,e){var i,n,r=rt(t);return!r&&K(t)&&(i=r=t.radius||q,t.values?(t=ve(t.values),(n=!$(t[0]))&&(i*=i)):t=xe(t.increment)),ce(e,r?Z(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=q,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},Ee=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&&bt.length&&Bt(),n?a.apply(r,n):a.call(r)},Me=function(t){return Wt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Ee(t,"onInterrupt"),t},Ae=function(t){var e=(t=!t.name&&t.default||t).name,i=Z(t),n=e&&!i&&t.init?function(){this._props=[]}:t,r={init:vt,render:xi,add:si,kill:Ti,modifier:wi,rawVars:0},s={targetTest:0,get:0,getSetter:_i,aliases:{},register:0};if(qe(),t!==n){if(wt[e])return;Vt(n,Vt(Xt(t,r),s)),Nt(n.prototype,Nt(r,Xt(t,s))),wt[n.prop=e]=n,t.targetTest&&(Ct.push(n),yt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}_t(e,n),t.register&&t.register(Ai,n,Si)},Pe=255,Ie={aqua:[0,Pe,Pe],lime:[0,Pe,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Pe],navy:[0,0,128],white:[Pe,Pe,Pe],olive:[128,128,0],yellow:[Pe,Pe,0],orange:[Pe,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Pe,0,0],pink:[Pe,192,203],cyan:[0,Pe,Pe],transparent:[Pe,Pe,Pe,0]},De=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)*Pe+.5|0},Le=function(t,e,i){var n,r,s,a,o,u,h,l,f,c,p=t?$(t)?[t>>16,t>>8&Pe,t&Pe]: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&Pe,p&Pe,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Pe,t&Pe]}else if("hsl"===t.substr(0,3))if(p=c=t.match(st),e){if(~t.indexOf("="))return p=t.match(at),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]=De(a+1/3,n,r),p[1]=De(a,n,r),p[2]=De(a-1/3,n,r);else p=t.match(st)||Ie.transparent;p=p.map(Number)}return e&&!c&&(n=p[0]/Pe,r=p[1]/Pe,s=p[2]/Pe,u=((h=Math.max(n,r,s))+(l=Math.min(n,r,s)))/2,h===l?a=o=0:(f=h-l,o=u>.5?f/(2-h-l):f/(h+l),a=h===n?(r-s)/f+(rO&&(M+=a-E),((i=(r=(A+=a)-M)-I)>0||o)&&(s=++T.frame,k=r-1e3*T.time,T.time=r/=1e3,I+=i+(i>=P?4:P-i),n=1),o||(b=x(t)),n)for(C=0;C=e&&C--},_listeners:D=[]}),qe=function(){return!y&&Ne.wake()},Xe={},Ye=/^[\d.\-M][\d.\-,\s]/,je=/["']/g,Ue=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("{")?[Ue(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/Y*(Math.asin(1/r)||0),o=function(t){return 1===t?1:r*Math.pow(2,-10*t)*Q((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Ze(o);return s=Y/s,u.config=function(i,n){return t(e,i,n)},u},Je=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)}:Ze(n);return r.config=function(i){return t(e,i)},r};At("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Ge(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}))})),Xe.Linear.easeNone=Xe.none=Xe.Linear.easeIn,Ge("Elastic",$e("in"),$e("out"),$e()),B=7.5625,z=1/(R=2.75),Ge("Bounce",(function(t){return 1-F(1-t)}),F=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,oe(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(qe(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(te(this,t),!i._dp||i.parent||ee(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)&&ie(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===X||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Rt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Zt(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)+Zt(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?$t(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?Jt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,this.totalTime(pe(-this._delay,this._tDur,e),!0),Kt(this),Qt(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):(qe(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==X&&(this._tTime-=X)))),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)&&ie(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(tt(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?Jt(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,ue(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,ue(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(le(this,t),tt(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,tt(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=Z(t)?t:Ft,r=function(){var t=e.then;e.then=null,Z(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(){Me(this)},t}();Vt(ti.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 ei=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=tt(e.sortChildren),c&&ie(e.parent||c,h(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&ne(h(n),e.scrollTrigger),n}l(e,t);var i=e.prototype;return i.to=function(t,e,i){return fe(0,arguments,this),this},i.from=function(t,e,i){return fe(1,arguments,this),this},i.fromTo=function(t,e,i,n){return fe(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,Yt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ci(t,e,le(this,i),1),this},i.call=function(t,e,i){return ie(this,ci.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 ci(t,i,le(this,r)),this},i.staggerFrom=function(t,e,i,n,r,s,a){return i.runBackwards=1,Yt(i).immediateRender=tt(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,Yt(n).immediateRender=tt(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,f,p,d,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!==c&&y>_&&t>=0&&(y=_),y!==this._tTime||i||b){if(g!==this._time&&v&&(y+=this._time-g,t+=this._time-g),n=y,f=this._start,u=!(l=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(n=It(y%o),y===_?(a=this._repeat,n=v):((a=~~(y/o))&&a===y/o&&(n=v,a--),n>v&&(n=v)),p=$t(this._tTime,o),!g&&this._tTime&&p!==a&&(p=a),d&&1&a&&(n=v-n,m=1),a!==p&&!this._lock){var x=d&&1&p,w=x===(d&&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:X);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=f,Kt(this),this.render(t,e,i);this._onUpdate&&!e&&Ee(this,"onUpdate",!0),(y===_&&this._tTime>=this.totalDuration()||!y&&g)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===_&&this._ts>0||!y&&this._ts<0)&&Wt(this,1),e||t<0&&!g||!y&&!g&&_||(Ee(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($(e)||(e=le(this,e,t)),!(t instanceof ti)){if(rt(t))return t.forEach((function(t){return i.add(t,e)})),this;if(G(t))return this.addLabel(t,e);if(!Z(t))return this;t=ci.delayedCall(0,t)}return this!==t?ie(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 ci?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 G(t)?this.removeLabel(t):Z(t)?this.killTweensOf(t):(Ut(this,t),t===this._recent&&(this._recent=this._last),Ht(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=It(Ne.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]=le(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var n=ci.delayedCall(0,e||vt,i);return n.data="isPause",this._hasPause=1,ie(this,n,le(this,t))},i.removePause=function(t){var e=this._first;for(t=le(this,t);e;)e._start===t&&"isPause"===e.data&&Wt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var n=this.getTweensOf(t,i),r=n.length;r--;)ii!==n[r]&&n[r].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,n=[],r=ve(t),s=this._first,a=$(e);s;)s instanceof ci?Lt(s._targets,r)&&(a?(!ii||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=le(n,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=ci.to(n,Vt({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())||X,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&&oe(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,Vt({startAt:{time:le(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),Oe(this,le(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),Oe(this,le(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+X)},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 Ht(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={}),Ht(this)},i.totalDuration=function(t){var e,i,n,r=0,s=this,a=s._last,o=q;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,ie(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;oe(s,s===c&&s._time>r?s._time:r,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(c._ts&&(Rt(c,Jt(t,c)),_=Ne.frame),Ne.frame>=kt){kt+=V.autoSleep||120;var e=c._first;if((!e||!e._ts)&&V.autoSleep&&Ne._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Ne.sleep()}}},e}(ti);Vt(ei.prototype,{_lock:0,_hasPause:0,_forcing:0});var ii,ni,ri=function(t,e,i,n,r,s,a){var o,u,h,l,f,c,p,d,m=new Si(this._pt,t,e,0,1,bi,null,r),g=0,_=0;for(m.b=i,m.e=n,i+="",(p=~(n+="").indexOf("random("))&&(n=Ce(n)),s&&(s(d=[i,n],t,e),i=d[0],n=d[1]),u=i.match(ut)||[];o=ut.exec(n);)l=o[0],f=n.substring(g,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[_++]&&(c=parseFloat(u[_-1])||0,m._pt={_next:m._pt,p:f||1===_?f:",",s:c,c:"="===l.charAt(1)?Dt(c,l)-c:parseFloat(l)-c,m:h&&h<4?Math.round:0},g=ut.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(P)!M&&(e._startAt=0);else if(i&&(x=!1),s=Vt({overwrite:!1,data:"isFromStart",lazy:x&&tt(w),immediateRender:x,stagger:0,parent:D},n),g&&(s[l.prop]=g),Wt(e._startAt=ci.set(I,s)),i<0&&e._startAt.render(-1,!0),e._zTime=i,x){if(!i)return}else t(e._startAt,X);for(e._pt=e._ptCache=0,w=A&&tt(w)||w&&!A,r=0;r")}));else{for(p in u={},T)"ease"===p||"easeEach"===p||ui(p,T[p],u,T.easeEach);for(p in u)for(M=u[p].sort((function(t,e){return t.t-e.t})),I=0,o=0;op-X&&t>=0?p:td&&(n=d)),(u=this._yoyo&&1&s)&&(f=this._yEase,n=d-n),o=$t(this._tTime,a),n===c&&!i&&this._initted)return this._tTime=m,this;s!==o&&(l&&this._yEase&&He(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(re(this,t<0?t:n,i,e))return this._tTime=0,this;if(c!==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=(f||this._ease)(n/d),this._from&&(this.ratio=h=1-h),n&&!c&&!e&&(Ee(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),Ee(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&Ee(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)&&Wt(this,1),e||t<0&&!c||!m&&!c||(Ee(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&&se(t)&&(t._initted||!ae(t))||(t._ts<0||t._dp._ts<0)&&!ae(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=pe(0,t._tDur,e),s=$t(l,h),t._yoyo&&1&s&&(u=1-u),s!==$t(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||n||t._zTime===X||!e&&t._zTime){if(!t._initted&&re(t,e,n,i))return;for(a=t._zTime,t._zTime=e||(i?X: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&&Ee(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&Ee(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Wt(t,1),i||(Ee(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){y||Ne.wake(),this._ts||this.play();var r=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||oi(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 ni=1,t.vars[e]="+=0",oi(t,a),ni=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=Pt(i)+de(o.e)),o.b&&(o.b=o.s+de(o.b))}(this,t,e,i,n,this._ease(r/this._dur),r)?this.resetTo(t,e,i,n):(te(this,0),this.parent||jt(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?Me(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,ii&&!0!==ii.vars.overwrite)._first||Me(this),this.parent&&i!==this.timeline.totalDuration()&&oe(this,this._dur*this.timeline._tDur/i,0,1),this}var n,r,s,a,o,u,h,l=this._targets,f=t?ve(t):l,c=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,f))return"all"===e&&(this._pt=0),Me(this);for(n=this._op=this._op||[],"all"!==e&&(G(e)&&(o={},At(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,n,r,s,a=t[0]?Et(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(n in i=Nt({},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(~f.indexOf(l[h]))for(o in r=c[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)||Ut(this,u,"_pt"),delete r[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&Me(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return fe(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 fe(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 c.killTweensOf(t,e,i)},e}(ti);Vt(ci.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),At("staggerTo,staggerFrom,staggerFromTo",(function(t){ci[t]=function(){var e=new ei,i=me.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var pi=function(t,e,i){return t[e]=i},di=function(t,e,i){return t[e](i)},mi=function(t,e,i,n){return t[e](n.fp,i)},gi=function(t,e,i){return t.setAttribute(e,i)},_i=function(t,e){return Z(t[e])?di:J(t[e])&&t.setAttribute?gi:pi},vi=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},yi=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},bi=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)},xi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},wi=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},Ti=function(t){for(var e,i,n=this._pt;n;)i=n._next,n.p===t&&!n.op||n.op===t?Ut(this,n,"_pt"):n.dep||(e=1),n=i;return!e},ki=function(t,e,i,n){n.mSet(t,e,n.m.call(n.tween,i,n.mt),n)},Ci=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},Si=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||vi,this.d=a||this,this.set=o||pi,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=ki,this.m=t,this.mt=i,this.tween=e},t}();At(St+"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 yt[t]=1})),ct.TweenMax=ct.TweenLite=ci,ct.TimelineLite=ct.TimelineMax=ei,c=new ei({sortChildren:!1,defaults:N,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),V.stringFilter=Ve;var Oi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var n=t.map((function(t){return Ai.quickSetter(t,e,i)})),r=n.length;return function(t){for(var e=r;e--;)n[e](t)}}t=t[0]||{};var s=wt[e],a=Et(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var n=new s;v._pt=0,n.init(t,i?e+i:e,v,0,[t]),n.render(1,n),v._pt&&xi(1,v)}: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=Ai.to(t,Nt(((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 c.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Qe(t.ease,N.ease)),qt(N,t||{})},config:function(t){return qt(V,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&&!wt[t]&&!ct[t]&>(e+" effect requires "+t+" plugin.")})),Tt[e]=function(t,e,n){return i(ve(t),Vt(e||{},r),n)},s&&(ei.prototype[e]=function(t,i,n){return this.add(Tt[e](t,K(i)?i:(n=i)&&{},this),n)})},registerEase:function(t,e){Xe[t]=Qe(e)},parseEase:function(t,e){return arguments.length?Qe(t,e):Xe},getById:function(t){return c.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,n,r=new ei(t);for(r.smoothChildTiming=tt(t.smoothChildTiming),c.remove(r),r._dp=0,r._time=r._tTime=c._time,i=c._first;i;)n=i._next,!e&&!i._dur&&i instanceof ci&&i.vars.onComplete===i._targets[0]||ie(r,i,i._start-i._delay),i=n;return ie(c,r,0),r},utils:{wrap:function t(e,i,n){var r=i-e;return rt(e)?ke(e,t(0,e.length),i):ce(n,(function(t){return(r+(t-e)%r)%r+e}))},wrapYoyo:function t(e,i,n){var r=i-e,s=2*r;return rt(e)?ke(e,t(0,e.length-1),i):ce(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>r?s-t:t)}))},distribute:be,random:Te,snap:we,normalize:function(t,e,i){return Se(t,e,0,1,i)},getUnit:de,clamp:function(t,e,i){return ce(i,(function(i){return pe(t,e,i)}))},splitColor:Le,toArray:ve,selector:function(t){return t=ve(t)[0]||gt("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return ve(e,i.querySelectorAll?i:i===t?gt("Invalid scope")||m.createElement("div"):t)}},mapRange:Se,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?hn[r]:"")+t},fn=function(){"undefined"!=typeof window&&window.document&&(Pi=window,Ii=Pi.document,Di=Ii.documentElement,Bi=on("div")||{style:{}},on("div"),sn=ln(sn),an=sn+"Origin",Bi.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",zi=!!ln("perspective"),Li=1)},cn=function t(e){var i,n=on("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),r=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Di.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)),Di.removeChild(n),this.style.cssText=a,i},pn=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},dn=function(t){var e;try{e=t.getBBox()}catch(i){e=cn.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===cn||(e=cn.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+pn(t,["x","cx","x1"])||0,y:+pn(t,["y","cy","y1"])||0,width:0,height:0}},mn=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!dn(t))},gn=function(t,e){if(e){var i=t.style;e in Fi&&e!==an&&(e=sn),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Xi,"-$1").toLowerCase())):i.removeAttribute(e)}},_n=function(t,e,i,n,r,s){var a=new Si(t._pt,e,i,0,1,s?$i:Zi);return t._pt=a,a.b=n,a.e=r,t._props.push(i),a},vn={deg:1,rad:1,turn:1},yn=function t(e,i,n,r){var s,a,o,u,h=parseFloat(n)||0,l=(n+"").trim().substr((h+"").length)||"px",f=Bi.style,c=Yi.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(c?"Width":"Height"),m=100,g="px"===r,_="%"===r;return r===l||!h||vn[r]||vn[l]?h:("px"!==l&&!g&&(h=t(e,i,n,"px")),u=e.getCTM&&mn(e),!_&&"%"!==l||!Fi[i]&&!~i.indexOf("adius")?(f[c?"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&&c&&o.time===Ne.time?Pt(h/o.width*m):((_||"%"===l)&&(f.position=un(e,"position")),a===e&&(f.position="static"),a.appendChild(Bi),s=Bi[d],a.removeChild(Bi),f.position="absolute",c&&_&&((o=Et(a)).time=Ne.time,o.width=a[d]),Pt(g?s*h/m:s&&h?m/s*h:0))):(s=u?e.getBBox()[c?"width":"height"]:e[d],Pt(_?h/s*m:h/100*s)))},bn=function(t,e,i,n){var r;return Li||fn(),e in Ui&&"transform"!==e&&~(e=Ui[e]).indexOf(",")&&(e=e.split(",")[0]),Fi[e]&&"transform"!==e?(r=Pn(t,n),r="transformOrigin"!==e?r[e]:r.svg?r.origin:In(un(t,an))+" "+r.zOrigin+"px"):(!(r=t.style[e])||"auto"===r||n||~(r+"").indexOf("calc("))&&(r=kn[e]&&kn[e](t,e,i)||un(t,e)||Mt(t,e)||("opacity"===e?1:0)),i&&!~(r+"").trim().indexOf(" ")?yn(t,e,r,i)+i:r},xn=function(t,e,i,n){if(!i||"none"===i){var r=ln(e,t,1),s=r&&un(t,r,1);s&&s!==i?(e=r,i=s):"borderColor"===e&&(i=un(t,"borderTopColor"))}var a,o,u,h,l,f,c,p,d,m,g,_=new Si(this._pt,t.style,e,0,1,bi),v=0,y=0;if(_.b=i,_.e=n,i+="","auto"===(n+="")&&(t.style[e]=n,n=un(t,e)||n,t.style[e]=i),Ve(a=[i,n]),n=a[1],u=(i=a[0]).match(ot)||[],(n.match(ot)||[]).length){for(;o=ot.exec(n);)c=o[0],d=n.substring(v,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),c!==(f=u[y++]||"")&&(h=parseFloat(f)||0,g=f.substr((h+"").length),"="===c.charAt(1)&&(c=Dt(h,c)+g),p=parseFloat(c),m=c.substr((p+"").length),v=ot.lastIndex-m.length,m||(m=m||V.units[e]||g,v===n.length&&(n+=m,_.e+=m)),g!==m&&(h=yn(t,e,f,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],Fi[i]&&(n=1,i="transformOrigin"===i?an:sn),gn(s,i);n&&(gn(s,sn),u&&(u.svg&&s.removeAttribute("transform"),Pn(s,1),u.uncache=1))}},kn={clearProps:function(t,e,i,n,r){if("isFromStart"!==r.data){var s=t._pt=new Si(t._pt,e,i,0,0,Tn);return s.u=n,s.pr=-10,s.tween=r,t._props.push(i),1}}},Cn=[1,0,0,1,0,0],Sn={},On=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},En=function(t){var e=un(t,sn);return On(e)?Cn:e.substr(7).match(at).map(Pt)},Mn=function(t,e){var i,n,r,s,a=t._gsap||Et(t),o=t.style,u=En(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(",")?Cn:u:(u!==Cn||t.offsetParent||t===Di||a.svg||(r=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,Di.appendChild(t)),u=En(t),r?o.display=r:gn(t,"display"),s&&(n?i.insertBefore(t,n):i?i.appendChild(t):Di.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},An=function(t,e,i,n,r,s){var a,o,u,h=t._gsap,l=r||Mn(t,!0),f=h.xOrigin||0,c=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!==Cn&&(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=dn(t)).x+(~x[0].indexOf("%")?w/100*a.width:w),T=a.y+(~(x[1]||x[0]).indexOf("%")?T/100*a.height:T)),n||!1!==n&&h.smooth?(y=w-f,b=T-c,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=!!n,h.origin=e,h.originIsAbsolute=!!i,t.style[an]="0px 0px",s&&(_n(s,h,"xOrigin",f,w),_n(s,h,"yOrigin",c,T),_n(s,h,"xOffset",p,h.xOffset),_n(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+T)},Pn=function(t,e){var i=t._gsap||new Ke(t);if("x"in i&&!e&&!i.uncache)return i;var n,r,s,a,o,u,h,l,f,c,p,d,m,g,_,v,y,b,x,w,T,k,C,S,O,E,M,A,P,I,D,L,B=t.style,R=i.scaleX<0,z="px",F="deg",N=un(t,an)||"0";return n=r=s=u=h=l=f=c=p=0,a=o=1,i.svg=!(!t.getCTM||!mn(t)),g=Mn(t,i.svg),i.svg&&(S=(!i.uncache||"0px 0px"===N)&&!e&&t.getAttribute("data-svg-origin"),An(t,S||N,!!S||i.originIsAbsolute,!1!==i.smooth,g)),d=i.xOrigin||0,m=i.yOrigin||0,g!==Cn&&(b=g[0],x=g[1],w=g[2],T=g[3],n=k=g[4],r=C=g[5],6===g.length?(a=Math.sqrt(b*b+x*x),o=Math.sqrt(T*T+w*w),u=b||x?qi(x,b)*Vi:0,(f=w||T?qi(w,T)*Vi+u:0)&&(o*=Math.abs(Math.cos(f*Ni))),i.svg&&(n-=d-(d*b+m*w),r-=m-(d*x+m*T))):(L=g[6],I=g[7],M=g[8],A=g[9],P=g[10],D=g[11],n=g[12],r=g[13],s=g[14],h=(_=qi(L,P))*Vi,_&&(S=k*(v=Math.cos(-_))+M*(y=Math.sin(-_)),O=C*v+A*y,E=L*v+P*y,M=k*-y+M*v,A=C*-y+A*v,P=L*-y+P*v,D=I*-y+D*v,k=S,C=O,L=E),l=(_=qi(-w,P))*Vi,_&&(v=Math.cos(-_),D=T*(y=Math.sin(-_))+D*v,b=S=b*v-M*y,x=O=x*v-A*y,w=E=w*v-P*y),u=(_=qi(x,b))*Vi,_&&(S=b*(v=Math.cos(_))+x*(y=Math.sin(_)),O=k*v+C*y,x=x*v-b*y,C=C*v-k*y,b=S,k=O),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=Pt(Math.sqrt(b*b+x*x+w*w)),o=Pt(Math.sqrt(C*C+L*L)),_=qi(k,C),f=Math.abs(_)>2e-4?_*Vi:0,p=D?1/(D<0?-D:D):0),i.svg&&(S=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!On(un(t,sn)),S&&t.setAttribute("transform",S))),Math.abs(f)>90&&Math.abs(f)<270&&(R?(a*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=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=Pt(a),i.scaleY=Pt(o),i.rotation=Pt(u)+F,i.rotationX=Pt(h)+F,i.rotationY=Pt(l)+F,i.skewX=f+F,i.skewY=c+F,i.transformPerspective=p+z,(i.zOrigin=parseFloat(N.split(" ")[2])||0)&&(B[an]=In(N)),i.xOffset=i.yOffset=0,i.force3D=V.force3D,i.renderTransform=i.svg?Vn:zi?Fn:Ln,i.uncache=0,i},In=function(t){return(t=t.split(" "))[0]+" "+t[1]},Dn=function(t,e,i){var n=de(e);return Pt(parseFloat(e)+parseFloat(yn(t,"x",i+"px",n)))+n},Ln=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Fn(t,e)},Bn="0deg",Rn="0px",zn=") ",Fn=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,f=i.skewX,c=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!==Bn||h!==Bn)){var x,w=parseFloat(h)*Ni,T=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*Ni,x=Math.cos(w),s=Dn(_,s,T*x*-v),a=Dn(_,a,-Math.sin(w)*-v),o=Dn(_,o,k*x*-v+v)}m!==Rn&&(y+="perspective("+m+zn),(n||r)&&(y+="translate("+n+"%, "+r+"%) "),(b||s!==Rn||a!==Rn||o!==Rn)&&(y+=o!==Rn||b?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+zn),u!==Bn&&(y+="rotate("+u+zn),h!==Bn&&(y+="rotateY("+h+zn),l!==Bn&&(y+="rotateX("+l+zn),f===Bn&&c===Bn||(y+="skew("+f+", "+c+zn),1===p&&1===d||(y+="scale("+p+", "+d+zn),_.style[sn]=y||"translate(0, 0)"},Vn=function(t,e){var i,n,r,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,c=o.rotation,p=o.skewX,d=o.skewY,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(f);c=parseFloat(c),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),c+=d),c||p?(c*=Ni,p*=Ni,i=Math.cos(c)*m,n=Math.sin(c)*m,r=Math.sin(c-p)*-g,s=Math.cos(c-p)*g,p&&(d*=Ni,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=Pt(i),n=Pt(n),r=Pt(r),s=Pt(s)):(i=m,s=g,n=r=0),(T&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(T=yn(_,"x",l,"px"),k=yn(_,"y",f,"px")),(v||y||b||x)&&(T=Pt(T+v-(v*i+y*r)+b),k=Pt(k+y-(v*n+y*s)+x)),(u||h)&&(a=_.getBBox(),T=Pt(T+u/100*a.width),k=Pt(k+h/100*a.height)),a="matrix("+i+","+n+","+r+","+s+","+T+","+k+")",_.setAttribute("transform",a),w&&(_.style[sn]=a)},Nn=function(t,e,i,n,r){var s,a,o=360,u=G(r),h=parseFloat(r)*(u&&~r.indexOf("rad")?Vi: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 Si(t._pt,e,i,n,h,Hi),a.e=l,a.u="deg",t._props.push(i),a},qn=function(t,e){for(var i in e)t[i]=e[i];return t},Xn=function(t,e,i){var n,r,s,a,o,u,h,l=qn({},i._gsap),f=i.style;for(r in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),f[sn]=e,n=Pn(i,1),gn(i,sn),i.setAttribute("transform",s)):(s=getComputedStyle(i)[sn],f[sn]=e,n=Pn(i,1),f[sn]=s),Fi)(s=l[r])!==(a=n[r])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(r)<0&&(o=de(s)!==(h=de(a))?yn(i,r,s,h):parseFloat(s),u=parseFloat(a),t._pt=new Si(t._pt,n,r,o,u-o,Wi),t._pt.u=h||0,t._props.push(r));qn(n,l)};At("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}));kn[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 bn(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 Yn,jn,Un,Wn={name:"css",register:fn,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,n,r){var s,a,u,h,l,f,c,p,d,m,g,_,v,y,b,x,w,T,k,C=this._props,S=t.style,O=i.vars.startAt;for(c in Li||fn(),e)if("autoRound"!==c&&(a=e[c],!wt[c]||!ai(c,e,i,n,t,r)))if(l=void 0===a?"undefined":o(a),f=kn[c],"function"===l&&(l=void 0===(a=a.call(i,n,t,r))?"undefined":o(a)),"string"===l&&~a.indexOf("random(")&&(a=Ce(a)),f)f(this,t,c,a,i)&&(b=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),a+="",ze.lastIndex=0,ze.test(s)||(p=de(s),d=de(a)),d?p!==d&&(s=yn(t,c,s,d)+d):p&&(a+=p),this.add(S,"setProperty",s,a,n,r,0,0,c),C.push(c);else if("undefined"!==l){if(O&&c in O?(s="function"==typeof O[c]?O[c].call(i,n,t,r):O[c],G(s)&&~s.indexOf("random(")&&(s=Ce(s)),de(s+"")||(s+=V.units[c]||de(bn(t,c))||""),"="===(s+"").charAt(1)&&(s=bn(t,c))):s=bn(t,c),h=parseFloat(s),(m="string"===l&&"="===a.charAt(1)&&a.substr(0,2))&&(a=a.substr(2)),u=parseFloat(a),c in Ui&&("autoAlpha"===c&&(1===h&&"hidden"===bn(t,"visibility")&&u&&(h=0),_n(this,S,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==c&&"transform"!==c&&~(c=Ui[c]).indexOf(",")&&(c=c.split(",")[0])),g=c in Fi)if(_||((v=t._gsap).renderTransform&&!e.parseTransform||Pn(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(_=this._pt=new Si(this._pt,S,sn,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===c)this._pt=new Si(this._pt,v,"scaleY",v.scaleY,(m?Dt(v.scaleY,m+u):u)-v.scaleY||0),C.push("scaleY",c),c+="X";else{if("transformOrigin"===c){w=void 0,T=void 0,k=void 0,w=(x=a).split(" "),T=w[0],k=w[1]||"50%","top"!==T&&"bottom"!==T&&"left"!==k&&"right"!==k||(x=T,T=k,k=x),w[0]=wn[T]||T,w[1]=wn[k]||k,a=w.join(" "),v.svg?An(t,a,0,y,0,this):((d=parseFloat(a.split(" ")[2])||0)!==v.zOrigin&&_n(this,v,"zOrigin",v.zOrigin,d),_n(this,S,c,In(s),In(a)));continue}if("svgOrigin"===c){An(t,a,1,y,0,this);continue}if(c in Sn){Nn(this,v,c,h,m?Dt(h,m+a):a);continue}if("smoothOrigin"===c){_n(this,v,"smooth",v.smooth,a);continue}if("force3D"===c){v[c]=a;continue}if("transform"===c){Xn(this,a,t);continue}}else c in S||(c=ln(c)||c);if(g||(u||0===u)&&(h||0===h)&&!ji.test(a)&&c in S)u||(u=0),(p=(s+"").substr((h+"").length))!==(d=de(a)||(c in V.units?V.units[c]:p))&&(h=yn(t,c,s,d)),this._pt=new Si(this._pt,g?v:S,c,h,(m?Dt(h,m+u):u)-h,g||"px"!==d&&"zIndex"!==c||!1===e.autoRound?Wi:Gi),this._pt.u=d||0,p!==d&&"%"!==d&&(this._pt.b=s,this._pt.r=Qi);else if(c in S)xn.call(this,t,c,s,m?m+a:a);else{if(!(c in t)){mt(c,a);continue}this.add(t,c,s||t[c],m?m+a:a,n,r)}C.push(c)}b&&Ci(this)},get:bn,aliases:Ui,getSetter:function(t,e,i){var n=Ui[e];return n&&n.indexOf(",")<0&&(e=n),e in Fi&&e!==an&&(t._gsap.x||bn(t,"x"))?i&&Ri===i?"scale"===e?en:tn:(Ri=i||{},"scale"===e?nn:rn):t.style&&!J(t.style[e])?Ji:~e.indexOf("-")?Ki:_i(t,e)},core:{_removeProperty:gn,_getMatrix:Mn}};Ai.utils.checkPrefix=ln,Un=At((Yn="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(jn="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Fi[t]=1})),At(jn,(function(t){V.units[t]="deg",Sn[t]=1})),Ui[Un[13]]=Yn+","+jn,At("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Ui[e[1]]=Un[e[0]]})),At("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){V.units[t]="px"})),Ai.registerPlugin(Wn);var Hn,Qn,Gn,Zn,$n,Jn,Kn,tr,er,ir=Ai.registerPlugin(Wn)||Ai,nr=(ir.core.Tween,"transform"),rr=nr+"Origin",sr=function(t){var e=t.ownerDocument||t;!(nr in t.style)&&"msTransform"in t.style&&(rr=(nr="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(Qn=window,Kn=new gr,e){Hn=e,Gn=e.documentElement,Zn=e.body,(tr=Hn.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),n=e.createElement("div");Zn.appendChild(i),i.appendChild(n),i.style.position="static",i.style[nr]="translate3d(0,0,1px)",er=n.offsetParent!==i,Zn.removeChild(i)}return e},ar=[],or=[],ur=function(){return Qn.pageYOffset||Hn.scrollTop||Gn.scrollTop||Zn.scrollTop||0},hr=function(){return Qn.pageXOffset||Hn.scrollLeft||Gn.scrollLeft||Zn.scrollLeft||0},lr=function(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)},fr=function t(e){return"fixed"===Qn.getComputedStyle(e).position||((e=e.parentNode)&&1===e.nodeType?t(e):void 0)},cr=function t(e,i){if(e.parentNode&&(Hn||sr(e))){var n=lr(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=Hn.createElementNS?Hn.createElementNS(r.replace(/^https/,"http"),s):Hn.createElement(s);return i&&(n?(Jn||(Jn=t(e)),h.setAttribute("width",.01),h.setAttribute("height",.01),h.setAttribute("transform","translate("+a+","+o+")"),Jn.appendChild(h)):($n||(($n=t(e)).style.cssText=u),h.style.cssText=u+"width:0.1px;height:0.1px;top:"+o+"px;left:"+a+"px",$n.appendChild(h))),h}throw"Need document and parent."},pr=function(t){var e,i=t.getCTM();return i||(e=t.style[nr],t.style[nr]="none",t.appendChild(tr),i=tr.getCTM(),t.removeChild(tr),e?t.style[nr]=e:t.style.removeProperty(nr.replace(/([A-Z])/g,"-$1").toLowerCase())),i||Kn.clone()},dr=function(t,e){var i,n,r,s,a,o,u=lr(t),h=t===u,l=u?ar:or,f=t.parentNode;if(t===Qn)return t;if(l.length||l.push(cr(t,1),cr(t,2),cr(t,3)),i=u?Jn:$n,u)h?(s=-(r=pr(t)).e/r.a,a=-r.f/r.d,n=Kn):t.getBBox?(r=t.getBBox(),n=(n=t.transform?t.transform.baseVal:{}).numberOfItems?n.numberOfItems>1?function(t){for(var e=new gr,i=0;i4&&(s=r.offsetLeft,a=r.offsetTop,r=0);if("absolute"!==(o=Qn.getComputedStyle(t)).position&&"fixed"!==o.position)for(n=t.offsetParent;f&&f!==n;)s+=f.scrollLeft||0,a+=f.scrollTop||0,f=f.parentNode;(r=i.style).top=t.offsetTop-a+"px",r.left=t.offsetLeft-s+"px",r[nr]=o[nr],r[rr]=o[rr],r.position="fixed"===o.position?"fixed":"absolute",t.parentNode.appendChild(i)}return i},mr=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},gr=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),mr(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 mr(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,f=t.e,c=t.f;return mr(this,o*e+h*n,o*i+h*r,u*e+l*n,u*i+l*r,s+f*e+c*n,a+f*i+c*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}(); 16 | /*! 17 | * matrix 3.10.4 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 | */function _r(t,e,i,n){if(!t||!t.parentNode||(Hn||sr(t)).documentElement===t)return new gr;var r=function(t){for(var e,i;t&&t!==Zn;)(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=lr(t)?ar:or,a=dr(t,i),o=s[0].getBoundingClientRect(),u=s[1].getBoundingClientRect(),h=s[2].getBoundingClientRect(),l=a.parentNode,f=!n&&fr(t),c=new gr((u.left-o.left)/100,(u.top-o.top)/100,(h.left-o.left)/100,(h.top-o.top)/100,o.left+(f?0:hr()),o.top+(f?0:ur()));if(l.removeChild(a),r)for(o=r.length;o--;)(u=r[o]).scaleX=u.scaleY=0,u.renderTransform(1,u);return e?c.inverse():c}var vr,yr,br,xr,wr,Tr,kr,Cr=1,Sr=function(t,e){return t.actions.forEach((function(t){return t.vars[e]&&t.vars[e](t)}))},Or={},Er=180/Math.PI,Mr=Math.PI/180,Ar={},Pr={},Ir={},Dr=function(t){return"string"==typeof t?t.split(" ").join("").split(","):t},Lr=Dr("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),Br=Dr("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),Rr=function(t){return vr(t)[0]||console.warn("Element not found:",t)},zr=function(t){return Math.round(1e4*t)/1e4||0},Fr=function(t,e,i){return t.forEach((function(t){return t.classList[i](e)}))},Vr={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},Nr={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()},Xr=function(t,e){var i,n={};for(i in t)e[i]||(n[i]=t[i]);return n},Yr={},jr=function(t){var e=Yr[t]=Dr(t);return Ir[t]=e.concat(Br),e},Ur=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},Wr=function(t,e,i){return t.forEach((function(t){return t.d=Ur(i?t.element:t.t,e)})),t.sort((function(t,e){return t.d-e.d})),t},Hr=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:Pr[i]||(Pr[i]=qr(i)),n);return r},Qr=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"),rs(g,_,L,V)):_.isVisible!==g.isVisible&&(_.isVisible?g.isVisible||(_.css=g.css,j.push(_),U.splice(o--,1),T&&I&&rs(g,_,L,V)):(g.isVisible&&Y.push(g),U.splice(o--,1))),L||(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"),I&&P&&u.classList.add(P)):U.splice(o--,1),c.push(g);var e;if(P&&(e=c.map((function(t){return t.element})),I&&e.forEach((function(t){return t.classList.remove(P)}))),hs(!1),L?(N.scaleX=function(t){return U[t].a.scaleX},N.scaleY=function(t){return U[t].a.scaleY}):(N.width=function(t){return U[t].a.width+"px"},N.height=function(t){return U[t].a.height+"px"},N.autoRound=i.autoRound||!1),N.x=function(t){return U[t].a.x+"px"},N.y=function(t){return U[t].a.y+"px"},N.rotation=function(t){return U[t].a.rotation+(z?360*Q(t,f[t],f):0)},N.skewX=function(t){return U[t].a.skewX},f=U.map((function(t){return t.t})),(D||0===D)&&(N.modifiers={zIndex:function(){return D}},N.zIndex=D,N.immediateRender=!1!==i.immediateRender),B&&(N.opacity=function(t){return U[t].sd<0?0:U[t].sd>0?U[t].a.opacity:"+=0"}),W.length){R=yr.utils.distribute(R);var n=f.slice(W.length);N.stagger=function(t,e){return R(~W.indexOf(e)?f.indexOf(U[t].swap.t):t,e,n)}}if(Lr.forEach((function(t){return i[t]&&q.eventCallback(t,i[t],i[t+"Params"])})),C&&f.length)for(s in X=Xr(N,Vr),"scale"in C&&(C.scaleX=C.scaleY=C.scale,delete C.scale),C)(r=Xr(C[s],Nr))[s]=N[s],!("duration"in r)&&"duration"in N&&(r.duration=N.duration),r.stagger=N.stagger,Z.call(q,f,r,0),delete X[s];(f.length||j.length||Y.length)&&(P&&q.add((function(){return Fr(e,P,q._zTime<0?"remove":"add")}),0)&&!O&&Fr(e,P,"add"),f.length&&Z.call(q,f,X,0)),ns(x,Y,q),ns(w,j,q);var p=br&&br.timeline;p&&(p.add(q,0),br._final.push((function(){return Gr(U,!b)}))),a=q.duration(),q.call((function(){var t=q.time()>=a;t&&!p&&Gr(U,!b),P&&Fr(e,P,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}))),br)?(T&&(v=br._abs).push.apply(v,Jr(U,T)),br._run.push(m)):(T&&Kr(Jr(U,T)),m());return br?br.timeline:q},fs=function t(e){e.vars.onInterrupt&&e.vars.onInterrupt.apply(e,e.vars.onInterruptParams||[]),e.getChildren(!0,!1,!0).forEach(t)},cs=function(t,e){if(t&&t.progress()<1&&!t.paused())return e&&(fs(t),e<2&&t.progress(1),t.kill()),!0},ps=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},ds=function(){function t(t,e,i){if(this.props=e&&e.props,this.simple=!(!e||!e.simple),i)this.targets=is(t),this.elementStates=t,ps(this);else{this.targets=vr(t);var n=e&&(!1===e.kill||e.batch&&!e.kill);br&&!n&&br._kill.push(this),this.update(n||!!br)}}var e=t.prototype;return e.update=function(t){var e=this;return this.elementStates=this.targets.map((function(t){return new ms(t,e.props,e.simple)})),ps(this),this.interrupt(t),this.recordInlineStyles(),this},e.clear=function(){return this.targets.length=this.elementStates.length=0,ps(this),this},e.fit=function(t,e,i){for(var n,r,s=Wr(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=br,n=xr;return br=this,this.state.clear(),this._kill.length=0,this.actions.forEach((function(i){i.vars.getState&&(i.states.length=0,xr=i,i.state=i.vars.getState(i)),t&&i.states.forEach((function(t){return e.state.add(t)}))})),xr=n,br=i,this.killConflicts(),this},e.animate=function(){var t,e,i=this,n=br,r=this.timeline,s=this.actions.length;for(br=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 ds,t.states.forEach((function(t){return e.add(t)})),(i=e.compare(vs.getState(s))).enter.length&&n&&n(i.enter),i.leave.length&&r&&r(i.leave))})),Kr(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()})),Sr(i,"onComplete"))})),br=n;s--;)this.actions[s].vars.once&&this.actions[s].kill();return Sr(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!==br&&(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 Or[this.id]},t}(),vs=function(){function t(){}return t.getState=function(e,i){var n=ss(e,i);return xr&&xr.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),ls(t,ss(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,-1)},t.to=function(t,e){return ls(t,ss(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,1)},t.fromTo=function(t,e,i){return ls(t,e,i)},t.fit=function(t,e,i){var n=i?Xr(i,Nr):{},r=i||n,s=r.absolute,a=r.scale,o=r.getVars,u=r.props,h=r.runBackwards,l=r.onComplete,f=r.simple,c=i&&i.fitChild&&Rr(i.fitChild),p=ts(e,u,f,t),d=ts(t,0,f,p),m=u?Ir[u]:Br;return u&&es(n,p.props),h&&(Hr(d,m),"immediateRender"in n||(n.immediateRender=!0),n.onComplete=function(){Qr(d),l&&l.apply(this,arguments)}),s&&$r(d,p),n=rs(d,p,a||c,u,c,n.duration||o?n:0),o?n:n.duration?yr.to(d.element,n):null},t.makeAbsolute=function(t,e){return(t instanceof ds?t:new ds(t,e)).makeAbsolute()},t.batch=function(t){return t||(t="default"),Or[t]||(Or[t]=new _s(t))},t.killFlipsOf=function(t,e){(t instanceof ds?t.targets:vr(t)).forEach((function(t){return t&&cs(t._flip,!1!==e?1:2)}))},t.isFlipping=function(e){var i=t.getByTarget(e);return!!i&&i.isActive()},t.getByTarget=function(t){return(Rr(t)||Ar)._flip},t.getElementState=function(t,e){return new ms(Rr(t),e)},t.convertCoordinates=function(t,e,i){var n=_r(e,!0,!0).multiply(_r(t));return i?n.apply(i):n},t.register=function(t){if(wr="undefined"!=typeof document&&document.body){yr=t,sr(wr),vr=yr.utils.toArray;var e=yr.utils.snap(.1);Tr=function(t,i){return e(parseFloat(t)+i)}}},t}();vs.version="3.10.4","undefined"!=typeof window&&window.gsap&&window.gsap.registerPlugin(vs),ir.registerPlugin(vs);var ys={width:window.innerWidth,height:window.innerHeight};window.addEventListener("resize",(function(){return ys={width:window.innerWidth,height:window.innerHeight}}));var bs={grid:document.querySelector(".grid"),enterCtrl:document.querySelector(".content__enter"),backCtrl:document.querySelector(".button-back"),contentItem:document.querySelector(".content__item-img"),gridItemTarget:document.querySelector(".grid__item--target"),gridItemOriginalTarget:document.querySelector(".content__item"),contentTitleTexts:document.querySelectorAll(".content__item-title > span"),gridTitleTexts:document.querySelectorAll(".grid__item--title > span"),gridItems:document.querySelectorAll(".grid > .grid__item:not(.grid__item--target):not(.grid__item--title):not(.grid__item--back)")},xs=1,ws="expo.inOut",Ts=document.body,ks=getComputedStyle(Ts).getPropertyValue("--color-bg"),Cs=!1,Ss=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:400,i={x:t.offsetLeft+t.offsetWidth/2,y:t.offsetTop+t.offsetHeight/2},n=Math.atan2(Math.abs(ys.height/2-i.y),Math.abs(ys.width/2-i.x)),r=Math.abs(Math.cos(n)*e),s=Math.abs(Math.sin(n)*e);return{x:i.x0&&void 0!==arguments[0]?arguments[0]:"img";return new Promise((function(e){r(document.querySelectorAll(t),{background:!0},e)}))}(".grid__item-img").then((function(t){return document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:16px}html,body{height:100vh;overflow:hidden}body #cdawrap{justify-self:start}.cda-sponsor-link,.frame__title-prev{white-space:nowrap;position:relative;overflow:hidden}.cda-sponsor-link:before,.frame__title-prev:before{content:"";height:1px;width:100%;transform-origin:0%;background:currentColor;transition:transform .3s;position:absolute;top:92%}.cda-sponsor-link:hover:before,.frame__title-prev:hover:before{transform-origin:100%;transform:scaleX(0)}body{--color-text:#010300;--color-bg:#76b272;--color-link:#000;--color-link-hover:#010300;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;will-change:background-color;margin:0;font-family:halyard-display,sans-serif;font-weight:300}.js .loading:before,.js .loading:after{content:"";z-index:2000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width:60px;height:60px;opacity:.4;background:var(--color-link);border-radius:50%;margin:-30px 0 0 -30px;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:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.oh{position:relative;overflow:hidden}.oh__inner{will-change:transform;display:inline-block}.unbutton{font:inherit;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}.frame{text-align:center;z-index:1000;width:100%;max-width:none;height:100vh;pointer-events:none;grid-template:".menu"". ."1fr"title.""sponsor."/50% 50%;align-content:space-between;padding:1rem;display:grid;position:fixed;top:0;left:0}.frame a,.frame button{pointer-events:auto}.frame__title{width:12rem;flex-wrap:wrap;grid-area:title;justify-content:flex-start;margin-bottom:.5rem;display:flex}.frame__title-main{margin:0;font-size:1rem;font-weight:300}.frame__title-back{align-items:flex-end;display:flex;position:relative}.frame__title-back span{display:none}.frame__title-back svg{fill:var(--color-link)}.frame__title-back:hover svg,.frame__title-back:focus svg{fill:var(--color-link-hover)}.frame__title-prev{width:100%;margin-top:.5rem}.frame__title,.frame .cdawrap{transition:opacity .3s}.frame--hidden .frame__title,.frame--hidden .frame .cdawrap{opacity:0;pointer-events:none}.button-menu{z-index:100;width:1.65rem;height:.65rem;color:var(--color-menu);cursor:not-allowed;border-top:1px solid;border-bottom:1px solid;grid-area:menu;align-self:start;justify-self:end}.content{width:100%;align-items:center;justify-items:center;display:grid}.content__item{height:100vh;width:100%;align-items:center;padding-top:1rem;display:grid}.content__item-title{cursor:default;height:100%;text-transform:uppercase;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;flex-direction:column;grid-area:1/1/-1/-1;align-items:center;margin:0;font-family:ivymode,sans-serif;font-size:15.5vw;font-weight:200;line-height:.85;display:flex}.content__item-title span{z-index:100;will-change:transform,opacity;display:block;position:relative}.content__item-img{height:50vh;width:80vw;will-change:transform;background-position:50%;background-size:cover;grid-area:1/1/-1/-1;align-self:center;justify-self:center}.content__enter{color:#fff;cursor:pointer;z-index:1;grid-area:1/1/-1/-1;align-self:center;justify-self:center;font-family:ivymode,sans-serif;font-size:2rem;font-weight:200}.button-circle{width:200px;height:200px;align-items:center;justify-items:center;display:grid}.button-circle__text{grid-area:1/1/-1/-1;line-height:1;overflow:hidden}.button-circle__text span{padding:0 .5rem;display:block}.button-circle__text span:before{content:attr(data-text);width:100%;text-align:center;font-style:italic;position:absolute;bottom:100%;left:0}.button-circle:hover .button-circle__text span{transform:translateY(100%)}.button-circle__deco{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1px;grid-area:1/1/-1/-1}.button-circle:hover .button-circle__deco{transform:scale(1.4)}.button-circle__text span,.button-circle__deco{transition:transform .3s ease-out}.button-circle:hover .button-circle__text span,.button-circle:focus .button-circle__text span,.button-circle:hover .button-circle__deco,.button-circle:focus .button-circle__deco{transition:transform .4s cubic-bezier(.7,0,.3,1)}.grid{counter-reset:grid-counter;width:100%;height:80vw;opacity:0;pointer-events:none;grid-template-rows:repeat(100,1fr);grid-template-columns:repeat(100,1fr);display:grid;position:fixed;top:calc(50vh - 40vw);left:0}.grid--open{opacity:1;pointer-events:auto}.grid__item{grid-template-rows:100% auto;grid-template-areas:"grid-img""grid-title";grid-column:var(--c)/span var(--cs);grid-row:var(--r)/span var(--rs);will-change:opacity,transform;display:grid;position:relative}.grid__item--title{z-index:100;text-transform:uppercase;flex-direction:column;grid-area:5/5/span 14/span 25;justify-content:center;margin:0;font-family:ivymode,sans-serif;font-size:max(1.5rem,min(3vw,3.5rem));font-weight:200;line-height:1;display:flex;position:relative}.grid__item--title span{will-change:transform,opacity}.grid__item--title span:last-child{margin-left:2rem}.grid__item--back{z-index:100;grid-area:20/5/span 10/span 6}.button-back{cursor:pointer;align-self:start;padding:.5rem 0;display:flex}.button-back svg{pointer-events:none;stroke:#000;stroke-width:1px;transition:stroke .3s}.button-back:hover svg{stroke:#989898}.grid__item .content__item-img,.grid__item-img{width:100%;height:100%;background-position:50%;background-size:cover}.grid__item-title{white-space:nowrap;visibility:hidden;margin:.5rem 0 0;font-size:.9rem;font-weight:300;line-height:1;position:absolute;top:100%;left:0}.grid__item-title--above{margin:0 0 .5rem;top:auto;bottom:100%}.grid__item-title span:before{counter-increment:grid-counter;content:counter(grid-counter,decimal-leading-zero)" — "}@media screen and (min-width:53em){.frame{text-align:left;padding:2.5rem}.grid{height:100%;top:0}.grid__item-title{visibility:visible}.content__item{padding:0}.content__item-img{height:80vh;width:60vw;max-width:600px}.content__item-title{justify-content:space-between}.content__item-title span:first-child{margin:-3vw 0 0 -10vw}.content__item-title span:last-child{margin:0 -10vw -3vw 0}} -------------------------------------------------------------------------------- /dist/index.e9a2d1b4.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},i={},n=t.parcelRequirec455;null==n&&((n=function(t){if(t in e)return e[t].exports;if(t in i){var n=i[t];delete i[t];var r={id:t,exports:{}};return e[t]=r,n.call(r.exports,r,r.exports),r.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){i[t]=e},t.parcelRequirec455=n),n.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||{},n=i[t]=i[t]||[];return n.includes(e)||n.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 n=i.indexOf(e);return-1!=n&&i.splice(n,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 n=this._onceEvents&&this._onceEvents[t];for(let r of i){n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t}))}));var r={}; 2 | /*! 3 | * imagesLoaded v5.0.0 4 | * JavaScript is all like "You images are done yet or what?" 5 | * MIT License 6 | */!function(t,e){r?r=e(t,n("4hJWI")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:r,(function(t,e){let i=t.jQuery,n=t.console;function r(t,e,s){if(!(this instanceof r))return new r(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))):n.error(`Bad element for imagesLoaded ${a||t}`)}r.prototype=Object.create(e.prototype),r.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const s=[1,9,11];r.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 r.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=a.exec(e.backgroundImage);for(;null!==i;){let n=i&&i[2];n&&this.addBackground(n,t),i=a.exec(e.backgroundImage)}},r.prototype.addImage=function(t){let e=new o(t);this.images.push(e)},r.prototype.addBackground=function(t,e){let i=new u(t,e);this.images.push(i)},r.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()}))},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: ${i}`,t,e)},r.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,n="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,n,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])},r.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new r(this,t,e).jqDeferred.promise(i(this))})},r.makeJQueryPlugin(),r}));const s=(t,e,i,n,r)=>(t-e)*(r-n)/(i-e)+n;function a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 7 | /*! 8 | * GSAP 3.10.4 9 | * https://greensock.com 10 | * 11 | * @license Copyright 2008-2022, GreenSock. All rights reserved. 12 | * Subject to the terms at https://greensock.com/standard-license or for 13 | * Club GreenSock members, the agreement issued with that membership. 14 | * @author: Jack Doyle, jack@greensock.com 15 | */var u,h,l,f,c,p,d,m,g,_,v,y,x,b,w,T,k,C,S,O,E,M,A,P,I,D,L,B,R={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},z={duration:.5,overwrite:!1,delay:0},F=2*Math.PI,V=F/4,N=0,q=Math.sqrt,X=Math.cos,Y=Math.sin,j=function(t){return"string"==typeof t},U=function(t){return"function"==typeof t},W=function(t){return"number"==typeof t},H=function(t){return void 0===t},Q=function(t){return"object"==typeof t},G=function(t){return!1!==t},$=function(){return"undefined"!=typeof window},J=function(t){return U(t)||j(t)},Z="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},K=Array.isArray,tt=/(?:-?\.?\d|\.)+/gi,et=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,it=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,nt=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,rt=/[+-]=-?[.\d]+/,st=/[^,'"\[\]\s]+/gi,at=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ot={},ut={},ht=function(t){return(ut=Bt(t,ot))&&ki},lt=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},ft=function(t,e){return!e&&console.warn(t)},ct=function(t,e){return t&&(ot[t]=e)&&ut&&(ut[t]=e)||ot},pt=function(){return 0},dt={},mt=[],gt={},_t={},vt={},yt=30,xt=[],bt="",wt=function(t){var e,i,n=t[0];if(Q(n)||U(n)||(t=[t]),!(e=(n._gsap||{}).harness)){for(i=xt.length;i--&&!xt[i].targetTest(n););e=xt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new He(t[i],e)))||t.splice(i,1);return t},Tt=function(t){return t._gsap||wt(pe(t))[0]._gsap},kt=function(t,e,i){return(i=t[e])&&U(i)?t[e]():H(i)&&t.getAttribute&&t.getAttribute(e)||i},Ct=function(t,e){return(t=t.split(",")).forEach(e)||t},St=function(t){return Math.round(1e5*t)/1e5||0},Ot=function(t){return Math.round(1e7*t)/1e7||0},Et=function(t,e){var i=e.charAt(0),n=parseFloat(e.substr(2));return t=parseFloat(t),"+"===i?t+n:"-"===i?t-n:"*"===i?t*n:t/n},Mt=function(t,e){for(var i=e.length,n=0;t.indexOf(e[n])<0&&++ns;)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},Nt=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},Xt=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},Yt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},jt=function t(e){return!e||e._ts&&t(e.parent)},Ut=function(t){return t._repeat?Wt(t._tTime,t=t.duration()+t._rDelay)*t:0},Wt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Ht=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Qt=function(t){return t._end=Ot(t._start+(t._tDur/Math.abs(t._ts||t._rts||1e-8)||0))},Gt=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=Ot(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Qt(t),i._dirty||Xt(i,t)),t},$t=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Ht(t.rawTime(),e),(!e._dur||ue(0,e.totalDuration(),i)-e._tTime>1e-8)&&e.render(i,!0)),Xt(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}},Jt=function(t,e,i,n){return e.parent&&qt(e),e._start=Ot((W(i)?i:i||t!==h?se(t,i,e):t._time)+e._delay),e._end=Ot(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),Vt(t,e,"_first","_last",t._sort?"_start":0),ee(e)||(t._recent=e),n||$t(t,e),t},Zt=function(t,e){return(ot.ScrollTrigger||lt("scrollTrigger",e))&&ot.ScrollTrigger.create(e,t)},Kt=function(t,e,i,n){return ei(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&d!==Le.frame?(mt.push(t),t._lazy=[e,n],1):void 0:1},te=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},ee=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},ie=function(t,e,i,n){var r=t._repeat,s=Ot(e)||0,a=t._tTime/t._tDur;return a&&!n&&(t._time*=s/t._dur),t._dur=s,t._tDur=r?r<0?1e10:Ot(s*(r+1)+t._rDelay*r):s,a>0&&!n?Gt(t,t._tTime=t._tDur*a):t.parent&&Qt(t),i||Xt(t.parent,t),t},ne=function(t){return t instanceof Ge?Xt(t):ie(t,t._dur)},re={_start:0,endTime:pt,totalDuration:pt},se=function t(e,i,n){var r,s,a,o=e.labels,u=e._recent||re,h=e.duration()>=1e8?u.endTime(!1):e._dur;return j(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*(K(n)?n[0]:n).totalDuration()),r>1?t(e,i.substr(0,r-1),n)+s:h+s)):null==i?h:+i},ae=function(t,e,i){var n,r,s=W(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=G(r.vars.inherit)&&r.parent;o.immediateRender=G(n.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new ai(e[0],o,e[a+1])},oe=function(t,e){return t||0===t?e(t):e},ue=function(t,e,i){return ie?e:i},he=function(t,e){return j(t)&&(e=at.exec(t))?e[1]:""},le=[].slice,fe=function(t,e){return t&&Q(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&Q(t[0]))&&!t.nodeType&&t!==l},ce=function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var n;return j(t)&&!e||fe(t,1)?(n=i).push.apply(n,pe(t)):i.push(t)}))||i},pe=function(t,e,i){return!j(t)||i||!f&&Be()?K(t)?ce(t,i):fe(t)?le.call(t,0):t?[t]:[]:le.call((e||c).querySelectorAll(t),0)},de=function(t){return t.sort((function(){return.5-Math.random()}))},me=function(t){if(U(t))return t;var e=Q(t)?t:{each:t},i=Xe(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 j(n)?h=l={center:.5,edges:.5,end:1}[n]||0:!a&&o&&(h=n[0],l=n[1]),function(t,a,f){var c,p,d,m,g,_,v,y,x,b=(f||e).length,w=s[b];if(!w){if(!(x="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=f[x++].getBoundingClientRect().left)&&xv&&(v=g),gb?b-1:u?"y"===u?b/x:x:Math.max(x,b/x))||0)*("edges"===n?-1:1),w.b=b<0?r-b:r,w.u=he(e.amount||e.each)||0,i=i&&b<0?Ne(i):i}return b=(w[t]-w.min)/w.max||0,Ot(w.b+(i?i(b):b)*w.v)+w.u}},ge=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+(W(i)?0:he(i))}},_e=function(t,e){var i,n,r=K(t);return!r&&Q(t)&&(i=r=t.radius||1e8,t.values?(t=pe(t.values),(n=!W(t[0]))&&(i*=i)):t=ge(t.increment)),oe(e,r?U(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=1e8,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},Te=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&&mt.length&&At(),n?a.apply(r,n):a.call(r)},ke=function(t){return qt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Te(t,"onInterrupt"),t},Ce=function(t){var e=(t=!t.name&&t.default||t).name,i=U(t),n=e&&!i&&t.init?function(){this._props=[]}:t,r={init:pt,render:mi,add:Ke,kill:_i,modifier:gi,rawVars:0},s={targetTest:0,get:0,getSetter:fi,aliases:{},register:0};if(Be(),t!==n){if(_t[e])return;Lt(n,Lt(zt(t,r),s)),Bt(n.prototype,Bt(r,zt(t,s))),_t[n.prop=e]=n,t.targetTest&&(xt.push(n),dt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}ct(e,n),t.register&&t.register(ki,n,xi)},Se={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]},Oe=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 n,r,s,a,o,u,h,l,f,c,p=t?W(t)?[t>>16,t>>8&255,255&t]:0:Se.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Se[t])p=Se[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&255,255&p,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(p=c=t.match(tt),e){if(~t.indexOf("="))return p=t.match(et),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]=Oe(a+1/3,n,r),p[1]=Oe(a,n,r),p[2]=Oe(a-1/3,n,r);else p=t.match(tt)||Se.transparent;p=p.map(Number)}return e&&!c&&(n=p[0]/255,r=p[1]/255,s=p[2]/255,u=((h=Math.max(n,r,s))+(l=Math.min(n,r,s)))/2,h===l?a=o=0:(f=h-l,o=u>.5?f/(2-h-l):f/(h+l),a=h===n?(r-s)/f+(rk&&(S+=a-C),((i=(r=(O+=a)-S)-M)>0||o)&&(s=++x.frame,b=r-1e3*x.time,x.time=r/=1e3,M+=i+(i>=E?4:E-i),n=1),o||(_=v(t)),n)for(w=0;w=e&&w--},_listeners:A=[]}),Be=function(){return!g&&Le.wake()},Re={},ze=/^[\d.\-M][\d.\-,\s]/,Fe=/["']/g,Ve=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("{")?[Ve(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/F*(Math.asin(1/r)||0),o=function(t){return 1===t?1:r*Math.pow(2,-10*t)*Y((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:je(o);return s=F/s,u.config=function(i,n){return t(e,i,n)},u},We=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};Ct("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Ye(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}))})),Re.Linear.easeNone=Re.none=Re.Linear.easeIn,Ye("Elastic",Ue("in"),Ue("out"),Ue()),I=7.5625,L=1/(D=2.75),Ye("Bounce",(function(t){return 1-B(1-t)}),B=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,ie(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Be(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(Gt(this,t),!i._dp||i.parent||$t(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)&&Jt(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),Pt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ut(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},e.totalProgress=function(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},e.progress=function(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ut(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},e.iteration=function(t,e){var i=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*i,e):this._repeat?Wt(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?Ht(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,this.totalTime(ue(-this._delay,this._tDur,e),!0),Qt(this),Yt(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):(Be(),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)&&Jt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(G(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ht(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,ne(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,ne(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(se(this,t),G(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,G(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,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=U(t)?t:Dt,r=function(){var t=e.then;e.then=null,U(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(){ke(this)},t}();Lt(Qe.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Ge=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=G(e.sortChildren),h&&Jt(e.parent||h,a(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&Zt(a(n),e.scrollTrigger),n}o(e,t);var i=e.prototype;return i.to=function(t,e,i){return ae(0,arguments,this),this},i.from=function(t,e,i){return ae(1,arguments,this),this},i.fromTo=function(t,e,i,n){return ae(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,Ft(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ai(t,e,se(this,i),1),this},i.call=function(t,e,i){return Jt(this,ai.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 ai(t,i,se(this,r)),this},i.staggerFrom=function(t,e,i,n,r,s,a){return i.runBackwards=1,Ft(i).immediateRender=G(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,Ft(n).immediateRender=G(n.immediateRender),this.staggerTo(t,e,n,r,s,a,o)},i.render=function(t,e,i){var n,r,s,a,o,u,l,f,c,p,d,m,g=this._time,_=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:Ot(t),x=this._zTime<0!=t<0&&(this._initted||!v);if(this!==h&&y>_&&t>=0&&(y=_),y!==this._tTime||i||x){if(g!==this._time&&v&&(y+=this._time-g,t+=this._time-g),n=y,c=this._start,u=!(f=this._ts),x&&(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(n=Ot(y%o),y===_?(a=this._repeat,n=v):((a=~~(y/o))&&a===y/o&&(n=v,a--),n>v&&(n=v)),p=Wt(this._tTime,o),!g&&this._tTime&&p!==a&&(p=a),d&&1&a&&(n=v-n,m=1),a!==p&&!this._lock){var b=d&&1&p,w=b===(d&&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&&l!==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){l=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&&l!==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){l=0,s&&(y+=this._zTime=T?-1e-8:1e-8);break}}r=s}}if(l&&!e&&(this.pause(),l.render(n>=g?0:-1e-8)._zTime=n>=g?1:-1,this._ts))return this._start=c,Qt(this),this.render(t,e,i);this._onUpdate&&!e&&Te(this,"onUpdate",!0),(y===_&&this._tTime>=this.totalDuration()||!y&&g)&&(c!==this._start&&Math.abs(f)===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&&_||(Te(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(W(e)||(e=se(this,e,t)),!(t instanceof Qe)){if(K(t))return t.forEach((function(t){return i.add(t,e)})),this;if(j(t))return this.addLabel(t,e);if(!U(t))return this;t=ai.delayedCall(0,t)}return this!==t?Jt(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 ai?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 j(t)?this.removeLabel(t):U(t)?this.killTweensOf(t):(Nt(this,t),t===this._recent&&(this._recent=this._last),Xt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Ot(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]=se(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var n=ai.delayedCall(0,e||pt,i);return n.data="isPause",this._hasPause=1,Jt(this,n,se(this,t))},i.removePause=function(t){var e=this._first;for(t=se(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--;)$e!==n[r]&&n[r].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,n=[],r=pe(t),s=this._first,a=W(e);s;)s instanceof ai?Mt(s._targets,r)&&(a?(!$e||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=se(n,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=ai.to(n,Lt({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())||1e-8,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&&ie(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:se(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),we(this,se(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),we(this,se(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 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 Xt(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={}),Xt(this)},i.totalDuration=function(t){var e,i,n,r=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(n=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,Jt(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;ie(s,s===h&&s._time>r?s._time:r,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(h._ts&&(Pt(h,Ht(t,h)),d=Le.frame),Le.frame>=yt){yt+=R.autoSleep||120;var e=h._first;if((!e||!e._ts)&&R.autoSleep&&Le._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Le.sleep()}}},e}(Qe);Lt(Ge.prototype,{_lock:0,_hasPause:0,_forcing:0});var $e,Je,Ze=function(t,e,i,n,r,s,a){var o,u,h,l,f,c,p,d,m=new xi(this._pt,t,e,0,1,di,null,r),g=0,_=0;for(m.b=i,m.e=n,i+="",(p=~(n+="").indexOf("random("))&&(n=xe(n)),s&&(s(d=[i,n],t,e),i=d[0],n=d[1]),u=i.match(nt)||[];o=nt.exec(n);)l=o[0],f=n.substring(g,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[_++]&&(c=parseFloat(u[_-1])||0,m._pt={_next:m._pt,p:f||1===_?f:",",s:c,c:"="===l.charAt(1)?Et(c,l)-c:parseFloat(l)-c,m:h&&h<4?Math.round:0},g=nt.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(P)!M&&(e._startAt=0);else if(i&&(b=!1),s=Lt({overwrite:!1,data:"isFromStart",lazy:b&&G(w),immediateRender:b,stagger:0,parent:D},n),g&&(s[c.prop]=g),qt(e._startAt=ai.set(I,s)),i<0&&e._startAt.render(-1,!0),e._zTime=i,b){if(!i)return}else t(e._startAt,1e-8);for(e._pt=e._ptCache=0,w=A&&G(w)||w&&!A,r=0;r")}));else{for(p in f={},T)"ease"===p||"easeEach"===p||ii(p,T[p],f,T.easeEach);for(p in f)for(M=f[p].sort((function(t,e){return t.t-e.t})),I=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(n=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(n=Ot(m%a),m===p?(s=this._repeat,n=d):((s=~~(m/a))&&s===m/a&&(n=d,s--),n>d&&(n=d)),(u=this._yoyo&&1&s)&&(f=this._yEase,n=d-n),o=Wt(this._tTime,a),n===c&&!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(Ot(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(Kt(this,t<0?t:n,i,e))return this._tTime=0,this;if(c!==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=(f||this._ease)(n/d),this._from&&(this.ratio=h=1-h),n&&!c&&!e&&(Te(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),Te(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&Te(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&&!c||!m&&!c||(Te(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&&te(t)&&(t._initted||!ee(t))||(t._ts<0||t._dp._ts<0)&&!ee(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=ue(0,t._tDur,e),s=Wt(l,h),t._yoyo&&1&s&&(u=1-u),s!==Wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||n||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&Kt(t,e,n,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,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&&Te(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&Te(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&qt(t,1),i||(Te(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){g||Le.wake(),this._ts||this.play();var r=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||ei(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 Je=1,t.vars[e]="+=0",ei(t,a),Je=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=St(i)+he(o.e)),o.b&&(o.b=o.s+he(o.b))}(this,t,e,i,n,this._ease(r/this._dur),r)?this.resetTo(t,e,i,n):(Gt(this,0),this.parent||Vt(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?ke(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,$e&&!0!==$e.vars.overwrite)._first||ke(this),this.parent&&i!==this.timeline.totalDuration()&&ie(this,this._dur*this.timeline._tDur/i,0,1),this}var n,r,s,a,o,u,h,l=this._targets,f=t?pe(t):l,c=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,f))return"all"===e&&(this._pt=0),ke(this);for(n=this._op=this._op||[],"all"!==e&&(j(e)&&(o={},Ct(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,n,r,s,a=t[0]?Tt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(n in i=Bt({},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(~f.indexOf(l[h]))for(o in r=c[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)||Nt(this,u,"_pt"),delete r[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&ke(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return ae(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 ae(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 h.killTweensOf(t,e,i)},e}(Qe);Lt(ai.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Ct("staggerTo,staggerFrom,staggerFromTo",(function(t){ai[t]=function(){var e=new Ge,i=le.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var oi=function(t,e,i){return t[e]=i},ui=function(t,e,i){return t[e](i)},hi=function(t,e,i,n){return t[e](n.fp,i)},li=function(t,e,i){return t.setAttribute(e,i)},fi=function(t,e){return U(t[e])?ui:H(t[e])&&t.setAttribute?li:oi},ci=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},pi=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},di=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)},mi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},gi=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},_i=function(t){for(var e,i,n=this._pt;n;)i=n._next,n.p===t&&!n.op||n.op===t?Nt(this,n,"_pt"):n.dep||(e=1),n=i;return!e},vi=function(t,e,i,n){n.mSet(t,e,n.m.call(n.tween,i,n.mt),n)},yi=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},xi=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||ci,this.d=a||this,this.set=o||oi,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=vi,this.m=t,this.mt=i,this.tween=e},t}();Ct(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 dt[t]=1})),ot.TweenMax=ot.TweenLite=ai,ot.TimelineLite=ot.TimelineMax=Ge,h=new Ge({sortChildren:!1,defaults:z,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),R.stringFilter=De;var bi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var n=t.map((function(t){return ki.quickSetter(t,e,i)})),r=n.length;return function(t){for(var e=r;e--;)n[e](t)}}t=t[0]||{};var s=_t[e],a=Tt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var n=new s;m._pt=0,n.init(t,i?e+i:e,m,0,[t]),n.render(1,n),m._pt&&mi(1,m)}: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=ki.to(t,Bt(((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 h.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Xe(t.ease,z.ease)),Rt(z,t||{})},config:function(t){return Rt(R,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&&!_t[t]&&!ot[t]&&ft(e+" effect requires "+t+" plugin.")})),vt[e]=function(t,e,n){return i(pe(t),Lt(e||{},r),n)},s&&(Ge.prototype[e]=function(t,i,n){return this.add(vt[e](t,Q(i)?i:(n=i)&&{},this),n)})},registerEase:function(t,e){Re[t]=Xe(e)},parseEase:function(t,e){return arguments.length?Xe(t,e):Re},getById:function(t){return h.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,n,r=new Ge(t);for(r.smoothChildTiming=G(t.smoothChildTiming),h.remove(r),r._dp=0,r._time=r._tTime=h._time,i=h._first;i;)n=i._next,!e&&!i._dur&&i instanceof ai&&i.vars.onComplete===i._targets[0]||Jt(r,i,i._start-i._delay),i=n;return Jt(h,r,0),r},utils:{wrap:function t(e,i,n){var r=i-e;return K(e)?ye(e,t(0,e.length),i):oe(n,(function(t){return(r+(t-e)%r)%r+e}))},wrapYoyo:function t(e,i,n){var r=i-e,s=2*r;return K(e)?ye(e,t(0,e.length-1),i):oe(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>r?s-t:t)}))},distribute:me,random:ve,snap:_e,normalize:function(t,e,i){return be(t,e,0,1,i)},getUnit:he,clamp:function(t,e,i){return oe(i,(function(i){return ue(t,e,i)}))},splitColor:Ee,toArray:pe,selector:function(t){return t=pe(t)[0]||ft("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return pe(e,i.querySelectorAll?i:i===t?ft("Invalid scope")||c.createElement("div"):t)}},mapRange:be,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?nn[r]:"")+t},sn=function(){"undefined"!=typeof window&&window.document&&(Ci=window,Si=Ci.document,Oi=Si.documentElement,Mi=tn("div")||{style:{}},tn("div"),Zi=rn(Zi),Ki=Zi+"Origin",Mi.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Pi=!!rn("perspective"),Ei=1)},an=function t(e){var i,n=tn("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),r=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Oi.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)),Oi.removeChild(n),this.style.cssText=a,i},on=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},un=function(t){var e;try{e=t.getBBox()}catch(i){e=an.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===an||(e=an.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+on(t,["x","cx","x1"])||0,y:+on(t,["y","cy","y1"])||0,width:0,height:0}},hn=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!un(t))},ln=function(t,e){if(e){var i=t.style;e in Ii&&e!==Ki&&(e=Zi),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Ri,"-$1").toLowerCase())):i.removeAttribute(e)}},fn=function(t,e,i,n,r,s){var a=new xi(t._pt,e,i,0,1,s?Ui:ji);return t._pt=a,a.b=n,a.e=r,t._props.push(i),a},cn={deg:1,rad:1,turn:1},pn=function t(e,i,n,r){var s,a,o,u,h=parseFloat(n)||0,l=(n+"").trim().substr((h+"").length)||"px",f=Mi.style,c=zi.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(c?"Width":"Height"),m=100,g="px"===r,_="%"===r;return r===l||!h||cn[r]||cn[l]?h:("px"!==l&&!g&&(h=t(e,i,n,"px")),u=e.getCTM&&hn(e),!_&&"%"!==l||!Ii[i]&&!~i.indexOf("adius")?(f[c?"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!==Si&&a.appendChild||(a=Si.body),(o=a._gsap)&&_&&o.width&&c&&o.time===Le.time?St(h/o.width*m):((_||"%"===l)&&(f.position=en(e,"position")),a===e&&(f.position="static"),a.appendChild(Mi),s=Mi[d],a.removeChild(Mi),f.position="absolute",c&&_&&((o=Tt(a)).time=Le.time,o.width=a[d]),St(g?s*h/m:s&&h?m/s*h:0))):(s=u?e.getBBox()[c?"width":"height"]:e[d],St(_?h/s*m:h/100*s)))},dn=function(t,e,i,n){var r;return Ei||sn(),e in Vi&&"transform"!==e&&~(e=Vi[e]).indexOf(",")&&(e=e.split(",")[0]),Ii[e]&&"transform"!==e?(r=Cn(t,n),r="transformOrigin"!==e?r[e]:r.svg?r.origin:Sn(en(t,Ki))+" "+r.zOrigin+"px"):(!(r=t.style[e])||"auto"===r||n||~(r+"").indexOf("calc("))&&(r=vn[e]&&vn[e](t,e,i)||en(t,e)||kt(t,e)||("opacity"===e?1:0)),i&&!~(r+"").trim().indexOf(" ")?pn(t,e,r,i)+i:r},mn=function(t,e,i,n){if(!i||"none"===i){var r=rn(e,t,1),s=r&&en(t,r,1);s&&s!==i?(e=r,i=s):"borderColor"===e&&(i=en(t,"borderTopColor"))}var a,o,u,h,l,f,c,p,d,m,g,_=new xi(this._pt,t.style,e,0,1,di),v=0,y=0;if(_.b=i,_.e=n,i+="","auto"===(n+="")&&(t.style[e]=n,n=en(t,e)||n,t.style[e]=i),De(a=[i,n]),n=a[1],u=(i=a[0]).match(it)||[],(n.match(it)||[]).length){for(;o=it.exec(n);)c=o[0],d=n.substring(v,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),c!==(f=u[y++]||"")&&(h=parseFloat(f)||0,g=f.substr((h+"").length),"="===c.charAt(1)&&(c=Et(h,c)+g),p=parseFloat(c),m=c.substr((p+"").length),v=it.lastIndex-m.length,m||(m=m||R.units[e]||g,v===n.length&&(n+=m,_.e+=m)),g!==m&&(h=pn(t,e,f,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],Ii[i]&&(n=1,i="transformOrigin"===i?Ki:Zi),ln(s,i);n&&(ln(s,Zi),u&&(u.svg&&s.removeAttribute("transform"),Cn(s,1),u.uncache=1))}},vn={clearProps:function(t,e,i,n,r){if("isFromStart"!==r.data){var s=t._pt=new xi(t._pt,e,i,0,0,_n);return s.u=n,s.pr=-10,s.tween=r,t._props.push(i),1}}},yn=[1,0,0,1,0,0],xn={},bn=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},wn=function(t){var e=en(t,Zi);return bn(e)?yn:e.substr(7).match(et).map(St)},Tn=function(t,e){var i,n,r,s,a=t._gsap||Tt(t),o=t.style,u=wn(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(",")?yn:u:(u!==yn||t.offsetParent||t===Oi||a.svg||(r=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,Oi.appendChild(t)),u=wn(t),r?o.display=r:ln(t,"display"),s&&(n?i.insertBefore(t,n):i?i.appendChild(t):Oi.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},kn=function(t,e,i,n,r,s){var a,o,u,h=t._gsap,l=r||Tn(t,!0),f=h.xOrigin||0,c=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],x=l[5],b=e.split(" "),w=parseFloat(b[0])||0,T=parseFloat(b[1])||0;i?l!==yn&&(o=m*v-g*_)&&(u=w*(-g/o)+T*(m/o)-(m*x-g*y)/o,w=w*(v/o)+T*(-_/o)+(_*x-v*y)/o,T=u):(w=(a=un(t)).x+(~b[0].indexOf("%")?w/100*a.width:w),T=a.y+(~(b[1]||b[0]).indexOf("%")?T/100*a.height:T)),n||!1!==n&&h.smooth?(y=w-f,x=T-c,h.xOffset=p+(y*m+x*_)-y,h.yOffset=d+(y*g+x*v)-x):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=T,h.smooth=!!n,h.origin=e,h.originIsAbsolute=!!i,t.style[Ki]="0px 0px",s&&(fn(s,h,"xOrigin",f,w),fn(s,h,"yOrigin",c,T),fn(s,h,"xOffset",p,h.xOffset),fn(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+T)},Cn=function(t,e){var i=t._gsap||new He(t);if("x"in i&&!e&&!i.uncache)return i;var n,r,s,a,o,u,h,l,f,c,p,d,m,g,_,v,y,x,b,w,T,k,C,S,O,E,M,A,P,I,D,L,B=t.style,z=i.scaleX<0,F="px",V="deg",N=en(t,Ki)||"0";return n=r=s=u=h=l=f=c=p=0,a=o=1,i.svg=!(!t.getCTM||!hn(t)),g=Tn(t,i.svg),i.svg&&(S=(!i.uncache||"0px 0px"===N)&&!e&&t.getAttribute("data-svg-origin"),kn(t,S||N,!!S||i.originIsAbsolute,!1!==i.smooth,g)),d=i.xOrigin||0,m=i.yOrigin||0,g!==yn&&(x=g[0],b=g[1],w=g[2],T=g[3],n=k=g[4],r=C=g[5],6===g.length?(a=Math.sqrt(x*x+b*b),o=Math.sqrt(T*T+w*w),u=x||b?Bi(b,x)*Di:0,(f=w||T?Bi(w,T)*Di+u:0)&&(o*=Math.abs(Math.cos(f*Li))),i.svg&&(n-=d-(d*x+m*w),r-=m-(d*b+m*T))):(L=g[6],I=g[7],M=g[8],A=g[9],P=g[10],D=g[11],n=g[12],r=g[13],s=g[14],h=(_=Bi(L,P))*Di,_&&(S=k*(v=Math.cos(-_))+M*(y=Math.sin(-_)),O=C*v+A*y,E=L*v+P*y,M=k*-y+M*v,A=C*-y+A*v,P=L*-y+P*v,D=I*-y+D*v,k=S,C=O,L=E),l=(_=Bi(-w,P))*Di,_&&(v=Math.cos(-_),D=T*(y=Math.sin(-_))+D*v,x=S=x*v-M*y,b=O=b*v-A*y,w=E=w*v-P*y),u=(_=Bi(b,x))*Di,_&&(S=x*(v=Math.cos(_))+b*(y=Math.sin(_)),O=k*v+C*y,b=b*v-x*y,C=C*v-k*y,x=S,k=O),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=St(Math.sqrt(x*x+b*b+w*w)),o=St(Math.sqrt(C*C+L*L)),_=Bi(k,C),f=Math.abs(_)>2e-4?_*Di:0,p=D?1/(D<0?-D:D):0),i.svg&&(S=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!bn(en(t,Zi)),S&&t.setAttribute("transform",S))),Math.abs(f)>90&&Math.abs(f)<270&&(z?(a*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=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)+F,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)+F,i.z=s+F,i.scaleX=St(a),i.scaleY=St(o),i.rotation=St(u)+V,i.rotationX=St(h)+V,i.rotationY=St(l)+V,i.skewX=f+V,i.skewY=c+V,i.transformPerspective=p+F,(i.zOrigin=parseFloat(N.split(" ")[2])||0)&&(B[Ki]=Sn(N)),i.xOffset=i.yOffset=0,i.force3D=R.force3D,i.renderTransform=i.svg?An:Pi?Mn:En,i.uncache=0,i},Sn=function(t){return(t=t.split(" "))[0]+" "+t[1]},On=function(t,e,i){var n=he(e);return St(parseFloat(e)+parseFloat(pn(t,"x",i+"px",n)))+n},En=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Mn(t,e)},Mn=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,f=i.skewX,c=i.skewY,p=i.scaleX,d=i.scaleY,m=i.transformPerspective,g=i.force3D,_=i.target,v=i.zOrigin,y="",x="auto"===g&&t&&1!==t||!0===g;if(v&&("0deg"!==l||"0deg"!==h)){var b,w=parseFloat(h)*Li,T=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*Li,b=Math.cos(w),s=On(_,s,T*b*-v),a=On(_,a,-Math.sin(w)*-v),o=On(_,o,k*b*-v+v)}"0px"!==m&&(y+="perspective("+m+") "),(n||r)&&(y+="translate("+n+"%, "+r+"%) "),(x||"0px"!==s||"0px"!==a||"0px"!==o)&&(y+="0px"!==o||x?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+") "),"0deg"!==u&&(y+="rotate("+u+") "),"0deg"!==h&&(y+="rotateY("+h+") "),"0deg"!==l&&(y+="rotateX("+l+") "),"0deg"===f&&"0deg"===c||(y+="skew("+f+", "+c+") "),1===p&&1===d||(y+="scale("+p+", "+d+") "),_.style[Zi]=y||"translate(0, 0)"},An=function(t,e){var i,n,r,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,c=o.rotation,p=o.skewX,d=o.skewY,m=o.scaleX,g=o.scaleY,_=o.target,v=o.xOrigin,y=o.yOrigin,x=o.xOffset,b=o.yOffset,w=o.forceCSS,T=parseFloat(l),k=parseFloat(f);c=parseFloat(c),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),c+=d),c||p?(c*=Li,p*=Li,i=Math.cos(c)*m,n=Math.sin(c)*m,r=Math.sin(c-p)*-g,s=Math.cos(c-p)*g,p&&(d*=Li,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=St(i),n=St(n),r=St(r),s=St(s)):(i=m,s=g,n=r=0),(T&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(T=pn(_,"x",l,"px"),k=pn(_,"y",f,"px")),(v||y||x||b)&&(T=St(T+v-(v*i+y*r)+x),k=St(k+y-(v*n+y*s)+b)),(u||h)&&(a=_.getBBox(),T=St(T+u/100*a.width),k=St(k+h/100*a.height)),a="matrix("+i+","+n+","+r+","+s+","+T+","+k+")",_.setAttribute("transform",a),w&&(_.style[Zi]=a)},Pn=function(t,e,i,n,r){var s,a,o=360,u=j(r),h=parseFloat(r)*(u&&~r.indexOf("rad")?Di: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 xi(t._pt,e,i,n,h,qi),a.e=l,a.u="deg",t._props.push(i),a},In=function(t,e){for(var i in e)t[i]=e[i];return t},Dn=function(t,e,i){var n,r,s,a,o,u,h,l=In({},i._gsap),f=i.style;for(r in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),f[Zi]=e,n=Cn(i,1),ln(i,Zi),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Zi],f[Zi]=e,n=Cn(i,1),f[Zi]=s),Ii)(s=l[r])!==(a=n[r])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(r)<0&&(o=he(s)!==(h=he(a))?pn(i,r,s,h):parseFloat(s),u=parseFloat(a),t._pt=new xi(t._pt,n,r,o,u-o,Ni),t._pt.u=h||0,t._props.push(r));In(n,l)};Ct("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}));vn[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 dn(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 Ln,Bn,Rn,zn={name:"css",register:sn,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,n,r){var s,a,o,u,h,l,f,c,p,d,m,g,_,v,y,x,b,w,T,k=this._props,C=t.style,S=i.vars.startAt;for(f in Ei||sn(),e)if("autoRound"!==f&&(a=e[f],!_t[f]||!ti(f,e,i,n,t,r)))if(h=typeof a,l=vn[f],"function"===h&&(h=typeof(a=a.call(i,n,t,r))),"string"===h&&~a.indexOf("random(")&&(a=xe(a)),l)l(this,t,f,a,i)&&(y=1);else if("--"===f.substr(0,2))s=(getComputedStyle(t).getPropertyValue(f)+"").trim(),a+="",Pe.lastIndex=0,Pe.test(s)||(c=he(s),p=he(a)),p?c!==p&&(s=pn(t,f,s,p)+p):c&&(a+=c),this.add(C,"setProperty",s,a,n,r,0,0,f),k.push(f);else if("undefined"!==h){if(S&&f in S?(s="function"==typeof S[f]?S[f].call(i,n,t,r):S[f],j(s)&&~s.indexOf("random(")&&(s=xe(s)),he(s+"")||(s+=R.units[f]||he(dn(t,f))||""),"="===(s+"").charAt(1)&&(s=dn(t,f))):s=dn(t,f),u=parseFloat(s),(d="string"===h&&"="===a.charAt(1)&&a.substr(0,2))&&(a=a.substr(2)),o=parseFloat(a),f in Vi&&("autoAlpha"===f&&(1===u&&"hidden"===dn(t,"visibility")&&o&&(u=0),fn(this,C,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==f&&"transform"!==f&&~(f=Vi[f]).indexOf(",")&&(f=f.split(",")[0])),m=f in Ii)if(g||((_=t._gsap).renderTransform&&!e.parseTransform||Cn(t,e.parseTransform),v=!1!==e.smoothOrigin&&_.smooth,(g=this._pt=new xi(this._pt,C,Zi,0,1,_.renderTransform,_,0,-1)).dep=1),"scale"===f)this._pt=new xi(this._pt,_,"scaleY",_.scaleY,(d?Et(_.scaleY,d+o):o)-_.scaleY||0),k.push("scaleY",f),f+="X";else{if("transformOrigin"===f){b=void 0,w=void 0,T=void 0,b=(x=a).split(" "),w=b[0],T=b[1]||"50%","top"!==w&&"bottom"!==w&&"left"!==T&&"right"!==T||(x=w,w=T,T=x),b[0]=gn[w]||w,b[1]=gn[T]||T,a=b.join(" "),_.svg?kn(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==_.zOrigin&&fn(this,_,"zOrigin",_.zOrigin,p),fn(this,C,f,Sn(s),Sn(a)));continue}if("svgOrigin"===f){kn(t,a,1,v,0,this);continue}if(f in xn){Pn(this,_,f,u,d?Et(u,d+a):a);continue}if("smoothOrigin"===f){fn(this,_,"smooth",_.smooth,a);continue}if("force3D"===f){_[f]=a;continue}if("transform"===f){Dn(this,a,t);continue}}else f in C||(f=rn(f)||f);if(m||(o||0===o)&&(u||0===u)&&!Fi.test(a)&&f in C)o||(o=0),(c=(s+"").substr((u+"").length))!==(p=he(a)||(f in R.units?R.units[f]:c))&&(u=pn(t,f,s,p)),this._pt=new xi(this._pt,m?_:C,f,u,(d?Et(u,d+o):o)-u,m||"px"!==p&&"zIndex"!==f||!1===e.autoRound?Ni:Yi),this._pt.u=p||0,c!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Xi);else if(f in C)mn.call(this,t,f,s,d?d+a:a);else{if(!(f in t)){lt(f,a);continue}this.add(t,f,s||t[f],d?d+a:a,n,r)}k.push(f)}y&&yi(this)},get:dn,aliases:Vi,getSetter:function(t,e,i){var n=Vi[e];return n&&n.indexOf(",")<0&&(e=n),e in Ii&&e!==Ki&&(t._gsap.x||dn(t,"x"))?i&&Ai===i?"scale"===e?Gi:Qi:(Ai=i||{},"scale"===e?$i:Ji):t.style&&!H(t.style[e])?Wi:~e.indexOf("-")?Hi:fi(t,e)},core:{_removeProperty:ln,_getMatrix:Tn}};ki.utils.checkPrefix=rn,Rn=Ct((Ln="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Bn="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Ii[t]=1})),Ct(Bn,(function(t){R.units[t]="deg",xn[t]=1})),Vi[Rn[13]]=Ln+","+Bn,Ct("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Vi[e[1]]=Rn[e[0]]})),Ct("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){R.units[t]="px"})),ki.registerPlugin(zn);var Fn,Vn,Nn,qn,Xn,Yn,jn,Un,Wn,Hn=ki.registerPlugin(zn)||ki,Qn=(Hn.core.Tween,"transform"),Gn=Qn+"Origin",$n=function(t){var e=t.ownerDocument||t;!(Qn in t.style)&&"msTransform"in t.style&&(Gn=(Qn="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(Vn=window,jn=new or,e){Fn=e,Nn=e.documentElement,qn=e.body,(Un=Fn.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),n=e.createElement("div");qn.appendChild(i),i.appendChild(n),i.style.position="static",i.style[Qn]="translate3d(0,0,1px)",Wn=n.offsetParent!==i,qn.removeChild(i)}return e},Jn=[],Zn=[],Kn=function(){return Vn.pageYOffset||Fn.scrollTop||Nn.scrollTop||qn.scrollTop||0},tr=function(){return Vn.pageXOffset||Fn.scrollLeft||Nn.scrollLeft||qn.scrollLeft||0},er=function(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)},ir=function t(e){return"fixed"===Vn.getComputedStyle(e).position||((e=e.parentNode)&&1===e.nodeType?t(e):void 0)},nr=function t(e,i){if(e.parentNode&&(Fn||$n(e))){var n=er(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=Fn.createElementNS?Fn.createElementNS(r.replace(/^https/,"http"),s):Fn.createElement(s);return i&&(n?(Yn||(Yn=t(e)),h.setAttribute("width",.01),h.setAttribute("height",.01),h.setAttribute("transform","translate("+a+","+o+")"),Yn.appendChild(h)):(Xn||((Xn=t(e)).style.cssText=u),h.style.cssText=u+"width:0.1px;height:0.1px;top:"+o+"px;left:"+a+"px",Xn.appendChild(h))),h}throw"Need document and parent."},rr=function(t){var e,i=t.getCTM();return i||(e=t.style[Qn],t.style[Qn]="none",t.appendChild(Un),i=Un.getCTM(),t.removeChild(Un),e?t.style[Qn]=e:t.style.removeProperty(Qn.replace(/([A-Z])/g,"-$1").toLowerCase())),i||jn.clone()},sr=function(t,e){var i,n,r,s,a,o,u=er(t),h=t===u,l=u?Jn:Zn,f=t.parentNode;if(t===Vn)return t;if(l.length||l.push(nr(t,1),nr(t,2),nr(t,3)),i=u?Yn:Xn,u)h?(s=-(r=rr(t)).e/r.a,a=-r.f/r.d,n=jn):t.getBBox?(r=t.getBBox(),n=(n=t.transform?t.transform.baseVal:{}).numberOfItems?n.numberOfItems>1?function(t){for(var e=new or,i=0;i4&&(s=r.offsetLeft,a=r.offsetTop,r=0);if("absolute"!==(o=Vn.getComputedStyle(t)).position&&"fixed"!==o.position)for(n=t.offsetParent;f&&f!==n;)s+=f.scrollLeft||0,a+=f.scrollTop||0,f=f.parentNode;(r=i.style).top=t.offsetTop-a+"px",r.left=t.offsetLeft-s+"px",r[Qn]=o[Qn],r[Gn]=o[Gn],r.position="fixed"===o.position?"fixed":"absolute",t.parentNode.appendChild(i)}return i},ar=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},or=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),ar(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 ar(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,f=t.e,c=t.f;return ar(this,o*e+h*n,o*i+h*r,u*e+l*n,u*i+l*r,s+f*e+c*n,a+f*i+c*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}(); 16 | /*! 17 | * matrix 3.10.4 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 | */function ur(t,e,i,n){if(!t||!t.parentNode||(Fn||$n(t)).documentElement===t)return new or;var r=function(t){for(var e,i;t&&t!==qn;)(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=er(t)?Jn:Zn,a=sr(t,i),o=s[0].getBoundingClientRect(),u=s[1].getBoundingClientRect(),h=s[2].getBoundingClientRect(),l=a.parentNode,f=!n&&ir(t),c=new or((u.left-o.left)/100,(u.top-o.top)/100,(h.left-o.left)/100,(h.top-o.top)/100,o.left+(f?0:tr()),o.top+(f?0:Kn()));if(l.removeChild(a),r)for(o=r.length;o--;)(u=r[o]).scaleX=u.scaleY=0,u.renderTransform(1,u);return e?c.inverse():c}var hr,lr,fr,cr,pr,dr,mr,gr=1,_r=function(t,e){return t.actions.forEach((function(t){return t.vars[e]&&t.vars[e](t)}))},vr={},yr=180/Math.PI,xr=Math.PI/180,br={},wr={},Tr={},kr=function(t){return"string"==typeof t?t.split(" ").join("").split(","):t},Cr=kr("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),Sr=kr("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),Or=function(t){return hr(t)[0]||console.warn("Element not found:",t)},Er=function(t){return Math.round(1e4*t)/1e4||0},Mr=function(t,e,i){return t.forEach((function(t){return t.classList[i](e)}))},Ar={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},Pr={zIndex:1,simple:1,clearProps:1,scale:1,absolute:1,fitChild:1,getVars:1,props:1},Ir=function(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()},Dr=function(t,e){var i,n={};for(i in t)e[i]||(n[i]=t[i]);return n},Lr={},Br=function(t){var e=Lr[t]=kr(t);return Tr[t]=e.concat(Sr),e},Rr=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},zr=function(t,e,i){return t.forEach((function(t){return t.d=Rr(i?t.element:t.t,e)})),t.sort((function(t,e){return t.d-e.d})),t},Fr=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:wr[i]||(wr[i]=Ir(i)),n);return r},Vr=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"),Gr(g,_,L,V)):_.isVisible!==g.isVisible&&(_.isVisible?g.isVisible||(_.css=g.css,j.push(_),U.splice(o--,1),T&&I&&Gr(g,_,L,V)):(g.isVisible&&Y.push(g),U.splice(o--,1))),L||(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"),I&&P&&u.classList.add(P)):U.splice(o--,1),c.push(g);var e;if(P&&(e=c.map((function(t){return t.element})),I&&e.forEach((function(t){return t.classList.remove(P)}))),ts(!1),L?(N.scaleX=function(t){return U[t].a.scaleX},N.scaleY=function(t){return U[t].a.scaleY}):(N.width=function(t){return U[t].a.width+"px"},N.height=function(t){return U[t].a.height+"px"},N.autoRound=i.autoRound||!1),N.x=function(t){return U[t].a.x+"px"},N.y=function(t){return U[t].a.y+"px"},N.rotation=function(t){return U[t].a.rotation+(z?360*Q(t,f[t],f):0)},N.skewX=function(t){return U[t].a.skewX},f=U.map((function(t){return t.t})),(D||0===D)&&(N.modifiers={zIndex:function(){return D}},N.zIndex=D,N.immediateRender=!1!==i.immediateRender),B&&(N.opacity=function(t){return U[t].sd<0?0:U[t].sd>0?U[t].a.opacity:"+=0"}),W.length){R=lr.utils.distribute(R);var n=f.slice(W.length);N.stagger=function(t,e){return R(~W.indexOf(e)?f.indexOf(U[t].swap.t):t,e,n)}}if(Cr.forEach((function(t){return i[t]&&q.eventCallback(t,i[t],i[t+"Params"])})),C&&f.length)for(s in X=Dr(N,Ar),"scale"in C&&(C.scaleX=C.scaleY=C.scale,delete C.scale),C)(r=Dr(C[s],Pr))[s]=N[s],!("duration"in r)&&"duration"in N&&(r.duration=N.duration),r.stagger=N.stagger,$.call(q,f,r,0),delete X[s];(f.length||j.length||Y.length)&&(P&&q.add((function(){return Mr(e,P,q._zTime<0?"remove":"add")}),0)&&!O&&Mr(e,P,"add"),f.length&&$.call(q,f,X,0)),Qr(b,Y,q),Qr(w,j,q);var p=fr&&fr.timeline;p&&(p.add(q,0),fr._final.push((function(){return Nr(U,!x)}))),a=q.duration(),q.call((function(){var t=q.time()>=a;t&&!p&&Nr(U,!x),P&&Mr(e,P,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}))),fr)?(T&&(v=fr._abs).push.apply(v,Yr(U,T)),fr._run.push(m)):(T&&jr(Yr(U,T)),m());return fr?fr.timeline:q},is=function t(e){e.vars.onInterrupt&&e.vars.onInterrupt.apply(e,e.vars.onInterruptParams||[]),e.getChildren(!0,!1,!0).forEach(t)},ns=function(t,e){if(t&&t.progress()<1&&!t.paused())return e&&(is(t),e<2&&t.progress(1),t.kill()),!0},rs=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},ss=function(){function t(t,e,i){if(this.props=e&&e.props,this.simple=!(!e||!e.simple),i)this.targets=Hr(t),this.elementStates=t,rs(this);else{this.targets=hr(t);var n=e&&(!1===e.kill||e.batch&&!e.kill);fr&&!n&&fr._kill.push(this),this.update(n||!!fr)}}var e=t.prototype;return e.update=function(t){var e=this;return this.elementStates=this.targets.map((function(t){return new as(t,e.props,e.simple)})),rs(this),this.interrupt(t),this.recordInlineStyles(),this},e.clear=function(){return this.targets.length=this.elementStates.length=0,rs(this),this},e.fit=function(t,e,i){for(var n,r,s=zr(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=fr,n=cr;return fr=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,fr=i,this.killConflicts(),this},e.animate=function(){var t,e,i=this,n=fr,r=this.timeline,s=this.actions.length;for(fr=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 ss,t.states.forEach((function(t){return e.add(t)})),(i=e.compare(hs.getState(s))).enter.length&&n&&n(i.enter),i.leave.length&&r&&r(i.leave))})),jr(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()})),_r(i,"onComplete"))})),fr=n;s--;)this.actions[s].vars.once&&this.actions[s].kill();return _r(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!==fr&&(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 vr[this.id]},t}(),hs=function(){function t(){}return t.getState=function(e,i){var n=$r(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),es(t,$r(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,-1)},t.to=function(t,e){return es(t,$r(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,1)},t.fromTo=function(t,e,i){return es(t,e,i)},t.fit=function(t,e,i){var n=i?Dr(i,Pr):{},r=i||n,s=r.absolute,a=r.scale,o=r.getVars,u=r.props,h=r.runBackwards,l=r.onComplete,f=r.simple,c=i&&i.fitChild&&Or(i.fitChild),p=Ur(e,u,f,t),d=Ur(t,0,f,p),m=u?Tr[u]:Sr;return u&&Wr(n,p.props),h&&(Fr(d,m),"immediateRender"in n||(n.immediateRender=!0),n.onComplete=function(){Vr(d),l&&l.apply(this,arguments)}),s&&Xr(d,p),n=Gr(d,p,a||c,u,c,n.duration||o?n:0),o?n:n.duration?lr.to(d.element,n):null},t.makeAbsolute=function(t,e){return(t instanceof ss?t:new ss(t,e)).makeAbsolute()},t.batch=function(t){return t||(t="default"),vr[t]||(vr[t]=new us(t))},t.killFlipsOf=function(t,e){(t instanceof ss?t.targets:hr(t)).forEach((function(t){return t&&ns(t._flip,!1!==e?1:2)}))},t.isFlipping=function(e){var i=t.getByTarget(e);return!!i&&i.isActive()},t.getByTarget=function(t){return(Or(t)||br)._flip},t.getElementState=function(t,e){return new as(Or(t),e)},t.convertCoordinates=function(t,e,i){var n=ur(e,!0,!0).multiply(ur(t));return i?n.apply(i):n},t.register=function(t){if(pr="undefined"!=typeof document&&document.body){lr=t,$n(pr),hr=lr.utils.toArray;var e=lr.utils.snap(.1);dr=function(t,i){return e(parseFloat(t)+i)}}},t}();hs.version="3.10.4","undefined"!=typeof window&&window.gsap&&window.gsap.registerPlugin(hs),Hn.registerPlugin(hs);let ls={width:window.innerWidth,height:window.innerHeight};window.addEventListener("resize",(()=>ls={width:window.innerWidth,height:window.innerHeight}));const fs={grid:document.querySelector(".grid"),enterCtrl:document.querySelector(".content__enter"),backCtrl:document.querySelector(".button-back"),contentItem:document.querySelector(".content__item-img"),gridItemTarget:document.querySelector(".grid__item--target"),gridItemOriginalTarget:document.querySelector(".content__item"),contentTitleTexts:document.querySelectorAll(".content__item-title > span"),gridTitleTexts:document.querySelectorAll(".grid__item--title > span"),gridItems:document.querySelectorAll(".grid > .grid__item:not(.grid__item--target):not(.grid__item--title):not(.grid__item--back)")},cs=1,ps="expo.inOut",ds=document.body,ms=getComputedStyle(ds).getPropertyValue("--color-bg");let gs=!1;const _s=(t,e=400)=>{const i=t.offsetLeft+t.offsetWidth/2,n=t.offsetTop+t.offsetHeight/2,r=Math.atan2(Math.abs(ls.height/2-n),Math.abs(ls.width/2-i));let s=Math.abs(Math.cos(r)*e),a=Math.abs(Math.sin(r)*e);return{x:i{const e=t.offsetLeft+t.offsetWidth/2,i=t.offsetTop+t.offsetHeight/2;return Math.hypot(e-ls.width/2,i-ls.height/2)};fs.enterCtrl.addEventListener("click",(()=>(()=>{if(gs)return;gs=!0;const t=Hn.timeline({onComplete:()=>{gs=!1}}).addLabel("start",0).to(fs.enterCtrl,{duration:cs,ease:ps,opacity:0,onComplete:()=>Hn.set(fs.enterCtrl,{pointerEvents:"none"})},"start").add((()=>{fs.grid.classList.add("grid--open");const t=hs.getState(fs.contentItem);fs.gridItemTarget.appendChild(fs.contentItem),hs.from(t,{duration:cs,ease:ps})}),"start");for(let e of fs.gridItems){const{x:i,y:n}=_s(e),r=s(vs(e),0,1e3,0,.4);t.to(e.querySelector(".oh__inner"),{duration:1.7*cs,ease:ps,startAt:{yPercent:101},yPercent:0,delay:r},"start").set(e,{x:i,y:n,opacity:0},"start").to(e,{duration:cs,ease:"expo",x:0,y:0,delay:r,opacity:1},"start+=0.4")}t.to(fs.gridItemTarget.querySelector(".oh__inner"),{duration:1.7*cs,ease:ps,startAt:{yPercent:101},yPercent:0},"start").to(fs.contentTitleTexts,{duration:cs,ease:ps,yPercent:t=>t%2?100:-100,opacity:0},"start").to(fs.gridTitleTexts,{duration:cs,ease:ps,startAt:{xPercent:t=>t%2?50:-50,opacity:0},xPercent:0,opacity:1},"start").to(fs.backCtrl,{duration:cs,ease:ps,startAt:{xPercent:40,opacity:0},xPercent:0,opacity:1},"start").to(ds,{duration:cs,ease:ps,backgroundColor:"#CDD1CD"},"start")})())),fs.backCtrl.addEventListener("click",(()=>(()=>{if(gs)return;gs=!0;const t=Hn.timeline({onComplete:()=>{fs.grid.classList.remove("grid--open"),gs=!1}}).addLabel("start",0).to(ds,{duration:cs,ease:ps,backgroundColor:ms},"start").to(fs.gridItemTarget.querySelector(".oh__inner"),{duration:cs,ease:ps,yPercent:101},"start");for(let e of fs.gridItems){const{x:i,y:n}=_s(e),r=s(vs(e),0,1e3,.4,0);t.to(e,{duration:cs,ease:ps,x:i,y:n,opacity:0,delay:r},"start").to(e.querySelector(".oh__inner"),{duration:.5*cs,ease:ps,yPercent:101,delay:r},"start")}t.to(fs.gridTitleTexts,{duration:cs,ease:ps,xPercent:t=>t%2?50:-50,opacity:0},"start").to(fs.backCtrl,{duration:cs,ease:ps,xPercent:20,opacity:0},"start").to(fs.contentTitleTexts,{duration:cs,ease:ps,yPercent:0,opacity:1},"start+=0.4").to(fs.enterCtrl,{duration:cs,ease:ps,opacity:1,onComplete:()=>Hn.set(fs.enterCtrl,{pointerEvents:"auto"})},"start+=0.4").add((()=>{const t=hs.getState(fs.contentItem);fs.gridItemOriginalTarget.appendChild(fs.contentItem),hs.from(t,{duration:cs,ease:ps})}),"start+=0.4")})())),((t="img")=>new Promise((e=>{r(document.querySelectorAll(t),{background:!0},e)})))(".grid__item-img").then((t=>document.body.classList.remove("loading"))); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Image To Grid Transition | Codrops

Image To Grid Transition

Back to the article
Previous demo

Siobhan O'dwaya

Siobhan O'dwaya

Carrutha Method

Maria Coluga

Gabeta Quest

Lithera Britta

Franka Oumata

Manata Poly

Ghata Manabra

Tamara Shubaya

Linda Christa

Daniela Walters

Maria Del Mar

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "imagetogrid", 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/ImageToGridTransition.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/ImageToGridTransition/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "^2.5.0" 25 | }, 26 | "dependencies": { 27 | "gsap": "^3.10.4", 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: 16px; 9 | } 10 | 11 | html, body { 12 | overflow: hidden; 13 | height: 100vh; 14 | } 15 | 16 | body #cdawrap { 17 | justify-self: start; 18 | } 19 | 20 | .cda-sponsor-link, 21 | .frame__title-prev { 22 | white-space: nowrap; 23 | overflow: hidden; 24 | position: relative; 25 | } 26 | 27 | .cda-sponsor-link::before, 28 | .frame__title-prev::before { 29 | content: ''; 30 | height: 1px; 31 | width: 100%; 32 | background: currentColor; 33 | position: absolute; 34 | top: 92%; 35 | transition: transform 0.3s; 36 | transform-origin: 0% 50%; 37 | } 38 | 39 | .cda-sponsor-link:hover::before, 40 | .frame__title-prev:hover::before { 41 | transform: scaleX(0); 42 | transform-origin: 100% 50%; 43 | } 44 | 45 | body { 46 | margin: 0; 47 | --color-text: #010300; 48 | --color-bg: #76b272; 49 | --color-link: #000; 50 | --color-link-hover: #010300; 51 | color: var(--color-text); 52 | background-color: var(--color-bg); 53 | font-family: halyard-display, sans-serif; 54 | font-weight: 300; 55 | -webkit-font-smoothing: antialiased; 56 | -moz-osx-font-smoothing: grayscale; 57 | will-change: background-color; 58 | } 59 | 60 | /* Page Loader */ 61 | .js .loading::before, 62 | .js .loading::after { 63 | content: ''; 64 | position: fixed; 65 | z-index: 2000; 66 | } 67 | 68 | .js .loading::before { 69 | top: 0; 70 | left: 0; 71 | width: 100%; 72 | height: 100%; 73 | background: var(--color-bg); 74 | } 75 | 76 | .js .loading::after { 77 | top: 50%; 78 | left: 50%; 79 | width: 60px; 80 | height: 60px; 81 | margin: -30px 0 0 -30px; 82 | border-radius: 50%; 83 | opacity: 0.4; 84 | background: var(--color-link); 85 | animation: loaderAnim 0.7s linear infinite alternate forwards; 86 | 87 | } 88 | 89 | @keyframes loaderAnim { 90 | to { 91 | opacity: 1; 92 | transform: scale3d(0.5,0.5,1); 93 | } 94 | } 95 | 96 | a { 97 | text-decoration: none; 98 | color: var(--color-link); 99 | outline: none; 100 | } 101 | 102 | a:hover { 103 | color: var(--color-link-hover); 104 | outline: none; 105 | } 106 | 107 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 108 | a:focus { 109 | /* Provide a fallback style for browsers 110 | that don't support :focus-visible */ 111 | outline: none; 112 | background: lightgrey; 113 | } 114 | 115 | a:focus:not(:focus-visible) { 116 | /* Remove the focus indicator on mouse-focus for browsers 117 | that do support :focus-visible */ 118 | background: transparent; 119 | } 120 | 121 | a:focus-visible { 122 | /* Draw a very noticeable focus style for 123 | keyboard-focus on browsers that do support 124 | :focus-visible */ 125 | outline: 2px solid red; 126 | background: transparent; 127 | } 128 | 129 | .oh { 130 | position: relative; 131 | overflow: hidden; 132 | } 133 | 134 | .oh__inner { 135 | display: inline-block; 136 | will-change: transform; 137 | } 138 | 139 | .unbutton { 140 | background: none; 141 | border: 0; 142 | padding: 0; 143 | margin: 0; 144 | font: inherit; 145 | } 146 | 147 | .unbutton:focus { 148 | outline: none; 149 | } 150 | 151 | .frame { 152 | position: fixed; 153 | text-align: center; 154 | z-index: 1000; 155 | top: 0; 156 | left: 0; 157 | display: grid; 158 | align-content: space-between; 159 | width: 100%; 160 | max-width: none; 161 | height: 100vh; 162 | padding: 1rem; 163 | pointer-events: none; 164 | grid-template-columns: 50% 50%; 165 | grid-template-rows: auto 1fr auto auto; 166 | grid-template-areas: '... menu' '... ...' 'title ...' 'sponsor ...'; 167 | } 168 | 169 | .frame a, 170 | .frame button { 171 | pointer-events: auto; 172 | } 173 | 174 | .frame__title { 175 | grid-area: title; 176 | justify-content: flex-start; 177 | display: flex; 178 | flex-wrap: wrap; 179 | margin-bottom: 0.5rem; 180 | width: 12rem; 181 | } 182 | 183 | .frame__title-main { 184 | font-size: 1rem; 185 | margin: 0; 186 | font-weight: 300; 187 | } 188 | 189 | .frame__title-back { 190 | position: relative; 191 | display: flex; 192 | align-items: flex-end; 193 | } 194 | 195 | .frame__title-back span { 196 | display: none; 197 | } 198 | 199 | .frame__title-back svg { 200 | fill: var(--color-link); 201 | } 202 | 203 | .frame__title-back:hover svg, 204 | .frame__title-back:focus svg { 205 | fill: var(--color-link-hover); 206 | } 207 | 208 | .frame__title-prev { 209 | margin-top: 0.5rem; 210 | } 211 | 212 | .frame__title, 213 | .frame .cdawrap { 214 | transition: opacity 0.3s; 215 | } 216 | 217 | .frame--hidden .frame__title, 218 | .frame--hidden .frame .cdawrap { 219 | opacity: 0; 220 | pointer-events: none; 221 | } 222 | 223 | .button-menu { 224 | z-index: 100; 225 | width: 1.65rem; 226 | height: 0.65rem; 227 | color: var(--color-menu); 228 | cursor: not-allowed; 229 | border-top: 1px solid; 230 | border-bottom: 1px solid; 231 | grid-area: menu; 232 | align-self: start; 233 | justify-self: end; 234 | } 235 | 236 | .content { 237 | display: grid; 238 | place-items: center; 239 | width: 100%; 240 | } 241 | 242 | .content__item { 243 | height: 100vh; 244 | width: 100%; 245 | padding-top: 1rem; 246 | display: grid; 247 | align-items: center; 248 | } 249 | 250 | .content__item-title { 251 | grid-area: 1 / 1 / -1 / -1; 252 | margin: 0; 253 | cursor: default; 254 | height: 100%; 255 | display: flex; 256 | flex-direction: column; 257 | align-items: center; 258 | line-height: 0.85; 259 | font-size: 15.5vw; 260 | text-transform: uppercase; 261 | font-family: ivymode, sans-serif; 262 | font-weight: 200; 263 | -webkit-touch-callout: none; 264 | -webkit-user-select: none; 265 | -moz-user-select: none; 266 | -ms-user-select: none; 267 | user-select: none; 268 | } 269 | 270 | .content__item-title span { 271 | position: relative; 272 | z-index: 100; 273 | display: block; 274 | will-change: transform, opacity; 275 | } 276 | 277 | 278 | 279 | .content__item-img { 280 | background-size: cover; 281 | background-position: 50% 50%; 282 | align-self: center; 283 | justify-self: center; 284 | grid-area: 1 / 1 / -1 / -1; 285 | height: 50vh; 286 | width: 80vw; 287 | will-change: transform; 288 | } 289 | 290 | .content__enter { 291 | grid-area: 1 / 1 / -1 / -1; 292 | align-self: center; 293 | justify-self: center; 294 | color: #fff; 295 | font-size: 2rem; 296 | cursor: pointer; 297 | font-family: ivymode, sans-serif; 298 | font-weight: 200; 299 | z-index: 1; 300 | } 301 | 302 | .button-circle { 303 | width: 200px; 304 | height: 200px; 305 | display: grid; 306 | place-items: center; 307 | } 308 | 309 | .button-circle__text { 310 | line-height: 1; 311 | overflow: hidden; 312 | grid-area: 1 / 1 / -1 / -1; 313 | } 314 | 315 | .button-circle__text span { 316 | display: block; 317 | padding: 0 0.5rem; 318 | } 319 | 320 | .button-circle__text span::before { 321 | position: absolute; 322 | content: attr(data-text); 323 | bottom: 100%; 324 | font-style: italic; 325 | width: 100%; 326 | text-align: center; 327 | left: 0; 328 | } 329 | 330 | .button-circle:hover .button-circle__text span { 331 | transform: translate3d(0,100%,0); 332 | } 333 | 334 | .button-circle__deco { 335 | width: 100%; 336 | height: 100%; 337 | grid-area: 1 / 1 / -1 / -1; 338 | fill: none; 339 | stroke: currentColor; 340 | stroke-width: 1px; 341 | } 342 | 343 | .button-circle:hover .button-circle__deco { 344 | transform: scale3d(1.4,1.4,1); 345 | } 346 | 347 | .button-circle__text span, 348 | .button-circle__deco { 349 | transition: transform 0.3s ease-out; 350 | } 351 | 352 | .button-circle:hover .button-circle__text span, 353 | .button-circle:focus .button-circle__text span, 354 | .button-circle:hover .button-circle__deco, 355 | .button-circle:focus .button-circle__deco { 356 | transition: transform 0.4s cubic-bezier(0.7,0,0.3,1); 357 | } 358 | 359 | .grid { 360 | position: fixed; 361 | counter-reset: grid-counter; 362 | top: calc(50vh - 40vw); 363 | left: 0; 364 | width: 100%; 365 | height: 80vw; 366 | display: grid; 367 | grid-template-columns: repeat(100,1fr); 368 | grid-template-rows: repeat(100,1fr); 369 | opacity: 0; 370 | pointer-events: none; 371 | } 372 | 373 | .grid--open { 374 | opacity: 1; 375 | pointer-events: auto; 376 | } 377 | 378 | .grid__item { 379 | position: relative; 380 | display: grid; 381 | grid-template-areas: 'grid-img' 'grid-title'; 382 | grid-template-rows: 100% auto; 383 | grid-column: var(--c) / span var(--cs); 384 | grid-row: var(--r) / span var(--rs); 385 | will-change: opacity, transform; 386 | } 387 | 388 | .grid__item--title { 389 | grid-column: 5 / span 25; 390 | grid-row: 5 / span 14; 391 | margin: 0; 392 | position: relative; 393 | z-index: 100; 394 | justify-content: center; 395 | display: flex; 396 | flex-direction: column; 397 | font-family: ivymode, sans-serif; 398 | font-weight: 200; 399 | text-transform: uppercase; 400 | font-size: clamp(1.5rem,3vw,3.5rem); 401 | line-height: 1; 402 | } 403 | 404 | .grid__item--title span { 405 | will-change: transform, opacity; 406 | } 407 | 408 | .grid__item--title span:last-child { 409 | margin-left: 2rem; 410 | } 411 | 412 | .grid__item--back { 413 | z-index: 100; 414 | grid-column: 5 / span 6; 415 | grid-row: 20 / span 10; 416 | } 417 | 418 | .button-back { 419 | cursor: pointer; 420 | display: flex; 421 | padding: 0.5rem 0; 422 | align-self: start; 423 | } 424 | 425 | .button-back svg { 426 | pointer-events: none; 427 | stroke: #000; 428 | stroke-width: 1px; 429 | transition: stroke 0.3s; 430 | } 431 | 432 | .button-back:hover svg { 433 | stroke: #989898; 434 | } 435 | 436 | .grid__item .content__item-img, 437 | .grid__item-img { 438 | width: 100%; 439 | height: 100%; 440 | background-size: cover; 441 | background-position: 50% 50%; 442 | } 443 | 444 | .grid__item-title { 445 | font-size: 0.9rem; 446 | position: absolute; 447 | top: 100%; 448 | left: 0; 449 | margin: 0.5rem 0 0 0; 450 | white-space: nowrap; 451 | font-weight: 300; 452 | line-height: 1; 453 | visibility: hidden; 454 | } 455 | 456 | .grid__item-title--above { 457 | top: auto; 458 | bottom: 100%; 459 | margin: 0 0 0.5rem 0; 460 | } 461 | 462 | .grid__item-title span::before { 463 | counter-increment: grid-counter; 464 | content: counter(grid-counter, decimal-leading-zero) "\00a0 \2014 \00a0" ; 465 | } 466 | 467 | @media screen and (min-width: 53em) { 468 | .frame { 469 | text-align: left; 470 | padding: 2.5rem; 471 | } 472 | .grid { 473 | height: 100%; 474 | top: 0; 475 | } 476 | .grid__item-title { 477 | visibility: visible; 478 | } 479 | .content__item { 480 | padding: 0; 481 | } 482 | .content__item-img { 483 | height: 80vh; 484 | width: 60vw; 485 | max-width: 600px; 486 | } 487 | .content__item-title { 488 | justify-content: space-between; 489 | } 490 | .content__item-title span:first-child { 491 | margin: -3vw 0 0 -10vw; 492 | } 493 | 494 | .content__item-title span:last-child { 495 | margin: 0 -10vw -3vw 0; 496 | } 497 | } 498 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/10.jpg -------------------------------------------------------------------------------- /src/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/11.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/4.jpg -------------------------------------------------------------------------------- /src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/5.jpg -------------------------------------------------------------------------------- /src/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/6.jpg -------------------------------------------------------------------------------- /src/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/7.jpg -------------------------------------------------------------------------------- /src/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/8.jpg -------------------------------------------------------------------------------- /src/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ImageToGridTransition/8717fcf6322b9f6341655cbf08533e6ba3e44f01/src/img/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image To Grid Transition | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Image To Grid Transition

21 | 22 | Back to the article 23 | 24 | 25 | 26 | 27 |
28 | Previous demo 29 |
30 | 31 |
32 |
33 |
34 |
35 |

36 | Siobhan 37 | O'dwaya 38 |

39 | 45 |
46 |
47 |
48 |

49 | Siobhan 50 | O'dwaya 51 |

52 |
53 |
54 |
55 |

Carrutha Method

56 |
57 |
58 |
59 |

Maria Coluga

60 |
61 |
62 |
63 |

Gabeta Quest

64 |
65 |
66 |
67 |

Lithera Britta

68 |
69 |
70 |

Franka Oumata

71 |
72 |
73 |
74 |

Manata Poly

75 |
76 |
77 |
78 |

Ghata Manabra

79 |
80 |
81 |
82 |

Tamara Shubaya

83 |
84 |
85 |
86 |

Linda Christa

87 |
88 |
89 |
90 |

Daniela Walters

91 |
92 |
93 |
94 |

Maria Del Mar

95 |
96 |
97 |
98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages, map } from './utils'; 2 | import { gsap } from 'gsap'; 3 | import { Flip } from 'gsap/Flip'; 4 | gsap.registerPlugin(Flip); 5 | 6 | let winsize = {width: window.innerWidth, height: window.innerHeight}; 7 | window.addEventListener('resize', () => winsize = {width: window.innerWidth, height: window.innerHeight}); 8 | 9 | const DOM = { 10 | // the grid 11 | grid: document.querySelector('.grid'), 12 | // enter button 13 | enterCtrl: document.querySelector('.content__enter'), 14 | // back button 15 | backCtrl: document.querySelector('.button-back'), 16 | 17 | // initial image element that we want to move into the final grid 18 | contentItem: document.querySelector('.content__item-img'), 19 | // where to insert the initial image element when the grid is open 20 | gridItemTarget: document.querySelector('.grid__item--target'), 21 | // and when it's closed 22 | gridItemOriginalTarget: document.querySelector('.content__item'), 23 | 24 | // initial title element spans 25 | contentTitleTexts: document.querySelectorAll('.content__item-title > span'), 26 | // grid title element spans 27 | gridTitleTexts: document.querySelectorAll('.grid__item--title > span'), 28 | 29 | // all grid items (except the .grid__item--target, .grid__item--back and grid__item--title) 30 | gridItems: document.querySelectorAll('.grid > .grid__item:not(.grid__item--target):not(.grid__item--title):not(.grid__item--back)'), 31 | }; 32 | 33 | const animationSettings = { 34 | duration: 1, 35 | ease: 'expo.inOut' 36 | }; 37 | 38 | const body = document.body; 39 | // original bg color 40 | const bgcolor = getComputedStyle(body).getPropertyValue('--color-bg'); 41 | 42 | let isAnimating = false; 43 | 44 | // Calculates the position of an element when the element is [distanceDifference]px more far from the center of the page than it was previously 45 | const getInitialPosition = (element, distanceDifference = 400) => { 46 | const elCenter = {x: element.offsetLeft + element.offsetWidth/2, y: element.offsetTop + element.offsetHeight/2}; 47 | const angle = Math.atan2(Math.abs(winsize.height/2 - elCenter.y), Math.abs(winsize.width/2 - elCenter.x)); 48 | 49 | let x = Math.abs(Math.cos(angle) * distanceDifference); 50 | let y = Math.abs(Math.sin(angle) * distanceDifference); 51 | 52 | return { 53 | x: elCenter.x < winsize.width/2 ? x*-1 : x, 54 | y: elCenter.y < winsize.height/2 ? y*-1 : y 55 | }; 56 | }; 57 | 58 | // Distance from the element's center point to the center of the page 59 | const getDistance = element => { 60 | const elCenter = {x: element.offsetLeft + element.offsetWidth/2, y: element.offsetTop + element.offsetHeight/2}; 61 | return Math.hypot(elCenter.x - winsize.width/2, elCenter.y - winsize.height/2); 62 | } 63 | 64 | // opens up the grid 65 | const showGrid = () => { 66 | 67 | if ( isAnimating ) return; 68 | isAnimating = true; 69 | 70 | const tl = gsap.timeline({ 71 | onComplete: () => { 72 | isAnimating = false; 73 | } 74 | }) 75 | .addLabel('start', 0) 76 | // hide enter button 77 | .to(DOM.enterCtrl, { 78 | duration: animationSettings.duration, 79 | ease: animationSettings.ease, 80 | opacity: 0, 81 | onComplete: () => gsap.set(DOM.enterCtrl, {pointerEvents: 'none'}) 82 | }, 'start') 83 | // use the gsap Flip plugin to animate the main image to the grid 84 | .add(() => { 85 | 86 | DOM.grid.classList.add('grid--open'); 87 | 88 | const imageState = Flip.getState(DOM.contentItem); 89 | DOM.gridItemTarget.appendChild(DOM.contentItem); 90 | Flip.from(imageState, { 91 | duration: animationSettings.duration, 92 | ease: animationSettings.ease, 93 | }); 94 | 95 | }, 'start'); 96 | 97 | for (let item of DOM.gridItems) { 98 | const {x,y} = getInitialPosition(item); 99 | const delay = map(getDistance(item), 0, 1000, 0, 0.4); 100 | 101 | tl 102 | // animate in the grid item's labels 103 | .to(item.querySelector('.oh__inner'), { 104 | duration: animationSettings.duration*1.7, 105 | ease: animationSettings.ease, 106 | startAt: {yPercent: 101}, 107 | yPercent: 0, 108 | delay: delay, 109 | }, 'start') 110 | // Set the original positions of the grid items and animate them in 111 | // The position will be relative to the center of the page and outwards 112 | .set(item, { 113 | x: x, 114 | y: y, 115 | opacity: 0 116 | }, 'start') 117 | .to(item, { 118 | duration: animationSettings.duration, 119 | ease: 'expo', 120 | x: 0, 121 | y: 0, 122 | delay: delay, 123 | opacity: 1 124 | }, 'start+=0.4') 125 | } 126 | 127 | tl 128 | // Animate in the main image label 129 | .to(DOM.gridItemTarget.querySelector('.oh__inner'), { 130 | duration: animationSettings.duration*1.7, 131 | ease: animationSettings.ease, 132 | startAt: {yPercent: 101}, 133 | yPercent: 0 134 | }, 'start') 135 | // Animate out the big title spans and animate in the small title spans 136 | .to(DOM.contentTitleTexts, { 137 | duration: animationSettings.duration, 138 | ease: animationSettings.ease, 139 | yPercent: pos => pos%2 ? 100 : -100, 140 | opacity: 0 141 | }, 'start') 142 | .to(DOM.gridTitleTexts, { 143 | duration: animationSettings.duration, 144 | ease: animationSettings.ease, 145 | startAt: { 146 | xPercent: pos => pos%2 ? 50 : -50, 147 | opacity: 0 148 | }, 149 | xPercent: 0, 150 | opacity: 1 151 | }, 'start') 152 | // Animate the back button 153 | .to(DOM.backCtrl, { 154 | duration: animationSettings.duration, 155 | ease: animationSettings.ease, 156 | startAt: { 157 | xPercent: 40, 158 | opacity: 0 159 | }, 160 | xPercent: 0, 161 | opacity: 1 162 | }, 'start') 163 | // Animate the color of the page 164 | .to(body, { 165 | duration: animationSettings.duration, 166 | ease: animationSettings.ease, 167 | backgroundColor: '#CDD1CD' 168 | }, 'start'); 169 | 170 | }; 171 | 172 | const hideGrid = () => { 173 | 174 | if ( isAnimating ) return; 175 | isAnimating = true; 176 | 177 | const tl = gsap.timeline({ 178 | onComplete: () => { 179 | DOM.grid.classList.remove('grid--open'); 180 | isAnimating = false; 181 | } 182 | }) 183 | .addLabel('start', 0) 184 | .to(body, { 185 | duration: animationSettings.duration, 186 | ease: animationSettings.ease, 187 | backgroundColor: bgcolor 188 | }, 'start') 189 | .to(DOM.gridItemTarget.querySelector('.oh__inner'), { 190 | duration: animationSettings.duration, 191 | ease: animationSettings.ease, 192 | yPercent: 101 193 | }, 'start'); 194 | 195 | for (let item of DOM.gridItems) { 196 | const {x,y} = getInitialPosition(item); 197 | const delay = map(getDistance(item), 0, 1000, 0.4, 0); 198 | 199 | tl 200 | .to(item, { 201 | duration: animationSettings.duration, 202 | ease: animationSettings.ease, 203 | x: x, 204 | y: y, 205 | opacity: 0, 206 | delay: delay 207 | }, 'start') 208 | .to(item.querySelector('.oh__inner'), { 209 | duration: animationSettings.duration*.5, 210 | ease: animationSettings.ease, 211 | yPercent: 101, 212 | delay: delay, 213 | }, 'start') 214 | } 215 | 216 | tl 217 | .to(DOM.gridTitleTexts, { 218 | duration: animationSettings.duration, 219 | ease: animationSettings.ease, 220 | xPercent: pos => pos%2 ? 50 : -50, 221 | opacity: 0 222 | }, 'start') 223 | .to(DOM.backCtrl, { 224 | duration: animationSettings.duration, 225 | ease: animationSettings.ease, 226 | xPercent: 20, 227 | opacity: 0 228 | }, 'start') 229 | .to(DOM.contentTitleTexts, { 230 | duration: animationSettings.duration, 231 | ease: animationSettings.ease, 232 | yPercent: 0, 233 | opacity: 1 234 | }, 'start+=0.4') 235 | .to(DOM.enterCtrl, { 236 | duration: animationSettings.duration, 237 | ease: animationSettings.ease, 238 | opacity: 1, 239 | onComplete: () => gsap.set(DOM.enterCtrl, {pointerEvents: 'auto'}) 240 | }, 'start+=0.4') 241 | .add(() => { 242 | 243 | const imageState = Flip.getState(DOM.contentItem); 244 | DOM.gridItemOriginalTarget.appendChild(DOM.contentItem); 245 | Flip.from(imageState, { 246 | duration: animationSettings.duration, 247 | ease: animationSettings.ease, 248 | }); 249 | 250 | }, 'start+=0.4'); 251 | 252 | }; 253 | 254 | DOM.enterCtrl.addEventListener('click', () => showGrid()); 255 | DOM.backCtrl.addEventListener('click', () => hideGrid()); 256 | 257 | // Preload images 258 | preloadImages('.grid__item-img').then( _ => document.body.classList.remove('loading')); 259 | 260 | 261 | 262 | -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | /** 4 | * Map number x from range [a, b] to [c, d] 5 | * @param {Number} x - changing value 6 | * @param {Number} a 7 | * @param {Number} b 8 | * @param {Number} c 9 | * @param {Number} d 10 | */ 11 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c; 12 | 13 | /** 14 | * Preload images 15 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img' 16 | */ 17 | const preloadImages = (selector = 'img') => { 18 | return new Promise((resolve) => { 19 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 20 | }); 21 | }; 22 | 23 | export { 24 | map, 25 | preloadImages 26 | }; --------------------------------------------------------------------------------