├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.1770e3b3.jpg ├── 1_big.ccf3fd9b.jpg ├── 2.07ca36b5.jpg ├── 2_big.4fe4ef1f.jpg ├── 3.f6f48295.jpg ├── 3_big.45f3d516.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 ├── 1_big.jpg ├── 2.jpg ├── 2_big.jpg ├── 3.jpg └── 3_big.jpg ├── index.html └── js ├── index.js ├── item.js ├── preview.js ├── textLinesReveal.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cover Page Transition 2 | 3 | A cover page transition based on Vitalii Burhonskyi's [Dribbble shot](https://dribbble.com/shots/16788118-Design-Conference-Promo-Animation). 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/07/CoverTransition.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=64083) 8 | 9 | [Demo](https://tympanus.net/Tutorials/CoverPageTransition/) 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/CoverPageTransition/28b793b46454d4af382803d082e7e7009574248d/dist/1.1770e3b3.jpg -------------------------------------------------------------------------------- /dist/1_big.ccf3fd9b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CoverPageTransition/28b793b46454d4af382803d082e7e7009574248d/dist/1_big.ccf3fd9b.jpg -------------------------------------------------------------------------------- /dist/2.07ca36b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CoverPageTransition/28b793b46454d4af382803d082e7e7009574248d/dist/2.07ca36b5.jpg -------------------------------------------------------------------------------- /dist/2_big.4fe4ef1f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CoverPageTransition/28b793b46454d4af382803d082e7e7009574248d/dist/2_big.4fe4ef1f.jpg -------------------------------------------------------------------------------- /dist/3.f6f48295.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CoverPageTransition/28b793b46454d4af382803d082e7e7009574248d/dist/3.f6f48295.jpg -------------------------------------------------------------------------------- /dist/3_big.45f3d516.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CoverPageTransition/28b793b46454d4af382803d082e7e7009574248d/dist/3_big.45f3d516.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CoverPageTransition/28b793b46454d4af382803d082e7e7009574248d/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={},r=t.parcelRequire8ae9;function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 2 | /*! 3 | * GSAP 3.10.4 4 | * https://greensock.com 5 | * 6 | * @license Copyright 2008-2022, GreenSock. All rights reserved. 7 | * Subject to the terms at https://greensock.com/standard-license or for 8 | * Club GreenSock members, the agreement issued with that membership. 9 | * @author: Jack Doyle, jack@greensock.com 10 | */null==r&&((r=function(t){if(t in e)return e[t].exports;if(t in i){var r=i[t];delete i[t];var n={id:t,exports:{}};return e[t]=n,r.call(n.exports,n,n.exports),n.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){i[t]=e},t.parcelRequire8ae9=r),r.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(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},r=i[t]=i[t]||[];return r.includes(e)||r.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let r=i.indexOf(e);return-1!=r&&i.splice(r,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let r=this._onceEvents&&this._onceEvents[t];for(let n of i){r&&r[n]&&(this.off(t,n),delete r[n]),n.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t}))}));var o,a,u,h,l,c,f,p,d,_,m,g,v,y,w,b,T,x,O,M,D,k,E,C,S,A,P,I,L={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},R={duration:.5,overwrite:!1,delay:0},z=1e8,F=1e-8,B=2*Math.PI,q=B/4,N=0,j=Math.sqrt,W=Math.cos,$=Math.sin,Y=function(t){return"string"==typeof t},U=function(t){return"function"==typeof t},X=function(t){return"number"==typeof t},V=function(t){return void 0===t},H=function(t){return"object"==typeof t},Q=function(t){return!1!==t},G=function(){return"undefined"!=typeof window},Z=function(t){return U(t)||Y(t)},J="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,rt=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,nt=/[+-]=-?[.\d]+/,st=/[^,'"\[\]\s]+/gi,ot=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,at={},ut={},ht=function(t){return(ut=Rt(t,at))&&Oi},lt=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},ct=function(t,e){return!e&&console.warn(t)},ft=function(t,e){return t&&(at[t]=e)&&ut&&(ut[t]=e)||at},pt=function(){return 0},dt={},_t=[],mt={},gt={},vt={},yt=30,wt=[],bt="",Tt=function(t){var e,i,r=t[0];if(H(r)||U(r)||(t=[t]),!(e=(r._gsap||{}).harness)){for(i=wt.length;i--&&!wt[i].targetTest(r););e=wt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new Ve(t[i],e)))||t.splice(i,1);return t},xt=function(t){return t._gsap||Tt(fe(t))[0]._gsap},Ot=function(t,e,i){return(i=t[e])&&U(i)?t[e]():V(i)&&t.getAttribute&&t.getAttribute(e)||i},Mt=function(t,e){return(t=t.split(",")).forEach(e)||t},Dt=function(t){return Math.round(1e5*t)/1e5||0},kt=function(t){return Math.round(1e7*t)/1e7||0},Et=function(t,e){var i=e.charAt(0),r=parseFloat(e.substr(2));return t=parseFloat(t),"+"===i?t+r:"-"===i?t-r:"*"===i?t*r:t/r},Ct=function(t,e){for(var i=e.length,r=0;t.indexOf(e[r])<0&&++rs;)o=o._prev;return o?(e._next=o._next,o._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[r]=e,e._prev=o,e.parent=e._dp=t,e},Nt=function(t,e,i,r){void 0===i&&(i="_first"),void 0===r&&(r="_last");var n=e._prev,s=e._next;n?n._next=s:t[i]===e&&(t[i]=s),s?s._prev=n:t[r]===e&&(t[r]=n),e._next=e._prev=e.parent=null},jt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},Wt=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},$t=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Yt=function t(e){return!e||e._ts&&t(e.parent)},Ut=function(t){return t._repeat?Xt(t._tTime,t=t.duration()+t._rDelay)*t:0},Xt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Vt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Ht=function(t){return t._end=kt(t._start+(t._tDur/Math.abs(t._ts||t._rts||F)||0))},Qt=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=kt(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ht(t),i._dirty||Wt(i,t)),t},Gt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Vt(t.rawTime(),e),(!e._dur||ue(0,e.totalDuration(),i)-e._tTime>F)&&e.render(i,!0)),Wt(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}},Zt=function(t,e,i,r){return e.parent&&jt(e),e._start=kt((X(i)?i:i||t!==a?se(t,i,e):t._time)+e._delay),e._end=kt(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),qt(t,e,"_first","_last",t._sort?"_start":0),ee(e)||(t._recent=e),r||Gt(t,e),t},Jt=function(t,e){return(at.ScrollTrigger||lt("scrollTrigger",e))&&at.ScrollTrigger.create(e,t)},Kt=function(t,e,i,r){return ei(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==Le.frame?(_t.push(t),t._lazy=[e,r],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,r){var n=t._repeat,s=kt(e)||0,o=t._tTime/t._tDur;return o&&!r&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:kt(s*(n+1)+t._rDelay*n):s,o>0&&!r?Qt(t,t._tTime=t._tDur*o):t.parent&&Ht(t),i||Wt(t.parent,t),t},re=function(t){return t instanceof Qe?Wt(t):ie(t,t._dur)},ne={_start:0,endTime:pt,totalDuration:pt},se=function t(e,i,r){var n,s,o,a=e.labels,u=e._recent||ne,h=e.duration()>=z?u.endTime(!1):e._dur;return Y(i)&&(isNaN(i)||i in a)?(s=i.charAt(0),o="%"===i.substr(-1),n=i.indexOf("="),"<"===s||">"===s?(n>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(o?(n<0?u:r).totalDuration()/100:1)):n<0?(i in a||(a[i]=h),a[i]):(s=parseFloat(i.charAt(n-1)+i.substr(n+1)),o&&r&&(s=s/100*(K(r)?r[0]:r).totalDuration()),n>1?t(e,i.substr(0,n-1),r)+s:h+s)):null==i?h:+i},oe=function(t,e,i){var r,n,s=X(e[1]),o=(s?2:1)+(t<2?0:1),a=e[o];if(s&&(a.duration=e[1]),a.parent=i,t){for(r=a,n=i;n&&!("immediateRender"in r);)r=n.vars.defaults||{},n=Q(n.vars.inherit)&&n.parent;a.immediateRender=Q(r.immediateRender),t<2?a.runBackwards=1:a.startAt=e[o-1]}return new oi(e[0],a,e[o+1])},ae=function(t,e){return t||0===t?e(t):e},ue=function(t,e,i){return ie?e:i},he=function(t,e){return Y(t)&&(e=ot.exec(t))?e[1]:""},le=[].slice,ce=function(t,e){return t&&H(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&H(t[0]))&&!t.nodeType&&t!==u},fe=function(t,e,i){return!Y(t)||i||!h&&Re()?K(t)?function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var r;return Y(t)&&!e||ce(t,1)?(r=i).push.apply(r,fe(t)):i.push(t)}))||i}(t,i):ce(t)?le.call(t,0):t?[t]:[]:le.call((e||l).querySelectorAll(t),0)},pe=function(t){return t.sort((function(){return.5-Math.random()}))},de=function(t){if(U(t))return t;var e=H(t)?t:{each:t},i=We(e.ease),r=e.from||0,n=parseFloat(e.base)||0,s={},o=r>0&&r<1,a=isNaN(r)||o,u=e.axis,h=r,l=r;return Y(r)?h=l={center:.5,edges:.5,end:1}[r]||0:!o&&a&&(h=r[0],l=r[1]),function(t,o,c){var f,p,d,_,m,g,v,y,w,b=(c||e).length,T=s[b];if(!T){if(!(w="auto"===e.grid?0:(e.grid||[1,z])[1])){for(v=-1e8;v<(v=c[w++].getBoundingClientRect().left)&&wv&&(v=m),mb?b-1:u?"y"===u?b/w:w:Math.max(w,b/w))||0)*("edges"===r?-1:1),T.b=b<0?n-b:n,T.u=he(e.amount||e.each)||0,i=i&&b<0?Ne(i):i}return b=(T[t]-T.min)/T.max||0,kt(T.b+(i?i(b):b)*T.v)+T.u}},_e=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(i){var r=Math.round(parseFloat(i)/t)*t*e;return(r-r%1)/e+(X(i)?0:he(i))}},me=function(t,e){var i,r,n=K(t);return!n&&H(t)&&(i=n=t.radius||z,t.values?(t=fe(t.values),(r=!X(t[0]))&&(i*=i)):t=_e(t.increment)),ae(e,n?U(t)?function(e){return r=t(e),Math.abs(r-e)<=i?r:e}:function(e){for(var n,s,o=parseFloat(r?e.x:e),a=parseFloat(r?e.y:0),u=z,h=0,l=t.length;l--;)(n=r?(n=t[l].x-o)*n+(s=t[l].y-a)*s:Math.abs(t[l]-o))(n=Math.abs(n))&&(s=r,a=n);return s},Te=function(t,e,i){var r,n,s=t.vars,o=s[e];if(o)return r=s[e+"Params"],n=s.callbackScope||t,i&&_t.length&&St(),r?o.apply(n,r):o.call(n)},xe=function(t){return jt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Te(t,"onInterrupt"),t},Oe=function(t){var e=(t=!t.name&&t.default||t).name,i=U(t),r=e&&!i&&t.init?function(){this._props=[]}:t,n={init:pt,render:_i,add:Ke,kill:gi,modifier:mi,rawVars:0},s={targetTest:0,get:0,getSetter:ci,aliases:{},register:0};if(Re(),t!==r){if(gt[e])return;Lt(r,Lt(Ft(t,n),s)),Rt(r.prototype,Rt(n,Ft(t,s))),gt[r.prop=e]=r,t.targetTest&&(wt.push(r),dt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}ft(e,r),t.register&&t.register(Oi,r,wi)},Me=255,De={aqua:[0,Me,Me],lime:[0,Me,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Me],navy:[0,0,128],white:[Me,Me,Me],olive:[128,128,0],yellow:[Me,Me,0],orange:[Me,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Me,0,0],pink:[Me,192,203],cyan:[0,Me,Me],transparent:[Me,Me,Me,0]},ke=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)*Me+.5|0},Ee=function(t,e,i){var r,n,s,o,a,u,h,l,c,f,p=t?X(t)?[t>>16,t>>8&Me,t&Me]:0:De.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),De[t])p=De[t];else if("#"===t.charAt(0)){if(t.length<6&&(r=t.charAt(1),n=t.charAt(2),s=t.charAt(3),t="#"+r+r+n+n+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&Me,p&Me,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Me,t&Me]}else if("hsl"===t.substr(0,3))if(p=f=t.match(tt),e){if(~t.indexOf("="))return p=t.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,a=+p[1]/100,r=2*(u=+p[2]/100)-(n=u<=.5?u*(a+1):u+a-u*a),p.length>3&&(p[3]*=1),p[0]=ke(o+1/3,r,n),p[1]=ke(o,r,n),p[2]=ke(o-1/3,r,n);else p=t.match(tt)||De.transparent;p=p.map(Number)}return e&&!f&&(r=p[0]/Me,n=p[1]/Me,s=p[2]/Me,u=((h=Math.max(r,n,s))+(l=Math.min(r,n,s)))/2,h===l?o=a=0:(c=h-l,a=u>.5?c/(2-h-l):c/(h+l),o=h===r?(n-s)/c+(nT&&(O+=o-x),((i=(n=(M+=o)-O)-k)>0||a)&&(s=++v.frame,y=n-1e3*v.time,v.time=n/=1e3,k+=i+(i>=D?4:D-i),r=1),a||(_=m(t)),r)for(w=0;w=e&&w--},_listeners:E=[]}),Re=function(){return!d&&Le.wake()},ze={},Fe=/^[\d.\-M][\d.\-,\s]/,Be=/["']/g,qe=function(t){for(var e,i,r,n={},s=t.substr(1,t.length-3).split(":"),o=s[0],a=1,u=s.length;a1&&o.config?o.config.apply(null,~t.indexOf("{")?[qe(s[1])]:(e=t,i=e.indexOf("(")+1,r=e.indexOf(")"),n=e.indexOf("(",i),e.substring(i,~n&&n=1?i:1,s=(r||(e?.3:.45))/(i<1?i:1),o=s/B*(Math.asin(1/n)||0),a=function(t){return 1===t?1:n*Math.pow(2,-10*t)*$((t-o)*s)+1},u="out"===e?a:"in"===e?function(t){return 1-a(1-t)}:Ye(a);return s=B/s,u.config=function(i,r){return t(e,i,r)},u},Xe=function t(e,i){void 0===i&&(i=1.70158);var r=function(t){return t?--t*t*((i+1)*t+i)+1:0},n="out"===e?r:"in"===e?function(t){return 1-r(1-t)}:Ye(r);return n.config=function(i){return t(e,i)},n};Mt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;$e(t+",Power"+(i-1),e?function(t){return Math.pow(t,i)}:function(t){return t},(function(t){return 1-Math.pow(1-t,i)}),(function(t){return t<.5?Math.pow(2*t,i)/2:1-Math.pow(2*(1-t),i)/2}))})),ze.Linear.easeNone=ze.none=ze.Linear.easeIn,$e("Elastic",Ue("in"),Ue("out"),Ue()),S=7.5625,P=1/(A=2.75),$e("Bounce",(function(t){return 1-I(1-t)}),I=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,ie(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Re(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(Qt(this,t),!i._dp||i.parent||Gt(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)&&Zt(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===F||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),At(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+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?Xt(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?Vt(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),Ht(this),$t(this)},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Re(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==F&&(this._tTime-=F)))),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)&&Zt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(Q(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?Vt(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,re(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,re(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),Q(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,Q(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(r[t]=e,i&&(r[t+"Params"]=i),"onUpdate"===t&&(this._onUpdate=e)):delete r[t],this):r[t]},e.then=function(t){var e=this;return new Promise((function(i){var r=U(t)?t:It,n=function(){var t=e.then;e.then=null,U(r)&&(r=r(e))&&(r.then||r===e)&&(e.then=t),i(r),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?n():e._prom=n}))},e.kill=function(){xe(this)},t}();Lt(He.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Qe=function(t){function e(e,i){var r;return void 0===e&&(e={}),(r=t.call(this,e)||this).labels={},r.smoothChildTiming=!!e.smoothChildTiming,r.autoRemoveChildren=!!e.autoRemoveChildren,r._sort=Q(e.sortChildren),a&&Zt(e.parent||a,n(r),i),e.reversed&&r.reverse(),e.paused&&r.paused(!0),e.scrollTrigger&&Jt(n(r),e.scrollTrigger),r}s(e,t);var i=e.prototype;return i.to=function(t,e,i){return oe(0,arguments,this),this},i.from=function(t,e,i){return oe(1,arguments,this),this},i.fromTo=function(t,e,i,r){return oe(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,Bt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new oi(t,e,se(this,i),1),this},i.call=function(t,e,i){return Zt(this,oi.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,r,n,s,o){return i.duration=e,i.stagger=i.stagger||r,i.onComplete=s,i.onCompleteParams=o,i.parent=this,new oi(t,i,se(this,n)),this},i.staggerFrom=function(t,e,i,r,n,s,o){return i.runBackwards=1,Bt(i).immediateRender=Q(i.immediateRender),this.staggerTo(t,e,i,r,n,s,o)},i.staggerFromTo=function(t,e,i,r,n,s,o,a){return r.startAt=i,Bt(r).immediateRender=Q(r.immediateRender),this.staggerTo(t,e,r,n,s,o,a)},i.render=function(t,e,i){var r,n,s,o,u,h,l,c,f,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:kt(t),w=this._zTime<0!=t<0&&(this._initted||!v);if(this!==a&&y>g&&t>=0&&(y=g),y!==this._tTime||i||w){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),r=y,f=this._start,h=!(c=this._ts),w&&(v||(m=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(d=this._yoyo,u=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*u+t,e,i);if(r=kt(y%u),y===g?(o=this._repeat,r=v):((o=~~(y/u))&&o===y/u&&(r=v,o--),r>v&&(r=v)),p=Xt(this._tTime,u),!m&&this._tTime&&p!==o&&(p=o),d&&1&o&&(r=v-r,_=1),o!==p&&!this._lock){var b=d&&1&p,T=b===(d&&1&o);if(oe)for(r=t._first;r&&r._start<=i;){if("isPause"===r.data&&r._start>e)return r;r=r._next}else for(r=t._last;r&&r._start>=i;){if("isPause"===r.data&&r._start=m&&t>=0)for(n=this._first;n;){if(s=n._next,(n._act||r>=n._start)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(r-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(r-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!h){l=0,s&&(y+=this._zTime=-1e-8);break}}n=s}else{n=this._last;for(var x=t<0?t:r;n;){if(s=n._prev,(n._act||x<=n._end)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(x-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(x-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!h){l=0,s&&(y+=this._zTime=x?-1e-8:F);break}}n=s}}if(l&&!e&&(this.pause(),l.render(r>=m?0:-1e-8)._zTime=r>=m?1:-1,this._ts))return this._start=f,Ht(this),this.render(t,e,i);this._onUpdate&&!e&&Te(this,"onUpdate",!0),(y===g&&this._tTime>=this.totalDuration()||!y&&m)&&(f!==this._start&&Math.abs(c)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&jt(this,1),e||t<0&&!m||!y&&!m&&g||(Te(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(X(e)||(e=se(this,e,t)),!(t instanceof He)){if(K(t))return t.forEach((function(t){return i.add(t,e)})),this;if(Y(t))return this.addLabel(t,e);if(!U(t))return this;t=oi.delayedCall(0,t)}return this!==t?Zt(this,t,e):this},i.getChildren=function(t,e,i,r){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===r&&(r=-1e8);for(var n=[],s=this._first;s;)s._start>=r&&(s instanceof oi?e&&n.push(s):(i&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,i)))),s=s._next;return n},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return Y(t)?this.removeLabel(t):U(t)?this.killTweensOf(t):(Nt(this,t),t===this._recent&&(this._recent=this._last),Wt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=kt(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 r=oi.delayedCall(0,e||pt,i);return r.data="isPause",this._hasPause=1,Zt(this,r,se(this,t))},i.removePause=function(t){var e=this._first;for(t=se(this,t);e;)e._start===t&&"isPause"===e.data&&jt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var r=this.getTweensOf(t,i),n=r.length;n--;)Ge!==r[n]&&r[n].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,r=[],n=fe(t),s=this._first,o=X(e);s;)s instanceof oi?Ct(s._targets,n)&&(o?(!Ge||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&r.push(s):(i=s.getTweensOf(n,e)).length&&r.push.apply(r,i),s=s._next;return r},i.tweenTo=function(t,e){e=e||{};var i,r=this,n=se(r,t),s=e,o=s.startAt,a=s.onStart,u=s.onStartParams,h=s.immediateRender,l=oi.to(r,Lt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(o&&"time"in o?o.time:r._time))/r.timeScale())||F,onStart:function(){if(r.pause(),!i){var t=e.duration||Math.abs((n-(o&&"time"in o?o.time:r._time))/r.timeScale());l._dur!==t&&ie(l,t,0,1).render(l._time,!0,!0),i=1}a&&a.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),be(this,se(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),be(this,se(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+F)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var r,n=this._first,s=this.labels;n;)n._start>=i&&(n._start+=t,n._end+=t),n=n._next;if(e)for(r in s)s[r]>=i&&(s[r]+=t);return Wt(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={}),Wt(this)},i.totalDuration=function(t){var e,i,r,n=0,s=this,o=s._last,u=z;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(r=s.parent;o;)e=o._prev,o._dirty&&o.totalDuration(),(i=o._start)>u&&s._sort&&o._ts&&!s._lock?(s._lock=1,Zt(s,o,i-o._delay,1)._lock=0):u=i,i<0&&o._ts&&(n-=i,(!r&&!s._dp||r&&r.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),u=0),o._end>n&&o._ts&&(n=o._end),o=e;ie(s,s===a&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(a._ts&&(At(a,Vt(t,a)),f=Le.frame),Le.frame>=yt){yt+=L.autoSleep||120;var e=a._first;if((!e||!e._ts)&&L.autoSleep&&Le._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Le.sleep()}}},e}(He);Lt(Qe.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ge,Ze,Je=function(t,e,i,r,n,s,o){var a,u,h,l,c,f,p,d,_=new wi(this._pt,t,e,0,1,di,null,n),m=0,g=0;for(_.b=i,_.e=r,i+="",(p=~(r+="").indexOf("random("))&&(r=ye(r)),s&&(s(d=[i,r],t,e),i=d[0],r=d[1]),u=i.match(rt)||[];a=rt.exec(r);)l=a[0],c=r.substring(m,a.index),h?h=(h+1)%5:"rgba("===c.substr(-5)&&(h=1),l!==u[g++]&&(f=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:c||1===g?c:",",s:f,c:"="===l.charAt(1)?Et(f,l)-f:parseFloat(l)-f,m:h&&h<4?Math.round:0},m=rt.lastIndex);return _.c=m0&&!C&&(e._startAt=0),S&&i<=0)return void(i&&(e._zTime=i))}else!1===C&&(e._startAt=0);else if(D&&S)if(A)!C&&(e._startAt=0);else if(i&&(b=!1),s=Lt({overwrite:!1,data:"isFromStart",lazy:b&&Q(T),immediateRender:b,stagger:0,parent:I},r),m&&(s[f.prop]=m),jt(e._startAt=oi.set(P,s)),i<0&&e._startAt.render(-1,!0),e._zTime=i,b){if(!i)return}else t(e._startAt,F);for(e._pt=e._ptCache=0,T=S&&Q(T)||T&&!S,n=0;n")}));else{for(p in c={},x)"ease"===p||"easeEach"===p||ii(p,x[p],c,x.easeEach);for(p in c)for(C=c[p].sort((function(t,e){return t.t-e.t})),P=0,l=0;lp-F&&t>=0?p:td&&(r=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,r=d-r),a=Xt(this._tTime,o),r===f&&!i&&this._initted)return this._tTime=_,this;s!==a&&(l&&this._yEase&&je(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(kt(o*s),!0).invalidate()._lock=0))}if(!this._initted){if(Kt(this,t<0?t:r,i,e))return this._tTime=0,this;if(f!==this._time)return this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=_,this._time=r,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(c||this._ease)(r/d),this._from&&(this.ratio=h=1-h),r&&!f&&!e&&(Te(this,"onStart"),this._tTime!==_))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:!r&&u?-1e-8:l._dur*l._ease(r/this._dur),e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),Te(this,"onUpdate")),this._repeat&&s!==a&&this.vars.onRepeat&&!e&&this.parent&&Te(this,"onRepeat"),_!==this._tDur&&_||this._tTime!==_||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(_===this._tDur&&this._ts>0||!_&&this._ts<0)&&jt(this,1),e||t<0&&!f||!_&&!f||(Te(this,_===p?"onComplete":"onReverseComplete",!0),this._prom&&!(_0)&&this._prom()))}}else!function(t,e,i,r){var n,s,o,a=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=Xt(l,h),t._yoyo&&1&s&&(u=1-u),s!==Xt(t._tTime,h)&&(a=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==a||r||t._zTime===F||!e&&t._zTime){if(!t._initted&&Kt(t,e,r,i))return;for(o=t._zTime,t._zTime=e||(i?F:0),i||(i=e&&!o),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&Te(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&Te(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&jt(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,r){d||Le.wake(),this._ts||this.play();var n=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||ei(this,n),function(t,e,i,r,n,s,o){var a,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((a=u[h][e])&&a.d&&a.d._pt)for(a=a.d._pt;a&&a.p!==e;)a=a._next;if(!a)return Ze=1,t.vars[e]="+=0",ei(t,o),Ze=0,1;l.push(a)}for(h=l.length;h--;)(a=l[h]).s=!r&&0!==r||n?a.s+(r||0)+s*a.c:r,a.c=i-a.s,a.e&&(a.e=Dt(i)+he(a.e)),a.b&&(a.b=a.s+he(a.b))}(this,t,e,i,r,this._ease(n/this._dur),n)?this.resetTo(t,e,i,r):(Qt(this,0),this.parent||qt(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?xe(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ge&&!0!==Ge.vars.overwrite)._first||xe(this),this.parent&&i!==this.timeline.totalDuration()&&ie(this,this._dur*this.timeline._tDur/i,0,1),this}var r,n,s,o,a,u,h,l=this._targets,c=t?fe(t):l,f=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,r=i===e.length;r&&i--&&t[i]===e[i];);return i<0}(l,c))return"all"===e&&(this._pt=0),xe(this);for(r=this._op=this._op||[],"all"!==e&&(Y(e)&&(a={},Mt(e,(function(t){return a[t]=1})),e=a),e=function(t,e){var i,r,n,s,o=t[0]?xt(t[0]).harness:0,a=o&&o.aliases;if(!a)return e;for(r in i=Rt({},e),a)if(r in i)for(n=(s=a[r].split(",")).length;n--;)i[s[n]]=i[r];return i}(l,e)),h=l.length;h--;)if(~c.indexOf(l[h]))for(a in n=f[h],"all"===e?(r[h]=e,o=n,s={}):(s=r[h]=r[h]||{},o=e),o)(u=n&&n[a])&&("kill"in u.d&&!0!==u.d.kill(a)||Nt(this,u,"_pt"),delete n[a]),"all"!==s&&(s[a]=1);return this._initted&&!this._pt&&p&&xe(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return oe(1,arguments)},e.delayedCall=function(t,i,r,n){return new e(i,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:i,onReverseComplete:i,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:n})},e.fromTo=function(t,e,i){return oe(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 a.killTweensOf(t,e,i)},e}(He);Lt(oi.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Mt("staggerTo,staggerFrom,staggerFromTo",(function(t){oi[t]=function(){var e=new Qe,i=le.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var ai=function(t,e,i){return t[e]=i},ui=function(t,e,i){return t[e](i)},hi=function(t,e,i,r){return t[e](r.fp,i)},li=function(t,e,i){return t.setAttribute(e,i)},ci=function(t,e){return U(t[e])?ui:V(t[e])&&t.setAttribute?li:ai},fi=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,r="";if(!t&&e.b)r=e.b;else if(1===t&&e.e)r=e.e;else{for(;i;)r=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+r,i=i._next;r+=e.c}e.set(e.t,e.p,r,e)},_i=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},mi=function(t,e,i,r){for(var n,s=this._pt;s;)n=s._next,s.p===r&&s.modifier(t,e,i),s=n},gi=function(t){for(var e,i,r=this._pt;r;)i=r._next,r.p===t&&!r.op||r.op===t?Nt(this,r,"_pt"):r.dep||(e=1),r=i;return!e},vi=function(t,e,i,r){r.mSet(t,e,r.m.call(r.tween,i,r.mt),r)},yi=function(t){for(var e,i,r,n,s=t._pt;s;){for(e=s._next,i=r;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:n)?s._prev._next=s:r=s,(s._next=i)?i._prev=s:n=s,s=e}t._pt=r},wi=function(){function t(t,e,i,r,n,s,o,a,u){this.t=e,this.s=r,this.c=n,this.p=i,this.r=s||fi,this.d=o||this,this.set=a||ai,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,i){this.mSet=this.mSet||this.set,this.set=vi,this.m=t,this.mt=i,this.tween=e},t}();Mt(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})),at.TweenMax=at.TweenLite=oi,at.TimelineLite=at.TimelineMax=Qe,a=new Qe({sortChildren:!1,defaults:R,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),L.stringFilter=Ie;var bi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var r=t.map((function(t){return Oi.quickSetter(t,e,i)})),n=r.length;return function(t){for(var e=n;e--;)r[e](t)}}t=t[0]||{};var s=gt[e],o=xt(t),a=o.harness&&(o.harness.aliases||{})[e]||e,u=s?function(e){var r=new s;p._pt=0,r.init(t,i?e+i:e,p,0,[t]),r.render(1,r),p._pt&&_i(1,p)}:o.set(t,a);return s?u:function(e){return u(t,a,i?e+i:e,o,1)}},quickTo:function(t,e,i){var r,n=Oi.to(t,Rt(((r={})[e]="+=0.1",r.paused=!0,r),i||{})),s=function(t,i,r){return n.resetTo(e,t,i,r)};return s.tween=n,s},isTweening:function(t){return a.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=We(t.ease,R.ease)),zt(R,t||{})},config:function(t){return zt(L,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,r=t.plugins,n=t.defaults,s=t.extendTimeline;(r||"").split(",").forEach((function(t){return t&&!gt[t]&&!at[t]&&ct(e+" effect requires "+t+" plugin.")})),vt[e]=function(t,e,r){return i(fe(t),Lt(e||{},n),r)},s&&(Qe.prototype[e]=function(t,i,r){return this.add(vt[e](t,H(i)?i:(r=i)&&{},this),r)})},registerEase:function(t,e){ze[t]=We(e)},parseEase:function(t,e){return arguments.length?We(t,e):ze},getById:function(t){return a.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,r,n=new Qe(t);for(n.smoothChildTiming=Q(t.smoothChildTiming),a.remove(n),n._dp=0,n._time=n._tTime=a._time,i=a._first;i;)r=i._next,!e&&!i._dur&&i instanceof oi&&i.vars.onComplete===i._targets[0]||Zt(n,i,i._start-i._delay),i=r;return Zt(a,n,0),n},utils:{wrap:function t(e,i,r){var n=i-e;return K(e)?ve(e,t(0,e.length),i):ae(r,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,i,r){var n=i-e,s=2*n;return K(e)?ve(e,t(0,e.length-1),i):ae(r,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:de,random:ge,snap:me,normalize:function(t,e,i){return we(t,e,0,1,i)},getUnit:he,clamp:function(t,e,i){return ae(i,(function(i){return ue(t,e,i)}))},splitColor:Ee,toArray:fe,selector:function(t){return t=fe(t)[0]||ct("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return fe(e,i.querySelectorAll?i:i===t?ct("Invalid scope")||l.createElement("div"):t)}},mapRange:we,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?ir[n]:"")+t},nr=function(){"undefined"!=typeof window&&window.document&&(Mi=window,Di=Mi.document,ki=Di.documentElement,Ci=tr("div")||{style:{}},tr("div"),Ji=rr(Ji),Ki=Ji+"Origin",Ci.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ai=!!rr("perspective"),Ei=1)},sr=function t(e){var i,r=tr("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,o=this.style.cssText;if(ki.appendChild(r),r.appendChild(this),this.style.display="block",e)try{i=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(i=this._gsapBBox());return n&&(s?n.insertBefore(this,s):n.appendChild(this)),ki.removeChild(r),this.style.cssText=o,i},or=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},ar=function(t){var e;try{e=t.getBBox()}catch(i){e=sr.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===sr||(e=sr.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+or(t,["x","cx","x1"])||0,y:+or(t,["y","cy","y1"])||0,width:0,height:0}},ur=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!ar(t))},hr=function(t,e){if(e){var i=t.style;e in Pi&&e!==Ki&&(e=Ji),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(zi,"-$1").toLowerCase())):i.removeAttribute(e)}},lr=function(t,e,i,r,n,s){var o=new wi(t._pt,e,i,0,1,s?Ui:Yi);return t._pt=o,o.b=r,o.e=n,t._props.push(i),o},cr={deg:1,rad:1,turn:1},fr=function t(e,i,r,n){var s,o,a,u,h=parseFloat(r)||0,l=(r+"").trim().substr((h+"").length)||"px",c=Ci.style,f=Fi.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),_=100,m="px"===n,g="%"===n;return n===l||!h||cr[n]||cr[l]?h:("px"!==l&&!m&&(h=t(e,i,r,"px")),u=e.getCTM&&ur(e),!g&&"%"!==l||!Pi[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=_+(m?l:n),o=~i.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(o=(e.ownerSVGElement||{}).parentNode),o&&o!==Di&&o.appendChild||(o=Di.body),(a=o._gsap)&&g&&a.width&&f&&a.time===Le.time?Dt(h/a.width*_):((g||"%"===l)&&(c.position=er(e,"position")),o===e&&(c.position="static"),o.appendChild(Ci),s=Ci[d],o.removeChild(Ci),c.position="absolute",f&&g&&((a=xt(o)).time=Le.time,a.width=o[d]),Dt(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],Dt(g?h/s*_:h/100*s)))},pr=function(t,e,i,r){var n;return Ei||nr(),e in qi&&"transform"!==e&&~(e=qi[e]).indexOf(",")&&(e=e.split(",")[0]),Pi[e]&&"transform"!==e?(n=Or(t,r),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Mr(er(t,Ki))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||r||~(n+"").indexOf("calc("))&&(n=gr[e]&&gr[e](t,e,i)||er(t,e)||Ot(t,e)||("opacity"===e?1:0)),i&&!~(n+"").trim().indexOf(" ")?fr(t,e,n,i)+i:n},dr=function(t,e,i,r){if(!i||"none"===i){var n=rr(e,t,1),s=n&&er(t,n,1);s&&s!==i?(e=n,i=s):"borderColor"===e&&(i=er(t,"borderTopColor"))}var o,a,u,h,l,c,f,p,d,_,m,g=new wi(this._pt,t.style,e,0,1,di),v=0,y=0;if(g.b=i,g.e=r,i+="","auto"===(r+="")&&(t.style[e]=r,r=er(t,e)||r,t.style[e]=i),Ie(o=[i,r]),r=o[1],u=(i=o[0]).match(it)||[],(r.match(it)||[]).length){for(;a=it.exec(r);)f=a[0],d=r.substring(v,a.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),f!==(c=u[y++]||"")&&(h=parseFloat(c)||0,m=c.substr((h+"").length),"="===f.charAt(1)&&(f=Et(h,f)+m),p=parseFloat(f),_=f.substr((p+"").length),v=it.lastIndex-_.length,_||(_=_||L.units[e]||m,v===r.length&&(r+=_,g.e+=_)),m!==_&&(h=fr(t,e,c,_)||0),g._pt={_next:g._pt,p:d||1===y?d:",",s:h,c:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});g.c=v-1;)i=a[n],Pi[i]&&(r=1,i="transformOrigin"===i?Ki:Ji),hr(s,i);r&&(hr(s,Ji),u&&(u.svg&&s.removeAttribute("transform"),Or(s,1),u.uncache=1))}},gr={clearProps:function(t,e,i,r,n){if("isFromStart"!==n.data){var s=t._pt=new wi(t._pt,e,i,0,0,mr);return s.u=r,s.pr=-10,s.tween=n,t._props.push(i),1}}},vr=[1,0,0,1,0,0],yr={},wr=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},br=function(t){var e=er(t,Ji);return wr(e)?vr:e.substr(7).match(et).map(Dt)},Tr=function(t,e){var i,r,n,s,o=t._gsap||xt(t),a=t.style,u=br(t);return o.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?vr:u:(u!==vr||t.offsetParent||t===ki||o.svg||(n=a.display,a.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,r=t.nextSibling,ki.appendChild(t)),u=br(t),n?a.display=n:hr(t,"display"),s&&(r?i.insertBefore(t,r):i?i.appendChild(t):ki.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},xr=function(t,e,i,r,n,s){var o,a,u,h=t._gsap,l=n||Tr(t,!0),c=h.xOrigin||0,f=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],w=l[5],b=e.split(" "),T=parseFloat(b[0])||0,x=parseFloat(b[1])||0;i?l!==vr&&(a=_*v-m*g)&&(u=T*(-m/a)+x*(_/a)-(_*w-m*y)/a,T=T*(v/a)+x*(-g/a)+(g*w-v*y)/a,x=u):(T=(o=ar(t)).x+(~b[0].indexOf("%")?T/100*o.width:T),x=o.y+(~(b[1]||b[0]).indexOf("%")?x/100*o.height:x)),r||!1!==r&&h.smooth?(y=T-c,w=x-f,h.xOffset=p+(y*_+w*g)-y,h.yOffset=d+(y*m+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=T,h.yOrigin=x,h.smooth=!!r,h.origin=e,h.originIsAbsolute=!!i,t.style[Ki]="0px 0px",s&&(lr(s,h,"xOrigin",c,T),lr(s,h,"yOrigin",f,x),lr(s,h,"xOffset",p,h.xOffset),lr(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",T+" "+x)},Or=function(t,e){var i=t._gsap||new Ve(t);if("x"in i&&!e&&!i.uncache)return i;var r,n,s,o,a,u,h,l,c,f,p,d,_,m,g,v,y,w,b,T,x,O,M,D,k,E,C,S,A,P,I,R,z=t.style,F=i.scaleX<0,B="px",q="deg",N=er(t,Ki)||"0";return r=n=s=u=h=l=c=f=p=0,o=a=1,i.svg=!(!t.getCTM||!ur(t)),m=Tr(t,i.svg),i.svg&&(D=(!i.uncache||"0px 0px"===N)&&!e&&t.getAttribute("data-svg-origin"),xr(t,D||N,!!D||i.originIsAbsolute,!1!==i.smooth,m)),d=i.xOrigin||0,_=i.yOrigin||0,m!==vr&&(w=m[0],b=m[1],T=m[2],x=m[3],r=O=m[4],n=M=m[5],6===m.length?(o=Math.sqrt(w*w+b*b),a=Math.sqrt(x*x+T*T),u=w||b?Ri(b,w)*Ii:0,(c=T||x?Ri(T,x)*Ii+u:0)&&(a*=Math.abs(Math.cos(c*Li))),i.svg&&(r-=d-(d*w+_*T),n-=_-(d*b+_*x))):(R=m[6],P=m[7],C=m[8],S=m[9],A=m[10],I=m[11],r=m[12],n=m[13],s=m[14],h=(g=Ri(R,A))*Ii,g&&(D=O*(v=Math.cos(-g))+C*(y=Math.sin(-g)),k=M*v+S*y,E=R*v+A*y,C=O*-y+C*v,S=M*-y+S*v,A=R*-y+A*v,I=P*-y+I*v,O=D,M=k,R=E),l=(g=Ri(-T,A))*Ii,g&&(v=Math.cos(-g),I=x*(y=Math.sin(-g))+I*v,w=D=w*v-C*y,b=k=b*v-S*y,T=E=T*v-A*y),u=(g=Ri(b,w))*Ii,g&&(D=w*(v=Math.cos(g))+b*(y=Math.sin(g)),k=O*v+M*y,b=b*v-w*y,M=M*v-O*y,w=D,O=k),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),o=Dt(Math.sqrt(w*w+b*b+T*T)),a=Dt(Math.sqrt(M*M+R*R)),g=Ri(O,M),c=Math.abs(g)>2e-4?g*Ii:0,p=I?1/(I<0?-I:I):0),i.svg&&(D=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!wr(er(t,Ji)),D&&t.setAttribute("transform",D))),Math.abs(c)>90&&Math.abs(c)<270&&(F?(o*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(a*=-1,c+=c<=0?180:-180)),e=e||i.uncache,i.x=r-((i.xPercent=r&&(!e&&i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-r)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+B,i.y=n-((i.yPercent=n&&(!e&&i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+B,i.z=s+B,i.scaleX=Dt(o),i.scaleY=Dt(a),i.rotation=Dt(u)+q,i.rotationX=Dt(h)+q,i.rotationY=Dt(l)+q,i.skewX=c+q,i.skewY=f+q,i.transformPerspective=p+B,(i.zOrigin=parseFloat(N.split(" ")[2])||0)&&(z[Ki]=Mr(N)),i.xOffset=i.yOffset=0,i.force3D=L.force3D,i.renderTransform=i.svg?Pr:Ai?Ar:kr,i.uncache=0,i},Mr=function(t){return(t=t.split(" "))[0]+" "+t[1]},Dr=function(t,e,i){var r=he(e);return Dt(parseFloat(e)+parseFloat(fr(t,"x",i+"px",r)))+r},kr=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Ar(t,e)},Er="0deg",Cr="0px",Sr=") ",Ar=function(t,e){var i=e||this,r=i.xPercent,n=i.yPercent,s=i.x,o=i.y,a=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,_=i.transformPerspective,m=i.force3D,g=i.target,v=i.zOrigin,y="",w="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==Er||h!==Er)){var b,T=parseFloat(h)*Li,x=Math.sin(T),O=Math.cos(T);T=parseFloat(l)*Li,b=Math.cos(T),s=Dr(g,s,x*b*-v),o=Dr(g,o,-Math.sin(T)*-v),a=Dr(g,a,O*b*-v+v)}_!==Cr&&(y+="perspective("+_+Sr),(r||n)&&(y+="translate("+r+"%, "+n+"%) "),(w||s!==Cr||o!==Cr||a!==Cr)&&(y+=a!==Cr||w?"translate3d("+s+", "+o+", "+a+") ":"translate("+s+", "+o+Sr),u!==Er&&(y+="rotate("+u+Sr),h!==Er&&(y+="rotateY("+h+Sr),l!==Er&&(y+="rotateX("+l+Sr),c===Er&&f===Er||(y+="skew("+c+", "+f+Sr),1===p&&1===d||(y+="scale("+p+", "+d+Sr),g.style[Ji]=y||"translate(0, 0)"},Pr=function(t,e){var i,r,n,s,o,a=e||this,u=a.xPercent,h=a.yPercent,l=a.x,c=a.y,f=a.rotation,p=a.skewX,d=a.skewY,_=a.scaleX,m=a.scaleY,g=a.target,v=a.xOrigin,y=a.yOrigin,w=a.xOffset,b=a.yOffset,T=a.forceCSS,x=parseFloat(l),O=parseFloat(c);f=parseFloat(f),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),f+=d),f||p?(f*=Li,p*=Li,i=Math.cos(f)*_,r=Math.sin(f)*_,n=Math.sin(f-p)*-m,s=Math.cos(f-p)*m,p&&(d*=Li,o=Math.tan(p-d),n*=o=Math.sqrt(1+o*o),s*=o,d&&(o=Math.tan(d),i*=o=Math.sqrt(1+o*o),r*=o)),i=Dt(i),r=Dt(r),n=Dt(n),s=Dt(s)):(i=_,s=m,r=n=0),(x&&!~(l+"").indexOf("px")||O&&!~(c+"").indexOf("px"))&&(x=fr(g,"x",l,"px"),O=fr(g,"y",c,"px")),(v||y||w||b)&&(x=Dt(x+v-(v*i+y*n)+w),O=Dt(O+y-(v*r+y*s)+b)),(u||h)&&(o=g.getBBox(),x=Dt(x+u/100*o.width),O=Dt(O+h/100*o.height)),o="matrix("+i+","+r+","+n+","+s+","+x+","+O+")",g.setAttribute("transform",o),T&&(g.style[Ji]=o)},Ir=function(t,e,i,r,n){var s,o,a=360,u=Y(n),h=parseFloat(n)*(u&&~n.indexOf("rad")?Ii:1)-r,l=r+h+"deg";return u&&("short"===(s=n.split("_")[1])&&(h%=a)!==h%180&&(h+=h<0?a:-360),"cw"===s&&h<0?h=(h+36e9)%a-~~(h/a)*a:"ccw"===s&&h>0&&(h=(h-36e9)%a-~~(h/a)*a)),t._pt=o=new wi(t._pt,e,i,r,h,ji),o.e=l,o.u="deg",t._props.push(i),o},Lr=function(t,e){for(var i in e)t[i]=e[i];return t},Rr=function(t,e,i){var r,n,s,o,a,u,h,l=Lr({},i._gsap),c=i.style;for(n in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[Ji]=e,r=Or(i,1),hr(i,Ji),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Ji],c[Ji]=e,r=Or(i,1),c[Ji]=s),Pi)(s=l[n])!==(o=r[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(a=he(s)!==(h=he(o))?fr(i,n,s,h):parseFloat(s),u=parseFloat(o),t._pt=new wi(t._pt,r,n,a,u-a,Ni),t._pt.u=h||0,t._props.push(n));Lr(r,l)};Mt("padding,margin,Width,Radius",(function(t,e){var i="Top",r="Right",n="Bottom",s="Left",o=(e<3?[i,r,n,s]:[i+s,i+r,n+r,n+s]).map((function(i){return e<2?t+i:"border"+i+t}));gr[e>1?"border"+t:t]=function(t,e,i,r,n){var s,a;if(arguments.length<4)return s=o.map((function(e){return pr(t,e,i)})),5===(a=s.join(" ")).split(s[0]).length?s[0]:a;s=(r+"").split(" "),a={},o.forEach((function(t,e){return a[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,a,n)}}));var zr,Fr,Br,qr={name:"css",register:nr,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,r,n){var s,o,a,u,h,l,c,f,p,d,_,m,g,v,y,w,b,T,x,O=this._props,M=t.style,D=i.vars.startAt;for(c in Ei||nr(),e)if("autoRound"!==c&&(o=e[c],!gt[c]||!ti(c,e,i,r,t,n)))if(h=typeof o,l=gr[c],"function"===h&&(h=typeof(o=o.call(i,r,t,n))),"string"===h&&~o.indexOf("random(")&&(o=ye(o)),l)l(this,t,c,o,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),o+="",Ae.lastIndex=0,Ae.test(s)||(f=he(s),p=he(o)),p?f!==p&&(s=fr(t,c,s,p)+p):f&&(o+=f),this.add(M,"setProperty",s,o,r,n,0,0,c),O.push(c);else if("undefined"!==h){if(D&&c in D?(s="function"==typeof D[c]?D[c].call(i,r,t,n):D[c],Y(s)&&~s.indexOf("random(")&&(s=ye(s)),he(s+"")||(s+=L.units[c]||he(pr(t,c))||""),"="===(s+"").charAt(1)&&(s=pr(t,c))):s=pr(t,c),u=parseFloat(s),(d="string"===h&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),a=parseFloat(o),c in qi&&("autoAlpha"===c&&(1===u&&"hidden"===pr(t,"visibility")&&a&&(u=0),lr(this,M,"visibility",u?"inherit":"hidden",a?"inherit":"hidden",!a)),"scale"!==c&&"transform"!==c&&~(c=qi[c]).indexOf(",")&&(c=c.split(",")[0])),_=c in Pi)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||Or(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new wi(this._pt,M,Ji,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===c)this._pt=new wi(this._pt,g,"scaleY",g.scaleY,(d?Et(g.scaleY,d+a):a)-g.scaleY||0),O.push("scaleY",c),c+="X";else{if("transformOrigin"===c){b=void 0,T=void 0,x=void 0,b=(w=o).split(" "),T=b[0],x=b[1]||"50%","top"!==T&&"bottom"!==T&&"left"!==x&&"right"!==x||(w=T,T=x,x=w),b[0]=_r[T]||T,b[1]=_r[x]||x,o=b.join(" "),g.svg?xr(t,o,0,v,0,this):((p=parseFloat(o.split(" ")[2])||0)!==g.zOrigin&&lr(this,g,"zOrigin",g.zOrigin,p),lr(this,M,c,Mr(s),Mr(o)));continue}if("svgOrigin"===c){xr(t,o,1,v,0,this);continue}if(c in yr){Ir(this,g,c,u,d?Et(u,d+o):o);continue}if("smoothOrigin"===c){lr(this,g,"smooth",g.smooth,o);continue}if("force3D"===c){g[c]=o;continue}if("transform"===c){Rr(this,o,t);continue}}else c in M||(c=rr(c)||c);if(_||(a||0===a)&&(u||0===u)&&!Bi.test(o)&&c in M)a||(a=0),(f=(s+"").substr((u+"").length))!==(p=he(o)||(c in L.units?L.units[c]:f))&&(u=fr(t,c,s,p)),this._pt=new wi(this._pt,_?g:M,c,u,(d?Et(u,d+a):a)-u,_||"px"!==p&&"zIndex"!==c||!1===e.autoRound?Ni:$i),this._pt.u=p||0,f!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Wi);else if(c in M)dr.call(this,t,c,s,d?d+o:o);else{if(!(c in t)){lt(c,o);continue}this.add(t,c,s||t[c],d?d+o:o,r,n)}O.push(c)}y&&yi(this)},get:pr,aliases:qi,getSetter:function(t,e,i){var r=qi[e];return r&&r.indexOf(",")<0&&(e=r),e in Pi&&e!==Ki&&(t._gsap.x||pr(t,"x"))?i&&Si===i?"scale"===e?Qi:Hi:(Si=i||{},"scale"===e?Gi:Zi):t.style&&!V(t.style[e])?Xi:~e.indexOf("-")?Vi:ci(t,e)},core:{_removeProperty:hr,_getMatrix:Tr}};Oi.utils.checkPrefix=rr,Br=Mt((zr="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Fr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Pi[t]=1})),Mt(Fr,(function(t){L.units[t]="deg",yr[t]=1})),qi[Br[13]]=zr+","+Fr,Mt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");qi[e[1]]=Br[e[0]]})),Mt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){L.units[t]="px"})),Oi.registerPlugin(qr);var Nr=Oi.registerPlugin(qr)||Oi;Nr.core.Tween;function jr(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class Wr{constructor(t,e){jr(this,"DOM",{el:null,image:null,imageInner:null,link:null,meta:null,title:null,desc:null}),this.DOM.el=t,this.preview=e,this.DOM.image=this.DOM.el.querySelector(".item__img"),this.DOM.imageInner=this.DOM.el.querySelector(".item__img-inner"),this.DOM.link=this.DOM.el.querySelector(".item__link"),this.DOM.meta=this.DOM.el.querySelector(".item__meta"),this.DOM.title=this.DOM.el.querySelector(".item__title"),this.DOM.desc=this.DOM.el.querySelector(".item__desc"),this.DOM.link.addEventListener("mouseenter",(()=>{Nr.killTweensOf(this.DOM.imageInner),Nr.to(this.DOM.imageInner,{duration:2,ease:"power4",scale:1.2})})),this.DOM.link.addEventListener("mouseleave",(()=>{Nr.killTweensOf(this.DOM.imageInner),Nr.to(this.DOM.imageInner,{duration:.7,ease:"expo",scale:1})}))}}function $r(t,e){return Object.getOwnPropertyNames(Object(t)).reduce(((i,r)=>{const n=Object.getOwnPropertyDescriptor(Object(t),r),s=Object.getOwnPropertyDescriptor(Object(e),r);return Object.defineProperty(i,r,s||n)}),{})}function Yr(t){return"string"==typeof t}function Ur(t){return Array.isArray(t)}function Xr(t={}){const e=$r(t);let i;return void 0!==e.types?i=e.types:void 0!==e.split&&(i=e.split),void 0!==i&&(e.types=(Yr(i)||Ur(i)?String(i):"").split(",").map((t=>String(t).trim())).filter((t=>/((line)|(word)|(char))/i.test(t)))),(e.absolute||e.position)&&(e.absolute=e.absolute||/absolute/.test(t.position)),e}function Vr(t){const e=Yr(t)||Ur(t)?String(t):"";return{none:!e,lines:/line/i.test(e),words:/word/i.test(e),chars:/char/i.test(e)}}function Hr(t){return null!==t&&"object"==typeof t}function Qr(t){return Ur(t)?t:null==t?[]:function(t){return Hr(t)&&function(t){return"number"==typeof t&&t>-1&&t%1==0}(t.length)}(t)?Array.prototype.slice.call(t):[t]}function Gr(t){return Hr(t)&&/^(1|3|11)$/.test(t.nodeType)}function Zr(t){let e=t;return Yr(t)&&(e=/^(#[a-z]\w+)$/.test(t.trim())?document.getElementById(t.trim().slice(1)):document.querySelectorAll(t)),Qr(e).reduce(((t,e)=>[...t,...Qr(e).filter(Gr)]),[])}function Jr(t,e,i){let r={},n=null;return Hr(t)&&(n=t[Jr.expando]||(t[Jr.expando]=++Jr.uid),r=Jr.cache[n]||(Jr.cache[n]={})),void 0===i?void 0===e?r:r[e]:void 0!==e?(r[e]=i,i):void 0}function Kr(t){const e=t&&t[Jr.expando];e&&(delete t[e],delete Jr.cache[e])}(()=>{function t(...t){const e=t.length;for(let i=0;i{const r=e[t],n=Yr(r)?r.trim():r;null!==n&&""!==n&&("children"===t?i.append(...Qr(n)):i.setAttribute(t,n))})),i):i}var bn={splitClass:"",lineClass:"line",wordClass:"word",charClass:"char",types:["lines","words","chars"],absolute:!1,tagName:"div"};function Tn(t,e){const i=Vr((e=$r(bn,e)).types),r=e.tagName,n=t.nodeValue,s=document.createDocumentFragment();let o=[],a=[];return/^\s/.test(n)&&s.append(" "),o=function(t,e=" "){return(t?String(t):"").trim().replace(/\s+/g," ").split(e)}(n).reduce(((t,n,o,u)=>{let h,l;return i.chars&&(l=yn(n).map((t=>{const i=wn(r,{class:`${e.splitClass} ${e.charClass}`,style:"display: inline-block;",children:t});return Jr(i).isChar=!0,a=[...a,i],i}))),i.words||i.lines?(h=wn(r,{class:`${e.wordClass} ${e.splitClass}`,style:"display: inline-block; "+(i.words&&e.absolute?"position: relative;":""),children:i.chars?l:n}),Jr(h).isWord=!0,Jr(h).isWordStart=!0,Jr(h).isWordEnd=!0,s.appendChild(h)):l.forEach((t=>{s.appendChild(t)})),o{const{words:r,chars:n}=xn(i,e);return{words:[...t.words,...r],chars:[...t.chars,...n]}}),r)}function On(t){Jr(t).isWord?t.replaceWith(...t.childNodes):Qr(t.children).forEach((t=>On(t)))}function Mn(t,e,i){const r=Vr(e.types),n=e.tagName,s=t.getElementsByTagName("*"),o=[];let a,u,h,l=[],c=null,f=[];Jr(t).nodes=s;const p=t.parentElement,d=t.nextElementSibling,_=document.createDocumentFragment(),m=window.getComputedStyle(t),g=m.textAlign,v=.2*parseFloat(m.fontSize);return e.absolute&&(h={left:t.offsetLeft,top:t.offsetTop,width:t.offsetWidth},u=t.offsetWidth,a=t.offsetHeight,Jr(t).cssWidth=t.style.width,Jr(t).cssHeight=t.style.height),Qr(s).forEach((n=>{const s=n.parentElement===t,{width:a,height:u,top:h,left:f}=function(t,e,i,r){if(!i.absolute)return{top:e?t.offsetTop:null};const n=t.offsetParent,[s,o]=r;let a=0,u=0;if(n&&n!==document.body){const t=n.getBoundingClientRect();a=t.x+s,u=t.y+o}const{width:h,height:l,x:c,y:f}=t.getBoundingClientRect();return{width:h,height:l,top:f+o-u,left:c+s-a}}(n,s,e,i);/^br$/i.test(n.nodeName)||(r.lines&&s&&((null===c||h-c>=v)&&(c=h,o.push(l=[])),l.push(n)),e.absolute&&(Jr(n).top=h,Jr(n).left=f,Jr(n).width=a,Jr(n).height=u))})),p&&p.removeChild(t),r.lines&&(f=o.map((t=>{const i=wn(n,{class:`${e.splitClass} ${e.lineClass}`,style:`display: block; text-align: ${g}; width: 100%;`});Jr(i).isLine=!0;const r={height:0,top:1e4};return _.appendChild(i),t.forEach(((t,e,n)=>{const{isWordEnd:s,top:o,height:a}=Jr(t),u=n[e+1];r.height=Math.max(r.height,a),r.top=Math.min(r.top,o),i.appendChild(t),s&&Jr(u).isWordStart&&i.append(" ")})),e.absolute&&(Jr(i).height=r.height,Jr(i).top=r.top),i})),r.words||On(_),t.replaceChildren(_)),e.absolute&&(t.style.width=`${t.style.width||u}px`,t.style.height=`${a}px`,Qr(s).forEach((t=>{const{isLine:e,top:i,left:r,width:n,height:s}=Jr(t),o=Jr(t.parentElement),a=!e&&o.isLine;t.style.top=`${a?i-o.top:i}px`,t.style.left=e?`${h.left}px`:r-(a?h.left:0)+"px",t.style.height=`${s}px`,t.style.width=e?`${h.width}px`:`${n}px`,t.style.position="absolute"}))),p&&(d?p.insertBefore(t,d):p.appendChild(t)),f}let Dn=$r(bn,{});class kn{static get defaults(){return Dn}static set defaults(t){Dn=$r(Dn,Xr(t))}static setDefaults(t){return Dn=$r(Dn,Xr(t)),bn}static revert(t){Zr(t).forEach((t=>{const{isSplit:e,html:i}=Jr(t);e&&(t.innerHTML=i||"",Jr(t).isSplit=!1,Jr(t).html=null)}))}static create(t,e){return new kn(t,e)}split(t){this.revert(),this.lines=[],this.words=[],this.chars=[];const e=[window.pageXOffset,window.pageYOffset];void 0!==t&&(this.settings=$r(this.settings,Xr(t)));const i=Vr(this.settings.types);i.none||(this.elements.forEach((t=>{Jr(t).isRoot=!0;const{words:e,chars:i}=xn(t,this.settings);this.words=[...this.words,...e],this.chars=[...this.chars,...i]})),this.elements.forEach((t=>{if(i.lines||this.settings.absolute){const i=Mn(t,this.settings,e);this.lines=[...this.lines,...i]}})),this.isSplit=!0,window.scrollTo(e[0],e[1]),this.elements.forEach((t=>{Qr(Jr(t).nodes).forEach(Kr),Jr(t).nodes=null})))}revert(){this.elements.forEach((t=>{const{isSplit:e,html:i,cssWidth:r,cssHeight:n}=Jr(t);e&&(t.innerHTML=i,t.style.width=r||"",t.style.height=n||"",Jr(t).isSplit=!1)})),this.isSplit&&(this.lines=null,this.words=null,this.chars=null,this.isSplit=!1)}constructor(t,e){this.isSplit=!1,this.settings=$r(Dn,Xr(e)),this.elements=Zr(t)||[],this.revert(),this.elements.forEach((t=>{Jr(t).html=t.innerHTML})),this.split()}}var En={}; 11 | /*! 12 | * imagesLoaded v5.0.0 13 | * JavaScript is all like "You images are done yet or what?" 14 | * MIT License 15 | */!function(t,e){En?En=e(t,r("hobco")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:En,(function(t,e){let i=t.jQuery,r=t.console;function n(t,e,s){if(!(this instanceof n))return new n(t,e,s);let o=t;var a;("string"==typeof t&&(o=document.querySelectorAll(t)),o)?(this.elements=(a=o,Array.isArray(a)?a:"object"==typeof a&&"number"==typeof a.length?[...a]:[a]),this.options={},"function"==typeof e?s=e:Object.assign(this.options,e),s&&this.on("always",s),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):r.error(`Bad element for imagesLoaded ${o||t}`)}n.prototype=Object.create(e.prototype),n.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const s=[1,9,11];n.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!s.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const o=/url\((['"])?(.*?)\1\)/gi;function a(t){this.img=t}function u(t,e){this.url=t,this.element=e,this.img=new Image}return n.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=o.exec(e.backgroundImage);for(;null!==i;){let r=i&&i[2];r&&this.addBackground(r,t),i=o.exec(e.backgroundImage)}},n.prototype.addImage=function(t){let e=new a(t);this.images.push(e)},n.prototype.addBackground=function(t,e){let i=new u(t,e);this.images.push(i)},n.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},n.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&r&&r.log(`progress: ${i}`,t,e)},n.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},a.prototype=Object.create(e.prototype),a.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)},a.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},a.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,r="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,r,e])},a.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},a.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},a.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},a.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(a.prototype),u.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},u.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},n.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new n(this,t,e).jqDeferred.promise(i(this))})},n.makeJQueryPlugin(),n}));const Cn=(t,e,i)=>{t.forEach((t=>{const r=document.createElement(e);r.classList=i,t.parentNode.appendChild(r),r.appendChild(t)}))};class Sn{in(t=!0){return this.isVisible=!0,Nr.killTweensOf(this.SplitTypeInstance.lines),this.inTimeline=Nr.timeline({defaults:{duration:1.1,ease:"power4.inOut"}}).addLabel("start",0).set(this.SplitTypeInstance.lines,{yPercent:105},"start"),t?this.inTimeline.to(this.SplitTypeInstance.lines,{yPercent:0,stagger:.05},"start"):this.inTimeline.set(this.SplitTypeInstance.lines,{yPercent:0},"start"),this.inTimeline}out(t=!0){return this.isVisible=!1,Nr.killTweensOf(this.SplitTypeInstance.lines),this.outTimeline=Nr.timeline({defaults:{duration:1.1,ease:"power4.inOut"}}).addLabel("start",0),t?this.outTimeline.to(this.SplitTypeInstance.lines,{yPercent:-105,stagger:.05},"start"):this.outTimeline.set(this.SplitTypeInstance.lines,{yPercent:-105},"start"),this.outTimeline}initEvents(){window.addEventListener("resize",(()=>{this.SplitTypeInstance.split(),Cn(this.SplitTypeInstance.lines,"div","oh"),this.isVisible||Nr.set(this.SplitTypeInstance.lines,{yPercent:105})}))}constructor(t){jr(this,"DOM",{el:null}),jr(this,"SplitTypeInstance",void 0),jr(this,"isVisible",void 0),jr(this,"inTimeline",void 0),jr(this,"outTimeline",void 0),this.DOM={el:t},this.SplitTypeInstance=new kn(this.DOM.el,{types:"lines"}),Cn(this.SplitTypeInstance.lines,"div","oh"),this.initEvents()}}class An{constructor(t){jr(this,"DOM",{el:null,image:null,imageInner:null,title:null,backCtrl:null,innerElements:null,multiLineWrap:null}),jr(this,"multiLines",[]),this.DOM.el=t,this.DOM.image=this.DOM.el.querySelector(".preview__img"),this.DOM.imageInner=this.DOM.el.querySelector(".preview__img-inner"),this.DOM.title=this.DOM.el.querySelector(".preview__title"),this.DOM.backCtrl=this.DOM.el.querySelector(".preview__back"),this.DOM.innerElements=[...this.DOM.el.querySelectorAll(".oh__inner")],this.DOM.multiLineWrap=[...this.DOM.el.querySelectorAll(".preview__column > p")],this.DOM.multiLineWrap.forEach((t=>this.multiLines.push(new Sn(t))))}}const Pn=document.body,In=document.querySelector(".content"),Ln=document.querySelector(".frame"),Rn=[...document.querySelectorAll(".overlay__row")],zn=[];[...document.querySelectorAll(".preview")].forEach((t=>zn.push(new An(t))));const Fn=[];[...document.querySelectorAll(".item")].forEach(((t,e)=>Fn.push(new Wr(t,zn[e]))));for(const t of Fn)t.DOM.link.addEventListener("click",(()=>{return e=t,void Nr.timeline({defaults:{duration:1,ease:"power3.inOut"}}).add((()=>{In.classList.add("content--hidden")}),"start").addLabel("start",0).set([e.preview.DOM.innerElements,e.preview.DOM.backCtrl],{opacity:0},"start").to(Rn,{scaleY:1},"start").addLabel("content","start+=0.6").add((()=>{Pn.classList.add("preview-visible"),Nr.set(Ln,{opacity:0},"start"),e.preview.DOM.el.classList.add("preview--current")}),"content").to([e.preview.DOM.image,e.preview.DOM.imageInner],{startAt:{y:t=>t?"101%":"-101%"},y:"0%"},"content").add((()=>{for(const t of e.preview.multiLines)t.in();Nr.set(e.preview.DOM.multiLineWrap,{opacity:1,delay:.1})}),"content").to(Ln,{ease:"expo",startAt:{y:"-100%",opacity:0},opacity:1,y:"0%"},"content+=0.3").to(e.preview.DOM.innerElements,{ease:"expo",startAt:{yPercent:101},yPercent:0,opacity:1},"content+=0.3").to(e.preview.DOM.backCtrl,{opacity:1},"content");var e})),t.preview.DOM.backCtrl.addEventListener("click",(()=>{return e=t,void Nr.timeline({defaults:{duration:1,ease:"power3.inOut"}}).addLabel("start",0).to(e.preview.DOM.innerElements,{yPercent:-101,opacity:0},"start").add((()=>{for(const t of e.preview.multiLines)t.out()}),"start").to(e.preview.DOM.backCtrl,{opacity:0},"start").to(e.preview.DOM.image,{y:"101%"},"start").to(e.preview.DOM.imageInner,{y:"-101%"},"start").to(Ln,{opacity:0,y:"-100%",onComplete:()=>{Pn.classList.remove("preview-visible"),Nr.set(Ln,{opacity:1,y:"0%"})}},"start").addLabel("grid","start+=0.6").to(Rn,{scaleY:0,onComplete:()=>{e.preview.DOM.el.classList.remove("preview--current"),In.classList.remove("content--hidden")}},"grid");var e}))}(); -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{--color-text:#000;--color-text-alt:#fff;--color-frame-alt:#a17445;--color-bg:#c6c1b7;--color-bg-alt:#18130e;--color-link:#000;--color-link-alt:#fff;--color-link-hover:#000;--color-link-hover-alt:#a17445;--color-column-title:#727170;--color-overlay:#000;--color-border:#a0988a;font-size:17px;font-weight:300}body{color:var(--color-text);background-color:var(--color-bg);text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:acumin-pro,sans-serif}.oh{position:relative;overflow:hidden}.oh__inner{will-change:transform;display:inline-block}.line{transform-origin:0;white-space:nowrap;will-change:transform}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width: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);white-space:nowrap;outline:none;text-decoration:none;position:relative;overflow:hidden}a:not(.frame__title-back):not(.item__link):before{content:"";height:1px;width:100%;transform-origin:0%;background:currentColor;transition:transform .3s;position:absolute;top:92%}a:not(.frame__title-back):not(.item__link):hover:before{transform-origin:100%;transform:scaleX(0)}a:hover{color:var(--color-link-hover);outline:none}.preview-visible .frame a{color:var(--color-frame-alt)}.preview-visible a:hover{color:var(--color-link-hover-alt)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.unbutton{font:inherit;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}main{height:100vh;grid-row-gap:8vh;grid-template:"frame"min-content"content"1fr/100%;padding:1.5rem 2.5rem 3rem;display:grid}.frame{grid-row-gap:1rem;will-change:transform,opacity;grid-area:frame;grid-template-columns:100%;grid-template-areas:"title""credits""sponsor";align-content:space-between;align-items:start;margin-bottom:5vh;font-size:.85rem;display:grid;position:relative}.preview-visible .frame{opacity:0;z-index:100;color:var(--color-frame-alt)}.frame__title{width:14rem;flex-wrap:wrap;grid-area:title;display:flex}.frame__title-main{margin:0;font-size:.85rem;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:currentColor;width:16px;height:16px}.content{max-width:400px;grid-area:content}.content--hidden{pointer-events:none}.item{grid-template-rows:1rem auto auto 1fr auto;grid-template-columns:100%;margin-bottom:5rem;display:grid}.item__title{margin-bottom:.5rem;font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:2rem;font-weight:300}.item__img{width:100%;aspect-ratio:500/333;position:relative;overflow:hidden}.item__img-inner{width:100%;height:100%;background-position:50% 45%;background-size:cover}.item__desc{margin-top:2.5rem;line-height:1.1}.item__link{cursor:pointer;text-transform:lowercase;width:100%;color:var(--color-text);border:1px solid var(--color-border);text-align:center;border-radius:2rem;padding:1rem}.item__link:hover{background:var(--color-text);border-color:var(--color-text);color:var(--color-text-alt)}.overlay{width:100%;height:100%;pointer-events:none;grid-template-rows:repeat(2,1fr);grid-template-columns:100%;display:grid;position:fixed;top:0;left:0}.overlay__row{background:var(--color-overlay);will-change:transform;transform:scaleY(0)}.overlay__row:first-child{transform-origin:50% 0}.overlay__row:last-child{transform-origin:50% 100%}.previews{pointer-events:none;grid-area:content;position:relative}.preview{opacity:0;pointer-events:none;width:100%;height:100%;color:var(--color-text-alt);position:absolute;top:0}.preview--current{opacity:1;pointer-events:auto}.preview__img{width:100%;min-height:200px;pointer-events:none;will-change:transform;grid-area:1/1/2/-1;position:relative;overflow:hidden;transform:translateY(-101%)}.preview__img-inner{width:100%;height:100%;will-change:transform;background-position:50% 35%;background-size:cover;transform:translateY(101%)}.preview__title{white-space:nowrap;grid-area:1/1/2/-1;place-self:center;margin:2rem 0;font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:max(2rem,min(18vw,15rem));font-weight:300;line-height:.7}.preview__title span{padding-top:3%;line-height:.7}.preview__column p{opacity:0;line-height:1.1}.preview__column>span{display:block}.preview__column-title{margin-top:0;font-size:1rem;font-weight:300}.preview__column-title:not(.preview__column-title--main){color:var(--color-column-title)}.preview__column--start{grid-area:2/1/3/3}.preview__column:not(.preview__column--start){grid-row:2/span 2}.preview__back{stroke:var(--color-link-alt);cursor:pointer;fill:none;grid-area:3/1/4/2;place-self:end start;margin:2rem auto}.preview__back:hover{stroke:var(--color-link-hover-alt)}@media screen and (min-width:53em){.frame{grid-row-gap:0;grid-column-gap:5vw;grid-template-rows:auto;grid-template-columns:repeat(3,1fr);grid-template-areas:"title credits sponsor";margin-bottom:0}.content{max-width:none;grid-column-gap:5vw;grid-template-rows:100%;grid-template-columns:repeat(3,1fr);display:grid}.item{margin-bottom:0}.item__title{font-size:max(1.25rem,min(3vw,2rem))}.preview{grid-column-gap:10vw;grid-row-gap:1rem;grid-template-rows:1fr auto auto;grid-template-columns:repeat(4,1fr);display:grid}.preview__title,.preview__back{margin: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={},r=t.parcelRequire8ae9;function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 2 | /*! 3 | * GSAP 3.10.4 4 | * https://greensock.com 5 | * 6 | * @license Copyright 2008-2022, GreenSock. All rights reserved. 7 | * Subject to the terms at https://greensock.com/standard-license or for 8 | * Club GreenSock members, the agreement issued with that membership. 9 | * @author: Jack Doyle, jack@greensock.com 10 | */null==r&&((r=function(t){if(t in e)return e[t].exports;if(t in i){var r=i[t];delete i[t];var n={id:t,exports:{}};return e[t]=n,r.call(n.exports,n,n.exports),n.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){i[t]=e},t.parcelRequire8ae9=r),r.register("4hJWI",(function(t,e){!function(e,i){t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},r=i[t]=i[t]||[];return r.includes(e)||r.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let r=i.indexOf(e);return-1!=r&&i.splice(r,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let r=this._onceEvents&&this._onceEvents[t];for(let n of i){r&&r[n]&&(this.off(t,n),delete r[n]),n.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t}))}));var o,a,u,h,l,c,f,p,d,_,m,g,v,y,w,b,T,x,O,M,D,k,E,C,S,A,I,P,L={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},R={duration:.5,overwrite:!1,delay:0},z=2*Math.PI,F=z/4,B=0,q=Math.sqrt,N=Math.cos,j=Math.sin,W=function(t){return"string"==typeof t},$=function(t){return"function"==typeof t},Y=function(t){return"number"==typeof t},U=function(t){return void 0===t},X=function(t){return"object"==typeof t},V=function(t){return!1!==t},H=function(){return"undefined"!=typeof window},Q=function(t){return $(t)||W(t)},G="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},J=Array.isArray,Z=/(?:-?\.?\d|\.)+/gi,K=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,tt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,et=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,it=/[+-]=-?[.\d]+/,rt=/[^,'"\[\]\s]+/gi,nt=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,st={},ot={},at=function(t){return(ot=Pt(t,st))&&bi},ut=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},ht=function(t,e){return!e&&console.warn(t)},lt=function(t,e){return t&&(st[t]=e)&&ot&&(ot[t]=e)||st},ct=function(){return 0},ft={},pt=[],dt={},_t={},mt={},gt=30,vt=[],yt="",wt=function(t){var e,i,r=t[0];if(X(r)||$(r)||(t=[t]),!(e=(r._gsap||{}).harness)){for(i=vt.length;i--&&!vt[i].targetTest(r););e=vt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new Ye(t[i],e)))||t.splice(i,1);return t},bt=function(t){return t._gsap||wt(le(t))[0]._gsap},Tt=function(t,e,i){return(i=t[e])&&$(i)?t[e]():U(i)&&t.getAttribute&&t.getAttribute(e)||i},xt=function(t,e){return(t=t.split(",")).forEach(e)||t},Ot=function(t){return Math.round(1e5*t)/1e5||0},Mt=function(t){return Math.round(1e7*t)/1e7||0},Dt=function(t,e){var i=e.charAt(0),r=parseFloat(e.substr(2));return t=parseFloat(t),"+"===i?t+r:"-"===i?t-r:"*"===i?t*r:t/r},kt=function(t,e){for(var i=e.length,r=0;t.indexOf(e[r])<0&&++rs;)o=o._prev;return o?(e._next=o._next,o._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[r]=e,e._prev=o,e.parent=e._dp=t,e},Bt=function(t,e,i,r){void 0===i&&(i="_first"),void 0===r&&(r="_last");var n=e._prev,s=e._next;n?n._next=s:t[i]===e&&(t[i]=s),s?s._prev=n:t[r]===e&&(t[r]=n),e._next=e._prev=e.parent=null},qt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},Nt=function(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},jt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Wt=function t(e){return!e||e._ts&&t(e.parent)},$t=function(t){return t._repeat?Yt(t._tTime,t=t.duration()+t._rDelay)*t:0},Yt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Ut=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Xt=function(t){return t._end=Mt(t._start+(t._tDur/Math.abs(t._ts||t._rts||1e-8)||0))},Vt=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=Mt(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Xt(t),i._dirty||Nt(i,t)),t},Ht=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Ut(t.rawTime(),e),(!e._dur||oe(0,e.totalDuration(),i)-e._tTime>1e-8)&&e.render(i,!0)),Nt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&i.totalTime(i._tTime),i=i._dp;t._zTime=-1e-8}},Qt=function(t,e,i,r){return e.parent&&qt(e),e._start=Mt((Y(i)?i:i||t!==a?re(t,i,e):t._time)+e._delay),e._end=Mt(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),Ft(t,e,"_first","_last",t._sort?"_start":0),Kt(e)||(t._recent=e),r||Ht(t,e),t},Gt=function(t,e){return(st.ScrollTrigger||ut("scrollTrigger",e))&&st.ScrollTrigger.create(e,t)},Jt=function(t,e,i,r){return Ze(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==Ae.frame?(pt.push(t),t._lazy=[e,r],1):void 0:1},Zt=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},Kt=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},te=function(t,e,i,r){var n=t._repeat,s=Mt(e)||0,o=t._tTime/t._tDur;return o&&!r&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:Mt(s*(n+1)+t._rDelay*n):s,o>0&&!r?Vt(t,t._tTime=t._tDur*o):t.parent&&Xt(t),i||Nt(t.parent,t),t},ee=function(t){return t instanceof Xe?Nt(t):te(t,t._dur)},ie={_start:0,endTime:ct,totalDuration:ct},re=function t(e,i,r){var n,s,o,a=e.labels,u=e._recent||ie,h=e.duration()>=1e8?u.endTime(!1):e._dur;return W(i)&&(isNaN(i)||i in a)?(s=i.charAt(0),o="%"===i.substr(-1),n=i.indexOf("="),"<"===s||">"===s?(n>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(o?(n<0?u:r).totalDuration()/100:1)):n<0?(i in a||(a[i]=h),a[i]):(s=parseFloat(i.charAt(n-1)+i.substr(n+1)),o&&r&&(s=s/100*(J(r)?r[0]:r).totalDuration()),n>1?t(e,i.substr(0,n-1),r)+s:h+s)):null==i?h:+i},ne=function(t,e,i){var r,n,s=Y(e[1]),o=(s?2:1)+(t<2?0:1),a=e[o];if(s&&(a.duration=e[1]),a.parent=i,t){for(r=a,n=i;n&&!("immediateRender"in r);)r=n.vars.defaults||{},n=V(n.vars.inherit)&&n.parent;a.immediateRender=V(r.immediateRender),t<2?a.runBackwards=1:a.startAt=e[o-1]}return new ri(e[0],a,e[o+1])},se=function(t,e){return t||0===t?e(t):e},oe=function(t,e,i){return ie?e:i},ae=function(t,e){return W(t)&&(e=nt.exec(t))?e[1]:""},ue=[].slice,he=function(t,e){return t&&X(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&X(t[0]))&&!t.nodeType&&t!==u},le=function(t,e,i){return!W(t)||i||!h&&Ie()?J(t)?function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var r;return W(t)&&!e||he(t,1)?(r=i).push.apply(r,le(t)):i.push(t)}))||i}(t,i):he(t)?ue.call(t,0):t?[t]:[]:ue.call((e||l).querySelectorAll(t),0)},ce=function(t){return t.sort((function(){return.5-Math.random()}))},fe=function(t){if($(t))return t;var e=X(t)?t:{each:t},i=qe(e.ease),r=e.from||0,n=parseFloat(e.base)||0,s={},o=r>0&&r<1,a=isNaN(r)||o,u=e.axis,h=r,l=r;return W(r)?h=l={center:.5,edges:.5,end:1}[r]||0:!o&&a&&(h=r[0],l=r[1]),function(t,o,c){var f,p,d,_,m,g,v,y,w,b=(c||e).length,T=s[b];if(!T){if(!(w="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=c[w++].getBoundingClientRect().left)&&wv&&(v=m),mb?b-1:u?"y"===u?b/w:w:Math.max(w,b/w))||0)*("edges"===r?-1:1),T.b=b<0?n-b:n,T.u=ae(e.amount||e.each)||0,i=i&&b<0?Fe(i):i}return b=(T[t]-T.min)/T.max||0,Mt(T.b+(i?i(b):b)*T.v)+T.u}},pe=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(i){var r=Math.round(parseFloat(i)/t)*t*e;return(r-r%1)/e+(Y(i)?0:ae(i))}},de=function(t,e){var i,r,n=J(t);return!n&&X(t)&&(i=n=t.radius||1e8,t.values?(t=le(t.values),(r=!Y(t[0]))&&(i*=i)):t=pe(t.increment)),se(e,n?$(t)?function(e){return r=t(e),Math.abs(r-e)<=i?r:e}:function(e){for(var n,s,o=parseFloat(r?e.x:e),a=parseFloat(r?e.y:0),u=1e8,h=0,l=t.length;l--;)(n=r?(n=t[l].x-o)*n+(s=t[l].y-a)*s:Math.abs(t[l]-o))(n=Math.abs(n))&&(s=r,a=n);return s},we=function(t,e,i){var r,n,s=t.vars,o=s[e];if(o)return r=s[e+"Params"],n=s.callbackScope||t,i&&pt.length&&Et(),r?o.apply(n,r):o.call(n)},be=function(t){return qt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&we(t,"onInterrupt"),t},Te=function(t){var e=(t=!t.name&&t.default||t).name,i=$(t),r=e&&!i&&t.init?function(){this._props=[]}:t,n={init:ct,render:fi,add:Ge,kill:di,modifier:pi,rawVars:0},s={targetTest:0,get:0,getSetter:ui,aliases:{},register:0};if(Ie(),t!==r){if(_t[e])return;It(r,It(Rt(t,n),s)),Pt(r.prototype,Pt(n,Rt(t,s))),_t[r.prop=e]=r,t.targetTest&&(vt.push(r),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}lt(e,r),t.register&&t.register(bi,r,gi)},xe={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},Me=function(t,e,i){var r,n,s,o,a,u,h,l,c,f,p=t?Y(t)?[t>>16,t>>8&255,255&t]:0:xe.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),xe[t])p=xe[t];else if("#"===t.charAt(0)){if(t.length<6&&(r=t.charAt(1),n=t.charAt(2),s=t.charAt(3),t="#"+r+r+n+n+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&255,255&p,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(p=f=t.match(Z),e){if(~t.indexOf("="))return p=t.match(K),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,a=+p[1]/100,r=2*(u=+p[2]/100)-(n=u<=.5?u*(a+1):u+a-u*a),p.length>3&&(p[3]*=1),p[0]=Oe(o+1/3,r,n),p[1]=Oe(o,r,n),p[2]=Oe(o-1/3,r,n);else p=t.match(Z)||xe.transparent;p=p.map(Number)}return e&&!f&&(r=p[0]/255,n=p[1]/255,s=p[2]/255,u=((h=Math.max(r,n,s))+(l=Math.min(r,n,s)))/2,h===l?o=a=0:(c=h-l,a=u>.5?c/(2-h-l):c/(h+l),o=h===r?(n-s)/c+(nT&&(O+=o-x),((i=(n=(M+=o)-O)-k)>0||a)&&(s=++v.frame,y=n-1e3*v.time,v.time=n/=1e3,k+=i+(i>=D?4:D-i),r=1),a||(_=m(t)),r)for(w=0;w=e&&w--},_listeners:E=[]}),Ie=function(){return!d&&Ae.wake()},Pe={},Le=/^[\d.\-M][\d.\-,\s]/,Re=/["']/g,ze=function(t){for(var e,i,r,n={},s=t.substr(1,t.length-3).split(":"),o=s[0],a=1,u=s.length;a1&&o.config?o.config.apply(null,~t.indexOf("{")?[ze(s[1])]:(e=t,i=e.indexOf("(")+1,r=e.indexOf(")"),n=e.indexOf("(",i),e.substring(i,~n&&n=1?i:1,s=(r||(e?.3:.45))/(i<1?i:1),o=s/z*(Math.asin(1/n)||0),a=function(t){return 1===t?1:n*Math.pow(2,-10*t)*j((t-o)*s)+1},u="out"===e?a:"in"===e?function(t){return 1-a(1-t)}:je(a);return s=z/s,u.config=function(i,r){return t(e,i,r)},u},$e=function t(e,i){void 0===i&&(i=1.70158);var r=function(t){return t?--t*t*((i+1)*t+i)+1:0},n="out"===e?r:"in"===e?function(t){return 1-r(1-t)}:je(r);return n.config=function(i){return t(e,i)},n};xt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Ne(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}))})),Pe.Linear.easeNone=Pe.none=Pe.Linear.easeIn,Ne("Elastic",We("in"),We("out"),We()),S=7.5625,I=1/(A=2.75),Ne("Bounce",(function(t){return 1-P(1-t)}),P=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,te(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Ie(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(Vt(this,t),!i._dp||i.parent||Ht(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)&&Qt(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&1e-8===Math.abs(this._zTime)||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Ct(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+$t(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)+$t(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?Yt(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?Ut(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,this.totalTime(oe(-this._delay,this._tDur,e),!0),Xt(this),jt(this)},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Ie(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&1e-8!==Math.abs(this._zTime)&&(this._tTime-=1e-8)))),this):this._ps},e.startTime=function(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return e&&(e._sort||!this.parent)&&Qt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(V(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?Ut(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,ee(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,ee(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(re(this,t),V(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,V(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(r[t]=e,i&&(r[t+"Params"]=i),"onUpdate"===t&&(this._onUpdate=e)):delete r[t],this):r[t]},e.then=function(t){var e=this;return new Promise((function(i){var r=$(t)?t:At,n=function(){var t=e.then;e.then=null,$(r)&&(r=r(e))&&(r.then||r===e)&&(e.then=t),i(r),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?n():e._prom=n}))},e.kill=function(){be(this)},t}();It(Ue.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Xe=function(t){function e(e,i){var r;return void 0===e&&(e={}),(r=t.call(this,e)||this).labels={},r.smoothChildTiming=!!e.smoothChildTiming,r.autoRemoveChildren=!!e.autoRemoveChildren,r._sort=V(e.sortChildren),a&&Qt(e.parent||a,n(r),i),e.reversed&&r.reverse(),e.paused&&r.paused(!0),e.scrollTrigger&&Gt(n(r),e.scrollTrigger),r}s(e,t);var i=e.prototype;return i.to=function(t,e,i){return ne(0,arguments,this),this},i.from=function(t,e,i){return ne(1,arguments,this),this},i.fromTo=function(t,e,i,r){return ne(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,zt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ri(t,e,re(this,i),1),this},i.call=function(t,e,i){return Qt(this,ri.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,r,n,s,o){return i.duration=e,i.stagger=i.stagger||r,i.onComplete=s,i.onCompleteParams=o,i.parent=this,new ri(t,i,re(this,n)),this},i.staggerFrom=function(t,e,i,r,n,s,o){return i.runBackwards=1,zt(i).immediateRender=V(i.immediateRender),this.staggerTo(t,e,i,r,n,s,o)},i.staggerFromTo=function(t,e,i,r,n,s,o,a){return r.startAt=i,zt(r).immediateRender=V(r.immediateRender),this.staggerTo(t,e,r,n,s,o,a)},i.render=function(t,e,i){var r,n,s,o,u,h,l,c,f,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:Mt(t),w=this._zTime<0!=t<0&&(this._initted||!v);if(this!==a&&y>g&&t>=0&&(y=g),y!==this._tTime||i||w){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),r=y,f=this._start,h=!(c=this._ts),w&&(v||(m=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(d=this._yoyo,u=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*u+t,e,i);if(r=Mt(y%u),y===g?(o=this._repeat,r=v):((o=~~(y/u))&&o===y/u&&(r=v,o--),r>v&&(r=v)),p=Yt(this._tTime,u),!m&&this._tTime&&p!==o&&(p=o),d&&1&o&&(r=v-r,_=1),o!==p&&!this._lock){var b=d&&1&p,T=b===(d&&1&o);if(oe)for(r=t._first;r&&r._start<=i;){if("isPause"===r.data&&r._start>e)return r;r=r._next}else for(r=t._last;r&&r._start>=i;){if("isPause"===r.data&&r._start=m&&t>=0)for(n=this._first;n;){if(s=n._next,(n._act||r>=n._start)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(r-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(r-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!h){l=0,s&&(y+=this._zTime=-1e-8);break}}n=s}else{n=this._last;for(var x=t<0?t:r;n;){if(s=n._prev,(n._act||x<=n._end)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(x-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(x-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!h){l=0,s&&(y+=this._zTime=x?-1e-8:1e-8);break}}n=s}}if(l&&!e&&(this.pause(),l.render(r>=m?0:-1e-8)._zTime=r>=m?1:-1,this._ts))return this._start=f,Xt(this),this.render(t,e,i);this._onUpdate&&!e&&we(this,"onUpdate",!0),(y===g&&this._tTime>=this.totalDuration()||!y&&m)&&(f!==this._start&&Math.abs(c)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&qt(this,1),e||t<0&&!m||!y&&!m&&g||(we(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(Y(e)||(e=re(this,e,t)),!(t instanceof Ue)){if(J(t))return t.forEach((function(t){return i.add(t,e)})),this;if(W(t))return this.addLabel(t,e);if(!$(t))return this;t=ri.delayedCall(0,t)}return this!==t?Qt(this,t,e):this},i.getChildren=function(t,e,i,r){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===r&&(r=-1e8);for(var n=[],s=this._first;s;)s._start>=r&&(s instanceof ri?e&&n.push(s):(i&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,i)))),s=s._next;return n},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return W(t)?this.removeLabel(t):$(t)?this.killTweensOf(t):(Bt(this,t),t===this._recent&&(this._recent=this._last),Nt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Mt(Ae.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]=re(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var r=ri.delayedCall(0,e||ct,i);return r.data="isPause",this._hasPause=1,Qt(this,r,re(this,t))},i.removePause=function(t){var e=this._first;for(t=re(this,t);e;)e._start===t&&"isPause"===e.data&&qt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var r=this.getTweensOf(t,i),n=r.length;n--;)Ve!==r[n]&&r[n].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,r=[],n=le(t),s=this._first,o=Y(e);s;)s instanceof ri?kt(s._targets,n)&&(o?(!Ve||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&r.push(s):(i=s.getTweensOf(n,e)).length&&r.push.apply(r,i),s=s._next;return r},i.tweenTo=function(t,e){e=e||{};var i,r=this,n=re(r,t),s=e,o=s.startAt,a=s.onStart,u=s.onStartParams,h=s.immediateRender,l=ri.to(r,It({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(o&&"time"in o?o.time:r._time))/r.timeScale())||1e-8,onStart:function(){if(r.pause(),!i){var t=e.duration||Math.abs((n-(o&&"time"in o?o.time:r._time))/r.timeScale());l._dur!==t&&te(l,t,0,1).render(l._time,!0,!0),i=1}a&&a.apply(l,u||[])}},e));return h?l.render(0):l},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,It({startAt:{time:re(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),ye(this,re(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),ye(this,re(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+1e-8)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var r,n=this._first,s=this.labels;n;)n._start>=i&&(n._start+=t,n._end+=t),n=n._next;if(e)for(r in s)s[r]>=i&&(s[r]+=t);return Nt(this)},i.invalidate=function(){var e=this._first;for(this._lock=0;e;)e.invalidate(),e=e._next;return t.prototype.invalidate.call(this)},i.clear=function(t){void 0===t&&(t=!0);for(var e,i=this._first;i;)e=i._next,this.remove(i),i=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Nt(this)},i.totalDuration=function(t){var e,i,r,n=0,s=this,o=s._last,u=1e8;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(r=s.parent;o;)e=o._prev,o._dirty&&o.totalDuration(),(i=o._start)>u&&s._sort&&o._ts&&!s._lock?(s._lock=1,Qt(s,o,i-o._delay,1)._lock=0):u=i,i<0&&o._ts&&(n-=i,(!r&&!s._dp||r&&r.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),u=0),o._end>n&&o._ts&&(n=o._end),o=e;te(s,s===a&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(a._ts&&(Ct(a,Ut(t,a)),f=Ae.frame),Ae.frame>=gt){gt+=L.autoSleep||120;var e=a._first;if((!e||!e._ts)&&L.autoSleep&&Ae._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Ae.sleep()}}},e}(Ue);It(Xe.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ve,He,Qe=function(t,e,i,r,n,s,o){var a,u,h,l,c,f,p,d,_=new gi(this._pt,t,e,0,1,ci,null,n),m=0,g=0;for(_.b=i,_.e=r,i+="",(p=~(r+="").indexOf("random("))&&(r=ge(r)),s&&(s(d=[i,r],t,e),i=d[0],r=d[1]),u=i.match(et)||[];a=et.exec(r);)l=a[0],c=r.substring(m,a.index),h?h=(h+1)%5:"rgba("===c.substr(-5)&&(h=1),l!==u[g++]&&(f=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:c||1===g?c:",",s:f,c:"="===l.charAt(1)?Dt(f,l)-f:parseFloat(l)-f,m:h&&h<4?Math.round:0},m=et.lastIndex);return _.c=m0&&!C&&(e._startAt=0),S&&i<=0)return void(i&&(e._zTime=i))}else!1===C&&(e._startAt=0);else if(D&&S)if(A)!C&&(e._startAt=0);else if(i&&(b=!1),s=It({overwrite:!1,data:"isFromStart",lazy:b&&V(T),immediateRender:b,stagger:0,parent:P},r),m&&(s[f.prop]=m),qt(e._startAt=ri.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,T=S&&V(T)||T&&!S,n=0;n")}));else{for(p in c={},x)"ease"===p||"easeEach"===p||Ke(p,x[p],c,x.easeEach);for(p in c)for(C=c[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(_!==this._tTime||!t||i||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=t<0){if(r=_,l=this.timeline,this._repeat){if(o=d+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,i);if(r=Mt(_%o),_===p?(s=this._repeat,r=d):((s=~~(_/o))&&s===_/o&&(r=d,s--),r>d&&(r=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,r=d-r),a=Yt(this._tTime,o),r===f&&!i&&this._initted)return this._tTime=_,this;s!==a&&(l&&this._yEase&&Be(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(Mt(o*s),!0).invalidate()._lock=0))}if(!this._initted){if(Jt(this,t<0?t:r,i,e))return this._tTime=0,this;if(f!==this._time)return this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=_,this._time=r,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(c||this._ease)(r/d),this._from&&(this.ratio=h=1-h),r&&!f&&!e&&(we(this,"onStart"),this._tTime!==_))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:!r&&u?-1e-8:l._dur*l._ease(r/this._dur),e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),we(this,"onUpdate")),this._repeat&&s!==a&&this.vars.onRepeat&&!e&&this.parent&&we(this,"onRepeat"),_!==this._tDur&&_||this._tTime!==_||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(_===this._tDur&&this._ts>0||!_&&this._ts<0)&&qt(this,1),e||t<0&&!f||!_&&!f||(we(this,_===p?"onComplete":"onReverseComplete",!0),this._prom&&!(_0)&&this._prom()))}}else!function(t,e,i,r){var n,s,o,a=t.ratio,u=e<0||!e&&(!t._start&&Zt(t)&&(t._initted||!Kt(t))||(t._ts<0||t._dp._ts<0)&&!Kt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=oe(0,t._tDur,e),s=Yt(l,h),t._yoyo&&1&s&&(u=1-u),s!==Yt(t._tTime,h)&&(a=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==a||r||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&Jt(t,e,r,i))return;for(o=t._zTime,t._zTime=e||(i?1e-8:0),i||(i=e&&!o),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&we(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&we(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&qt(t,1),i||(we(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,i);return this},i.targets=function(){return this._targets},i.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},i.resetTo=function(t,e,i,r){d||Ae.wake(),this._ts||this.play();var n=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Ze(this,n),function(t,e,i,r,n,s,o){var a,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((a=u[h][e])&&a.d&&a.d._pt)for(a=a.d._pt;a&&a.p!==e;)a=a._next;if(!a)return He=1,t.vars[e]="+=0",Ze(t,o),He=0,1;l.push(a)}for(h=l.length;h--;)(a=l[h]).s=!r&&0!==r||n?a.s+(r||0)+s*a.c:r,a.c=i-a.s,a.e&&(a.e=Ot(i)+ae(a.e)),a.b&&(a.b=a.s+ae(a.b))}(this,t,e,i,r,this._ease(n/this._dur),n)?this.resetTo(t,e,i,r):(Vt(this,0),this.parent||Ft(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},i.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?be(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ve&&!0!==Ve.vars.overwrite)._first||be(this),this.parent&&i!==this.timeline.totalDuration()&&te(this,this._dur*this.timeline._tDur/i,0,1),this}var r,n,s,o,a,u,h,l=this._targets,c=t?le(t):l,f=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,r=i===e.length;r&&i--&&t[i]===e[i];);return i<0}(l,c))return"all"===e&&(this._pt=0),be(this);for(r=this._op=this._op||[],"all"!==e&&(W(e)&&(a={},xt(e,(function(t){return a[t]=1})),e=a),e=function(t,e){var i,r,n,s,o=t[0]?bt(t[0]).harness:0,a=o&&o.aliases;if(!a)return e;for(r in i=Pt({},e),a)if(r in i)for(n=(s=a[r].split(",")).length;n--;)i[s[n]]=i[r];return i}(l,e)),h=l.length;h--;)if(~c.indexOf(l[h]))for(a in n=f[h],"all"===e?(r[h]=e,o=n,s={}):(s=r[h]=r[h]||{},o=e),o)(u=n&&n[a])&&("kill"in u.d&&!0!==u.d.kill(a)||Bt(this,u,"_pt"),delete n[a]),"all"!==s&&(s[a]=1);return this._initted&&!this._pt&&p&&be(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return ne(1,arguments)},e.delayedCall=function(t,i,r,n){return new e(i,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:i,onReverseComplete:i,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:n})},e.fromTo=function(t,e,i){return ne(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 a.killTweensOf(t,e,i)},e}(Ue);It(ri.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),xt("staggerTo,staggerFrom,staggerFromTo",(function(t){ri[t]=function(){var e=new Xe,i=ue.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var ni=function(t,e,i){return t[e]=i},si=function(t,e,i){return t[e](i)},oi=function(t,e,i,r){return t[e](r.fp,i)},ai=function(t,e,i){return t.setAttribute(e,i)},ui=function(t,e){return $(t[e])?si:U(t[e])&&t.setAttribute?ai:ni},hi=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},li=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ci=function(t,e){var i=e._pt,r="";if(!t&&e.b)r=e.b;else if(1===t&&e.e)r=e.e;else{for(;i;)r=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+r,i=i._next;r+=e.c}e.set(e.t,e.p,r,e)},fi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},pi=function(t,e,i,r){for(var n,s=this._pt;s;)n=s._next,s.p===r&&s.modifier(t,e,i),s=n},di=function(t){for(var e,i,r=this._pt;r;)i=r._next,r.p===t&&!r.op||r.op===t?Bt(this,r,"_pt"):r.dep||(e=1),r=i;return!e},_i=function(t,e,i,r){r.mSet(t,e,r.m.call(r.tween,i,r.mt),r)},mi=function(t){for(var e,i,r,n,s=t._pt;s;){for(e=s._next,i=r;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:n)?s._prev._next=s:r=s,(s._next=i)?i._prev=s:n=s,s=e}t._pt=r},gi=function(){function t(t,e,i,r,n,s,o,a,u){this.t=e,this.s=r,this.c=n,this.p=i,this.r=s||hi,this.d=o||this,this.set=a||ni,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,i){this.mSet=this.mSet||this.set,this.set=_i,this.m=t,this.mt=i,this.tween=e},t}();xt(yt+"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 ft[t]=1})),st.TweenMax=st.TweenLite=ri,st.TimelineLite=st.TimelineMax=Xe,a=new Xe({sortChildren:!1,defaults:R,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),L.stringFilter=Se;var vi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var r=t.map((function(t){return bi.quickSetter(t,e,i)})),n=r.length;return function(t){for(var e=n;e--;)r[e](t)}}t=t[0]||{};var s=_t[e],o=bt(t),a=o.harness&&(o.harness.aliases||{})[e]||e,u=s?function(e){var r=new s;p._pt=0,r.init(t,i?e+i:e,p,0,[t]),r.render(1,r),p._pt&&fi(1,p)}:o.set(t,a);return s?u:function(e){return u(t,a,i?e+i:e,o,1)}},quickTo:function(t,e,i){var r,n=bi.to(t,Pt(((r={})[e]="+=0.1",r.paused=!0,r),i||{})),s=function(t,i,r){return n.resetTo(e,t,i,r)};return s.tween=n,s},isTweening:function(t){return a.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=qe(t.ease,R.ease)),Lt(R,t||{})},config:function(t){return Lt(L,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,r=t.plugins,n=t.defaults,s=t.extendTimeline;(r||"").split(",").forEach((function(t){return t&&!_t[t]&&!st[t]&&ht(e+" effect requires "+t+" plugin.")})),mt[e]=function(t,e,r){return i(le(t),It(e||{},n),r)},s&&(Xe.prototype[e]=function(t,i,r){return this.add(mt[e](t,X(i)?i:(r=i)&&{},this),r)})},registerEase:function(t,e){Pe[t]=qe(e)},parseEase:function(t,e){return arguments.length?qe(t,e):Pe},getById:function(t){return a.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,r,n=new Xe(t);for(n.smoothChildTiming=V(t.smoothChildTiming),a.remove(n),n._dp=0,n._time=n._tTime=a._time,i=a._first;i;)r=i._next,!e&&!i._dur&&i instanceof ri&&i.vars.onComplete===i._targets[0]||Qt(n,i,i._start-i._delay),i=r;return Qt(a,n,0),n},utils:{wrap:function t(e,i,r){var n=i-e;return J(e)?me(e,t(0,e.length),i):se(r,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,i,r){var n=i-e,s=2*n;return J(e)?me(e,t(0,e.length-1),i):se(r,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:fe,random:_e,snap:de,normalize:function(t,e,i){return ve(t,e,0,1,i)},getUnit:ae,clamp:function(t,e,i){return se(i,(function(i){return oe(t,e,i)}))},splitColor:Me,toArray:le,selector:function(t){return t=le(t)[0]||ht("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return le(e,i.querySelectorAll?i:i===t?ht("Invalid scope")||l.createElement("div"):t)}},mapRange:ve,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?Ki[n]:"")+t},er=function(){"undefined"!=typeof window&&window.document&&(Ti=window,xi=Ti.document,Oi=xi.documentElement,Di=Ji("div")||{style:{}},Ji("div"),Qi=tr(Qi),Gi=Qi+"Origin",Di.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ei=!!tr("perspective"),Mi=1)},ir=function t(e){var i,r=Ji("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,o=this.style.cssText;if(Oi.appendChild(r),r.appendChild(this),this.style.display="block",e)try{i=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(i=this._gsapBBox());return n&&(s?n.insertBefore(this,s):n.appendChild(this)),Oi.removeChild(r),this.style.cssText=o,i},rr=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},nr=function(t){var e;try{e=t.getBBox()}catch(i){e=ir.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===ir||(e=ir.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+rr(t,["x","cx","x1"])||0,y:+rr(t,["y","cy","y1"])||0,width:0,height:0}},sr=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!nr(t))},or=function(t,e){if(e){var i=t.style;e in Ci&&e!==Gi&&(e=Qi),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Pi,"-$1").toLowerCase())):i.removeAttribute(e)}},ar=function(t,e,i,r,n,s){var o=new gi(t._pt,e,i,0,1,s?Wi:ji);return t._pt=o,o.b=r,o.e=n,t._props.push(i),o},ur={deg:1,rad:1,turn:1},hr=function t(e,i,r,n){var s,o,a,u,h=parseFloat(r)||0,l=(r+"").trim().substr((h+"").length)||"px",c=Di.style,f=Li.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),_=100,m="px"===n,g="%"===n;return n===l||!h||ur[n]||ur[l]?h:("px"!==l&&!m&&(h=t(e,i,r,"px")),u=e.getCTM&&sr(e),!g&&"%"!==l||!Ci[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=_+(m?l:n),o=~i.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(o=(e.ownerSVGElement||{}).parentNode),o&&o!==xi&&o.appendChild||(o=xi.body),(a=o._gsap)&&g&&a.width&&f&&a.time===Ae.time?Ot(h/a.width*_):((g||"%"===l)&&(c.position=Zi(e,"position")),o===e&&(c.position="static"),o.appendChild(Di),s=Di[d],o.removeChild(Di),c.position="absolute",f&&g&&((a=bt(o)).time=Ae.time,a.width=o[d]),Ot(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],Ot(g?h/s*_:h/100*s)))},lr=function(t,e,i,r){var n;return Mi||er(),e in zi&&"transform"!==e&&~(e=zi[e]).indexOf(",")&&(e=e.split(",")[0]),Ci[e]&&"transform"!==e?(n=br(t,r),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Tr(Zi(t,Gi))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||r||~(n+"").indexOf("calc("))&&(n=dr[e]&&dr[e](t,e,i)||Zi(t,e)||Tt(t,e)||("opacity"===e?1:0)),i&&!~(n+"").trim().indexOf(" ")?hr(t,e,n,i)+i:n},cr=function(t,e,i,r){if(!i||"none"===i){var n=tr(e,t,1),s=n&&Zi(t,n,1);s&&s!==i?(e=n,i=s):"borderColor"===e&&(i=Zi(t,"borderTopColor"))}var o,a,u,h,l,c,f,p,d,_,m,g=new gi(this._pt,t.style,e,0,1,ci),v=0,y=0;if(g.b=i,g.e=r,i+="","auto"===(r+="")&&(t.style[e]=r,r=Zi(t,e)||r,t.style[e]=i),Se(o=[i,r]),r=o[1],u=(i=o[0]).match(tt)||[],(r.match(tt)||[]).length){for(;a=tt.exec(r);)f=a[0],d=r.substring(v,a.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),f!==(c=u[y++]||"")&&(h=parseFloat(c)||0,m=c.substr((h+"").length),"="===f.charAt(1)&&(f=Dt(h,f)+m),p=parseFloat(f),_=f.substr((p+"").length),v=tt.lastIndex-_.length,_||(_=_||L.units[e]||m,v===r.length&&(r+=_,g.e+=_)),m!==_&&(h=hr(t,e,c,_)||0),g._pt={_next:g._pt,p:d||1===y?d:",",s:h,c:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});g.c=v-1;)i=a[n],Ci[i]&&(r=1,i="transformOrigin"===i?Gi:Qi),or(s,i);r&&(or(s,Qi),u&&(u.svg&&s.removeAttribute("transform"),br(s,1),u.uncache=1))}},dr={clearProps:function(t,e,i,r,n){if("isFromStart"!==n.data){var s=t._pt=new gi(t._pt,e,i,0,0,pr);return s.u=r,s.pr=-10,s.tween=n,t._props.push(i),1}}},_r=[1,0,0,1,0,0],mr={},gr=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},vr=function(t){var e=Zi(t,Qi);return gr(e)?_r:e.substr(7).match(K).map(Ot)},yr=function(t,e){var i,r,n,s,o=t._gsap||bt(t),a=t.style,u=vr(t);return o.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?_r:u:(u!==_r||t.offsetParent||t===Oi||o.svg||(n=a.display,a.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,r=t.nextSibling,Oi.appendChild(t)),u=vr(t),n?a.display=n:or(t,"display"),s&&(r?i.insertBefore(t,r):i?i.appendChild(t):Oi.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},wr=function(t,e,i,r,n,s){var o,a,u,h=t._gsap,l=n||yr(t,!0),c=h.xOrigin||0,f=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],w=l[5],b=e.split(" "),T=parseFloat(b[0])||0,x=parseFloat(b[1])||0;i?l!==_r&&(a=_*v-m*g)&&(u=T*(-m/a)+x*(_/a)-(_*w-m*y)/a,T=T*(v/a)+x*(-g/a)+(g*w-v*y)/a,x=u):(T=(o=nr(t)).x+(~b[0].indexOf("%")?T/100*o.width:T),x=o.y+(~(b[1]||b[0]).indexOf("%")?x/100*o.height:x)),r||!1!==r&&h.smooth?(y=T-c,w=x-f,h.xOffset=p+(y*_+w*g)-y,h.yOffset=d+(y*m+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=T,h.yOrigin=x,h.smooth=!!r,h.origin=e,h.originIsAbsolute=!!i,t.style[Gi]="0px 0px",s&&(ar(s,h,"xOrigin",c,T),ar(s,h,"yOrigin",f,x),ar(s,h,"xOffset",p,h.xOffset),ar(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",T+" "+x)},br=function(t,e){var i=t._gsap||new Ye(t);if("x"in i&&!e&&!i.uncache)return i;var r,n,s,o,a,u,h,l,c,f,p,d,_,m,g,v,y,w,b,T,x,O,M,D,k,E,C,S,A,I,P,R,z=t.style,F=i.scaleX<0,B="px",q="deg",N=Zi(t,Gi)||"0";return r=n=s=u=h=l=c=f=p=0,o=a=1,i.svg=!(!t.getCTM||!sr(t)),m=yr(t,i.svg),i.svg&&(D=(!i.uncache||"0px 0px"===N)&&!e&&t.getAttribute("data-svg-origin"),wr(t,D||N,!!D||i.originIsAbsolute,!1!==i.smooth,m)),d=i.xOrigin||0,_=i.yOrigin||0,m!==_r&&(w=m[0],b=m[1],T=m[2],x=m[3],r=O=m[4],n=M=m[5],6===m.length?(o=Math.sqrt(w*w+b*b),a=Math.sqrt(x*x+T*T),u=w||b?Ii(b,w)*Si:0,(c=T||x?Ii(T,x)*Si+u:0)&&(a*=Math.abs(Math.cos(c*Ai))),i.svg&&(r-=d-(d*w+_*T),n-=_-(d*b+_*x))):(R=m[6],I=m[7],C=m[8],S=m[9],A=m[10],P=m[11],r=m[12],n=m[13],s=m[14],h=(g=Ii(R,A))*Si,g&&(D=O*(v=Math.cos(-g))+C*(y=Math.sin(-g)),k=M*v+S*y,E=R*v+A*y,C=O*-y+C*v,S=M*-y+S*v,A=R*-y+A*v,P=I*-y+P*v,O=D,M=k,R=E),l=(g=Ii(-T,A))*Si,g&&(v=Math.cos(-g),P=x*(y=Math.sin(-g))+P*v,w=D=w*v-C*y,b=k=b*v-S*y,T=E=T*v-A*y),u=(g=Ii(b,w))*Si,g&&(D=w*(v=Math.cos(g))+b*(y=Math.sin(g)),k=O*v+M*y,b=b*v-w*y,M=M*v-O*y,w=D,O=k),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),o=Ot(Math.sqrt(w*w+b*b+T*T)),a=Ot(Math.sqrt(M*M+R*R)),g=Ii(O,M),c=Math.abs(g)>2e-4?g*Si:0,p=P?1/(P<0?-P:P):0),i.svg&&(D=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!gr(Zi(t,Qi)),D&&t.setAttribute("transform",D))),Math.abs(c)>90&&Math.abs(c)<270&&(F?(o*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(a*=-1,c+=c<=0?180:-180)),e=e||i.uncache,i.x=r-((i.xPercent=r&&(!e&&i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-r)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+B,i.y=n-((i.yPercent=n&&(!e&&i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+B,i.z=s+B,i.scaleX=Ot(o),i.scaleY=Ot(a),i.rotation=Ot(u)+q,i.rotationX=Ot(h)+q,i.rotationY=Ot(l)+q,i.skewX=c+q,i.skewY=f+q,i.transformPerspective=p+B,(i.zOrigin=parseFloat(N.split(" ")[2])||0)&&(z[Gi]=Tr(N)),i.xOffset=i.yOffset=0,i.force3D=L.force3D,i.renderTransform=i.svg?Dr:Ei?Mr:Or,i.uncache=0,i},Tr=function(t){return(t=t.split(" "))[0]+" "+t[1]},xr=function(t,e,i){var r=ae(e);return Ot(parseFloat(e)+parseFloat(hr(t,"x",i+"px",r)))+r},Or=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Mr(t,e)},Mr=function(t,e){var i=e||this,r=i.xPercent,n=i.yPercent,s=i.x,o=i.y,a=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,_=i.transformPerspective,m=i.force3D,g=i.target,v=i.zOrigin,y="",w="auto"===m&&t&&1!==t||!0===m;if(v&&("0deg"!==l||"0deg"!==h)){var b,T=parseFloat(h)*Ai,x=Math.sin(T),O=Math.cos(T);T=parseFloat(l)*Ai,b=Math.cos(T),s=xr(g,s,x*b*-v),o=xr(g,o,-Math.sin(T)*-v),a=xr(g,a,O*b*-v+v)}"0px"!==_&&(y+="perspective("+_+") "),(r||n)&&(y+="translate("+r+"%, "+n+"%) "),(w||"0px"!==s||"0px"!==o||"0px"!==a)&&(y+="0px"!==a||w?"translate3d("+s+", "+o+", "+a+") ":"translate("+s+", "+o+") "),"0deg"!==u&&(y+="rotate("+u+") "),"0deg"!==h&&(y+="rotateY("+h+") "),"0deg"!==l&&(y+="rotateX("+l+") "),"0deg"===c&&"0deg"===f||(y+="skew("+c+", "+f+") "),1===p&&1===d||(y+="scale("+p+", "+d+") "),g.style[Qi]=y||"translate(0, 0)"},Dr=function(t,e){var i,r,n,s,o,a=e||this,u=a.xPercent,h=a.yPercent,l=a.x,c=a.y,f=a.rotation,p=a.skewX,d=a.skewY,_=a.scaleX,m=a.scaleY,g=a.target,v=a.xOrigin,y=a.yOrigin,w=a.xOffset,b=a.yOffset,T=a.forceCSS,x=parseFloat(l),O=parseFloat(c);f=parseFloat(f),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),f+=d),f||p?(f*=Ai,p*=Ai,i=Math.cos(f)*_,r=Math.sin(f)*_,n=Math.sin(f-p)*-m,s=Math.cos(f-p)*m,p&&(d*=Ai,o=Math.tan(p-d),n*=o=Math.sqrt(1+o*o),s*=o,d&&(o=Math.tan(d),i*=o=Math.sqrt(1+o*o),r*=o)),i=Ot(i),r=Ot(r),n=Ot(n),s=Ot(s)):(i=_,s=m,r=n=0),(x&&!~(l+"").indexOf("px")||O&&!~(c+"").indexOf("px"))&&(x=hr(g,"x",l,"px"),O=hr(g,"y",c,"px")),(v||y||w||b)&&(x=Ot(x+v-(v*i+y*n)+w),O=Ot(O+y-(v*r+y*s)+b)),(u||h)&&(o=g.getBBox(),x=Ot(x+u/100*o.width),O=Ot(O+h/100*o.height)),o="matrix("+i+","+r+","+n+","+s+","+x+","+O+")",g.setAttribute("transform",o),T&&(g.style[Qi]=o)},kr=function(t,e,i,r,n){var s,o,a=360,u=W(n),h=parseFloat(n)*(u&&~n.indexOf("rad")?Si:1)-r,l=r+h+"deg";return u&&("short"===(s=n.split("_")[1])&&(h%=a)!==h%180&&(h+=h<0?a:-360),"cw"===s&&h<0?h=(h+36e9)%a-~~(h/a)*a:"ccw"===s&&h>0&&(h=(h-36e9)%a-~~(h/a)*a)),t._pt=o=new gi(t._pt,e,i,r,h,Bi),o.e=l,o.u="deg",t._props.push(i),o},Er=function(t,e){for(var i in e)t[i]=e[i];return t},Cr=function(t,e,i){var r,n,s,o,a,u,h,l=Er({},i._gsap),c=i.style;for(n in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[Qi]=e,r=br(i,1),or(i,Qi),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Qi],c[Qi]=e,r=br(i,1),c[Qi]=s),Ci)(s=l[n])!==(o=r[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(a=ae(s)!==(h=ae(o))?hr(i,n,s,h):parseFloat(s),u=parseFloat(o),t._pt=new gi(t._pt,r,n,a,u-a,Fi),t._pt.u=h||0,t._props.push(n));Er(r,l)};xt("padding,margin,Width,Radius",(function(t,e){var i="Top",r="Right",n="Bottom",s="Left",o=(e<3?[i,r,n,s]:[i+s,i+r,n+r,n+s]).map((function(i){return e<2?t+i:"border"+i+t}));dr[e>1?"border"+t:t]=function(t,e,i,r,n){var s,a;if(arguments.length<4)return s=o.map((function(e){return lr(t,e,i)})),5===(a=s.join(" ")).split(s[0]).length?s[0]:a;s=(r+"").split(" "),a={},o.forEach((function(t,e){return a[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,a,n)}}));var Sr,Ar,Ir,Pr={name:"css",register:er,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,r,n){var s,o,a,u,h,l,c,f,p,d,_,m,g,v,y,w,b,T,x,O=this._props,M=t.style,D=i.vars.startAt;for(c in Mi||er(),e)if("autoRound"!==c&&(o=e[c],!_t[c]||!Je(c,e,i,r,t,n)))if(h=typeof o,l=dr[c],"function"===h&&(h=typeof(o=o.call(i,r,t,n))),"string"===h&&~o.indexOf("random(")&&(o=ge(o)),l)l(this,t,c,o,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),o+="",Ee.lastIndex=0,Ee.test(s)||(f=ae(s),p=ae(o)),p?f!==p&&(s=hr(t,c,s,p)+p):f&&(o+=f),this.add(M,"setProperty",s,o,r,n,0,0,c),O.push(c);else if("undefined"!==h){if(D&&c in D?(s="function"==typeof D[c]?D[c].call(i,r,t,n):D[c],W(s)&&~s.indexOf("random(")&&(s=ge(s)),ae(s+"")||(s+=L.units[c]||ae(lr(t,c))||""),"="===(s+"").charAt(1)&&(s=lr(t,c))):s=lr(t,c),u=parseFloat(s),(d="string"===h&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),a=parseFloat(o),c in zi&&("autoAlpha"===c&&(1===u&&"hidden"===lr(t,"visibility")&&a&&(u=0),ar(this,M,"visibility",u?"inherit":"hidden",a?"inherit":"hidden",!a)),"scale"!==c&&"transform"!==c&&~(c=zi[c]).indexOf(",")&&(c=c.split(",")[0])),_=c in Ci)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||br(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new gi(this._pt,M,Qi,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===c)this._pt=new gi(this._pt,g,"scaleY",g.scaleY,(d?Dt(g.scaleY,d+a):a)-g.scaleY||0),O.push("scaleY",c),c+="X";else{if("transformOrigin"===c){b=void 0,T=void 0,x=void 0,b=(w=o).split(" "),T=b[0],x=b[1]||"50%","top"!==T&&"bottom"!==T&&"left"!==x&&"right"!==x||(w=T,T=x,x=w),b[0]=fr[T]||T,b[1]=fr[x]||x,o=b.join(" "),g.svg?wr(t,o,0,v,0,this):((p=parseFloat(o.split(" ")[2])||0)!==g.zOrigin&&ar(this,g,"zOrigin",g.zOrigin,p),ar(this,M,c,Tr(s),Tr(o)));continue}if("svgOrigin"===c){wr(t,o,1,v,0,this);continue}if(c in mr){kr(this,g,c,u,d?Dt(u,d+o):o);continue}if("smoothOrigin"===c){ar(this,g,"smooth",g.smooth,o);continue}if("force3D"===c){g[c]=o;continue}if("transform"===c){Cr(this,o,t);continue}}else c in M||(c=tr(c)||c);if(_||(a||0===a)&&(u||0===u)&&!Ri.test(o)&&c in M)a||(a=0),(f=(s+"").substr((u+"").length))!==(p=ae(o)||(c in L.units?L.units[c]:f))&&(u=hr(t,c,s,p)),this._pt=new gi(this._pt,_?g:M,c,u,(d?Dt(u,d+a):a)-u,_||"px"!==p&&"zIndex"!==c||!1===e.autoRound?Fi:Ni),this._pt.u=p||0,f!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=qi);else if(c in M)cr.call(this,t,c,s,d?d+o:o);else{if(!(c in t)){ut(c,o);continue}this.add(t,c,s||t[c],d?d+o:o,r,n)}O.push(c)}y&&mi(this)},get:lr,aliases:zi,getSetter:function(t,e,i){var r=zi[e];return r&&r.indexOf(",")<0&&(e=r),e in Ci&&e!==Gi&&(t._gsap.x||lr(t,"x"))?i&&ki===i?"scale"===e?Xi:Ui:(ki=i||{},"scale"===e?Vi:Hi):t.style&&!U(t.style[e])?$i:~e.indexOf("-")?Yi:ui(t,e)},core:{_removeProperty:or,_getMatrix:yr}};bi.utils.checkPrefix=tr,Ir=xt((Sr="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Ar="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Ci[t]=1})),xt(Ar,(function(t){L.units[t]="deg",mr[t]=1})),zi[Ir[13]]=Sr+","+Ar,xt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");zi[e[1]]=Ir[e[0]]})),xt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){L.units[t]="px"})),bi.registerPlugin(Pr);var Lr=bi.registerPlugin(Pr)||bi;Lr.core.Tween;function Rr(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class zr{constructor(t,e){Rr(this,"DOM",{el:null,image:null,imageInner:null,link:null,meta:null,title:null,desc:null}),this.DOM.el=t,this.preview=e,this.DOM.image=this.DOM.el.querySelector(".item__img"),this.DOM.imageInner=this.DOM.el.querySelector(".item__img-inner"),this.DOM.link=this.DOM.el.querySelector(".item__link"),this.DOM.meta=this.DOM.el.querySelector(".item__meta"),this.DOM.title=this.DOM.el.querySelector(".item__title"),this.DOM.desc=this.DOM.el.querySelector(".item__desc"),this.DOM.link.addEventListener("mouseenter",(()=>{Lr.killTweensOf(this.DOM.imageInner),Lr.to(this.DOM.imageInner,{duration:2,ease:"power4",scale:1.2})})),this.DOM.link.addEventListener("mouseleave",(()=>{Lr.killTweensOf(this.DOM.imageInner),Lr.to(this.DOM.imageInner,{duration:.7,ease:"expo",scale:1})}))}}function Fr(t,e){return Object.getOwnPropertyNames(Object(t)).reduce(((i,r)=>{const n=Object.getOwnPropertyDescriptor(Object(t),r),s=Object.getOwnPropertyDescriptor(Object(e),r);return Object.defineProperty(i,r,s||n)}),{})}function Br(t){return"string"==typeof t}function qr(t){return Array.isArray(t)}function Nr(t={}){const e=Fr(t);let i;return void 0!==e.types?i=e.types:void 0!==e.split&&(i=e.split),void 0!==i&&(e.types=(Br(i)||qr(i)?String(i):"").split(",").map((t=>String(t).trim())).filter((t=>/((line)|(word)|(char))/i.test(t)))),(e.absolute||e.position)&&(e.absolute=e.absolute||/absolute/.test(t.position)),e}function jr(t){const e=Br(t)||qr(t)?String(t):"";return{none:!e,lines:/line/i.test(e),words:/word/i.test(e),chars:/char/i.test(e)}}function Wr(t){return null!==t&&"object"==typeof t}function $r(t){return qr(t)?t:null==t?[]:function(t){return Wr(t)&&function(t){return"number"==typeof t&&t>-1&&t%1==0}(t.length)}(t)?Array.prototype.slice.call(t):[t]}function Yr(t){return Wr(t)&&/^(1|3|11)$/.test(t.nodeType)}function Ur(t){let e=t;return Br(t)&&(e=/^(#[a-z]\w+)$/.test(t.trim())?document.getElementById(t.trim().slice(1)):document.querySelectorAll(t)),$r(e).reduce(((t,e)=>[...t,...$r(e).filter(Yr)]),[])}function Xr(t,e,i){let r={},n=null;return Wr(t)&&(n=t[Xr.expando]||(t[Xr.expando]=++Xr.uid),r=Xr.cache[n]||(Xr.cache[n]={})),void 0===i?void 0===e?r:r[e]:void 0!==e?(r[e]=i,i):void 0}function Vr(t){const e=t&&t[Xr.expando];e&&(delete t[e],delete Xr.cache[e])}(()=>{function t(...t){const e=t.length;for(let i=0;i{const r=e[t],n=Br(r)?r.trim():r;null!==n&&""!==n&&("children"===t?i.append(...$r(n)):i.setAttribute(t,n))})),i):i}var hn={splitClass:"",lineClass:"line",wordClass:"word",charClass:"char",types:["lines","words","chars"],absolute:!1,tagName:"div"};function ln(t,e){const i=jr((e=Fr(hn,e)).types),r=e.tagName,n=t.nodeValue,s=document.createDocumentFragment();let o=[],a=[];return/^\s/.test(n)&&s.append(" "),o=function(t,e=" "){return(t?String(t):"").trim().replace(/\s+/g," ").split(e)}(n).reduce(((t,n,o,u)=>{let h,l;return i.chars&&(l=an(n).map((t=>{const i=un(r,{class:`${e.splitClass} ${e.charClass}`,style:"display: inline-block;",children:t});return Xr(i).isChar=!0,a=[...a,i],i}))),i.words||i.lines?(h=un(r,{class:`${e.wordClass} ${e.splitClass}`,style:"display: inline-block; "+(i.words&&e.absolute?"position: relative;":""),children:i.chars?l:n}),Xr(h).isWord=!0,Xr(h).isWordStart=!0,Xr(h).isWordEnd=!0,s.appendChild(h)):l.forEach((t=>{s.appendChild(t)})),o{const{words:r,chars:n}=cn(i,e);return{words:[...t.words,...r],chars:[...t.chars,...n]}}),r)}function fn(t){Xr(t).isWord?t.replaceWith(...t.childNodes):$r(t.children).forEach((t=>fn(t)))}function pn(t,e,i){const r=jr(e.types),n=e.tagName,s=t.getElementsByTagName("*"),o=[];let a,u,h,l=[],c=null,f=[];Xr(t).nodes=s;const p=t.parentElement,d=t.nextElementSibling,_=document.createDocumentFragment(),m=window.getComputedStyle(t),g=m.textAlign,v=.2*parseFloat(m.fontSize);return e.absolute&&(h={left:t.offsetLeft,top:t.offsetTop,width:t.offsetWidth},u=t.offsetWidth,a=t.offsetHeight,Xr(t).cssWidth=t.style.width,Xr(t).cssHeight=t.style.height),$r(s).forEach((n=>{const s=n.parentElement===t,{width:a,height:u,top:h,left:f}=function(t,e,i,r){if(!i.absolute)return{top:e?t.offsetTop:null};const n=t.offsetParent,[s,o]=r;let a=0,u=0;if(n&&n!==document.body){const t=n.getBoundingClientRect();a=t.x+s,u=t.y+o}const{width:h,height:l,x:c,y:f}=t.getBoundingClientRect();return{width:h,height:l,top:f+o-u,left:c+s-a}}(n,s,e,i);/^br$/i.test(n.nodeName)||(r.lines&&s&&((null===c||h-c>=v)&&(c=h,o.push(l=[])),l.push(n)),e.absolute&&(Xr(n).top=h,Xr(n).left=f,Xr(n).width=a,Xr(n).height=u))})),p&&p.removeChild(t),r.lines&&(f=o.map((t=>{const i=un(n,{class:`${e.splitClass} ${e.lineClass}`,style:`display: block; text-align: ${g}; width: 100%;`});Xr(i).isLine=!0;const r={height:0,top:1e4};return _.appendChild(i),t.forEach(((t,e,n)=>{const{isWordEnd:s,top:o,height:a}=Xr(t),u=n[e+1];r.height=Math.max(r.height,a),r.top=Math.min(r.top,o),i.appendChild(t),s&&Xr(u).isWordStart&&i.append(" ")})),e.absolute&&(Xr(i).height=r.height,Xr(i).top=r.top),i})),r.words||fn(_),t.replaceChildren(_)),e.absolute&&(t.style.width=`${t.style.width||u}px`,t.style.height=`${a}px`,$r(s).forEach((t=>{const{isLine:e,top:i,left:r,width:n,height:s}=Xr(t),o=Xr(t.parentElement),a=!e&&o.isLine;t.style.top=`${a?i-o.top:i}px`,t.style.left=e?`${h.left}px`:r-(a?h.left:0)+"px",t.style.height=`${s}px`,t.style.width=e?`${h.width}px`:`${n}px`,t.style.position="absolute"}))),p&&(d?p.insertBefore(t,d):p.appendChild(t)),f}let dn=Fr(hn,{});class _n{static get defaults(){return dn}static set defaults(t){dn=Fr(dn,Nr(t))}static setDefaults(t){return dn=Fr(dn,Nr(t)),hn}static revert(t){Ur(t).forEach((t=>{const{isSplit:e,html:i}=Xr(t);e&&(t.innerHTML=i||"",Xr(t).isSplit=!1,Xr(t).html=null)}))}static create(t,e){return new _n(t,e)}split(t){this.revert(),this.lines=[],this.words=[],this.chars=[];const e=[window.pageXOffset,window.pageYOffset];void 0!==t&&(this.settings=Fr(this.settings,Nr(t)));const i=jr(this.settings.types);i.none||(this.elements.forEach((t=>{Xr(t).isRoot=!0;const{words:e,chars:i}=cn(t,this.settings);this.words=[...this.words,...e],this.chars=[...this.chars,...i]})),this.elements.forEach((t=>{if(i.lines||this.settings.absolute){const i=pn(t,this.settings,e);this.lines=[...this.lines,...i]}})),this.isSplit=!0,window.scrollTo(e[0],e[1]),this.elements.forEach((t=>{$r(Xr(t).nodes).forEach(Vr),Xr(t).nodes=null})))}revert(){this.elements.forEach((t=>{const{isSplit:e,html:i,cssWidth:r,cssHeight:n}=Xr(t);e&&(t.innerHTML=i,t.style.width=r||"",t.style.height=n||"",Xr(t).isSplit=!1)})),this.isSplit&&(this.lines=null,this.words=null,this.chars=null,this.isSplit=!1)}constructor(t,e){this.isSplit=!1,this.settings=Fr(dn,Nr(e)),this.elements=Ur(t)||[],this.revert(),this.elements.forEach((t=>{Xr(t).html=t.innerHTML})),this.split()}}var mn={}; 11 | /*! 12 | * imagesLoaded v5.0.0 13 | * JavaScript is all like "You images are done yet or what?" 14 | * MIT License 15 | */!function(t,e){mn?mn=e(t,r("4hJWI")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:mn,(function(t,e){let i=t.jQuery,r=t.console;function n(t,e,s){if(!(this instanceof n))return new n(t,e,s);let o=t;var a;("string"==typeof t&&(o=document.querySelectorAll(t)),o)?(this.elements=(a=o,Array.isArray(a)?a:"object"==typeof a&&"number"==typeof a.length?[...a]:[a]),this.options={},"function"==typeof e?s=e:Object.assign(this.options,e),s&&this.on("always",s),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):r.error(`Bad element for imagesLoaded ${o||t}`)}n.prototype=Object.create(e.prototype),n.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const s=[1,9,11];n.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!s.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const o=/url\((['"])?(.*?)\1\)/gi;function a(t){this.img=t}function u(t,e){this.url=t,this.element=e,this.img=new Image}return n.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=o.exec(e.backgroundImage);for(;null!==i;){let r=i&&i[2];r&&this.addBackground(r,t),i=o.exec(e.backgroundImage)}},n.prototype.addImage=function(t){let e=new a(t);this.images.push(e)},n.prototype.addBackground=function(t,e){let i=new u(t,e);this.images.push(i)},n.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},n.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&r&&r.log(`progress: ${i}`,t,e)},n.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},a.prototype=Object.create(e.prototype),a.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)},a.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},a.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,r="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,r,e])},a.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},a.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},a.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},a.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(a.prototype),u.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},u.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},n.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new n(this,t,e).jqDeferred.promise(i(this))})},n.makeJQueryPlugin(),n}));const gn=(t,e,i)=>{t.forEach((t=>{const r=document.createElement(e);r.classList=i,t.parentNode.appendChild(r),r.appendChild(t)}))};class vn{in(t=!0){return this.isVisible=!0,Lr.killTweensOf(this.SplitTypeInstance.lines),this.inTimeline=Lr.timeline({defaults:{duration:1.1,ease:"power4.inOut"}}).addLabel("start",0).set(this.SplitTypeInstance.lines,{yPercent:105},"start"),t?this.inTimeline.to(this.SplitTypeInstance.lines,{yPercent:0,stagger:.05},"start"):this.inTimeline.set(this.SplitTypeInstance.lines,{yPercent:0},"start"),this.inTimeline}out(t=!0){return this.isVisible=!1,Lr.killTweensOf(this.SplitTypeInstance.lines),this.outTimeline=Lr.timeline({defaults:{duration:1.1,ease:"power4.inOut"}}).addLabel("start",0),t?this.outTimeline.to(this.SplitTypeInstance.lines,{yPercent:-105,stagger:.05},"start"):this.outTimeline.set(this.SplitTypeInstance.lines,{yPercent:-105},"start"),this.outTimeline}initEvents(){window.addEventListener("resize",(()=>{this.SplitTypeInstance.split(),gn(this.SplitTypeInstance.lines,"div","oh"),this.isVisible||Lr.set(this.SplitTypeInstance.lines,{yPercent:105})}))}constructor(t){Rr(this,"DOM",{el:null}),Rr(this,"SplitTypeInstance",void 0),Rr(this,"isVisible",void 0),Rr(this,"inTimeline",void 0),Rr(this,"outTimeline",void 0),this.DOM={el:t},this.SplitTypeInstance=new _n(this.DOM.el,{types:"lines"}),gn(this.SplitTypeInstance.lines,"div","oh"),this.initEvents()}}class yn{constructor(t){Rr(this,"DOM",{el:null,image:null,imageInner:null,title:null,backCtrl:null,innerElements:null,multiLineWrap:null}),Rr(this,"multiLines",[]),this.DOM.el=t,this.DOM.image=this.DOM.el.querySelector(".preview__img"),this.DOM.imageInner=this.DOM.el.querySelector(".preview__img-inner"),this.DOM.title=this.DOM.el.querySelector(".preview__title"),this.DOM.backCtrl=this.DOM.el.querySelector(".preview__back"),this.DOM.innerElements=[...this.DOM.el.querySelectorAll(".oh__inner")],this.DOM.multiLineWrap=[...this.DOM.el.querySelectorAll(".preview__column > p")],this.DOM.multiLineWrap.forEach((t=>this.multiLines.push(new vn(t))))}}const wn=document.body,bn=document.querySelector(".content"),Tn=document.querySelector(".frame"),xn=[...document.querySelectorAll(".overlay__row")],On=[];[...document.querySelectorAll(".preview")].forEach((t=>On.push(new yn(t))));const Mn=[];[...document.querySelectorAll(".item")].forEach(((t,e)=>Mn.push(new zr(t,On[e]))));for(const t of Mn)t.DOM.link.addEventListener("click",(()=>{return e=t,void Lr.timeline({defaults:{duration:1,ease:"power3.inOut"}}).add((()=>{bn.classList.add("content--hidden")}),"start").addLabel("start",0).set([e.preview.DOM.innerElements,e.preview.DOM.backCtrl],{opacity:0},"start").to(xn,{scaleY:1},"start").addLabel("content","start+=0.6").add((()=>{wn.classList.add("preview-visible"),Lr.set(Tn,{opacity:0},"start"),e.preview.DOM.el.classList.add("preview--current")}),"content").to([e.preview.DOM.image,e.preview.DOM.imageInner],{startAt:{y:t=>t?"101%":"-101%"},y:"0%"},"content").add((()=>{for(const t of e.preview.multiLines)t.in();Lr.set(e.preview.DOM.multiLineWrap,{opacity:1,delay:.1})}),"content").to(Tn,{ease:"expo",startAt:{y:"-100%",opacity:0},opacity:1,y:"0%"},"content+=0.3").to(e.preview.DOM.innerElements,{ease:"expo",startAt:{yPercent:101},yPercent:0,opacity:1},"content+=0.3").to(e.preview.DOM.backCtrl,{opacity:1},"content");var e})),t.preview.DOM.backCtrl.addEventListener("click",(()=>{return e=t,void Lr.timeline({defaults:{duration:1,ease:"power3.inOut"}}).addLabel("start",0).to(e.preview.DOM.innerElements,{yPercent:-101,opacity:0},"start").add((()=>{for(const t of e.preview.multiLines)t.out()}),"start").to(e.preview.DOM.backCtrl,{opacity:0},"start").to(e.preview.DOM.image,{y:"101%"},"start").to(e.preview.DOM.imageInner,{y:"-101%"},"start").to(Tn,{opacity:0,y:"-100%",onComplete:()=>{wn.classList.remove("preview-visible"),Lr.set(Tn,{opacity:1,y:"0%"})}},"start").addLabel("grid","start+=0.6").to(xn,{scaleY:0,onComplete:()=>{e.preview.DOM.el.classList.remove("preview--current"),bn.classList.remove("content--hidden")}},"grid");var e})); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Cover Page Transition | Codrops

