├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.763bbef2.jpg ├── 1.94f07af4.jpg ├── 2.30f05c8a.jpg ├── 2.c9d78bbc.jpg ├── 3.01b3c39f.jpg ├── 3.28d35f27.jpg ├── 4.70e0cafc.jpg ├── 4.b86909e1.jpg ├── favicon.8e7cdcf6.ico ├── index.c89b3780.css ├── index.e8e8a74c.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg └── large │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg ├── index.html └── js ├── article.js ├── index.js ├── item.js ├── typeTransition.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 | # Kinetic Typography Page Transition 2 | 3 | A concept for a kinetic typography based page transition where background letters come into the foreground and reveal a new content level. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2021/09/KineticTypePageTransition_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=56722) 8 | 9 | [Demo](http://tympanus.net/Development/KineticTypePageTransition/) 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.763bbef2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/1.763bbef2.jpg -------------------------------------------------------------------------------- /dist/1.94f07af4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/1.94f07af4.jpg -------------------------------------------------------------------------------- /dist/2.30f05c8a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/2.30f05c8a.jpg -------------------------------------------------------------------------------- /dist/2.c9d78bbc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/2.c9d78bbc.jpg -------------------------------------------------------------------------------- /dist/3.01b3c39f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/3.01b3c39f.jpg -------------------------------------------------------------------------------- /dist/3.28d35f27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/3.28d35f27.jpg -------------------------------------------------------------------------------- /dist/4.70e0cafc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/4.70e0cafc.jpg -------------------------------------------------------------------------------- /dist/4.b86909e1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/4.b86909e1.jpg -------------------------------------------------------------------------------- /dist/favicon.8e7cdcf6.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/KineticTypePageTransition/ebe926e2f1de42950c36ff8a678321155280c1af/dist/favicon.8e7cdcf6.ico -------------------------------------------------------------------------------- /dist/index.c89b3780.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:14px}body,html{height:100%;width:100%}body{--color-text:#000;--color-text-alt:#000;--color-bg:#de5f40;--color-link:#000;--color-link-hover:#000;--color-link-alt:#000;--color-type:#000;--type-line-opacity:0.05;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);font-family:halyard-display,sans-serif;margin:0}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{background:var(--color-bg);height:100%;left:0;top:0;width:100%}.js .loading:after{animation:loaderAnim .7s linear infinite alternate forwards;background:var(--color-link);border-radius:50%;height:60px;left:50%;margin:-30px 0 0 -30px;opacity:.4;top:50%;width:60px}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{color:var(--color-link);text-decoration:underline}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a.link-alt,a:hover{text-decoration:none}a.link-alt{color:var(--color-link-alt)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid red}main{overflow:hidden;position:relative}.unbutton{background:none;border:0;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}.frame{display:flex;flex-wrap:wrap;margin-bottom:2rem;padding:1rem;position:relative;text-transform:uppercase;z-index:1000}.frame__title{font-size:1rem;margin:0 0 1rem}.frame__tagline{color:var(--color-text-alt)}.frame__links{display:inline}.frame__links a:not(:last-child){margin-right:1rem}.frame__author{display:block;margin-bottom:1rem;width:100%}.item-wrap{display:grid;grid-template-columns:50% 50%;text-transform:uppercase}.item{--base:7vh;--interval:9vh;cursor:pointer;flex:none;margin:1rem 0;padding:1rem;position:relative;width:100%;will-change:transform,opacity}.item__img{border-radius:12px;width:100%;will-change:transform}.item__caption-title{font-size:inherit}.item__caption-description{display:none}.type{align-content:center;display:grid;height:100vmax;justify-content:center;margin-top:-50vmax;position:fixed;text-align:center;text-transform:uppercase;top:50%;width:100vmax;will-change:transform}.type__line{-webkit-touch-callout:none;color:var(--color-type);font-family:quiche-sans,sans-serif;font-size:20vh;font-size:clamp(7rem,18.75vh,15rem);font-weight:700;line-height:.75;opacity:var(--type-line-opacity);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;will-change:transform,opacity}.article-wrap{align-self:end;justify-self:center;padding:1rem;top:5vh}.article,.article-wrap{pointer-events:none;position:absolute;width:100%}.article{align-items:start;display:grid;grid-template-areas:"img img" "number title" "intro intro" "desc desc";grid-template-columns:1rem 1fr;opacity:0}.article--current{opacity:1;pointer-events:auto;position:relative}.article__img-wrap{border-radius:17px 17px 0 0;grid-area:img;height:250px;margin-bottom:1rem;overflow:hidden;transform-origin:50% 100%;width:100%}.article__img{background-position:50% 35%;background-size:cover;height:100%;width:100%}.article__number{font-weight:700;grid-area:number}.article__title{pointer:default;color:var(--color-type);font-family:quiche-sans,sans-serif;font-size:8vw;font-weight:700;grid-area:title;line-height:.85;margin:1rem 0 .5rem;position:relative;text-transform:uppercase}.article__intro{font-weight:700;grid-area:intro;padding-right:2rem}.article__description{grid-area:desc;overflow:hidden;padding-right:2rem}.back{stroke:#000;background:none;border:0;cursor:pointer;left:0;margin:0 0 1rem;opacity:0;padding:0;pointer-events:none;top:0;width:50px;z-index:1000}.back svg{stroke-linecap:round}.back:focus,.back:hover{stroke:#823725;outline:none}@media screen and (min-width:53em){:root{font-size:16px}body,html{overflow:hidden}.frame{align-content:space-between;display:grid;grid-template-areas:"title author links";grid-template-columns:40% 20% 40%;left:0;margin:0;max-width:none;padding:1rem 2vw;position:fixed;text-align:left;top:0;width:100%;z-index:100}.frame__title-wrap{grid-area:title;text-align:left}.frame__title{margin:0}.frame__tagline{position:relative}.frame__author{grid-area:author;justify-self:center}.frame__links{grid-area:links;justify-self:end;padding:0}.item-wrap{align-items:center;display:flex;height:100vh;justify-content:flex-start;overflow:hidden;position:relative;width:100vw}.item{margin:auto 2vw var(--base);padding:0;width:22vw}.item:nth-child(2){margin-bottom:calc(var(--base) + var(--interval))}.item:nth-child(3){margin-bottom:calc(var(--base) + var(--interval)*2)}.item:nth-child(4){margin-bottom:calc(var(--base) + var(--interval)*3)}.item__caption-description{display:block}.back{left:calc(31vw - 140px + 1.5rem);position:absolute}.article-wrap{height:80vh;padding:0;top:20vh}.article{grid-template-areas:"... ... img ..." "number ... img ..." "... title img ..." "... intro img ..." "... desc img ...";grid-template-columns:1.5rem 30% 1fr 1.5rem;grid-template-rows:10vw 2rem 12vw auto auto;height:100%;margin:0 auto;width:calc(38vw + 280px)}.article__title{grid-column-end:4;margin:0}.article__intro{margin:1.5rem 0}.article__img-wrap{align-self:end;height:100%;margin:0;width:100%}.article__img{background-position:50% 50%}} -------------------------------------------------------------------------------- /dist/index.e8e8a74c.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},i={},r=t.parcelRequire5b73;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.parcelRequire5b73=r);var n={};r.register("6lggo",(function(t,e){!function(e,i){"function"==typeof define&&define.amd?define(i):t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},r=i[t]=i[t]||[];return-1==r.indexOf(e)&&r.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var r=i.indexOf(e);return-1!=r&&i.splice(r,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var r=this._onceEvents&&this._onceEvents[t],n=0;nt._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},Nt=function t(e){return!e||e._ts&&t(e.parent)},Ut=function(t){return t._repeat?Yt(t._tTime,t=t.duration()+t._rDelay)*t:0},Yt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Xt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Wt=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)),Wt(t),i._dirty||qt(i,t)),t},Qt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Xt(t.rawTime(),e),(!e._dur||se(0,e.totalDuration(),i)-e._tTime>1e-8)&&e.render(i,!0)),qt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&i.totalTime(i._tTime),i=i._dp;t._zTime=-1e-8}},Gt=function(t,e,i,r){return e.parent&&Bt(e),e._start=Mt((W(i)?i:i||t!==u?ie(t,i,e):t._time)+e._delay),e._end=Mt(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function(t,e,i,r,n){void 0===i&&(i="_first"),void 0===r&&(r="_last");var s,a=t[r];if(n)for(s=e[n];a&&a[n]>s;)a=a._prev;a?(e._next=a._next,a._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[r]=e,e._prev=a,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),$t(e)||(t._recent=e),r||Qt(t,e),t},Ht=function(t,e){return(at.ScrollTrigger||ht("scrollTrigger",e))&&at.ScrollTrigger.create(e,t)},Zt=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)&&p!==Ce.frame?(dt.push(t),t._lazy=[e,r],1):void 0:1},Jt=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},$t=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},Kt=function(t,e,i,r){var n=t._repeat,s=Mt(e)||0,a=t._tTime/t._tDur;return a&&!r&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:Mt(s*(n+1)+t._rDelay*n):s,a&&!r?Vt(t,t._tTime=t._tDur*a):t.parent&&Wt(t),i||qt(t.parent,t),t},te=function(t){return t instanceof We?qt(t):Kt(t,t._dur)},ee={_start:0,endTime:ct,totalDuration:ct},ie=function t(e,i,r){var n,s,a,o=e.labels,u=e._recent||ee,h=e.duration()>=1e8?u.endTime(!1):e._dur;return Y(i)&&(isNaN(i)||i in o)?(s=i.charAt(0),a="%"===i.substr(-1),n=i.indexOf("="),"<"===s||">"===s?(n>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(a?(n<0?u:r).totalDuration()/100:1)):n<0?(i in o||(o[i]=h),o[i]):(s=parseFloat(i.charAt(n-1)+i.substr(n+1)),a&&r&&(s=s/100*($(r)?r[0]:r).totalDuration()),n>1?t(e,i.substr(0,n-1),r)+s:h+s)):null==i?h:+i},re=function(t,e,i){var r,n,s=W(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=i,t){for(r=o,n=i;n&&!("immediateRender"in r);)r=n.vars.defaults||{},n=G(n.vars.inherit)&&n.parent;o.immediateRender=G(r.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new ti(e[0],o,e[a+1])},ne=function(t,e){return t||0===t?e(t):e},se=function(t,e,i){return ie?e:i},ae=function(t){if("string"!=typeof t)return"";var e=st.exec(t);return e?t.substr(e.index+e[0].length):""},oe=[].slice,ue=function(t,e){return t&&Q(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&Q(t[0]))&&!t.nodeType&&t!==h},he=function(t,e,i){return!Y(t)||i||!l&&Se()?$(t)?function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var r;return Y(t)&&!e||ue(t,1)?(r=i).push.apply(r,he(t)):i.push(t)}))||i}(t,i):ue(t)?oe.call(t,0):t?[t]:[]:oe.call((e||f).querySelectorAll(t),0)},le=function(t){return t.sort((function(){return.5-Math.random()}))},fe=function(t){if(X(t))return t;var e=Q(t)?t:{each:t},i=Be(e.ease),r=e.from||0,n=parseFloat(e.base)||0,s={},a=r>0&&r<1,o=isNaN(r)||a,u=e.axis,h=r,l=r;return Y(r)?h=l={center:.5,edges:.5,end:1}[r]||0:!a&&o&&(h=r[0],l=r[1]),function(t,a,f){var c,p,d,_,m,g,v,y,w,b=(f||e).length,x=s[b];if(!x){if(!(w="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=f[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),x.b=b<0?n-b:n,x.u=ae(e.amount||e.each)||0,i=i&&b<0?ze(i):i}return b=(x[t]-x.min)/x.max||0,Mt(x.b+(i?i(b):b)*x.v)+x.u}},ce=function(t){var e=t<1?Math.pow(10,(t+"").length-2):1;return function(i){var r=Math.round(parseFloat(i)/t)*t*e;return(r-r%1)/e+(W(i)?0:ae(i))}},pe=function(t,e){var i,r,n=$(t);return!n&&Q(t)&&(i=n=t.radius||1e8,t.values?(t=he(t.values),(r=!W(t[0]))&&(i*=i)):t=ce(t.increment)),ne(e,n?X(t)?function(e){return r=t(e),Math.abs(r-e)<=i?r:e}:function(e){for(var n,s,a=parseFloat(r?e.x:e),o=parseFloat(r?e.y:0),u=1e8,h=0,l=t.length;l--;)(n=r?(n=t[l].x-a)*n+(s=t[l].y-o)*s:Math.abs(t[l]-a))(n=Math.abs(n))&&(s=r,o=n);return s},ye=function(t,e,i){var r,n,s=t.vars,a=s[e];if(a)return r=s[e+"Params"],n=s.callbackScope||t,i&&dt.length&&kt(),r?a.apply(n,r):a.call(n)},we=function(t){return Bt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&ye(t,"onInterrupt"),t},be=function(t){var e=(t=!t.name&&t.default||t).name,i=X(t),r=e&&!i&&t.init?function(){this._props=[]}:t,n={init:ct,render:hi,add:Ge,kill:fi,modifier:li,rawVars:0},s={targetTest:0,get:0,getSetter:si,aliases:{},register:0};if(Se(),t!==r){if(mt[e])return;St(r,St(Rt(t,n),s)),It(r.prototype,It(n,Rt(t,s))),mt[r.prop=e]=r,t.targetTest&&(yt.push(r),pt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}ft(e,r),t.register&&t.register(vi,r,di)},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]},Te=function(t,e,i){return 255*(6*(t=t<0?t+1:t>1?t-1:t)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)+.5|0},Oe=function(t,e,i){var r,n,s,a,o,u,h,l,f,c,p=t?W(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=c=t.match(K),e){if(~t.indexOf("="))return p=t.match(tt),i&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,r=2*(u=+p[2]/100)-(n=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=Te(a+1/3,r,n),p[1]=Te(a,r,n),p[2]=Te(a-1/3,r,n);else p=t.match(K)||xe.transparent;p=p.map(Number)}return e&&!c&&(r=p[0]/255,n=p[1]/255,s=p[2]/255,u=((h=Math.max(r,n,s))+(l=Math.min(r,n,s)))/2,h===l?a=o=0:(f=h-l,o=u>.5?f/(2-h-l):f/(h+l),a=h===r?(n-s)/f+(nT&&(M+=a-O),((i=(n=(D+=a)-M)-A)>0||o)&&(s=++y.frame,w=n-1e3*y.time,y.time=n/=1e3,A+=i+(i>=k?4:k-i),r=1),o||(m=g(t)),r)for(b=0;b=e&&b--},_listeners:E=[]}),Se=function(){return!_&&Ce.wake()},Pe={},Ie=/^[\d.\-M][\d.\-,\s]/,Le=/["']/g,Re=function(t){for(var e,i,r,n={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,u=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[Re(s[1])]:(e=t,i=e.indexOf("(")+1,r=e.indexOf(")"),n=e.indexOf("(",i),e.substring(i,~n&&n=1?i:1,s=(r||(e?.3:.45))/(i<1?i:1),a=s/F*(Math.asin(1/n)||0),o=function(t){return 1===t?1:n*Math.pow(2,-10*t)*U((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:je(o);return s=F/s,u.config=function(i,r){return t(e,i,r)},u},Ue=function t(e,i){void 0===i&&(i=1.70158);var r=function(t){return t?--t*t*((i+1)*t+i)+1:0},n="out"===e?r:"in"===e?function(t){return 1-r(1-t)}:je(r);return n.config=function(i){return t(e,i)},n};Ot("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;qe(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,qe("Elastic",Ne("in"),Ne("out"),Ne()),S=7.5625,I=1/(P=2.75),qe("Bounce",(function(t){return 1-L(1-t)}),L=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,Kt(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Se(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(Vt(this,t),!i._dp||i.parent||Qt(i,this);i.parent;)i.parent._time!==i._start+(i._ts>=0?i._tTime/i._ts:(i.totalDuration()-i._tTime)/-i._ts)&&i.totalTime(i._tTime,!0),i=i.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&Gt(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&1e-8===Math.abs(this._zTime)||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),At(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+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?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?Xt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,jt(this.totalTime(se(-this._delay,this._tDur,e),!0))},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):(Se(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&1e-8!==Math.abs(this._zTime)&&(this._tTime-=1e-8)))),this):this._ps},e.startTime=function(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return e&&(e._sort||!this.parent)&&Gt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(G(t)?this.totalDuration():this.duration())/Math.abs(this._ts)},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?Xt(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,te(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,te(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(ie(this,t),G(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,G(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,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=X(t)?t:Ct,n=function(){var t=e.then;e.then=null,X(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(){we(this)},t}();St(Xe.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var We=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=G(e.sortChildren),u&&Gt(e.parent||u,s(r),i),e.reversed&&r.reverse(),e.paused&&r.paused(!0),e.scrollTrigger&&Ht(s(r),e.scrollTrigger),r}a(e,t);var i=e.prototype;return i.to=function(t,e,i){return re(0,arguments,this),this},i.from=function(t,e,i){return re(1,arguments,this),this},i.fromTo=function(t,e,i,r){return re(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 ti(t,e,ie(this,i),1),this},i.call=function(t,e,i){return Gt(this,ti.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,r,n,s,a){return i.duration=e,i.stagger=i.stagger||r,i.onComplete=s,i.onCompleteParams=a,i.parent=this,new ti(t,i,ie(this,n)),this},i.staggerFrom=function(t,e,i,r,n,s,a){return i.runBackwards=1,zt(i).immediateRender=G(i.immediateRender),this.staggerTo(t,e,i,r,n,s,a)},i.staggerFromTo=function(t,e,i,r,n,s,a,o){return r.startAt=i,zt(r).immediateRender=G(r.immediateRender),this.staggerTo(t,e,r,n,s,a,o)},i.render=function(t,e,i){var r,n,s,a,o,h,l,f,c,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=this!==u&&t>g-1e-8&&t>=0?g:t<1e-8?0:t,w=this._zTime<0!=t<0&&(this._initted||!v);if(y!==this._tTime||i||w){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),r=y,c=this._start,h=!(f=this._ts),w&&(v||(m=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(d=this._yoyo,o=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,i);if(r=Mt(y%o),y===g?(a=this._repeat,r=v):((a=~~(y/o))&&a===y/o&&(r=v,a--),r>v&&(r=v)),p=Yt(this._tTime,o),!m&&this._tTime&&p!==a&&(p=a),d&&1&a&&(r=v-r,_=1),a!==p&&!this._lock){var b=d&&1&p,x=b===(d&&1&a);if(ae)for(r=t._first;r&&r._start<=i;){if(!r._dur&&"isPause"===r.data&&r._start>e)return r;r=r._next}else for(r=t._last;r&&r._start>=i;){if(!r._dur&&"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 T=t<0?t:r;n;){if(s=n._prev,(n._act||T<=n._end)&&n._ts&&l!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(T-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(T-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!h){l=0,s&&(y+=this._zTime=T?-1e-8:1e-8);break}}n=s}}if(l&&!e&&(this.pause(),l.render(r>=m?0:-1e-8)._zTime=r>=m?1:-1,this._ts))return this._start=c,Wt(this),this.render(t,e,i);this._onUpdate&&!e&&ye(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&m)&&(c!==this._start&&Math.abs(f)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Bt(this,1),e||t<0&&!m||!y&&!m&&g||(ye(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(W(e)||(e=ie(this,e,t)),!(t instanceof Xe)){if($(t))return t.forEach((function(t){return i.add(t,e)})),this;if(Y(t))return this.addLabel(t,e);if(!X(t))return this;t=ti.delayedCall(0,t)}return this!==t?Gt(this,t,e):this},i.getChildren=function(t,e,i,r){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===r&&(r=-1e8);for(var n=[],s=this._first;s;)s._start>=r&&(s instanceof ti?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):X(t)?this.killTweensOf(t):(Ft(this,t),t===this._recent&&(this._recent=this._last),qt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Mt(Ce.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]=ie(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var r=ti.delayedCall(0,e||ct,i);return r.data="isPause",this._hasPause=1,Gt(this,r,ie(this,t))},i.removePause=function(t){var e=this._first;for(t=ie(this,t);e;)e._start===t&&"isPause"===e.data&&Bt(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=he(t),s=this._first,a=W(e);s;)s instanceof ti?Dt(s._targets,n)&&(a?(!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=ie(r,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=ti.to(r,St({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:r._time))/r.timeScale())||1e-8,onStart:function(){if(r.pause(),!i){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:r._time))/r.timeScale());l._dur!==t&&Kt(l,t,0,1).render(l._time,!0,!0),i=1}o&&o.apply(l,u||[])}},e));return h?l.render(0):l},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,St({startAt:{time:ie(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),ve(this,ie(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),ve(this,ie(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 qt(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={}),qt(this)},i.totalDuration=function(t){var e,i,r,n=0,s=this,a=s._last,o=1e8;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(r=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,Gt(s,a,i-a._delay,1)._lock=0):o=i,i<0&&a._ts&&(n-=i,(!r&&!s._dp||r&&r.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),o=0),a._end>n&&a._ts&&(n=a._end),a=e;Kt(s,s===u&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(u._ts&&(At(u,Xt(t,u)),p=Ce.frame),Ce.frame>=vt){vt+=R.autoSleep||120;var e=u._first;if((!e||!e._ts)&&R.autoSleep&&Ce._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Ce.sleep()}}},e}(Xe);St(We.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ve,Qe=function(t,e,i,r,n,s,a){var o,u,h,l,f,c,p,d,_=new di(this._pt,t,e,0,1,ui,null,n),m=0,g=0;for(_.b=i,_.e=r,i+="",(p=~(r+="").indexOf("random("))&&(r=me(r)),s&&(s(d=[i,r],t,e),i=d[0],r=d[1]),u=i.match(it)||[];o=it.exec(r);)l=o[0],f=r.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-c,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m0&&!E&&(e._startAt=0),C&&i<=0)return void(i&&(e._zTime=i))}else!1===E&&(e._startAt=0);else if(D&&C)if(S)!E&&(e._startAt=0);else if(i&&(b=!1),s=St({overwrite:!1,data:"isFromStart",lazy:b&&G(x),immediateRender:b,stagger:0,parent:I},r),m&&(s[c.prop]=m),Bt(e._startAt=ti.set(P,s)),i<0&&e._startAt.render(-1,!0),b){if(!i)return}else t(e._startAt,1e-8);for(e._pt=0,x=C&&G(x)||x&&!C,n=0;n":e*b)}))})):T.forEach((function(t){return h.to(A,t,">")}));else{if(c=A.length,_=b?fe(b):ct,Q(b))for(p in b)~$e.indexOf(p)&&(m||(m={}),m[p]=b[p]);for(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(a=d+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*a+t,e,i);if(r=Mt(_%a),_===p?(s=this._repeat,r=d):((s=~~(_/a))&&s===_/a&&(r=d,s--),r>d&&(r=d)),(u=this._yoyo&&1&s)&&(f=this._yEase,r=d-r),o=Yt(this._tTime,a),r===c&&!i&&this._initted)return this;s!==o&&(l&&this._yEase&&Fe(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(Mt(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(Zt(this,t<0?t:r,i,e))return this._tTime=0,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=(f||this._ease)(r/d),this._from&&(this.ratio=h=1-h),r&&!c&&!e&&(ye(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*h,e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),ye(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&ye(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)&&Bt(this,1),e||t<0&&!c||!_&&!c||(ye(this,_===p?"onComplete":"onReverseComplete",!0),this._prom&&!(_0)&&this._prom()))}}else!function(t,e,i,r){var n,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&Jt(t)&&(t._initted||!$t(t))||(t._ts<0||t._dp._ts<0)&&!$t(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=se(0,t._tDur,e),s=Yt(l,h),a=Yt(t._tTime,h),t._yoyo&&1&s&&(u=1-u),s!==a&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||r||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&Zt(t,e,r,i))return;for(a=t._zTime,t._zTime=e||(i?1e-8:0),i||(i=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&ye(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&ye(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Bt(t,1),i||(ye(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.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?we(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ve&&!0!==Ve.vars.overwrite)._first||we(this),this.parent&&i!==this.timeline.totalDuration()&&Kt(this,this._dur*this.timeline._tDur/i,0,1),this}var r,n,s,a,o,u,h,l=this._targets,f=t?he(t):l,c=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,f))return"all"===e&&(this._pt=0),we(this);for(r=this._op=this._op||[],"all"!==e&&(Y(e)&&(o={},Ot(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,r,n,s,a=t[0]?xt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(r in i=It({},e),o)if(r in i)for(n=(s=o[r].split(",")).length;n--;)i[s[n]]=i[r];return i}(l,e)),h=l.length;h--;)if(~f.indexOf(l[h]))for(o in n=c[h],"all"===e?(r[h]=e,a=n,s={}):(s=r[h]=r[h]||{},a=e),a)(u=n&&n[o])&&("kill"in u.d&&!0!==u.d.kill(o)||Ft(this,u,"_pt"),delete n[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&we(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return re(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 re(2,arguments)},e.set=function(t,i){return i.duration=0,i.repeatDelay||(i.repeat=0),new e(t,i)},e.killTweensOf=function(t,e,i){return u.killTweensOf(t,e,i)},e}(Xe);St(ti.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Ot("staggerTo,staggerFrom,staggerFromTo",(function(t){ti[t]=function(){var e=new We,i=oe.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var ei=function(t,e,i){return t[e]=i},ii=function(t,e,i){return t[e](i)},ri=function(t,e,i,r){return t[e](r.fp,i)},ni=function(t,e,i){return t.setAttribute(e,i)},si=function(t,e){return X(t[e])?ii:V(t[e])&&t.setAttribute?ni:ei},ai=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},oi=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ui=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)},hi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},li=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},fi=function(t){for(var e,i,r=this._pt;r;)i=r._next,r.p===t&&!r.op||r.op===t?Ft(this,r,"_pt"):r.dep||(e=1),r=i;return!e},ci=function(t,e,i,r){r.mSet(t,e,r.m.call(r.tween,i,r.mt),r)},pi=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},di=function(){function t(t,e,i,r,n,s,a,o,u){this.t=e,this.s=r,this.c=n,this.p=i,this.r=s||ai,this.d=a||this,this.set=o||ei,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=ci,this.m=t,this.mt=i,this.tween=e},t}();Ot(wt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",(function(t){return pt[t]=1})),at.TweenMax=at.TweenLite=ti,at.TimelineLite=at.TimelineMax=We,u=new We({sortChildren:!1,defaults:z,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),R.stringFilter=Ee;var _i={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var r=t.map((function(t){return vi.quickSetter(t,e,i)})),n=r.length;return function(t){for(var e=n;e--;)r[e](t)}}t=t[0]||{};var s=mt[e],a=xt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var r=new s;d._pt=0,r.init(t,i?e+i:e,d,0,[t]),r.render(1,r),d._pt&&hi(1,d)}:a.set(t,o);return s?u:function(e){return u(t,o,i?e+i:e,a,1)}},isTweening:function(t){return u.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Be(t.ease,z.ease)),Lt(z,t||{})},config:function(t){return Lt(R,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&&!mt[t]&&!at[t]&<(e+" effect requires "+t+" plugin.")})),gt[e]=function(t,e,r){return i(he(t),St(e||{},n),r)},s&&(We.prototype[e]=function(t,i,r){return this.add(gt[e](t,Q(i)?i:(r=i)&&{},this),r)})},registerEase:function(t,e){Pe[t]=Be(e)},parseEase:function(t,e){return arguments.length?Be(t,e):Pe},getById:function(t){return u.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,r,n=new We(t);for(n.smoothChildTiming=G(t.smoothChildTiming),u.remove(n),n._dp=0,n._time=n._tTime=u._time,i=u._first;i;)r=i._next,!e&&!i._dur&&i instanceof ti&&i.vars.onComplete===i._targets[0]||Gt(n,i,i._start-i._delay),i=r;return Gt(u,n,0),n},utils:{wrap:function t(e,i,r){var n=i-e;return $(e)?_e(e,t(0,e.length),i):ne(r,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,i,r){var n=i-e,s=2*n;return $(e)?_e(e,t(0,e.length-1),i):ne(r,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:fe,random:de,snap:pe,normalize:function(t,e,i){return ge(t,e,0,1,i)},getUnit:ae,clamp:function(t,e,i){return ne(i,(function(i){return se(t,e,i)}))},splitColor:Oe,toArray:he,selector:function(t){return t=he(t)[0]||lt("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return he(e,i.querySelectorAll?i:i===t?lt("Invalid scope")||f.createElement("div"):t)}},mapRange:ge,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?Zi[n]:"")+t},$i=function(){"undefined"!=typeof window&&window.document&&(yi=window,wi=yi.document,bi=wi.documentElement,Ti=Gi("div")||{style:{}},Gi("div"),Vi=Ji(Vi),Qi=Vi+"Origin",Ti.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Mi=!!Ji("perspective"),xi=1)},Ki=function t(e){var i,r=Gi("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(bi.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)),bi.removeChild(r),this.style.cssText=a,i},tr=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},er=function(t){var e;try{e=t.getBBox()}catch(i){e=Ki.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===Ki||(e=Ki.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+tr(t,["x","cx","x1"])||0,y:+tr(t,["y","cy","y1"])||0,width:0,height:0}},ir=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!er(t))},rr=function(t,e){if(e){var i=t.style;e in Di&&e!==Qi&&(e=Vi),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Ci,"-$1").toLowerCase())):i.removeAttribute(e)}},nr=function(t,e,i,r,n,s){var a=new di(t._pt,e,i,0,1,s?qi:Bi);return t._pt=a,a.b=r,a.e=n,t._props.push(i),a},sr={deg:1,rad:1,turn:1},ar=function t(e,i,r,n){var s,a,o,u,h=parseFloat(r)||0,l=(r+"").trim().substr((h+"").length)||"px",f=Ti.style,c=Si.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(c?"Width":"Height"),_=100,m="px"===n,g="%"===n;return n===l||!h||sr[n]||sr[l]?h:("px"!==l&&!m&&(h=t(e,i,r,"px")),u=e.getCTM&&ir(e),!g&&"%"!==l||!Di[i]&&!~i.indexOf("adius")?(f[c?"width":"height"]=_+(m?l:n),a=~i.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==wi&&a.appendChild||(a=wi.body),(o=a._gsap)&&g&&o.width&&c&&o.time===Ce.time?Mt(h/o.width*_):((g||"%"===l)&&(f.position=Hi(e,"position")),a===e&&(f.position="static"),a.appendChild(Ti),s=Ti[d],a.removeChild(Ti),f.position="absolute",c&&g&&((o=xt(a)).time=Ce.time,o.width=a[d]),Mt(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[c?"width":"height"]:e[d],Mt(g?h/s*_:h/100*s)))},or=function(t,e,i,r){var n;return xi||$i(),e in Ii&&"transform"!==e&&~(e=Ii[e]).indexOf(",")&&(e=e.split(",")[0]),Di[e]&&"transform"!==e?(n=vr(t,r),n="transformOrigin"!==e?n[e]:n.svg?n.origin:yr(Hi(t,Qi))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||r||~(n+"").indexOf("calc("))&&(n=fr[e]&&fr[e](t,e,i)||Hi(t,e)||Tt(t,e)||("opacity"===e?1:0)),i&&!~(n+"").trim().indexOf(" ")?ar(t,e,n,i)+i:n},ur=function(t,e,i,r){if(!i||"none"===i){var n=Ji(e,t,1),s=n&&Hi(t,n,1);s&&s!==i?(e=n,i=s):"borderColor"===e&&(i=Hi(t,"borderTopColor"))}var a,o,u,h,l,f,c,p,d,_,m,g,v=new di(this._pt,t.style,e,0,1,ui),y=0,w=0;if(v.b=i,v.e=r,i+="","auto"===(r+="")&&(t.style[e]=r,r=Hi(t,e)||r,t.style[e]=i),Ee(a=[i,r]),r=a[1],u=(i=a[0]).match(et)||[],(r.match(et)||[]).length){for(;o=et.exec(r);)c=o[0],d=r.substring(y,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),c!==(f=u[w++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),(g="="===c.charAt(1)?+(c.charAt(0)+"1"):0)&&(c=c.substr(2)),p=parseFloat(c),_=c.substr((p+"").length),y=et.lastIndex-_.length,_||(_=_||R.units[e]||m,y===r.length&&(r+=_,v.e+=_)),m!==_&&(h=ar(t,e,f,_)||0),v._pt={_next:v._pt,p:d||1===w?d:",",s:h,c:g?g*p:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});v.c=y-1;)i=o[n],Di[i]&&(r=1,i="transformOrigin"===i?Qi:Vi),rr(s,i);r&&(rr(s,Vi),u&&(u.svg&&s.removeAttribute("transform"),vr(s,1),u.uncache=1))}},fr={clearProps:function(t,e,i,r,n){if("isFromStart"!==n.data){var s=t._pt=new di(t._pt,e,i,0,0,lr);return s.u=r,s.pr=-10,s.tween=n,t._props.push(i),1}}},cr=[1,0,0,1,0,0],pr={},dr=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},_r=function(t){var e=Hi(t,Vi);return dr(e)?cr:e.substr(7).match(tt).map(Mt)},mr=function(t,e){var i,r,n,s,a=t._gsap||xt(t),o=t.style,u=_r(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?cr:u:(u!==cr||t.offsetParent||t===bi||a.svg||(n=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,r=t.nextSibling,bi.appendChild(t)),u=_r(t),n?o.display=n:rr(t,"display"),s&&(r?i.insertBefore(t,r):i?i.appendChild(t):bi.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},gr=function(t,e,i,r,n,s){var a,o,u,h=t._gsap,l=n||mr(t,!0),f=h.xOrigin||0,c=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],w=l[5],b=e.split(" "),x=parseFloat(b[0])||0,T=parseFloat(b[1])||0;i?l!==cr&&(o=_*v-m*g)&&(u=x*(-m/o)+T*(_/o)-(_*w-m*y)/o,x=x*(v/o)+T*(-g/o)+(g*w-v*y)/o,T=u):(x=(a=er(t)).x+(~b[0].indexOf("%")?x/100*a.width:x),T=a.y+(~(b[1]||b[0]).indexOf("%")?T/100*a.height:T)),r||!1!==r&&h.smooth?(y=x-f,w=T-c,h.xOffset=p+(y*_+w*g)-y,h.yOffset=d+(y*m+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=x,h.yOrigin=T,h.smooth=!!r,h.origin=e,h.originIsAbsolute=!!i,t.style[Qi]="0px 0px",s&&(nr(s,h,"xOrigin",f,x),nr(s,h,"yOrigin",c,T),nr(s,h,"xOffset",p,h.xOffset),nr(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",x+" "+T)},vr=function(t,e){var i=t._gsap||new Ye(t);if("x"in i&&!e&&!i.uncache)return i;var r,n,s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,w,b,x,T,O,M,D,k,A,E,C,S,P,I,L,z=t.style,F=i.scaleX<0,B="px",q="deg",j=Hi(t,Qi)||"0";return r=n=s=u=h=l=f=c=p=0,a=o=1,i.svg=!(!t.getCTM||!ir(t)),m=mr(t,i.svg),i.svg&&(D=(!i.uncache||"0px 0px"===j)&&!e&&t.getAttribute("data-svg-origin"),gr(t,D||j,!!D||i.originIsAbsolute,!1!==i.smooth,m)),d=i.xOrigin||0,_=i.yOrigin||0,m!==cr&&(w=m[0],b=m[1],x=m[2],T=m[3],r=O=m[4],n=M=m[5],6===m.length?(a=Math.sqrt(w*w+b*b),o=Math.sqrt(T*T+x*x),u=w||b?Ei(b,w)*ki:0,(f=x||T?Ei(x,T)*ki+u:0)&&(o*=Math.abs(Math.cos(f*Ai))),i.svg&&(r-=d-(d*w+_*x),n-=_-(d*b+_*T))):(L=m[6],P=m[7],E=m[8],C=m[9],S=m[10],I=m[11],r=m[12],n=m[13],s=m[14],h=(g=Ei(L,S))*ki,g&&(D=O*(v=Math.cos(-g))+E*(y=Math.sin(-g)),k=M*v+C*y,A=L*v+S*y,E=O*-y+E*v,C=M*-y+C*v,S=L*-y+S*v,I=P*-y+I*v,O=D,M=k,L=A),l=(g=Ei(-x,S))*ki,g&&(v=Math.cos(-g),I=T*(y=Math.sin(-g))+I*v,w=D=w*v-E*y,b=k=b*v-C*y,x=A=x*v-S*y),u=(g=Ei(b,w))*ki,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),a=Mt(Math.sqrt(w*w+b*b+x*x)),o=Mt(Math.sqrt(M*M+L*L)),g=Ei(O,M),f=Math.abs(g)>2e-4?g*ki:0,p=I?1/(I<0?-I:I):0),i.svg&&(D=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!dr(Hi(t,Vi)),D&&t.setAttribute("transform",D))),Math.abs(f)>90&&Math.abs(f)<270&&(F?(a*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),i.x=r-((i.xPercent=r&&(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&&(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=Mt(a),i.scaleY=Mt(o),i.rotation=Mt(u)+q,i.rotationX=Mt(h)+q,i.rotationY=Mt(l)+q,i.skewX=f+q,i.skewY=c+q,i.transformPerspective=p+B,(i.zOrigin=parseFloat(j.split(" ")[2])||0)&&(z[Qi]=yr(j)),i.xOffset=i.yOffset=0,i.force3D=R.force3D,i.renderTransform=i.svg?Tr:Mi?xr:br,i.uncache=0,i},yr=function(t){return(t=t.split(" "))[0]+" "+t[1]},wr=function(t,e,i){var r=ae(e);return Mt(parseFloat(e)+parseFloat(ar(t,"x",i+"px",r)))+r},br=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,xr(t,e)},xr=function(t,e){var i=e||this,r=i.xPercent,n=i.yPercent,s=i.x,a=i.y,o=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,f=i.skewX,c=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,x=parseFloat(h)*Ai,T=Math.sin(x),O=Math.cos(x);x=parseFloat(l)*Ai,b=Math.cos(x),s=wr(g,s,T*b*-v),a=wr(g,a,-Math.sin(x)*-v),o=wr(g,o,O*b*-v+v)}"0px"!==_&&(y+="perspective("+_+") "),(r||n)&&(y+="translate("+r+"%, "+n+"%) "),(w||"0px"!==s||"0px"!==a||"0px"!==o)&&(y+="0px"!==o||w?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+") "),"0deg"!==u&&(y+="rotate("+u+") "),"0deg"!==h&&(y+="rotateY("+h+") "),"0deg"!==l&&(y+="rotateX("+l+") "),"0deg"===f&&"0deg"===c||(y+="skew("+f+", "+c+") "),1===p&&1===d||(y+="scale("+p+", "+d+") "),g.style[Vi]=y||"translate(0, 0)"},Tr=function(t,e){var i,r,n,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,c=o.rotation,p=o.skewX,d=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,w=o.xOffset,b=o.yOffset,x=o.forceCSS,T=parseFloat(l),O=parseFloat(f);c=parseFloat(c),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),c+=d),c||p?(c*=Ai,p*=Ai,i=Math.cos(c)*_,r=Math.sin(c)*_,n=Math.sin(c-p)*-m,s=Math.cos(c-p)*m,p&&(d*=Ai,a=Math.tan(p-d),n*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),i*=a=Math.sqrt(1+a*a),r*=a)),i=Mt(i),r=Mt(r),n=Mt(n),s=Mt(s)):(i=_,s=m,r=n=0),(T&&!~(l+"").indexOf("px")||O&&!~(f+"").indexOf("px"))&&(T=ar(g,"x",l,"px"),O=ar(g,"y",f,"px")),(v||y||w||b)&&(T=Mt(T+v-(v*i+y*n)+w),O=Mt(O+y-(v*r+y*s)+b)),(u||h)&&(a=g.getBBox(),T=Mt(T+u/100*a.width),O=Mt(O+h/100*a.height)),a="matrix("+i+","+r+","+n+","+s+","+T+","+O+")",g.setAttribute("transform",a),x&&(g.style[Vi]=a)},Or=function(t,e,i,r,n,s){var a,o,u=360,h=Y(n),l=parseFloat(n)*(h&&~n.indexOf("rad")?ki:1),f=s?l*s:l-r,c=r+f+"deg";return h&&("short"===(a=n.split("_")[1])&&(f%=u)!==f%180&&(f+=f<0?u:-360),"cw"===a&&f<0?f=(f+36e9)%u-~~(f/u)*u:"ccw"===a&&f>0&&(f=(f-36e9)%u-~~(f/u)*u)),t._pt=o=new di(t._pt,e,i,r,f,Ri),o.e=c,o.u="deg",t._props.push(i),o},Mr=function(t,e){for(var i in e)t[i]=e[i];return t},Dr=function(t,e,i){var r,n,s,a,o,u,h,l=Mr({},i._gsap),f=i.style;for(n in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),f[Vi]=e,r=vr(i,1),rr(i,Vi),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Vi],f[Vi]=e,r=vr(i,1),f[Vi]=s),Di)(s=l[n])!==(a=r[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=ae(s)!==(h=ae(a))?ar(i,n,s,h):parseFloat(s),u=parseFloat(a),t._pt=new di(t._pt,r,n,o,u-o,Li),t._pt.u=h||0,t._props.push(n));Mr(r,l)};Ot("padding,margin,Width,Radius",(function(t,e){var i="Top",r="Right",n="Bottom",s="Left",a=(e<3?[i,r,n,s]:[i+s,i+r,n+r,n+s]).map((function(i){return e<2?t+i:"border"+i+t}));fr[e>1?"border"+t:t]=function(t,e,i,r,n){var s,o;if(arguments.length<4)return s=a.map((function(e){return or(t,e,i)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(r+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,n)}}));var kr,Ar,Er,Cr={name:"css",register:$i,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,r,n){var s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,w,b,x,T,O=this._props,M=t.style,D=i.vars.startAt;for(f in xi||$i(),e)if("autoRound"!==f&&(a=e[f],!mt[f]||!He(f,e,i,r,t,n)))if(h=typeof a,l=fr[f],"function"===h&&(h=typeof(a=a.call(i,r,t,n))),"string"===h&&~a.indexOf("random(")&&(a=me(a)),l)l(this,t,f,a,i)&&(y=1);else if("--"===f.substr(0,2))s=(getComputedStyle(t).getPropertyValue(f)+"").trim(),a+="",ke.lastIndex=0,ke.test(s)||(c=ae(s),p=ae(a)),p?c!==p&&(s=ar(t,f,s,p)+p):c&&(a+=c),this.add(M,"setProperty",s,a,r,n,0,0,f),O.push(f);else if("undefined"!==h){if(D&&f in D?(s="function"==typeof D[f]?D[f].call(i,r,t,n):D[f],f in R.units&&!ae(s)&&(s+=R.units[f]),"="===(s+"").charAt(1)&&(s=or(t,f))):s=or(t,f),u=parseFloat(s),(d="string"===h&&"="===a.charAt(1)?+(a.charAt(0)+"1"):0)&&(a=a.substr(2)),o=parseFloat(a),f in Ii&&("autoAlpha"===f&&(1===u&&"hidden"===or(t,"visibility")&&o&&(u=0),nr(this,M,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==f&&"transform"!==f&&~(f=Ii[f]).indexOf(",")&&(f=f.split(",")[0])),_=f in Di)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||vr(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new di(this._pt,M,Vi,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===f)this._pt=new di(this._pt,g,"scaleY",g.scaleY,(d?d*o:o-g.scaleY)||0),O.push("scaleY",f),f+="X";else{if("transformOrigin"===f){b=void 0,x=void 0,T=void 0,b=(w=a).split(" "),x=b[0],T=b[1]||"50%","top"!==x&&"bottom"!==x&&"left"!==T&&"right"!==T||(w=x,x=T,T=w),b[0]=hr[x]||x,b[1]=hr[T]||T,a=b.join(" "),g.svg?gr(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==g.zOrigin&&nr(this,g,"zOrigin",g.zOrigin,p),nr(this,M,f,yr(s),yr(a)));continue}if("svgOrigin"===f){gr(t,a,1,v,0,this);continue}if(f in pr){Or(this,g,f,u,a,d);continue}if("smoothOrigin"===f){nr(this,g,"smooth",g.smooth,a);continue}if("force3D"===f){g[f]=a;continue}if("transform"===f){Dr(this,a,t);continue}}else f in M||(f=Ji(f)||f);if(_||(o||0===o)&&(u||0===u)&&!Pi.test(a)&&f in M)o||(o=0),(c=(s+"").substr((u+"").length))!==(p=ae(a)||(f in R.units?R.units[f]:c))&&(u=ar(t,f,s,p)),this._pt=new di(this._pt,_?g:M,f,u,d?d*o:o-u,_||"px"!==p&&"zIndex"!==f||!1===e.autoRound?Li:Fi),this._pt.u=p||0,c!==p&&(this._pt.b=s,this._pt.r=zi);else if(f in M)ur.call(this,t,f,s,a);else{if(!(f in t)){ht(f,a);continue}this.add(t,f,s||t[f],a,r,n)}O.push(f)}y&&pi(this)},get:or,aliases:Ii,getSetter:function(t,e,i){var r=Ii[e];return r&&r.indexOf(",")<0&&(e=r),e in Di&&e!==Qi&&(t._gsap.x||or(t,"x"))?i&&Oi===i?"scale"===e?Yi:Ui:(Oi=i||{},"scale"===e?Xi:Wi):t.style&&!V(t.style[e])?ji:~e.indexOf("-")?Ni:si(t,e)},core:{_removeProperty:rr,_getMatrix:mr}};vi.utils.checkPrefix=Ji,Er=Ot((kr="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Ar="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Di[t]=1})),Ot(Ar,(function(t){R.units[t]="deg",pr[t]=1})),Ii[Er[13]]=kr+","+Ar,Ot("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Ii[e[1]]=Er[e[0]]})),Ot("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){R.units[t]="px"})),vi.registerPlugin(Cr);var Sr=vi.registerPlugin(Cr)||vi;Sr.core.Tween;const Pr=getComputedStyle(document.body).getPropertyValue("--type-line-opacity");class Ir{DOM={el:null,imageWrap:null,image:null,number:null,title:null,intro:null,description:null};constructor(t){this.DOM.el=t,this.DOM.imageWrap=this.DOM.el.querySelector(".article__img-wrap"),this.DOM.image=this.DOM.el.querySelector(".article__img"),this.DOM.number=this.DOM.el.querySelector(".article__number"),this.DOM.title=this.DOM.el.querySelector(".article__title"),this.DOM.intro=this.DOM.el.querySelector(".article__intro"),this.DOM.description=this.DOM.el.querySelector(".article__description")}}class Lr{DOM={el:null,image:null,title:null,description:null,article:null};article;constructor(t){this.DOM.el=t,this.DOM.image=this.DOM.el.querySelector(".item__img"),this.DOM.title=this.DOM.el.querySelector(".item__caption-title"),this.DOM.description=this.DOM.el.querySelector(".item__caption-description"),this.DOM.article=document.getElementById(this.DOM.el.dataset.article),this.article=new Ir(this.DOM.article);const e={duration:1,ease:"expo"};this.DOM.el.addEventListener("mouseenter",(()=>{vi.timeline({defaults:e}).to([this.DOM.image,this.DOM.title,this.DOM.description],{y:t=>8*t-4})})),this.DOM.el.addEventListener("mouseleave",(()=>{vi.timeline({defaults:e}).to([this.DOM.image,this.DOM.title,this.DOM.description],{y:0})}))}}((t="img")=>new Promise((e=>{n(document.querySelectorAll(t),{background:!0},e)})))(".item__img, .article__img").then((()=>document.body.classList.remove("loading")));const Rr=new class{DOM={};constructor(t){this.DOM.el=t,this.DOM.lines=[...document.querySelectorAll(".type__line")]}in(){return Sr.timeline({paused:!0}).to(this.DOM.el,{duration:1.4,ease:"power2.inOut",scale:2.7,rotate:-90}).to(this.DOM.lines,{keyframes:[{x:"20%",duration:1,ease:"power1.inOut"},{x:"-200%",duration:1.5,ease:"power1.in"}],stagger:.04},0).to(this.DOM.lines,{keyframes:[{opacity:1,duration:1,ease:"power1.in"},{opacity:0,duration:1.5,ease:"power1.in"}]},0)}out(){return Sr.timeline({paused:!0}).to(this.DOM.el,{duration:1.4,ease:"power2.inOut",scale:1,rotate:0},1.2).to(this.DOM.lines,{duration:2.3,ease:"back",x:"0%",stagger:-.04},0).to(this.DOM.lines,{keyframes:[{opacity:1,duration:1,ease:"power1.in"},{opacity:Pr,duration:1.5,ease:"power1.in"}]},0)}}(document.querySelector("[data-type-transition]"));let zr=!1;const Fr=document.querySelector(".frame");let Br=[],qr=-1;const jr=document.querySelector(".item-wrap");[...jr.querySelectorAll(".item")].forEach((t=>{const e=new Lr(t);Br.push(e),e.DOM.el.addEventListener("click",(()=>Nr(e)))}));const Nr=t=>{if(zr)return;zr=!0,qr=Br.indexOf(t);const e=vi.timeline({onComplete:()=>zr=!1});e.addLabel("start",0).addLabel("typeTransition",.3).addLabel("articleOpening",.75*Rr.in().totalDuration()+e.labels.typeTransition).to(Br.map((t=>t.DOM.el)),{duration:.8,ease:"power2.inOut",opacity:0,y:t=>t%2?"25%":"-25%"},"start").to(Fr,{duration:.8,ease:"power3",opacity:0,onComplete:()=>vi.set(Fr,{pointerEvents:"none"})},"start").add(Rr.in().play(),"typeTransition").add((()=>{vi.set(Ur,{pointerEvents:"auto"}),vi.set(jr,{pointerEvents:"none"}),Br[qr].DOM.article.classList.add("article--current")}),"articleOpening").to(Ur,{duration:.7,opacity:1},"articleOpening").set([t.article.DOM.title,t.article.DOM.number,t.article.DOM.intro,t.article.DOM.description],{opacity:0,y:"50%"},"articleOpening").set(t.article.DOM.imageWrap,{y:"100%"},2).set(t.article.DOM.image,{y:"-100%"},2).to([t.article.DOM.title,t.article.DOM.number,t.article.DOM.intro,t.article.DOM.description],{duration:1,ease:"expo",opacity:1,y:"0%",stagger:.04},"articleOpening").to([t.article.DOM.imageWrap,t.article.DOM.image],{duration:1,ease:"expo",y:"0%"},"articleOpening")},Ur=document.querySelector(".back");Ur.addEventListener("click",(()=>(()=>{if(zr)return;zr=!0;const t=Br[qr],e=vi.timeline({onComplete:()=>zr=!1});e.addLabel("start",0).addLabel("typeTransition",.5).addLabel("showItems",.7*Rr.out().totalDuration()+e.labels.typeTransition).to(Ur,{duration:.7,ease:"power1",opacity:0},"start").to([t.article.DOM.title,t.article.DOM.number,t.article.DOM.intro,t.article.DOM.description],{duration:1,ease:"power4.in",opacity:0,y:"50%",stagger:-.04},"start").to(t.article.DOM.imageWrap,{duration:1,ease:"power4.in",y:"100%"},"start").to(t.article.DOM.image,{duration:1,ease:"power4.in",y:"-100%"},"start").add((()=>{vi.set(Ur,{pointerEvents:"none"}),vi.set(jr,{pointerEvents:"auto"}),t.DOM.article.classList.remove("article--current")})).add(Rr.out().play(),"typeTransition").to(Fr,{duration:.8,ease:"power3",opacity:1,onStart:()=>vi.set(Fr,{pointerEvents:"auto"})},"showItems").to(Br.map((t=>t.DOM.el)),{duration:1,ease:"power3.inOut",opacity:1,y:"0%"},"showItems")})())); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Kinetic Typography Page Transition | Codrops

