├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.04213a58.jpg ├── 10.57de09c7.jpg ├── 11.ba790930.jpg ├── 12.c3a8d893.jpg ├── 13.3bd52250.jpg ├── 14.b7263516.jpg ├── 15.55bda21b.jpg ├── 16.eb88393b.jpg ├── 17.3450839a.jpg ├── 18.763d23f6.jpg ├── 19.be25549f.jpg ├── 2.3ff1fdb6.jpg ├── 20.d7a9356b.jpg ├── 21.4c8813a5.jpg ├── 22.ec97ea6e.jpg ├── 23.49e8893a.jpg ├── 24.057dafba.jpg ├── 25.aedfeaa2.jpg ├── 26.3b67c07a.jpg ├── 27.d010228a.jpg ├── 28.03803d35.jpg ├── 29.41de77bb.jpg ├── 3.b606be87.jpg ├── 30.11ca0aca.jpg ├── 4.24fd614c.jpg ├── 5.d13f5e61.jpg ├── 6.786c7db4.jpg ├── 7.df95fe5c.jpg ├── 8.e7faf38e.jpg ├── 9.ea63bab4.jpg ├── favicon.a64e97b2.ico ├── index.01b4f97a.css ├── index.b5e7c14d.js ├── index.e9a2d1b4.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 21.jpg ├── 22.jpg ├── 23.jpg ├── 24.jpg ├── 25.jpg ├── 26.jpg ├── 27.jpg ├── 28.jpg ├── 29.jpg ├── 3.jpg ├── 30.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html └── js ├── contentItem.js ├── grid.js ├── imageCell.js ├── index.js ├── textLinesReveal.js ├── textReveal.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Grid Zoom Layout 2 | 3 | A simple image grid layout where a small grid image zooms to become larger while a content view opens. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2021/12/GridZoom_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=57586) 8 | 9 | [Demo](http://tympanus.net/Development/GridZoom/) 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.04213a58.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/1.04213a58.jpg -------------------------------------------------------------------------------- /dist/10.57de09c7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/10.57de09c7.jpg -------------------------------------------------------------------------------- /dist/11.ba790930.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/11.ba790930.jpg -------------------------------------------------------------------------------- /dist/12.c3a8d893.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/12.c3a8d893.jpg -------------------------------------------------------------------------------- /dist/13.3bd52250.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/13.3bd52250.jpg -------------------------------------------------------------------------------- /dist/14.b7263516.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/14.b7263516.jpg -------------------------------------------------------------------------------- /dist/15.55bda21b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/15.55bda21b.jpg -------------------------------------------------------------------------------- /dist/16.eb88393b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/16.eb88393b.jpg -------------------------------------------------------------------------------- /dist/17.3450839a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/17.3450839a.jpg -------------------------------------------------------------------------------- /dist/18.763d23f6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/18.763d23f6.jpg -------------------------------------------------------------------------------- /dist/19.be25549f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/19.be25549f.jpg -------------------------------------------------------------------------------- /dist/2.3ff1fdb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/2.3ff1fdb6.jpg -------------------------------------------------------------------------------- /dist/20.d7a9356b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/20.d7a9356b.jpg -------------------------------------------------------------------------------- /dist/21.4c8813a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/21.4c8813a5.jpg -------------------------------------------------------------------------------- /dist/22.ec97ea6e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/22.ec97ea6e.jpg -------------------------------------------------------------------------------- /dist/23.49e8893a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/23.49e8893a.jpg -------------------------------------------------------------------------------- /dist/24.057dafba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/24.057dafba.jpg -------------------------------------------------------------------------------- /dist/25.aedfeaa2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/25.aedfeaa2.jpg -------------------------------------------------------------------------------- /dist/26.3b67c07a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/26.3b67c07a.jpg -------------------------------------------------------------------------------- /dist/27.d010228a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/27.d010228a.jpg -------------------------------------------------------------------------------- /dist/28.03803d35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/28.03803d35.jpg -------------------------------------------------------------------------------- /dist/29.41de77bb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/29.41de77bb.jpg -------------------------------------------------------------------------------- /dist/3.b606be87.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/3.b606be87.jpg -------------------------------------------------------------------------------- /dist/30.11ca0aca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/30.11ca0aca.jpg -------------------------------------------------------------------------------- /dist/4.24fd614c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/4.24fd614c.jpg -------------------------------------------------------------------------------- /dist/5.d13f5e61.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/5.d13f5e61.jpg -------------------------------------------------------------------------------- /dist/6.786c7db4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/6.786c7db4.jpg -------------------------------------------------------------------------------- /dist/7.df95fe5c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/7.df95fe5c.jpg -------------------------------------------------------------------------------- /dist/8.e7faf38e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/8.e7faf38e.jpg -------------------------------------------------------------------------------- /dist/9.ea63bab4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/9.ea63bab4.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.01b4f97a.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:15px}body{--color-text:#000;--color-bg:#f7f5ee;--color-link:#000;--color-link-hover:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);font-family:rustica,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;line-height:1;margin:0;overflow:hidden;overflow-y:scroll}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{background:var(--color-bg);height:100%;left:0;top:0;width:100%}.js .loading:after{animation:loaderAnim .7s linear infinite alternate forwards;background:var(--color-link);border-radius:50%;height:60px;left:50%;margin:-30px 0 0 -30px;opacity:.4;top:50%;width:60px}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{color:var(--color-link);font-weight:600;text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid red}.unbutton{background:none;border:0;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}.line{padding-bottom:.35rem;transform-origin:0 50%;white-space:nowrap;will-change:transform}.oh{overflow:hidden}.oh__inner{display:inline-block;transform-origin:0 50%;will-change:transform}.frame{align-items:flex-start;display:flex;flex-direction:column;height:100%}.frame--fixed{display:grid;grid-template-columns:38% 62%;height:auto;left:0;padding:1rem;position:fixed;top:0;width:100%;z-index:1}.frame__title{font-size:1rem;font-weight:400;margin:0 0 2rem}.frame__links{align-items:flex-start;display:flex;flex-direction:column}.frame__links a{margin:0 1rem .35rem 0}.frame--fixed .frame__links{flex-direction:row}.grid{--grid-border-radius:8px;display:grid;grid-template-columns:repeat(2,50%)}.grid--large{--grid-padding:0.5vw;grid-auto-rows:32vmin;padding:.5vw}.grid--mini{--grid-padding:1px;height:190px;margin-bottom:3vh;opacity:0;pointer-events:none;position:absolute;visibility:hidden;width:220px}.grid__cell{align-items:end;display:grid}.grid--mini .grid__cell:not(.grid__cell--current):hover .grid__cell-img{opacity:.7}.grid__cell--current .grid__cell-img{opacity:.3}.grid__cell--padded{padding:calc(var(--grid-padding)*2)}.grid__cell-img{border-radius:var(--grid-border-radius);display:block;height:calc(100% - var(--grid-padding)*2);margin:var(--grid-padding);overflow:hidden;position:relative;width:calc(100% - var(--grid-padding)*2)}.grid__cell-img-inner{background-position:50% 50%;background-size:cover;cursor:pointer;height:100%;width:100%}.content{display:flex;flex-direction:column;height:100%;justify-content:space-between;left:0;padding:15vh 8vw 0;pointer-events:none;position:fixed;top:0;width:100%;z-index:1000}.content__item{display:grid;opacity:0;position:absolute}.content__item--current{opacity:1;pointer-events:auto;position:relative}.content__item-number{display:block;font-weight:600}.content__item-heading{font-size:4vw;font-weight:600;line-height:1;margin:1rem 0 3rem}.content__item-text{margin-bottom:2rem;max-width:30ch}.content__item-link{cursor:pointer}.slide-nav{align-content:space-between;display:grid;height:100%;pointer-events:none;position:fixed;right:15%;top:0;width:40%}.slide-nav__img{cursor:not-allowed;height:10vh;opacity:.3;overflow:hidden;position:relative;width:100%}.content--open .slide-nav__img{pointer-events:auto}.slide-nav__img--prev{border-radius:0 0 1.5vw 1.5vw;transform:translateY(-100%)}.slide-nav__img--next{border-radius:1.5vw 1.5vw 0 0;transform:translateY(100%)}.slide-nav__img-inner{background-position:50% 50%;background-size:cover;height:100%;width:100%}.back{stroke:#000;background:none;border:0;cursor:pointer;margin:auto 0 1.5rem;opacity:0;padding:0;pointer-events:none;width:50px;z-index:1000}.back svg{stroke-linecap:round}.back:focus,.back:hover{stroke:#823725;outline:none}.content--open .back{pointer-events:auto}@media screen and (min-width:53em){.content{width:38%}.grid{grid-template-columns:repeat(4,25%)}.grid__cell--padded{padding:var(--grid-padding)}.grid__cell-c1-r1{grid-column:1;grid-row:1}.grid__cell-c3-r1{grid-column:3;grid-row:1}.grid__cell-c4-r1{grid-column:4;grid-row:1}.grid__cell-c1-r2{grid-column:1;grid-row:2}.grid__cell-c2-r2{grid-column:2;grid-row:2}.grid__cell-c3-r2{grid-column:3;grid-row:2}.grid__cell-c4-r2{grid-column:4;grid-row:2}.grid__cell-c2-r3{grid-column:2;grid-row:3}.grid__cell-c4-r3{grid-column:4;grid-row:3}.grid__cell-c1-r4{grid-column:1;grid-row:4}.grid__cell-c3-r4{grid-column:3;grid-row:4}.grid__cell-c3-r5{grid-column:3;grid-row:5}.grid--mini{position:relative;visibility:visible}.content--open .grid--mini,body #cdawrap{pointer-events:auto}body #cdawrap{--cda-left:auto;--cda-right:auto;--cda-width:300px;--cda-bottom:auto;--cda-top:auto;margin-top:auto;opacity:1!important;position:relative;z-index:1}body #cdawrap .cda-footer{display:none}body #cdawrap .cda-text{color:transparent!important;height:1.25rem;pointer-events:none;position:relative;text-align:left}body #cdawrap .cda-text:before{color:var(--color-text);content:"Sponsored by "attr(data-sponsor);font-size:.85rem;font-weight:500;left:0;opacity:.5;pointer-events:auto;position:absolute;top:0;transition:opacity .4s}.grid[style*="pointer-events: none;"] .frame #cdawrap .cda-text:before{opacity:0!important}body #cdawrap:hover .cda-text:before{color:var(--color-link-hover)}body #cdawrap a:after{display:none}} -------------------------------------------------------------------------------- /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.parcelRequirecbdb;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.parcelRequirecbdb=n);var r={};n.register("4hJWI",(function(t,e){!function(e,i){"function"==typeof define&&define.amd?define(i):t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],r=0;r({width:window.innerWidth,height:window.innerHeight}),a=(t,e,i)=>{t.forEach((t=>{const n=document.createElement(e);n.classList=i,t.parentNode.appendChild(n),n.appendChild(t)}))};function o(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function l(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} 8 | /*! 9 | * GSAP 3.8.0 10 | * https://greensock.com 11 | * 12 | * @license Copyright 2008-2021, GreenSock. All rights reserved. 13 | * Subject to the terms at https://greensock.com/standard-license or for 14 | * Club GreenSock members, the agreement issued with that membership. 15 | * @author: Jack Doyle, jack@greensock.com 16 | */var h,c,f,d,p,m,_,g,v,y,w,x,b,O,T,C,M,D,k,A,E,I,S,L,R,P,z,F,B={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},q={duration:.5,overwrite:!1,delay:0},j=2*Math.PI,G=j/4,N=0,V=Math.sqrt,Y=Math.cos,U=Math.sin,W=function(t){return"string"==typeof t},X=function(t){return"function"==typeof t},H=function(t){return"number"==typeof t},Q=function(t){return void 0===t},$=function(t){return"object"==typeof t},J=function(t){return!1!==t},Z=function(){return"undefined"!=typeof window},K=function(t){return X(t)||W(t)},tt="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},et=Array.isArray,it=/(?:-?\.?\d|\.)+/gi,nt=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,rt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,st=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,at=/[+-]=-?[.\d]+/,ot=/[^,'"\[\]\s]+/gi,lt=/[\d.+\-=]+(?:e[-+]\d*)*/i,ut={},ht={},ct=function(t){return(ht=Ft(t,ut))&&bi},ft=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},dt=function(t,e){return!e&&console.warn(t)},pt=function(t,e){return t&&(ut[t]=e)&&ht&&(ht[t]=e)||ut},mt=function(){return 0},_t={},gt=[],vt={},yt={},wt={},xt=30,bt=[],Ot="",Tt=function(t){var e,i,n=t[0];if($(n)||X(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 Xe(t[i],e)))||t.splice(i,1);return t},Ct=function(t){return t._gsap||Tt(de(t))[0]._gsap},Mt=function(t,e,i){return(i=t[e])&&X(i)?t[e]():Q(i)&&t.getAttribute&&t.getAttribute(e)||i},Dt=function(t,e){return(t=t.split(",")).forEach(e)||t},kt=function(t){return Math.round(1e5*t)/1e5||0},At=function(t){return Math.round(1e7*t)/1e7||0},Et=function(t,e){for(var i=e.length,n=0;t.indexOf(e[n])<0&&++nt._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},Yt=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?Xt(t._tTime,t=t.duration()+t._rDelay)*t:0},Xt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Ht=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Qt=function(t){return t._end=At(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=At(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Qt(t),i._dirty||Vt(i,t)),t},Jt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Ht(t.rawTime(),e),(!e._dur||ue(0,e.totalDuration(),i)-e._tTime>1e-8)&&e.render(i,!0)),Vt(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=At((H(i)?i:i||t!==c?ae(t,i,e):t._time)+e._delay),e._end=At(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function(t,e,i,n,r){void 0===i&&(i="_first"),void 0===n&&(n="_last");var s,a=t[n];if(r)for(s=e[r];a&&a[r]>s;)a=a._prev;a?(e._next=a._next,a._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[n]=e,e._prev=a,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),ie(e)||(t._recent=e),n||Jt(t,e),t},Kt=function(t,e){return(ut.ScrollTrigger||ft("scrollTrigger",e))&&ut.ScrollTrigger.create(e,t)},te=function(t,e,i,n){return ti(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&_!==Re.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=At(e)||0,a=t._tTime/t._tDur;return a&&!n&&(t._time*=s/t._dur),t._dur=s,t._tDur=r?r<0?1e10:At(s*(r+1)+t._rDelay*r):s,a&&!n?$t(t,t._tTime=t._tDur*a):t.parent&&Qt(t),i||Vt(t.parent,t),t},re=function(t){return t instanceof Qe?Vt(t):ne(t,t._dur)},se={_start:0,endTime:mt,totalDuration:mt},ae=function t(e,i,n){var r,s,a,o=e.labels,l=e._recent||se,u=e.duration()>=1e8?l.endTime(!1):e._dur;return W(i)&&(isNaN(i)||i in o)?(s=i.charAt(0),a="%"===i.substr(-1),r=i.indexOf("="),"<"===s||">"===s?(r>=0&&(i=i.replace(/=/,"")),("<"===s?l._start:l.endTime(l._repeat>=0))+(parseFloat(i.substr(1))||0)*(a?(r<0?l:n).totalDuration()/100:1)):r<0?(i in o||(o[i]=u),o[i]):(s=parseFloat(i.charAt(r-1)+i.substr(r+1)),a&&n&&(s=s/100*(et(n)?n[0]:n).totalDuration()),r>1?t(e,i.substr(0,r-1),n)+s:u+s)):null==i?u:+i},oe=function(t,e,i){var n,r,s=H(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=i,t){for(n=o,r=i;r&&!("immediateRender"in n);)n=r.vars.defaults||{},r=J(r.vars.inherit)&&r.parent;o.immediateRender=J(n.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new ri(e[0],o,e[a+1])},le=function(t,e){return t||0===t?e(t):e},ue=function(t,e,i){return ie?e:i},he=function(t){if("string"!=typeof t)return"";var e=lt.exec(t);return e?t.substr(e.index+e[0].length):""},ce=[].slice,fe=function(t,e){return t&&$(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&$(t[0]))&&!t.nodeType&&t!==f},de=function(t,e,i){return!W(t)||i||!d&&Pe()?et(t)?function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var n;return W(t)&&!e||fe(t,1)?(n=i).push.apply(n,de(t)):i.push(t)}))||i}(t,i):fe(t)?ce.call(t,0):t?[t]:[]:ce.call((e||p).querySelectorAll(t),0)},pe=function(t){return t.sort((function(){return.5-Math.random()}))},me=function(t){if(X(t))return t;var e=$(t)?t:{each:t},i=Ne(e.ease),n=e.from||0,r=parseFloat(e.base)||0,s={},a=n>0&&n<1,o=isNaN(n)||a,l=e.axis,u=n,h=n;return W(n)?u=h={center:.5,edges:.5,end:1}[n]||0:!a&&o&&(u=n[0],h=n[1]),function(t,a,c){var f,d,p,m,_,g,v,y,w,x=(c||e).length,b=s[x];if(!b){if(!(w="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=c[w++].getBoundingClientRect().left)&&wv&&(v=_),_x?x-1:l?"y"===l?x/w:w:Math.max(w,x/w))||0)*("edges"===n?-1:1),b.b=x<0?r-x:r,b.u=he(e.amount||e.each)||0,i=i&&x<0?je(i):i}return x=(b[t]-b.min)/b.max||0,At(b.b+(i?i(x):x)*b.v)+b.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:he(i))}},ge=function(t,e){var i,n,r=et(t);return!r&&$(t)&&(i=r=t.radius||1e8,t.values?(t=de(t.values),(n=!H(t[0]))&&(i*=i)):t=_e(t.increment)),le(e,r?X(t)?function(e){return n=t(e),Math.abs(n-e)<=i?n:e}:function(e){for(var r,s,a=parseFloat(n?e.x:e),o=parseFloat(n?e.y:0),l=1e8,u=0,h=t.length;h--;)(r=n?(r=t[h].x-a)*r+(s=t[h].y-o)*s:Math.abs(t[h]-a))(r=Math.abs(r))&&(s=n,o=r);return s},Oe=function(t,e,i){var n,r,s=t.vars,a=s[e];if(a)return n=s[e+"Params"],r=s.callbackScope||t,i&>.length&&It(),n?a.apply(r,n):a.call(r)},Te=function(t){return Nt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Oe(t,"onInterrupt"),t},Ce=function(t){var e=(t=!t.name&&t.default||t).name,i=X(t),n=e&&!i&&t.init?function(){this._props=[]}:t,r={init:mt,render:di,add:Ze,kill:mi,modifier:pi,rawVars:0},s={targetTest:0,get:0,getSetter:ui,aliases:{},register:0};if(Pe(),t!==n){if(yt[e])return;Pt(n,Pt(qt(t,r),s)),Ft(n.prototype,Ft(r,qt(t,s))),yt[n.prop=e]=n,t.targetTest&&(bt.push(n),_t[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}pt(e,n),t.register&&t.register(bi,n,vi)},Me={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]},De=function(t,e,i){return 255*(6*(t=t<0?t+1:t>1?t-1:t)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)+.5|0},ke=function(t,e,i){var n,r,s,a,o,l,u,h,c,f,d=t?H(t)?[t>>16,t>>8&255,255&t]:0:Me.black;if(!d){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Me[t])d=Me[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[(d=parseInt(t.substr(1,6),16))>>16,d>>8&255,255&d,parseInt(t.substr(7),16)/255];d=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(d=f=t.match(it),e){if(~t.indexOf("="))return d=t.match(nt),i&&d.length<4&&(d[3]=1),d}else a=+d[0]%360/360,o=+d[1]/100,n=2*(l=+d[2]/100)-(r=l<=.5?l*(o+1):l+o-l*o),d.length>3&&(d[3]*=1),d[0]=De(a+1/3,n,r),d[1]=De(a,n,r),d[2]=De(a-1/3,n,r);else d=t.match(it)||Me.transparent;d=d.map(Number)}return e&&!f&&(n=d[0]/255,r=d[1]/255,s=d[2]/255,l=((u=Math.max(n,r,s))+(h=Math.min(n,r,s)))/2,u===h?a=o=0:(c=u-h,o=l>.5?c/(2-u-h):c/(u+h),a=u===n?(r-s)/c+(rM&&(k+=a-D),((i=(r=(A+=a)-k)-I)>0||o)&&(s=++b.frame,O=r-1e3*b.time,b.time=r/=1e3,I+=i+(i>=E?4:E-i),n=1),o||(y=w(t)),n)for(T=0;T=e&&T--},_listeners:S=[]}),Pe=function(){return!v&&Re.wake()},ze={},Fe=/^[\d.\-M][\d.\-,\s]/,Be=/["']/g,qe=function(t){for(var e,i,n,r={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,l=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[qe(s[1])]:(e=t,i=e.indexOf("(")+1,n=e.indexOf(")"),r=e.indexOf("(",i),e.substring(i,~r&&r=1?i:1,s=(n||(e?.3:.45))/(i<1?i:1),a=s/j*(Math.asin(1/r)||0),o=function(t){return 1===t?1:r*Math.pow(2,-10*t)*U((t-a)*s)+1},l="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Ye(o);return s=j/s,l.config=function(i,n){return t(e,i,n)},l},We=function t(e,i){void 0===i&&(i=1.70158);var n=function(t){return t?--t*t*((i+1)*t+i)+1:0},r="out"===e?n:"in"===e?function(t){return 1-n(1-t)}:Ye(n);return r.config=function(i){return t(e,i)},r};Dt("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Ve(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,Ve("Elastic",Ue("in"),Ue("out"),Ue()),R=7.5625,z=1/(P=2.75),Ve("Bounce",(function(t){return 1-F(1-t)}),F=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,ne(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Pe(),!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),St(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Wt(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},e.totalProgress=function(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},e.progress=function(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Wt(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},e.iteration=function(t,e){var i=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*i,e):this._repeat?Xt(this._tTime,i)+1:1},e.timeScale=function(t){if(!arguments.length)return-1e-8===this._rts?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?Ht(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,Yt(this.totalTime(ue(-this._delay,this._tDur,e),!0)),Qt(this),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):(Pe(),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+(J(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ht(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,i=arguments.length?t:e.rawTime();e;)i=e._start+i/(e._ts||1),e=e._dp;return i},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,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(ae(this,t),J(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,J(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=X(t)?t:Rt,r=function(){var t=e.then;e.then=null,X(n)&&(n=n(e))&&(n.then||n===e)&&(e.then=t),i(n),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?r():e._prom=r}))},e.kill=function(){Te(this)},t}();Pt(He.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Qe=function(t){function e(e,i){var n;return void 0===e&&(e={}),(n=t.call(this,e)||this).labels={},n.smoothChildTiming=!!e.smoothChildTiming,n.autoRemoveChildren=!!e.autoRemoveChildren,n._sort=J(e.sortChildren),c&&Zt(e.parent||c,l(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&Kt(l(n),e.scrollTrigger),n}u(e,t);var i=e.prototype;return i.to=function(t,e,i){return oe(0,arguments,this),this},i.from=function(t,e,i){return oe(1,arguments,this),this},i.fromTo=function(t,e,i,n){return oe(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,jt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ri(t,e,ae(this,i),1),this},i.call=function(t,e,i){return Zt(this,ri.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,n,r,s,a){return i.duration=e,i.stagger=i.stagger||n,i.onComplete=s,i.onCompleteParams=a,i.parent=this,new ri(t,i,ae(this,r)),this},i.staggerFrom=function(t,e,i,n,r,s,a){return i.runBackwards=1,jt(i).immediateRender=J(i.immediateRender),this.staggerTo(t,e,i,n,r,s,a)},i.staggerFromTo=function(t,e,i,n,r,s,a,o){return n.startAt=i,jt(n).immediateRender=J(n.immediateRender),this.staggerTo(t,e,n,r,s,a,o)},i.render=function(t,e,i){var n,r,s,a,o,l,u,h,f,d,p,m,_=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:At(t),w=this._zTime<0!=t<0&&(this._initted||!v);if(this!==c&&y>g&&t>=0&&(y=g),y!==this._tTime||i||w){if(_!==this._time&&v&&(y+=this._time-_,t+=this._time-_),n=y,f=this._start,l=!(h=this._ts),w&&(v||(_=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(p=this._yoyo,o=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,i);if(n=At(y%o),y===g?(a=this._repeat,n=v):((a=~~(y/o))&&a===y/o&&(n=v,a--),n>v&&(n=v)),d=Xt(this._tTime,o),!_&&this._tTime&&d!==a&&(d=a),p&&1&a&&(n=v-n,m=1),a!==d&&!this._lock){var x=p&&1&d,b=x===(p&&1&a);if(ae)for(n=t._first;n&&n._start<=i;){if(!n._dur&&"isPause"===n.data&&n._start>e)return n;n=n._next}else for(n=t._last;n&&n._start>=i;){if(!n._dur&&"isPause"===n.data&&n._start=_&&t>=0)for(r=this._first;r;){if(s=r._next,(r._act||n>=r._start)&&r._ts&&u!==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&&!l){u=0,s&&(y+=this._zTime=-1e-8);break}}r=s}else{r=this._last;for(var O=t<0?t:n;r;){if(s=r._prev,(r._act||O<=r._end)&&r._ts&&u!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(O-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(O-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!l){u=0,s&&(y+=this._zTime=O?-1e-8:1e-8);break}}r=s}}if(u&&!e&&(this.pause(),u.render(n>=_?0:-1e-8)._zTime=n>=_?1:-1,this._ts))return this._start=f,Qt(this),this.render(t,e,i);this._onUpdate&&!e&&Oe(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&_)&&(f!==this._start&&Math.abs(h)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Nt(this,1),e||t<0&&!_||!y&&!_&&g||(Oe(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(H(e)||(e=ae(this,e,t)),!(t instanceof He)){if(et(t))return t.forEach((function(t){return i.add(t,e)})),this;if(W(t))return this.addLabel(t,e);if(!X(t))return this;t=ri.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 ri?e&&r.push(s):(i&&r.push(s),t&&r.push.apply(r,s.getChildren(!0,e,i)))),s=s._next;return r},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return W(t)?this.removeLabel(t):X(t)?this.killTweensOf(t):(Gt(this,t),t===this._recent&&(this._recent=this._last),Vt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=At(Re.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]=ae(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var n=ri.delayedCall(0,e||mt,i);return n.data="isPause",this._hasPause=1,Zt(this,n,ae(this,t))},i.removePause=function(t){var e=this._first;for(t=ae(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--;)$e!==n[r]&&n[r].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,n=[],r=de(t),s=this._first,a=H(e);s;)s instanceof ri?Et(s._targets,r)&&(a?(!$e||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&n.push(s):(i=s.getTweensOf(r,e)).length&&n.push.apply(n,i),s=s._next;return n},i.tweenTo=function(t,e){e=e||{};var i,n=this,r=ae(n,t),s=e,a=s.startAt,o=s.onStart,l=s.onStartParams,u=s.immediateRender,h=ri.to(n,Pt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:r,overwrite:"auto",duration:e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale())||1e-8,onStart:function(){if(n.pause(),!i){var t=e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale());h._dur!==t&&ne(h,t,0,1).render(h._time,!0,!0),i=1}o&&o.apply(h,l||[])}},e));return u?h.render(0):h},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,Pt({startAt:{time:ae(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),be(this,ae(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),be(this,ae(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 Vt(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={}),Vt(this)},i.totalDuration=function(t){var e,i,n,r=0,s=this,a=s._last,o=1e8;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(n=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,Zt(s,a,i-a._delay,1)._lock=0):o=i,i<0&&a._ts&&(r-=i,(!n&&!s._dp||n&&n.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),o=0),a._end>r&&a._ts&&(r=a._end),a=e;ne(s,s===c&&s._time>r?s._time:r,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(c._ts&&(St(c,Ht(t,c)),_=Re.frame),Re.frame>=xt){xt+=B.autoSleep||120;var e=c._first;if((!e||!e._ts)&&B.autoSleep&&Re._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Re.sleep()}}},e}(He);Pt(Qe.prototype,{_lock:0,_hasPause:0,_forcing:0});var $e,Je=function(t,e,i,n,r,s,a){var o,l,u,h,c,f,d,p,m=new vi(this._pt,t,e,0,1,fi,null,r),_=0,g=0;for(m.b=i,m.e=n,i+="",(d=~(n+="").indexOf("random("))&&(n=we(n)),s&&(s(p=[i,n],t,e),i=p[0],n=p[1]),l=i.match(st)||[];o=st.exec(n);)h=o[0],c=n.substring(_,o.index),u?u=(u+1)%5:"rgba("===c.substr(-5)&&(u=1),h!==l[g++]&&(f=parseFloat(l[g-1])||0,m._pt={_next:m._pt,p:c||1===g?c:",",s:f,c:"="===h.charAt(1)?parseFloat(h.substr(2))*("-"===h.charAt(0)?-1:1):parseFloat(h)-f,m:u&&u<4?Math.round:0},_=st.lastIndex);return m.c=_0&&!A&&(e._startAt=0),E&&i<=0)return void(i&&(e._zTime=i))}else!1===A&&(e._startAt=0);else if(M&&E)if(I)!A&&(e._startAt=0);else if(i&&(x=!1),s=Pt({overwrite:!1,data:"isFromStart",lazy:x&&J(b),immediateRender:x,stagger:0,parent:L},n),_&&(s[f.prop]=_),Nt(e._startAt=ri.set(S,s)),i<0&&e._startAt.render(-1,!0),x){if(!i)return}else t(e._startAt,1e-8);for(e._pt=0,b=E&&J(b)||b&&!E,r=0;r":e*x)}))})):O.forEach((function(t){return a.to(k,t,">")}));else{if(f=k.length,m=x?me(x):mt,$(x))for(d in x)~ii.indexOf(d)&&(_||(_={}),_[d]=x[d]);for(o=0;od-1e-8&&t>=0?d:t<1e-8?0:t;if(p){if(m!==this._tTime||!t||i||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=t<0){if(n=m,h=this.timeline,this._repeat){if(a=p+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*a+t,e,i);if(n=At(m%a),m===d?(s=this._repeat,n=p):((s=~~(m/a))&&s===m/a&&(n=p,s--),n>p&&(n=p)),(l=this._yoyo&&1&s)&&(c=this._yEase,n=p-n),o=Xt(this._tTime,a),n===f&&!i&&this._initted)return this;s!==o&&(h&&this._yEase&&Ge(h,l),!this.vars.repeatRefresh||l||this._lock||(this._lock=i=1,this.render(At(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(te(this,t<0?t:n,i,e))return this._tTime=0,this;if(p!==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=u=(c||this._ease)(n/p),this._from&&(this.ratio=u=1-u),n&&!f&&!e&&(Oe(this,"onStart"),this._tTime!==m))return this;for(r=this._pt;r;)r.r(u,r.d),r=r._next;h&&h.render(t<0?t:!n&&l?-1e-8:h._dur*u,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!==o&&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||!p)&&(m===this._tDur&&this._ts>0||!m&&this._ts<0)&&Nt(this,1),e||t<0&&!f||!m&&!f||(Oe(this,m===d?"onComplete":"onReverseComplete",!0),this._prom&&!(m0)&&this._prom()))}}else!function(t,e,i,n){var r,s,a,o=t.ratio,l=e<0||!e&&(!t._start&&ee(t)&&(t._initted||!ie(t))||(t._ts<0||t._dp._ts<0)&&!ie(t))?0:1,u=t._rDelay,h=0;if(u&&t._repeat&&(h=ue(0,t._tDur,e),s=Xt(h,u),a=Xt(t._tTime,u),t._yoyo&&1&s&&(l=1-l),s!==a&&(o=1-l,t.vars.repeatRefresh&&t._initted&&t.invalidate())),l!==o||n||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&te(t,e,n,i))return;for(a=t._zTime,t._zTime=e||(i?1e-8:0),i||(i=e&&!a),t.ratio=l,t._from&&(l=1-l),t._time=0,t._tTime=h,r=t._pt;r;)r.r(l,r.d),r=r._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&Oe(t,"onUpdate"),h&&t._repeat&&!i&&t.parent&&Oe(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===l&&(l&&Nt(t,1),i||(Oe(t,l?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,i);return this},i.targets=function(){return this._targets},i.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},i.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?Te(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,$e&&!0!==$e.vars.overwrite)._first||Te(this),this.parent&&i!==this.timeline.totalDuration()&&ne(this,this._dur*this.timeline._tDur/i,0,1),this}var n,r,s,a,o,l,u,h=this._targets,c=t?de(t):h,f=this._ptLookup,d=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}(h,c))return"all"===e&&(this._pt=0),Te(this);for(n=this._op=this._op||[],"all"!==e&&(W(e)&&(o={},Dt(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,n,r,s,a=t[0]?Ct(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(n in i=Ft({},e),o)if(n in i)for(r=(s=o[n].split(",")).length;r--;)i[s[r]]=i[n];return i}(h,e)),u=h.length;u--;)if(~c.indexOf(h[u]))for(o in r=f[u],"all"===e?(n[u]=e,a=r,s={}):(s=n[u]=n[u]||{},a=e),a)(l=r&&r[o])&&("kill"in l.d&&!0!==l.d.kill(o)||Gt(this,l,"_pt"),delete r[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&d&&Te(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return oe(1,arguments)},e.delayedCall=function(t,i,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 oe(2,arguments)},e.set=function(t,i){return i.duration=0,i.repeatDelay||(i.repeat=0),new e(t,i)},e.killTweensOf=function(t,e,i){return c.killTweensOf(t,e,i)},e}(He);Pt(ri.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Dt("staggerTo,staggerFrom,staggerFromTo",(function(t){ri[t]=function(){var e=new Qe,i=ce.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var si=function(t,e,i){return t[e]=i},ai=function(t,e,i){return t[e](i)},oi=function(t,e,i,n){return t[e](n.fp,i)},li=function(t,e,i){return t.setAttribute(e,i)},ui=function(t,e){return X(t[e])?ai:Q(t[e])&&t.setAttribute?li:si},hi=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},ci=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},fi=function(t,e){var i=e._pt,n="";if(!t&&e.b)n=e.b;else if(1===t&&e.e)n=e.e;else{for(;i;)n=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+n,i=i._next;n+=e.c}e.set(e.t,e.p,n,e)},di=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},pi=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},mi=function(t){for(var e,i,n=this._pt;n;)i=n._next,n.p===t&&!n.op||n.op===t?Gt(this,n,"_pt"):n.dep||(e=1),n=i;return!e},_i=function(t,e,i,n){n.mSet(t,e,n.m.call(n.tween,i,n.mt),n)},gi=function(t){for(var e,i,n,r,s=t._pt;s;){for(e=s._next,i=n;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:r)?s._prev._next=s:n=s,(s._next=i)?i._prev=s:r=s,s=e}t._pt=n},vi=function(){function t(t,e,i,n,r,s,a,o,l){this.t=e,this.s=n,this.c=r,this.p=i,this.r=s||hi,this.d=a||this,this.set=o||si,this.pr=l||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,i){this.mSet=this.mSet||this.set,this.set=_i,this.m=t,this.mt=i,this.tween=e},t}();Dt(Ot+"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 _t[t]=1})),ut.TweenMax=ut.TweenLite=ri,ut.TimelineLite=ut.TimelineMax=Qe,c=new Qe({sortChildren:!1,defaults:q,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),B.stringFilter=Le;var yi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var n=t.map((function(t){return bi.quickSetter(t,e,i)})),r=n.length;return function(t){for(var e=r;e--;)n[e](t)}}t=t[0]||{};var s=yt[e],a=Ct(t),o=a.harness&&(a.harness.aliases||{})[e]||e,l=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&&di(1,g)}:a.set(t,o);return s?l:function(e){return l(t,o,i?e+i:e,a,1)}},isTweening:function(t){return c.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ne(t.ease,q.ease)),Bt(q,t||{})},config:function(t){return Bt(B,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,n=t.plugins,r=t.defaults,s=t.extendTimeline;(n||"").split(",").forEach((function(t){return t&&!yt[t]&&!ut[t]&&dt(e+" effect requires "+t+" plugin.")})),wt[e]=function(t,e,n){return i(de(t),Pt(e||{},r),n)},s&&(Qe.prototype[e]=function(t,i,n){return this.add(wt[e](t,$(i)?i:(n=i)&&{},this),n)})},registerEase:function(t,e){ze[t]=Ne(e)},parseEase:function(t,e){return arguments.length?Ne(t,e):ze},getById:function(t){return c.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,n,r=new Qe(t);for(r.smoothChildTiming=J(t.smoothChildTiming),c.remove(r),r._dp=0,r._time=r._tTime=c._time,i=c._first;i;)n=i._next,!e&&!i._dur&&i instanceof ri&&i.vars.onComplete===i._targets[0]||Zt(r,i,i._start-i._delay),i=n;return Zt(c,r,0),r},utils:{wrap:function t(e,i,n){var r=i-e;return et(e)?ye(e,t(0,e.length),i):le(n,(function(t){return(r+(t-e)%r)%r+e}))},wrapYoyo:function t(e,i,n){var r=i-e,s=2*r;return et(e)?ye(e,t(0,e.length-1),i):le(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>r?s-t:t)}))},distribute:me,random:ve,snap:ge,normalize:function(t,e,i){return xe(t,e,0,1,i)},getUnit:he,clamp:function(t,e,i){return le(i,(function(i){return ue(t,e,i)}))},splitColor:ke,toArray:de,selector:function(t){return t=de(t)[0]||dt("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return de(e,i.querySelectorAll?i:i===t?dt("Invalid scope")||p.createElement("div"):t)}},mapRange:xe,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?tn[r]:"")+t},nn=function(){"undefined"!=typeof window&&window.document&&(Oi=window,Ti=Oi.document,Ci=Ti.documentElement,Di=Zi("div")||{style:{}},Zi("div"),$i=en($i),Ji=$i+"Origin",Di.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ai=!!en("perspective"),Mi=1)},rn=function t(e){var i,n=Zi("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),r=this.parentNode,s=this.nextSibling,a=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=a,i},sn=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},an=function(t){var e;try{e=t.getBBox()}catch(i){e=rn.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===rn||(e=rn.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+sn(t,["x","cx","x1"])||0,y:+sn(t,["y","cy","y1"])||0,width:0,height:0}},on=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!an(t))},ln=function(t,e){if(e){var i=t.style;e in Ei&&e!==Ji&&(e=$i),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Ri,"-$1").toLowerCase())):i.removeAttribute(e)}},un=function(t,e,i,n,r,s){var a=new vi(t._pt,e,i,0,1,s?Vi:Ni);return t._pt=a,a.b=n,a.e=r,t._props.push(i),a},hn={deg:1,rad:1,turn:1},cn=function t(e,i,n,r){var s,a,o,l,u=parseFloat(n)||0,h=(n+"").trim().substr((u+"").length)||"px",c=Di.style,f=Pi.test(i),d="svg"===e.tagName.toLowerCase(),p=(d?"client":"offset")+(f?"Width":"Height"),m=100,_="px"===r,g="%"===r;return r===h||!u||hn[r]||hn[h]?u:("px"!==h&&!_&&(u=t(e,i,n,"px")),l=e.getCTM&&on(e),!g&&"%"!==h||!Ei[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=m+(_?h:r),a=~i.indexOf("adius")||"em"===r&&e.appendChild&&!d?e:e.parentNode,l&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==Ti&&a.appendChild||(a=Ti.body),(o=a._gsap)&&g&&o.width&&f&&o.time===Re.time?kt(u/o.width*m):((g||"%"===h)&&(c.position=Ki(e,"position")),a===e&&(c.position="static"),a.appendChild(Di),s=Di[p],a.removeChild(Di),c.position="absolute",f&&g&&((o=Ct(a)).time=Re.time,o.width=a[p]),kt(_?s*u/m:s&&u?m/s*u:0))):(s=l?e.getBBox()[f?"width":"height"]:e[p],kt(g?u/s*m:u/100*s)))},fn=function(t,e,i,n){var r;return Mi||nn(),e in Fi&&"transform"!==e&&~(e=Fi[e]).indexOf(",")&&(e=e.split(",")[0]),Ei[e]&&"transform"!==e?(r=On(t,n),r="transformOrigin"!==e?r[e]:r.svg?r.origin:Tn(Ki(t,Ji))+" "+r.zOrigin+"px"):(!(r=t.style[e])||"auto"===r||n||~(r+"").indexOf("calc("))&&(r=_n[e]&&_n[e](t,e,i)||Ki(t,e)||Mt(t,e)||("opacity"===e?1:0)),i&&!~(r+"").trim().indexOf(" ")?cn(t,e,r,i)+i:r},dn=function(t,e,i,n){if(!i||"none"===i){var r=en(e,t,1),s=r&&Ki(t,r,1);s&&s!==i?(e=r,i=s):"borderColor"===e&&(i=Ki(t,"borderTopColor"))}var a,o,l,u,h,c,f,d,p,m,_,g,v=new vi(this._pt,t.style,e,0,1,fi),y=0,w=0;if(v.b=i,v.e=n,i+="","auto"===(n+="")&&(t.style[e]=n,n=Ki(t,e)||n,t.style[e]=i),Le(a=[i,n]),n=a[1],l=(i=a[0]).match(rt)||[],(n.match(rt)||[]).length){for(;o=rt.exec(n);)f=o[0],p=n.substring(y,o.index),h?h=(h+1)%5:"rgba("!==p.substr(-5)&&"hsla("!==p.substr(-5)||(h=1),f!==(c=l[w++]||"")&&(u=parseFloat(c)||0,_=c.substr((u+"").length),(g="="===f.charAt(1)?+(f.charAt(0)+"1"):0)&&(f=f.substr(2)),d=parseFloat(f),m=f.substr((d+"").length),y=rt.lastIndex-m.length,m||(m=m||B.units[e]||_,y===n.length&&(n+=m,v.e+=m)),_!==m&&(u=cn(t,e,c,m)||0),v._pt={_next:v._pt,p:p||1===w?p:",",s:u,c:g?g*d:d-u,m:h&&h<4||"zIndex"===e?Math.round:0});v.c=y-1;)i=o[r],Ei[i]&&(n=1,i="transformOrigin"===i?Ji:$i),ln(s,i);n&&(ln(s,$i),l&&(l.svg&&s.removeAttribute("transform"),On(s,1),l.uncache=1))}},_n={clearProps:function(t,e,i,n,r){if("isFromStart"!==r.data){var s=t._pt=new vi(t._pt,e,i,0,0,mn);return s.u=n,s.pr=-10,s.tween=r,t._props.push(i),1}}},gn=[1,0,0,1,0,0],vn={},yn=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},wn=function(t){var e=Ki(t,$i);return yn(e)?gn:e.substr(7).match(nt).map(kt)},xn=function(t,e){var i,n,r,s,a=t._gsap||Ct(t),o=t.style,l=wn(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(l=[(r=t.transform.baseVal.consolidate().matrix).a,r.b,r.c,r.d,r.e,r.f]).join(",")?gn:l:(l!==gn||t.offsetParent||t===Ci||a.svg||(r=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,Ci.appendChild(t)),l=wn(t),r?o.display=r:ln(t,"display"),s&&(n?i.insertBefore(t,n):i?i.appendChild(t):Ci.removeChild(t))),e&&l.length>6?[l[0],l[1],l[4],l[5],l[12],l[13]]:l)},bn=function(t,e,i,n,r,s){var a,o,l,u=t._gsap,h=r||xn(t,!0),c=u.xOrigin||0,f=u.yOrigin||0,d=u.xOffset||0,p=u.yOffset||0,m=h[0],_=h[1],g=h[2],v=h[3],y=h[4],w=h[5],x=e.split(" "),b=parseFloat(x[0])||0,O=parseFloat(x[1])||0;i?h!==gn&&(o=m*v-_*g)&&(l=b*(-_/o)+O*(m/o)-(m*w-_*y)/o,b=b*(v/o)+O*(-g/o)+(g*w-v*y)/o,O=l):(b=(a=an(t)).x+(~x[0].indexOf("%")?b/100*a.width:b),O=a.y+(~(x[1]||x[0]).indexOf("%")?O/100*a.height:O)),n||!1!==n&&u.smooth?(y=b-c,w=O-f,u.xOffset=d+(y*m+w*g)-y,u.yOffset=p+(y*_+w*v)-w):u.xOffset=u.yOffset=0,u.xOrigin=b,u.yOrigin=O,u.smooth=!!n,u.origin=e,u.originIsAbsolute=!!i,t.style[Ji]="0px 0px",s&&(un(s,u,"xOrigin",c,b),un(s,u,"yOrigin",f,O),un(s,u,"xOffset",d,u.xOffset),un(s,u,"yOffset",p,u.yOffset)),t.setAttribute("data-svg-origin",b+" "+O)},On=function(t,e){var i=t._gsap||new Xe(t);if("x"in i&&!e&&!i.uncache)return i;var n,r,s,a,o,l,u,h,c,f,d,p,m,_,g,v,y,w,x,b,O,T,C,M,D,k,A,E,I,S,L,R,P=t.style,z=i.scaleX<0,F="px",q="deg",j=Ki(t,Ji)||"0";return n=r=s=l=u=h=c=f=d=0,a=o=1,i.svg=!(!t.getCTM||!on(t)),_=xn(t,i.svg),i.svg&&(M=(!i.uncache||"0px 0px"===j)&&!e&&t.getAttribute("data-svg-origin"),bn(t,M||j,!!M||i.originIsAbsolute,!1!==i.smooth,_)),p=i.xOrigin||0,m=i.yOrigin||0,_!==gn&&(w=_[0],x=_[1],b=_[2],O=_[3],n=T=_[4],r=C=_[5],6===_.length?(a=Math.sqrt(w*w+x*x),o=Math.sqrt(O*O+b*b),l=w||x?Li(x,w)*Ii:0,(c=b||O?Li(b,O)*Ii+l:0)&&(o*=Math.abs(Math.cos(c*Si))),i.svg&&(n-=p-(p*w+m*b),r-=m-(p*x+m*O))):(R=_[6],S=_[7],A=_[8],E=_[9],I=_[10],L=_[11],n=_[12],r=_[13],s=_[14],u=(g=Li(R,I))*Ii,g&&(M=T*(v=Math.cos(-g))+A*(y=Math.sin(-g)),D=C*v+E*y,k=R*v+I*y,A=T*-y+A*v,E=C*-y+E*v,I=R*-y+I*v,L=S*-y+L*v,T=M,C=D,R=k),h=(g=Li(-b,I))*Ii,g&&(v=Math.cos(-g),L=O*(y=Math.sin(-g))+L*v,w=M=w*v-A*y,x=D=x*v-E*y,b=k=b*v-I*y),l=(g=Li(x,w))*Ii,g&&(M=w*(v=Math.cos(g))+x*(y=Math.sin(g)),D=T*v+C*y,x=x*v-w*y,C=C*v-T*y,w=M,T=D),u&&Math.abs(u)+Math.abs(l)>359.9&&(u=l=0,h=180-h),a=kt(Math.sqrt(w*w+x*x+b*b)),o=kt(Math.sqrt(C*C+R*R)),g=Li(T,C),c=Math.abs(g)>2e-4?g*Ii:0,d=L?1/(L<0?-L:L):0),i.svg&&(M=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!yn(Ki(t,$i)),M&&t.setAttribute("transform",M))),Math.abs(c)>90&&Math.abs(c)<270&&(z?(a*=-1,c+=l<=0?180:-180,l+=l<=0?180:-180):(o*=-1,c+=c<=0?180:-180)),i.x=n-((i.xPercent=n&&(i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-n)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+F,i.y=r-((i.yPercent=r&&(i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-r)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+F,i.z=s+F,i.scaleX=kt(a),i.scaleY=kt(o),i.rotation=kt(l)+q,i.rotationX=kt(u)+q,i.rotationY=kt(h)+q,i.skewX=c+q,i.skewY=f+q,i.transformPerspective=d+F,(i.zOrigin=parseFloat(j.split(" ")[2])||0)&&(P[Ji]=Tn(j)),i.xOffset=i.yOffset=0,i.force3D=B.force3D,i.renderTransform=i.svg?kn:Ai?Dn:Mn,i.uncache=0,i},Tn=function(t){return(t=t.split(" "))[0]+" "+t[1]},Cn=function(t,e,i){var n=he(e);return kt(parseFloat(e)+parseFloat(cn(t,"x",i+"px",n)))+n},Mn=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Dn(t,e)},Dn=function(t,e){var i=e||this,n=i.xPercent,r=i.yPercent,s=i.x,a=i.y,o=i.z,l=i.rotation,u=i.rotationY,h=i.rotationX,c=i.skewX,f=i.skewY,d=i.scaleX,p=i.scaleY,m=i.transformPerspective,_=i.force3D,g=i.target,v=i.zOrigin,y="",w="auto"===_&&t&&1!==t||!0===_;if(v&&("0deg"!==h||"0deg"!==u)){var x,b=parseFloat(u)*Si,O=Math.sin(b),T=Math.cos(b);b=parseFloat(h)*Si,x=Math.cos(b),s=Cn(g,s,O*x*-v),a=Cn(g,a,-Math.sin(b)*-v),o=Cn(g,o,T*x*-v+v)}"0px"!==m&&(y+="perspective("+m+") "),(n||r)&&(y+="translate("+n+"%, "+r+"%) "),(w||"0px"!==s||"0px"!==a||"0px"!==o)&&(y+="0px"!==o||w?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+") "),"0deg"!==l&&(y+="rotate("+l+") "),"0deg"!==u&&(y+="rotateY("+u+") "),"0deg"!==h&&(y+="rotateX("+h+") "),"0deg"===c&&"0deg"===f||(y+="skew("+c+", "+f+") "),1===d&&1===p||(y+="scale("+d+", "+p+") "),g.style[$i]=y||"translate(0, 0)"},kn=function(t,e){var i,n,r,s,a,o=e||this,l=o.xPercent,u=o.yPercent,h=o.x,c=o.y,f=o.rotation,d=o.skewX,p=o.skewY,m=o.scaleX,_=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,w=o.xOffset,x=o.yOffset,b=o.forceCSS,O=parseFloat(h),T=parseFloat(c);f=parseFloat(f),d=parseFloat(d),(p=parseFloat(p))&&(d+=p=parseFloat(p),f+=p),f||d?(f*=Si,d*=Si,i=Math.cos(f)*m,n=Math.sin(f)*m,r=Math.sin(f-d)*-_,s=Math.cos(f-d)*_,d&&(p*=Si,a=Math.tan(d-p),r*=a=Math.sqrt(1+a*a),s*=a,p&&(a=Math.tan(p),i*=a=Math.sqrt(1+a*a),n*=a)),i=kt(i),n=kt(n),r=kt(r),s=kt(s)):(i=m,s=_,n=r=0),(O&&!~(h+"").indexOf("px")||T&&!~(c+"").indexOf("px"))&&(O=cn(g,"x",h,"px"),T=cn(g,"y",c,"px")),(v||y||w||x)&&(O=kt(O+v-(v*i+y*r)+w),T=kt(T+y-(v*n+y*s)+x)),(l||u)&&(a=g.getBBox(),O=kt(O+l/100*a.width),T=kt(T+u/100*a.height)),a="matrix("+i+","+n+","+r+","+s+","+O+","+T+")",g.setAttribute("transform",a),b&&(g.style[$i]=a)},An=function(t,e,i,n,r,s){var a,o,l=360,u=W(r),h=parseFloat(r)*(u&&~r.indexOf("rad")?Ii:1),c=s?h*s:h-n,f=n+c+"deg";return u&&("short"===(a=r.split("_")[1])&&(c%=l)!==c%180&&(c+=c<0?l:-360),"cw"===a&&c<0?c=(c+36e9)%l-~~(c/l)*l:"ccw"===a&&c>0&&(c=(c-36e9)%l-~~(c/l)*l)),t._pt=o=new vi(t._pt,e,i,n,c,qi),o.e=f,o.u="deg",t._props.push(i),o},En=function(t,e){for(var i in e)t[i]=e[i];return t},In=function(t,e,i){var n,r,s,a,o,l,u,h=En({},i._gsap),c=i.style;for(r in h.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[$i]=e,n=On(i,1),ln(i,$i),i.setAttribute("transform",s)):(s=getComputedStyle(i)[$i],c[$i]=e,n=On(i,1),c[$i]=s),Ei)(s=h[r])!==(a=n[r])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(r)<0&&(o=he(s)!==(u=he(a))?cn(i,r,s,u):parseFloat(s),l=parseFloat(a),t._pt=new vi(t._pt,n,r,o,l-o,Bi),t._pt.u=u||0,t._props.push(r));En(n,h)};Dt("padding,margin,Width,Radius",(function(t,e){var i="Top",n="Right",r="Bottom",s="Left",a=(e<3?[i,n,r,s]:[i+s,i+n,r+n,r+s]).map((function(i){return e<2?t+i:"border"+i+t}));_n[e>1?"border"+t:t]=function(t,e,i,n,r){var s,o;if(arguments.length<4)return s=a.map((function(e){return fn(t,e,i)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(n+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,r)}}));var Sn,Ln,Rn,Pn={name:"css",register:nn,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,n,r){var s,a,o,l,u,h,c,f,d,p,m,_,g,v,y,w,x,b,O,T=this._props,C=t.style,M=i.vars.startAt;for(c in Mi||nn(),e)if("autoRound"!==c&&(a=e[c],!yt[c]||!Ke(c,e,i,n,t,r)))if(u=typeof a,h=_n[c],"function"===u&&(u=typeof(a=a.call(i,n,t,r))),"string"===u&&~a.indexOf("random(")&&(a=we(a)),h)h(this,t,c,a,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),a+="",Ie.lastIndex=0,Ie.test(s)||(f=he(s),d=he(a)),d?f!==d&&(s=cn(t,c,s,d)+d):f&&(a+=f),this.add(C,"setProperty",s,a,n,r,0,0,c),T.push(c);else if("undefined"!==u){if(M&&c in M?(s="function"==typeof M[c]?M[c].call(i,n,t,r):M[c],c in B.units&&!he(s)&&(s+=B.units[c]),W(s)&&~s.indexOf("random(")&&(s=we(s)),"="===(s+"").charAt(1)&&(s=fn(t,c))):s=fn(t,c),l=parseFloat(s),(p="string"===u&&"="===a.charAt(1)?+(a.charAt(0)+"1"):0)&&(a=a.substr(2)),o=parseFloat(a),c in Fi&&("autoAlpha"===c&&(1===l&&"hidden"===fn(t,"visibility")&&o&&(l=0),un(this,C,"visibility",l?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==c&&"transform"!==c&&~(c=Fi[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in Ei)if(_||((g=t._gsap).renderTransform&&!e.parseTransform||On(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(_=this._pt=new vi(this._pt,C,$i,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===c)this._pt=new vi(this._pt,g,"scaleY",g.scaleY,(p?p*o:o-g.scaleY)||0),T.push("scaleY",c),c+="X";else{if("transformOrigin"===c){x=void 0,b=void 0,O=void 0,x=(w=a).split(" "),b=x[0],O=x[1]||"50%","top"!==b&&"bottom"!==b&&"left"!==O&&"right"!==O||(w=b,b=O,O=w),x[0]=pn[b]||b,x[1]=pn[O]||O,a=x.join(" "),g.svg?bn(t,a,0,v,0,this):((d=parseFloat(a.split(" ")[2])||0)!==g.zOrigin&&un(this,g,"zOrigin",g.zOrigin,d),un(this,C,c,Tn(s),Tn(a)));continue}if("svgOrigin"===c){bn(t,a,1,v,0,this);continue}if(c in vn){An(this,g,c,l,a,p);continue}if("smoothOrigin"===c){un(this,g,"smooth",g.smooth,a);continue}if("force3D"===c){g[c]=a;continue}if("transform"===c){In(this,a,t);continue}}else c in C||(c=en(c)||c);if(m||(o||0===o)&&(l||0===l)&&!zi.test(a)&&c in C)o||(o=0),(f=(s+"").substr((l+"").length))!==(d=he(a)||(c in B.units?B.units[c]:f))&&(l=cn(t,c,s,d)),this._pt=new vi(this._pt,m?g:C,c,l,p?p*o:o-l,m||"px"!==d&&"zIndex"!==c||!1===e.autoRound?Bi:Gi),this._pt.u=d||0,f!==d&&"%"!==d&&(this._pt.b=s,this._pt.r=ji);else if(c in C)dn.call(this,t,c,s,a);else{if(!(c in t)){ft(c,a);continue}this.add(t,c,s||t[c],a,n,r)}T.push(c)}y&&gi(this)},get:fn,aliases:Fi,getSetter:function(t,e,i){var n=Fi[e];return n&&n.indexOf(",")<0&&(e=n),e in Ei&&e!==Ji&&(t._gsap.x||fn(t,"x"))?i&&ki===i?"scale"===e?Xi:Wi:(ki=i||{},"scale"===e?Hi:Qi):t.style&&!Q(t.style[e])?Yi:~e.indexOf("-")?Ui:ui(t,e)},core:{_removeProperty:ln,_getMatrix:xn}};bi.utils.checkPrefix=en,Rn=Dt((Sn="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Ln="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Ei[t]=1})),Dt(Ln,(function(t){B.units[t]="deg",vn[t]=1})),Fi[Rn[13]]=Sn+","+Ln,Dt("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]]=Rn[e[0]]})),Dt("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){B.units[t]="px"})),bi.registerPlugin(Pn);var zn=bi.registerPlugin(Pn)||bi;zn.core.Tween;class Fn{in(){return this.outTimeline&&this.outTimeline.isActive()&&this.outTimeline.kill(),this.inTimeline=zn.timeline({defaults:{duration:1.2,ease:"expo"}}).set(this.DOM.inner,{y:"120%",rotate:15}).to(this.DOM.inner,{y:"0%",rotate:0,stagger:.03}),this.inTimeline}out(){return this.inTimeline&&this.inTimeline.isActive()&&this.inTimeline.kill(),this.outTimeline=zn.timeline({defaults:{duration:.5,ease:"expo.in"}}).to(this.DOM.inner,{y:"-120%",rotate:-5,stagger:.03}),this.outTimeline}constructor(t){this.DOM={outer:t,inner:Array.isArray(t)?t.map((t=>t.querySelector(".oh__inner"))):t.querySelector(".oh__inner")}}}function Bn(t,e){for(var i=0;i-1&&t%1==0}(t.length)}(t)?Array.prototype.slice.call(t):[t]}function Yn(t){return Nn(t)&&/^(1|3|11)$/.test(t.nodeType)}function Un(t){return"string"==typeof t}function Wn(t){var e,i=t;return Un(t)&&(i=/^(#[a-z]\w+)$/.test(t.trim())?document.getElementById(t.trim().slice(1)):document.querySelectorAll(t)),(e=i,Vn(e).reduce((function(t,e){return t.concat(Vn(e))}),[])).filter(Yn)}function Xn(t,e,i){var n={},r=null;return Nn(t)&&(r=t[Xn.expando]||(t[Xn.expando]=++Xn.uid),n=Xn.cache[r]||(Xn.cache[r]={})),void 0===i?void 0===e?n:n[e]:void 0!==e?(n[e]=i,i):void 0}function Hn(t){var e=t&&t[Xn.expando];e&&(delete t[e],delete Xn.cache[e])}function Qn(t,e){for(var i=Vn(t),n=i.length,r=0;r/g," ".concat(e," ")),i=r.textContent}return i.replace(/\s+/g," ").trim()}(t,a);if(i=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return(t=t?String(t):"").split(e)}(h).reduce((function(t,i,o,l){var h,c;return i===a?(n.appendChild(cr("br")),t):(r.chars&&(c=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return(t=hr(t))&&Un(t)&&!e&&lr(t)?ur(t):t.split(e)}(i).map((function(t){return cr(s,{class:"".concat(e.splitClass," ").concat(e.charClass),style:"display: inline-block;",textContent:t})})),u=u.concat(c)),r.words||r.lines?(h=cr(s,{class:"".concat(e.wordClass," ").concat(e.splitClass),style:"display: inline-block; position: ".concat(r.words?"relative":"static"),children:r.chars?c:null,textContent:r.chars?null:i}),n.appendChild(h)):Qn(c,(function(t){n.appendChild(t)})),o!==l.length-1&&n.appendChild(pr(" ")),r.words?t.concat(h):t)}),[]),t.innerHTML="",t.appendChild(n),!o&&!r.lines)return{chars:u,words:i,lines:[]};var c,f,d,p,m,_=[],g=[],v=Xn(t,"nodes",t.getElementsByTagName(s)),y=t.parentElement,w=t.nextElementSibling,x=window.getComputedStyle(t).textAlign;return o&&(p={left:n.offsetLeft,top:n.offsetTop,width:n.offsetWidth},d=t.offsetWidth,f=t.offsetHeight,Xn(t).cssWidth=t.style.width,Xn(t).cssHeight=t.style.height),Qn(v,(function(t){if(t!==n){var e,i=t.parentElement===n;r.lines&&i&&((e=Xn(t,"top",t.offsetTop))!==m&&(m=e,_.push(g=[])),g.push(t)),o&&(Xn(t).top=e||t.offsetTop,Xn(t).left=t.offsetLeft,Xn(t).width=t.offsetWidth,Xn(t).height=c||(c=t.offsetHeight))}})),y&&y.removeChild(t),r.lines&&(n=dr(),l=_.map((function(t){var i=cr(s,{class:"".concat(e.splitClass," ").concat(e.lineClass),style:"display: block; text-align: ".concat(x,"; width: 100%;")});return n.appendChild(i),o&&(Xn(i).type="line",Xn(i).top=Xn(t[0]).top,Xn(i).height=c),Qn(t,(function(t,e,n){r.words?i.appendChild(t):r.chars?Qn(t.children,(function(t){i.appendChild(t)})):i.appendChild(pr(t.textContent)),e!==n.length-1&&i.appendChild(pr(" "))})),i})),t.replaceChild(n,t.firstChild)),o&&(t.style.width="".concat(t.style.width||d,"px"),t.style.height="".concat(f,"px"),Qn(v,(function(t){var e="line"===Xn(t).type,i=!e&&"line"===Xn(t.parentElement).type;t.style.top="".concat(i?0:Xn(t).top,"px"),t.style.left="".concat(e?p.left:Xn(t).left-(i?p.left:0),"px"),t.style.height="".concat(Xn(t).height,"px"),t.style.width="".concat(e?p.width:Xn(t).width,"px"),t.style.position="absolute"}))),y&&(w?y.insertBefore(t,w):y.appendChild(t)),{lines:l,words:r.words?i:[],chars:u}}var _r=jn(fr,{}),gr=function(){function t(e,i){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.isSplit=!1,this.settings=jn(_r,Gn(i)),this.elements=Wn(e)||[],this.elements.length&&(this.originals=this.elements.map((function(t){return Xn(t,"html",Xn(t).html||t.innerHTML)})),this.settings.types&&this.split())}return qn(t,null,[{key:"defaults",get:function(){return _r},set:function(t){_r=jn(_r,Gn(t))}}]),qn(t,[{key:"split",value:function(t){var e=this;this.revert(),this.lines=[],this.words=[],this.chars=[];var i=[window.pageXOffset,window.pageYOffset];void 0!==t&&(this.settings=jn(this.settings,Gn(t))),this.elements.forEach((function(t){var i=mr(t,e.settings),n=i.lines,r=i.words,s=i.chars;e.lines=e.lines.concat(n),e.words=e.words.concat(r),e.chars=e.chars.concat(s),Xn(t).isSplit=!0})),this.isSplit=!0,window.scrollTo(i[0],i[1]),this.elements.forEach((function(t){Vn(Xn(t).nodes||[]).forEach(Hn)}))}},{key:"revert",value:function(){var t=this;this.isSplit&&(this.lines=null,this.words=null,this.chars=null),this.elements.forEach((function(e){Xn(e).isSplit&&Xn(e).html&&(e.innerHTML=Xn(e).html,e.style.height=Xn(e).cssHeight||"",e.style.width=Xn(e).cssWidth||"",t.isSplit=!1)}))}}]),t}();class vr{in(){return this.isVisible=!0,zn.killTweensOf(this.lines),zn.timeline({defaults:{duration:1.2,ease:"expo"}}).set(this.lines,{y:"150%",rotate:15}).to(this.lines,{y:"0%",rotate:0,stagger:.04})}out(){return this.isVisible=!1,zn.killTweensOf(this.lines),zn.timeline({defaults:{duration:.5,ease:"expo.in"}}).to(this.lines,{y:"-150%",rotate:-5,stagger:.02})}initEvents(){window.addEventListener("resize",(()=>{this.lines=[];for(const t of this.SplitTypeInstances)t.split(),a(t.lines,"div","oh"),this.lines.push(t.lines);this.isVisible||zn.set(this.lines,{y:"-150%"})}))}constructor(t){this.DOM={animationElems:Array.isArray(t)?t:[t]},this.SplitTypeInstances=[],this.lines=[];for(const t of this.DOM.animationElems){const e=new gr(t,{types:"lines"});a(e.lines,"div","oh"),this.lines.push(e.lines),this.SplitTypeInstances.push(e)}this.initEvents()}}class yr{constructor(t){o(this,"DOM",{el:null}),o(this,"textReveal",null),o(this,"textLinesReveal",null),this.DOM.el=t,this.DOM.nav={prev:this.DOM.el.querySelector(".slide-nav__img--prev"),next:this.DOM.el.querySelector(".slide-nav__img--next")},this.textReveal=new Fn([...this.DOM.el.querySelectorAll(".oh")]),this.textLinesReveal=new vr(this.DOM.el.querySelector(".content__item-text"))}}class wr{constructor(t){o(this,"DOM",{el:null,inner:null,contentId:null,contentItem:null}),this.DOM.el=t,this.DOM.inner=this.DOM.el.querySelector(".grid__cell-img-inner"),this.contentId=this.DOM.inner.dataset.item,this.contentItem=new yr(document.querySelector(`#${this.contentId}`))}}const xr=document.body;let br=s();window.addEventListener("resize",(()=>br=s()));new class{trackVisibleCells(){const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0?t.target.classList.add("in-view"):t.target.classList.remove("in-view")}))}));this.DOM.imageCells.forEach((e=>t.observe(e)))}initEvents(){for(const[t,e]of this.imageCellArr.entries())e.DOM.el.addEventListener("click",(()=>{if(!this.isGridView||this.isAnimating)return!1;this.isAnimating=!0,this.isGridView=!1,-1!==this.currentCell&&this.DOM.miniGrid.cells[this.currentCell].classList.remove("grid__cell--current"),this.currentCell=t,this.DOM.miniGrid.cells[this.currentCell].classList.add("grid__cell--current"),this.showContent(e)})),e.DOM.el.addEventListener("mouseenter",(()=>{if(!this.isGridView)return!1;zn.killTweensOf([e.DOM.el,e.DOM.inner]),zn.timeline({defaults:{duration:2.4,ease:"expo"}}).to(e.DOM.el,{scale:.95},0).to(e.DOM.inner,{scale:1.4},0)})),e.DOM.el.addEventListener("mouseleave",(()=>{if(!this.isGridView)return!1;zn.killTweensOf([e.DOM.el,e.DOM.inner]),zn.timeline({defaults:{duration:2.4,ease:"expo"}}).to([e.DOM.el,e.DOM.inner],{scale:1},0)}));this.DOM.backCtrl.addEventListener("click",(()=>{if(this.isAnimating)return!1;this.isAnimating=!0,this.isGridView=!0,this.closeContent()})),this.DOM.miniGrid.cells.forEach(((t,e)=>{t.addEventListener("click",(()=>{if(this.isAnimating||this.currentCell===e)return!1;this.isAnimating=!0,this.changeContent(e)}))})),window.addEventListener("resize",(()=>{if(this.isGridView)return!1;const t=this.calcTransformImage();zn.set(this.imageCellArr[this.currentCell].DOM.el,{scale:t.scale,x:t.x,y:t.y})}))}showContent(t){const e=this.calcTransformImage();this.otherImageCells=this.DOM.imageCells.filter((e=>e!=t.DOM.el)),zn.killTweensOf([t.DOM.el,t.DOM.inner,this.otherImageCells]),zn.timeline({defaults:{duration:1.2,ease:"expo.inOut"},onStart:()=>xr.classList.add("oh"),onComplete:()=>{this.isAnimating=!1}}).addLabel("start",0).add((()=>{this.textReveal.out()}),"start").set(this.DOM.el,{pointerEvents:"none"},"start").set(t.DOM.el,{zIndex:100},"start").set([t.DOM.el,t.DOM.inner,this.otherImageCells],{willChange:"transform, opacity"},"start").to(t.DOM.el,{scale:e.scale,x:e.x,y:e.y,onComplete:()=>zn.set(t.DOM.el,{willChange:""})},"start").to(t.DOM.inner,{scale:1,onComplete:()=>zn.set(t.DOM.inner,{willChange:""})},"start").to([t.contentItem.DOM.nav.prev,t.contentItem.DOM.nav.next],{y:0},"start").to(this.otherImageCells,{opacity:0,scale:.8,onComplete:()=>zn.set(this.otherImageCells,{willChange:""}),stagger:{grid:"auto",amount:.17,from:this.currentCell}},"start").addLabel("showContent","start+=0.45").to(this.DOM.backCtrl,{ease:"expo",startAt:{x:"50%"},x:"0%",opacity:1},"showContent").set(this.DOM.miniGrid.el,{opacity:1},"showContent").set(this.DOM.miniGrid.cells,{opacity:0},"showContent").to(this.DOM.miniGrid.cells,{duration:1,ease:"expo",opacity:1,startAt:{scale:.8},scale:1,stagger:{grid:"auto",amount:.3,from:this.currentCell}},"showContent+=0.2").add((()=>{t.contentItem.textReveal.in(),t.contentItem.textLinesReveal.in(),this.DOM.content.classList.add("content--open")}),"showContent").add((()=>t.contentItem.DOM.el.classList.add("content__item--current")),"showContent+=0.02")}closeContent(){const t=this.imageCellArr[this.currentCell];this.otherImageCells=this.DOM.imageCells.filter((e=>e!=t.DOM.el)),zn.timeline({defaults:{duration:1,ease:"expo.inOut"},onStart:()=>xr.classList.remove("oh"),onComplete:()=>{this.isAnimating=!1}}).addLabel("start",0).to(this.DOM.backCtrl,{x:"50%",opacity:0},"start").to(this.DOM.miniGrid.cells,{duration:.5,ease:"expo.in",opacity:0,scale:.8,stagger:{grid:"auto",amount:.1,from:-this.currentCell},onComplete:()=>{zn.set(this.DOM.miniGrid.el,{opacity:0})}},"start").add((()=>{t.contentItem.textReveal.out(),t.contentItem.textLinesReveal.out(),this.DOM.content.classList.remove("content--open")}),"start").add((()=>t.contentItem.DOM.el.classList.remove("content__item--current"))).addLabel("showGrid",0).set([t.DOM.el,this.otherImageCells],{willChange:"transform, opacity"},"showGrid").to(t.DOM.el,{scale:1,x:0,y:0,onComplete:()=>zn.set(t.DOM.el,{willChange:"",zIndex:1})},"showGrid").to(t.contentItem.DOM.nav.prev,{y:"-100%"},"showGrid").to(t.contentItem.DOM.nav.next,{y:"100%"},"showGrid").to(this.otherImageCells,{opacity:1,scale:1,onComplete:()=>{zn.set(this.otherImageCells,{willChange:""}),zn.set(this.DOM.el,{pointerEvents:"auto"})},stagger:{grid:"auto",amount:.17,from:-this.currentCell}},"showGrid").add((()=>{this.textReveal.in()}),"showGrid+=0.3")}changeContent(t){const e=this.imageCellArr[this.currentCell],i=this.imageCellArr[t];this.DOM.miniGrid.cells[this.currentCell].classList.remove("grid__cell--current"),this.currentCell=t,this.DOM.miniGrid.cells[this.currentCell].classList.add("grid__cell--current");const n=this.calcTransformImage();zn.timeline({defaults:{duration:1,ease:"expo.inOut"},onComplete:()=>{this.isAnimating=!1}}).addLabel("start",0).add(e.contentItem.textReveal.out(),"start").add(e.contentItem.textLinesReveal.out(),"start").add((()=>{e.contentItem.DOM.el.classList.remove("content__item--current")})).set([e.DOM.el,i.DOM.el],{willChange:"transform, opacity"},"start").to(e.DOM.el,{opacity:0,scale:.8,x:0,y:0,onComplete:()=>zn.set(e.DOM.el,{willChange:"",zIndex:1})},"start").to(e.contentItem.DOM.nav.prev,{y:"-100%"},"start").to(e.contentItem.DOM.nav.next,{y:"100%"},"start").addLabel("showContent",">-=0.4").set(i.DOM.el,{zIndex:100},"start").to(i.DOM.el,{scale:n.scale,x:n.x,y:n.y,opacity:1,onComplete:()=>zn.set(i.DOM.el,{willChange:""})},"start").to([i.contentItem.DOM.nav.prev,i.contentItem.DOM.nav.next],{ease:"expo",y:0},"showContent").add((()=>{i.contentItem.textReveal.in(),i.contentItem.textLinesReveal.in()}),"showContent").add((()=>{i.contentItem.DOM.el.classList.add("content__item--current")}),"showContent+=0.02")}calcTransformImage(){const t=(t=>{var e=t.getBoundingClientRect(),i=getComputedStyle(t),n=i.transform;if(n){var r,s,a,o;if(n.startsWith("matrix3d("))r=+(l=n.slice(9,-1).split(/, /))[0],s=+l[5],a=+l[12],o=+l[13];else{if(!n.startsWith("matrix("))return e;var l;r=+(l=n.slice(7,-1).split(/, /))[0],s=+l[3],a=+l[4],o=+l[5]}var u=i.transformOrigin,h=e.x-a-(1-r)*parseFloat(u),c=e.y-o-(1-s)*parseFloat(u.slice(u.indexOf(" ")+1)),f=r?e.width/r:t.offsetWidth,d=s?e.height/s:t.offsetHeight;return{x:h,y:c,width:f,height:d,top:c,right:h+f,bottom:c+d,left:h}}return e})(this.imageCellArr[this.currentCell].DOM.el);return{scale:.54*br.width/t.width,x:.65*br.width-(t.left+t.width/2),y:.5*br.height-(t.top+t.height/2)}}constructor(t){o(this,"DOM",{el:null,imageCells:null,content:null,backCtrl:null,miniGrid:{el:null,cells:null}}),o(this,"imageCellArr",[]),o(this,"currentCell",-1),o(this,"isGridView",!0),o(this,"isAnimating",!1),o(this,"textReveal",null),this.DOM.el=t,this.DOM.imageCells=[...this.DOM.el.querySelectorAll(".grid__cell-img")],this.DOM.imageCells.forEach((t=>this.imageCellArr.push(new wr(t)))),this.DOM.content=document.querySelector(".content"),this.DOM.backCtrl=this.DOM.content.querySelector(".back"),this.DOM.miniGrid.el=this.DOM.content.querySelector(".grid--mini"),this.DOM.miniGrid.cells=[...this.DOM.miniGrid.el.querySelectorAll(".grid__cell")],this.textReveal=new Fn([...this.DOM.el.querySelectorAll(".oh")]),this.initEvents()}}(document.querySelector(".grid--large")),((t="img")=>new Promise((e=>{r(document.querySelectorAll(t),{background:!0},e)})))(".grid__cell-img-inner, .slide-nav__img").then((()=>document.body.classList.remove("loading"))); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Grid Zoom | Codrops

Grid Zoom Effect

@codrops
01

Masses

The instruments by which public opinion is organized and focused may be misused. But such organization and focusing are necessary to orderly life.

View more
02

Invisible

As civilization has become more complex, and as the need for invisible government has been increas ingly demonstrated, the technical means have been invented and developed by which opinion may be regimented.

View more
03

Expense

The invisible government tends to be concentrated in the hands of the few because of the expense of manipulating the social machinery which controls the opinions and habits of the masses.

View more
04

Mechanism

No matter how sophisticated, how cynical the public may become about publicity methods, it must respond to the basic appeals, because it will always need food, crave amusement, long for beauty, respond to leadership.

View more
05

Millions

This practice of creating circumstances and of creating pictures in the minds of millions of persons is very common.

View more
06

Continuous

The important thing is that it is universal and continuous; and in its sum total it is regimenting the public mind every bit as much as an army regiments the bodies of its soldiers.

View more
07

Irresistible

When regimented, a group at times offers an irresistible pressure before which legislators, editors, and teachers are helpless.

View more
08

Pressure

A desire for a specific reform, however widespread, cannot be translated into action until it is made articulate, and until it has exerted sufficient pressure upon the proper law-making bodies.

View more
09

Interests

In the active proselytizing minorities in whom selfish interests and public interests coincide lie the progress and development of America.

View more
10

Think

Small groups of persons can, and do, make the rest of us think what they please about a given subject.

View more
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gridzoom", 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 | "dependencies": { 24 | "gsap": "^3.8.0", 25 | "imagesloaded": "^4.1.4", 26 | "parcel": "latest", 27 | "split-type": "^0.2.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 15px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #000; 14 | --color-bg: #f7f5ee; 15 | --color-link: #000; 16 | --color-link-hover: #000; 17 | color: var(--color-text); 18 | background-color: var(--color-bg); 19 | font-family: rustica, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | overflow: hidden; 23 | overflow-y: scroll; 24 | line-height: 1; 25 | } 26 | 27 | /* Page Loader */ 28 | .js .loading::before, 29 | .js .loading::after { 30 | content: ''; 31 | position: fixed; 32 | z-index: 1000; 33 | } 34 | 35 | .js .loading::before { 36 | top: 0; 37 | left: 0; 38 | width: 100%; 39 | height: 100%; 40 | background: var(--color-bg); 41 | } 42 | 43 | .js .loading::after { 44 | top: 50%; 45 | left: 50%; 46 | width: 60px; 47 | height: 60px; 48 | margin: -30px 0 0 -30px; 49 | border-radius: 50%; 50 | opacity: 0.4; 51 | background: var(--color-link); 52 | animation: loaderAnim 0.7s linear infinite alternate forwards; 53 | 54 | } 55 | 56 | @keyframes loaderAnim { 57 | to { 58 | opacity: 1; 59 | transform: scale3d(0.5,0.5,1); 60 | } 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | color: var(--color-link); 66 | outline: none; 67 | font-weight: 600; 68 | } 69 | 70 | a:hover { 71 | color: var(--color-link-hover); 72 | outline: none; 73 | } 74 | 75 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 76 | a:focus { 77 | /* Provide a fallback style for browsers 78 | that don't support :focus-visible */ 79 | outline: none; 80 | background: lightgrey; 81 | } 82 | 83 | a:focus:not(:focus-visible) { 84 | /* Remove the focus indicator on mouse-focus for browsers 85 | that do support :focus-visible */ 86 | background: transparent; 87 | } 88 | 89 | a:focus-visible { 90 | /* Draw a very noticeable focus style for 91 | keyboard-focus on browsers that do support 92 | :focus-visible */ 93 | outline: 2px solid red; 94 | background: transparent; 95 | } 96 | 97 | .unbutton { 98 | background: none; 99 | border: 0; 100 | padding: 0; 101 | margin: 0; 102 | font: inherit; 103 | } 104 | 105 | .unbutton:focus { 106 | outline: none; 107 | } 108 | 109 | .line { 110 | transform-origin: 0% 50%; 111 | padding-bottom: 0.35rem; 112 | white-space: nowrap; 113 | will-change: transform; 114 | } 115 | 116 | .oh { 117 | overflow: hidden; 118 | } 119 | 120 | .oh__inner { 121 | display: inline-block; 122 | transform-origin: 0% 50%; 123 | will-change: transform; 124 | } 125 | 126 | .frame { 127 | height: 100%; 128 | display: flex; 129 | flex-direction: column; 130 | align-items: flex-start; 131 | } 132 | 133 | .frame--fixed { 134 | position: fixed; 135 | top: 0; 136 | left: 0; 137 | width: 100%; 138 | height: auto; 139 | padding: 1rem; 140 | z-index: 1; 141 | display: grid; 142 | grid-template-columns: 38% 62%; 143 | } 144 | 145 | .frame__title { 146 | font-size: 1rem; 147 | font-weight: 400; 148 | margin: 0 0 2rem 0; 149 | } 150 | 151 | .frame__links { 152 | display: flex; 153 | flex-direction: column; 154 | align-items: flex-start; 155 | } 156 | 157 | .frame__links a { 158 | margin: 0 1rem 0.35rem 0; 159 | } 160 | 161 | .frame--fixed .frame__links { 162 | flex-direction: row; 163 | } 164 | 165 | .grid { 166 | display: grid; 167 | --grid-border-radius: 8px; 168 | grid-template-columns: repeat(2,50%); 169 | } 170 | 171 | .grid--large { 172 | grid-auto-rows: 32vmin; 173 | padding: 0.5vw; 174 | --grid-padding: 0.5vw; 175 | } 176 | 177 | .grid--mini { 178 | width: 220px; 179 | height: 190px; 180 | --grid-padding: 1px; 181 | margin-bottom: 3vh; 182 | pointer-events: none; 183 | opacity: 0; 184 | visibility: hidden; 185 | pointer-events: none; 186 | position: absolute; 187 | } 188 | 189 | .grid__cell { 190 | display: grid; 191 | align-items: end; 192 | } 193 | 194 | .grid--mini .grid__cell:not(.grid__cell--current):hover .grid__cell-img { 195 | opacity: 0.7; 196 | } 197 | 198 | .grid__cell--current .grid__cell-img { 199 | opacity: 0.3; 200 | } 201 | 202 | .grid__cell--padded { 203 | padding: calc(var(--grid-padding) * 2 ); 204 | } 205 | 206 | .grid__cell-img { 207 | width: calc(100% - var(--grid-padding) * 2); 208 | height: calc(100% - var(--grid-padding) * 2); 209 | margin: var(--grid-padding); 210 | border-radius: var(--grid-border-radius); 211 | display: block; 212 | position: relative; 213 | overflow: hidden; 214 | } 215 | 216 | .grid__cell-img-inner { 217 | background-size: cover; 218 | background-position: 50% 50%; 219 | width: 100%; 220 | height: 100%; 221 | cursor: pointer; 222 | } 223 | 224 | .content { 225 | position: fixed; 226 | top: 0; 227 | left: 0; 228 | width: 100%; 229 | height: 100%; 230 | padding: 15vh 8vw 0; 231 | z-index: 1000; 232 | pointer-events: none; 233 | display: flex; 234 | flex-direction: column; 235 | justify-content: space-between; 236 | } 237 | 238 | .content__item { 239 | position: absolute; 240 | opacity: 0; 241 | display: grid; 242 | } 243 | 244 | .content__item--current { 245 | opacity: 1; 246 | position: relative; 247 | pointer-events: auto; 248 | } 249 | 250 | .content__item-number { 251 | font-weight: 600; 252 | display: block; 253 | } 254 | 255 | .content__item-heading { 256 | font-size: 4vw; 257 | line-height: 1; 258 | margin: 1rem 0 3rem 0; 259 | font-weight: 600; 260 | } 261 | 262 | .content__item-text { 263 | max-width: 30ch; 264 | margin-bottom: 2rem; 265 | } 266 | 267 | .content__item-link { 268 | cursor: pointer; 269 | } 270 | 271 | .slide-nav { 272 | position: fixed; 273 | width: 40%; 274 | right: 15%; 275 | top: 0; 276 | height: 100%; 277 | display: grid; 278 | align-content: space-between; 279 | pointer-events: none; 280 | } 281 | 282 | .slide-nav__img { 283 | width: 100%; 284 | height: 10vh; 285 | position: relative; 286 | overflow: hidden; 287 | opacity: 0.3; 288 | cursor: not-allowed; 289 | } 290 | 291 | .content--open .slide-nav__img { 292 | pointer-events: auto; 293 | } 294 | 295 | .slide-nav__img--prev { 296 | transform: translateY(-100%); 297 | border-radius: 0 0 1.5vw 1.5vw; 298 | } 299 | 300 | .slide-nav__img--next { 301 | transform: translateY(100%); 302 | border-radius: 1.5vw 1.5vw 0 0; 303 | } 304 | 305 | .slide-nav__img-inner { 306 | width: 100%; 307 | height: 100%; 308 | background-size: cover; 309 | background-position: 50% 50%; 310 | } 311 | 312 | .back { 313 | background: none; 314 | border: 0; 315 | padding: 0; 316 | margin: auto 0 1.5rem 0; 317 | opacity: 0; 318 | pointer-events: none; 319 | stroke: #000; 320 | z-index: 1000; 321 | cursor: pointer; 322 | width: 50px; 323 | } 324 | 325 | .back svg { 326 | stroke-linecap: round; 327 | } 328 | 329 | .back:hover, 330 | .back:focus { 331 | outline: none; 332 | stroke: #823725; 333 | } 334 | 335 | .content--open .back { 336 | pointer-events: auto; 337 | } 338 | 339 | @media screen and (min-width: 53em) { 340 | .content { 341 | width: 38%; 342 | } 343 | .grid { 344 | grid-template-columns: repeat(4,25%); 345 | } 346 | .grid__cell--padded { 347 | padding: var(--grid-padding); 348 | } 349 | .grid__cell-c1-r1 { grid-column: 1; grid-row: 1; } 350 | .grid__cell-c3-r1 { grid-column: 3; grid-row: 1; } 351 | .grid__cell-c4-r1 { grid-column: 4; grid-row: 1; } 352 | .grid__cell-c1-r2 { grid-column: 1; grid-row: 2; } 353 | .grid__cell-c2-r2 { grid-column: 2; grid-row: 2; } 354 | .grid__cell-c3-r2 { grid-column: 3; grid-row: 2; } 355 | .grid__cell-c4-r2 { grid-column: 4; grid-row: 2; } 356 | .grid__cell-c2-r3 { grid-column: 2; grid-row: 3; } 357 | .grid__cell-c4-r3 { grid-column: 4; grid-row: 3; } 358 | .grid__cell-c1-r4 { grid-column: 1; grid-row: 4; } 359 | .grid__cell-c3-r4 { grid-column: 3; grid-row: 4; } 360 | .grid__cell-c3-r5 { grid-column: 3; grid-row: 5; } 361 | .grid--mini { 362 | visibility: visible; 363 | position: relative; 364 | } 365 | .content--open .grid--mini { 366 | pointer-events: auto; 367 | } 368 | body #cdawrap { 369 | position: relative; 370 | margin-top: auto; 371 | --cda-left: auto; 372 | --cda-right: auto; 373 | --cda-width: 300px; 374 | --cda-bottom: auto; 375 | --cda-top: auto; 376 | opacity: 1 !important; 377 | pointer-events: auto; 378 | z-index: 1; 379 | } 380 | 381 | body #cdawrap .cda-footer { 382 | display: none; 383 | } 384 | 385 | body #cdawrap .cda-text { 386 | color: transparent !important; 387 | height: 1.25rem; 388 | pointer-events: none; 389 | position: relative; 390 | text-align: left; 391 | } 392 | 393 | body #cdawrap .cda-text::before { 394 | color: var(--color-text); 395 | content: "Sponsored by "attr(data-sponsor); 396 | font-size: 0.85rem; 397 | font-weight: 500; 398 | left: 0; 399 | pointer-events: auto; 400 | position: absolute; 401 | top: 0; 402 | opacity: 0.5; 403 | transition: opacity 0.4s; 404 | } 405 | 406 | .grid[style*="pointer-events: none;"] .frame #cdawrap .cda-text::before { 407 | opacity: 0 !important; 408 | } 409 | 410 | body #cdawrap:hover .cda-text::before { 411 | color: var(--color-link-hover); 412 | } 413 | 414 | body #cdawrap a::after { 415 | display: none; 416 | } 417 | } 418 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/10.jpg -------------------------------------------------------------------------------- /src/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/11.jpg -------------------------------------------------------------------------------- /src/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/12.jpg -------------------------------------------------------------------------------- /src/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/13.jpg -------------------------------------------------------------------------------- /src/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/14.jpg -------------------------------------------------------------------------------- /src/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/15.jpg -------------------------------------------------------------------------------- /src/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/16.jpg -------------------------------------------------------------------------------- /src/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/17.jpg -------------------------------------------------------------------------------- /src/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/18.jpg -------------------------------------------------------------------------------- /src/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/19.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/20.jpg -------------------------------------------------------------------------------- /src/img/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/21.jpg -------------------------------------------------------------------------------- /src/img/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/22.jpg -------------------------------------------------------------------------------- /src/img/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/23.jpg -------------------------------------------------------------------------------- /src/img/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/24.jpg -------------------------------------------------------------------------------- /src/img/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/25.jpg -------------------------------------------------------------------------------- /src/img/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/26.jpg -------------------------------------------------------------------------------- /src/img/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/27.jpg -------------------------------------------------------------------------------- /src/img/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/28.jpg -------------------------------------------------------------------------------- /src/img/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/29.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/30.jpg -------------------------------------------------------------------------------- /src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/4.jpg -------------------------------------------------------------------------------- /src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/5.jpg -------------------------------------------------------------------------------- /src/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/6.jpg -------------------------------------------------------------------------------- /src/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/7.jpg -------------------------------------------------------------------------------- /src/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/8.jpg -------------------------------------------------------------------------------- /src/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridZoom/a02368f353587619a873380da8e2b7278e4e9583/src/img/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Zoom | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |

Grid Zoom Effect

23 | 28 |
29 |
30 |
31 | @codrops 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 01 87 |

Masses

88 |

89 | The instruments by which public opinion is organized and focused may be misused. But such organization and focusing are necessary to orderly life. 90 |

91 | View more 92 | 96 |
97 |
98 | 02 99 |

Invisible

100 |

101 | As civilization has become more complex, and as the need for invisible government has been increas ingly demonstrated, the technical means have been invented and developed by which opinion may be regimented. 102 |

103 | View more 104 | 108 |
109 |
110 | 03 111 |

Expense

112 |

113 | The invisible government tends to be concentrated in the hands of the few because of the expense of manipulating the social machinery which controls the opinions and habits of the masses. 114 |

115 | View more 116 | 120 |
121 |
122 | 04 123 |

Mechanism

124 |

125 | No matter how sophisticated, how cynical the public may become about publicity methods, it must respond to the basic appeals, because it will always need food, crave amusement, long for beauty, respond to leadership. 126 |

127 | View more 128 | 132 |
133 |
134 | 05 135 |

Millions

136 |

137 | This practice of creating circumstances and of creating pictures in the minds of millions of persons is very common. 138 |

139 | View more 140 | 144 |
145 |
146 | 06 147 |

Continuous

148 |

149 | The important thing is that it is universal and continuous; and in its sum total it is regimenting the public mind every bit as much as an army regiments the bodies of its soldiers. 150 |

151 | View more 152 | 156 |
157 |
158 | 07 159 |

Irresistible

160 |

161 | When regimented, a group at times offers an irresistible pressure before which legislators, editors, and teachers are helpless. 162 |

163 | View more 164 | 168 |
169 |
170 | 08 171 |

Pressure

172 |

173 | A desire for a specific reform, however widespread, cannot be translated into action until it is made articulate, and until it has exerted sufficient pressure upon the proper law-making bodies. 174 |

175 | View more 176 | 180 |
181 |
182 | 09 183 |

Interests

184 |

185 | In the active proselytizing minorities in whom selfish interests and public interests coincide lie the progress and development of America. 186 |

187 | View more 188 | 192 |
193 |
194 | 10 195 |

Think

196 |

197 | Small groups of persons can, and do, make the rest of us think what they please about a given subject. 198 |

199 | View more 200 | 204 |
205 | 208 | 260 |
261 |
262 | 263 | 264 | 265 | 266 | -------------------------------------------------------------------------------- /src/js/contentItem.js: -------------------------------------------------------------------------------- 1 | import { TextReveal } from './textReveal'; 2 | import { TextLinesReveal } from './textLinesReveal'; 3 | 4 | /** 5 | * Class representing a content item (.content__item). 6 | */ 7 | export class ContentItem { 8 | // DOM elements 9 | DOM = { 10 | // Main element (.content__item) 11 | el: null 12 | }; 13 | // TextReveal obj to animate the texts (slide in/out) 14 | textReveal = null; 15 | // TextLinesReveal obj to animate the ,ulti line texts (slide in/out) 16 | textLinesReveal = null; 17 | 18 | /** 19 | * Constructor. 20 | * @param {Element} DOM_el - the .content__item element. 21 | */ 22 | constructor(DOM_el) { 23 | this.DOM.el = DOM_el; 24 | this.DOM.nav = { 25 | prev: this.DOM.el.querySelector('.slide-nav__img--prev'), 26 | next: this.DOM.el.querySelector('.slide-nav__img--next') 27 | }; 28 | 29 | // Text animations 30 | this.textReveal = new TextReveal([...this.DOM.el.querySelectorAll('.oh')]); 31 | // Text lines animations 32 | this.textLinesReveal = new TextLinesReveal(this.DOM.el.querySelector('.content__item-text')); 33 | } 34 | } -------------------------------------------------------------------------------- /src/js/grid.js: -------------------------------------------------------------------------------- 1 | import { ImageCell } from './imageCell'; 2 | import { calcWinsize, adjustedBoundingRect } from './utils'; 3 | import { TextReveal } from './textReveal'; 4 | import { gsap } from 'gsap'; 5 | 6 | // body element 7 | const bodyEl = document.body; 8 | 9 | // Calculate the viewport size 10 | let winsize = calcWinsize(); 11 | window.addEventListener('resize', () => winsize = calcWinsize()); 12 | 13 | /** 14 | * Class representing a grid of images, where the grid can be zoomed to the clicked image cell 15 | */ 16 | export class Grid { 17 | // DOM elements 18 | DOM = { 19 | // main element (.grid) 20 | el: null, 21 | // .grid__cell-img elements 22 | imageCells: null, 23 | // content section 24 | content: null, 25 | // .back button 26 | backCtrl: null, 27 | // The mini grid shown in the content area 28 | miniGrid: { 29 | // main element 30 | el: null, 31 | // cells 32 | cells: null 33 | } 34 | }; 35 | // ImageCell instances array 36 | imageCellArr = []; 37 | // Index of current imageCell 38 | currentCell = -1; 39 | // Checks if in view mode or if in content mode 40 | isGridView = true; 41 | // Checks for active animation 42 | isAnimating = false; 43 | // TextReveal obj to animate the texts (slide in/out) 44 | textReveal = null; 45 | 46 | /** 47 | * Constructor. 48 | * @param {Element} DOM_el - the .grid--large element 49 | */ 50 | constructor(DOM_el) { 51 | this.DOM.el = DOM_el; 52 | this.DOM.imageCells = [...this.DOM.el.querySelectorAll('.grid__cell-img')]; 53 | this.DOM.imageCells.forEach(el => this.imageCellArr.push(new ImageCell(el))); 54 | this.DOM.content = document.querySelector('.content'); 55 | this.DOM.backCtrl = this.DOM.content.querySelector('.back'); 56 | this.DOM.miniGrid.el = this.DOM.content.querySelector('.grid--mini'); 57 | this.DOM.miniGrid.cells = [...this.DOM.miniGrid.el.querySelectorAll('.grid__cell')]; 58 | 59 | // Text animations 60 | this.textReveal = new TextReveal([...this.DOM.el.querySelectorAll('.oh')]); 61 | // Events 62 | this.initEvents(); 63 | // Track which cells are visible 64 | //this.trackVisibleCells(); 65 | } 66 | 67 | /** 68 | * Track which cells are visible (inside the viewport) 69 | * by adding/removing the 'in-view' class when scrolling. 70 | * This will be used to animate only the ones that are visible. 71 | */ 72 | trackVisibleCells() { 73 | const observer = new IntersectionObserver((entries, observer) => { 74 | entries.forEach(entry => { 75 | if (entry.intersectionRatio > 0) { 76 | entry.target.classList.add('in-view'); 77 | } 78 | else { 79 | entry.target.classList.remove('in-view'); 80 | } 81 | }); 82 | }); 83 | this.DOM.imageCells.forEach(img => observer.observe(img)); 84 | } 85 | 86 | /** 87 | * Init/Bind events. 88 | */ 89 | initEvents() { 90 | // for every imageCell 91 | for (const [position,imageCell] of this.imageCellArr.entries()) { 92 | 93 | // Open the imageCell and reveal its content 94 | imageCell.DOM.el.addEventListener('click', () => { 95 | if ( !this.isGridView || this.isAnimating ) { 96 | return false; 97 | } 98 | this.isAnimating = true; 99 | this.isGridView = false; 100 | 101 | // Update the mini grid current cell 102 | if ( this.currentCell !== -1 ) { 103 | this.DOM.miniGrid.cells[this.currentCell].classList.remove('grid__cell--current'); 104 | } 105 | 106 | // Update currentCell 107 | this.currentCell = position; 108 | this.DOM.miniGrid.cells[this.currentCell].classList.add('grid__cell--current'); 109 | 110 | this.showContent(imageCell); 111 | }); 112 | 113 | // Hover on the image cell will scale down the outer element and scale up the inner element. 114 | imageCell.DOM.el.addEventListener('mouseenter', () => { 115 | if ( !this.isGridView ) { 116 | return false; 117 | } 118 | gsap.killTweensOf([imageCell.DOM.el, imageCell.DOM.inner]); 119 | gsap.timeline({ 120 | defaults: {duration: 2.4, ease: 'expo'} 121 | }) 122 | .to(imageCell.DOM.el, {scale: 0.95}, 0) 123 | .to(imageCell.DOM.inner, {scale: 1.4}, 0); 124 | }); 125 | 126 | // Hovering out will reverse the scale values. 127 | imageCell.DOM.el.addEventListener('mouseleave', () => { 128 | if ( !this.isGridView ) { 129 | return false; 130 | } 131 | gsap.killTweensOf([imageCell.DOM.el, imageCell.DOM.inner]); 132 | gsap.timeline({ 133 | defaults: {duration: 2.4, ease: 'expo'} 134 | }) 135 | .to([imageCell.DOM.el, imageCell.DOM.inner], {scale: 1}, 0); 136 | }); 137 | 138 | } 139 | 140 | // Close the imageCell and reveal the grid 141 | this.DOM.backCtrl.addEventListener('click', () => { 142 | if ( this.isAnimating ) { 143 | return false; 144 | } 145 | this.isAnimating = true; 146 | this.isGridView = true; 147 | 148 | this.closeContent(); 149 | }); 150 | 151 | this.DOM.miniGrid.cells.forEach((cell, position) => { 152 | cell.addEventListener('click', () => { 153 | if ( this.isAnimating || this.currentCell === position ) { 154 | return false; 155 | } 156 | this.isAnimating = true; 157 | this.changeContent(position); 158 | }); 159 | }); 160 | 161 | // Recalculate current image transform 162 | window.addEventListener('resize', () => { 163 | if ( this.isGridView ) { 164 | return false; 165 | } 166 | 167 | // Calculate the transform to apply to the image cell 168 | const imageTransform = this.calcTransformImage(); 169 | gsap.set(this.imageCellArr[this.currentCell].DOM.el, { 170 | scale: imageTransform.scale, 171 | x: imageTransform.x, 172 | y: imageTransform.y 173 | }); 174 | }); 175 | } 176 | 177 | /** 178 | * Scale up the image and reveal its content. 179 | * @param {ImageCell} imageCell - the imageCell element. 180 | */ 181 | showContent(imageCell) { 182 | // Calculate the transform to apply to the image cell 183 | const imageTransform = this.calcTransformImage(); 184 | // All the others (that are inside the viewport) 185 | //this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el && el.classList.contains('in-view')); 186 | this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el); 187 | 188 | gsap.killTweensOf([imageCell.DOM.el, imageCell.DOM.inner, this.otherImageCells]); 189 | gsap.timeline({ 190 | defaults: { 191 | duration: 1.2, 192 | ease: 'expo.inOut' 193 | }, 194 | // overflow hidden 195 | onStart: () => bodyEl.classList.add('oh'), 196 | onComplete: () => { 197 | this.isAnimating = false; 198 | } 199 | }) 200 | .addLabel('start', 0) 201 | .add(() => { 202 | // Hide grid texts 203 | this.textReveal.out(); 204 | }, 'start') 205 | .set(this.DOM.el, { 206 | pointerEvents: 'none' 207 | }, 'start') 208 | .set(imageCell.DOM.el, { 209 | zIndex: 100 210 | }, 'start') 211 | .set([imageCell.DOM.el, imageCell.DOM.inner, this.otherImageCells], { 212 | willChange: 'transform, opacity' 213 | }, 'start') 214 | .to(imageCell.DOM.el, { 215 | scale: imageTransform.scale, 216 | x: imageTransform.x, 217 | y: imageTransform.y, 218 | onComplete: () => gsap.set(imageCell.DOM.el, {willChange: ''}) 219 | }, 'start') 220 | .to(imageCell.DOM.inner, { 221 | scale: 1, 222 | onComplete: () => gsap.set(imageCell.DOM.inner, {willChange: ''}) 223 | }, 'start') 224 | .to([imageCell.contentItem.DOM.nav.prev, imageCell.contentItem.DOM.nav.next], { 225 | y: 0 226 | }, 'start') 227 | .to(this.otherImageCells, { 228 | opacity: 0, 229 | scale: 0.8, 230 | onComplete: () => gsap.set(this.otherImageCells, {willChange: ''}), 231 | stagger: { 232 | grid: 'auto', 233 | amount: 0.17, 234 | from: this.currentCell 235 | } 236 | }, 'start') 237 | .addLabel('showContent', 'start+=0.45') 238 | .to(this.DOM.backCtrl, { 239 | ease: 'expo', 240 | startAt: {x: '50%'}, 241 | x: '0%', 242 | opacity: 1 243 | }, 'showContent') 244 | .set(this.DOM.miniGrid.el, { 245 | opacity: 1 246 | }, 'showContent') 247 | .set(this.DOM.miniGrid.cells, { 248 | opacity: 0 249 | }, 'showContent') 250 | .to(this.DOM.miniGrid.cells, { 251 | duration: 1, 252 | ease: 'expo', 253 | opacity: 1, 254 | startAt: {scale: 0.8}, 255 | scale: 1, 256 | stagger: { 257 | grid: 'auto', 258 | amount: 0.3, 259 | from: this.currentCell 260 | } 261 | }, 'showContent+=0.2') 262 | .add(() => { 263 | imageCell.contentItem.textReveal.in(); 264 | imageCell.contentItem.textLinesReveal.in(); 265 | this.DOM.content.classList.add('content--open'); 266 | }, 'showContent') 267 | .add(() => imageCell.contentItem.DOM.el.classList.add('content__item--current'), 'showContent+=0.02'); 268 | } 269 | 270 | /** 271 | * Scale down the image and reveal the grid again. 272 | */ 273 | closeContent() { 274 | // Current imageCell 275 | const imageCell = this.imageCellArr[this.currentCell]; 276 | this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el); 277 | 278 | gsap.timeline({ 279 | defaults: { 280 | duration: 1, 281 | ease: 'expo.inOut' 282 | }, 283 | // overflow hidden 284 | onStart: () => bodyEl.classList.remove('oh'), 285 | onComplete: () => { 286 | this.isAnimating = false; 287 | } 288 | }) 289 | .addLabel('start', 0) 290 | .to(this.DOM.backCtrl, { 291 | x: '50%', 292 | opacity: 0 293 | }, 'start') 294 | .to(this.DOM.miniGrid.cells, { 295 | duration: 0.5, 296 | ease: 'expo.in', 297 | opacity: 0, 298 | scale: 0.8, 299 | stagger: { 300 | grid: 'auto', 301 | amount: 0.1, 302 | from: -this.currentCell 303 | }, 304 | onComplete: () => { 305 | gsap.set(this.DOM.miniGrid.el, { 306 | opacity: 0 307 | }) 308 | } 309 | }, 'start') 310 | 311 | .add(() => { 312 | imageCell.contentItem.textReveal.out(); 313 | imageCell.contentItem.textLinesReveal.out(); 314 | this.DOM.content.classList.remove('content--open'); 315 | }, 'start') 316 | .add(() => imageCell.contentItem.DOM.el.classList.remove('content__item--current')) 317 | .addLabel('showGrid', 0) 318 | .set([imageCell.DOM.el, this.otherImageCells], { 319 | willChange: 'transform, opacity' 320 | }, 'showGrid') 321 | .to(imageCell.DOM.el, { 322 | scale: 1, 323 | x: 0, 324 | y: 0, 325 | onComplete: () => gsap.set(imageCell.DOM.el, {willChange: '', zIndex: 1}) 326 | }, 'showGrid') 327 | .to(imageCell.contentItem.DOM.nav.prev, { 328 | y: '-100%' 329 | }, 'showGrid') 330 | .to(imageCell.contentItem.DOM.nav.next, { 331 | y: '100%' 332 | }, 'showGrid') 333 | .to(this.otherImageCells, { 334 | opacity: 1, 335 | scale: 1, 336 | onComplete: () => { 337 | gsap.set(this.otherImageCells, {willChange: ''}); 338 | gsap.set(this.DOM.el, { pointerEvents: 'auto' }); 339 | }, 340 | stagger: { 341 | grid: 'auto', 342 | amount: 0.17, 343 | from: -this.currentCell 344 | } 345 | }, 'showGrid') 346 | .add(() => { 347 | // Show grid texts 348 | this.textReveal.in(); 349 | }, 'showGrid+=0.3') 350 | } 351 | /** 352 | * 353 | */ 354 | changeContent(position) { 355 | // Current imageCell 356 | const imageCell = this.imageCellArr[this.currentCell]; 357 | // Upcoming imageCell 358 | const upcomingImageCell = this.imageCellArr[position]; 359 | 360 | this.DOM.miniGrid.cells[this.currentCell].classList.remove('grid__cell--current'); 361 | this.currentCell = position; 362 | this.DOM.miniGrid.cells[this.currentCell].classList.add('grid__cell--current'); 363 | 364 | // Calculate the transform to apply to the image cell 365 | const imageTransform = this.calcTransformImage(); 366 | 367 | gsap.timeline({ 368 | defaults: { 369 | duration: 1, 370 | ease: 'expo.inOut' 371 | }, 372 | onComplete: () => { 373 | this.isAnimating = false; 374 | } 375 | }) 376 | .addLabel('start', 0) 377 | .add(imageCell.contentItem.textReveal.out(), 'start') 378 | .add(imageCell.contentItem.textLinesReveal.out(), 'start') 379 | .add(() => { 380 | imageCell.contentItem.DOM.el.classList.remove('content__item--current'); 381 | }) 382 | .set([imageCell.DOM.el, upcomingImageCell.DOM.el], { 383 | willChange: 'transform, opacity' 384 | }, 'start') 385 | .to(imageCell.DOM.el, { 386 | opacity: 0, 387 | scale: 0.8, 388 | x: 0, 389 | y: 0, 390 | onComplete: () => gsap.set(imageCell.DOM.el, {willChange: '', zIndex: 1}) 391 | }, 'start') 392 | .to(imageCell.contentItem.DOM.nav.prev, { 393 | y: '-100%' 394 | }, 'start') 395 | .to(imageCell.contentItem.DOM.nav.next, { 396 | y: '100%' 397 | }, 'start') 398 | 399 | .addLabel('showContent', '>-=0.4') 400 | .set(upcomingImageCell.DOM.el, { 401 | zIndex: 100 402 | }, 'start') 403 | .to(upcomingImageCell.DOM.el, { 404 | scale: imageTransform.scale, 405 | x: imageTransform.x, 406 | y: imageTransform.y, 407 | opacity: 1, 408 | onComplete: () => gsap.set(upcomingImageCell.DOM.el, {willChange: ''}) 409 | }, 'start') 410 | .to([upcomingImageCell.contentItem.DOM.nav.prev, upcomingImageCell.contentItem.DOM.nav.next], { 411 | ease: 'expo', 412 | y: 0 413 | }, 'showContent') 414 | .add(() => { 415 | upcomingImageCell.contentItem.textReveal.in(); 416 | upcomingImageCell.contentItem.textLinesReveal.in(); 417 | }, 'showContent') 418 | .add(() => { 419 | upcomingImageCell.contentItem.DOM.el.classList.add('content__item--current'); 420 | }, 'showContent+=0.02'); 421 | } 422 | /** 423 | * Calculates the scale and translation values to apply to the image cell when we click on it. 424 | * Also used to recalculate those values on resize. 425 | * @return {JSON} the translation and scale values 426 | */ 427 | calcTransformImage() { 428 | const cellrect = adjustedBoundingRect(this.imageCellArr[this.currentCell].DOM.el); 429 | return { 430 | scale: winsize.width * 0.54 / cellrect.width, 431 | x: winsize.width * 0.65 - (cellrect.left + cellrect.width/2), 432 | y: winsize.height * 0.50 - (cellrect.top + cellrect.height/2) 433 | }; 434 | } 435 | } -------------------------------------------------------------------------------- /src/js/imageCell.js: -------------------------------------------------------------------------------- 1 | import { ContentItem } from './contentItem'; 2 | 3 | /** 4 | * Class representing a image cell (.grid__cell-img). 5 | */ 6 | export class ImageCell { 7 | // DOM elements 8 | DOM = { 9 | // Main element (.grid__cell-img) 10 | el: null, 11 | // Inner element 12 | inner: null, 13 | // The ImageCell's content item id. 14 | contentId: null, 15 | // The ContentItem instance 16 | contentItem: null 17 | }; 18 | 19 | /** 20 | * Constructor. 21 | * @param {Element} DOM_el - the .grid__cell-img element. 22 | */ 23 | constructor(DOM_el) { 24 | this.DOM.el = DOM_el; 25 | this.DOM.inner = this.DOM.el.querySelector('.grid__cell-img-inner'); 26 | 27 | // The ImageCell's content item id. 28 | this.contentId = this.DOM.inner.dataset.item; 29 | // The ContentItem instance 30 | this.contentItem = new ContentItem(document.querySelector(`#${this.contentId}`)); 31 | } 32 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import { Grid } from './grid'; 3 | 4 | // Initialize the grid 5 | new Grid(document.querySelector('.grid--large')); 6 | 7 | // Preload images then remove loader (loading class) from body 8 | preloadImages('.grid__cell-img-inner, .slide-nav__img').then(() => document.body.classList.remove('loading')); -------------------------------------------------------------------------------- /src/js/textLinesReveal.js: -------------------------------------------------------------------------------- 1 | import SplitType from 'split-type'; 2 | import { wrapLines } from './utils'; 3 | import { gsap } from 'gsap'; 4 | 5 | export class TextLinesReveal { 6 | constructor(animationElems) { 7 | this.DOM = { 8 | animationElems: Array.isArray(animationElems) ? animationElems : [animationElems] 9 | }; 10 | 11 | // array of SplitType instances 12 | this.SplitTypeInstances = []; 13 | // array of all HTML .line 14 | this.lines = []; 15 | 16 | for (const el of this.DOM.animationElems) { 17 | const SplitTypeInstance = new SplitType(el, { types: 'lines' }); 18 | // wrap the lines (div with class .oh) 19 | // the inner child will be the one animating the transform 20 | wrapLines(SplitTypeInstance.lines, 'div', 'oh'); 21 | this.lines.push(SplitTypeInstance.lines); 22 | // keep a reference to the SplitType instance 23 | this.SplitTypeInstances.push(SplitTypeInstance); 24 | } 25 | 26 | this.initEvents(); 27 | } 28 | in() { 29 | // lines are visible 30 | this.isVisible = true; 31 | 32 | // animation 33 | gsap.killTweensOf(this.lines); 34 | return gsap.timeline({defaults: {duration: 1.2, ease: 'expo'}}) 35 | .set(this.lines, { 36 | y: '150%', 37 | rotate: 15 38 | }) 39 | .to(this.lines, { 40 | y: '0%', 41 | rotate: 0, 42 | stagger: 0.04 43 | }); 44 | } 45 | out() { 46 | // lines are invisible 47 | this.isVisible = false; 48 | 49 | // animation 50 | gsap.killTweensOf(this.lines); 51 | return gsap.timeline({ 52 | defaults: {duration: 0.5, ease: 'expo.in'} 53 | }) 54 | .to(this.lines, { 55 | y: '-150%', 56 | rotate: -5, 57 | stagger: 0.02 58 | }); 59 | } 60 | initEvents() { 61 | window.addEventListener('resize', () => { 62 | // empty the lines array 63 | this.lines = []; 64 | // re initialize the Split Text 65 | for (const instance of this.SplitTypeInstances) { 66 | // re-split text 67 | // https://github.com/lukePeavey/SplitType#instancesplitoptions-void 68 | instance.split(); 69 | 70 | // need to wrap again the new lines elements (div with class .oh) 71 | wrapLines(instance.lines, 'div', 'oh'); 72 | this.lines.push(instance.lines); 73 | } 74 | // hide the lines 75 | if ( !this.isVisible ) { 76 | gsap.set(this.lines, {y: '-150%'}); 77 | } 78 | }); 79 | } 80 | } -------------------------------------------------------------------------------- /src/js/textReveal.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | 3 | export class TextReveal { 4 | constructor(el) { 5 | this.DOM = { 6 | outer: el, 7 | inner: Array.isArray(el) ? el.map(outer => outer.querySelector('.oh__inner')) : el.querySelector('.oh__inner') 8 | } 9 | } 10 | in() { 11 | if ( this.outTimeline && this.outTimeline.isActive() ) { 12 | this.outTimeline.kill(); 13 | } 14 | 15 | this.inTimeline = gsap.timeline({defaults: {duration: 1.2, ease: 'expo'}}) 16 | .set(this.DOM.inner, { 17 | y: '120%', 18 | rotate: 15 19 | }) 20 | .to(this.DOM.inner, { 21 | y: '0%', 22 | rotate: 0, 23 | stagger: 0.03 24 | }); 25 | return this.inTimeline; 26 | } 27 | out() { 28 | if ( this.inTimeline && this.inTimeline.isActive() ) { 29 | this.inTimeline.kill(); 30 | } 31 | 32 | this.outTimeline = gsap.timeline({defaults: {duration: 0.5, ease: 'expo.in'}}) 33 | .to(this.DOM.inner, { 34 | y: '-120%', 35 | rotate: -5, 36 | stagger: 0.03 37 | }); 38 | return this.outTimeline; 39 | } 40 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Preload images 4 | const preloadImages = (selector = 'img') => { 5 | return new Promise((resolve) => { 6 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 7 | }); 8 | }; 9 | 10 | const calcWinsize = () => { 11 | return { width: window.innerWidth, height: window.innerHeight }; 12 | }; 13 | 14 | const getScrollValues = () => { 15 | const supportPageOffset = window.pageXOffset !== undefined; 16 | const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); 17 | const x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft; 18 | const y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; 19 | return {x,y}; 20 | } 21 | 22 | // wrap each element of an array 23 | // elems - the array of elements to wrap 24 | // wrapType - type of wrapper ('div', 'span' etc) 25 | // wrapClass - wrapper class(s) 26 | const wrapLines = (elems, wrapType, wrapClass) => { 27 | elems.forEach(char => { 28 | // add a wrap for every char (overflow hidden) 29 | const wrapEl = document.createElement(wrapType); 30 | wrapEl.classList = wrapClass; 31 | char.parentNode.appendChild(wrapEl); 32 | wrapEl.appendChild(char); 33 | }); 34 | } 35 | 36 | const adjustedBoundingRect = el => { 37 | var rect = el.getBoundingClientRect(); 38 | var style = getComputedStyle(el); 39 | var tx = style.transform; 40 | 41 | if (tx) { 42 | var sx, sy, dx, dy; 43 | if (tx.startsWith('matrix3d(')) { 44 | var ta = tx.slice(9,-1).split(/, /); 45 | sx = +ta[0]; 46 | sy = +ta[5]; 47 | dx = +ta[12]; 48 | dy = +ta[13]; 49 | } else if (tx.startsWith('matrix(')) { 50 | var ta = tx.slice(7,-1).split(/, /); 51 | sx = +ta[0]; 52 | sy = +ta[3]; 53 | dx = +ta[4]; 54 | dy = +ta[5]; 55 | } else { 56 | return rect; 57 | } 58 | 59 | var to = style.transformOrigin; 60 | var x = rect.x - dx - (1 - sx) * parseFloat(to); 61 | var y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(' ') + 1)); 62 | var w = sx ? rect.width / sx : el.offsetWidth; 63 | var h = sy ? rect.height / sy : el.offsetHeight; 64 | return { 65 | x: x, y: y, width: w, height: h, top: y, right: x + w, bottom: y + h, left: x 66 | }; 67 | } else { 68 | return rect; 69 | } 70 | } 71 | 72 | export { 73 | preloadImages, 74 | calcWinsize, 75 | getScrollValues, 76 | wrapLines, 77 | adjustedBoundingRect 78 | }; --------------------------------------------------------------------------------