Cover Page Transition

Back to the article
Previous demo
Based on Vitalii Burhonskyi's Dribbble shot
2020

Alex Moulder

I am only waiting for love to give myself up at last into his hands. That is why it is so late and why I have been guilty of such omissions.

view
2021

Aria Bennett

They come with their laws and their codes to bind me fast; but I evade them ever, for I am only waiting for love to give myself up at last into his hands.

view
2022

Jimmy Hughes

Clouds heap upon clouds and it darkens. Ah, love, why dost thou let me wait outside at the door all alone?

view

Moulder

Alex Moulder 2020

Location

And if it rains, a closed car at four. And we shall play a game of chess, pressing lidless eyes and waiting for a knock upon the door.

Material

At the violet hour, when the eyes and back, turn upward from the desk, when the human engine waits.

Bennett

Aria Bennett 2021

Location

And if it rains, a closed car at four. And we shall play a game of chess, pressing lidless eyes and waiting for a knock upon the door.

Material

At the violet hour, when the eyes and back, turn upward from the desk, when the human engine waits.

Hughes

Jimmy Hughes 2022

Location

And if it rains, a closed car at four. And we shall play a game of chess, pressing lidless eyes and waiting for a knock upon the door.

Material

At the violet hour, when the eyes and back, turn upward from the desk, when the human engine waits.

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