Kinetic Typography Page Transition

Inspired by this shot

@codrops
Some title

01 — A Poem

I, D-503, the builder of the Integral, I am only one of the many mathematicians of the United State.

Some title

02 — Harmony

From behind the Green Wall from some unknown plains the wind brings to us the yellow honeyed pollen of flowers.

Some title

03 — A Coat

I looked over all that I wrote down yesterday and I find that my descriptions are not sufficiently clear.

Some title

04 — Epilepsy

The auditorium: an enormous half-globe of glass with the sun piercing through.

01

A Poem

I, D-503, the builder of the Integral, I am only one of the many mathematicians of the United State.

The great historic hour is near, when the first Integral will rise into the limitless space of the universe. A thousand years ago your heroic ancestors subjected the whole earth to the power of the United State. A still more glorious task is before you,—the integration of the indefinite equation of the Cosmos by the use of the glass, electric, fire-breathing Integral.

02

Harmony

From behind the Green Wall from some unknown plains the wind brings to us the yellow honeyed pollen of flowers.

One’s lips are dry from this sweet dust. Every moment one passes one’s tongue over them. Probably, all women whom I meet in the street (and men certainly also), have today sweet lips.

03

A Coat

I looked over all that I wrote down yesterday and I find that my descriptions are not sufficiently clear.

