├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.5ff36b68.jpg ├── 1.80b98c5b.jpg ├── 10.09b8babf.jpg ├── 11.6bf710ad.jpg ├── 12.bd7243dc.jpg ├── 13.eaca2609.jpg ├── 14.8a0d313c.jpg ├── 15.9d1ab7d5.jpg ├── 16.3a8d5f7d.jpg ├── 17.5d19143b.jpg ├── 18.145b6e0b.jpg ├── 19.4e8371a2.jpg ├── 2.be0b6e97.jpg ├── 20.cb743775.jpg ├── 21.1ad7d602.jpg ├── 3.1667f2fd.jpg ├── 4.a242a4db.jpg ├── 5.cec98852.jpg ├── 6.63a71a70.jpg ├── 7.febd1f9e.jpg ├── 8.1ec50be9.jpg ├── 9.42343a9c.jpg ├── favicon.61719396.ico ├── index.320bd6f3.css ├── index.cad48f07.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 21.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html └── js ├── details.js ├── imgReveal.js ├── index.js ├── menu.js ├── textLinesReveal.js ├── textReveal.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 | # Superfluid: Content Preview and Menu Animation 2 | 3 | A proof-of-concept reveal animation experiment on typographic elements as repeating pattern for a website design. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2021/07/Superfluid_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=55661) 8 | 9 | [Demo](http://tympanus.net/Development/SuperfluidLayout/) 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.5ff36b68.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/1.5ff36b68.jpg -------------------------------------------------------------------------------- /dist/1.80b98c5b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/1.80b98c5b.jpg -------------------------------------------------------------------------------- /dist/10.09b8babf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/10.09b8babf.jpg -------------------------------------------------------------------------------- /dist/11.6bf710ad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/11.6bf710ad.jpg -------------------------------------------------------------------------------- /dist/12.bd7243dc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/12.bd7243dc.jpg -------------------------------------------------------------------------------- /dist/13.eaca2609.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/13.eaca2609.jpg -------------------------------------------------------------------------------- /dist/14.8a0d313c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/14.8a0d313c.jpg -------------------------------------------------------------------------------- /dist/15.9d1ab7d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/15.9d1ab7d5.jpg -------------------------------------------------------------------------------- /dist/16.3a8d5f7d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/16.3a8d5f7d.jpg -------------------------------------------------------------------------------- /dist/17.5d19143b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/17.5d19143b.jpg -------------------------------------------------------------------------------- /dist/18.145b6e0b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/18.145b6e0b.jpg -------------------------------------------------------------------------------- /dist/19.4e8371a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/19.4e8371a2.jpg -------------------------------------------------------------------------------- /dist/2.be0b6e97.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/2.be0b6e97.jpg -------------------------------------------------------------------------------- /dist/20.cb743775.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/20.cb743775.jpg -------------------------------------------------------------------------------- /dist/21.1ad7d602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/21.1ad7d602.jpg -------------------------------------------------------------------------------- /dist/3.1667f2fd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/3.1667f2fd.jpg -------------------------------------------------------------------------------- /dist/4.a242a4db.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/4.a242a4db.jpg -------------------------------------------------------------------------------- /dist/5.cec98852.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/5.cec98852.jpg -------------------------------------------------------------------------------- /dist/6.63a71a70.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/6.63a71a70.jpg -------------------------------------------------------------------------------- /dist/7.febd1f9e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/7.febd1f9e.jpg -------------------------------------------------------------------------------- /dist/8.1ec50be9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/8.1ec50be9.jpg -------------------------------------------------------------------------------- /dist/9.42343a9c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/9.42343a9c.jpg -------------------------------------------------------------------------------- /dist/favicon.61719396.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SuperfluidLayout/92dcc855e21bc8b843a55f37ef82e1b6e9dc227e/dist/favicon.61719396.ico -------------------------------------------------------------------------------- /dist/index.320bd6f3.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:18px}body{margin:0;--color-text:#111;--color-bg:#f7f5f3;--color-link:#999;--color-link-hover:#000;--font-size-xlarge:2rem;--font-size-large:1.5rem;--font-size-medium:1.25rem;--font-size-small:1rem;--color-menu:#000;--color-menu-hover:#e93f33;color:var(--color-text);background-color:var(--color-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading:after{top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;opacity:.4;background:var(--color-link);animation:loaderAnim .7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{text-decoration:underline;color:var(--color-link)}a,a:hover{outline:none}a:hover{text-decoration:none;color:var(--color-link-hover)}a:focus{outline:none;background:#d3d3d3}a:focus-visible,a:focus:not(:focus-visible){background:transparent}a:focus-visible{outline:2px solid red}.unbutton{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit}.unbutton:focus{outline:none}main{padding:1.5rem;display:grid;height:100vh;align-content:space-between;grid-gap:.5rem;grid-template-columns:1fr auto;grid-template-areas:"frame menu" "heading heading" "content content" "content content" "deco deco" "footer footer"}.frame{grid-area:frame;color:var(--color-link);margin-bottom:1rem}.frame__title{font-size:1rem;margin:0;font-weight:400}.frame__links{display:block}.frame__links a:not(:last-child){margin-right:.5rem}.line{transform-origin:0 50%;padding-bottom:.35rem;white-space:nowrap;will-change:transform}.oh{overflow:hidden}.oh__inner{display:inline-block;transform-origin:0 50%;will-change:transform}.content{display:flex;flex-direction:column;width:100vw;height:calc(100vh - 13rem);position:relative;justify-content:flex-start;align-items:center}.heading{grid-area:heading;font-size:var(--font-size-large);margin:0 0 2rem;font-weight:400;align-self:start;line-height:1.4}.heading strong{font-weight:600}.content-primary{grid-area:content;line-height:1;font-size:var(--font-size-large)}.content-secondary{grid-area:footer;line-height:1;margin:0;align-self:end;font-size:var(--font-size-small);max-width:400px}.deco{grid-area:deco}.deco__img-wrap{position:relative;overflow:hidden;width:25vw;min-width:250px;max-width:400px;margin-bottom:1rem;will-change:transform}.deco__img-wrap--upper{height:5vh}.deco__img-wrap--lower{height:25vh}.deco__img{background:url(1.5ff36b68.jpg) no-repeat 50% 0;width:100%;height:100%;will-change:transform}.deco__img--lower{background-position:50% -5vh}.menu-link{align-self:start;justify-self:end;line-height:1;grid-area:menu;overflow:hidden;position:relative;padding:0 0 5px;font-size:var(--font-size-medium)}.menu--open~.menu-link,.state-details .menu-link{pointer-events:none}.menu-link:after{content:"";position:absolute;bottom:0;left:0;height:7%;width:100%;background:currentColor;transition:transform .4s ease;transform-origin:100% 50%}.menu--open~.menu-link:after,.menu-link:hover:after,.state-details .menu-link:after{transform:scaleX(0);transform-origin:0 50%}.menu{position:fixed;pointer-events:none;z-index:100;opacity:0;top:0;left:0;width:100%;height:100vh;display:grid;grid-template-columns:auto auto auto;align-content:center;justify-content:center;counter-reset:menucounter}.menu--open{pointer-events:auto;opacity:1}.state-details .menu{pointer-events:none}.menu__item{grid-column:2;line-height:1;display:block;position:relative}.menu__item-link{text-decoration:none;line-height:1.25;margin-top:calc(var(--font-size-xlarge)*-0.15);font-size:var(--font-size-xlarge);cursor:pointer;position:relative;padding:0 calc(var(--font-size-xlarge)*0.45);color:var(--color-menu)}.menu__item-link:hover{color:var(--color-menu-hover)}.menu__item-link:before{position:absolute;left:0;top:18%;text-align:right;counter-increment:menucounter;content:counters(menucounter,".",decimal-leading-zero);opacity:0;line-height:1;padding-right:.5rem;display:grid;place-items:center;font-size:var(--font-size-small);color:var(--color-text);transform:scale3d(0,0,0)}.menu__item-link:hover:before{opacity:1;transform:scaleX(1)}.close{position:absolute;top:1rem;right:1.5rem;font-size:3rem;line-height:1;opacity:0;pointer-events:none}.close:hover{color:var(--color-menu)}.menu--open .close{opacity:1;pointer-events:auto}.state-details .close{pointer-events:none}.details,.details-wrap{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.details-wrap{overflow:hidden}.panel{position:absolute;width:100%;height:100%;top:0;left:0;display:grid;grid-template-columns:repeat(50,2%);grid-template-rows:repeat(50,2%);--grid-row:1;--grid-column:1;transform:rotate(-35deg);opacity:.5}.panel__img{grid-area:var(--grid-row)/var(--grid-column)/span 12/span 5;will-change:transform}.pos-1{--grid-row:10;--grid-column:1}.pos-2{--grid-row:1;--grid-column:18}.pos-3{--grid-row:1;--grid-column:29}.pos-4{--grid-row:15;--grid-column:12}.pos-5{--grid-row:17;--grid-column:25}.pos-6{--grid-row:20;--grid-column:43}.pos-7{--grid-row:35;--grid-column:5}.pos-8{--grid-row:40;--grid-column:14}.pos-9{--grid-row:37;--grid-column:29}.pos-10{--grid-row:35;--grid-column:42}.pos-11{--grid-row:7;--grid-column:46}.pos-12{--grid-row:32;--grid-column:20}.pos-13{--grid-row:22;--grid-column:2}.pos-14{--grid-row:9;--grid-column:38}.pos-15{--grid-row:4;--grid-column:7}.pos-16{--grid-row:28;--grid-column:36}.panel__img{width:100px}.details{display:grid;place-items:center;pointer-events:none;opacity:0}.details--open,.details--open~.close--details{pointer-events:auto;opacity:1}.details__content{padding:1.5rem;margin:0 auto;position:relative}.details__content-title{font-weight:400;margin:0;font-size:var(--font-size-xlarge)}.details__content-text{line-height:1;max-width:640px;font-size:var(--font-size-medium)}.details__content-link{position:relative;display:inline-block;font-size:var(--font-size-small);color:var(--color-text);cursor:pointer;text-decoration:none;font-weight:600}.details__content-link:hover{color:var(--color-menu-hover)}@media screen and (min-width:53em){body{overflow:hidden;--font-size-xlarge:11vh;--font-size-large:3.5vw;--font-size-medium:2.75vw;--font-size-small:1.65vw}main{grid-gap:0;height:100vh;grid-template-columns:45% 1fr;grid-template-areas:"heading menu" "content ..." "content deco" "... deco" "footer deco" "footer frame"}.line{padding-bottom:.5vw}.frame{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end}.frame__links{margin-left:2rem;display:inline-block}.deco{align-self:end;justify-self:end}.content{height:100vh;justify-content:center}.details__content{width:50%;padding:.5rem}} -------------------------------------------------------------------------------- /dist/index.cad48f07.js: -------------------------------------------------------------------------------- 1 | !function(){var t,e={},i=!1;function n(){var e,n;return i||(i=!0,t={},e="undefined"!=typeof window?window:t,n=function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.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 n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],r=0;r{t.forEach((t=>{const n=document.createElement(e);n.classList=i,t.parentNode.appendChild(n),n.appendChild(t)}))};function a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 7 | /*! 8 | * GSAP 3.7.1 9 | * https://greensock.com 10 | * 11 | * @license Copyright 2008-2021, GreenSock. All rights reserved. 12 | * Subject to the terms at https://greensock.com/standard-license or for 13 | * Club GreenSock members, the agreement issued with that membership. 14 | * @author: Jack Doyle, jack@greensock.com 15 | */var u,h,l,c,f,p,d,_,m,g,v,y,w,x,b,T,O,M,D,k,C,E,A,S,I,P,L,R,z={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},B={duration:.5,overwrite:!1,delay:0},F=1e8,q=1e-8,j=2*Math.PI,N=j/4,Y=0,U=Math.sqrt,X=Math.cos,W=Math.sin,V=function(t){return"string"==typeof t},H=function(t){return"function"==typeof t},Q=function(t){return"number"==typeof t},G=function(t){return void 0===t},Z=function(t){return"object"==typeof t},$=function(t){return!1!==t},J=function(){return"undefined"!=typeof window},K=function(t){return H(t)||V(t)},tt="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},et=Array.isArray,it=/(?:-?\.?\d|\.)+/gi,nt=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,rt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,st=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,at=/[+-]=-?[.\d]+/,ot=/[^,'"\[\]\s]+/gi,ut=/[\d.+\-=]+(?:e[-+]\d*)*/i,ht={},lt={},ct=function(t){return(lt=zt(t,ht))&&bi},ft=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},pt=function(t,e){return!e&&console.warn(t)},dt=function(t,e){return t&&(ht[t]=e)&<&&(lt[t]=e)||ht},_t=function(){return 0},mt={},gt=[],vt={},yt={},wt={},xt=30,bt=[],Tt="",Ot=function(t){var e,i,n=t[0];if(Z(n)||H(n)||(t=[t]),!(e=(n._gsap||{}).harness)){for(i=bt.length;i--&&!bt[i].targetTest(n););e=bt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new He(t[i],e)))||t.splice(i,1);return t},Mt=function(t){return t._gsap||Ot(fe(t))[0]._gsap},Dt=function(t,e,i){return(i=t[e])&&H(i)?t[e]():G(i)&&t.getAttribute&&t.getAttribute(e)||i},kt=function(t,e){return(t=t.split(",")).forEach(e)||t},Ct=function(t){return Math.round(1e5*t)/1e5||0},Et=function(t,e){for(var i=e.length,n=0;t.indexOf(e[n])<0&&++nt._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},Ut=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Xt=function t(e){return!e||e._ts&&t(e.parent)},Wt=function(t){return t._repeat?Vt(t._tTime,t=t.duration()+t._rDelay)*t:0},Vt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Ht=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Qt=function(t){return t._end=Ct(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))},Gt=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=Ct(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Qt(t),i._dirty||Yt(i,t)),t},Zt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Ht(t.rawTime(),e),(!e._dur||ue(0,e.totalDuration(),i)-e._tTime>q)&&e.render(i,!0)),Yt(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}},$t=function(t,e,i,n){return e.parent&&Nt(e),e._start=Ct((Q(i)?i:i||t!==h?se(t,i,e):t._time)+e._delay),e._end=Ct(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function(t,e,i,n,r){void 0===i&&(i="_first"),void 0===n&&(n="_last");var s,a=t[n];if(r)for(s=e[r];a&&a[r]>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[n]=e,e._prev=a,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),ee(e)||(t._recent=e),n||Zt(t,e),t},Jt=function(t,e){return(ht.ScrollTrigger||ft("scrollTrigger",e))&&ht.ScrollTrigger.create(e,t)},Kt=function(t,e,i,n){return ti(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&d!==Le.frame?(gt.push(t),t._lazy=[e,n],1):void 0:1},te=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},ee=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},ie=function(t,e,i,n){var r=t._repeat,s=Ct(e)||0,a=t._tTime/t._tDur;return a&&!n&&(t._time*=s/t._dur),t._dur=s,t._tDur=r?r<0?1e10:Ct(s*(r+1)+t._rDelay*r):s,a&&!n?Gt(t,t._tTime=t._tDur*a):t.parent&&Qt(t),i||Yt(t.parent,t),t},ne=function(t){return t instanceof Ge?Yt(t):ie(t,t._dur)},re={_start:0,endTime:_t,totalDuration:_t},se=function t(e,i,n){var r,s,a,o=e.labels,u=e._recent||re,h=e.duration()>=F?u.endTime(!1):e._dur;return V(i)&&(isNaN(i)||i in o)?(s=i.charAt(0),a="%"===i.substr(-1),r=i.indexOf("="),"<"===s||">"===s?(r>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(a?(r<0?u:n).totalDuration()/100:1)):r<0?(i in o||(o[i]=h),o[i]):(s=parseFloat(i.charAt(r-1)+i.substr(r+1)),a&&n&&(s=s/100*(et(n)?n[0]:n).totalDuration()),r>1?t(e,i.substr(0,r-1),n)+s:h+s)):null==i?h:+i},ae=function(t,e,i){var n,r,s=Q(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=i,t){for(n=o,r=i;r&&!("immediateRender"in n);)n=r.vars.defaults||{},r=$(r.vars.inherit)&&r.parent;o.immediateRender=$(n.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new ri(e[0],o,e[a+1])},oe=function(t,e){return t||0===t?e(t):e},ue=function(t,e,i){return ie?e:i},he=function(t){if("string"!=typeof t)return"";var e=ut.exec(t);return e?t.substr(e.index+e[0].length):""},le=[].slice,ce=function(t,e){return t&&Z(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&Z(t[0]))&&!t.nodeType&&t!==l},fe=function(t,e,i){return!V(t)||i||!c&&Re()?et(t)?function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var n;return V(t)&&!e||ce(t,1)?(n=i).push.apply(n,fe(t)):i.push(t)}))||i}(t,i):ce(t)?le.call(t,0):t?[t]:[]:le.call((e||f).querySelectorAll(t),0)},pe=function(t){return t.sort((function(){return.5-Math.random()}))},de=function(t){if(H(t))return t;var e=Z(t)?t:{each:t},i=Ye(e.ease),n=e.from||0,r=parseFloat(e.base)||0,s={},a=n>0&&n<1,o=isNaN(n)||a,u=e.axis,h=n,l=n;return V(n)?h=l={center:.5,edges:.5,end:1}[n]||0:!a&&o&&(h=n[0],l=n[1]),function(t,a,c){var f,p,d,_,m,g,v,y,w,x=(c||e).length,b=s[x];if(!b){if(!(w="auto"===e.grid?0:(e.grid||[1,F])[1])){for(v=-1e8;v<(v=c[w++].getBoundingClientRect().left)&&wv&&(v=m),mx?x-1:u?"y"===u?x/w:w:Math.max(w,x/w))||0)*("edges"===n?-1:1),b.b=x<0?r-x:r,b.u=he(e.amount||e.each)||0,i=i&&x<0?je(i):i}return x=(b[t]-b.min)/b.max||0,Ct(b.b+(i?i(x):x)*b.v)+b.u}},_e=function(t){var e=t<1?Math.pow(10,(t+"").length-2):1;return function(i){var n=Math.round(parseFloat(i)/t)*t*e;return(n-n%1)/e+(Q(i)?0:he(i))}},me=function(t,e){var i,n,r=et(t);return!r&&Z(t)&&(i=r=t.radius||F,t.values?(t=fe(t.values),(n=!Q(t[0]))&&(i*=i)):t=_e(t.increment)),oe(e,r?H(t)?function(e){return n=t(e),Math.abs(n-e)<=i?n:e}:function(e){for(var r,s,a=parseFloat(n?e.x:e),o=parseFloat(n?e.y:0),u=F,h=0,l=t.length;l--;)(r=n?(r=t[l].x-a)*r+(s=t[l].y-o)*s:Math.abs(t[l]-a))(r=Math.abs(r))&&(s=n,o=r);return s},be=function(t,e,i){var n,r,s=t.vars,a=s[e];if(a)return n=s[e+"Params"],r=s.callbackScope||t,i&>.length&&At(),n?a.apply(r,n):a.call(r)},Te=function(t){return Nt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&be(t,"onInterrupt"),t},Oe=function(t){var e=(t=!t.name&&t.default||t).name,i=H(t),n=e&&!i&&t.init?function(){this._props=[]}:t,r={init:_t,render:pi,add:Je,kill:_i,modifier:di,rawVars:0},s={targetTest:0,get:0,getSetter:hi,aliases:{},register:0};if(Re(),t!==n){if(yt[e])return;Lt(n,Lt(Ft(t,r),s)),zt(n.prototype,zt(r,Ft(t,s))),yt[n.prop=e]=n,t.targetTest&&(bt.push(n),mt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}dt(e,n),t.register&&t.register(bi,n,vi)},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?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)*Me+.5|0},Ce=function(t,e,i){var n,r,s,a,o,u,h,l,c,f,p=t?Q(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&&(n=t.charAt(1),r=t.charAt(2),s=t.charAt(3),t="#"+n+n+r+r+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&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(it),e){if(~t.indexOf("="))return p=t.match(nt),i&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,n=2*(u=+p[2]/100)-(r=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=ke(a+1/3,n,r),p[1]=ke(a,n,r),p[2]=ke(a-1/3,n,r);else p=t.match(it)||De.transparent;p=p.map(Number)}return e&&!f&&(n=p[0]/Me,r=p[1]/Me,s=p[2]/Me,u=((h=Math.max(n,r,s))+(l=Math.min(n,r,s)))/2,h===l?a=o=0:(c=h-l,o=u>.5?c/(2-h-l):c/(h+l),a=h===n?(r-s)/c+(rO&&(D+=a-M),((i=(r=(k+=a)-D)-E)>0||o)&&(s=++w.frame,x=r-1e3*w.time,w.time=r/=1e3,E+=i+(i>=C?4:C-i),n=1),o||(g=v(t)),n)for(b=0;b=e&&b--},_listeners:A=[]}),Re=function(){return!m&&Le.wake()},ze={},Be=/^[\d.\-M][\d.\-,\s]/,Fe=/["']/g,qe=function(t){for(var e,i,n,r={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,u=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[qe(s[1])]:(e=t,i=e.indexOf("(")+1,n=e.indexOf(")"),r=e.indexOf("(",i),e.substring(i,~r&&r=1?i:1,s=(n||(e?.3:.45))/(i<1?i:1),a=s/j*(Math.asin(1/r)||0),o=function(t){return 1===t?1:r*Math.pow(2,-10*t)*W((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Xe(o);return s=j/s,u.config=function(i,n){return t(e,i,n)},u},Ve=function t(e,i){void 0===i&&(i=1.70158);var n=function(t){return t?--t*t*((i+1)*t+i)+1:0},r="out"===e?n:"in"===e?function(t){return 1-n(1-t)}:Xe(n);return r.config=function(i){return t(e,i)},r};kt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Ue(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,Ue("Elastic",We("in"),We("out"),We()),I=7.5625,L=1/(P=2.75),Ue("Bounce",(function(t){return 1-R(1-t)}),R=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(Gt(this,t),!i._dp||i.parent||Zt(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)&&$t(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),St(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Wt(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)+Wt(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?Vt(this._tTime,i)+1:1},e.timeScale=function(t){if(!arguments.length)return-1e-8===this._rts?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?Ht(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,Ut(this.totalTime(ue(-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):(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)!==q&&(this._tTime-=q)))),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)&&$t(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+($(t)?this.totalDuration():this.duration())/Math.abs(this._ts)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ht(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,i=arguments.length?t:e.rawTime();e;)i=e._start+i/(e._ts||1),e=e._dp;return i},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,ne(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,ne(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(se(this,t),$(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,$(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(n[t]=e,i&&(n[t+"Params"]=i),"onUpdate"===t&&(this._onUpdate=e)):delete n[t],this):n[t]},e.then=function(t){var e=this;return new Promise((function(i){var n=H(t)?t:Pt,r=function(){var t=e.then;e.then=null,H(n)&&(n=n(e))&&(n.then||n===e)&&(e.then=t),i(n),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?r():e._prom=r}))},e.kill=function(){Te(this)},t}();Lt(Qe.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Ge=function(t){function e(e,i){var n;return void 0===e&&(e={}),(n=t.call(this,e)||this).labels={},n.smoothChildTiming=!!e.smoothChildTiming,n.autoRemoveChildren=!!e.autoRemoveChildren,n._sort=$(e.sortChildren),h&&$t(e.parent||h,a(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&Jt(a(n),e.scrollTrigger),n}o(e,t);var i=e.prototype;return i.to=function(t,e,i){return ae(0,arguments,this),this},i.from=function(t,e,i){return ae(1,arguments,this),this},i.fromTo=function(t,e,i,n){return ae(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,qt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ri(t,e,se(this,i),1),this},i.call=function(t,e,i){return $t(this,ri.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,n,r,s,a){return i.duration=e,i.stagger=i.stagger||n,i.onComplete=s,i.onCompleteParams=a,i.parent=this,new ri(t,i,se(this,r)),this},i.staggerFrom=function(t,e,i,n,r,s,a){return i.runBackwards=1,qt(i).immediateRender=$(i.immediateRender),this.staggerTo(t,e,i,n,r,s,a)},i.staggerFromTo=function(t,e,i,n,r,s,a,o){return n.startAt=i,qt(n).immediateRender=$(n.immediateRender),this.staggerTo(t,e,n,r,s,a,o)},i.render=function(t,e,i){var n,r,s,a,o,u,l,c,f,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=this!==h&&t>g-q&&t>=0?g:tv&&(n=v)),p=Vt(this._tTime,o),!m&&this._tTime&&p!==a&&(p=a),d&&1&a&&(n=v-n,_=1),a!==p&&!this._lock){var x=d&&1&p,b=x===(d&&1&a);if(ae)for(n=t._first;n&&n._start<=i;){if(!n._dur&&"isPause"===n.data&&n._start>e)return n;n=n._next}else for(n=t._last;n&&n._start>=i;){if(!n._dur&&"isPause"===n.data&&n._start=m&&t>=0)for(r=this._first;r;){if(s=r._next,(r._act||n>=r._start)&&r._ts&&l!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(n-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(n-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){l=0,s&&(y+=this._zTime=-1e-8);break}}r=s}else{r=this._last;for(var T=t<0?t:n;r;){if(s=r._prev,(r._act||T<=r._end)&&r._ts&&l!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(T-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(T-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){l=0,s&&(y+=this._zTime=T?-1e-8:q);break}}r=s}}if(l&&!e&&(this.pause(),l.render(n>=m?0:-1e-8)._zTime=n>=m?1:-1,this._ts))return this._start=f,Qt(this),this.render(t,e,i);this._onUpdate&&!e&&be(this,"onUpdate",!0),(y===g&&g>=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)&&Nt(this,1),e||t<0&&!m||!y&&!m&&g||(be(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(Q(e)||(e=se(this,e,t)),!(t instanceof Qe)){if(et(t))return t.forEach((function(t){return i.add(t,e)})),this;if(V(t))return this.addLabel(t,e);if(!H(t))return this;t=ri.delayedCall(0,t)}return this!==t?$t(this,t,e):this},i.getChildren=function(t,e,i,n){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===n&&(n=-1e8);for(var r=[],s=this._first;s;)s._start>=n&&(s instanceof ri?e&&r.push(s):(i&&r.push(s),t&&r.push.apply(r,s.getChildren(!0,e,i)))),s=s._next;return r},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return V(t)?this.removeLabel(t):H(t)?this.killTweensOf(t):(jt(this,t),t===this._recent&&(this._recent=this._last),Yt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Ct(Le.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,i),this._forcing=0,this):this._tTime},i.addLabel=function(t,e){return this.labels[t]=se(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var n=ri.delayedCall(0,e||_t,i);return n.data="isPause",this._hasPause=1,$t(this,n,se(this,t))},i.removePause=function(t){var e=this._first;for(t=se(this,t);e;)e._start===t&&"isPause"===e.data&&Nt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var n=this.getTweensOf(t,i),r=n.length;r--;)Ze!==n[r]&&n[r].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,n=[],r=fe(t),s=this._first,a=Q(e);s;)s instanceof ri?Et(s._targets,r)&&(a?(!Ze||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&n.push(s):(i=s.getTweensOf(r,e)).length&&n.push.apply(n,i),s=s._next;return n},i.tweenTo=function(t,e){e=e||{};var i,n=this,r=se(n,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,l=ri.to(n,Lt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:r,overwrite:"auto",duration:e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale())||q,onStart:function(){if(n.pause(),!i){var t=e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale());l._dur!==t&&ie(l,t,0,1).render(l._time,!0,!0),i=1}o&&o.apply(l,u||[])}},e));return h?l.render(0):l},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,Lt({startAt:{time:se(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),xe(this,se(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),xe(this,se(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var n,r=this._first,s=this.labels;r;)r._start>=i&&(r._start+=t,r._end+=t),r=r._next;if(e)for(n in s)s[n]>=i&&(s[n]+=t);return Yt(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={}),Yt(this)},i.totalDuration=function(t){var e,i,n,r=0,s=this,a=s._last,o=F;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(n=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,$t(s,a,i-a._delay,1)._lock=0):o=i,i<0&&a._ts&&(r-=i,(!n&&!s._dp||n&&n.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-Infinity),o=0),a._end>r&&a._ts&&(r=a._end),a=e;ie(s,s===h&&s._time>r?s._time:r,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(h._ts&&(St(h,Ht(t,h)),d=Le.frame),Le.frame>=xt){xt+=z.autoSleep||120;var e=h._first;if((!e||!e._ts)&&z.autoSleep&&Le._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Le.sleep()}}},e}(Qe);Lt(Ge.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ze,$e=function(t,e,i,n,r,s,a){var o,u,h,l,c,f,p,d,_=new vi(this._pt,t,e,0,1,fi,null,r),m=0,g=0;for(_.b=i,_.e=n,i+="",(p=~(n+="").indexOf("random("))&&(n=ye(n)),s&&(s(d=[i,n],t,e),i=d[0],n=d[1]),u=i.match(st)||[];o=st.exec(n);)l=o[0],c=n.substring(m,o.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)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-f,m:h&&h<4?Math.round:0},m=st.lastIndex);return _.c=m0&&!E&&(e._startAt=0),A&&i<=0)return void(i&&(e._zTime=i))}else!1===E&&(e._startAt=0);else if(D&&A)if(S)!E&&(e._startAt=0);else if(i&&(x=!1),s=Lt({overwrite:!1,data:"isFromStart",lazy:x&&$(b),immediateRender:x,stagger:0,parent:P},n),m&&(s[f.prop]=m),Nt(e._startAt=ri.set(I,s)),i<0&&e._startAt.render(-1,!0),x){if(!i)return}else t(e._startAt,q);for(e._pt=0,b=A&&$(b)||b&&!A,r=0;r":e*x)}))})):T.forEach((function(t){return o.to(C,t,">")}));else{if(f=C.length,_=x?de(x):_t,Z(x))for(p in x)~ii.indexOf(p)&&(m||(m={}),m[p]=x[p]);for(l=0;lp-q&&t>=0?p:td&&(n=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,n=d-n),o=Vt(this._tTime,a),n===f&&!i&&this._initted)return this;s!==o&&(l&&this._yEase&&Ne(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(Ct(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(Kt(this,t<0?t:n,i,e))return this._tTime=0,this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=_,this._time=n,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(c||this._ease)(n/d),this._from&&(this.ratio=h=1-h),n&&!f&&!e&&(be(this,"onStart"),this._tTime!==_))return this;for(r=this._pt;r;)r.r(h,r.d),r=r._next;l&&l.render(t<0?t:!n&&u?-1e-8:l._dur*h,e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),be(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&be(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)&&Nt(this,1),e||t<0&&!f||!_&&!f||(be(this,_===p?"onComplete":"onReverseComplete",!0),this._prom&&!(_0)&&this._prom()))}}else!function(t,e,i,n){var r,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&te(t)&&(t._initted||!ee(t))||(t._ts<0||t._dp._ts<0)&&!ee(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=ue(0,t._tDur,e),s=Vt(l,h),a=Vt(t._tTime,h),t._yoyo&&1&s&&(u=1-u),s!==a&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||n||t._zTime===q||!e&&t._zTime){if(!t._initted&&Kt(t,e,n,i))return;for(a=t._zTime,t._zTime=e||(i?q:0),i||(i=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,r=t._pt;r;)r.r(u,r.d),r=r._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&be(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&be(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Nt(t,1),i||(be(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?Te(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ze&&!0!==Ze.vars.overwrite)._first||Te(this),this.parent&&i!==this.timeline.totalDuration()&&ie(this,this._dur*this.timeline._tDur/i,0,1),this}var n,r,s,a,o,u,h,l=this._targets,c=t?fe(t):l,f=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,n=i===e.length;n&&i--&&t[i]===e[i];);return i<0}(l,c))return"all"===e&&(this._pt=0),Te(this);for(n=this._op=this._op||[],"all"!==e&&(V(e)&&(o={},kt(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,n,r,s,a=t[0]?Mt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(n in i=zt({},e),o)if(n in i)for(r=(s=o[n].split(",")).length;r--;)i[s[r]]=i[n];return i}(l,e)),h=l.length;h--;)if(~c.indexOf(l[h]))for(o in r=f[h],"all"===e?(n[h]=e,a=r,s={}):(s=n[h]=n[h]||{},a=e),a)(u=r&&r[o])&&("kill"in u.d&&!0!==u.d.kill(o)||jt(this,u,"_pt"),delete r[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&Te(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return ae(1,arguments)},e.delayedCall=function(t,i,n,r){return new e(i,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:i,onReverseComplete:i,onCompleteParams:n,onReverseCompleteParams:n,callbackScope:r})},e.fromTo=function(t,e,i){return ae(2,arguments)},e.set=function(t,i){return i.duration=0,i.repeatDelay||(i.repeat=0),new e(t,i)},e.killTweensOf=function(t,e,i){return h.killTweensOf(t,e,i)},e}(Qe);Lt(ri.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),kt("staggerTo,staggerFrom,staggerFromTo",(function(t){ri[t]=function(){var e=new Ge,i=le.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var si=function(t,e,i){return t[e]=i},ai=function(t,e,i){return t[e](i)},oi=function(t,e,i,n){return t[e](n.fp,i)},ui=function(t,e,i){return t.setAttribute(e,i)},hi=function(t,e){return H(t[e])?ai:G(t[e])&&t.setAttribute?ui:si},li=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},ci=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},fi=function(t,e){var i=e._pt,n="";if(!t&&e.b)n=e.b;else if(1===t&&e.e)n=e.e;else{for(;i;)n=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+n,i=i._next;n+=e.c}e.set(e.t,e.p,n,e)},pi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},di=function(t,e,i,n){for(var r,s=this._pt;s;)r=s._next,s.p===n&&s.modifier(t,e,i),s=r},_i=function(t){for(var e,i,n=this._pt;n;)i=n._next,n.p===t&&!n.op||n.op===t?jt(this,n,"_pt"):n.dep||(e=1),n=i;return!e},mi=function(t,e,i,n){n.mSet(t,e,n.m.call(n.tween,i,n.mt),n)},gi=function(t){for(var e,i,n,r,s=t._pt;s;){for(e=s._next,i=n;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:r)?s._prev._next=s:n=s,(s._next=i)?i._prev=s:r=s,s=e}t._pt=n},vi=function(){function t(t,e,i,n,r,s,a,o,u){this.t=e,this.s=n,this.c=r,this.p=i,this.r=s||li,this.d=a||this,this.set=o||si,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=mi,this.m=t,this.mt=i,this.tween=e},t}();kt(Tt+"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 mt[t]=1})),ht.TweenMax=ht.TweenLite=ri,ht.TimelineLite=ht.TimelineMax=Ge,h=new Ge({sortChildren:!1,defaults:B,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),z.stringFilter=Pe;var yi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var n=t.map((function(t){return bi.quickSetter(t,e,i)})),r=n.length;return function(t){for(var e=r;e--;)n[e](t)}}t=t[0]||{};var s=yt[e],a=Mt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var n=new s;_._pt=0,n.init(t,i?e+i:e,_,0,[t]),n.render(1,n),_._pt&&pi(1,_)}:a.set(t,o);return s?u:function(e){return u(t,o,i?e+i:e,a,1)}},isTweening:function(t){return h.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ye(t.ease,B.ease)),Bt(B,t||{})},config:function(t){return Bt(z,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,n=t.plugins,r=t.defaults,s=t.extendTimeline;(n||"").split(",").forEach((function(t){return t&&!yt[t]&&!ht[t]&&pt(e+" effect requires "+t+" plugin.")})),wt[e]=function(t,e,n){return i(fe(t),Lt(e||{},r),n)},s&&(Ge.prototype[e]=function(t,i,n){return this.add(wt[e](t,Z(i)?i:(n=i)&&{},this),n)})},registerEase:function(t,e){ze[t]=Ye(e)},parseEase:function(t,e){return arguments.length?Ye(t,e):ze},getById:function(t){return h.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,n,r=new Ge(t);for(r.smoothChildTiming=$(t.smoothChildTiming),h.remove(r),r._dp=0,r._time=r._tTime=h._time,i=h._first;i;)n=i._next,!e&&!i._dur&&i instanceof ri&&i.vars.onComplete===i._targets[0]||$t(r,i,i._start-i._delay),i=n;return $t(h,r,0),r},utils:{wrap:function t(e,i,n){var r=i-e;return et(e)?ve(e,t(0,e.length),i):oe(n,(function(t){return(r+(t-e)%r)%r+e}))},wrapYoyo:function t(e,i,n){var r=i-e,s=2*r;return et(e)?ve(e,t(0,e.length-1),i):oe(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>r?s-t:t)}))},distribute: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 oe(i,(function(i){return ue(t,e,i)}))},splitColor:Ce,toArray:fe,selector:function(t){return t=fe(t)[0]||pt("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return fe(e,i.querySelectorAll?i:i===t?pt("Invalid scope")||f.createElement("div"):t)}},mapRange:we,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?tn[r]:"")+t},nn=function(){"undefined"!=typeof window&&window.document&&(Ti=window,Oi=Ti.document,Mi=Oi.documentElement,ki=Ji("div")||{style:{}},Ji("div"),Zi=en(Zi),$i=Zi+"Origin",ki.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ei=!!en("perspective"),Di=1)},rn=function t(e){var i,n=Ji("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),r=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Mi.appendChild(n),n.appendChild(this),this.style.display="block",e)try{i=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(i=this._gsapBBox());return r&&(s?r.insertBefore(this,s):r.appendChild(this)),Mi.removeChild(n),this.style.cssText=a,i},sn=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},an=function(t){var e;try{e=t.getBBox()}catch(i){e=rn.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===rn||(e=rn.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+sn(t,["x","cx","x1"])||0,y:+sn(t,["y","cy","y1"])||0,width:0,height:0}},on=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!an(t))},un=function(t,e){if(e){var i=t.style;e in Ai&&e!==$i&&(e=Zi),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Li,"-$1").toLowerCase())):i.removeAttribute(e)}},hn=function(t,e,i,n,r,s){var a=new vi(t._pt,e,i,0,1,s?Ui:Yi);return t._pt=a,a.b=n,a.e=r,t._props.push(i),a},ln={deg:1,rad:1,turn:1},cn=function t(e,i,n,r){var s,a,o,u,h=parseFloat(n)||0,l=(n+"").trim().substr((h+"").length)||"px",c=ki.style,f=Ri.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),_=100,m="px"===r,g="%"===r;return r===l||!h||ln[r]||ln[l]?h:("px"!==l&&!m&&(h=t(e,i,n,"px")),u=e.getCTM&&on(e),!g&&"%"!==l||!Ai[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=_+(m?l:r),a=~i.indexOf("adius")||"em"===r&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==Oi&&a.appendChild||(a=Oi.body),(o=a._gsap)&&g&&o.width&&f&&o.time===Le.time?Ct(h/o.width*_):((g||"%"===l)&&(c.position=Ki(e,"position")),a===e&&(c.position="static"),a.appendChild(ki),s=ki[d],a.removeChild(ki),c.position="absolute",f&&g&&((o=Mt(a)).time=Le.time,o.width=a[d]),Ct(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],Ct(g?h/s*_:h/100*s)))},fn=function(t,e,i,n){var r;return Di||nn(),e in Bi&&"transform"!==e&&~(e=Bi[e]).indexOf(",")&&(e=e.split(",")[0]),Ai[e]&&"transform"!==e?(r=Tn(t,n),r="transformOrigin"!==e?r[e]:r.svg?r.origin:On(Ki(t,$i))+" "+r.zOrigin+"px"):(!(r=t.style[e])||"auto"===r||n||~(r+"").indexOf("calc("))&&(r=mn[e]&&mn[e](t,e,i)||Ki(t,e)||Dt(t,e)||("opacity"===e?1:0)),i&&!~(r+"").trim().indexOf(" ")?cn(t,e,r,i)+i:r},pn=function(t,e,i,n){if(!i||"none"===i){var r=en(e,t,1),s=r&&Ki(t,r,1);s&&s!==i?(e=r,i=s):"borderColor"===e&&(i=Ki(t,"borderTopColor"))}var a,o,u,h,l,c,f,p,d,_,m,g,v=new vi(this._pt,t.style,e,0,1,fi),y=0,w=0;if(v.b=i,v.e=n,i+="","auto"===(n+="")&&(t.style[e]=n,n=Ki(t,e)||n,t.style[e]=i),Pe(a=[i,n]),n=a[1],u=(i=a[0]).match(rt)||[],(n.match(rt)||[]).length){for(;o=rt.exec(n);)f=o[0],d=n.substring(y,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),f!==(c=u[w++]||"")&&(h=parseFloat(c)||0,m=c.substr((h+"").length),(g="="===f.charAt(1)?+(f.charAt(0)+"1"):0)&&(f=f.substr(2)),p=parseFloat(f),_=f.substr((p+"").length),y=rt.lastIndex-_.length,_||(_=_||z.units[e]||m,y===n.length&&(n+=_,v.e+=_)),m!==_&&(h=cn(t,e,c,_)||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[r],Ai[i]&&(n=1,i="transformOrigin"===i?$i:Zi),un(s,i);n&&(un(s,Zi),u&&(u.svg&&s.removeAttribute("transform"),Tn(s,1),u.uncache=1))}},mn={clearProps:function(t,e,i,n,r){if("isFromStart"!==r.data){var s=t._pt=new vi(t._pt,e,i,0,0,_n);return s.u=n,s.pr=-10,s.tween=r,t._props.push(i),1}}},gn=[1,0,0,1,0,0],vn={},yn=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},wn=function(t){var e=Ki(t,Zi);return yn(e)?gn:e.substr(7).match(nt).map(Ct)},xn=function(t,e){var i,n,r,s,a=t._gsap||Mt(t),o=t.style,u=wn(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(r=t.transform.baseVal.consolidate().matrix).a,r.b,r.c,r.d,r.e,r.f]).join(",")?gn:u:(u!==gn||t.offsetParent||t===Mi||a.svg||(r=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,Mi.appendChild(t)),u=wn(t),r?o.display=r:un(t,"display"),s&&(n?i.insertBefore(t,n):i?i.appendChild(t):Mi.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},bn=function(t,e,i,n,r,s){var a,o,u,h=t._gsap,l=r||xn(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],x=e.split(" "),b=parseFloat(x[0])||0,T=parseFloat(x[1])||0;i?l!==gn&&(o=_*v-m*g)&&(u=b*(-m/o)+T*(_/o)-(_*w-m*y)/o,b=b*(v/o)+T*(-g/o)+(g*w-v*y)/o,T=u):(b=(a=an(t)).x+(~x[0].indexOf("%")?b/100*a.width:b),T=a.y+(~(x[1]||x[0]).indexOf("%")?T/100*a.height:T)),n||!1!==n&&h.smooth?(y=b-c,w=T-f,h.xOffset=p+(y*_+w*g)-y,h.yOffset=d+(y*m+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=b,h.yOrigin=T,h.smooth=!!n,h.origin=e,h.originIsAbsolute=!!i,t.style[$i]="0px 0px",s&&(hn(s,h,"xOrigin",c,b),hn(s,h,"yOrigin",f,T),hn(s,h,"xOffset",p,h.xOffset),hn(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",b+" "+T)},Tn=function(t,e){var i=t._gsap||new He(t);if("x"in i&&!e&&!i.uncache)return i;var n,r,s,a,o,u,h,l,c,f,p,d,_,m,g,v,y,w,x,b,T,O,M,D,k,C,E,A,S,I,P,L,R=t.style,B=i.scaleX<0,F="px",q="deg",j=Ki(t,$i)||"0";return n=r=s=u=h=l=c=f=p=0,a=o=1,i.svg=!(!t.getCTM||!on(t)),m=xn(t,i.svg),i.svg&&(D=(!i.uncache||"0px 0px"===j)&&!e&&t.getAttribute("data-svg-origin"),bn(t,D||j,!!D||i.originIsAbsolute,!1!==i.smooth,m)),d=i.xOrigin||0,_=i.yOrigin||0,m!==gn&&(w=m[0],x=m[1],b=m[2],T=m[3],n=O=m[4],r=M=m[5],6===m.length?(a=Math.sqrt(w*w+x*x),o=Math.sqrt(T*T+b*b),u=w||x?Pi(x,w)*Si:0,(c=b||T?Pi(b,T)*Si+u:0)&&(o*=Math.abs(Math.cos(c*Ii))),i.svg&&(n-=d-(d*w+_*b),r-=_-(d*x+_*T))):(L=m[6],I=m[7],E=m[8],A=m[9],S=m[10],P=m[11],n=m[12],r=m[13],s=m[14],h=(g=Pi(L,S))*Si,g&&(D=O*(v=Math.cos(-g))+E*(y=Math.sin(-g)),k=M*v+A*y,C=L*v+S*y,E=O*-y+E*v,A=M*-y+A*v,S=L*-y+S*v,P=I*-y+P*v,O=D,M=k,L=C),l=(g=Pi(-b,S))*Si,g&&(v=Math.cos(-g),P=T*(y=Math.sin(-g))+P*v,w=D=w*v-E*y,x=k=x*v-A*y,b=C=b*v-S*y),u=(g=Pi(x,w))*Si,g&&(D=w*(v=Math.cos(g))+x*(y=Math.sin(g)),k=O*v+M*y,x=x*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=Ct(Math.sqrt(w*w+x*x+b*b)),o=Ct(Math.sqrt(M*M+L*L)),g=Pi(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","")||!yn(Ki(t,Zi)),D&&t.setAttribute("transform",D))),Math.abs(c)>90&&Math.abs(c)<270&&(B?(a*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,c+=c<=0?180:-180)),i.x=n-((i.xPercent=n&&(i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-n)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+F,i.y=r-((i.yPercent=r&&(i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-r)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+F,i.z=s+F,i.scaleX=Ct(a),i.scaleY=Ct(o),i.rotation=Ct(u)+q,i.rotationX=Ct(h)+q,i.rotationY=Ct(l)+q,i.skewX=c+q,i.skewY=f+q,i.transformPerspective=p+F,(i.zOrigin=parseFloat(j.split(" ")[2])||0)&&(R[$i]=On(j)),i.xOffset=i.yOffset=0,i.force3D=z.force3D,i.renderTransform=i.svg?Sn:Ei?An:Dn,i.uncache=0,i},On=function(t){return(t=t.split(" "))[0]+" "+t[1]},Mn=function(t,e,i){var n=he(e);return Ct(parseFloat(e)+parseFloat(cn(t,"x",i+"px",n)))+n},Dn=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,An(t,e)},kn="0deg",Cn="0px",En=") ",An=function(t,e){var i=e||this,n=i.xPercent,r=i.yPercent,s=i.x,a=i.y,o=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,_=i.transformPerspective,m=i.force3D,g=i.target,v=i.zOrigin,y="",w="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==kn||h!==kn)){var x,b=parseFloat(h)*Ii,T=Math.sin(b),O=Math.cos(b);b=parseFloat(l)*Ii,x=Math.cos(b),s=Mn(g,s,T*x*-v),a=Mn(g,a,-Math.sin(b)*-v),o=Mn(g,o,O*x*-v+v)}_!==Cn&&(y+="perspective("+_+En),(n||r)&&(y+="translate("+n+"%, "+r+"%) "),(w||s!==Cn||a!==Cn||o!==Cn)&&(y+=o!==Cn||w?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+En),u!==kn&&(y+="rotate("+u+En),h!==kn&&(y+="rotateY("+h+En),l!==kn&&(y+="rotateX("+l+En),c===kn&&f===kn||(y+="skew("+c+", "+f+En),1===p&&1===d||(y+="scale("+p+", "+d+En),g.style[Zi]=y||"translate(0, 0)"},Sn=function(t,e){var i,n,r,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,c=o.y,f=o.rotation,p=o.skewX,d=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,w=o.xOffset,x=o.yOffset,b=o.forceCSS,T=parseFloat(l),O=parseFloat(c);f=parseFloat(f),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),f+=d),f||p?(f*=Ii,p*=Ii,i=Math.cos(f)*_,n=Math.sin(f)*_,r=Math.sin(f-p)*-m,s=Math.cos(f-p)*m,p&&(d*=Ii,a=Math.tan(p-d),r*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),i*=a=Math.sqrt(1+a*a),n*=a)),i=Ct(i),n=Ct(n),r=Ct(r),s=Ct(s)):(i=_,s=m,n=r=0),(T&&!~(l+"").indexOf("px")||O&&!~(c+"").indexOf("px"))&&(T=cn(g,"x",l,"px"),O=cn(g,"y",c,"px")),(v||y||w||x)&&(T=Ct(T+v-(v*i+y*r)+w),O=Ct(O+y-(v*n+y*s)+x)),(u||h)&&(a=g.getBBox(),T=Ct(T+u/100*a.width),O=Ct(O+h/100*a.height)),a="matrix("+i+","+n+","+r+","+s+","+T+","+O+")",g.setAttribute("transform",a),b&&(g.style[Zi]=a)},In=function(t,e,i,n,r,s){var a,o,u=360,h=V(r),l=parseFloat(r)*(h&&~r.indexOf("rad")?Si:1),c=s?l*s:l-n,f=n+c+"deg";return h&&("short"===(a=r.split("_")[1])&&(c%=u)!==c%180&&(c+=c<0?u:-360),"cw"===a&&c<0?c=(c+36e9)%u-~~(c/u)*u:"ccw"===a&&c>0&&(c=(c-36e9)%u-~~(c/u)*u)),t._pt=o=new vi(t._pt,e,i,n,c,qi),o.e=f,o.u="deg",t._props.push(i),o},Pn=function(t,e){for(var i in e)t[i]=e[i];return t},Ln=function(t,e,i){var n,r,s,a,o,u,h,l=Pn({},i._gsap),c=i.style;for(r in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[Zi]=e,n=Tn(i,1),un(i,Zi),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Zi],c[Zi]=e,n=Tn(i,1),c[Zi]=s),Ai)(s=l[r])!==(a=n[r])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(r)<0&&(o=he(s)!==(h=he(a))?cn(i,r,s,h):parseFloat(s),u=parseFloat(a),t._pt=new vi(t._pt,n,r,o,u-o,Fi),t._pt.u=h||0,t._props.push(r));Pn(n,l)};kt("padding,margin,Width,Radius",(function(t,e){var i="Top",n="Right",r="Bottom",s="Left",a=(e<3?[i,n,r,s]:[i+s,i+n,r+n,r+s]).map((function(i){return e<2?t+i:"border"+i+t}));mn[e>1?"border"+t:t]=function(t,e,i,n,r){var s,o;if(arguments.length<4)return s=a.map((function(e){return fn(t,e,i)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(n+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,r)}}));var Rn,zn,Bn,Fn={name:"css",register:nn,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,n,r){var s,a,o,u,h,l,c,f,p,d,_,m,g,v,y,w,x,b,T,O=this._props,M=t.style,D=i.vars.startAt;for(c in Di||nn(),e)if("autoRound"!==c&&(a=e[c],!yt[c]||!Ke(c,e,i,n,t,r)))if(h=typeof a,l=mn[c],"function"===h&&(h=typeof(a=a.call(i,n,t,r))),"string"===h&&~a.indexOf("random(")&&(a=ye(a)),l)l(this,t,c,a,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),a+="",Se.lastIndex=0,Se.test(s)||(f=he(s),p=he(a)),p?f!==p&&(s=cn(t,c,s,p)+p):f&&(a+=f),this.add(M,"setProperty",s,a,n,r,0,0,c),O.push(c);else if("undefined"!==h){if(D&&c in D?(s="function"==typeof D[c]?D[c].call(i,n,t,r):D[c],c in z.units&&!he(s)&&(s+=z.units[c]),"="===(s+"").charAt(1)&&(s=fn(t,c))):s=fn(t,c),u=parseFloat(s),(d="string"===h&&"="===a.charAt(1)?+(a.charAt(0)+"1"):0)&&(a=a.substr(2)),o=parseFloat(a),c in Bi&&("autoAlpha"===c&&(1===u&&"hidden"===fn(t,"visibility")&&o&&(u=0),hn(this,M,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==c&&"transform"!==c&&~(c=Bi[c]).indexOf(",")&&(c=c.split(",")[0])),_=c in Ai)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||Tn(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new vi(this._pt,M,Zi,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===c)this._pt=new vi(this._pt,g,"scaleY",g.scaleY,(d?d*o:o-g.scaleY)||0),O.push("scaleY",c),c+="X";else{if("transformOrigin"===c){x=void 0,b=void 0,T=void 0,x=(w=a).split(" "),b=x[0],T=x[1]||"50%","top"!==b&&"bottom"!==b&&"left"!==T&&"right"!==T||(w=b,b=T,T=w),x[0]=dn[b]||b,x[1]=dn[T]||T,a=x.join(" "),g.svg?bn(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==g.zOrigin&&hn(this,g,"zOrigin",g.zOrigin,p),hn(this,M,c,On(s),On(a)));continue}if("svgOrigin"===c){bn(t,a,1,v,0,this);continue}if(c in vn){In(this,g,c,u,a,d);continue}if("smoothOrigin"===c){hn(this,g,"smooth",g.smooth,a);continue}if("force3D"===c){g[c]=a;continue}if("transform"===c){Ln(this,a,t);continue}}else c in M||(c=en(c)||c);if(_||(o||0===o)&&(u||0===u)&&!zi.test(a)&&c in M)o||(o=0),(f=(s+"").substr((u+"").length))!==(p=he(a)||(c in z.units?z.units[c]:f))&&(u=cn(t,c,s,p)),this._pt=new vi(this._pt,_?g:M,c,u,d?d*o:o-u,_||"px"!==p&&"zIndex"!==c||!1===e.autoRound?Fi:Ni),this._pt.u=p||0,f!==p&&(this._pt.b=s,this._pt.r=ji);else if(c in M)pn.call(this,t,c,s,a);else{if(!(c in t)){ft(c,a);continue}this.add(t,c,s||t[c],a,n,r)}O.push(c)}y&&gi(this)},get:fn,aliases:Bi,getSetter:function(t,e,i){var n=Bi[e];return n&&n.indexOf(",")<0&&(e=n),e in Ai&&e!==$i&&(t._gsap.x||fn(t,"x"))?i&&Ci===i?"scale"===e?Hi:Vi:(Ci=i||{})&&("scale"===e?Qi:Gi):t.style&&!G(t.style[e])?Xi:~e.indexOf("-")?Wi:hi(t,e)},core:{_removeProperty:un,_getMatrix:xn}};bi.utils.checkPrefix=en,Bn=kt((Rn="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(zn="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Ai[t]=1})),kt(zn,(function(t){z.units[t]="deg",vn[t]=1})),Bi[Bn[13]]=Rn+","+zn,kt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Bi[e[1]]=Bn[e[0]]})),kt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){z.units[t]="px"})),bi.registerPlugin(Fn);var qn=bi.registerPlugin(Fn)||bi;qn.core.Tween;class jn{constructor(t){this.DOM={outer:t,inner:Array.isArray(t)?t.map((t=>t.querySelector(".oh__inner"))):t.querySelector(".oh__inner")}}in(){return this.outTimeline&&this.outTimeline.isActive()&&this.outTimeline.kill(),this.inTimeline=qn.timeline({defaults:{duration:1.2,ease:"expo"}}).set(this.DOM.inner,{y:"150%",rotate:15}).to(this.DOM.inner,{y:"0%",rotate:0,stagger:.03}),this.inTimeline}out(){return this.inTimeline&&this.inTimeline.isActive()&&this.inTimeline.kill(),this.outTimeline=qn.timeline({defaults:{duration:.7,ease:"power2"}}).to(this.DOM.inner,{y:"-150%",rotate:-5,stagger:.03}),this.outTimeline}}function Nn(t,e){for(var i=0;i-1&&t%1==0}(t.length)}(t)?Array.prototype.slice.call(t):[t]}function Hn(t){return Wn(t)&&/^(1|3|11)$/.test(t.nodeType)}function Qn(t){return"string"==typeof t}function Gn(t){var e,i=t;return Qn(t)&&(i=/^(#[a-z]\w+)$/.test(t.trim())?document.getElementById(t.trim().slice(1)):document.querySelectorAll(t)),(e=i,Vn(e).reduce((function(t,e){return t.concat(Vn(e))}),[])).filter(Hn)}function Zn(t,e,i){var n={},r=null;return Wn(t)&&(r=t[Zn.expando]||(t[Zn.expando]=++Zn.uid),n=Zn.cache[r]||(Zn.cache[r]={})),void 0===i?void 0===e?n:n[e]:void 0!==e?(n[e]=i,i):void 0}function $n(t){var e=t&&t[Zn.expando];e&&(delete t[e],delete Zn.cache[e])}function Jn(t,e){for(var i=Vn(t),n=i.length,r=0;r1&&void 0!==arguments[1]?arguments[1]:" ";return(t=t?String(t):"").split(e)}(function(t,e){var i=t.textContent;if(e){var n=t.innerHTML,r=document.createElement("div");r.innerHTML=n.replace(//g," ".concat(e," ")),i=r.textContent}return i.replace(/\s+/g," ").trim()}(t,a)).reduce((function(t,i,o,u){var l,c;return i===a?(n.appendChild(wr("br")),t):(r.chars&&(c=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return(t=yr(t))&&Qn(t)&&!e&&gr(t)?vr(t):t.split(e)}(i).map((function(t){return wr(s,{class:"".concat(e.splitClass," ").concat(e.charClass),style:"display: inline-block;",textContent:t})})),h=h.concat(c)),r.words||r.lines?(l=wr(s,{class:"".concat(e.wordClass," ").concat(e.splitClass),style:"display: inline-block; position: ".concat(r.words?"relative":"static"),children:r.chars?c:null,textContent:r.chars?null:i}),n.appendChild(l)):Jn(c,(function(t){n.appendChild(t)})),o!==u.length-1&&n.appendChild(Tr(" ")),r.words?t.concat(l):t)}),[]),t.innerHTML="",t.appendChild(n),!o&&!r.lines)return{chars:h,words:i,lines:[]};var l,c,f,p,d,_=[],m=[],g=Zn(t,"nodes",t.getElementsByTagName(s)),v=t.parentElement,y=t.nextElementSibling,w=window.getComputedStyle(t).textAlign;return o&&(p={left:n.offsetLeft,top:n.offsetTop,width:n.offsetWidth},f=t.offsetWidth,c=t.offsetHeight,Zn(t).cssWidth=t.style.width,Zn(t).cssHeight=t.style.height),Jn(g,(function(t){if(t!==n){var e,i=t.parentElement===n;r.lines&&i&&((e=Zn(t,"top",t.offsetTop))!==d&&(d=e,_.push(m=[])),m.push(t)),o&&(Zn(t).top=e||t.offsetTop,Zn(t).left=t.offsetLeft,Zn(t).width=t.offsetWidth,Zn(t).height=l||(l=t.offsetHeight))}})),v&&v.removeChild(t),r.lines&&(n=br(),u=_.map((function(t){var i=wr(s,{class:"".concat(e.splitClass," ").concat(e.lineClass),style:"display: block; text-align: ".concat(w,"; width: 100%;")});return n.appendChild(i),o&&(Zn(i).type="line",Zn(i).top=Zn(t[0]).top,Zn(i).height=l),Jn(t,(function(t,e,n){r.words?i.appendChild(t):r.chars?Jn(t.children,(function(t){i.appendChild(t)})):i.appendChild(Tr(t.textContent)),e!==n.length-1&&i.appendChild(Tr(" "))})),i})),t.replaceChild(n,t.firstChild)),o&&(t.style.width="".concat(t.style.width||f,"px"),t.style.height="".concat(c,"px"),Jn(g,(function(t){var e="line"===Zn(t).type,i=!e&&"line"===Zn(t.parentElement).type;t.style.top="".concat(i?0:Zn(t).top,"px"),t.style.left="".concat(e?p.left:Zn(t).left-(i?p.left:0),"px"),t.style.height="".concat(Zn(t).height,"px"),t.style.width="".concat(e?p.width:Zn(t).width,"px"),t.style.position="absolute"}))),v&&(y?v.insertBefore(t,y):v.appendChild(t)),{lines:u,words:r.words?i:[],chars:h}}var Mr=Un(xr,{}),Dr=function(){function t(e,i){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.isSplit=!1,this.settings=Un(Mr,Xn(i)),this.elements=Gn(e)||[],this.elements.length&&(this.originals=this.elements.map((function(t){return Zn(t,"html",Zn(t).html||t.innerHTML)})),this.settings.types&&this.split())}return Yn(t,null,[{key:"defaults",get:function(){return Mr},set:function(t){Mr=Un(Mr,Xn(t))}}]),Yn(t,[{key:"split",value:function(t){var e=this;this.revert(),this.lines=[],this.words=[],this.chars=[];var i=[window.pageXOffset,window.pageYOffset];void 0!==t&&(this.settings=Un(this.settings,Xn(t))),this.elements.forEach((function(t){var i=Or(t,e.settings),n=i.lines,r=i.words,s=i.chars;e.lines=e.lines.concat(n),e.words=e.words.concat(r),e.chars=e.chars.concat(s),Zn(t).isSplit=!0})),this.isSplit=!0,window.scrollTo(i[0],i[1]),this.elements.forEach((function(t){Vn(Zn(t).nodes||[]).forEach($n)}))}},{key:"revert",value:function(){var t=this;this.isSplit&&(this.lines=null,this.words=null,this.chars=null),this.elements.forEach((function(e){Zn(e).isSplit&&Zn(e).html&&(e.innerHTML=Zn(e).html,e.style.height=Zn(e).cssHeight||"",e.style.width=Zn(e).cssWidth||"",t.isSplit=!1)}))}}]),t}();class kr{constructor(t){this.DOM={animationElems:Array.isArray(t)?t:[t]},this.SplitTypeInstances=[],this.lines=[];for(const t of this.DOM.animationElems){const e=new Dr(t,{types:"lines"});s(e.lines,"div","oh"),this.lines.push(e.lines),this.SplitTypeInstances.push(e)}this.initEvents()}in(){return this.isVisible=!0,qn.killTweensOf(this.lines),qn.timeline({defaults:{duration:1.2,ease:"expo"}}).set(this.lines,{y:"150%",rotate:15}).to(this.lines,{y:"0%",rotate:0,stagger:.04})}out(){return this.isVisible=!1,qn.killTweensOf(this.lines),qn.timeline({defaults:{duration:.7,ease:"power2"}}).to(this.lines,{y:"-150%",rotate:-5,stagger:.02})}initEvents(){window.addEventListener("resize",(()=>{this.lines=[];for(const t of this.SplitTypeInstances)t.split(),s(t.lines,"div","oh"),this.lines.push(t.lines);this.isVisible||qn.set(this.lines,{y:"-150%"})}))}}class Cr{constructor(t,e){this.DOM={el:t,images:t.querySelectorAll(".panel > .panel__img"),title:t.querySelector(".details__content > .details__content-title"),text:t.querySelector(".details__content > .details__content-text"),link:t.querySelector(".details__content > .details__content-link"),closeDetailsCtrl:e},this.textLinesReveal=new kr(this.DOM.text),this.textReveal=new jn([this.DOM.title,this.DOM.link,this.DOM.closeDetailsCtrl])}open(){this.DOM.el.classList.add("details--open"),document.body.classList.add("state-details"),this.textLinesReveal.in(),this.textReveal.in(),qn.killTweensOf(this.DOM.images),qn.timeline({defaults:{duration:2,ease:"expo"}}).set(this.DOM.images,{opacity:0,y:"150%"}).to(this.DOM.images,{opacity:1,y:"0%",stagger:.02})}close(){this.textLinesReveal.out(),this.textReveal.out(),qn.killTweensOf(this.DOM.images),qn.timeline({defaults:{duration:.5,ease:"power2"},onComplete:()=>{this.DOM.el.classList.remove("details--open"),document.body.classList.remove("state-details")}}).to(this.DOM.images,{opacity:0,y:"-150%",stagger:.01})}}let Er={frame:document.querySelector(".frame")};Er.menuCtrl=document.querySelector(".menu-link"),Er.menuWrap=document.querySelector(".menu"),Er.textContent={heading:document.querySelector(".heading"),primary:document.querySelector(".content-primary"),secondary:document.querySelector(".content-secondary")},Er.img=document.querySelector(".deco");let Ar=0;const Sr=new kr([Er.textContent.primary,Er.textContent.secondary]),Ir=new class{constructor(t){this.DOM={el:t,outerImages:t.querySelectorAll(".deco__img-wrap"),innerImages:t.querySelectorAll(".deco__img")}}in(){return qn.killTweensOf([this.DOM.innerImages,this.DOM.outerImages,this.DOM.el]),qn.timeline({defaults:{duration:1.2,ease:"expo"}}).set(this.DOM.el,{y:"10%"}).set(this.DOM.innerImages,{y:"-101%"}).set(this.DOM.outerImages,{y:"101%"}).to([this.DOM.innerImages,this.DOM.outerImages,this.DOM.el],{y:"0%"})}out(){return qn.killTweensOf([this.DOM.innerImages,this.DOM.outerImages,this.DOM.el]),qn.timeline({defaults:{duration:.7,ease:"power2"}}).to([this.DOM.innerImages],{y:"101%"}).to([this.DOM.outerImages],{y:"-101%"},0).to([this.DOM.el],{y:"-10%"},0)}}(Er.img),Pr=new jn([Er.textContent.heading,Er.menuCtrl]),Lr=new class{constructor(t){this.DOM={el:t,items:[...t.querySelectorAll(".menu__item")],links:[...t.querySelectorAll(".menu__item-link")],closeCtrl:t.querySelector(".close--menu"),detailsEl:[...t.querySelectorAll(".menu__item-link")].map((t=>document.querySelector(t.href.substring(t.href.indexOf("#"))))),closeDetailsCtrl:document.querySelector(".details-wrap > .close--details")},this.textReveal=new jn([this.DOM.closeCtrl,...this.DOM.items]),this.detailsInstances=[],this.DOM.detailsEl.forEach((t=>this.detailsInstances.push(new Cr(t,this.DOM.closeDetailsCtrl)))),this.initEvents()}open(){this.DOM.el.classList.add("menu--open"),this.textReveal.in()}close(){this.textReveal.out().then((()=>this.DOM.el.classList.remove("menu--open")))}initEvents(){this.DOM.links.forEach(((t,e)=>{t.addEventListener("click",(t=>{t.preventDefault(),this.openDetails(e)}))})),this.DOM.closeDetailsCtrl.addEventListener("click",(()=>this.closeDetails()))}openDetails(t){this.menuItemCurrent=t,this.detailsInstances[this.menuItemCurrent].open(),this.close()}closeDetails(){-1!==this.menuItemCurrent&&(this.open(),this.detailsInstances[this.menuItemCurrent].close(),this.menuItemCurrent=-1)}}(Er.menuWrap),Rr=()=>{Pr.in(),Sr.in(),Ir.in(),zr()},zr=()=>{qn.to(Er.frame,{duration:1,ease:"expo",opacity:Number(!Ar)})};var Br;Er.menuCtrl.addEventListener("click",(()=>{0===Ar&&(Ar=1,Pr.out(),Sr.out(),Ir.out(),zr(),Lr.open())})),Lr.DOM.closeCtrl.addEventListener("click",(()=>{1===Ar&&(Ar=0,Rr(),Lr.close())})),(Br=".deco__img, .panel__img",new Promise(((t,e)=>{r(document.querySelectorAll(Br),{background:!0},t)}))).then((()=>{document.body.classList.remove("loading"),Rr()}))}(); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Content Preview and Menu Animation | Codrops