Cover Page Transition

21 | 22 | Back to the article 23 | 24 | 25 | 26 |
27 | Previous demo 28 |
29 |
Based on Vitalii Burhonskyi's Dribbble shot
30 |
31 |
32 |
33 | 2020 34 |

Alex Moulder

35 |
36 |

I am only waiting for love to give myself up at last into his hands. That is why it is so late and why I have been guilty of such omissions.

37 | view 38 |
39 |
40 | 2021 41 |

Aria Bennett

42 |
43 |

They come with their laws and their codes to bind me fast; but I evade them ever, for I am only waiting for love to give myself up at last into his hands.

44 | view 45 |
46 |
47 | 2022 48 |

Jimmy Hughes

49 |
50 |

Clouds heap upon clouds and it darkens. Ah, love, why dost thou let me wait outside at the door all alone?

51 | view 52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |

Moulder

62 |
63 | Alex Moulder 64 | 2020 65 |
66 |
67 |

Location

68 |

And if it rains, a closed car at four. And we shall play a game of chess, pressing lidless eyes and waiting for a knock upon the door.

69 |
70 |
71 |

Material

72 |

At the violet hour, when the eyes and back, turn upward from the desk, when the human engine waits.

73 |
74 | 75 |
76 |
77 |
78 |

Bennett