That is, everything would undoubtedly be clear to one of us but who knows to whom my Integral will some day bring these records? Perhaps you, like our ancestors, have read the great book of civilization only up to the page of nine hundred years ago.

04

Epilepsy

The auditorium: an enormous half-globe of glass with the sun piercing through.

The circular rows of noble, globe-like, closely-shaven heads. With joy in my heart I looked around. I believe I was looking in the hope of seeing the rose-colored scythe, the dear lips of O-, somewhere among the blue waves of the unifs. Then I saw extraordinarily white, sharp teeth like the.... But no!

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

Kinetic Typography Page Transition

34 |

Inspired by this shot

35 |
36 |
@codrops
37 | 42 |
43 |
44 |
45 | Some title 46 |
47 |

01 — A Poem

48 |

I, D-503, the builder of the Integral, I am only one of the many mathematicians of the United State.

49 |
50 |
51 |
52 | Some title 53 |
54 |

02 — Harmony

55 |

From behind the Green Wall from some unknown plains the wind brings to us the yellow honeyed pollen of flowers.

56 |
57 |
58 |
59 | Some title 60 |
61 |

03 — A Coat

62 |

I looked over all that I wrote down yesterday and I find that my descriptions are not sufficiently clear.

63 |
64 |
65 |
66 | Some title 67 |
68 |