Content Preview and Menu Animation

We are Super.fluid

Flowing without any loss of kinetic energy — stir us and we form vortices that continue to rotate indefinitely.

Not all Bose–Einstein condensates can be regarded as superfluids, and not all superfluids are Bose–Einstein condensates.

Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image

Velocity

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

+ Read the story
Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image

Projectiles

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

+ Read the story
Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image

Gravity

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

+ Read the story
Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image

Quasimodo

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

+ Read the story
Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image

Hyperbolic

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

+ Read the story
Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image Some image

Ganymede

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

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

Content Preview and Menu Animation

19 | 24 |
25 | 26 | 35 | 36 | 37 | 38 |

We are Super.fluid

39 | 40 |

Flowing without any loss of kinetic energy — stir us and we form vortices that continue to rotate indefinitely.

41 | 42 |

Not all Bose–Einstein condensates can be regarded as superfluids, and not all superfluids are Bose–Einstein condensates.

43 | 44 | 48 | 49 |
50 |
51 |
52 | Some image 53 | Some image 54 | Some image 55 | Some image 56 | Some image 57 | Some image 58 | Some image 59 | Some image 60 | Some image 61 | Some image 62 | Some image 63 | Some image 64 | Some image 65 | Some image 66 | Some image 67 | Some image 68 |
69 |
70 |

