├── .gitattributes ├── .gitignore ├── .htmlnanorc ├── LICENSE ├── README.md ├── dist ├── 1.1770e3b3.jpg ├── 10.f7990335.jpg ├── 2.07ca36b5.jpg ├── 3.f6f48295.jpg ├── 4.516b9c03.jpg ├── 5.95d97ae8.jpg ├── 6.56a5d53b.jpg ├── 7.87dc6e8b.jpg ├── 8.0bda5054.jpg ├── 9.27ccf354.jpg ├── favicon.a64e97b2.ico ├── index.b5e7c14d.js ├── index.d73f7ad5.css ├── index.e9a2d1b4.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html └── js ├── contentItem.js ├── index.js ├── slideshow.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /.htmlnanorc: -------------------------------------------------------------------------------- 1 | { 2 | "minifySvg": false 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Content Layout Transition 2 | 3 | A layout that animates from an initial stack view to a content view with larger images that can be navigated. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/05/StackLayoutTransition_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=63558) 8 | 9 | [Demo](http://tympanus.net/Development/ContentLayoutTransition/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from [Unsplash](https://unsplash.com/) 35 | 36 | ## Misc 37 | 38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 39 | 40 | ## License 41 | [MIT](LICENSE) 42 | 43 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/1.1770e3b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/1.1770e3b3.jpg -------------------------------------------------------------------------------- /dist/10.f7990335.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/10.f7990335.jpg -------------------------------------------------------------------------------- /dist/2.07ca36b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/2.07ca36b5.jpg -------------------------------------------------------------------------------- /dist/3.f6f48295.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/3.f6f48295.jpg -------------------------------------------------------------------------------- /dist/4.516b9c03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/4.516b9c03.jpg -------------------------------------------------------------------------------- /dist/5.95d97ae8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/5.95d97ae8.jpg -------------------------------------------------------------------------------- /dist/6.56a5d53b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/6.56a5d53b.jpg -------------------------------------------------------------------------------- /dist/7.87dc6e8b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/7.87dc6e8b.jpg -------------------------------------------------------------------------------- /dist/8.0bda5054.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/8.0bda5054.jpg -------------------------------------------------------------------------------- /dist/9.27ccf354.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/9.27ccf354.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ContentLayoutTransition/ef96cdc22f1d7b8b426f73283c6c70e163eb9b29/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{--color-text:#fff;--color-text-alt:#787878;--color-bg:#000;--color-link:#fff;--color-link-hover:#ccc;--page-padding:2rem;--stack-margin:10rem;--slide-gap:2vh;--stack-width:38vw;--stack-item-height:8vh;--slide-width:40vw;--slide-height:50vh;margin:0;font-size:15px;position:relative}body{color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:acumin-pro,sans-serif;position:relative}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width:60px;height:60px;opacity:.4;background:var(--color-link);border-radius:50%;margin:-30px 0 0 -30px;animation:loaderAnim .7s linear infinite alternate forwards;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);outline:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.oh{position:relative;overflow:hidden}.oh__inner{will-change:transform;display:inline-block}.unbutton{color:inherit;font:inherit;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}.frame{text-align:center;width:100%;padding:3rem 5vw;position:absolute}.frame__title{flex-wrap:wrap;justify-content:center;display:flex}.frame__title-main{margin:0;font-size:1rem;font-weight:400}.frame__title-back{align-items:flex-end;display:flex;position:relative}.frame__title-back span{display:none}.frame__title-back svg{fill:#fff}.frame__title-prev{width:100%}.frame__logo{line-height:.9}.frame__logo-title{margin:0;font-family:wayfinder-cf,serif;font-size:2.75rem;font-style:normal;font-weight:100}.frame__logo-subtitle{margin-left:.75rem}.stack-wrap{width:100%;position:absolute;top:0}.stack{width:var(--stack-width);min-width:300px;grid-gap:2vh;align-items:center;justify-items:center;margin:0 auto;display:grid}.stack__item{opacity:.2;width:100%;height:var(--stack-item-height);cursor:pointer;will-change:width,height,transform,opacity;background-position:50%;background-size:cover;transition:opacity .3s}.stack__item:hover{opacity:.5}.stack__item--empty{pointer-events:none;height:var(--stack-margin)}.slides{width:100%;background:var(--color-bg);position:relative}.slides .stack{width:100%;margin-left:auto;margin-right:var(--slide-gap)}.slides .stack__item{pointer-events:none;opacity:.5;height:var(--slide-height)}.slides .stack__item--current{opacity:.6}.title{pointer-events:none;margin-bottom:15vh;position:fixed;bottom:0;left:50vw}.title__main{margin:0;font-family:wayfinder-cf,serif;font-size:11vw;font-weight:100;line-height:1}.title__sub{margin-top:-1.5vw;margin-left:.25vw;font-size:max(1rem,min(2.5vw,2.5rem));font-weight:200;line-height:1;display:block}.content{pointer-events:none;z-index:100;height:100vh;width:100%;padding:var(--page-padding);grid-gap:var(--slide-gap);grid-template:".""back""slides"1fr"."/1fr;display:grid;position:fixed;top:0;left:0}.content__item{height:0;opacity:0;pointer-events:none;grid-area:slides;position:absolute;overflow:hidden}.content__item--current{pointer-events:auto;height:auto;opacity:1;flex-direction:column;justify-content:center;align-items:flex-start;display:flex;position:relative;overflow:visible}.content__item-title{color:#c87e4f;margin:0 0 2rem;font-family:wayfinder-cf,serif;font-size:max(2rem,min(9vw,10rem));font-weight:100;line-height:1}.content__item-title>span{white-space:nowrap;line-height:1;display:block}.content__item-title>span:not(:first-child){margin-top:-1vw}.content__back{cursor:pointer;opacity:0;pointer-events:none;grid-area:back;align-items:center;display:flex}.content__back svg{fill:#fff;margin-right:.5rem}.content__nav-wrap{flex-direction:column;grid-area:1/1/-1/-1;justify-content:space-between;display:flex}.content__nav{z-index:100;cursor:pointer;opacity:0;pointer-events:none;height:calc((100vh - var(--slide-height) - var(--slide-gap)*4)/3);flex:none;align-self:center}.content__nav svg{stroke:#fff;stroke-width:3px;width:auto;height:100%;opacity:.5;transition:opacity .3s}.content__nav:hover svg,.content__nav:focus-visible svg{opacity:1}.content__nav--next svg{transform:scale(-1)}.content--open .content__back,.content--open .content__nav{opacity:1;pointer-events:auto}@media screen and (min-width:53em){:root{--stack-margin:50vh}.frame{text-align:left;z-index:100;max-width:none;height:100vh;z-index:1000;padding:var(--page-padding);pointer-events:none;grid-template:"logo.sponsor"". . .""title title."/auto auto 1fr;align-content:space-between;display:grid;position:fixed;top:0;left:0}.frame__title{color:var(--color-text-alt);grid-area:title;justify-content:flex-start}.frame__logo{grid-area:logo}.frame a{pointer-events:auto}.content{grid-column-gap:var(--page-padding);padding:var(--page-padding)var(--slide-gap)var(--page-padding)var(--page-padding);grid-template:"back slides""title slides"1fr".slides"10vh/1fr 50vw}.content__item{text-align:left;grid-area:title;align-self:end}.content__item-title{flex-direction:column;display:inline-flex}.content__item-title>span:first-child{padding-right:2rem}.content__item-title>span:last-child{margin-left:auto}.content__item-description{max-width:300px}.content__back{grid-area:back;justify-self:end}.content__nav-wrap{grid-area:slides}.slides{width:50vw;margin-left:auto;margin-right:var(--slide-gap);background:0 0}.slides .stack__item--current{opacity:1}} -------------------------------------------------------------------------------- /dist/index.e9a2d1b4.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},i={},n=t.parcelRequire348c;null==n&&((n=function(t){if(t in e)return e[t].exports;if(t in i){var n=i[t];delete i[t];var r={id:t,exports:{}};return e[t]=r,n.call(r.exports,r,r.exports),r.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){i[t]=e},t.parcelRequire348c=n),n.register("4hJWI",(function(t,e){!function(e,i){t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},n=i[t]=i[t]||[];return n.includes(e)||n.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let n=i.indexOf(e);return-1!=n&&i.splice(n,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let n=this._onceEvents&&this._onceEvents[t];for(let r of i){n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t}))}));var r={}; 2 | /*! 3 | * imagesLoaded v5.0.0 4 | * JavaScript is all like "You images are done yet or what?" 5 | * MIT License 6 | */!function(t,e){r?r=e(t,n("4hJWI")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:r,(function(t,e){let i=t.jQuery,n=t.console;function r(t,e,s){if(!(this instanceof r))return new r(t,e,s);let o=t;var a;("string"==typeof t&&(o=document.querySelectorAll(t)),o)?(this.elements=(a=o,Array.isArray(a)?a:"object"==typeof a&&"number"==typeof a.length?[...a]:[a]),this.options={},"function"==typeof e?s=e:Object.assign(this.options,e),s&&this.on("always",s),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):n.error(`Bad element for imagesLoaded ${o||t}`)}r.prototype=Object.create(e.prototype),r.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const s=[1,9,11];r.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!s.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const o=/url\((['"])?(.*?)\1\)/gi;function a(t){this.img=t}function u(t,e){this.url=t,this.element=e,this.img=new Image}return r.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=o.exec(e.backgroundImage);for(;null!==i;){let n=i&&i[2];n&&this.addBackground(n,t),i=o.exec(e.backgroundImage)}},r.prototype.addImage=function(t){let e=new a(t);this.images.push(e)},r.prototype.addBackground=function(t,e){let i=new u(t,e);this.images.push(i)},r.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},r.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&n&&n.log(`progress: ${i}`,t,e)},r.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},a.prototype=Object.create(e.prototype),a.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.img.crossOrigin&&(this.proxyImage.crossOrigin=this.img.crossOrigin),this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.currentSrc||this.img.src)},a.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},a.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,n="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,n,e])},a.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},a.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},a.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},a.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype=Object.create(a.prototype),u.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},u.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},r.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new r(this,t,e).jqDeferred.promise(i(this))})},r.makeJQueryPlugin(),r}));function s(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class o{constructor(t){s(this,"DOM",{el:null,title:null,description:null,texts:null}),this.DOM.el=t,this.DOM.title=this.DOM.el.querySelector(".content__item-title"),this.DOM.description=this.DOM.el.querySelector(".content__item-description"),this.DOM.texts=[...this.DOM.el.querySelectorAll(".oh > .oh__inner")]}}function a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function u(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 7 | /*! 8 | * GSAP 3.10.4 9 | * https://greensock.com 10 | * 11 | * @license Copyright 2008-2022, GreenSock. All rights reserved. 12 | * Subject to the terms at https://greensock.com/standard-license or for 13 | * Club GreenSock members, the agreement issued with that membership. 14 | * @author: Jack Doyle, jack@greensock.com 15 | */var h,l,c,f,p,d,m,g,_,v,y,x,b,w,T,O,M,k,D,C,E,S,A,P,I,L,B,R,z={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},X={duration:.5,overwrite:!1,delay:0},Y=2*Math.PI,F=Y/4,V=0,N=Math.sqrt,q=Math.cos,j=Math.sin,U=function(t){return"string"==typeof t},W=function(t){return"function"==typeof t},H=function(t){return"number"==typeof t},G=function(t){return void 0===t},Q=function(t){return"object"==typeof t},$=function(t){return!1!==t},J=function(){return"undefined"!=typeof window},Z=function(t){return W(t)||U(t)},K="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},tt=Array.isArray,et=/(?:-?\.?\d|\.)+/gi,it=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,nt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,rt=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,st=/[+-]=-?[.\d]+/,ot=/[^,'"\[\]\s]+/gi,at=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ut={},ht={},lt=function(t){return(ht=Rt(t,ut))&&Mi},ct=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},ft=function(t,e){return!e&&console.warn(t)},pt=function(t,e){return t&&(ut[t]=e)&&ht&&(ht[t]=e)||ut},dt=function(){return 0},mt={},gt=[],_t={},vt={},yt={},xt=30,bt=[],wt="",Tt=function(t){var e,i,n=t[0];if(Q(n)||W(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 Ge(t[i],e)))||t.splice(i,1);return t},Ot=function(t){return t._gsap||Tt(de(t))[0]._gsap},Mt=function(t,e,i){return(i=t[e])&&W(i)?t[e]():G(i)&&t.getAttribute&&t.getAttribute(e)||i},kt=function(t,e){return(t=t.split(",")).forEach(e)||t},Dt=function(t){return Math.round(1e5*t)/1e5||0},Ct=function(t){return Math.round(1e7*t)/1e7||0},Et=function(t,e){var i=e.charAt(0),n=parseFloat(e.substr(2));return t=parseFloat(t),"+"===i?t+n:"-"===i?t-n:"*"===i?t*n:t/n},St=function(t,e){for(var i=e.length,n=0;t.indexOf(e[n])<0&&++ns;)o=o._prev;return o?(e._next=o._next,o._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[n]=e,e._prev=o,e.parent=e._dp=t,e},Vt=function(t,e,i,n){void 0===i&&(i="_first"),void 0===n&&(n="_last");var r=e._prev,s=e._next;r?r._next=s:t[i]===e&&(t[i]=s),s?s._prev=r:t[n]===e&&(t[n]=r),e._next=e._prev=e.parent=null},Nt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},qt=function(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},jt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Ut=function t(e){return!e||e._ts&&t(e.parent)},Wt=function(t){return t._repeat?Ht(t._tTime,t=t.duration()+t._rDelay)*t:0},Ht=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Gt=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||1e-8)||0))},$t=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||qt(i,t)),t},Jt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Gt(t.rawTime(),e),(!e._dur||he(0,e.totalDuration(),i)-e._tTime>1e-8)&&e.render(i,!0)),qt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&i.totalTime(i._tTime),i=i._dp;t._zTime=-1e-8}},Zt=function(t,e,i,n){return e.parent&&Nt(e),e._start=Ct((H(i)?i:i||t!==l?oe(t,i,e):t._time)+e._delay),e._end=Ct(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),Ft(t,e,"_first","_last",t._sort?"_start":0),ie(e)||(t._recent=e),n||Jt(t,e),t},Kt=function(t,e){return(ut.ScrollTrigger||ct("scrollTrigger",e))&&ut.ScrollTrigger.create(e,t)},te=function(t,e,i,n){return ii(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&m!==Be.frame?(gt.push(t),t._lazy=[e,n],1):void 0:1},ee=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},ie=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},ne=function(t,e,i,n){var r=t._repeat,s=Ct(e)||0,o=t._tTime/t._tDur;return o&&!n&&(t._time*=s/t._dur),t._dur=s,t._tDur=r?r<0?1e10:Ct(s*(r+1)+t._rDelay*r):s,o>0&&!n?$t(t,t._tTime=t._tDur*o):t.parent&&Qt(t),i||qt(t.parent,t),t},re=function(t){return t instanceof $e?qt(t):ne(t,t._dur)},se={_start:0,endTime:dt,totalDuration:dt},oe=function t(e,i,n){var r,s,o,a=e.labels,u=e._recent||se,h=e.duration()>=1e8?u.endTime(!1):e._dur;return U(i)&&(isNaN(i)||i in a)?(s=i.charAt(0),o="%"===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)*(o?(r<0?u:n).totalDuration()/100:1)):r<0?(i in a||(a[i]=h),a[i]):(s=parseFloat(i.charAt(r-1)+i.substr(r+1)),o&&n&&(s=s/100*(tt(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=H(e[1]),o=(s?2:1)+(t<2?0:1),a=e[o];if(s&&(a.duration=e[1]),a.parent=i,t){for(n=a,r=i;r&&!("immediateRender"in n);)n=r.vars.defaults||{},r=$(r.vars.inherit)&&r.parent;a.immediateRender=$(n.immediateRender),t<2?a.runBackwards=1:a.startAt=e[o-1]}return new ai(e[0],a,e[o+1])},ue=function(t,e){return t||0===t?e(t):e},he=function(t,e,i){return ie?e:i},le=function(t,e){return U(t)&&(e=at.exec(t))?e[1]:""},ce=[].slice,fe=function(t,e){return t&&Q(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&Q(t[0]))&&!t.nodeType&&t!==c},pe=function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var n;return U(t)&&!e||fe(t,1)?(n=i).push.apply(n,de(t)):i.push(t)}))||i},de=function(t,e,i){return!U(t)||i||!f&&Re()?tt(t)?pe(t,i):fe(t)?ce.call(t,0):t?[t]:[]:ce.call((e||p).querySelectorAll(t),0)},me=function(t){return t.sort((function(){return.5-Math.random()}))},ge=function(t){if(W(t))return t;var e=Q(t)?t:{each:t},i=qe(e.ease),n=e.from||0,r=parseFloat(e.base)||0,s={},o=n>0&&n<1,a=isNaN(n)||o,u=e.axis,h=n,l=n;return U(n)?h=l={center:.5,edges:.5,end:1}[n]||0:!o&&a&&(h=n[0],l=n[1]),function(t,o,c){var f,p,d,m,g,_,v,y,x,b=(c||e).length,w=s[b];if(!w){if(!(x="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=c[x++].getBoundingClientRect().left)&&xv&&(v=g),gb?b-1:u?"y"===u?b/x:x:Math.max(x,b/x))||0)*("edges"===n?-1:1),w.b=b<0?r-b:r,w.u=le(e.amount||e.each)||0,i=i&&b<0?Ve(i):i}return b=(w[t]-w.min)/w.max||0,Ct(w.b+(i?i(b):b)*w.v)+w.u}},_e=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(i){var n=Math.round(parseFloat(i)/t)*t*e;return(n-n%1)/e+(H(i)?0:le(i))}},ve=function(t,e){var i,n,r=tt(t);return!r&&Q(t)&&(i=r=t.radius||1e8,t.values?(t=de(t.values),(n=!H(t[0]))&&(i*=i)):t=_e(t.increment)),ue(e,r?W(t)?function(e){return n=t(e),Math.abs(n-e)<=i?n:e}:function(e){for(var r,s,o=parseFloat(n?e.x:e),a=parseFloat(n?e.y:0),u=1e8,h=0,l=t.length;l--;)(r=n?(r=t[l].x-o)*r+(s=t[l].y-a)*s:Math.abs(t[l]-o))(r=Math.abs(r))&&(s=n,a=r);return s},Oe=function(t,e,i){var n,r,s=t.vars,o=s[e];if(o)return n=s[e+"Params"],r=s.callbackScope||t,i&>.length&&At(),n?o.apply(r,n):o.call(r)},Me=function(t){return Nt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Oe(t,"onInterrupt"),t},ke=function(t){var e=(t=!t.name&&t.default||t).name,i=W(t),n=e&&!i&&t.init?function(){this._props=[]}:t,r={init:dt,render:gi,add:ti,kill:vi,modifier:_i,rawVars:0},s={targetTest:0,get:0,getSetter:fi,aliases:{},register:0};if(Re(),t!==n){if(vt[e])return;Bt(n,Bt(Xt(t,r),s)),Rt(n.prototype,Rt(r,Xt(t,s))),vt[n.prop=e]=n,t.targetTest&&(bt.push(n),mt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}pt(e,n),t.register&&t.register(Mi,n,bi)},De={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},Ce=function(t,e,i){return 255*(6*(t+=t<0?1:t>1?-1:0)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)+.5|0},Ee=function(t,e,i){var n,r,s,o,a,u,h,l,c,f,p=t?H(t)?[t>>16,t>>8&255,255&t]: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&255,255&p,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(p=f=t.match(et),e){if(~t.indexOf("="))return p=t.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,a=+p[1]/100,n=2*(u=+p[2]/100)-(r=u<=.5?u*(a+1):u+a-u*a),p.length>3&&(p[3]*=1),p[0]=Ce(o+1/3,n,r),p[1]=Ce(o,n,r),p[2]=Ce(o-1/3,n,r);else p=t.match(et)||De.transparent;p=p.map(Number)}return e&&!f&&(n=p[0]/255,r=p[1]/255,s=p[2]/255,u=((h=Math.max(n,r,s))+(l=Math.min(n,r,s)))/2,h===l?o=a=0:(c=h-l,a=u>.5?c/(2-h-l):c/(h+l),o=h===n?(r-s)/c+(rM&&(D+=o-k),((i=(r=(C+=o)-D)-S)>0||a)&&(s=++b.frame,w=r-1e3*b.time,b.time=r/=1e3,S+=i+(i>=E?4:E-i),n=1),a||(v=y(t)),n)for(T=0;T=e&&T--},_listeners:A=[]}),Re=function(){return!_&&Be.wake()},ze={},Xe=/^[\d.\-M][\d.\-,\s]/,Ye=/["']/g,Fe=function(t){for(var e,i,n,r={},s=t.substr(1,t.length-3).split(":"),o=s[0],a=1,u=s.length;a1&&o.config?o.config.apply(null,~t.indexOf("{")?[Fe(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),o=s/Y*(Math.asin(1/r)||0),a=function(t){return 1===t?1:r*Math.pow(2,-10*t)*j((t-o)*s)+1},u="out"===e?a:"in"===e?function(t){return 1-a(1-t)}:Ue(a);return s=Y/s,u.config=function(i,n){return t(e,i,n)},u},He=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)}:Ue(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;je(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,je("Elastic",We("in"),We("out"),We()),I=7.5625,B=1/(L=2.75),je("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,ne(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($t(this,t),!i._dp||i.parent||Jt(i,this);i&&i.parent;)i.parent._time!==i._start+(i._ts>=0?i._tTime/i._ts:(i.totalDuration()-i._tTime)/-i._ts)&&i.totalTime(i._tTime,!0),i=i.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&Zt(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&1e-8===Math.abs(this._zTime)||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Pt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+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?Ht(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?Gt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,this.totalTime(he(-this._delay,this._tDur,e),!0),Qt(this),jt(this)},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Re(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&1e-8!==Math.abs(this._zTime)&&(this._tTime-=1e-8)))),this):this._ps},e.startTime=function(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return e&&(e._sort||!this.parent)&&Zt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+($(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Gt(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,i=arguments.length?t:e.rawTime();e;)i=e._start+i/(e._ts||1),e=e._dp;return i},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,re(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,re(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(oe(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=W(t)?t:Lt,r=function(){var t=e.then;e.then=null,W(n)&&(n=n(e))&&(n.then||n===e)&&(e.then=t),i(n),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?r():e._prom=r}))},e.kill=function(){Me(this)},t}();Bt(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 $e=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),l&&Zt(e.parent||l,a(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&Kt(a(n),e.scrollTrigger),n}u(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,Yt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ai(t,e,oe(this,i),1),this},i.call=function(t,e,i){return Zt(this,ai.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,n,r,s,o){return i.duration=e,i.stagger=i.stagger||n,i.onComplete=s,i.onCompleteParams=o,i.parent=this,new ai(t,i,oe(this,r)),this},i.staggerFrom=function(t,e,i,n,r,s,o){return i.runBackwards=1,Yt(i).immediateRender=$(i.immediateRender),this.staggerTo(t,e,i,n,r,s,o)},i.staggerFromTo=function(t,e,i,n,r,s,o,a){return n.startAt=i,Yt(n).immediateRender=$(n.immediateRender),this.staggerTo(t,e,n,r,s,o,a)},i.render=function(t,e,i){var n,r,s,o,a,u,h,c,f,p,d,m,g=this._time,_=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:Ct(t),x=this._zTime<0!=t<0&&(this._initted||!v);if(this!==l&&y>_&&t>=0&&(y=_),y!==this._tTime||i||x){if(g!==this._time&&v&&(y+=this._time-g,t+=this._time-g),n=y,f=this._start,u=!(c=this._ts),x&&(v||(g=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(d=this._yoyo,a=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*a+t,e,i);if(n=Ct(y%a),y===_?(o=this._repeat,n=v):((o=~~(y/a))&&o===y/a&&(n=v,o--),n>v&&(n=v)),p=Ht(this._tTime,a),!g&&this._tTime&&p!==o&&(p=o),d&&1&o&&(n=v-n,m=1),o!==p&&!this._lock){var b=d&&1&p,w=b===(d&&1&o);if(oe)for(n=t._first;n&&n._start<=i;){if("isPause"===n.data&&n._start>e)return n;n=n._next}else for(n=t._last;n&&n._start>=i;){if("isPause"===n.data&&n._start=g&&t>=0)for(r=this._first;r;){if(s=r._next,(r._act||n>=r._start)&&r._ts&&h!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(n-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(n-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=-1e-8);break}}r=s}else{r=this._last;for(var T=t<0?t:n;r;){if(s=r._prev,(r._act||T<=r._end)&&r._ts&&h!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(T-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(T-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=T?-1e-8:1e-8);break}}r=s}}if(h&&!e&&(this.pause(),h.render(n>=g?0:-1e-8)._zTime=n>=g?1:-1,this._ts))return this._start=f,Qt(this),this.render(t,e,i);this._onUpdate&&!e&&Oe(this,"onUpdate",!0),(y===_&&this._tTime>=this.totalDuration()||!y&&g)&&(f!==this._start&&Math.abs(c)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===_&&this._ts>0||!y&&this._ts<0)&&Nt(this,1),e||t<0&&!g||!y&&!g&&_||(Oe(this,y===_&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y<_&&this.timeScale()>0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(H(e)||(e=oe(this,e,t)),!(t instanceof Qe)){if(tt(t))return t.forEach((function(t){return i.add(t,e)})),this;if(U(t))return this.addLabel(t,e);if(!W(t))return this;t=ai.delayedCall(0,t)}return this!==t?Zt(this,t,e):this},i.getChildren=function(t,e,i,n){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===n&&(n=-1e8);for(var r=[],s=this._first;s;)s._start>=n&&(s instanceof ai?e&&r.push(s):(i&&r.push(s),t&&r.push.apply(r,s.getChildren(!0,e,i)))),s=s._next;return r},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return U(t)?this.removeLabel(t):W(t)?this.killTweensOf(t):(Vt(this,t),t===this._recent&&(this._recent=this._last),qt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Ct(Be.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]=oe(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var n=ai.delayedCall(0,e||dt,i);return n.data="isPause",this._hasPause=1,Zt(this,n,oe(this,t))},i.removePause=function(t){var e=this._first;for(t=oe(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--;)Je!==n[r]&&n[r].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,n=[],r=de(t),s=this._first,o=H(e);s;)s instanceof ai?St(s._targets,r)&&(o?(!Je||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=oe(n,t),s=e,o=s.startAt,a=s.onStart,u=s.onStartParams,h=s.immediateRender,l=ai.to(n,Bt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:r,overwrite:"auto",duration:e.duration||Math.abs((r-(o&&"time"in o?o.time:n._time))/n.timeScale())||1e-8,onStart:function(){if(n.pause(),!i){var t=e.duration||Math.abs((r-(o&&"time"in o?o.time:n._time))/n.timeScale());l._dur!==t&&ne(l,t,0,1).render(l._time,!0,!0),i=1}a&&a.apply(l,u||[])}},e));return h?l.render(0):l},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,Bt({startAt:{time:oe(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),Te(this,oe(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),Te(this,oe(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+1e-8)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var n,r=this._first,s=this.labels;r;)r._start>=i&&(r._start+=t,r._end+=t),r=r._next;if(e)for(n in s)s[n]>=i&&(s[n]+=t);return qt(this)},i.invalidate=function(){var e=this._first;for(this._lock=0;e;)e.invalidate(),e=e._next;return t.prototype.invalidate.call(this)},i.clear=function(t){void 0===t&&(t=!0);for(var e,i=this._first;i;)e=i._next,this.remove(i),i=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),qt(this)},i.totalDuration=function(t){var e,i,n,r=0,s=this,o=s._last,a=1e8;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(n=s.parent;o;)e=o._prev,o._dirty&&o.totalDuration(),(i=o._start)>a&&s._sort&&o._ts&&!s._lock?(s._lock=1,Zt(s,o,i-o._delay,1)._lock=0):a=i,i<0&&o._ts&&(r-=i,(!n&&!s._dp||n&&n.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),a=0),o._end>r&&o._ts&&(r=o._end),o=e;ne(s,s===l&&s._time>r?s._time:r,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(l._ts&&(Pt(l,Gt(t,l)),m=Be.frame),Be.frame>=xt){xt+=z.autoSleep||120;var e=l._first;if((!e||!e._ts)&&z.autoSleep&&Be._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Be.sleep()}}},e}(Qe);Bt($e.prototype,{_lock:0,_hasPause:0,_forcing:0});var Je,Ze,Ke=function(t,e,i,n,r,s,o){var a,u,h,l,c,f,p,d,m=new bi(this._pt,t,e,0,1,mi,null,r),g=0,_=0;for(m.b=i,m.e=n,i+="",(p=~(n+="").indexOf("random("))&&(n=be(n)),s&&(s(d=[i,n],t,e),i=d[0],n=d[1]),u=i.match(rt)||[];a=rt.exec(n);)l=a[0],c=n.substring(g,a.index),h?h=(h+1)%5:"rgba("===c.substr(-5)&&(h=1),l!==u[_++]&&(f=parseFloat(u[_-1])||0,m._pt={_next:m._pt,p:c||1===_?c:",",s:f,c:"="===l.charAt(1)?Et(f,l)-f:parseFloat(l)-f,m:h&&h<4?Math.round:0},g=rt.lastIndex);return m.c=g0&&!E&&(e._startAt=0),S&&i<=0)return void(i&&(e._zTime=i))}else!1===E&&(e._startAt=0);else if(k&&S)if(A)!E&&(e._startAt=0);else if(i&&(b=!1),s=Bt({overwrite:!1,data:"isFromStart",lazy:b&&$(w),immediateRender:b,stagger:0,parent:I},n),g&&(s[f.prop]=g),Nt(e._startAt=ai.set(P,s)),i<0&&e._startAt.render(-1,!0),e._zTime=i,b){if(!i)return}else t(e._startAt,1e-8);for(e._pt=e._ptCache=0,w=S&&$(w)||w&&!S,r=0;r")}));else{for(p in c={},T)"ease"===p||"easeEach"===p||ni(p,T[p],c,T.easeEach);for(p in c)for(E=c[p].sort((function(t,e){return t.t-e.t})),P=0,u=0;up-1e-8&&t>=0?p:t<1e-8?0:t;if(d){if(m!==this._tTime||!t||i||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=t<0){if(n=m,l=this.timeline,this._repeat){if(o=d+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,i);if(n=Ct(m%o),m===p?(s=this._repeat,n=d):((s=~~(m/o))&&s===m/o&&(n=d,s--),n>d&&(n=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,n=d-n),a=Ht(this._tTime,o),n===f&&!i&&this._initted)return this._tTime=m,this;s!==a&&(l&&this._yEase&&Ne(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(Ct(o*s),!0).invalidate()._lock=0))}if(!this._initted){if(te(this,t<0?t:n,i,e))return this._tTime=0,this;if(f!==this._time)return this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=m,this._time=n,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(c||this._ease)(n/d),this._from&&(this.ratio=h=1-h),n&&!f&&!e&&(Oe(this,"onStart"),this._tTime!==m))return this;for(r=this._pt;r;)r.r(h,r.d),r=r._next;l&&l.render(t<0?t:!n&&u?-1e-8:l._dur*l._ease(n/this._dur),e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),Oe(this,"onUpdate")),this._repeat&&s!==a&&this.vars.onRepeat&&!e&&this.parent&&Oe(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(m===this._tDur&&this._ts>0||!m&&this._ts<0)&&Nt(this,1),e||t<0&&!f||!m&&!f||(Oe(this,m===p?"onComplete":"onReverseComplete",!0),this._prom&&!(m0)&&this._prom()))}}else!function(t,e,i,n){var r,s,o,a=t.ratio,u=e<0||!e&&(!t._start&&ee(t)&&(t._initted||!ie(t))||(t._ts<0||t._dp._ts<0)&&!ie(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=he(0,t._tDur,e),s=Ht(l,h),t._yoyo&&1&s&&(u=1-u),s!==Ht(t._tTime,h)&&(a=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==a||n||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&te(t,e,n,i))return;for(o=t._zTime,t._zTime=e||(i?1e-8:0),i||(i=e&&!o),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,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&&Oe(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&Oe(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Nt(t,1),i||(Oe(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,i);return this},i.targets=function(){return this._targets},i.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},i.resetTo=function(t,e,i,n){_||Be.wake(),this._ts||this.play();var r=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||ii(this,r),function(t,e,i,n,r,s,o){var a,u,h,l=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!l)for(l=t._ptCache[e]=[],u=t._ptLookup,h=t._targets.length;h--;){if((a=u[h][e])&&a.d&&a.d._pt)for(a=a.d._pt;a&&a.p!==e;)a=a._next;if(!a)return Ze=1,t.vars[e]="+=0",ii(t,o),Ze=0,1;l.push(a)}for(h=l.length;h--;)(a=l[h]).s=!n&&0!==n||r?a.s+(n||0)+s*a.c:n,a.c=i-a.s,a.e&&(a.e=Dt(i)+le(a.e)),a.b&&(a.b=a.s+le(a.b))}(this,t,e,i,n,this._ease(r/this._dur),r)?this.resetTo(t,e,i,n):($t(this,0),this.parent||Ft(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},i.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?Me(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Je&&!0!==Je.vars.overwrite)._first||Me(this),this.parent&&i!==this.timeline.totalDuration()&&ne(this,this._dur*this.timeline._tDur/i,0,1),this}var n,r,s,o,a,u,h,l=this._targets,c=t?de(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),Me(this);for(n=this._op=this._op||[],"all"!==e&&(U(e)&&(a={},kt(e,(function(t){return a[t]=1})),e=a),e=function(t,e){var i,n,r,s,o=t[0]?Ot(t[0]).harness:0,a=o&&o.aliases;if(!a)return e;for(n in i=Rt({},e),a)if(n in i)for(r=(s=a[n].split(",")).length;r--;)i[s[r]]=i[n];return i}(l,e)),h=l.length;h--;)if(~c.indexOf(l[h]))for(a in r=f[h],"all"===e?(n[h]=e,o=r,s={}):(s=n[h]=n[h]||{},o=e),o)(u=r&&r[a])&&("kill"in u.d&&!0!==u.d.kill(a)||Vt(this,u,"_pt"),delete r[a]),"all"!==s&&(s[a]=1);return this._initted&&!this._pt&&p&&Me(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return 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 l.killTweensOf(t,e,i)},e}(Qe);Bt(ai.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),kt("staggerTo,staggerFrom,staggerFromTo",(function(t){ai[t]=function(){var e=new $e,i=ce.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var ui=function(t,e,i){return t[e]=i},hi=function(t,e,i){return t[e](i)},li=function(t,e,i,n){return t[e](n.fp,i)},ci=function(t,e,i){return t.setAttribute(e,i)},fi=function(t,e){return W(t[e])?hi:G(t[e])&&t.setAttribute?ci:ui},pi=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},di=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},mi=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)},gi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},_i=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},vi=function(t){for(var e,i,n=this._pt;n;)i=n._next,n.p===t&&!n.op||n.op===t?Vt(this,n,"_pt"):n.dep||(e=1),n=i;return!e},yi=function(t,e,i,n){n.mSet(t,e,n.m.call(n.tween,i,n.mt),n)},xi=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},bi=function(){function t(t,e,i,n,r,s,o,a,u){this.t=e,this.s=n,this.c=r,this.p=i,this.r=s||pi,this.d=o||this,this.set=a||ui,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=yi,this.m=t,this.mt=i,this.tween=e},t}();kt(wt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",(function(t){return mt[t]=1})),ut.TweenMax=ut.TweenLite=ai,ut.TimelineLite=ut.TimelineMax=$e,l=new $e({sortChildren:!1,defaults:X,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),z.stringFilter=Le;var wi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var n=t.map((function(t){return Mi.quickSetter(t,e,i)})),r=n.length;return function(t){for(var e=r;e--;)n[e](t)}}t=t[0]||{};var s=vt[e],o=Ot(t),a=o.harness&&(o.harness.aliases||{})[e]||e,u=s?function(e){var n=new s;g._pt=0,n.init(t,i?e+i:e,g,0,[t]),n.render(1,n),g._pt&&gi(1,g)}:o.set(t,a);return s?u:function(e){return u(t,a,i?e+i:e,o,1)}},quickTo:function(t,e,i){var n,r=Mi.to(t,Rt(((n={})[e]="+=0.1",n.paused=!0,n),i||{})),s=function(t,i,n){return r.resetTo(e,t,i,n)};return s.tween=r,s},isTweening:function(t){return l.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=qe(t.ease,X.ease)),zt(X,t||{})},config:function(t){return zt(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&&!vt[t]&&!ut[t]&&ft(e+" effect requires "+t+" plugin.")})),yt[e]=function(t,e,n){return i(de(t),Bt(e||{},r),n)},s&&($e.prototype[e]=function(t,i,n){return this.add(yt[e](t,Q(i)?i:(n=i)&&{},this),n)})},registerEase:function(t,e){ze[t]=qe(e)},parseEase:function(t,e){return arguments.length?qe(t,e):ze},getById:function(t){return l.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,n,r=new $e(t);for(r.smoothChildTiming=$(t.smoothChildTiming),l.remove(r),r._dp=0,r._time=r._tTime=l._time,i=l._first;i;)n=i._next,!e&&!i._dur&&i instanceof ai&&i.vars.onComplete===i._targets[0]||Zt(r,i,i._start-i._delay),i=n;return Zt(l,r,0),r},utils:{wrap:function t(e,i,n){var r=i-e;return tt(e)?xe(e,t(0,e.length),i):ue(n,(function(t){return(r+(t-e)%r)%r+e}))},wrapYoyo:function t(e,i,n){var r=i-e,s=2*r;return tt(e)?xe(e,t(0,e.length-1),i):ue(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>r?s-t:t)}))},distribute:ge,random:ye,snap:ve,normalize:function(t,e,i){return we(t,e,0,1,i)},getUnit:le,clamp:function(t,e,i){return ue(i,(function(i){return he(t,e,i)}))},splitColor:Ee,toArray:de,selector:function(t){return t=de(t)[0]||ft("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return de(e,i.querySelectorAll?i:i===t?ft("Invalid scope")||p.createElement("div"):t)}},mapRange:we,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?rn[r]:"")+t},on=function(){"undefined"!=typeof window&&window.document&&(ki=window,Di=ki.document,Ci=Di.documentElement,Si=en("div")||{style:{}},en("div"),Ki=sn(Ki),tn=Ki+"Origin",Si.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Pi=!!sn("perspective"),Ei=1)},an=function t(e){var i,n=en("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),r=this.parentNode,s=this.nextSibling,o=this.style.cssText;if(Ci.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)),Ci.removeChild(n),this.style.cssText=o,i},un=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},hn=function(t){var e;try{e=t.getBBox()}catch(i){e=an.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===an||(e=an.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+un(t,["x","cx","x1"])||0,y:+un(t,["y","cy","y1"])||0,width:0,height:0}},ln=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!hn(t))},cn=function(t,e){if(e){var i=t.style;e in Ii&&e!==tn&&(e=Ki),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(zi,"-$1").toLowerCase())):i.removeAttribute(e)}},fn=function(t,e,i,n,r,s){var o=new bi(t._pt,e,i,0,1,s?Wi:Ui);return t._pt=o,o.b=n,o.e=r,t._props.push(i),o},pn={deg:1,rad:1,turn:1},dn=function t(e,i,n,r){var s,o,a,u,h=parseFloat(n)||0,l=(n+"").trim().substr((h+"").length)||"px",c=Si.style,f=Xi.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),m=100,g="px"===r,_="%"===r;return r===l||!h||pn[r]||pn[l]?h:("px"!==l&&!g&&(h=t(e,i,n,"px")),u=e.getCTM&&ln(e),!_&&"%"!==l||!Ii[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=m+(g?l:r),o=~i.indexOf("adius")||"em"===r&&e.appendChild&&!p?e:e.parentNode,u&&(o=(e.ownerSVGElement||{}).parentNode),o&&o!==Di&&o.appendChild||(o=Di.body),(a=o._gsap)&&_&&a.width&&f&&a.time===Be.time?Dt(h/a.width*m):((_||"%"===l)&&(c.position=nn(e,"position")),o===e&&(c.position="static"),o.appendChild(Si),s=Si[d],o.removeChild(Si),c.position="absolute",f&&_&&((a=Ot(o)).time=Be.time,a.width=o[d]),Dt(g?s*h/m:s&&h?m/s*h:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],Dt(_?h/s*m:h/100*s)))},mn=function(t,e,i,n){var r;return Ei||on(),e in Fi&&"transform"!==e&&~(e=Fi[e]).indexOf(",")&&(e=e.split(",")[0]),Ii[e]&&"transform"!==e?(r=kn(t,n),r="transformOrigin"!==e?r[e]:r.svg?r.origin:Dn(nn(t,tn))+" "+r.zOrigin+"px"):(!(r=t.style[e])||"auto"===r||n||~(r+"").indexOf("calc("))&&(r=yn[e]&&yn[e](t,e,i)||nn(t,e)||Mt(t,e)||("opacity"===e?1:0)),i&&!~(r+"").trim().indexOf(" ")?dn(t,e,r,i)+i:r},gn=function(t,e,i,n){if(!i||"none"===i){var r=sn(e,t,1),s=r&&nn(t,r,1);s&&s!==i?(e=r,i=s):"borderColor"===e&&(i=nn(t,"borderTopColor"))}var o,a,u,h,l,c,f,p,d,m,g,_=new bi(this._pt,t.style,e,0,1,mi),v=0,y=0;if(_.b=i,_.e=n,i+="","auto"===(n+="")&&(t.style[e]=n,n=nn(t,e)||n,t.style[e]=i),Le(o=[i,n]),n=o[1],u=(i=o[0]).match(nt)||[],(n.match(nt)||[]).length){for(;a=nt.exec(n);)f=a[0],d=n.substring(v,a.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),f!==(c=u[y++]||"")&&(h=parseFloat(c)||0,g=c.substr((h+"").length),"="===f.charAt(1)&&(f=Et(h,f)+g),p=parseFloat(f),m=f.substr((p+"").length),v=nt.lastIndex-m.length,m||(m=m||z.units[e]||g,v===n.length&&(n+=m,_.e+=m)),g!==m&&(h=dn(t,e,c,m)||0),_._pt={_next:_._pt,p:d||1===y?d:",",s:h,c:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});_.c=v-1;)i=a[r],Ii[i]&&(n=1,i="transformOrigin"===i?tn:Ki),cn(s,i);n&&(cn(s,Ki),u&&(u.svg&&s.removeAttribute("transform"),kn(s,1),u.uncache=1))}},yn={clearProps:function(t,e,i,n,r){if("isFromStart"!==r.data){var s=t._pt=new bi(t._pt,e,i,0,0,vn);return s.u=n,s.pr=-10,s.tween=r,t._props.push(i),1}}},xn=[1,0,0,1,0,0],bn={},wn=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},Tn=function(t){var e=nn(t,Ki);return wn(e)?xn:e.substr(7).match(it).map(Dt)},On=function(t,e){var i,n,r,s,o=t._gsap||Ot(t),a=t.style,u=Tn(t);return o.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(",")?xn:u:(u!==xn||t.offsetParent||t===Ci||o.svg||(r=a.display,a.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,Ci.appendChild(t)),u=Tn(t),r?a.display=r:cn(t,"display"),s&&(n?i.insertBefore(t,n):i?i.appendChild(t):Ci.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},Mn=function(t,e,i,n,r,s){var o,a,u,h=t._gsap,l=r||On(t,!0),c=h.xOrigin||0,f=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,m=l[0],g=l[1],_=l[2],v=l[3],y=l[4],x=l[5],b=e.split(" "),w=parseFloat(b[0])||0,T=parseFloat(b[1])||0;i?l!==xn&&(a=m*v-g*_)&&(u=w*(-g/a)+T*(m/a)-(m*x-g*y)/a,w=w*(v/a)+T*(-_/a)+(_*x-v*y)/a,T=u):(w=(o=hn(t)).x+(~b[0].indexOf("%")?w/100*o.width:w),T=o.y+(~(b[1]||b[0]).indexOf("%")?T/100*o.height:T)),n||!1!==n&&h.smooth?(y=w-c,x=T-f,h.xOffset=p+(y*m+x*_)-y,h.yOffset=d+(y*g+x*v)-x):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=T,h.smooth=!!n,h.origin=e,h.originIsAbsolute=!!i,t.style[tn]="0px 0px",s&&(fn(s,h,"xOrigin",c,w),fn(s,h,"yOrigin",f,T),fn(s,h,"xOffset",p,h.xOffset),fn(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+T)},kn=function(t,e){var i=t._gsap||new Ge(t);if("x"in i&&!e&&!i.uncache)return i;var n,r,s,o,a,u,h,l,c,f,p,d,m,g,_,v,y,x,b,w,T,O,M,k,D,C,E,S,A,P,I,L,B=t.style,R=i.scaleX<0,X="px",Y="deg",F=nn(t,tn)||"0";return n=r=s=u=h=l=c=f=p=0,o=a=1,i.svg=!(!t.getCTM||!ln(t)),g=On(t,i.svg),i.svg&&(k=(!i.uncache||"0px 0px"===F)&&!e&&t.getAttribute("data-svg-origin"),Mn(t,k||F,!!k||i.originIsAbsolute,!1!==i.smooth,g)),d=i.xOrigin||0,m=i.yOrigin||0,g!==xn&&(x=g[0],b=g[1],w=g[2],T=g[3],n=O=g[4],r=M=g[5],6===g.length?(o=Math.sqrt(x*x+b*b),a=Math.sqrt(T*T+w*w),u=x||b?Ri(b,x)*Li:0,(c=w||T?Ri(w,T)*Li+u:0)&&(a*=Math.abs(Math.cos(c*Bi))),i.svg&&(n-=d-(d*x+m*w),r-=m-(d*b+m*T))):(L=g[6],P=g[7],E=g[8],S=g[9],A=g[10],I=g[11],n=g[12],r=g[13],s=g[14],h=(_=Ri(L,A))*Li,_&&(k=O*(v=Math.cos(-_))+E*(y=Math.sin(-_)),D=M*v+S*y,C=L*v+A*y,E=O*-y+E*v,S=M*-y+S*v,A=L*-y+A*v,I=P*-y+I*v,O=k,M=D,L=C),l=(_=Ri(-w,A))*Li,_&&(v=Math.cos(-_),I=T*(y=Math.sin(-_))+I*v,x=k=x*v-E*y,b=D=b*v-S*y,w=C=w*v-A*y),u=(_=Ri(b,x))*Li,_&&(k=x*(v=Math.cos(_))+b*(y=Math.sin(_)),D=O*v+M*y,b=b*v-x*y,M=M*v-O*y,x=k,O=D),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),o=Dt(Math.sqrt(x*x+b*b+w*w)),a=Dt(Math.sqrt(M*M+L*L)),_=Ri(O,M),c=Math.abs(_)>2e-4?_*Li:0,p=I?1/(I<0?-I:I):0),i.svg&&(k=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!wn(nn(t,Ki)),k&&t.setAttribute("transform",k))),Math.abs(c)>90&&Math.abs(c)<270&&(R?(o*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(a*=-1,c+=c<=0?180:-180)),e=e||i.uncache,i.x=n-((i.xPercent=n&&(!e&&i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-n)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+X,i.y=r-((i.yPercent=r&&(!e&&i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-r)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+X,i.z=s+X,i.scaleX=Dt(o),i.scaleY=Dt(a),i.rotation=Dt(u)+Y,i.rotationX=Dt(h)+Y,i.rotationY=Dt(l)+Y,i.skewX=c+Y,i.skewY=f+Y,i.transformPerspective=p+X,(i.zOrigin=parseFloat(F.split(" ")[2])||0)&&(B[tn]=Dn(F)),i.xOffset=i.yOffset=0,i.force3D=z.force3D,i.renderTransform=i.svg?An:Pi?Sn:En,i.uncache=0,i},Dn=function(t){return(t=t.split(" "))[0]+" "+t[1]},Cn=function(t,e,i){var n=le(e);return Dt(parseFloat(e)+parseFloat(dn(t,"x",i+"px",n)))+n},En=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Sn(t,e)},Sn=function(t,e){var i=e||this,n=i.xPercent,r=i.yPercent,s=i.x,o=i.y,a=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,m=i.transformPerspective,g=i.force3D,_=i.target,v=i.zOrigin,y="",x="auto"===g&&t&&1!==t||!0===g;if(v&&("0deg"!==l||"0deg"!==h)){var b,w=parseFloat(h)*Bi,T=Math.sin(w),O=Math.cos(w);w=parseFloat(l)*Bi,b=Math.cos(w),s=Cn(_,s,T*b*-v),o=Cn(_,o,-Math.sin(w)*-v),a=Cn(_,a,O*b*-v+v)}"0px"!==m&&(y+="perspective("+m+") "),(n||r)&&(y+="translate("+n+"%, "+r+"%) "),(x||"0px"!==s||"0px"!==o||"0px"!==a)&&(y+="0px"!==a||x?"translate3d("+s+", "+o+", "+a+") ":"translate("+s+", "+o+") "),"0deg"!==u&&(y+="rotate("+u+") "),"0deg"!==h&&(y+="rotateY("+h+") "),"0deg"!==l&&(y+="rotateX("+l+") "),"0deg"===c&&"0deg"===f||(y+="skew("+c+", "+f+") "),1===p&&1===d||(y+="scale("+p+", "+d+") "),_.style[Ki]=y||"translate(0, 0)"},An=function(t,e){var i,n,r,s,o,a=e||this,u=a.xPercent,h=a.yPercent,l=a.x,c=a.y,f=a.rotation,p=a.skewX,d=a.skewY,m=a.scaleX,g=a.scaleY,_=a.target,v=a.xOrigin,y=a.yOrigin,x=a.xOffset,b=a.yOffset,w=a.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*=Bi,p*=Bi,i=Math.cos(f)*m,n=Math.sin(f)*m,r=Math.sin(f-p)*-g,s=Math.cos(f-p)*g,p&&(d*=Bi,o=Math.tan(p-d),r*=o=Math.sqrt(1+o*o),s*=o,d&&(o=Math.tan(d),i*=o=Math.sqrt(1+o*o),n*=o)),i=Dt(i),n=Dt(n),r=Dt(r),s=Dt(s)):(i=m,s=g,n=r=0),(T&&!~(l+"").indexOf("px")||O&&!~(c+"").indexOf("px"))&&(T=dn(_,"x",l,"px"),O=dn(_,"y",c,"px")),(v||y||x||b)&&(T=Dt(T+v-(v*i+y*r)+x),O=Dt(O+y-(v*n+y*s)+b)),(u||h)&&(o=_.getBBox(),T=Dt(T+u/100*o.width),O=Dt(O+h/100*o.height)),o="matrix("+i+","+n+","+r+","+s+","+T+","+O+")",_.setAttribute("transform",o),w&&(_.style[Ki]=o)},Pn=function(t,e,i,n,r){var s,o,a=360,u=U(r),h=parseFloat(r)*(u&&~r.indexOf("rad")?Li:1)-n,l=n+h+"deg";return u&&("short"===(s=r.split("_")[1])&&(h%=a)!==h%180&&(h+=h<0?a:-360),"cw"===s&&h<0?h=(h+36e9)%a-~~(h/a)*a:"ccw"===s&&h>0&&(h=(h-36e9)%a-~~(h/a)*a)),t._pt=o=new bi(t._pt,e,i,n,h,Ni),o.e=l,o.u="deg",t._props.push(i),o},In=function(t,e){for(var i in e)t[i]=e[i];return t},Ln=function(t,e,i){var n,r,s,o,a,u,h,l=In({},i._gsap),c=i.style;for(r in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[Ki]=e,n=kn(i,1),cn(i,Ki),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Ki],c[Ki]=e,n=kn(i,1),c[Ki]=s),Ii)(s=l[r])!==(o=n[r])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(r)<0&&(a=le(s)!==(h=le(o))?dn(i,r,s,h):parseFloat(s),u=parseFloat(o),t._pt=new bi(t._pt,n,r,a,u-a,Vi),t._pt.u=h||0,t._props.push(r));In(n,l)};kt("padding,margin,Width,Radius",(function(t,e){var i="Top",n="Right",r="Bottom",s="Left",o=(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}));yn[e>1?"border"+t:t]=function(t,e,i,n,r){var s,a;if(arguments.length<4)return s=o.map((function(e){return mn(t,e,i)})),5===(a=s.join(" ")).split(s[0]).length?s[0]:a;s=(n+"").split(" "),a={},o.forEach((function(t,e){return a[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,a,r)}}));var Bn,Rn,zn,Xn={name:"css",register:on,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,n,r){var s,o,a,u,h,l,c,f,p,d,m,g,_,v,y,x,b,w,T,O=this._props,M=t.style,k=i.vars.startAt;for(c in Ei||on(),e)if("autoRound"!==c&&(o=e[c],!vt[c]||!ei(c,e,i,n,t,r)))if(h=typeof o,l=yn[c],"function"===h&&(h=typeof(o=o.call(i,n,t,r))),"string"===h&&~o.indexOf("random(")&&(o=be(o)),l)l(this,t,c,o,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),o+="",Pe.lastIndex=0,Pe.test(s)||(f=le(s),p=le(o)),p?f!==p&&(s=dn(t,c,s,p)+p):f&&(o+=f),this.add(M,"setProperty",s,o,n,r,0,0,c),O.push(c);else if("undefined"!==h){if(k&&c in k?(s="function"==typeof k[c]?k[c].call(i,n,t,r):k[c],U(s)&&~s.indexOf("random(")&&(s=be(s)),le(s+"")||(s+=z.units[c]||le(mn(t,c))||""),"="===(s+"").charAt(1)&&(s=mn(t,c))):s=mn(t,c),u=parseFloat(s),(d="string"===h&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),a=parseFloat(o),c in Fi&&("autoAlpha"===c&&(1===u&&"hidden"===mn(t,"visibility")&&a&&(u=0),fn(this,M,"visibility",u?"inherit":"hidden",a?"inherit":"hidden",!a)),"scale"!==c&&"transform"!==c&&~(c=Fi[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in Ii)if(g||((_=t._gsap).renderTransform&&!e.parseTransform||kn(t,e.parseTransform),v=!1!==e.smoothOrigin&&_.smooth,(g=this._pt=new bi(this._pt,M,Ki,0,1,_.renderTransform,_,0,-1)).dep=1),"scale"===c)this._pt=new bi(this._pt,_,"scaleY",_.scaleY,(d?Et(_.scaleY,d+a):a)-_.scaleY||0),O.push("scaleY",c),c+="X";else{if("transformOrigin"===c){b=void 0,w=void 0,T=void 0,b=(x=o).split(" "),w=b[0],T=b[1]||"50%","top"!==w&&"bottom"!==w&&"left"!==T&&"right"!==T||(x=w,w=T,T=x),b[0]=_n[w]||w,b[1]=_n[T]||T,o=b.join(" "),_.svg?Mn(t,o,0,v,0,this):((p=parseFloat(o.split(" ")[2])||0)!==_.zOrigin&&fn(this,_,"zOrigin",_.zOrigin,p),fn(this,M,c,Dn(s),Dn(o)));continue}if("svgOrigin"===c){Mn(t,o,1,v,0,this);continue}if(c in bn){Pn(this,_,c,u,d?Et(u,d+o):o);continue}if("smoothOrigin"===c){fn(this,_,"smooth",_.smooth,o);continue}if("force3D"===c){_[c]=o;continue}if("transform"===c){Ln(this,o,t);continue}}else c in M||(c=sn(c)||c);if(m||(a||0===a)&&(u||0===u)&&!Yi.test(o)&&c in M)a||(a=0),(f=(s+"").substr((u+"").length))!==(p=le(o)||(c in z.units?z.units[c]:f))&&(u=dn(t,c,s,p)),this._pt=new bi(this._pt,m?_:M,c,u,(d?Et(u,d+a):a)-u,m||"px"!==p&&"zIndex"!==c||!1===e.autoRound?Vi:ji),this._pt.u=p||0,f!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=qi);else if(c in M)gn.call(this,t,c,s,d?d+o:o);else{if(!(c in t)){ct(c,o);continue}this.add(t,c,s||t[c],d?d+o:o,n,r)}O.push(c)}y&&xi(this)},get:mn,aliases:Fi,getSetter:function(t,e,i){var n=Fi[e];return n&&n.indexOf(",")<0&&(e=n),e in Ii&&e!==tn&&(t._gsap.x||mn(t,"x"))?i&&Ai===i?"scale"===e?$i:Qi:(Ai=i||{},"scale"===e?Ji:Zi):t.style&&!G(t.style[e])?Hi:~e.indexOf("-")?Gi:fi(t,e)},core:{_removeProperty:cn,_getMatrix:On}};Mi.utils.checkPrefix=sn,zn=kt((Bn="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Rn="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Ii[t]=1})),kt(Rn,(function(t){z.units[t]="deg",bn[t]=1})),Fi[zn[13]]=Bn+","+Rn,kt("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Fi[e[1]]=zn[e[0]]})),kt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){z.units[t]="px"})),Mi.registerPlugin(Xn);var Yn,Fn,Vn,Nn,qn,jn,Un,Wn,Hn,Gn=Mi.registerPlugin(Xn)||Mi,Qn=(Gn.core.Tween,"transform"),$n=Qn+"Origin",Jn=function(t){var e=t.ownerDocument||t;!(Qn in t.style)&&"msTransform"in t.style&&($n=(Qn="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(Fn=window,Un=new ur,e){Yn=e,Vn=e.documentElement,Nn=e.body,(Wn=Yn.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),n=e.createElement("div");Nn.appendChild(i),i.appendChild(n),i.style.position="static",i.style[Qn]="translate3d(0,0,1px)",Hn=n.offsetParent!==i,Nn.removeChild(i)}return e},Zn=[],Kn=[],tr=function(){return Fn.pageYOffset||Yn.scrollTop||Vn.scrollTop||Nn.scrollTop||0},er=function(){return Fn.pageXOffset||Yn.scrollLeft||Vn.scrollLeft||Nn.scrollLeft||0},ir=function(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)},nr=function t(e){return"fixed"===Fn.getComputedStyle(e).position||((e=e.parentNode)&&1===e.nodeType?t(e):void 0)},rr=function t(e,i){if(e.parentNode&&(Yn||Jn(e))){var n=ir(e),r=n?n.getAttribute("xmlns")||"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s=n?i?"rect":"g":"div",o=2!==i?0:100,a=3===i?100:0,u="position:absolute;display:block;pointer-events:none;margin:0;padding:0;",h=Yn.createElementNS?Yn.createElementNS(r.replace(/^https/,"http"),s):Yn.createElement(s);return i&&(n?(jn||(jn=t(e)),h.setAttribute("width",.01),h.setAttribute("height",.01),h.setAttribute("transform","translate("+o+","+a+")"),jn.appendChild(h)):(qn||((qn=t(e)).style.cssText=u),h.style.cssText=u+"width:0.1px;height:0.1px;top:"+a+"px;left:"+o+"px",qn.appendChild(h))),h}throw"Need document and parent."},sr=function(t){var e,i=t.getCTM();return i||(e=t.style[Qn],t.style[Qn]="none",t.appendChild(Wn),i=Wn.getCTM(),t.removeChild(Wn),e?t.style[Qn]=e:t.style.removeProperty(Qn.replace(/([A-Z])/g,"-$1").toLowerCase())),i||Un.clone()},or=function(t,e){var i,n,r,s,o,a,u=ir(t),h=t===u,l=u?Zn:Kn,c=t.parentNode;if(t===Fn)return t;if(l.length||l.push(rr(t,1),rr(t,2),rr(t,3)),i=u?jn:qn,u)h?(s=-(r=sr(t)).e/r.a,o=-r.f/r.d,n=Un):t.getBBox?(r=t.getBBox(),n=(n=t.transform?t.transform.baseVal:{}).numberOfItems?n.numberOfItems>1?function(t){for(var e=new ur,i=0;i4&&(s=r.offsetLeft,o=r.offsetTop,r=0);if("absolute"!==(a=Fn.getComputedStyle(t)).position&&"fixed"!==a.position)for(n=t.offsetParent;c&&c!==n;)s+=c.scrollLeft||0,o+=c.scrollTop||0,c=c.parentNode;(r=i.style).top=t.offsetTop-o+"px",r.left=t.offsetLeft-s+"px",r[Qn]=a[Qn],r[$n]=a[$n],r.position="fixed"===a.position?"fixed":"absolute",t.parentNode.appendChild(i)}return i},ar=function(t,e,i,n,r,s,o){return t.a=e,t.b=i,t.c=n,t.d=r,t.e=s,t.f=o,t},ur=function(){function t(t,e,i,n,r,s){void 0===t&&(t=1),void 0===e&&(e=0),void 0===i&&(i=0),void 0===n&&(n=1),void 0===r&&(r=0),void 0===s&&(s=0),ar(this,t,e,i,n,r,s)}var e=t.prototype;return e.inverse=function(){var t=this.a,e=this.b,i=this.c,n=this.d,r=this.e,s=this.f,o=t*n-e*i||1e-10;return ar(this,n/o,-e/o,-i/o,t/o,(i*s-n*r)/o,-(t*s-e*r)/o)},e.multiply=function(t){var e=this.a,i=this.b,n=this.c,r=this.d,s=this.e,o=this.f,a=t.a,u=t.c,h=t.b,l=t.d,c=t.e,f=t.f;return ar(this,a*e+h*n,a*i+h*r,u*e+l*n,u*i+l*r,s+c*e+f*n,o+c*i+f*r)},e.clone=function(){return new t(this.a,this.b,this.c,this.d,this.e,this.f)},e.equals=function(t){var e=this.a,i=this.b,n=this.c,r=this.d,s=this.e,o=this.f;return e===t.a&&i===t.b&&n===t.c&&r===t.d&&s===t.e&&o===t.f},e.apply=function(t,e){void 0===e&&(e={});var i=t.x,n=t.y,r=this.a,s=this.b,o=this.c,a=this.d,u=this.e,h=this.f;return e.x=i*r+n*o+u||0,e.y=i*s+n*a+h||0,e},t}(); 16 | /*! 17 | * matrix 3.10.4 18 | * https://greensock.com 19 | * 20 | * Copyright 2008-2022, GreenSock. All rights reserved. 21 | * Subject to the terms at https://greensock.com/standard-license or for 22 | * Club GreenSock members, the agreement issued with that membership. 23 | * @author: Jack Doyle, jack@greensock.com 24 | */function hr(t,e,i,n){if(!t||!t.parentNode||(Yn||Jn(t)).documentElement===t)return new ur;var r=function(t){for(var e,i;t&&t!==Nn;)(i=t._gsap)&&i.uncache&&i.get(t,"x"),i&&!i.scaleX&&!i.scaleY&&i.renderTransform&&(i.scaleX=i.scaleY=1e-4,i.renderTransform(1,i),e?e.push(i):e=[i]),t=t.parentNode;return e}(t),s=ir(t)?Zn:Kn,o=or(t,i),a=s[0].getBoundingClientRect(),u=s[1].getBoundingClientRect(),h=s[2].getBoundingClientRect(),l=o.parentNode,c=!n&&nr(t),f=new ur((u.left-a.left)/100,(u.top-a.top)/100,(h.left-a.left)/100,(h.top-a.top)/100,a.left+(c?0:er()),a.top+(c?0:tr()));if(l.removeChild(o),r)for(a=r.length;a--;)(u=r[a]).scaleX=u.scaleY=0,u.renderTransform(1,u);return e?f.inverse():f}var lr,cr,fr,pr,dr,mr,gr,_r=1,vr=function(t,e){return t.actions.forEach((function(t){return t.vars[e]&&t.vars[e](t)}))},yr={},xr=180/Math.PI,br=Math.PI/180,wr={},Tr={},Or={},Mr=function(t){return"string"==typeof t?t.split(" ").join("").split(","):t},kr=Mr("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),Dr=Mr("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),Cr=function(t){return lr(t)[0]||console.warn("Element not found:",t)},Er=function(t){return Math.round(1e4*t)/1e4||0},Sr=function(t,e,i){return t.forEach((function(t){return t.classList[i](e)}))},Ar={zIndex:1,kill:1,simple:1,spin:1,clearProps:1,targets:1,toggleClass:1,onComplete:1,onUpdate:1,onInterrupt:1,onStart:1,delay:1,repeat:1,repeatDelay:1,yoyo:1,scale:1,fade:1,absolute:1,props:1,onEnter:1,onLeave:1,custom:1,paused:1,nested:1,prune:1,absoluteOnLeave:1},Pr={zIndex:1,simple:1,clearProps:1,scale:1,absolute:1,fitChild:1,getVars:1,props:1},Ir=function(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()},Lr=function(t,e){var i,n={};for(i in t)e[i]||(n[i]=t[i]);return n},Br={},Rr=function(t){var e=Br[t]=Mr(t);return Or[t]=e.concat(Dr),e},zr=function t(e,i,n){void 0===n&&(n=0);for(var r=e.parentNode,s=1e3*Math.pow(10,n)*(i?-1:1),o=i?900*-s:0;e;)o+=s,e=e.previousSibling;return r?o+t(r,i,n+1):o},Xr=function(t,e,i){return t.forEach((function(t){return t.d=zr(i?t.element:t.t,e)})),t.sort((function(t,e){return t.d-e.d})),t},Yr=function(t,e){for(var i,n,r=t.element.style,s=t.css=t.css||[],o=e.length;o--;)n=r[i=e[o]]||r.getPropertyValue(i),s.push(n?i:Tr[i]||(Tr[i]=Ir(i)),n);return r},Fr=function(t){var e=t.css,i=t.element.style,n=0;for(t.cache.uncache=1;n0&&B&&(u.style.opacity=Q?g.opacity-_.opacity:"0"),$r(g,_,L,Y)):_.isVisible!==g.isVisible&&(_.isVisible?g.isVisible||(_.css=g.css,j.push(_),U.splice(a--,1),T&&P&&$r(g,_,L,Y)):(g.isVisible&&q.push(g),U.splice(a--,1))),L||(u.style.maxWidth=Math.max(g.width,_.width)+"px",u.style.maxHeight=Math.max(g.height,_.height)+"px",u.style.minWidth=Math.min(g.width,_.width)+"px",u.style.minHeight=Math.min(g.height,_.height)+"px"),P&&A&&u.classList.add(A)):U.splice(a--,1),f.push(g);var e;if(A&&(e=f.map((function(t){return t.element})),P&&e.forEach((function(t){return t.classList.remove(A)}))),es(!1),L?(F.scaleX=function(t){return U[t].a.scaleX},F.scaleY=function(t){return U[t].a.scaleY}):(F.width=function(t){return U[t].a.width+"px"},F.height=function(t){return U[t].a.height+"px"},F.autoRound=i.autoRound||!1),F.x=function(t){return U[t].a.x+"px"},F.y=function(t){return U[t].a.y+"px"},F.rotation=function(t){return U[t].a.rotation+(z?360*G(t,c[t],c):0)},F.skewX=function(t){return U[t].a.skewX},c=U.map((function(t){return t.t})),(I||0===I)&&(F.modifiers={zIndex:function(){return I}},F.zIndex=I,F.immediateRender=!1!==i.immediateRender),B&&(F.opacity=function(t){return U[t].sd<0?0:U[t].sd>0?U[t].a.opacity:"+=0"}),W.length){R=cr.utils.distribute(R);var n=c.slice(W.length);F.stagger=function(t,e){return R(~W.indexOf(e)?c.indexOf(U[t].swap.t):t,e,n)}}if(kr.forEach((function(t){return i[t]&&V.eventCallback(t,i[t],i[t+"Params"])})),M&&c.length)for(s in N=Lr(F,Ar),"scale"in M&&(M.scaleX=M.scaleY=M.scale,delete M.scale),M)(r=Lr(M[s],Pr))[s]=F[s],!("duration"in r)&&"duration"in F&&(r.duration=F.duration),r.stagger=F.stagger,$.call(V,c,r,0),delete N[s];(c.length||j.length||q.length)&&(A&&V.add((function(){return Sr(e,A,V._zTime<0?"remove":"add")}),0)&&!D&&Sr(e,A,"add"),c.length&&$.call(V,c,N,0)),Qr(b,q,V),Qr(w,j,V);var p=fr&&fr.timeline;p&&(p.add(V,0),fr._final.push((function(){return Vr(U,!x)}))),o=V.duration(),V.call((function(){var t=V.time()>=o;t&&!p&&Vr(U,!x),A&&Sr(e,A,t?"remove":"add")}))},O&&(T=U.filter((function(t){return!t.sd&&!t.a.isVisible&&t.b.isVisible})).map((function(t){return t.a.element}))),fr)?(T&&(v=fr._abs).push.apply(v,jr(U,T)),fr._run.push(m)):(T&&Ur(jr(U,T)),m());return fr?fr.timeline:V},ns=function t(e){e.vars.onInterrupt&&e.vars.onInterrupt.apply(e,e.vars.onInterruptParams||[]),e.getChildren(!0,!1,!0).forEach(t)},rs=function(t,e){if(t&&t.progress()<1&&!t.paused())return e&&(ns(t),e<2&&t.progress(1),t.kill()),!0},ss=function(t){for(var e,i=t.idLookup={},n=t.alt={},r=t.elementStates,s=r.length;s--;)i[(e=r[s]).id]?n[e.id]=e:i[e.id]=e},os=function(){function t(t,e,i){if(this.props=e&&e.props,this.simple=!(!e||!e.simple),i)this.targets=Gr(t),this.elementStates=t,ss(this);else{this.targets=lr(t);var n=e&&(!1===e.kill||e.batch&&!e.kill);fr&&!n&&fr._kill.push(this),this.update(n||!!fr)}}var e=t.prototype;return e.update=function(t){var e=this;return this.elementStates=this.targets.map((function(t){return new as(t,e.props,e.simple)})),ss(this),this.interrupt(t),this.recordInlineStyles(),this},e.clear=function(){return this.targets.length=this.elementStates.length=0,ss(this),this},e.fit=function(t,e,i){for(var n,r,s=Xr(this.elementStates.slice(0),!1,!0),o=(t||this).idLookup,a=0;a=0&&this.actions.splice(e,1),this},e.getState=function(t){var e=this,i=fr,n=pr;return fr=this,this.state.clear(),this._kill.length=0,this.actions.forEach((function(i){i.vars.getState&&(i.states.length=0,pr=i,i.state=i.vars.getState(i)),t&&i.states.forEach((function(t){return e.state.add(t)}))})),pr=n,fr=i,this.killConflicts(),this},e.animate=function(){var t,e,i=this,n=fr,r=this.timeline,s=this.actions.length;for(fr=this,r.clear(),this._abs.length=this._final.length=this._run.length=0,this.actions.forEach((function(t){t.vars.animate&&t.vars.animate(t);var e,i,n=t.vars.onEnter,r=t.vars.onLeave,s=t.targets;s&&s.length&&(n||r)&&(e=new os,t.states.forEach((function(t){return e.add(t)})),(i=e.compare(ls.getState(s))).enter.length&&n&&n(i.enter),i.leave.length&&r&&r(i.leave))})),Ur(this._abs),this._run.forEach((function(t){return t()})),e=r.duration(),t=this._final.slice(0),r.add((function(){e<=r.time()&&(t.forEach((function(t){return t()})),vr(i,"onComplete"))})),fr=n;s--;)this.actions[s].vars.once&&this.actions[s].kill();return vr(this,"onStart"),r.restart(),this},e.loadState=function(t){t||(t=function(){return 0});var e=[];return this.actions.forEach((function(i){if(i.vars.loadState){var n,r=function r(s){s&&(i.targets=s),~(n=e.indexOf(r))&&(e.splice(n,1),e.length||t())};e.push(r),i.vars.loadState(r)}})),e.length||t(),this},e.setState=function(){return this.actions.forEach((function(t){return t.targets=t.vars.setState&&t.vars.setState(t)})),this},e.killConflicts=function(t){return this.state.interrupt(t),this._kill.forEach((function(e){return e.interrupt(t)})),this},e.run=function(t,e){var i=this;return this!==fr&&(t||this.getState(e),this.loadState((function(){i._killed||(i.setState(),i.animate())}))),this},e.clear=function(t){this.state.clear(),t||(this.actions.length=0)},e.getStateById=function(t){for(var e,i=this.actions.length;i--;)if(e=this.actions[i].getStateById(t))return e;return this.state.idLookup[t]&&this.state},e.kill=function(){this._killed=1,this.clear(),delete yr[this.id]},t}(),ls=function(){function t(){}return t.getState=function(e,i){var n=Jr(e,i);return pr&&pr.states.push(n),i&&i.batch&&t.batch(i.batch).state.add(n),n},t.from=function(t,e){return"clearProps"in(e=e||{})||(e.clearProps=!0),is(t,Jr(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,-1)},t.to=function(t,e){return is(t,Jr(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,1)},t.fromTo=function(t,e,i){return is(t,e,i)},t.fit=function(t,e,i){var n=i?Lr(i,Pr):{},r=i||n,s=r.absolute,o=r.scale,a=r.getVars,u=r.props,h=r.runBackwards,l=r.onComplete,c=r.simple,f=i&&i.fitChild&&Cr(i.fitChild),p=Wr(e,u,c,t),d=Wr(t,0,c,p),m=u?Or[u]:Dr;return u&&Hr(n,p.props),h&&(Yr(d,m),"immediateRender"in n||(n.immediateRender=!0),n.onComplete=function(){Fr(d),l&&l.apply(this,arguments)}),s&&qr(d,p),n=$r(d,p,o||f,u,f,n.duration||a?n:0),a?n:n.duration?cr.to(d.element,n):null},t.makeAbsolute=function(t,e){return(t instanceof os?t:new os(t,e)).makeAbsolute()},t.batch=function(t){return t||(t="default"),yr[t]||(yr[t]=new hs(t))},t.killFlipsOf=function(t,e){(t instanceof os?t.targets:lr(t)).forEach((function(t){return t&&rs(t._flip,!1!==e?1:2)}))},t.isFlipping=function(e){var i=t.getByTarget(e);return!!i&&i.isActive()},t.getByTarget=function(t){return(Cr(t)||wr)._flip},t.getElementState=function(t,e){return new as(Cr(t),e)},t.convertCoordinates=function(t,e,i){var n=hr(e,!0,!0).multiply(hr(t));return i?n.apply(i):n},t.register=function(t){if(dr="undefined"!=typeof document&&document.body){cr=t,Jn(dr),lr=cr.utils.toArray;var e=cr.utils.snap(.1);mr=function(t,i){return e(parseFloat(t)+i)}}},t}();function cs(t,e){for(var i=0;ia?(r=n,n=t,o=s,s=u):i?n+=t:n=r+(t-r)/(u-o)*(s-o)};return{update:h,reset:function(){r=n=i?0:n,o=s=0},getVelocity:function(t){var e=o,a=r,l=Es();return(t||0===t)&&t!==n&&h(t),s===o||l-o>u?0:(n+(i?a:-a))/((i?l:s)-e)*1e3}}},Fs=function(t,e){return e&&!t._gsapAllow&&t.preventDefault(),t.changedTouches?t.changedTouches[0]:t},Vs=function(t){var e=Math.max.apply(Math,t),i=Math.min.apply(Math,t);return Math.abs(e)>=Math.abs(i)?e:i},Ns=function(){var t,e,i,n;(xs=fs.core.globals().ScrollTrigger)&&xs.core&&(t=xs.core,e=t.bridge||{},i=t._scrollers,n=t._proxies,i.push.apply(i,Ds),n.push.apply(n,Cs),Ds=i,Cs=n,Ss=function(t,i){return e[t](i)})},qs=function(t){return(fs=t||Os())&&"undefined"!=typeof document&&document.body&&(ds=window,ms=document,gs=ms.documentElement,_s=ms.body,bs=[ds,ms,gs,_s],fs.utils.clamp,ys="onpointerenter"in _s?"pointer":"mouse",vs=js.isTouch=ds.matchMedia&&ds.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in ds||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0?2:0,Ts=js.eventTypes=("ontouchstart"in gs?"touchstart,touchmove,touchcancel,touchend":"onpointerdown"in gs?"pointerdown,pointermove,pointercancel,pointerup":"mousedown,mousemove,mouseup,mouseup").split(","),setTimeout((function(){return Ms=0}),500),Ns(),ps=1),ps};Rs.op=zs,Ds.cache=0;var js=function(){function t(t){this.init(t)}var e,i,n;return t.prototype.init=function(t){ps||qs(fs)||console.warn("Please gsap.registerPlugin(Observer)"),xs||Ns();var e,i=t.tolerance,n=t.dragMinimum,r=t.type,s=t.target,o=t.lineHeight,a=t.debounce,u=t.preventDefault,h=t.onStop,l=t.onStopDelay,c=t.ignore,f=t.wheelSpeed,p=t.event,d=t.onDragStart,m=t.onDragEnd,g=t.onDrag,_=t.onPress,v=t.onRelease,y=t.onRight,x=t.onLeft,b=t.onUp,w=t.onDown,T=t.onChangeX,O=t.onChangeY,M=t.onChange,k=t.onToggleX,D=t.onToggleY,C=t.onHover,E=t.onHoverEnd,S=t.onMove,A=t.ignoreCheck,P=t.isNormalizer,I=t.onGestureStart,L=t.onGestureEnd,B=t.onWheel,R=t.onEnable,z=t.onDisable,X=t.onClick,Y=t.scrollSpeed,F=t.capture,V=t.allowClicks,N=t.lockAxis,q=t.onLockAxis;this.target=(e=s,s=fs.utils.toArray(e)[0]||("string"==typeof e&&!1!==fs.config().nullTargetWarn?console.warn("Element not found:",e):null)||gs),this.vars=t,c&&(c=fs.utils.toArray(c)),i=i||0,n=n||0,f=f||1,Y=Y||1,r=r||"wheel,touch,pointer",a=!1!==a,o||(o=parseFloat(ds.getComputedStyle(_s).lineHeight)||22);var j,U,W,H,G,Q,$,J=this,Z=0,K=0,tt=Xs(s,Rs),et=Xs(s,zs),it=tt(),nt=et(),rt=~r.indexOf("touch")&&!~r.indexOf("pointer")&&"pointerdown"===Ts[0],st=As(s),ot=s.ownerDocument||ms,at=[0,0,0],ut=[0,0,0],ht=0,lt=function(){return ht=Es()},ct=function(t,e){return(J.event=t)&&c&&~c.indexOf(t.target)||e&&rt&&"touch"!==t.pointerType||A&&A(t,e)},ft=function(){var t=J.deltaX=Vs(at),e=J.deltaY=Vs(ut),n=Math.abs(t)>=i,r=Math.abs(e)>=i;M&&(n||r)&&M(J,t,e,at,ut),n&&(y&&J.deltaX>0&&y(J),x&&J.deltaX<0&&x(J),T&&T(J),k&&J.deltaX<0!=Z<0&&k(J),Z=J.deltaX,at[0]=at[1]=at[2]=0),r&&(w&&J.deltaY>0&&w(J),b&&J.deltaY<0&&b(J),O&&O(J),D&&J.deltaY<0!=K<0&&D(J),K=J.deltaY,ut[0]=ut[1]=ut[2]=0),(H||W)&&(S&&S(J),q&&Q&&q(J),W&&(g(J),W=!1),H=Q=!1),G&&(B(J),G=!1),j=0},pt=function(t,e,i){at[i]+=t,ut[i]+=e,J._vx.update(t),J._vy.update(e),a?j||(j=requestAnimationFrame(ft)):ft()},dt=function(t,e){"y"!==$&&(at[2]+=t,J._vx.update(t,!0)),"x"!==$&&(ut[2]+=e,J._vy.update(e,!0)),N&&!$&&(J.axis=$=Math.abs(t)>Math.abs(e)?"x":"y",Q=!0),a?j||(j=requestAnimationFrame(ft)):ft()},mt=function(t){if(!ct(t,1)){var e=(t=Fs(t,u)).clientX,i=t.clientY,r=e-J.x,s=i-J.y,o=J.isDragging;J.x=e,J.y=i,(o||Math.abs(J.startX-e)>=n||Math.abs(J.startY-i)>=n)&&(g&&(W=!0),o||(J.isDragging=!0),dt(r,s),o||d&&d(J))}},gt=J.onPress=function(t){ct(t,1)||(J.axis=$=null,U.pause(),J.isPressed=!0,t=Fs(t),Z=K=0,J.startX=J.x=t.clientX,J.startY=J.y=t.clientY,J._vx.reset(),J._vy.reset(),Ps(P?s:ot,Ts[1],mt,u,!0),J.deltaX=J.deltaY=0,_&&_(J))},_t=function(t){if(!ct(t,1)){Is(P?s:ot,Ts[1],mt,!0);var e=J.isDragging&&(Math.abs(J.x-J.startX)>3||Math.abs(J.y-J.startY)>3),i=Fs(t);e||(J._vx.reset(),J._vy.reset(),u&&V&&fs.delayedCall(.08,(function(){if(Es()-ht>300&&!t.defaultPrevented)if(t.target.click)t.target.click();else if(ot.createEvent){var e=ot.createEvent("MouseEvents");e.initMouseEvent("click",!0,!0,ds,1,i.screenX,i.screenY,i.clientX,i.clientY,!1,!1,!1,!1,0,null),t.target.dispatchEvent(e)}}))),J.isDragging=J.isGesturing=J.isPressed=!1,h&&!P&&U.restart(!0),m&&e&&m(J),v&&v(J,e)}},vt=function(t){return t.touches&&t.touches.length>1&&(J.isGesturing=!0)&&I(t,J.isDragging)},yt=function(){return J.isGesturing=!1,L(J)},xt=function(t){if(!ct(t)){var e=tt(),i=et();pt((e-it)*Y,(i-nt)*Y,1),it=e,nt=i,h&&U.restart(!0)}},bt=function(t){if(!ct(t)){t=Fs(t,u),B&&(G=!0);var e=(1===t.deltaMode?o:2===t.deltaMode?ds.innerHeight:1)*f;pt(t.deltaX*e,t.deltaY*e,0),h&&!P&&U.restart(!0)}},wt=function(t){if(!ct(t)){var e=t.clientX,i=t.clientY,n=e-J.x,r=i-J.y;J.x=e,J.y=i,H=!0,(n||r)&&dt(n,r)}},Tt=function(t){J.event=t,C(J)},Ot=function(t){J.event=t,E(J)},Mt=function(t){return ct(t)||Fs(t,u)&&X(J)};U=J._dc=fs.delayedCall(l||.25,(function(){J._vx.reset(),J._vy.reset(),U.pause(),h&&h(J)})).pause(),J.deltaX=J.deltaY=0,J._vx=Ys(0,50,!0),J._vy=Ys(0,50,!0),J.scrollX=tt,J.scrollY=et,J.isDragging=J.isGesturing=J.isPressed=!1,J.enable=function(t){return J.isEnabled||(Ps(st?ot:s,"scroll",Ls),r.indexOf("scroll")>=0&&Ps(st?ot:s,"scroll",xt,u,F),r.indexOf("wheel")>=0&&Ps(s,"wheel",bt,u,F),(r.indexOf("touch")>=0&&vs||r.indexOf("pointer")>=0)&&(Ps(s,Ts[0],gt,u,F),Ps(ot,Ts[2],_t),Ps(ot,Ts[3],_t),V&&Ps(s,"click",lt,!1,!0),X&&Ps(s,"click",Mt),I&&Ps(ot,"gesturestart",vt),L&&Ps(ot,"gestureend",yt),C&&Ps(s,ys+"enter",Tt),E&&Ps(s,ys+"leave",Ot),S&&Ps(s,ys+"move",wt)),J.isEnabled=!0,t&&t.type&>(t),R&&R(J)),J},J.disable=function(){J.isEnabled&&(ks.filter((function(t){return t!==J&&As(t.target)})).length||Is(st?ot:s,"scroll",Ls),J.isPressed&&(J._vx.reset(),J._vy.reset(),Is(P?s:ot,Ts[1],mt,!0)),Is(st?ot:s,"scroll",xt,F),Is(s,"wheel",bt,F),Is(s,Ts[0],gt,F),Is(ot,Ts[2],_t),Is(ot,Ts[3],_t),Is(s,"click",lt,!0),Is(s,"click",Mt),Is(ot,"gesturestart",vt),Is(ot,"gestureend",yt),Is(s,ys+"enter",Tt),Is(s,ys+"leave",Ot),Is(s,ys+"move",wt),J.isEnabled=J.isPressed=J.isDragging=!1,z&&z(J))},J.kill=function(){J.disable();var t=ks.indexOf(J);t>=0&&ks.splice(t,1),ws===J&&(ws=0)},ks.push(J),P&&As(s)&&(ws=J),J.enable(p)},e=t,(i=[{key:"velocityX",get:function(){return this._vx.getVelocity()}},{key:"velocityY",get:function(){return this._vy.getVelocity()}}])&&cs(e.prototype,i),n&&cs(e,n),t}();js.version="3.10.4",js.create=function(t){return new js(t)},js.register=qs,js.getAll=function(){return ks.slice()},js.getById=function(t){return ks.filter((function(e){return e.vars.id===t}))[0]},Os()&&fs.registerPlugin(js),Gn.registerPlugin(ls),Gn.registerPlugin(js);const Us=document.body;let Ws={width:window.innerWidth,height:window.innerHeight};window.addEventListener("resize",(()=>{Ws={width:window.innerWidth,height:window.innerHeight}}));new class{initEvents(){this.DOM.items.forEach(((t,e)=>{t.addEventListener("click",(()=>{this.open(t)}))})),this.DOM.backCtrl.addEventListener("click",(()=>{this.close()})),this.DOM.navArrows.next.addEventListener("click",(()=>{this.navigate("next")})),this.DOM.navArrows.prev.addEventListener("click",(()=>{this.navigate("prev")}));const t=()=>{this.isOpen&&!this.isAnimating&&(this.close(),this.scrollObserver.disable())};this.scrollObserver=js.create({type:"wheel,touch,pointer",wheelSpeed:-1,onDown:t,onUp:t,tolerance:10,preventDefault:!0}),this.scrollObserver.disable()}open(t){if(this.isAnimating||this.isOpen)return;this.isAnimating=!0,this.current=this.DOM.items.indexOf(t),this.scrollObserver.enable();const e=window.scrollY;Us.classList.add("oh"),this.DOM.content.classList.add("content--open"),this.contentItems[this.current].DOM.el.classList.add("content__item--current"),this.DOM.items[this.current].classList.add("stack__item--current");const i=ls.getState(this.DOM.items,{props:"opacity"});this.DOM.slides.appendChild(this.DOM.el);const n=t.offsetTop+t.offsetHeight/2;document.documentElement.scrollTop=document.body.scrollTop=0,Gn.set(this.DOM.el,{y:Ws.height/2-n+e}),document.documentElement.scrollTop=document.body.scrollTop=0,ls.from(i,{duration:1,ease:"expo",onComplete:()=>{this.isOpen=!0,this.isAnimating=!1},onStart:()=>document.documentElement.scrollTop=document.body.scrollTop=e,absoluteOnLeave:!0}).to(this.DOM.mainTitleTexts,{duration:.9,ease:"expo",yPercent:-101},0).to(this.contentItems[this.current].DOM.texts,{duration:1,ease:"expo",startAt:{yPercent:101},yPercent:0},0).to(this.DOM.backCtrl,{duration:1,ease:"expo",startAt:{opacity:0},opacity:1},0).to([this.DOM.navArrows.prev,this.DOM.navArrows.next],{duration:1,ease:"expo",startAt:{opacity:0,y:t=>t?-150:150},y:0,opacity:t=>0===this.current&&!t||this.current===this.totalItems-1&&t?0:1},0)}close(){if(this.isAnimating||!this.isOpen)return;this.isAnimating=!0,this.scrollObserver.disable(),this.DOM.items[this.current].classList.remove("stack__item--current"),Us.classList.remove("oh");const t=ls.getState(this.DOM.items,{props:"opacity"});this.DOM.stackWrap.appendChild(this.DOM.el),Gn.set(this.DOM.el,{y:0}),ls.from(t,{duration:1,ease:"expo",onComplete:()=>{this.DOM.content.classList.remove("content--open"),this.contentItems[this.current].DOM.el.classList.remove("content__item--current"),this.current=-1,this.isOpen=!1,this.isAnimating=!1},absoluteOnLeave:!0}).to(this.DOM.mainTitleTexts,{duration:.9,ease:"expo",startAt:{yPercent:101},yPercent:0},0).to(this.contentItems[this.current].DOM.texts,{duration:1,ease:"expo",yPercent:-101},0).to(this.DOM.backCtrl,{duration:1,ease:"expo",opacity:0},0).to([this.DOM.navArrows.prev,this.DOM.navArrows.next],{duration:1,ease:"expo",y:t=>t?100:-100,opacity:0},0)}navigate(t){if(this.isAnimating||"next"===t&&this.current===this.totalItems-1||"prev"===t&&0===this.current)return;this.isAnimating=!0;const e=this.current,i=this.DOM.items[e];this.current="next"===t?this.current+1:this.current-1;const n=this.DOM.items[this.current];i.classList.remove("stack__item--current"),n.classList.add("stack__item--current"),Gn.set(this.DOM.navArrows.prev,{opacity:this.current>0?1:0}),Gn.set(this.DOM.navArrows.next,{opacity:this.currentthis.contentItems[e].DOM.el.classList.remove("content__item--current")},0).to(this.contentItems[this.current].DOM.texts,{duration:.9,ease:"expo",startAt:{yPercent:"next"===t?-101:101},onStart:()=>this.contentItems[this.current].DOM.el.classList.add("content__item--current"),yPercent:0},.2)}constructor(t){s(this,"DOM",{el:null,items:null,stackWrap:document.querySelector(".stack-wrap"),slides:document.querySelector(".slides"),content:document.querySelector(".content"),contentItems:[...document.querySelectorAll(".content__item")],mainTitleTexts:[...document.querySelectorAll(".title > .oh > .oh__inner")],backCtrl:document.querySelector(".content__back"),nav:document.querySelector(".content__nav-wrap"),navArrows:{prev:document.querySelector(".content__nav--prev"),next:document.querySelector(".content__nav--next")}}),s(this,"contentItems",[]),s(this,"isOpen",!1),s(this,"current",-1),s(this,"totalItems",0),s(this,"gap",getComputedStyle(document.documentElement).getPropertyValue("--slide-gap")),this.DOM.el=t,this.DOM.items=[...this.DOM.el.querySelectorAll(".stack__item:not(.stack__item--empty)")],this.totalItems=this.DOM.items.length,this.DOM.contentItems.forEach((t=>this.contentItems.push(new o(t)))),this.initEvents()}}(document.querySelector(".stack"));((t="img")=>new Promise((e=>{r(document.querySelectorAll(t),{background:!0},e)})))(".stack__item").then((t=>document.body.classList.remove("loading"))); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Stack to Content Layout Transition | Codrops

Stack to Content Layout Transition

Back to the article
Previous demo

Queen of the Sea

Osaka, 1986

Hidesato felt very sorry for the Dragon King on hearing his story, and readily promised to do what he could to help him.

Hinata'sTrouble

Kyoto, 1986

His power was immense, for he was the ruler of all sea creatures both great and small, and in his keeping were the Jewels of the Ebb and Flow of the Tide.

Dragon'sJourney

Nagoya, 1986

Calling all his fish retainers together, he chose several of them as ambassadors to go through the sea and seek for a young Dragon Princess who would be his bride.

PrinceYamato

Tokyo, 1986

The King fell in love with her at once, and the wedding ceremony was celebrated with great splendor.

Kumaso& Haru

Sapporo, 1986

When the hare heard these kind words he felt very grateful to the man, and encouraged by his gentle manner the hare told him all that had befallen him.

Botan'sDream

Sendai, 1986

Okuni-nushi-no-Mikoto is worshiped by the people in some parts of Japan, as a god, and the hare has become famous as “The White Hare of Inaba”.

The Gateof Rashoi

Kyoto, 1986

Nearly two thousand years ago this sword was kept at the shrines of Ite, the temples dedicated to the worship of Amaterasu, the great and beautiful Sun Goddess from whom the Japanese Emperors are said to be descended.

FaithfulKnights

Kobe, 1986

At last King Keiko ordered his younger son Prince Yamato to subdue the brigands and, if possible, to rid the land of their evil lives.

Five Colorsfor Jokwa

Hiroshima, 1986

There is a story of knightly adventure and daring which explains why the name of the sword was changed from that of Murakumo to Kasanagi, which means grass clearing.

Shikuyu'sCharm

Kumamoto, 1986

He at once made ready to start, and great was the stir in the precincts of the Palace as he and his trusty followers gathered together and prepared for the expedition, and polished up their armor and donned it.

Photography

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

Stack to Content Layout Transition

22 | 23 | Back to the article 24 | 25 | 26 |
27 | Previous demo 28 |
29 | 33 |
34 |
35 |
36 |

37 | Queen of the Sea

38 |
39 |

Osaka, 1986

40 |

Hidesato felt very sorry for the Dragon King on hearing his story, and readily promised to do what he could to help him.

41 |
42 |
43 |
44 |

Hinata'sTrouble

45 |
46 |

Kyoto, 1986

47 |

His power was immense, for he was the ruler of all sea creatures both great and small, and in his keeping were the Jewels of the Ebb and Flow of the Tide.

48 |
49 |
50 |
51 |

Dragon'sJourney

52 |
53 |

Nagoya, 1986

54 |

Calling all his fish retainers together, he chose several of them as ambassadors to go through the sea and seek for a young Dragon Princess who would be his bride.

55 |
56 |
57 |
58 |

PrinceYamato

59 |
60 |

Tokyo, 1986

61 |

The King fell in love with her at once, and the wedding ceremony was celebrated with great splendor.

62 |
63 |
64 |
65 |

Kumaso& Haru

66 |
67 |

Sapporo, 1986

68 |

When the hare heard these kind words he felt very grateful to the man, and encouraged by his gentle manner the hare told him all that had befallen him.

69 |
70 |
71 |
72 |

Botan'sDream

73 |
74 |

Sendai, 1986

75 |

Okuni-nushi-no-Mikoto is worshiped by the people in some parts of Japan, as a god, and the hare has become famous as “The White Hare of Inaba”.

76 |
77 |
78 |
79 |

The Gateof Rashoi

80 |
81 |

Kyoto, 1986

82 |

Nearly two thousand years ago this sword was kept at the shrines of Ite, the temples dedicated to the worship of Amaterasu, the great and beautiful Sun Goddess from whom the Japanese Emperors are said to be descended.

83 |
84 |
85 |
86 |

FaithfulKnights

87 |
88 |

Kobe, 1986

89 |

At last King Keiko ordered his younger son Prince Yamato to subdue the brigands and, if possible, to rid the land of their evil lives.

90 |
91 |
92 |
93 |

Five Colorsfor Jokwa

94 |
95 |

Hiroshima, 1986

96 |

There is a story of knightly adventure and daring which explains why the name of the sword was changed from that of Murakumo to Kasanagi, which means grass clearing.

97 |
98 |
99 |
100 |

Shikuyu'sCharm

101 |
102 | Kumamoto, 1986

103 |

He at once made ready to start, and great was the stir in the precincts of the Palace as he and his trusty followers gathered together and prepared for the expedition, and polished up their armor and donned it.

104 |
105 |
106 | 112 | 120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |

Photography

140 | 1986 — 2022 141 |
142 |
143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /src/js/contentItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Class representing a Content Item 3 | */ 4 | export class ContentItem { 5 | // DOM elements 6 | DOM = { 7 | // main element (.content__item) 8 | el: null, 9 | // title (.content__item-title) 10 | title: null, 11 | // description (.content__item-description) 12 | description: null, 13 | // all .oh__inner text spans that will animate in/out 14 | texts: null 15 | } 16 | 17 | /** 18 | * Constructor. 19 | * @param {NodeList} DOM_el - main element (.content__item) 20 | */ 21 | constructor(DOM_el) { 22 | this.DOM.el = DOM_el; 23 | this.DOM.title = this.DOM.el.querySelector('.content__item-title'); 24 | this.DOM.description = this.DOM.el.querySelector('.content__item-description'); 25 | 26 | this.DOM.texts = [...this.DOM.el.querySelectorAll('.oh > .oh__inner')]; 27 | } 28 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import { Slideshow } from './slideshow'; 3 | 4 | const slideshow = new Slideshow(document.querySelector('.stack')); 5 | 6 | // Preload images 7 | preloadImages('.stack__item').then( _ => document.body.classList.remove('loading')); -------------------------------------------------------------------------------- /src/js/slideshow.js: -------------------------------------------------------------------------------- 1 | import { ContentItem } from './contentItem'; 2 | import { gsap } from 'gsap'; 3 | import { Flip } from 'gsap/Flip'; 4 | gsap.registerPlugin(Flip); 5 | import { Observer } from 'gsap/Observer'; 6 | gsap.registerPlugin(Observer); 7 | 8 | const body = document.body; 9 | 10 | let winsize = {width: window.innerWidth, height: window.innerHeight}; 11 | window.addEventListener('resize', () => { 12 | winsize = {width: window.innerWidth, height: window.innerHeight}; 13 | }); 14 | 15 | /** 16 | * Class representing the Slideshow 17 | */ 18 | export class Slideshow { 19 | // DOM elements 20 | DOM = { 21 | // main element (.stack) 22 | el: null, 23 | // stack items (.stack__item) 24 | items: null, 25 | 26 | // the DOM location of the .stacks element when the slideshow is closed 27 | stackWrap: document.querySelector('.stack-wrap'), 28 | // the DOM location of the .stacks element when the slideshow is open 29 | slides: document.querySelector('.slides'), 30 | 31 | // .content element 32 | content: document.querySelector('.content'), 33 | // the content items (.content__item) 34 | contentItems: [...document.querySelectorAll('.content__item')], 35 | 36 | // the main title ("Photography") 37 | mainTitleTexts: [...document.querySelectorAll('.title > .oh > .oh__inner')], 38 | 39 | // back control (.content__back) 40 | backCtrl: document.querySelector('.content__back'), 41 | // navigation (.content__nav-wrap) 42 | nav: document.querySelector('.content__nav-wrap'), 43 | // navigation arrows 44 | navArrows: { 45 | prev: document.querySelector('.content__nav--prev'), 46 | next: document.querySelector('.content__nav--next'), 47 | } 48 | } 49 | // Content instances 50 | contentItems = []; 51 | // Check is Slishow is in open mode or closed mode 52 | isOpen = false; 53 | // Current item's position 54 | current = -1; 55 | // Total items 56 | totalItems = 0; 57 | // items gap (CSS variable) 58 | gap = getComputedStyle(document.documentElement).getPropertyValue('--slide-gap'); 59 | 60 | /** 61 | * Constructor. 62 | * @param {NodeList} DOM_el - main element (.stack) 63 | */ 64 | constructor(DOM_el) { 65 | this.DOM.el = DOM_el; 66 | 67 | this.DOM.items = [...this.DOM.el.querySelectorAll('.stack__item:not(.stack__item--empty)')]; 68 | this.totalItems = this.DOM.items.length; 69 | this.DOM.contentItems.forEach(item => this.contentItems.push(new ContentItem(item))); 70 | 71 | this.initEvents(); 72 | } 73 | /** 74 | * Event binding. 75 | */ 76 | initEvents() { 77 | 78 | this.DOM.items.forEach((item, position) => { 79 | // Clicking on a stack item reveals the slideshow navigation and the item's content 80 | item.addEventListener('click', () => { 81 | // Show the item's content 82 | this.open(item); 83 | }); 84 | }); 85 | 86 | this.DOM.backCtrl.addEventListener('click', () => { 87 | this.close(); 88 | }); 89 | 90 | this.DOM.navArrows.next.addEventListener('click', () => { 91 | this.navigate('next'); 92 | }); 93 | this.DOM.navArrows.prev.addEventListener('click', () => { 94 | this.navigate('prev'); 95 | }); 96 | 97 | // Trigger the close() on scroll by using the gsap observer plugin 98 | const scrollFn = () => { 99 | if ( this.isOpen && !this.isAnimating ) { 100 | this.close(); 101 | this.scrollObserver.disable(); 102 | } 103 | } 104 | this.scrollObserver = Observer.create({ 105 | type: 'wheel,touch,pointer', 106 | wheelSpeed: -1, 107 | onDown: scrollFn, 108 | onUp: scrollFn, 109 | tolerance: 10, 110 | preventDefault: true, 111 | }) 112 | this.scrollObserver.disable(); 113 | 114 | } 115 | /** 116 | * Opens the slideshow navigation and reveals the item's content. 117 | * @param {NodeList} stackItem - the clicked item 118 | */ 119 | open(stackItem) { 120 | 121 | if ( this.isAnimating || this.isOpen ) { 122 | return; 123 | } 124 | this.isAnimating = true; 125 | 126 | // Update the current value 127 | this.current = this.DOM.items.indexOf(stackItem); 128 | 129 | // enable the observer (closes teh slideshow on scroll/touch) 130 | this.scrollObserver.enable(); 131 | 132 | const scrollY = window.scrollY; 133 | 134 | body.classList.add('oh'); 135 | this.DOM.content.classList.add('content--open'); 136 | 137 | // set CSS current classes to both content and stack item elements 138 | this.contentItems[this.current].DOM.el.classList.add('content__item--current'); 139 | this.DOM.items[this.current].classList.add('stack__item--current'); 140 | 141 | const state = Flip.getState(this.DOM.items, {props: 'opacity'}); 142 | this.DOM.slides.appendChild(this.DOM.el); 143 | 144 | const itemCenter = stackItem.offsetTop + stackItem.offsetHeight/2; 145 | 146 | // seems to solve a bug in firefox 147 | document.documentElement.scrollTop = document.body.scrollTop = 0; 148 | 149 | gsap.set(this.DOM.el, { 150 | y: winsize.height/2 - itemCenter + scrollY 151 | }); 152 | 153 | // seems to solve a bug in firefox 154 | document.documentElement.scrollTop = document.body.scrollTop = 0; 155 | 156 | // Flip 157 | Flip.from(state, { 158 | duration: 1, 159 | ease: 'expo', 160 | onComplete: () => { 161 | this.isOpen = true; 162 | this.isAnimating = false; 163 | }, 164 | // seems to solve a bug in firefox 165 | onStart: () => document.documentElement.scrollTop = document.body.scrollTop = scrollY, 166 | absoluteOnLeave: true, 167 | }) 168 | .to(this.DOM.mainTitleTexts, { 169 | duration: .9, 170 | ease: 'expo', 171 | yPercent: -101 172 | }, 0) 173 | .to(this.contentItems[this.current].DOM.texts, { 174 | duration: 1, 175 | ease: 'expo', 176 | startAt: {yPercent: 101}, 177 | yPercent: 0 178 | }, 0) 179 | .to(this.DOM.backCtrl, { 180 | duration: 1, 181 | ease: 'expo', 182 | startAt: {opacity: 0}, 183 | opacity: 1 184 | }, 0) 185 | .to([this.DOM.navArrows.prev, this.DOM.navArrows.next], { 186 | duration: 1, 187 | ease: 'expo', 188 | startAt: { 189 | opacity: 0, 190 | y: pos => pos ? -150 : 150 191 | }, 192 | y: 0, 193 | opacity: pos => this.current === 0 && !pos || this.current === this.totalItems-1 && pos ? 0 : 1 194 | }, 0); 195 | 196 | } 197 | /** 198 | * Closes the slideshow navigation and hides the content 199 | */ 200 | close() { 201 | 202 | if ( this.isAnimating || !this.isOpen ) { 203 | return; 204 | } 205 | this.isAnimating = true; 206 | 207 | this.scrollObserver.disable(); 208 | 209 | this.DOM.items[this.current].classList.remove('stack__item--current'); 210 | 211 | body.classList.remove('oh'); 212 | 213 | const state = Flip.getState(this.DOM.items, {props: 'opacity'}); 214 | this.DOM.stackWrap.appendChild(this.DOM.el); 215 | 216 | gsap.set(this.DOM.el, { 217 | y: 0 218 | }); 219 | 220 | // Flip 221 | Flip.from(state, { 222 | duration: 1, 223 | ease: 'expo', 224 | onComplete: () => { 225 | this.DOM.content.classList.remove('content--open'); 226 | this.contentItems[this.current].DOM.el.classList.remove('content__item--current'); 227 | 228 | this.current = -1; 229 | this.isOpen = false; 230 | this.isAnimating = false; 231 | }, 232 | absoluteOnLeave: true 233 | }) 234 | .to(this.DOM.mainTitleTexts, { 235 | duration: .9, 236 | ease: 'expo', 237 | startAt: {yPercent: 101}, 238 | yPercent: 0 239 | }, 0) 240 | .to(this.contentItems[this.current].DOM.texts, { 241 | duration: 1, 242 | ease: 'expo', 243 | yPercent: -101 244 | }, 0) 245 | .to(this.DOM.backCtrl, { 246 | duration: 1, 247 | ease: 'expo', 248 | opacity: 0 249 | }, 0) 250 | .to([this.DOM.navArrows.prev, this.DOM.navArrows.next], { 251 | duration: 1, 252 | ease: 'expo', 253 | y: pos => pos ? 100 : -100, 254 | opacity: 0 255 | }, 0); 256 | } 257 | /** 258 | * Navigation 259 | * @param {String} direction 'prev' || 'next' 260 | */ 261 | navigate(direction) { 262 | 263 | if ( this.isAnimating || (direction === 'next' && this.current === this.totalItems-1) || (direction === 'prev' && this.current === 0) ) return; 264 | this.isAnimating = true; 265 | 266 | const previousCurrent = this.current; 267 | const currentItem = this.DOM.items[previousCurrent]; 268 | this.current = direction === 'next' ? this.current+1 : this.current-1 269 | const upcomingItem = this.DOM.items[this.current]; 270 | 271 | currentItem.classList.remove('stack__item--current'); 272 | upcomingItem.classList.add('stack__item--current'); 273 | 274 | // show/hide arrows 275 | gsap.set(this.DOM.navArrows.prev, {opacity: this.current > 0 ? 1 : 0}); 276 | gsap.set(this.DOM.navArrows.next, {opacity: this.current < this.totalItems-1 ? 1 : 0}); 277 | 278 | gsap.timeline() 279 | .to(this.DOM.el, { 280 | duration: 1, 281 | ease: 'expo', 282 | y: direction === 'next' ? `-=${winsize.height/2 + winsize.height*.02}` : `+=${winsize.height/2 + winsize.height*.02}`, 283 | onComplete: () => { 284 | this.isAnimating = false; 285 | } 286 | }) 287 | .to(this.contentItems[previousCurrent].DOM.texts, { 288 | duration: .2, 289 | ease: 'power1', 290 | yPercent: direction === 'next' ? 101 : -101, 291 | onComplete: () => this.contentItems[previousCurrent].DOM.el.classList.remove('content__item--current') 292 | }, 0) 293 | .to(this.contentItems[this.current].DOM.texts, { 294 | duration: .9, 295 | ease: 'expo', 296 | startAt: {yPercent: direction === 'next' ? -101 : 101}, 297 | onStart: () => this.contentItems[this.current].DOM.el.classList.add('content__item--current'), 298 | yPercent: 0 299 | }, .2) 300 | } 301 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | /** 4 | * Preload images 5 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img' 6 | */ 7 | const preloadImages = (selector = 'img') => { 8 | return new Promise((resolve) => { 9 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 10 | }); 11 | }; 12 | 13 | export { 14 | preloadImages 15 | }; --------------------------------------------------------------------------------