04 — Epilepsy

69 |

The auditorium: an enormous half-globe of glass with the sun piercing through.

70 |
71 |
72 |
73 |
74 | 75 |
76 |
77 | 01 78 |

A Poem

79 |

I, D-503, the builder of the Integral, I am only one of the many mathematicians of the United State.

80 |

The great historic hour is near, when the first Integral will rise into the limitless space of the universe. A thousand years ago your heroic ancestors subjected the whole earth to the power of the United State. A still more glorious task is before you,—the integration of the indefinite equation of the Cosmos by the use of the glass, electric, fire-breathing Integral.

81 |
82 |
83 |
84 | 02 85 |

Harmony

86 |

From behind the Green Wall from some unknown plains the wind brings to us the yellow honeyed pollen of flowers.

87 |

One’s lips are dry from this sweet dust. Every moment one passes one’s tongue over them. Probably, all women whom I meet in the street (and men certainly also), have today sweet lips.

88 |
89 |
90 |
91 | 03 92 |

A Coat

93 |

I looked over all that I wrote down yesterday and I find that my descriptions are not sufficiently clear.

94 |

That is, everything would undoubtedly be clear to one of us but who knows to whom my Integral will some day bring these records? Perhaps you, like our ancestors, have read the great book of civilization only up to the page of nine hundred years ago.