Velocity

71 |

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

72 | + Read the story 73 |
74 |
75 |
76 |
77 | Some image 78 | Some image 79 | Some image 80 | Some image 81 | Some image 82 | Some image 83 | Some image 84 | Some image 85 | Some image 86 | Some image 87 | Some image 88 | Some image 89 | Some image 90 | Some image 91 | Some image 92 | Some image 93 |
94 |
95 |

Projectiles

96 |

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

97 | + Read the story 98 |
99 |
100 |
101 |
102 | Some image 103 | Some image 104 | Some image 105 | Some image 106 | Some image 107 | Some image 108 | Some image 109 | Some image 110 | Some image 111 | Some image 112 | Some image 113 | Some image 114 | Some image 115 | Some image 116 | Some image 117 | Some image 118 |
119 |
120 |

Gravity

121 |

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

122 | + Read the story 123 |
124 |
125 |
126 |
127 | Some image 128 | Some image 129 | Some image 130 | Some image 131 | Some image 132 | Some image 133 | Some image 134 | Some image 135 | Some image 136 | Some image 137 | Some image 138 | Some image 139 | Some image 140 | Some image 141 | Some image 142 | Some image 143 |
144 |
145 |

Quasimodo

146 |

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

147 | + Read the story 148 |
149 |
150 |
151 |
152 | Some image 153 | Some image 154 | Some image 155 | Some image 156 | Some image 157 | Some image 158 | Some image 159 | Some image 160 | Some image 161 | Some image 162 | Some image 163 | Some image 164 | Some image 165 | Some image 166 | Some image 167 | Some image 168 |
169 |
170 |