79 |
80 | Aria Bennett 81 | 2021 82 |
83 |
84 |

Location

85 |

And if it rains, a closed car at four. And we shall play a game of chess, pressing lidless eyes and waiting for a knock upon the door.

86 |
87 |
88 |

Material

89 |

At the violet hour, when the eyes and back, turn upward from the desk, when the human engine waits.

90 |
91 | 92 |
93 |
94 |
95 |

Hughes

96 |
97 | Jimmy Hughes 98 | 2022 99 |
100 |
101 |

Location

102 |

And if it rains, a closed car at four. And we shall play a game of chess, pressing lidless eyes and waiting for a knock upon the door.

103 |
104 |
105 |

Material

106 |

At the violet hour, when the eyes and back, turn upward from the desk, when the human engine waits.

107 |
108 | 109 |
110 |
111 |
112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { Item } from './item'; 3 | import { Preview } from './preview'; 4 | 5 | // body element 6 | const body = document.body; 7 | 8 | // .content element 9 | const contentEl = document.querySelector('.content'); 10 | 11 | // frame element 12 | const frameEl = document.querySelector('.frame'); 13 | 14 | // top and bottom overlay overlay elements 15 | const overlayRows = [...document.querySelectorAll('.overlay__row')]; 16 | 17 | // Preview instances array 18 | const previews = []; 19 | [...document.querySelectorAll('.preview')].forEach(preview => previews.push(new Preview(preview))); 20 | 21 | // Item instances array 22 | const items = []; 23 | [...document.querySelectorAll('.item')].forEach((item, pos) => items.push(new Item(item, previews[pos]))); 24 | 25 | const openItem = item => { 26 | 27 | gsap.timeline({ 28 | defaults: { 29 | duration: 1, 30 | ease: 'power3.inOut' 31 | } 32 | }) 33 | .add(() => { 34 | // pointer events none to the content 35 | contentEl.classList.add('content--hidden'); 36 | }, 'start') 37 | 38 | .addLabel('start', 0) 39 | .set([item.preview.DOM.innerElements, item.preview.DOM.backCtrl], { 40 | opacity: 0 41 | }, 'start') 42 | .to(overlayRows, { 43 | scaleY: 1 44 | }, 'start') 45 | 46 | .addLabel('content', 'start+=0.6') 47 | 48 | .add(() => { 49 | body.classList.add('preview-visible'); 50 | 51 | gsap.set(frameEl, { 52 | opacity: 0 53 | }, 'start') 54 | item.preview.DOM.el.classList.add('preview--current'); 55 | }, 'content') 56 | // Image animation (reveal animation) 57 | .to([item.preview.DOM.image, item.preview.DOM.imageInner], { 58 | startAt: {y: pos => pos ? '101%' : '-101%'}, 59 | y: '0%' 60 | }, 'content') 61 | 62 | .add(() => { 63 | for (const line of item.preview.multiLines) { 64 | line.in(); 65 | } 66 | gsap.set(item.preview.DOM.multiLineWrap, { 67 | opacity: 1, 68 | delay:0.1 69 | }) 70 | }, 'content') 71 | // animate frame element 72 | .to(frameEl, { 73 | ease: 'expo', 74 | startAt: {y: '-100%', opacity: 0}, 75 | opacity: 1, 76 | y: '0%' 77 | }, 'content+=0.3') 78 | .to(item.preview.DOM.innerElements, { 79 | ease: 'expo', 80 | startAt: {yPercent: 101}, 81 | yPercent: 0, 82 | opacity: 1 83 | }, 'content+=0.3') 84 | .to(item.preview.DOM.backCtrl, { 85 | opacity: 1 86 | }, 'content') 87 | 88 | }; 89 | 90 | const closeItem = item => { 91 | 92 | gsap.timeline({ 93 | defaults: { 94 | duration: 1, 95 | ease: 'power3.inOut' 96 | } 97 | }) 98 | .addLabel('start', 0) 99 | .to(item.preview.DOM.innerElements, { 100 | yPercent: -101, 101 | opacity: 0, 102 | }, 'start') 103 | .add(() => { 104 | for (const line of item.preview.multiLines) { 105 | line.out(); 106 | } 107 | }, 'start') 108 | 109 | .to(item.preview.DOM.backCtrl, { 110 | opacity: 0 111 | }, 'start') 112 | 113 | .to(item.preview.DOM.image, { 114 | y: '101%' 115 | }, 'start') 116 | .to(item.preview.DOM.imageInner, { 117 | y: '-101%' 118 | }, 'start') 119 | 120 | // animate frame element 121 | .to(frameEl, { 122 | opacity: 0, 123 | y: '-100%', 124 | onComplete: () => { 125 | body.classList.remove('preview-visible'); 126 | gsap.set(frameEl, { 127 | opacity: 1, 128 | y: '0%' 129 | }) 130 | } 131 | }, 'start') 132 | 133 | .addLabel('grid', 'start+=0.6') 134 | 135 | .to(overlayRows, { 136 | //ease: 'expo', 137 | scaleY: 0, 138 | onComplete: () => { 139 | item.preview.DOM.el.classList.remove('preview--current'); 140 | contentEl.classList.remove('content--hidden'); 141 | } 142 | }, 'grid') 143 | }; 144 | 145 | for (const item of items) { 146 | // Opens the item preview 147 | item.DOM.link.addEventListener('click', () => openItem(item)); 148 | // Closes the item preview 149 | item.preview.DOM.backCtrl.addEventListener('click', () => closeItem(item)); 150 | } 151 | -------------------------------------------------------------------------------- /src/js/item.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | 3 | /** 4 | * Class representing a Grid Item 5 | */ 6 | export class Item { 7 | // DOM elements 8 | DOM = { 9 | // main element (.item) 10 | el: null, 11 | // image element (.item__img) 12 | image: null, 13 | // image inner element (.item__img-inner) 14 | imageInner: null, 15 | // item link (.item__link) 16 | link: null, 17 | // item meta (.item__meta) 18 | meta: null, 19 | // item link (.item__title) 20 | title: null, 21 | // item link (.item__desc) 22 | desc: null, 23 | } 24 | 25 | /** 26 | * Constructor. 27 | * @param {Element} DOM_el - main element (.item) 28 | * @param {Preview} previewEl - the Preview element 29 | */ 30 | constructor(DOM_el, previewEl) { 31 | this.DOM.el = DOM_el; 32 | this.preview = previewEl; 33 | this.DOM.image = this.DOM.el.querySelector('.item__img'); 34 | this.DOM.imageInner = this.DOM.el.querySelector('.item__img-inner'); 35 | this.DOM.link = this.DOM.el.querySelector('.item__link'); 36 | this.DOM.meta = this.DOM.el.querySelector('.item__meta'); 37 | this.DOM.title = this.DOM.el.querySelector('.item__title'); 38 | this.DOM.desc = this.DOM.el.querySelector('.item__desc'); 39 | 40 | this.DOM.link.addEventListener('mouseenter', () => { 41 | gsap.killTweensOf(this.DOM.imageInner); 42 | gsap.to(this.DOM.imageInner, { 43 | duration: 2, 44 | ease: 'power4', 45 | scale: 1.2 46 | }); 47 | }); 48 | this.DOM.link.addEventListener('mouseleave', () => { 49 | gsap.killTweensOf(this.DOM.imageInner); 50 | gsap.to(this.DOM.imageInner, { 51 | duration: 0.7, 52 | ease: 'expo', 53 | scale: 1 54 | }); 55 | }); 56 | } 57 | } -------------------------------------------------------------------------------- /src/js/preview.js: -------------------------------------------------------------------------------- 1 | import { TextLinesReveal } from './textLinesReveal'; 2 | 3 | /** 4 | * Class representing a Preview 5 | */ 6 | export class Preview { 7 | // DOM elements 8 | DOM = { 9 | // main element (.preview) 10 | el: null, 11 | // image element (.preview__img) 12 | image: null, 13 | // image inner element (.preview__img-inner) 14 | imageInner: null, 15 | // title 16 | title: null, 17 | // backCtrl 18 | backCtrl: null, 19 | 20 | // oh__inner elements 21 | innerElements: null, 22 | multiLineWrap: null, 23 | }; 24 | multiLines = []; 25 | 26 | /** 27 | * Constructor. 28 | * @param {Element} DOM_el - main element (.preview) 29 | */ 30 | constructor(DOM_el) { 31 | this.DOM.el = DOM_el; 32 | this.DOM.image = this.DOM.el.querySelector('.preview__img'); 33 | this.DOM.imageInner = this.DOM.el.querySelector('.preview__img-inner'); 34 | this.DOM.title = this.DOM.el.querySelector('.preview__title'); 35 | this.DOM.backCtrl = this.DOM.el.querySelector('.preview__back'); 36 | 37 | this.DOM.innerElements = [...this.DOM.el.querySelectorAll('.oh__inner')]; 38 | // the TextLinesReveal instance (animate each text line using the SplitText library) 39 | this.DOM.multiLineWrap = [...this.DOM.el.querySelectorAll('.preview__column > p')]; 40 | this.DOM.multiLineWrap.forEach(line => this.multiLines.push(new TextLinesReveal(line))); 41 | } 42 | } -------------------------------------------------------------------------------- /src/js/textLinesReveal.js: -------------------------------------------------------------------------------- 1 | import SplitType from 'split-type'; 2 | import { wrapLines } from './utils'; 3 | import { gsap } from 'gsap'; 4 | 5 | /** 6 | * Class representing a text line element that reveals itself by animating its translateY value 7 | */ 8 | export class TextLinesReveal { 9 | // DOM elements 10 | DOM = { 11 | // main element (a text DOM element) 12 | el: null 13 | } 14 | // Split Type instance 15 | SplitTypeInstance; 16 | // Checks if the Split Type lines are visible or not 17 | isVisible; 18 | // Animation timelines 19 | inTimeline; 20 | outTimeline; 21 | 22 | /** 23 | * Constructor. 24 | * @param {Element} DOM_el - a text DOM element 25 | */ 26 | constructor(DOM_el) { 27 | this.DOM = { 28 | el: DOM_el 29 | }; 30 | 31 | this.SplitTypeInstance = new SplitType(this.DOM.el, { types: 'lines' }); 32 | // Wrap the lines (div with class .oh) 33 | // The inner child will be the one animating the transform 34 | wrapLines(this.SplitTypeInstance.lines, 'div', 'oh'); 35 | 36 | this.initEvents(); 37 | } 38 | 39 | /** 40 | * Animates the lines in. 41 | * @return {GSAP Timeline} the animation timeline 42 | * @param {Boolean} animation - with or without animation. 43 | */ 44 | in(animation = true) { 45 | // Lines are visible 46 | this.isVisible = true; 47 | 48 | gsap.killTweensOf(this.SplitTypeInstance.lines); 49 | this.inTimeline = gsap.timeline({defaults: { 50 | duration: 1.1, 51 | ease: 'power4.inOut' 52 | }}) 53 | .addLabel('start', 0) 54 | .set(this.SplitTypeInstance.lines, { 55 | yPercent: 105 56 | }, 'start'); 57 | 58 | if ( animation ) { 59 | this.inTimeline.to(this.SplitTypeInstance.lines, { 60 | yPercent: 0, 61 | stagger: 0.05 62 | }, 'start'); 63 | } 64 | else { 65 | this.inTimeline.set(this.SplitTypeInstance.lines, { 66 | yPercent: 0 67 | }, 'start'); 68 | } 69 | 70 | return this.inTimeline; 71 | } 72 | 73 | /** 74 | * Animates the lines out. 75 | * @param {Boolean} animation - with or without animation. 76 | * @return {GSAP Timeline} the animation timeline 77 | */ 78 | out(animation = true) { 79 | // Lines are invisible 80 | this.isVisible = false; 81 | 82 | gsap.killTweensOf(this.SplitTypeInstance.lines); 83 | 84 | this.outTimeline = gsap.timeline({defaults: { 85 | duration: 1.1, 86 | ease: 'power4.inOut' 87 | }}).addLabel('start', 0); 88 | 89 | if ( animation ) { 90 | this.outTimeline.to(this.SplitTypeInstance.lines, { 91 | yPercent: -105, 92 | stagger: 0.05 93 | }, 'start'); 94 | } 95 | else { 96 | this.outTimeline.set(this.SplitTypeInstance.lines, { 97 | yPercent: -105, 98 | }, 'start'); 99 | } 100 | 101 | return this.outTimeline; 102 | } 103 | 104 | /** 105 | * Initializes some events. 106 | */ 107 | initEvents() { 108 | // Re-initialize the Split Text on window resize. 109 | window.addEventListener('resize', () => { 110 | // Re-split text 111 | // https://github.com/lukePeavey/SplitType#instancesplitoptions-void 112 | this.SplitTypeInstance.split(); 113 | 114 | // Need to wrap again the new lines elements (div with class .oh) 115 | wrapLines(this.SplitTypeInstance.lines, 'div', 'oh'); 116 | 117 | // Hide the lines 118 | if ( !this.isVisible ) { 119 | gsap.set(this.SplitTypeInstance.lines, {yPercent: 105}); 120 | } 121 | }); 122 | } 123 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | /** 4 | * Preload images 5 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img' 6 | */ 7 | const preloadImages = (selector = 'img') => { 8 | return new Promise((resolve) => { 9 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 10 | }); 11 | }; 12 | 13 | /** 14 | * Wraps the elements of an array. 15 | * @param {Array} arr - the array of elements to be wrapped 16 | * @param {String} wrapType - the type of the wrap element ('div', 'span' etc) 17 | * @param {String} wrapClass - the wrap class(es) 18 | */ 19 | const wrapLines = (arr, wrapType, wrapClass) => { 20 | arr.forEach(el => { 21 | const wrapEl = document.createElement(wrapType); 22 | wrapEl.classList = wrapClass; 23 | el.parentNode.appendChild(wrapEl); 24 | wrapEl.appendChild(el); 25 | }); 26 | } 27 | 28 | export { 29 | preloadImages, 30 | wrapLines 31 | }; --------------------------------------------------------------------------------