95 |
96 |
97 |
98 | 04 99 |

Epilepsy

100 |

The auditorium: an enormous half-globe of glass with the sun piercing through.

101 |

The circular rows of noble, globe-like, closely-shaven heads. With joy in my heart I looked around. I believe I was looking in the hope of seeing the rose-colored scythe, the dear lips of O-, somewhere among the blue waves of the unifs. Then I saw extraordinarily white, sharp teeth like the.... But no!

102 |
103 |
104 |
105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /src/js/article.js: -------------------------------------------------------------------------------- 1 | export class Article { 2 | // DOM elements 3 | DOM = { 4 | el: null, 5 | imageWrap: null, 6 | image: null, 7 | number: null, 8 | title: null, 9 | intro: null, 10 | description: null 11 | }; 12 | 13 | constructor(DOM_el) { 14 | this.DOM.el = DOM_el; 15 | // image 16 | this.DOM.imageWrap = this.DOM.el.querySelector('.article__img-wrap'); 17 | this.DOM.image = this.DOM.el.querySelector('.article__img'); 18 | // number, title, intro, description 19 | this.DOM.number = this.DOM.el.querySelector('.article__number'); 20 | this.DOM.title = this.DOM.el.querySelector('.article__title'); 21 | this.DOM.intro = this.DOM.el.querySelector('.article__intro'); 22 | this.DOM.description = this.DOM.el.querySelector('.article__description'); 23 | } 24 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import { gsap } from 'gsap'; 3 | import { TypeTransition } from './typeTransition'; 4 | import { Item } from './item'; 5 | 6 | // preload images then remove loader (loading class) 7 | preloadImages('.item__img, .article__img').then(() => document.body.classList.remove('loading')); 8 | 9 | // text transition 10 | const typeT = new TypeTransition(document.querySelector('[data-type-transition]')); 11 | 12 | // true if there's an animation running 13 | let isAnimating = false; 14 | 15 | // frame element 16 | const frameEl = document.querySelector('.frame'); 17 | 18 | 19 | /**** Items ****/ 20 | 21 | // items array 22 | let itemsInstanceArr = []; 23 | // current item's index 24 | let currentItem = -1; 25 | // Items wrap 26 | const itemsWrap = document.querySelector('.item-wrap'); 27 | 28 | [...itemsWrap.querySelectorAll('.item')].forEach(itemEl => { 29 | // create a new Item 30 | const item = new Item(itemEl); 31 | // add it to the array of Item's indexes 32 | itemsInstanceArr.push(item); 33 | 34 | // on click action 35 | item.DOM.el.addEventListener('click', () => openItem(item)); 36 | }); 37 | 38 | const openItem = item => { 39 | if ( isAnimating ) return; 40 | isAnimating = true; 41 | 42 | // update currentItem index 43 | currentItem = itemsInstanceArr.indexOf(item); 44 | 45 | // gsap timeline 46 | const openTimeline = gsap.timeline({ 47 | onComplete: () => isAnimating = false 48 | }); 49 | 50 | // labels 51 | openTimeline.addLabel('start', 0) 52 | // type transition starts a bit after the items animation 53 | .addLabel('typeTransition', 0.3) 54 | // the article will show a bit before the text transition ends 55 | .addLabel('articleOpening', typeT.in().totalDuration()*.75 + openTimeline.labels.typeTransition) 56 | 57 | // fade out the items 58 | .to(itemsInstanceArr.map(item => item.DOM.el), { 59 | duration: 0.8, 60 | ease: 'power2.inOut', 61 | opacity: 0, 62 | y: (pos) => pos%2 ? '25%' : '-25%' 63 | }, 'start') 64 | // fade out the page frame 65 | .to(frameEl, { 66 | duration: 0.8, 67 | ease: 'power3', 68 | opacity: 0, 69 | onComplete: () => gsap.set(frameEl, {pointerEvents: 'none'}) 70 | }, 'start') 71 | 72 | // text transition starts here 73 | .add(typeT.in().play(), 'typeTransition') 74 | 75 | // add current class to the item's article and set the pointer events 76 | .add(() => { 77 | gsap.set(backCtrl, {pointerEvents: 'auto'}) 78 | gsap.set(itemsWrap, { pointerEvents: 'none' }); 79 | itemsInstanceArr[currentItem].DOM.article.classList.add('article--current'); 80 | }, 'articleOpening') 81 | // show the back button 82 | .to(backCtrl, { 83 | duration: 0.7, 84 | opacity: 1 85 | }, 'articleOpening') 86 | // initially hide all the article elements so we can animate them in 87 | .set([item.article.DOM.title, item.article.DOM.number, item.article.DOM.intro, item.article.DOM.description], { 88 | opacity: 0, 89 | y: '50%' 90 | }, 'articleOpening') 91 | // the image wrap and image elements will have opposite translate values (reveal/unreveal effect) 92 | .set(item.article.DOM.imageWrap, {y: '100%'}, 2) 93 | .set(item.article.DOM.image, {y: '-100%'}, 2) 94 | // now fade in and translate the article's elements 95 | .to([item.article.DOM.title, item.article.DOM.number, item.article.DOM.intro, item.article.DOM.description], { 96 | duration: 1, 97 | ease: 'expo', 98 | opacity: 1, 99 | y: '0%', 100 | stagger: 0.04 101 | }, 'articleOpening') 102 | // and reveal the image 103 | .to([item.article.DOM.imageWrap, item.article.DOM.image], { 104 | duration: 1, 105 | ease: 'expo', 106 | y: '0%' 107 | }, 'articleOpening'); 108 | } 109 | 110 | 111 | /**** Back action ****/ 112 | 113 | // back button 114 | const backCtrl = document.querySelector('.back'); 115 | 116 | const closeItem = () => { 117 | if ( isAnimating ) return; 118 | isAnimating = true; 119 | 120 | // current open item 121 | const item = itemsInstanceArr[currentItem]; 122 | 123 | // gsap timeline 124 | const closeTimeline = gsap.timeline({ 125 | onComplete: () => isAnimating = false 126 | }); 127 | 128 | // labels 129 | closeTimeline.addLabel('start', 0) 130 | .addLabel('typeTransition', 0.5) 131 | .addLabel('showItems', typeT.out().totalDuration()*0.7 + closeTimeline.labels.typeTransition) 132 | 133 | .to(backCtrl, { 134 | duration: 0.7, 135 | ease: 'power1', 136 | opacity: 0 137 | }, 'start') 138 | .to([item.article.DOM.title, item.article.DOM.number, item.article.DOM.intro, item.article.DOM.description], { 139 | duration: 1, 140 | ease: 'power4.in', 141 | opacity: 0, 142 | y: '50%', 143 | stagger: -0.04 144 | }, 'start') 145 | .to(item.article.DOM.imageWrap, { 146 | duration: 1, 147 | ease: 'power4.in', 148 | y: '100%' 149 | }, 'start') 150 | .to(item.article.DOM.image, { 151 | duration: 1, 152 | ease: 'power4.in', 153 | y: '-100%' 154 | }, 'start') 155 | 156 | // remove current class from the item's article and set the pointer events 157 | .add(() => { 158 | gsap.set(backCtrl, {pointerEvents: 'none'}) 159 | gsap.set(itemsWrap, { pointerEvents: 'auto' }); 160 | item.DOM.article.classList.remove('article--current'); 161 | }) 162 | 163 | // text transition starts here 164 | .add(typeT.out().play(), 'typeTransition') 165 | 166 | .to(frameEl, { 167 | duration: 0.8, 168 | ease: 'power3', 169 | opacity: 1, 170 | onStart: () => gsap.set(frameEl, {pointerEvents: 'auto'}) 171 | }, 'showItems') 172 | .to(itemsInstanceArr.map(item => item.DOM.el), { 173 | duration: 1, 174 | ease: 'power3.inOut', 175 | opacity: 1, 176 | y: '0%' 177 | }, 'showItems'); 178 | } 179 | 180 | backCtrl.addEventListener('click', () => closeItem()); 181 | -------------------------------------------------------------------------------- /src/js/item.js: -------------------------------------------------------------------------------- 1 | import gsap from 'gsap/gsap-core'; 2 | import { Article } from './article'; 3 | 4 | export class Item { 5 | // DOM elements 6 | DOM = { 7 | el: null, 8 | image: null, 9 | title: null, 10 | description: null, 11 | article: null 12 | }; 13 | // the Item's Article instance 14 | article; 15 | 16 | constructor(DOM_el) { 17 | this.DOM.el = DOM_el; 18 | // image, title and description 19 | this.DOM.image = this.DOM.el.querySelector('.item__img'); 20 | this.DOM.title = this.DOM.el.querySelector('.item__caption-title'); 21 | this.DOM.description = this.DOM.el.querySelector('.item__caption-description'); 22 | // article element for this item 23 | this.DOM.article = document.getElementById(this.DOM.el.dataset.article); 24 | // Article instance 25 | this.article = new Article(this.DOM.article); 26 | // mouseenter/mouseleave events: translate all elements 27 | const hoverTimelineDefaults = {duration: 1, ease: 'expo'}; 28 | this.DOM.el.addEventListener('mouseenter', () => { 29 | gsap.timeline({defaults: hoverTimelineDefaults}) 30 | .to([this.DOM.image, this.DOM.title, this.DOM.description], { 31 | y: pos => pos*8-4 32 | }); 33 | }); 34 | this.DOM.el.addEventListener('mouseleave', () => { 35 | gsap.timeline({defaults: hoverTimelineDefaults}) 36 | .to([this.DOM.image, this.DOM.title, this.DOM.description], { 37 | y: 0 38 | }); 39 | }); 40 | } 41 | } -------------------------------------------------------------------------------- /src/js/typeTransition.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | 3 | // .type__line CSS opacity value (CSS variable) 4 | const TYPE_LINE_OPACITY = getComputedStyle(document.body).getPropertyValue('--type-line-opacity'); 5 | 6 | export class TypeTransition { 7 | // DOM elements 8 | DOM = {}; 9 | 10 | constructor(DOM_el) { 11 | this.DOM.el = DOM_el; 12 | // lines of text 13 | this.DOM.lines = [...document.querySelectorAll('.type__line')]; 14 | } 15 | // "in" transition (total time: 2.5s) 16 | in() { 17 | return gsap.timeline({paused: true}) 18 | .to(this.DOM.el, { 19 | duration: 1.4, 20 | ease: 'power2.inOut', 21 | scale: 2.7, 22 | rotate: -90 23 | }) 24 | .to(this.DOM.lines, { 25 | keyframes: [ 26 | { x: '20%', duration: 1, ease: 'power1.inOut' }, 27 | { x: '-200%', duration: 1.5, ease: 'power1.in' } 28 | ], 29 | stagger: 0.04 30 | }, 0) 31 | .to(this.DOM.lines, { 32 | keyframes: [ 33 | { opacity: 1, duration: 1, ease: 'power1.in' }, 34 | { opacity: 0, duration: 1.5, ease: 'power1.in' } 35 | ] 36 | }, 0) 37 | } 38 | out() { 39 | return gsap.timeline({paused: true}) 40 | .to(this.DOM.el, { 41 | duration: 1.4, 42 | ease: 'power2.inOut', 43 | scale: 1, 44 | rotate: 0 45 | }, 1.2) 46 | .to(this.DOM.lines, { 47 | duration: 2.3, 48 | ease: 'back', 49 | x: '0%', 50 | stagger: -0.04 51 | }, 0) 52 | .to(this.DOM.lines, { 53 | keyframes: [ 54 | { opacity: 1, duration: 1, ease: 'power1.in' }, 55 | { opacity: TYPE_LINE_OPACITY, duration: 1.5, ease: 'power1.in' } 56 | ] 57 | }, 0); 58 | } 59 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Preload images 4 | const preloadImages = (selector = 'img') => { 5 | return new Promise((resolve) => { 6 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 7 | }); 8 | }; 9 | 10 | export { 11 | preloadImages 12 | }; --------------------------------------------------------------------------------