Hyperbolic

171 |

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

172 | + Read the story 173 |
174 |
175 |
176 |
177 | Some image 178 | Some image 179 | Some image 180 | Some image 181 | Some image 182 | Some image 183 | Some image 184 | Some image 185 | Some image 186 | Some image 187 | Some image 188 | Some image 189 | Some image 190 | Some image 191 | Some image 192 | Some image 193 |
194 |
195 |

Ganymede

196 |

Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of koilon.

197 | + Read the story 198 |
199 |
200 | 201 |
202 |
203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /src/js/details.js: -------------------------------------------------------------------------------- 1 | import { TextReveal } from './textReveal'; 2 | import { TextLinesReveal } from './textLinesReveal'; 3 | import gsap from 'gsap'; 4 | 5 | export class Details { 6 | constructor(el, closeDetailsCtrl) { 7 | this.DOM = { 8 | el: el, 9 | images: el.querySelectorAll('.panel > .panel__img'), 10 | title: el.querySelector('.details__content > .details__content-title'), 11 | text: el.querySelector('.details__content > .details__content-text'), 12 | link: el.querySelector('.details__content > .details__content-link'), 13 | closeDetailsCtrl: closeDetailsCtrl 14 | }; 15 | 16 | // textLinesReveal obj (this.DOM.text animation) 17 | this.textLinesReveal = new TextLinesReveal(this.DOM.text); 18 | // TextReveal obj (this.DOM.title and this.DOM.link animation) 19 | this.textReveal = new TextReveal([this.DOM.title, this.DOM.link, this.DOM.closeDetailsCtrl]); 20 | } 21 | open() { 22 | this.DOM.el.classList.add('details--open'); 23 | document.body.classList.add('state-details'); 24 | 25 | this.textLinesReveal.in(); 26 | this.textReveal.in(); 27 | 28 | gsap.killTweensOf(this.DOM.images); 29 | gsap.timeline({defaults: {duration: 2, ease: 'expo'}}) 30 | .set(this.DOM.images, { 31 | opacity: 0, 32 | y: '150%' 33 | }) 34 | .to(this.DOM.images, { 35 | opacity: 1, 36 | y: '0%', 37 | stagger: 0.02 38 | }); 39 | } 40 | close() { 41 | this.textLinesReveal.out(); 42 | this.textReveal.out(); 43 | 44 | gsap.killTweensOf(this.DOM.images); 45 | gsap.timeline({ 46 | defaults: {duration: 0.5, ease: 'power2'}, 47 | onComplete: () => { 48 | this.DOM.el.classList.remove('details--open'); 49 | document.body.classList.remove('state-details'); 50 | } 51 | }) 52 | .to(this.DOM.images, { 53 | opacity: 0, 54 | y: '-150%', 55 | stagger: 0.01 56 | }); 57 | } 58 | } -------------------------------------------------------------------------------- /src/js/imgReveal.js: -------------------------------------------------------------------------------- 1 | import SplitType from 'split-type'; 2 | import { wrapLines } from './utils'; 3 | import { gsap } from 'gsap'; 4 | 5 | export class ImgReveal { 6 | constructor(el) { 7 | this.DOM = { 8 | el: el, 9 | outerImages: el.querySelectorAll('.deco__img-wrap'), 10 | innerImages: el.querySelectorAll('.deco__img') 11 | }; 12 | } 13 | in() { 14 | gsap.killTweensOf([this.DOM.innerImages,this.DOM.outerImages,this.DOM.el]); 15 | return gsap.timeline({defaults: {duration: 1.2, ease: 'expo'}}) 16 | .set(this.DOM.el, { 17 | y: '10%' 18 | }) 19 | .set(this.DOM.innerImages, { 20 | y: '-101%' 21 | }) 22 | .set(this.DOM.outerImages, { 23 | y: '101%' 24 | }) 25 | .to([this.DOM.innerImages,this.DOM.outerImages,this.DOM.el], { 26 | y: '0%' 27 | }); 28 | } 29 | out() { 30 | gsap.killTweensOf([this.DOM.innerImages,this.DOM.outerImages,this.DOM.el]); 31 | return gsap.timeline({defaults: {duration: 0.7, ease: 'power2'}}) 32 | .to([this.DOM.innerImages], { 33 | y: '101%' 34 | }) 35 | .to([this.DOM.outerImages], { 36 | y: '-101%' 37 | }, 0) 38 | .to([this.DOM.el], { 39 | y: '-10%' 40 | }, 0); 41 | } 42 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import { Menu } from './menu'; 3 | import { TextReveal } from './textReveal'; 4 | import { TextLinesReveal } from './textLinesReveal'; 5 | import { ImgReveal } from './imgReveal'; 6 | import { gsap } from 'gsap'; 7 | 8 | // DOM elements: 9 | let DOM = { 10 | frame: document.querySelector('.frame') 11 | }; 12 | // menu button 13 | DOM.menuCtrl = document.querySelector('.menu-link'); 14 | // menu container 15 | DOM.menuWrap = document.querySelector('.menu'); 16 | // text content elements 17 | DOM.textContent = { 18 | heading: document.querySelector('.heading'), 19 | primary: document.querySelector('.content-primary'), 20 | secondary: document.querySelector('.content-secondary') 21 | }; 22 | // image 23 | DOM.img = document.querySelector('.deco'); 24 | 25 | // page state 26 | let state = 0; 27 | 28 | // text lines reveal obj 29 | const textLinesReveal = new TextLinesReveal([DOM.textContent.primary, DOM.textContent.secondary]); 30 | 31 | // Image reveal obj 32 | const imgReveal = new ImgReveal(DOM.img); 33 | 34 | // Other text animations 35 | const textReveal = new TextReveal([DOM.textContent.heading, DOM.menuCtrl]); 36 | 37 | // Menu 38 | const menu = new Menu(DOM.menuWrap); 39 | 40 | 41 | // show the initial texts and images 42 | const showContent = () => { 43 | textReveal.in(); 44 | // show texts (slide in) 45 | textLinesReveal.in(); 46 | // show image 47 | imgReveal.in(); 48 | // also show frame 49 | toggleFrame(); 50 | }; 51 | 52 | // hide the initial texts, images, and frame 53 | const hideContent = () => { 54 | // hide texts 55 | textReveal.out(); 56 | // hide texts (lines) 57 | textLinesReveal.out(); 58 | // hide image(s) 59 | imgReveal.out(); 60 | // also hide frame 61 | toggleFrame(); 62 | }; 63 | 64 | // show/hide frame elements 65 | const toggleFrame = () => { 66 | gsap.to(DOM.frame, { 67 | duration: 1, 68 | ease: 'expo', 69 | opacity: Number(!state) 70 | }); 71 | }; 72 | 73 | // Clicking the menu button will open the menu 74 | DOM.menuCtrl.addEventListener('click', () => { 75 | if ( state !== 0 ) return; 76 | state = 1; 77 | hideContent(); 78 | menu.open(); 79 | }); 80 | 81 | // Close the menu and back to initial page 82 | menu.DOM.closeCtrl.addEventListener('click', () => { 83 | if ( state !== 1 ) return; 84 | state = 0; 85 | showContent(); 86 | menu.close(); 87 | }); 88 | 89 | // Preload images 90 | preloadImages('.deco__img, .panel__img').then(() => { 91 | // Remove loader (loading class) 92 | document.body.classList.remove('loading'); 93 | // show content 94 | showContent(); 95 | }); -------------------------------------------------------------------------------- /src/js/menu.js: -------------------------------------------------------------------------------- 1 | import { TextReveal } from './textReveal'; 2 | import { Details } from './details'; 3 | 4 | export class Menu { 5 | constructor(el) { 6 | this.DOM = { 7 | el: el, 8 | items: [...el.querySelectorAll('.menu__item')], 9 | links: [...el.querySelectorAll('.menu__item-link')], 10 | closeCtrl: el.querySelector('.close--menu'), 11 | // .details HTML elements (one per menu item) 12 | detailsEl: [...el.querySelectorAll('.menu__item-link')].map(item => document.querySelector(item.href.substring(item.href.indexOf('#')))), 13 | // close details/images page 14 | closeDetailsCtrl: document.querySelector('.details-wrap > .close--details') 15 | }; 16 | // text reveal animations (both the close control and the menu items will slide in/out) 17 | this.textReveal = new TextReveal([this.DOM.closeCtrl,...this.DOM.items]); 18 | // Details instances 19 | this.detailsInstances = []; 20 | this.DOM.detailsEl.forEach(detailsEl => this.detailsInstances.push(new Details(detailsEl, this.DOM.closeDetailsCtrl))); 21 | this.initEvents(); 22 | } 23 | // open the menu (animate the menu items in) 24 | open() { 25 | this.DOM.el.classList.add('menu--open'); 26 | // show menu items and show close ctrl 27 | this.textReveal.in(); 28 | } 29 | // close the menu (animate the menu items out) 30 | close() { 31 | this.textReveal.out().then(() => this.DOM.el.classList.remove('menu--open')); 32 | } 33 | initEvents() { 34 | // clicking a menu link will open the gallery 35 | this.DOM.links.forEach((link, pos) => { 36 | link.addEventListener('click', ev => { 37 | ev.preventDefault(); 38 | this.openDetails(pos); 39 | }); 40 | }); 41 | 42 | this.DOM.closeDetailsCtrl.addEventListener('click', () => this.closeDetails()); 43 | } 44 | openDetails(pos) { 45 | // save position 46 | this.menuItemCurrent = pos; 47 | 48 | // show the details 49 | this.detailsInstances[this.menuItemCurrent].open(); 50 | 51 | // close the menu (animate the menu items out) 52 | this.close(); 53 | } 54 | closeDetails() { 55 | if ( this.menuItemCurrent === -1 ) return; 56 | 57 | // open the menu (animate the menu items in) 58 | this.open(); 59 | 60 | this.detailsInstances[this.menuItemCurrent].close(); 61 | 62 | // reset 63 | this.menuItemCurrent = -1; 64 | } 65 | } -------------------------------------------------------------------------------- /src/js/textLinesReveal.js: -------------------------------------------------------------------------------- 1 | import SplitType from 'split-type'; 2 | import { wrapLines } from './utils'; 3 | import { gsap } from 'gsap'; 4 | 5 | export class TextLinesReveal { 6 | constructor(animationElems) { 7 | this.DOM = { 8 | animationElems: Array.isArray(animationElems) ? animationElems : [animationElems] 9 | }; 10 | 11 | // array of SplitType instances 12 | this.SplitTypeInstances = []; 13 | // array of all HTML .line 14 | this.lines = []; 15 | 16 | for (const el of this.DOM.animationElems) { 17 | const SplitTypeInstance = new SplitType(el, { types: 'lines' }); 18 | // wrap the lines (div with class .oh) 19 | // the inner child will be the one animating the transform 20 | wrapLines(SplitTypeInstance.lines, 'div', 'oh'); 21 | this.lines.push(SplitTypeInstance.lines); 22 | // keep a reference to the SplitType instance 23 | this.SplitTypeInstances.push(SplitTypeInstance); 24 | } 25 | 26 | this.initEvents(); 27 | } 28 | in() { 29 | // lines are visible 30 | this.isVisible = true; 31 | 32 | // animation 33 | gsap.killTweensOf(this.lines); 34 | return gsap.timeline({defaults: {duration: 1.2, ease: 'expo'}}) 35 | .set(this.lines, { 36 | y: '150%', 37 | rotate: 15 38 | }) 39 | .to(this.lines, { 40 | y: '0%', 41 | rotate: 0, 42 | stagger: 0.04 43 | }); 44 | } 45 | out() { 46 | // lines are invisible 47 | this.isVisible = false; 48 | 49 | // animation 50 | gsap.killTweensOf(this.lines); 51 | return gsap.timeline({ 52 | defaults: {duration: 0.7, ease: 'power2'} 53 | }) 54 | .to(this.lines, { 55 | y: '-150%', 56 | rotate: -5, 57 | stagger: 0.02 58 | }); 59 | } 60 | initEvents() { 61 | window.addEventListener('resize', () => { 62 | // empty the lines array 63 | this.lines = []; 64 | // re initialize the Split Text 65 | for (const instance of this.SplitTypeInstances) { 66 | // re-split text 67 | // https://github.com/lukePeavey/SplitType#instancesplitoptions-void 68 | instance.split(); 69 | 70 | // need to wrap again the new lines elements (div with class .oh) 71 | wrapLines(instance.lines, 'div', 'oh'); 72 | this.lines.push(instance.lines); 73 | } 74 | // hide the lines 75 | if ( !this.isVisible ) { 76 | gsap.set(this.lines, {y: '-150%'}); 77 | } 78 | }); 79 | } 80 | } -------------------------------------------------------------------------------- /src/js/textReveal.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | 3 | export class TextReveal { 4 | constructor(el) { 5 | this.DOM = { 6 | outer: el, 7 | inner: Array.isArray(el) ? el.map(outer => outer.querySelector('.oh__inner')) : el.querySelector('.oh__inner') 8 | } 9 | } 10 | in() { 11 | if ( this.outTimeline && this.outTimeline.isActive() ) { 12 | this.outTimeline.kill(); 13 | } 14 | 15 | this.inTimeline = gsap.timeline({defaults: {duration: 1.2, ease: 'expo'}}) 16 | .set(this.DOM.inner, { 17 | y: '150%', 18 | rotate: 15 19 | }) 20 | .to(this.DOM.inner, { 21 | y: '0%', 22 | rotate: 0, 23 | stagger: 0.03 24 | }); 25 | return this.inTimeline; 26 | } 27 | out() { 28 | if ( this.inTimeline && this.inTimeline.isActive() ) { 29 | this.inTimeline.kill(); 30 | } 31 | 32 | this.outTimeline = gsap.timeline({defaults: {duration: 0.7, ease: 'power2'}}) 33 | .to(this.DOM.inner, { 34 | y: '-150%', 35 | rotate: -5, 36 | stagger: 0.03 37 | }); 38 | return this.outTimeline; 39 | } 40 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Preload images 4 | const preloadImages = (selector) => { 5 | return new Promise((resolve, reject) => { 6 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 7 | }); 8 | }; 9 | 10 | // wrap each element of an array 11 | // elems - the array of elements to wrap 12 | // wrapType - type of wrapper ('div', 'span' etc) 13 | // wrapClass - wrapper class(s) 14 | const wrapLines = (elems, wrapType, wrapClass) => { 15 | elems.forEach(char => { 16 | // add a wrap for every char (overflow hidden) 17 | const wrapEl = document.createElement(wrapType); 18 | wrapEl.classList = wrapClass; 19 | char.parentNode.appendChild(wrapEl); 20 | wrapEl.appendChild(char); 21 | }); 22 | } 23 | 24 | export {preloadImages, wrapLines}; --------------------------------------------------------------------------------