├── .gitattributes ├── LICENSE ├── README.md ├── dist ├── 1.80b98c5b.jpg ├── 10.09b8babf.jpg ├── 11.6bf710ad.jpg ├── 12.bd7243dc.jpg ├── 13.eaca2609.jpg ├── 14.8a0d313c.jpg ├── 15.9d1ab7d5.jpg ├── 16.3a8d5f7d.jpg ├── 17.5d19143b.jpg ├── 18.145b6e0b.jpg ├── 19.4e8371a2.jpg ├── 2.be0b6e97.jpg ├── 20.cb743775.jpg ├── 21.1ad7d602.jpg ├── 22.a626ef06.jpg ├── 23.b7fe1b36.jpg ├── 24.ab2f5762.jpg ├── 25.79ee1745.jpg ├── 26.6adb6995.jpg ├── 27.6a129e18.jpg ├── 28.837c8b23.jpg ├── 29.addcba68.jpg ├── 3.1667f2fd.jpg ├── 30.ce0018b2.jpg ├── 31.6c0db417.jpg ├── 32.e694f6c6.jpg ├── 33.9815d150.jpg ├── 34.549f6a00.jpg ├── 35.551511ad.jpg ├── 36.cbb35da2.jpg ├── 37.445fd800.jpg ├── 38.e74dfa80.jpg ├── 39.e50d4261.jpg ├── 4.a242a4db.jpg ├── 40.06dbb035.jpg ├── 41.002fd2bd.jpg ├── 42.9ec3502f.jpg ├── 5.cec98852.jpg ├── 6.63a71a70.jpg ├── 7.febd1f9e.jpg ├── 8.1ec50be9.jpg ├── 9.42343a9c.jpg ├── favicon.61719396.ico ├── index.320bd6f3.css ├── index.cad48f07.js ├── index.html └── noise.f31eb271.png ├── package.json └── src ├── .gitignore ├── 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 ├── 31.jpg ├── 32.jpg ├── 33.jpg ├── 34.jpg ├── 35.jpg ├── 36.jpg ├── 37.jpg ├── 38.jpg ├── 39.jpg ├── 4.jpg ├── 40.jpg ├── 41.jpg ├── 42.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg └── noise.png ├── index.html └── js ├── circle.js ├── index.js ├── menu.js ├── menuItem.js ├── mouseMoveController.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Menu Thumb Stack Animation 2 | 3 | An animation on a vertical image stack for a menu that expands to arrange the stack items on a horizontal line. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2021/09/StackAnimation.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=56500) 8 | 9 | [Demo](http://tympanus.net/Development/MenuThumbStackAnimation/) 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.80b98c5b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/1.80b98c5b.jpg -------------------------------------------------------------------------------- /dist/10.09b8babf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/10.09b8babf.jpg -------------------------------------------------------------------------------- /dist/11.6bf710ad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/11.6bf710ad.jpg -------------------------------------------------------------------------------- /dist/12.bd7243dc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/12.bd7243dc.jpg -------------------------------------------------------------------------------- /dist/13.eaca2609.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/13.eaca2609.jpg -------------------------------------------------------------------------------- /dist/14.8a0d313c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/14.8a0d313c.jpg -------------------------------------------------------------------------------- /dist/15.9d1ab7d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/15.9d1ab7d5.jpg -------------------------------------------------------------------------------- /dist/16.3a8d5f7d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/16.3a8d5f7d.jpg -------------------------------------------------------------------------------- /dist/17.5d19143b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/17.5d19143b.jpg -------------------------------------------------------------------------------- /dist/18.145b6e0b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/18.145b6e0b.jpg -------------------------------------------------------------------------------- /dist/19.4e8371a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/19.4e8371a2.jpg -------------------------------------------------------------------------------- /dist/2.be0b6e97.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/2.be0b6e97.jpg -------------------------------------------------------------------------------- /dist/20.cb743775.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/20.cb743775.jpg -------------------------------------------------------------------------------- /dist/21.1ad7d602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/21.1ad7d602.jpg -------------------------------------------------------------------------------- /dist/22.a626ef06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/22.a626ef06.jpg -------------------------------------------------------------------------------- /dist/23.b7fe1b36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/23.b7fe1b36.jpg -------------------------------------------------------------------------------- /dist/24.ab2f5762.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/24.ab2f5762.jpg -------------------------------------------------------------------------------- /dist/25.79ee1745.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/25.79ee1745.jpg -------------------------------------------------------------------------------- /dist/26.6adb6995.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/26.6adb6995.jpg -------------------------------------------------------------------------------- /dist/27.6a129e18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/27.6a129e18.jpg -------------------------------------------------------------------------------- /dist/28.837c8b23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/28.837c8b23.jpg -------------------------------------------------------------------------------- /dist/29.addcba68.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/29.addcba68.jpg -------------------------------------------------------------------------------- /dist/3.1667f2fd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/3.1667f2fd.jpg -------------------------------------------------------------------------------- /dist/30.ce0018b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/30.ce0018b2.jpg -------------------------------------------------------------------------------- /dist/31.6c0db417.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/31.6c0db417.jpg -------------------------------------------------------------------------------- /dist/32.e694f6c6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/32.e694f6c6.jpg -------------------------------------------------------------------------------- /dist/33.9815d150.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/33.9815d150.jpg -------------------------------------------------------------------------------- /dist/34.549f6a00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/34.549f6a00.jpg -------------------------------------------------------------------------------- /dist/35.551511ad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/35.551511ad.jpg -------------------------------------------------------------------------------- /dist/36.cbb35da2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/36.cbb35da2.jpg -------------------------------------------------------------------------------- /dist/37.445fd800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/37.445fd800.jpg -------------------------------------------------------------------------------- /dist/38.e74dfa80.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/38.e74dfa80.jpg -------------------------------------------------------------------------------- /dist/39.e50d4261.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/39.e50d4261.jpg -------------------------------------------------------------------------------- /dist/4.a242a4db.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/4.a242a4db.jpg -------------------------------------------------------------------------------- /dist/40.06dbb035.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/40.06dbb035.jpg -------------------------------------------------------------------------------- /dist/41.002fd2bd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/41.002fd2bd.jpg -------------------------------------------------------------------------------- /dist/42.9ec3502f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/42.9ec3502f.jpg -------------------------------------------------------------------------------- /dist/5.cec98852.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/5.cec98852.jpg -------------------------------------------------------------------------------- /dist/6.63a71a70.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/6.63a71a70.jpg -------------------------------------------------------------------------------- /dist/7.febd1f9e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/7.febd1f9e.jpg -------------------------------------------------------------------------------- /dist/8.1ec50be9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/8.1ec50be9.jpg -------------------------------------------------------------------------------- /dist/9.42343a9c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/9.42343a9c.jpg -------------------------------------------------------------------------------- /dist/favicon.61719396.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MenuThumbStackAnimation/ec3710749b170e4bf1e294918557d3ac21288463/dist/favicon.61719396.ico -------------------------------------------------------------------------------- /dist/index.320bd6f3.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:14px}body,html{width:100%;height:100%;overflow:hidden}body{margin:0;--color-text:#6d6d6d;--color-bg:#191818;--color-link:#c8bae4;--color-link-hover:#f4eae2;--color-menu:#e84e77;--color-menu-hover:#fff;--color-circle:#e84e77;--color-content:#fff;color:var(--color-text);background-color:var(--color-bg);font-family:roc-grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.splitting .whitespace{display:inline-block;white-space:pre}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading:after{top:50%;left:50%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;opacity:.4;border:2px solid var(--color-menu);animation:loaderAnim .7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{text-decoration:none;color:var(--color-link)}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a:focus{outline:none;background:#d3d3d3}a:focus-visible,a:focus:not(:focus-visible){background:transparent}a:focus-visible{outline:2px solid red}.unbutton{background:none;border:0;padding:0;margin:0;font:inherit}.unbutton:focus{outline:none}.hover-line{overflow:hidden;position:relative;display:inline-block}.hover-line:before{content:"";height:1px;width:100%;background:currentColor;position:absolute;top:94%;transition:transform .3s;transform-origin:0 50%}.hover-line:hover:before{transform:scaleX(0);transform-origin:100% 50%}main{display:grid;place-items:center;grid-auto-rows:100vh}main:before{animation:grain 8s steps(10) infinite;background-image:url(noise.f31eb271.png);content:"";height:300%;left:-50%;opacity:.6;position:fixed;top:-100%;width:300%}@keyframes grain{0%,to{transform:translate(0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}60%{transform:translate(15%)}70%{transform:translateY(15%)}80%{transform:translate(3%,35%)}90%{transform:translate(-10%,10%)}}.frame{padding:3rem 5vw;text-align:center;font-weight:500;text-transform:uppercase;position:fixed;z-index:100;top:0;left:0;width:100%}.frame__title{font-size:inherit;margin:0 0 1rem;font-weight:500}.frame__links a:not(:last-child){margin-right:1rem}.circle{fill:none;stroke:var(--color-circle);stroke-width:1px;will-change:transform,opacity;position:absolute;pointer-events:none;top:50%;left:50%;margin:-800px 0 0 -800px}.menu{grid-area:1/1/2/2;display:grid;place-items:center;position:relative}.menu__item{cursor:pointer;color:var(--color-menu);line-height:.9;text-transform:uppercase;font-size:7.5vw;font-weight:600;will-change:transform;pointer-events:none;transform:translateZ(0)}.menu--open .menu__item{pointer-events:auto}.menu__item--current,.menu__item:hover{color:var(--color-menu-hover)}.menu__item .char{will-change:transform,opacity}.menu__item:nth-child(2n){font-weight:300;font-style:italic;font-family:heimat-display-14,sans-serif}.menu__item:nth-child(2){margin-left:-10vw}.menu__item:nth-child(3){margin-left:-16vw}.menu__item:nth-child(4){margin-left:18vw}.menu__item:nth-child(5){margin-left:-10vw}.stack{position:absolute;top:0;left:0;width:100%;height:100vh;pointer-events:none;display:grid;place-items:center;align-content:center;justify-content:center;grid-gap:7vh;opacity:0}.stack__img{width:14.28571vw;will-change:transform}.content-wrap{grid-area:1/1/2/2;display:grid;place-items:center;width:100%;overflow:hidden}.js .content{opacity:0;pointer-events:none}.js .content--current{opacity:1;pointer-events:auto}.content{grid-area:1/1/2/2;display:grid;place-items:center;height:100vh}.content__title{color:var(--color-content);font-size:9vw;font-weight:600;text-transform:uppercase;white-space:nowrap;grid-area:1/1/2/2}.content:nth-child(2n) .content__title{font-weight:300;font-style:italic;font-family:heimat-display-14,sans-serif}.content__title .char{will-change:transform,opacity}.content__text{max-width:50ch;position:relative;align-self:end;margin:0 auto 3rem;font-size:1.25rem;grid-area:1/1/2/2;will-change:opacity,transform}.content__text:after{content:"";position:fixed;pointer-events:none;z-index:500;width:100%;height:100%;top:0;left:0;z-index:1;background:linear-gradient(transparent,transparent 70%,var(--color-bg))}.close{color:var(--color-menu);cursor:pointer;line-height:1;opacity:0;pointer-events:none;position:absolute;top:.65rem;font-weight:500;right:1rem;z-index:150;text-transform:uppercase}.close:focus,.close:hover{color:var(--color-menu-hover)}.content--current~.close{opacity:1;pointer-events:auto}.close__cross{font-size:120%;margin-right:.25rem}@media screen and (min-width:53em){.frame{text-align:left;display:grid;align-content:space-between;max-width:none;height:100vh;padding:.5rem 1rem;align-items:start;pointer-events:none;grid-template-columns:30% 40% 30%;grid-template-rows:auto auto auto;grid-template-areas:"title links ..." "... ... ..." "author ... sponsor"}.frame__title{margin:0;grid-area:title}.frame__links{grid-area:links;padding:0;justify-self:center}.frame__author{grid-area:author;align-self:end;justify-self:start}.frame a,.frame button{pointer-events:auto}}.splitting .char,.splitting .word{display:inline-block}.splitting .char{position:relative}.splitting .char:after,.splitting .char:before{content:attr(data-char);position:absolute;top:0;left:0;visibility:hidden;transition:inherit;user-select:none}.splitting{--word-center:calc(var(--word-total)/2 - 0.5);--char-center:calc(var(--char-total)/2 - 0.5);--line-center:calc(var(--line-total)/2 - 0.5)}.splitting .word{--word-percent:calc(var(--word-index)/var(--word-total));--line-percent:calc(var(--line-index)/var(--line-total))}.splitting .char{--char-percent:calc(var(--char-index)/var(--char-total));--char-offset:calc(var(--char-index) - var(--char-center));--distance:calc(var(--char-offset)*var(--char-offset)/var(--char-center));--distance-sine:calc(var(--char-offset)/var(--char-center));--distance-percent:calc(var(--distance)/var(--char-center))}.splitting.cells img{width:100%;display:block}@supports (display:grid){.splitting.cells{position:relative;overflow:hidden;background-size:cover;visibility:hidden}.splitting .cell-grid{background:inherit;position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(var(--row-total),1fr)/repeat(var(--col-total),1fr)}.splitting .cell{background:inherit;position:relative;overflow:hidden}.splitting .cell-inner{background:inherit;position:absolute;visibility:visible;width:calc(100%*var(--col-total));height:calc(100%*var(--row-total));left:calc(-100%*var(--col-index));top:calc(-100%*var(--row-index))}.splitting .cell{--center-x:calc(var(--col-total)/2 - 0.5);--center-y:calc(var(--row-total)/2 - 0.5);--offset-x:calc(var(--col-index) - var(--center-x));--offset-y:calc(var(--row-index) - var(--center-y));--distance-x:calc(var(--offset-x)*var(--offset-x)/var(--center-x));--distance-y:calc(var(--offset-y)*var(--offset-y)/var(--center-y))}} -------------------------------------------------------------------------------- /dist/index.cad48f07.js: -------------------------------------------------------------------------------- 1 | !function(){function t(t){return t&&t.__esModule?t.default:t}var e,i={},r=!1;function n(){var t,i;return r||(r=!0,e={},t="undefined"!=typeof window?window:e,i=function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},r=i[t]=i[t]||[];return-1==r.indexOf(e)&&r.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var r=i.indexOf(e);return-1!=r&&i.splice(r,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var r=this._onceEvents&&this._onceEvents[t],n=0;n(t-e)*(n-r)/(i-e)+r,a=(t,e,i)=>(1-i)*t+i*e,u=()=>({width:window.innerWidth,height:window.innerHeight});function h(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function l(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 7 | /*! 8 | * GSAP 3.7.1 9 | * https://greensock.com 10 | * 11 | * @license Copyright 2008-2021, GreenSock. All rights reserved. 12 | * Subject to the terms at https://greensock.com/standard-license or for 13 | * Club GreenSock members, the agreement issued with that membership. 14 | * @author: Jack Doyle, jack@greensock.com 15 | */var c,f,p,d,m,_,g,v,y,w,M,x,T,b,O,D,k,C,A,I,S,E,P,L,z,R,F,B,q={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},N={duration:.5,overwrite:!1,delay:0},j=1e8,V=1e-8,Y=2*Math.PI,U=Y/4,X=0,W=Math.sqrt,H=Math.cos,Q=Math.sin,G=function(t){return"string"==typeof t},$=function(t){return"function"==typeof t},Z=function(t){return"number"==typeof t},J=function(t){return void 0===t},K=function(t){return"object"==typeof t},tt=function(t){return!1!==t},et=function(){return"undefined"!=typeof window},it=function(t){return $(t)||G(t)},rt="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},nt=Array.isArray,st=/(?:-?\.?\d|\.)+/gi,ot=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,at=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,ut=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,ht=/[+-]=-?[.\d]+/,lt=/[^,'"\[\]\s]+/gi,ct=/[\d.+\-=]+(?:e[-+]\d*)*/i,ft={},pt={},dt=function(t){return(pt=qt(t,ft))&&Oi},mt=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},_t=function(t,e){return!e&&console.warn(t)},gt=function(t,e){return t&&(ft[t]=e)&&pt&&(pt[t]=e)||ft},vt=function(){return 0},yt={},wt=[],Mt={},xt={},Tt={},bt=30,Ot=[],Dt="",kt=function(t){var e,i,r=t[0];if(K(r)||$(r)||(t=[t]),!(e=(r._gsap||{}).harness)){for(i=Ot.length;i--&&!Ot[i].targetTest(r););e=Ot[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new $e(t[i],e)))||t.splice(i,1);return t},Ct=function(t){return t._gsap||kt(me(t))[0]._gsap},At=function(t,e,i){return(i=t[e])&&$(i)?t[e]():J(i)&&t.getAttribute&&t.getAttribute(e)||i},It=function(t,e){return(t=t.split(",")).forEach(e)||t},St=function(t){return Math.round(1e5*t)/1e5||0},Et=function(t,e){for(var i=e.length,r=0;t.indexOf(e[r])<0&&++rt._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},Wt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Ht=function t(e){return!e||e._ts&&t(e.parent)},Qt=function(t){return t._repeat?Gt(t._tTime,t=t.duration()+t._rDelay)*t:0},Gt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},$t=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Zt=function(t){return t._end=St(t._start+(t._tDur/Math.abs(t._ts||t._rts||V)||0))},Jt=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=St(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Zt(t),i._dirty||Xt(i,t)),t},Kt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=$t(t.rawTime(),e),(!e._dur||ce(0,e.totalDuration(),i)-e._tTime>V)&&e.render(i,!0)),Xt(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}},te=function(t,e,i,r){return e.parent&&Ut(e),e._start=St((Z(i)?i:i||t!==f?ue(t,i,e):t._time)+e._delay),e._end=St(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function(t,e,i,r,n){void 0===i&&(i="_first"),void 0===r&&(r="_last");var s,o=t[r];if(n)for(s=e[n];o&&o[n]>s;)o=o._prev;o?(e._next=o._next,o._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[r]=e,e._prev=o,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),ne(e)||(t._recent=e),r||Kt(t,e),t},ee=function(t,e){return(ft.ScrollTrigger||mt("scrollTrigger",e))&&ft.ScrollTrigger.create(e,t)},ie=function(t,e,i,r){return ri(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&g!==Fe.frame?(wt.push(t),t._lazy=[e,r],1):void 0:1},re=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},ne=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},se=function(t,e,i,r){var n=t._repeat,s=St(e)||0,o=t._tTime/t._tDur;return o&&!r&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:St(s*(n+1)+t._rDelay*n):s,o&&!r?Jt(t,t._tTime=t._tDur*o):t.parent&&Zt(t),i||Xt(t.parent,t),t},oe=function(t){return t instanceof Je?Xt(t):se(t,t._dur)},ae={_start:0,endTime:vt,totalDuration:vt},ue=function t(e,i,r){var n,s,o,a=e.labels,u=e._recent||ae,h=e.duration()>=j?u.endTime(!1):e._dur;return G(i)&&(isNaN(i)||i in a)?(s=i.charAt(0),o="%"===i.substr(-1),n=i.indexOf("="),"<"===s||">"===s?(n>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(o?(n<0?u:r).totalDuration()/100:1)):n<0?(i in a||(a[i]=h),a[i]):(s=parseFloat(i.charAt(n-1)+i.substr(n+1)),o&&r&&(s=s/100*(nt(r)?r[0]:r).totalDuration()),n>1?t(e,i.substr(0,n-1),r)+s:h+s)):null==i?h:+i},he=function(t,e,i){var r,n,s=Z(e[1]),o=(s?2:1)+(t<2?0:1),a=e[o];if(s&&(a.duration=e[1]),a.parent=i,t){for(r=a,n=i;n&&!("immediateRender"in r);)r=n.vars.defaults||{},n=tt(n.vars.inherit)&&n.parent;a.immediateRender=tt(r.immediateRender),t<2?a.runBackwards=1:a.startAt=e[o-1]}return new ai(e[0],a,e[o+1])},le=function(t,e){return t||0===t?e(t):e},ce=function(t,e,i){return ie?e:i},fe=function(t){if("string"!=typeof t)return"";var e=ct.exec(t);return e?t.substr(e.index+e[0].length):""},pe=[].slice,de=function(t,e){return t&&K(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&K(t[0]))&&!t.nodeType&&t!==p},me=function(t,e,i){return!G(t)||i||!d&&Be()?nt(t)?function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var r;return G(t)&&!e||de(t,1)?(r=i).push.apply(r,me(t)):i.push(t)}))||i}(t,i):de(t)?pe.call(t,0):t?[t]:[]:pe.call((e||m).querySelectorAll(t),0)},_e=function(t){return t.sort((function(){return.5-Math.random()}))},ge=function(t){if($(t))return t;var e=K(t)?t:{each:t},i=Xe(e.ease),r=e.from||0,n=parseFloat(e.base)||0,s={},o=r>0&&r<1,a=isNaN(r)||o,u=e.axis,h=r,l=r;return G(r)?h=l={center:.5,edges:.5,end:1}[r]||0:!o&&a&&(h=r[0],l=r[1]),function(t,o,c){var f,p,d,m,_,g,v,y,w,M=(c||e).length,x=s[M];if(!x){if(!(w="auto"===e.grid?0:(e.grid||[1,j])[1])){for(v=-1e8;v<(v=c[w++].getBoundingClientRect().left)&&wv&&(v=_),_M?M-1:u?"y"===u?M/w:w:Math.max(w,M/w))||0)*("edges"===r?-1:1),x.b=M<0?n-M:n,x.u=fe(e.amount||e.each)||0,i=i&&M<0?Ye(i):i}return M=(x[t]-x.min)/x.max||0,St(x.b+(i?i(M):M)*x.v)+x.u}},ve=function(t){var e=t<1?Math.pow(10,(t+"").length-2):1;return function(i){var r=Math.round(parseFloat(i)/t)*t*e;return(r-r%1)/e+(Z(i)?0:fe(i))}},ye=function(t,e){var i,r,n=nt(t);return!n&&K(t)&&(i=n=t.radius||j,t.values?(t=me(t.values),(r=!Z(t[0]))&&(i*=i)):t=ve(t.increment)),le(e,n?$(t)?function(e){return r=t(e),Math.abs(r-e)<=i?r:e}:function(e){for(var n,s,o=parseFloat(r?e.x:e),a=parseFloat(r?e.y:0),u=j,h=0,l=t.length;l--;)(n=r?(n=t[l].x-o)*n+(s=t[l].y-a)*s:Math.abs(t[l]-o))(n=Math.abs(n))&&(s=r,a=n);return s},Oe=function(t,e,i){var r,n,s=t.vars,o=s[e];if(o)return r=s[e+"Params"],n=s.callbackScope||t,i&&wt.length&&Pt(),r?o.apply(n,r):o.call(n)},De=function(t){return Ut(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Oe(t,"onInterrupt"),t},ke=function(t){var e=(t=!t.name&&t.default||t).name,i=$(t),r=e&&!i&&t.init?function(){this._props=[]}:t,n={init:vt,render:_i,add:ei,kill:vi,modifier:gi,rawVars:0},s={targetTest:0,get:0,getSetter:fi,aliases:{},register:0};if(Be(),t!==r){if(xt[e])return;Ft(r,Ft(jt(t,n),s)),qt(r.prototype,qt(n,jt(t,s))),xt[r.prop=e]=r,t.targetTest&&(Ot.push(r),yt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}gt(e,r),t.register&&t.register(Oi,r,Mi)},Ce=255,Ae={aqua:[0,Ce,Ce],lime:[0,Ce,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Ce],navy:[0,0,128],white:[Ce,Ce,Ce],olive:[128,128,0],yellow:[Ce,Ce,0],orange:[Ce,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Ce,0,0],pink:[Ce,192,203],cyan:[0,Ce,Ce],transparent:[Ce,Ce,Ce,0]},Ie=function(t,e,i){return(6*(t=t<0?t+1:t>1?t-1:t)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)*Ce+.5|0},Se=function(t,e,i){var r,n,s,o,a,u,h,l,c,f,p=t?Z(t)?[t>>16,t>>8&Ce,t&Ce]:0:Ae.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Ae[t])p=Ae[t];else if("#"===t.charAt(0)){if(t.length<6&&(r=t.charAt(1),n=t.charAt(2),s=t.charAt(3),t="#"+r+r+n+n+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&Ce,p&Ce,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Ce,t&Ce]}else if("hsl"===t.substr(0,3))if(p=f=t.match(st),e){if(~t.indexOf("="))return p=t.match(ot),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,a=+p[1]/100,r=2*(u=+p[2]/100)-(n=u<=.5?u*(a+1):u+a-u*a),p.length>3&&(p[3]*=1),p[0]=Ie(o+1/3,r,n),p[1]=Ie(o,r,n),p[2]=Ie(o-1/3,r,n);else p=t.match(st)||Ae.transparent;p=p.map(Number)}return e&&!f&&(r=p[0]/Ce,n=p[1]/Ce,s=p[2]/Ce,u=((h=Math.max(r,n,s))+(l=Math.min(r,n,s)))/2,h===l?o=a=0:(c=h-l,a=u>.5?c/(2-h-l):c/(h+l),o=h===r?(n-s)/c+(nk&&(A+=o-C),((i=(n=(I+=o)-A)-E)>0||a)&&(s=++T.frame,b=n-1e3*T.time,T.time=n/=1e3,E+=i+(i>=S?4:S-i),r=1),a||(w=M(t)),r)for(O=0;O=e&&O--},_listeners:P=[]}),Be=function(){return!y&&Fe.wake()},qe={},Ne=/^[\d.\-M][\d.\-,\s]/,je=/["']/g,Ve=function(t){for(var e,i,r,n={},s=t.substr(1,t.length-3).split(":"),o=s[0],a=1,u=s.length;a1&&o.config?o.config.apply(null,~t.indexOf("{")?[Ve(s[1])]:(e=t,i=e.indexOf("(")+1,r=e.indexOf(")"),n=e.indexOf("(",i),e.substring(i,~n&&n=1?i:1,s=(r||(e?.3:.45))/(i<1?i:1),o=s/Y*(Math.asin(1/n)||0),a=function(t){return 1===t?1:n*Math.pow(2,-10*t)*Q((t-o)*s)+1},u="out"===e?a:"in"===e?function(t){return 1-a(1-t)}:He(a);return s=Y/s,u.config=function(i,r){return t(e,i,r)},u},Ge=function t(e,i){void 0===i&&(i=1.70158);var r=function(t){return t?--t*t*((i+1)*t+i)+1:0},n="out"===e?r:"in"===e?function(t){return 1-r(1-t)}:He(r);return n.config=function(i){return t(e,i)},n};It("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;We(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}))})),qe.Linear.easeNone=qe.none=qe.Linear.easeIn,We("Elastic",Qe("in"),Qe("out"),Qe()),z=7.5625,F=1/(R=2.75),We("Bounce",(function(t){return 1-B(1-t)}),B=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,se(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Be(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(Jt(this,t),!i._dp||i.parent||Kt(i,this);i.parent;)i.parent._time!==i._start+(i._ts>=0?i._tTime/i._ts:(i.totalDuration()-i._tTime)/-i._ts)&&i.totalTime(i._tTime,!0),i=i.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&te(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===V||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Lt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Qt(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)+Qt(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?Gt(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?$t(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,Wt(this.totalTime(ce(-this._delay,this._tDur,e),!0))},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Be(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==V&&(this._tTime-=V)))),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)&&te(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(tt(t)?this.totalDuration():this.duration())/Math.abs(this._ts)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?$t(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,oe(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,oe(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(ue(this,t),tt(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,tt(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(r[t]=e,i&&(r[t+"Params"]=i),"onUpdate"===t&&(this._onUpdate=e)):delete r[t],this):r[t]},e.then=function(t){var e=this;return new Promise((function(i){var r=$(t)?t:Rt,n=function(){var t=e.then;e.then=null,$(r)&&(r=r(e))&&(r.then||r===e)&&(e.then=t),i(r),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?n():e._prom=n}))},e.kill=function(){De(this)},t}();Ft(Ze.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 Je=function(t){function e(e,i){var r;return void 0===e&&(e={}),(r=t.call(this,e)||this).labels={},r.smoothChildTiming=!!e.smoothChildTiming,r.autoRemoveChildren=!!e.autoRemoveChildren,r._sort=tt(e.sortChildren),f&&te(e.parent||f,h(r),i),e.reversed&&r.reverse(),e.paused&&r.paused(!0),e.scrollTrigger&&ee(h(r),e.scrollTrigger),r}l(e,t);var i=e.prototype;return i.to=function(t,e,i){return he(0,arguments,this),this},i.from=function(t,e,i){return he(1,arguments,this),this},i.fromTo=function(t,e,i,r){return he(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,Vt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ai(t,e,ue(this,i),1),this},i.call=function(t,e,i){return te(this,ai.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,r,n,s,o){return i.duration=e,i.stagger=i.stagger||r,i.onComplete=s,i.onCompleteParams=o,i.parent=this,new ai(t,i,ue(this,n)),this},i.staggerFrom=function(t,e,i,r,n,s,o){return i.runBackwards=1,Vt(i).immediateRender=tt(i.immediateRender),this.staggerTo(t,e,i,r,n,s,o)},i.staggerFromTo=function(t,e,i,r,n,s,o,a){return r.startAt=i,Vt(r).immediateRender=tt(r.immediateRender),this.staggerTo(t,e,r,n,s,o,a)},i.render=function(t,e,i){var r,n,s,o,a,u,h,l,c,p,d,m,_=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=this!==f&&t>g-V&&t>=0?g:tv&&(r=v)),p=Gt(this._tTime,a),!_&&this._tTime&&p!==o&&(p=o),d&&1&o&&(r=v-r,m=1),o!==p&&!this._lock){var M=d&&1&p,x=M===(d&&1&o);if(oe)for(r=t._first;r&&r._start<=i;){if(!r._dur&&"isPause"===r.data&&r._start>e)return r;r=r._next}else for(r=t._last;r&&r._start>=i;){if(!r._dur&&"isPause"===r.data&&r._start=_&&t>=0)for(n=this._first;n;){if(s=n._next,(n._act||r>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(r-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(r-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=-1e-8);break}}n=s}else{n=this._last;for(var T=t<0?t:r;n;){if(s=n._prev,(n._act||T<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(T-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(T-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=T?-1e-8:V);break}}n=s}}if(h&&!e&&(this.pause(),h.render(r>=_?0:-1e-8)._zTime=r>=_?1:-1,this._ts))return this._start=c,Zt(this),this.render(t,e,i);this._onUpdate&&!e&&Oe(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&_)&&(c!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Ut(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(Z(e)||(e=ue(this,e,t)),!(t instanceof Ze)){if(nt(t))return t.forEach((function(t){return i.add(t,e)})),this;if(G(t))return this.addLabel(t,e);if(!$(t))return this;t=ai.delayedCall(0,t)}return this!==t?te(this,t,e):this},i.getChildren=function(t,e,i,r){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===r&&(r=-1e8);for(var n=[],s=this._first;s;)s._start>=r&&(s instanceof ai?e&&n.push(s):(i&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,i)))),s=s._next;return n},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return G(t)?this.removeLabel(t):$(t)?this.killTweensOf(t):(Yt(this,t),t===this._recent&&(this._recent=this._last),Xt(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=St(Fe.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]=ue(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var r=ai.delayedCall(0,e||vt,i);return r.data="isPause",this._hasPause=1,te(this,r,ue(this,t))},i.removePause=function(t){var e=this._first;for(t=ue(this,t);e;)e._start===t&&"isPause"===e.data&&Ut(e),e=e._next},i.killTweensOf=function(t,e,i){for(var r=this.getTweensOf(t,i),n=r.length;n--;)Ke!==r[n]&&r[n].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,r=[],n=me(t),s=this._first,o=Z(e);s;)s instanceof ai?Et(s._targets,n)&&(o?(!Ke||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&r.push(s):(i=s.getTweensOf(n,e)).length&&r.push.apply(r,i),s=s._next;return r},i.tweenTo=function(t,e){e=e||{};var i,r=this,n=ue(r,t),s=e,o=s.startAt,a=s.onStart,u=s.onStartParams,h=s.immediateRender,l=ai.to(r,Ft({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(o&&"time"in o?o.time:r._time))/r.timeScale())||V,onStart:function(){if(r.pause(),!i){var t=e.duration||Math.abs((n-(o&&"time"in o?o.time:r._time))/r.timeScale());l._dur!==t&&se(l,t,0,1).render(l._time,!0,!0),i=1}a&&a.apply(l,u||[])}},e));return h?l.render(0):l},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,Ft({startAt:{time:ue(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),be(this,ue(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),be(this,ue(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+V)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var r,n=this._first,s=this.labels;n;)n._start>=i&&(n._start+=t,n._end+=t),n=n._next;if(e)for(r in s)s[r]>=i&&(s[r]+=t);return Xt(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={}),Xt(this)},i.totalDuration=function(t){var e,i,r,n=0,s=this,o=s._last,a=j;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(r=s.parent;o;)e=o._prev,o._dirty&&o.totalDuration(),(i=o._start)>a&&s._sort&&o._ts&&!s._lock?(s._lock=1,te(s,o,i-o._delay,1)._lock=0):a=i,i<0&&o._ts&&(n-=i,(!r&&!s._dp||r&&r.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-Infinity),a=0),o._end>n&&o._ts&&(n=o._end),o=e;se(s,s===f&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(f._ts&&(Lt(f,$t(t,f)),g=Fe.frame),Fe.frame>=bt){bt+=q.autoSleep||120;var e=f._first;if((!e||!e._ts)&&q.autoSleep&&Fe._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Fe.sleep()}}},e}(Ze);Ft(Je.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ke,ti=function(t,e,i,r,n,s,o){var a,u,h,l,c,f,p,d,m=new Mi(this._pt,t,e,0,1,mi,null,n),_=0,g=0;for(m.b=i,m.e=r,i+="",(p=~(r+="").indexOf("random("))&&(r=xe(r)),s&&(s(d=[i,r],t,e),i=d[0],r=d[1]),u=i.match(ut)||[];a=ut.exec(r);)l=a[0],c=r.substring(_,a.index),h?h=(h+1)%5:"rgba("===c.substr(-5)&&(h=1),l!==u[g++]&&(f=parseFloat(u[g-1])||0,m._pt={_next:m._pt,p:c||1===g?c:",",s:f,c:"="===l.charAt(1)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-f,m:h&&h<4?Math.round:0},_=ut.lastIndex);return m.c=_0&&!A&&(e._startAt=0),I&&i<=0)return void(i&&(e._zTime=i))}else!1===A&&(e._startAt=0);else if(D&&I)if(S)!A&&(e._startAt=0);else if(i&&(M=!1),s=Ft({overwrite:!1,data:"isFromStart",lazy:M&&tt(x),immediateRender:M,stagger:0,parent:P},r),_&&(s[l.prop]=_),Ut(e._startAt=ai.set(E,s)),i<0&&e._startAt.render(-1,!0),M){if(!i)return}else t(e._startAt,V);for(e._pt=0,x=I&&tt(x)||x&&!I,n=0;n":e*M)}))})):T.forEach((function(t){return o.to(C,t,">")}));else{if(l=C.length,m=M?ge(M):vt,K(M))for(p in M)~si.indexOf(p)&&(_||(_={}),_[p]=M[p]);for(a=0;ap-V&&t>=0?p:td&&(r=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,r=d-r),a=Gt(this._tTime,o),r===f&&!i&&this._initted)return this;s!==a&&(l&&this._yEase&&Ue(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(St(o*s),!0).invalidate()._lock=0))}if(!this._initted){if(ie(this,t<0?t:r,i,e))return this._tTime=0,this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=m,this._time=r,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(c||this._ease)(r/d),this._from&&(this.ratio=h=1-h),r&&!f&&!e&&(Oe(this,"onStart"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:!r&&u?-1e-8:l._dur*h,e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),Oe(this,"onUpdate")),this._repeat&&s!==a&&this.vars.onRepeat&&!e&&this.parent&&Oe(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(m===this._tDur&&this._ts>0||!m&&this._ts<0)&&Ut(this,1),e||t<0&&!f||!m&&!f||(Oe(this,m===p?"onComplete":"onReverseComplete",!0),this._prom&&!(m0)&&this._prom()))}}else!function(t,e,i,r){var n,s,o,a=t.ratio,u=e<0||!e&&(!t._start&&re(t)&&(t._initted||!ne(t))||(t._ts<0||t._dp._ts<0)&&!ne(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=ce(0,t._tDur,e),s=Gt(l,h),o=Gt(t._tTime,h),t._yoyo&&1&s&&(u=1-u),s!==o&&(a=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==a||r||t._zTime===V||!e&&t._zTime){if(!t._initted&&ie(t,e,r,i))return;for(o=t._zTime,t._zTime=e||(i?V:0),i||(i=e&&!o),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&Oe(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&Oe(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ut(t,1),i||(Oe(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,i);return this},i.targets=function(){return this._targets},i.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},i.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?De(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ke&&!0!==Ke.vars.overwrite)._first||De(this),this.parent&&i!==this.timeline.totalDuration()&&se(this,this._dur*this.timeline._tDur/i,0,1),this}var r,n,s,o,a,u,h,l=this._targets,c=t?me(t):l,f=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,r=i===e.length;r&&i--&&t[i]===e[i];);return i<0}(l,c))return"all"===e&&(this._pt=0),De(this);for(r=this._op=this._op||[],"all"!==e&&(G(e)&&(a={},It(e,(function(t){return a[t]=1})),e=a),e=function(t,e){var i,r,n,s,o=t[0]?Ct(t[0]).harness:0,a=o&&o.aliases;if(!a)return e;for(r in i=qt({},e),a)if(r in i)for(n=(s=a[r].split(",")).length;n--;)i[s[n]]=i[r];return i}(l,e)),h=l.length;h--;)if(~c.indexOf(l[h]))for(a in n=f[h],"all"===e?(r[h]=e,o=n,s={}):(s=r[h]=r[h]||{},o=e),o)(u=n&&n[a])&&("kill"in u.d&&!0!==u.d.kill(a)||Yt(this,u,"_pt"),delete n[a]),"all"!==s&&(s[a]=1);return this._initted&&!this._pt&&p&&De(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return he(1,arguments)},e.delayedCall=function(t,i,r,n){return new e(i,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:i,onReverseComplete:i,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:n})},e.fromTo=function(t,e,i){return he(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 f.killTweensOf(t,e,i)},e}(Ze);Ft(ai.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),It("staggerTo,staggerFrom,staggerFromTo",(function(t){ai[t]=function(){var e=new Je,i=pe.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var ui=function(t,e,i){return t[e]=i},hi=function(t,e,i){return t[e](i)},li=function(t,e,i,r){return t[e](r.fp,i)},ci=function(t,e,i){return t.setAttribute(e,i)},fi=function(t,e){return $(t[e])?hi:J(t[e])&&t.setAttribute?ci:ui},pi=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},di=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},mi=function(t,e){var i=e._pt,r="";if(!t&&e.b)r=e.b;else if(1===t&&e.e)r=e.e;else{for(;i;)r=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+r,i=i._next;r+=e.c}e.set(e.t,e.p,r,e)},_i=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},gi=function(t,e,i,r){for(var n,s=this._pt;s;)n=s._next,s.p===r&&s.modifier(t,e,i),s=n},vi=function(t){for(var e,i,r=this._pt;r;)i=r._next,r.p===t&&!r.op||r.op===t?Yt(this,r,"_pt"):r.dep||(e=1),r=i;return!e},yi=function(t,e,i,r){r.mSet(t,e,r.m.call(r.tween,i,r.mt),r)},wi=function(t){for(var e,i,r,n,s=t._pt;s;){for(e=s._next,i=r;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:n)?s._prev._next=s:r=s,(s._next=i)?i._prev=s:n=s,s=e}t._pt=r},Mi=function(){function t(t,e,i,r,n,s,o,a,u){this.t=e,this.s=r,this.c=n,this.p=i,this.r=s||pi,this.d=o||this,this.set=a||ui,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,i){this.mSet=this.mSet||this.set,this.set=yi,this.m=t,this.mt=i,this.tween=e},t}();It(Dt+"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 yt[t]=1})),ft.TweenMax=ft.TweenLite=ai,ft.TimelineLite=ft.TimelineMax=Je,f=new Je({sortChildren:!1,defaults:N,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),q.stringFilter=Re;var xi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var r=t.map((function(t){return Oi.quickSetter(t,e,i)})),n=r.length;return function(t){for(var e=n;e--;)r[e](t)}}t=t[0]||{};var s=xt[e],o=Ct(t),a=o.harness&&(o.harness.aliases||{})[e]||e,u=s?function(e){var r=new s;v._pt=0,r.init(t,i?e+i:e,v,0,[t]),r.render(1,r),v._pt&&_i(1,v)}:o.set(t,a);return s?u:function(e){return u(t,a,i?e+i:e,o,1)}},isTweening:function(t){return f.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Xe(t.ease,N.ease)),Nt(N,t||{})},config:function(t){return Nt(q,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,r=t.plugins,n=t.defaults,s=t.extendTimeline;(r||"").split(",").forEach((function(t){return t&&!xt[t]&&!ft[t]&&_t(e+" effect requires "+t+" plugin.")})),Tt[e]=function(t,e,r){return i(me(t),Ft(e||{},n),r)},s&&(Je.prototype[e]=function(t,i,r){return this.add(Tt[e](t,K(i)?i:(r=i)&&{},this),r)})},registerEase:function(t,e){qe[t]=Xe(e)},parseEase:function(t,e){return arguments.length?Xe(t,e):qe},getById:function(t){return f.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,r,n=new Je(t);for(n.smoothChildTiming=tt(t.smoothChildTiming),f.remove(n),n._dp=0,n._time=n._tTime=f._time,i=f._first;i;)r=i._next,!e&&!i._dur&&i instanceof ai&&i.vars.onComplete===i._targets[0]||te(n,i,i._start-i._delay),i=r;return te(f,n,0),n},utils:{wrap:function t(e,i,r){var n=i-e;return nt(e)?Me(e,t(0,e.length),i):le(r,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,i,r){var n=i-e,s=2*n;return nt(e)?Me(e,t(0,e.length-1),i):le(r,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:ge,random:we,snap:ye,normalize:function(t,e,i){return Te(t,e,0,1,i)},getUnit:fe,clamp:function(t,e,i){return le(i,(function(i){return ce(t,e,i)}))},splitColor:Se,toArray:me,selector:function(t){return t=me(t)[0]||_t("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return me(e,i.querySelectorAll?i:i===t?_t("Invalid scope")||m.createElement("div"):t)}},mapRange:Te,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?rr[n]:"")+t},sr=function(){"undefined"!=typeof window&&window.document&&(Di=window,ki=Di.document,Ci=ki.documentElement,Ii=er("div")||{style:{}},er("div"),Ki=nr(Ki),tr=Ki+"Origin",Ii.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ei=!!nr("perspective"),Ai=1)},or=function t(e){var i,r=er("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,o=this.style.cssText;if(Ci.appendChild(r),r.appendChild(this),this.style.display="block",e)try{i=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(i=this._gsapBBox());return n&&(s?n.insertBefore(this,s):n.appendChild(this)),Ci.removeChild(r),this.style.cssText=o,i},ar=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},ur=function(t){var e;try{e=t.getBBox()}catch(i){e=or.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===or||(e=or.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+ar(t,["x","cx","x1"])||0,y:+ar(t,["y","cy","y1"])||0,width:0,height:0}},hr=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!ur(t))},lr=function(t,e){if(e){var i=t.style;e in Pi&&e!==tr&&(e=Ki),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Fi,"-$1").toLowerCase())):i.removeAttribute(e)}},cr=function(t,e,i,r,n,s){var o=new Mi(t._pt,e,i,0,1,s?Wi:Xi);return t._pt=o,o.b=r,o.e=n,t._props.push(i),o},fr={deg:1,rad:1,turn:1},pr=function t(e,i,r,n){var s,o,a,u,h=parseFloat(r)||0,l=(r+"").trim().substr((h+"").length)||"px",c=Ii.style,f=Bi.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),m=100,_="px"===n,g="%"===n;return n===l||!h||fr[n]||fr[l]?h:("px"!==l&&!_&&(h=t(e,i,r,"px")),u=e.getCTM&&hr(e),!g&&"%"!==l||!Pi[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=m+(_?l:n),o=~i.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(o=(e.ownerSVGElement||{}).parentNode),o&&o!==ki&&o.appendChild||(o=ki.body),(a=o._gsap)&&g&&a.width&&f&&a.time===Fe.time?St(h/a.width*m):((g||"%"===l)&&(c.position=ir(e,"position")),o===e&&(c.position="static"),o.appendChild(Ii),s=Ii[d],o.removeChild(Ii),c.position="absolute",f&&g&&((a=Ct(o)).time=Fe.time,a.width=o[d]),St(_?s*h/m:s&&h?m/s*h:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],St(g?h/s*m:h/100*s)))},dr=function(t,e,i,r){var n;return Ai||sr(),e in Ni&&"transform"!==e&&~(e=Ni[e]).indexOf(",")&&(e=e.split(",")[0]),Pi[e]&&"transform"!==e?(n=Or(t,r),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Dr(ir(t,tr))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||r||~(n+"").indexOf("calc("))&&(n=vr[e]&&vr[e](t,e,i)||ir(t,e)||At(t,e)||("opacity"===e?1:0)),i&&!~(n+"").trim().indexOf(" ")?pr(t,e,n,i)+i:n},mr=function(t,e,i,r){if(!i||"none"===i){var n=nr(e,t,1),s=n&&ir(t,n,1);s&&s!==i?(e=n,i=s):"borderColor"===e&&(i=ir(t,"borderTopColor"))}var o,a,u,h,l,c,f,p,d,m,_,g,v=new Mi(this._pt,t.style,e,0,1,mi),y=0,w=0;if(v.b=i,v.e=r,i+="","auto"===(r+="")&&(t.style[e]=r,r=ir(t,e)||r,t.style[e]=i),Re(o=[i,r]),r=o[1],u=(i=o[0]).match(at)||[],(r.match(at)||[]).length){for(;a=at.exec(r);)f=a[0],d=r.substring(y,a.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),f!==(c=u[w++]||"")&&(h=parseFloat(c)||0,_=c.substr((h+"").length),(g="="===f.charAt(1)?+(f.charAt(0)+"1"):0)&&(f=f.substr(2)),p=parseFloat(f),m=f.substr((p+"").length),y=at.lastIndex-m.length,m||(m=m||q.units[e]||_,y===r.length&&(r+=m,v.e+=m)),_!==m&&(h=pr(t,e,c,m)||0),v._pt={_next:v._pt,p:d||1===w?d:",",s:h,c:g?g*p:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});v.c=y-1;)i=a[n],Pi[i]&&(r=1,i="transformOrigin"===i?tr:Ki),lr(s,i);r&&(lr(s,Ki),u&&(u.svg&&s.removeAttribute("transform"),Or(s,1),u.uncache=1))}},vr={clearProps:function(t,e,i,r,n){if("isFromStart"!==n.data){var s=t._pt=new Mi(t._pt,e,i,0,0,gr);return s.u=r,s.pr=-10,s.tween=n,t._props.push(i),1}}},yr=[1,0,0,1,0,0],wr={},Mr=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},xr=function(t){var e=ir(t,Ki);return Mr(e)?yr:e.substr(7).match(ot).map(St)},Tr=function(t,e){var i,r,n,s,o=t._gsap||Ct(t),a=t.style,u=xr(t);return o.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?yr:u:(u!==yr||t.offsetParent||t===Ci||o.svg||(n=a.display,a.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,r=t.nextSibling,Ci.appendChild(t)),u=xr(t),n?a.display=n:lr(t,"display"),s&&(r?i.insertBefore(t,r):i?i.appendChild(t):Ci.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},br=function(t,e,i,r,n,s){var o,a,u,h=t._gsap,l=n||Tr(t,!0),c=h.xOrigin||0,f=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,m=l[0],_=l[1],g=l[2],v=l[3],y=l[4],w=l[5],M=e.split(" "),x=parseFloat(M[0])||0,T=parseFloat(M[1])||0;i?l!==yr&&(a=m*v-_*g)&&(u=x*(-_/a)+T*(m/a)-(m*w-_*y)/a,x=x*(v/a)+T*(-g/a)+(g*w-v*y)/a,T=u):(x=(o=ur(t)).x+(~M[0].indexOf("%")?x/100*o.width:x),T=o.y+(~(M[1]||M[0]).indexOf("%")?T/100*o.height:T)),r||!1!==r&&h.smooth?(y=x-c,w=T-f,h.xOffset=p+(y*m+w*g)-y,h.yOffset=d+(y*_+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=x,h.yOrigin=T,h.smooth=!!r,h.origin=e,h.originIsAbsolute=!!i,t.style[tr]="0px 0px",s&&(cr(s,h,"xOrigin",c,x),cr(s,h,"yOrigin",f,T),cr(s,h,"xOffset",p,h.xOffset),cr(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",x+" "+T)},Or=function(t,e){var i=t._gsap||new $e(t);if("x"in i&&!e&&!i.uncache)return i;var r,n,s,o,a,u,h,l,c,f,p,d,m,_,g,v,y,w,M,x,T,b,O,D,k,C,A,I,S,E,P,L,z=t.style,R=i.scaleX<0,F="px",B="deg",N=ir(t,tr)||"0";return r=n=s=u=h=l=c=f=p=0,o=a=1,i.svg=!(!t.getCTM||!hr(t)),_=Tr(t,i.svg),i.svg&&(D=(!i.uncache||"0px 0px"===N)&&!e&&t.getAttribute("data-svg-origin"),br(t,D||N,!!D||i.originIsAbsolute,!1!==i.smooth,_)),d=i.xOrigin||0,m=i.yOrigin||0,_!==yr&&(w=_[0],M=_[1],x=_[2],T=_[3],r=b=_[4],n=O=_[5],6===_.length?(o=Math.sqrt(w*w+M*M),a=Math.sqrt(T*T+x*x),u=w||M?Ri(M,w)*Li:0,(c=x||T?Ri(x,T)*Li+u:0)&&(a*=Math.abs(Math.cos(c*zi))),i.svg&&(r-=d-(d*w+m*x),n-=m-(d*M+m*T))):(L=_[6],E=_[7],A=_[8],I=_[9],S=_[10],P=_[11],r=_[12],n=_[13],s=_[14],h=(g=Ri(L,S))*Li,g&&(D=b*(v=Math.cos(-g))+A*(y=Math.sin(-g)),k=O*v+I*y,C=L*v+S*y,A=b*-y+A*v,I=O*-y+I*v,S=L*-y+S*v,P=E*-y+P*v,b=D,O=k,L=C),l=(g=Ri(-x,S))*Li,g&&(v=Math.cos(-g),P=T*(y=Math.sin(-g))+P*v,w=D=w*v-A*y,M=k=M*v-I*y,x=C=x*v-S*y),u=(g=Ri(M,w))*Li,g&&(D=w*(v=Math.cos(g))+M*(y=Math.sin(g)),k=b*v+O*y,M=M*v-w*y,O=O*v-b*y,w=D,b=k),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),o=St(Math.sqrt(w*w+M*M+x*x)),a=St(Math.sqrt(O*O+L*L)),g=Ri(b,O),c=Math.abs(g)>2e-4?g*Li:0,p=P?1/(P<0?-P:P):0),i.svg&&(D=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!Mr(ir(t,Ki)),D&&t.setAttribute("transform",D))),Math.abs(c)>90&&Math.abs(c)<270&&(R?(o*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(a*=-1,c+=c<=0?180:-180)),i.x=r-((i.xPercent=r&&(i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-r)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+F,i.y=n-((i.yPercent=n&&(i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+F,i.z=s+F,i.scaleX=St(o),i.scaleY=St(a),i.rotation=St(u)+B,i.rotationX=St(h)+B,i.rotationY=St(l)+B,i.skewX=c+B,i.skewY=f+B,i.transformPerspective=p+F,(i.zOrigin=parseFloat(N.split(" ")[2])||0)&&(z[tr]=Dr(N)),i.xOffset=i.yOffset=0,i.force3D=q.force3D,i.renderTransform=i.svg?Pr:Ei?Er:Cr,i.uncache=0,i},Dr=function(t){return(t=t.split(" "))[0]+" "+t[1]},kr=function(t,e,i){var r=fe(e);return St(parseFloat(e)+parseFloat(pr(t,"x",i+"px",r)))+r},Cr=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Er(t,e)},Ar="0deg",Ir="0px",Sr=") ",Er=function(t,e){var i=e||this,r=i.xPercent,n=i.yPercent,s=i.x,o=i.y,a=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,m=i.transformPerspective,_=i.force3D,g=i.target,v=i.zOrigin,y="",w="auto"===_&&t&&1!==t||!0===_;if(v&&(l!==Ar||h!==Ar)){var M,x=parseFloat(h)*zi,T=Math.sin(x),b=Math.cos(x);x=parseFloat(l)*zi,M=Math.cos(x),s=kr(g,s,T*M*-v),o=kr(g,o,-Math.sin(x)*-v),a=kr(g,a,b*M*-v+v)}m!==Ir&&(y+="perspective("+m+Sr),(r||n)&&(y+="translate("+r+"%, "+n+"%) "),(w||s!==Ir||o!==Ir||a!==Ir)&&(y+=a!==Ir||w?"translate3d("+s+", "+o+", "+a+") ":"translate("+s+", "+o+Sr),u!==Ar&&(y+="rotate("+u+Sr),h!==Ar&&(y+="rotateY("+h+Sr),l!==Ar&&(y+="rotateX("+l+Sr),c===Ar&&f===Ar||(y+="skew("+c+", "+f+Sr),1===p&&1===d||(y+="scale("+p+", "+d+Sr),g.style[Ki]=y||"translate(0, 0)"},Pr=function(t,e){var i,r,n,s,o,a=e||this,u=a.xPercent,h=a.yPercent,l=a.x,c=a.y,f=a.rotation,p=a.skewX,d=a.skewY,m=a.scaleX,_=a.scaleY,g=a.target,v=a.xOrigin,y=a.yOrigin,w=a.xOffset,M=a.yOffset,x=a.forceCSS,T=parseFloat(l),b=parseFloat(c);f=parseFloat(f),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),f+=d),f||p?(f*=zi,p*=zi,i=Math.cos(f)*m,r=Math.sin(f)*m,n=Math.sin(f-p)*-_,s=Math.cos(f-p)*_,p&&(d*=zi,o=Math.tan(p-d),n*=o=Math.sqrt(1+o*o),s*=o,d&&(o=Math.tan(d),i*=o=Math.sqrt(1+o*o),r*=o)),i=St(i),r=St(r),n=St(n),s=St(s)):(i=m,s=_,r=n=0),(T&&!~(l+"").indexOf("px")||b&&!~(c+"").indexOf("px"))&&(T=pr(g,"x",l,"px"),b=pr(g,"y",c,"px")),(v||y||w||M)&&(T=St(T+v-(v*i+y*n)+w),b=St(b+y-(v*r+y*s)+M)),(u||h)&&(o=g.getBBox(),T=St(T+u/100*o.width),b=St(b+h/100*o.height)),o="matrix("+i+","+r+","+n+","+s+","+T+","+b+")",g.setAttribute("transform",o),x&&(g.style[Ki]=o)},Lr=function(t,e,i,r,n,s){var o,a,u=360,h=G(n),l=parseFloat(n)*(h&&~n.indexOf("rad")?Li:1),c=s?l*s:l-r,f=r+c+"deg";return h&&("short"===(o=n.split("_")[1])&&(c%=u)!==c%180&&(c+=c<0?u:-360),"cw"===o&&c<0?c=(c+36e9)%u-~~(c/u)*u:"ccw"===o&&c>0&&(c=(c-36e9)%u-~~(c/u)*u)),t._pt=a=new Mi(t._pt,e,i,r,c,Vi),a.e=f,a.u="deg",t._props.push(i),a},zr=function(t,e){for(var i in e)t[i]=e[i];return t},Rr=function(t,e,i){var r,n,s,o,a,u,h,l=zr({},i._gsap),c=i.style;for(n in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[Ki]=e,r=Or(i,1),lr(i,Ki),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Ki],c[Ki]=e,r=Or(i,1),c[Ki]=s),Pi)(s=l[n])!==(o=r[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(a=fe(s)!==(h=fe(o))?pr(i,n,s,h):parseFloat(s),u=parseFloat(o),t._pt=new Mi(t._pt,r,n,a,u-a,ji),t._pt.u=h||0,t._props.push(n));zr(r,l)};It("padding,margin,Width,Radius",(function(t,e){var i="Top",r="Right",n="Bottom",s="Left",o=(e<3?[i,r,n,s]:[i+s,i+r,n+r,n+s]).map((function(i){return e<2?t+i:"border"+i+t}));vr[e>1?"border"+t:t]=function(t,e,i,r,n){var s,a;if(arguments.length<4)return s=o.map((function(e){return dr(t,e,i)})),5===(a=s.join(" ")).split(s[0]).length?s[0]:a;s=(r+"").split(" "),a={},o.forEach((function(t,e){return a[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,a,n)}}));var Fr,Br,qr,Nr={name:"css",register:sr,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,r,n){var s,o,a,u,h,l,c,f,p,d,m,_,g,v,y,w,M,x,T,b=this._props,O=t.style,D=i.vars.startAt;for(c in Ai||sr(),e)if("autoRound"!==c&&(o=e[c],!xt[c]||!ii(c,e,i,r,t,n)))if(h=typeof o,l=vr[c],"function"===h&&(h=typeof(o=o.call(i,r,t,n))),"string"===h&&~o.indexOf("random(")&&(o=xe(o)),l)l(this,t,c,o,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),o+="",Le.lastIndex=0,Le.test(s)||(f=fe(s),p=fe(o)),p?f!==p&&(s=pr(t,c,s,p)+p):f&&(o+=f),this.add(O,"setProperty",s,o,r,n,0,0,c),b.push(c);else if("undefined"!==h){if(D&&c in D?(s="function"==typeof D[c]?D[c].call(i,r,t,n):D[c],c in q.units&&!fe(s)&&(s+=q.units[c]),"="===(s+"").charAt(1)&&(s=dr(t,c))):s=dr(t,c),u=parseFloat(s),(d="string"===h&&"="===o.charAt(1)?+(o.charAt(0)+"1"):0)&&(o=o.substr(2)),a=parseFloat(o),c in Ni&&("autoAlpha"===c&&(1===u&&"hidden"===dr(t,"visibility")&&a&&(u=0),cr(this,O,"visibility",u?"inherit":"hidden",a?"inherit":"hidden",!a)),"scale"!==c&&"transform"!==c&&~(c=Ni[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in Pi)if(_||((g=t._gsap).renderTransform&&!e.parseTransform||Or(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(_=this._pt=new Mi(this._pt,O,Ki,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===c)this._pt=new Mi(this._pt,g,"scaleY",g.scaleY,(d?d*a:a-g.scaleY)||0),b.push("scaleY",c),c+="X";else{if("transformOrigin"===c){M=void 0,x=void 0,T=void 0,M=(w=o).split(" "),x=M[0],T=M[1]||"50%","top"!==x&&"bottom"!==x&&"left"!==T&&"right"!==T||(w=x,x=T,T=w),M[0]=_r[x]||x,M[1]=_r[T]||T,o=M.join(" "),g.svg?br(t,o,0,v,0,this):((p=parseFloat(o.split(" ")[2])||0)!==g.zOrigin&&cr(this,g,"zOrigin",g.zOrigin,p),cr(this,O,c,Dr(s),Dr(o)));continue}if("svgOrigin"===c){br(t,o,1,v,0,this);continue}if(c in wr){Lr(this,g,c,u,o,d);continue}if("smoothOrigin"===c){cr(this,g,"smooth",g.smooth,o);continue}if("force3D"===c){g[c]=o;continue}if("transform"===c){Rr(this,o,t);continue}}else c in O||(c=nr(c)||c);if(m||(a||0===a)&&(u||0===u)&&!qi.test(o)&&c in O)a||(a=0),(f=(s+"").substr((u+"").length))!==(p=fe(o)||(c in q.units?q.units[c]:f))&&(u=pr(t,c,s,p)),this._pt=new Mi(this._pt,m?g:O,c,u,d?d*a:a-u,m||"px"!==p&&"zIndex"!==c||!1===e.autoRound?ji:Ui),this._pt.u=p||0,f!==p&&(this._pt.b=s,this._pt.r=Yi);else if(c in O)mr.call(this,t,c,s,o);else{if(!(c in t)){mt(c,o);continue}this.add(t,c,s||t[c],o,r,n)}b.push(c)}y&&wi(this)},get:dr,aliases:Ni,getSetter:function(t,e,i){var r=Ni[e];return r&&r.indexOf(",")<0&&(e=r),e in Pi&&e!==tr&&(t._gsap.x||dr(t,"x"))?i&&Si===i?"scale"===e?$i:Gi:(Si=i||{})&&("scale"===e?Zi:Ji):t.style&&!J(t.style[e])?Hi:~e.indexOf("-")?Qi:fi(t,e)},core:{_removeProperty:lr,_getMatrix:Tr}};Oi.utils.checkPrefix=nr,qr=It((Fr="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Br="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Pi[t]=1})),It(Br,(function(t){q.units[t]="deg",wr[t]=1})),Ni[qr[13]]=Fr+","+Br,It("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Ni[e[1]]=qr[e[0]]})),It("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){q.units[t]="px"})),Oi.registerPlugin(Nr);var jr,Vr,Yr=Oi.registerPlugin(Nr)||Oi,Ur=(Yr.core.Tween,{});jr=Ur,Vr=function(){var t=document,e=t.createTextNode.bind(t);function i(t,e,i){t.style.setProperty(e,i)}function r(t,e){return t.appendChild(e)}function n(e,i,n,s){var o=t.createElement("span");return i&&(o.className=i),n&&(!s&&o.setAttribute("data-"+i,n),o.textContent=n),e&&r(e,o)||o}function s(t,e){return t.getAttribute("data-"+e)}function o(e,i){return e&&0!=e.length?e.nodeName?[e]:[].slice.call(e[0].nodeName?e:(i||t).querySelectorAll(e)):[]}function a(t){for(var e=[];t--;)e[t]=[];return e}function u(t,e){t&&t.some(e)}function h(t){return function(e){return t[e]}}var l={};function c(t,e,i){var r=i.indexOf(t);if(-1==r)i.unshift(t),u(l[t].depends,(function(e){c(e,t,i)}));else{var n=i.indexOf(e);i.splice(r,1),i.splice(n,0,t)}return i}function f(t,e,i,r){return{by:t,depends:e,key:i,split:r}}function p(t){return c(t,0,[]).map(h(l))}function d(t){l[t.by]=t}function m(t,i,s,a,h){t.normalize();var l=[],c=document.createDocumentFragment();a&&l.push(t.previousSibling);var f=[];return o(t.childNodes).some((function(t){if(!t.tagName||t.hasChildNodes()){if(t.childNodes&&t.childNodes.length)return f.push(t),void l.push.apply(l,m(t,i,s,a,h));var r=t.wholeText||"",o=r.trim();o.length&&(" "===r[0]&&f.push(e(" ")),u(o.split(s),(function(t,e){e&&h&&f.push(n(c,"whitespace"," ",h));var r=n(c,i,t);l.push(r),f.push(r)}))," "===r[r.length-1]&&f.push(e(" ")))}else f.push(t)})),u(f,(function(t){r(c,t)})),t.innerHTML="",r(t,c),l}var _="words",g=f(_,0,"word",(function(t){return m(t,"word",/\s+/,0,1)})),v="chars",y=f(v,[_],"char",(function(t,e,i){var r=[];return u(i.words,(function(t,i){r.push.apply(r,m(t,"char","",e.whitespace&&i))})),r}));function w(t){var e=(t=t||{}).key;return o(t.target||"[data-splitting]").map((function(r){var n=r["🍌"];if(!t.force&&n)return n;n=r["🍌"]={el:r};var o=p(t.by||s(r,"splitting")||v),a=function(t,e){for(var i in e)t[i]=e[i];return t}({},t);return u(o,(function(t){if(t.split){var s=t.by,o=(e?"-"+e:"")+t.key,h=t.split(r,a,n);o&&function(t,e,r){var n="--"+e,s=n+"-index";u(r,(function(t,e){Array.isArray(t)?u(t,(function(t){i(t,s,e)})):i(t,s,e)})),i(t,n+"-total",r.length)}(r,o,h),n[s]=h,r.classList.add(s)}})),r.classList.add("splitting"),n}))}function M(t,e,i){var r=o(e.matching||t.children,t),n={};return u(r,(function(t){var e=Math.round(t[i]);(n[e]||(n[e]=[])).push(t)})),Object.keys(n).map(Number).sort(x).map(h(n))}function x(t,e){return t-e}w.html=function(t){var e=(t=t||{}).target=n();return e.innerHTML=t.content,w(t),e.outerHTML},w.add=d;var T=f("lines",[_],"line",(function(t,e,i){return M(t,{matching:i.words},"offsetTop")})),b=f("items",0,"item",(function(t,e){return o(e.matching||t.children,t)})),O=f("rows",0,"row",(function(t,e){return M(t,e,"offsetTop")})),D=f("cols",0,"col",(function(t,e){return M(t,e,"offsetLeft")})),k=f("grid",["rows","cols"]),C="layout",A=f(C,0,0,(function(t,e){var a=e.rows=+(e.rows||s(t,"rows")||1),u=e.columns=+(e.columns||s(t,"columns")||1);if(e.image=e.image||s(t,"image")||t.currentSrc||t.src,e.image){var h=o("img",t)[0];e.image=h&&(h.currentSrc||h.src)}e.image&&i(t,"background-image","url("+e.image+")");for(var l=a*u,c=[],f=n(0,"cell-grid");l--;){var p=n(f,"cell");n(p,"cell-inner"),c.push(p)}return r(t,f),c})),I=f("cellRows",[C],"row",(function(t,e,i){var r=e.rows,n=a(r);return u(i.layout,(function(t,e,i){n[Math.floor(e/(i.length/r))].push(t)})),n})),S=f("cellColumns",[C],"col",(function(t,e,i){var r=e.columns,n=a(r);return u(i.layout,(function(t,e){n[e%r].push(t)})),n})),E=f("cells",["cellRows","cellColumns"],"cell",(function(t,e,i){return i.layout}));return d(g),d(y),d(T),d(b),d(O),d(D),d(k),d(A),d(I),d(S),d(E),w},"object"==typeof Ur?Ur=Vr():jr.Splitting=Vr();var Xr=t(Ur);let Wr=u();window.addEventListener("resize",(()=>Wr=u()));let Hr={x:Wr.width/2,y:Wr.height/2};window.addEventListener("mousemove",(t=>{return Hr={x:(e=t).clientX,y:e.clientY};var e}));class Qr{constructor(t,e){this.DOM={el:t},this.boundaries=e,this.transformVals={tx:0,ty:0,r:0}}start(){this.requestId||(this.requestId=requestAnimationFrame((()=>this.render())))}stop(){this.requestId&&(window.cancelAnimationFrame(this.requestId),this.requestId=void 0)}render(){this.requestId=void 0,this.transformVals.tx=a(this.transformVals.tx,o(Hr.x,0,Wr.width,-this.boundaries.x,this.boundaries.x),.07),this.transformVals.ty=a(this.transformVals.ty,o(Hr.y,0,Wr.height,-this.boundaries.y,this.boundaries.y),.07),this.transformVals.r=a(this.transformVals.r,o(Hr.x,0,Wr.width,-this.boundaries.r||0,this.boundaries.r||0),.07),Yr.set(this.DOM.el,{x:this.transformVals.tx,y:this.transformVals.ty,rotation:this.transformVals.r}),this.start()}}class Gr{constructor(t){this.DOM={el:t},this.DOM.el.dataset.splitting="",this.DOM.imgStack=document.getElementById(this.DOM.el.dataset.stack),this.DOM.stackImages=this.DOM.imgStack.querySelectorAll("img"),this.DOM.content=document.getElementById(this.DOM.el.dataset.content),this.DOM.contentTitle=this.DOM.content.querySelector(".content__title"),this.DOM.contentTitle.dataset.splitting="",this.DOM.contentText=this.DOM.content.querySelector(".content__text");const e={x:Yr.utils.random(-10,10),y:Yr.utils.random(-15,15),r:Yr.utils.random(-2,2)};this.mouseMoveItemController=new Qr(this.DOM.el,e);this.mouseMoveStackController=new Qr(this.DOM.imgStack,{x:50,y:100}),Xr(),this.DOM.chars=this.DOM.el.querySelectorAll(".char"),this.DOM.contentTitleChars=this.DOM.contentTitle.querySelectorAll(".char")}showImageStack(){Yr.killTweensOf(this.DOM.imgStack),Yr.timeline().set(this.DOM.imgStack,{opacity:.5},.04).set(this.DOM.stackImages,{x:()=>`${Yr.utils.random(-8,8)}%`},.04).set(this.DOM.imgStack,{opacity:.2},"+=0.04").set(this.DOM.stackImages,{x:()=>`${Yr.utils.random(-8,8)}%`,rotation:()=>Yr.utils.random(-2,2)},"+=0.04").set(this.DOM.imgStack,{opacity:.5},"+=0.04").set(this.DOM.stackImages,{x:"0%",y:"0%",rotation:0},"+=0.04")}hideImageStack(){Yr.killTweensOf(this.DOM.imgStack),Yr.set(this.DOM.imgStack,{opacity:0})}startItemMouseMoveMotion(){this.mouseMoveItemController.start()}stopItemMouseMoveMotion(){this.mouseMoveItemController.stop()}startStackMouseMoveMotion(){this.mouseMoveStackController.start()}stopStackMouseMoveMotion(){this.mouseMoveStackController.stop()}glitch(){Yr.killTweensOf(this.DOM.imgStack),Yr.timeline().set(this.DOM.imgStack,{opacity:.2},.04).set(this.DOM.stackImages,{x:()=>`+=${Yr.utils.random(-15,15)}%`,y:()=>`+=${Yr.utils.random(-15,15)}%`,opacity:()=>Yr.utils.random(1,10)/10},.08).set(this.DOM.imgStack,{opacity:.4},"+=0.04").set(this.DOM.stackImages,{y:()=>`+=${Yr.utils.random(-8,8)}%`,rotation:()=>Yr.utils.random(-2,2),opacity:()=>Yr.utils.random(1,10)/10,scale:()=>Yr.utils.random(75,95)/100},"+=0.06").set(this.DOM.imgStack,{opacity:1},"+=0.06").set(this.DOM.stackImages,{x:(t,e)=>e.dataset.tx,y:(t,e)=>e.dataset.ty,rotation:(t,e)=>e.dataset.r,opacity:1,scale:1},"+=0.06")}}class $r{constructor(t){this.DOM={el:t},Yr.set(this.DOM.el,{opacity:0});this.mouseMoveController=new Qr(this.DOM.el,{x:-100,y:-100})}show(){Yr.to(this.DOM.el,{duration:.8,opacity:1})}hide(){Yr.to(this.DOM.el,{duration:.8,opacity:0})}startMouseMoveMotion(){this.mouseMoveController.start()}stopMouseMoveMotion(){this.mouseMoveController.stop()}}let Zr=u();window.addEventListener("resize",(()=>Zr=u()));((t="img")=>new Promise((e=>{s(document.querySelectorAll(t),{background:!0},e)})))(".stack__img").then((()=>document.body.classList.remove("loading"))),new class{constructor(t){this.DOM={el:t},this.DOM.items=[...this.DOM.el.querySelectorAll(".menu__item")],this.menuItems=[],this.DOM.items.forEach((t=>this.menuItems.push(new Gr(t)))),this.current=-1,this.circle=new $r(document.querySelector(".circle")),this.DOM.closeContentCtrl=document.querySelector(".content-wrap button"),this.circle.startMouseMoveMotion(),this.menuItems.forEach((t=>t.startItemMouseMoveMotion())),this.initEvents()}initEvents(){this.menuItems.forEach(((t,e)=>{t.DOM.el.addEventListener("click",(t=>{t.preventDefault(),this.selectItem(e)})),t.DOM.el.addEventListener("mouseenter",(()=>{this.isOpen||(t.startStackMouseMoveMotion(),t.mouseEnterTime=setTimeout((()=>t.showImageStack()),125))})),t.DOM.el.addEventListener("mouseleave",(()=>{this.isOpen||(clearTimeout(t.mouseEnterTime),t.stopStackMouseMoveMotion(),t.hideImageStack())}))})),this.DOM.el.addEventListener("mouseenter",(()=>this.circle.show())),this.DOM.el.addEventListener("mouseleave",(()=>this.circle.hide())),this.DOM.closeContentCtrl.addEventListener("click",(()=>this.show())),this.DOM.closeContentCtrl.addEventListener("mouseenter",(()=>this.menuItems[this.current].glitch())),window.addEventListener("resize",(()=>this.resize()))}selectItem(t){if(this.current===t||this.isOpen||this.isAnimating)return!1;this.isOpen=!0,this.isAnimating=!0,this.current=t;const e=this.menuItems[this.current];e.DOM.el.classList.add("menu__item--current"),e.stopStackMouseMoveMotion(),this.circle.stopMouseMoveMotion(),this.DOM.el.classList.remove("menu--open"),e.DOM.content.classList.add("content--current"),this.openItemTimeline=Yr.timeline({onComplete:t=>this.isAnimating=!1}),this.animateMenuItemsCharsOut(),this.openItemTimeline.set([e.DOM.contentTitleChars,e.DOM.contentText],{opacity:0},0).to(e.DOM.imgStack,{duration:1.6,ease:"expo.inOut",opacity:1,x:"0%",y:"0%"},0);let i=-1;this.openItemTimeline.to(e.DOM.stackImages,{duration:1.6,ease:"expo.inOut",x:(t,e)=>{i++;const r=-1*(Zr.width/2-e.offsetWidth/2-(i*e.offsetWidth+40*i));return e.dataset.tx=r,r},y:(t,e)=>{const r=Zr.height/2-(e.offsetTop+e.offsetHeight/2)+(i%2?35:-35);return e.dataset.ty=r,r},rotation:(t,e)=>{const r=i%2?Yr.utils.random(3,7):Yr.utils.random(-7,-3);return e.dataset.r=r,r},stagger:{grid:"auto",from:"center",amount:.2}},0).to(e.DOM.contentTitleChars,{duration:.8,ease:"power4.out",opacity:1,startAt:{x:(t,e,i)=>17*(t-i.length/2)},x:0,stagger:{grid:"auto",from:"center"}},1).to(e.DOM.contentText,{duration:1.8,ease:"power4.out",opacity:1,startAt:{y:"10%"},y:"0%"},1).set(this.DOM.closeContentCtrl,{opacity:0},0).to(this.DOM.closeContentCtrl,{duration:1,opacity:1},.5).to(this.circle.DOM.el,{duration:1,ease:"expo.in",scale:3,opacity:0},0)}show(){if(!this.isOpen||this.isAnimating)return!1;this.isAnimating=!0;const t=this.menuItems[this.current];this.circle.startMouseMoveMotion(),this.DOM.el.classList.add("menu--open"),this.closeItemTimeline=Yr.timeline({onComplete:t=>{this.current=-1,this.isAnimating=!1}}).add((()=>this.isOpen=!1),.8).to(this.DOM.closeContentCtrl,{duration:.5,opacity:0},0).to(t.DOM.contentTitleChars,{duration:.8,ease:"power4.in",opacity:0,x:(t,e,i)=>17*(t-i.length/2),stagger:{grid:"auto",from:"center"},onComplete:()=>{t.DOM.content.classList.remove("content--current")}},0).to(t.DOM.contentText,{duration:.8,ease:"power4.in",opacity:0,y:"10%"},0);this.closeItemTimeline.to(t.DOM.stackImages,{duration:1.4,ease:"expo.inOut",x:0,y:0,rotation:0,stagger:{grid:"auto",from:"center",amount:-.2}},0).to(t.DOM.imgStack,{duration:1.4,ease:"power2.inOut",opacity:0},0).to(this.circle.DOM.el,{duration:1.2,ease:"expo",scale:1,opacity:1},.8),this.animateMenuItemsCharsIn()}animateMenuItemsCharsOut(){this.menuItems.forEach((t=>{t.stopItemMouseMoveMotion(),this.openItemTimeline.to(t.DOM.chars,{duration:.8,ease:"power4.in",opacity:0,x:(t,e,i)=>17*(t-i.length/2),stagger:{grid:"auto",from:"center"},onComplete:()=>this.menuItems[this.current].DOM.el.classList.remove("menu__item--current")},0)}))}animateMenuItemsCharsIn(){this.menuItems.forEach((t=>{t.startItemMouseMoveMotion(),this.closeItemTimeline.to(t.DOM.chars,{duration:1.2,ease:"power4.out",opacity:1,x:0,stagger:{grid:"auto",from:"center"}},1.1)}))}resize(){if(!this.isOpen)return;let t=-1;Yr.set(this.menuItems[this.current].DOM.stackImages,{x:(e,i)=>(t++,-1*(Zr.width/2-i.offsetWidth/2-(t*i.offsetWidth+40*t))),y:(e,i)=>Zr.height/2-(i.offsetTop+i.offsetHeight/2)+(t%2?35:-35),stagger:{grid:"auto",from:"center",amount:.2}})}}(document.querySelector(".menu"))}(); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Menu Thumb Stack Animation | Codrops

Menu Thumb Stack Animation

@codrops

Cogno Frank

My cold human, you inspire me to write.
I love the way you pray, resist and fly,
Invading my mind day and through the night,
Always dreaming about the hot hereby.

Loca di Marta

Let me compare you to a green balloon?
You are more dandy, bandy and freaky.
Big sun heats the handy peaches of June,
And summertime has the randy rekey.

Missy Mac Blue

How do I love you? Let me count the ways.
I love your lovely heart, soul and head.
Thinking of your sandy soul fills my days.
My love for you is the cheeky embed.

Luxtroc Chunk

My cold human, you inspire me to write.
I love the way you pray, resist and fly,
Invading my mind day and through the night,
Always dreaming about the hot hereby.

Muck Galli

Let me compare you to a green balloon?
You are more dandy, bandy and freaky.
Big sun heats the handy peaches of June,
And summertime has the randy rekey.

Iris Catapult

How do I love you? Let me count the ways.
I love your lovely heart, soul and head.
Thinking of your sandy soul fills my days.
My love for you is the cheeky embed.

Iris Catapult

My cold human, you inspire me to write.
I love the way you pray, resist and fly,
Invading my mind day and through the night,
Always dreaming about the hot hereby.

Anthony Gun

Let me compare you to a green balloon?
You are more dandy, bandy and freaky.
Big sun heats the handy peaches of June,
And summertime has the randy rekey.

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

Menu Thumb Stack Animation

19 | 24 |
@codrops
25 |
26 | 82 | 90 |
91 |
92 |

Cogno Frank

93 |

94 | My cold human, you inspire me to write.
95 | I love the way you pray, resist and fly,
96 | Invading my mind day and through the night,
97 | Always dreaming about the hot hereby.
98 |

99 |
100 |
101 |

Loca di Marta

102 |

103 | Let me compare you to a green balloon?
104 | You are more dandy, bandy and freaky.
105 | Big sun heats the handy peaches of June,
106 | And summertime has the randy rekey.
107 |

108 |
109 |
110 |

Missy Mac Blue

111 |

112 | How do I love you? Let me count the ways.
113 | I love your lovely heart, soul and head.
114 | Thinking of your sandy soul fills my days.
115 | My love for you is the cheeky embed.
116 |

117 |
118 |
119 |

Luxtroc Chunk

120 |

121 | My cold human, you inspire me to write.
122 | I love the way you pray, resist and fly,
123 | Invading my mind day and through the night,
124 | Always dreaming about the hot hereby.
125 |

126 |
127 |
128 |

Muck Galli

129 |

130 | Let me compare you to a green balloon?
131 | You are more dandy, bandy and freaky.
132 | Big sun heats the handy peaches of June,
133 | And summertime has the randy rekey.
134 |

135 |
136 |
137 |

Iris Catapult

138 |

139 | How do I love you? Let me count the ways.
140 | I love your lovely heart, soul and head.
141 | Thinking of your sandy soul fills my days.
142 | My love for you is the cheeky embed.
143 |

144 |
145 |
146 |

Iris Catapult

147 |

148 | My cold human, you inspire me to write.
149 | I love the way you pray, resist and fly,
150 | Invading my mind day and through the night,
151 | Always dreaming about the hot hereby.
152 |

153 |
154 |
155 |

Anthony Gun

156 |

157 | Let me compare you to a green balloon?
158 | You are more dandy, bandy and freaky.
159 | Big sun heats the handy peaches of June,
160 | And summertime has the randy rekey.
161 |

162 |
163 | 164 |
165 | 166 |
167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /src/js/circle.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { MouseMoveController } from './mouseMoveController'; 3 | 4 | export class Circle { 5 | constructor(DOM_el) { 6 | this.DOM = {el: DOM_el}; 7 | // hide it by default 8 | // it will be visible when hovering on the menu 9 | gsap.set(this.DOM.el, {opacity: 0}); 10 | // the circle moves as we move the mouse 11 | // start and end movement boundaries 12 | const boundaries = {x: -100, y: -100}; 13 | this.mouseMoveController = new MouseMoveController(this.DOM.el, boundaries); 14 | } 15 | // fades in the circle 16 | show() { 17 | gsap.to(this.DOM.el, {duration: 0.8, opacity: 1}); 18 | } 19 | // fades out the circle 20 | hide() { 21 | gsap.to(this.DOM.el, {duration: 0.8, opacity: 0}); 22 | } 23 | startMouseMoveMotion() { 24 | this.mouseMoveController.start(); 25 | } 26 | stopMouseMoveMotion() { 27 | this.mouseMoveController.stop(); 28 | } 29 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import { Menu } from './menu'; 3 | 4 | // preload images then remove loader (loading class) 5 | preloadImages('.stack__img').then(() => document.body.classList.remove('loading')); 6 | 7 | // initialize Menu 8 | new Menu(document.querySelector('.menu')); -------------------------------------------------------------------------------- /src/js/menu.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { MenuItem } from './menuItem'; 3 | import { Circle } from './circle'; 4 | import { calcWinsize } from './utils'; 5 | 6 | // Calculate the viewport size 7 | let winsize = calcWinsize(); 8 | window.addEventListener('resize', () => winsize = calcWinsize()); 9 | 10 | export class Menu { 11 | constructor(DOM_el) { 12 | // menu element 13 | this.DOM = {el: DOM_el}; 14 | 15 | // menu items 16 | this.DOM.items = [...this.DOM.el.querySelectorAll('.menu__item')]; 17 | // MenuItem instances array 18 | this.menuItems = []; 19 | this.DOM.items.forEach(item => this.menuItems.push(new MenuItem(item))); 20 | // current menu item element's index 21 | this.current = -1; 22 | 23 | // SVG circle element 24 | this.circle = new Circle(document.querySelector('.circle')); 25 | 26 | // close content button ctrl 27 | this.DOM.closeContentCtrl = document.querySelector('.content-wrap button'); 28 | 29 | // start the circle mouse move motion 30 | this.circle.startMouseMoveMotion(); 31 | 32 | // start the menu items mouse move motion 33 | this.menuItems.forEach(item => item.startItemMouseMoveMotion()); 34 | 35 | // init events 36 | this.initEvents(); 37 | } 38 | initEvents() { 39 | this.menuItems.forEach((item,pos) => { 40 | // clicking a menu item 41 | item.DOM.el.addEventListener('click', ev => { 42 | ev.preventDefault(); 43 | this.selectItem(pos); 44 | }); 45 | 46 | // hovers: 47 | // show image stack when hovering on a menu item 48 | item.DOM.el.addEventListener('mouseenter', () => { 49 | if ( this.isOpen ) return; 50 | // start stack mouse move motion 51 | item.startStackMouseMoveMotion(); 52 | item.mouseEnterTime = setTimeout(() => item.showImageStack(), 125); 53 | }); 54 | 55 | item.DOM.el.addEventListener('mouseleave', () => { 56 | if ( this.isOpen ) return; 57 | 58 | clearTimeout(item.mouseEnterTime); 59 | // stop stack mouse move motion 60 | item.stopStackMouseMoveMotion(); 61 | item.hideImageStack(); 62 | }); 63 | }); 64 | 65 | // show circle when hovering on the menu 66 | this.DOM.el.addEventListener('mouseenter', () => this.circle.show()); 67 | this.DOM.el.addEventListener('mouseleave', () => this.circle.hide()); 68 | 69 | // close content and show menu 70 | this.DOM.closeContentCtrl.addEventListener('click', () => this.show()); 71 | 72 | // glitch the current item's images when hovering the close control 73 | this.DOM.closeContentCtrl.addEventListener('mouseenter', () => this.menuItems[this.current].glitch()); 74 | 75 | // window resize 76 | window.addEventListener('resize', () => this.resize()); 77 | } 78 | // closes the menu and opens the item (displays the item's images in a horizontal layout and shows the content title) 79 | selectItem(pos) { 80 | if ( this.current === pos || this.isOpen || this.isAnimating ) return false; 81 | 82 | this.isOpen = true; 83 | this.isAnimating = true; 84 | this.current = pos; 85 | 86 | // current menu item 87 | const menuItemCurrent = this.menuItems[this.current]; 88 | 89 | // add class menu__item--current (ative class) 90 | menuItemCurrent.DOM.el.classList.add('menu__item--current'); 91 | 92 | // stop stack and circle mouse move motion on click 93 | menuItemCurrent.stopStackMouseMoveMotion(); 94 | this.circle.stopMouseMoveMotion(); 95 | 96 | // set menu element's pointer events to none 97 | this.DOM.el.classList.remove('menu--open'); 98 | 99 | // show content (pointer events to auto) 100 | menuItemCurrent.DOM.content.classList.add('content--current'); 101 | 102 | // gsap timeline for the open animation 103 | this.openItemTimeline = gsap.timeline({ 104 | onComplete: _ => this.isAnimating = false 105 | }); 106 | 107 | // all menu items chars animation 108 | this.animateMenuItemsCharsOut(); 109 | 110 | this.openItemTimeline 111 | // hide content title chars and content text initially 112 | .set([menuItemCurrent.DOM.contentTitleChars, menuItemCurrent.DOM.contentText], { 113 | opacity: 0 114 | }, 0) 115 | // reset image stack transform (previously changed with the mouse move motion effect) and set opecity to 1 116 | .to(menuItemCurrent.DOM.imgStack, { 117 | duration: 1.6, 118 | ease: 'expo.inOut', 119 | opacity: 1, 120 | x: '0%', 121 | y: '0%' 122 | }, 0); 123 | 124 | // animate images 125 | let imgCounter = -1; 126 | this.openItemTimeline 127 | .to(menuItemCurrent.DOM.stackImages, { 128 | duration: 1.6, 129 | ease: 'expo.inOut', 130 | x: (_,t) => { 131 | imgCounter++; 132 | const tx = -1* (winsize.width/2 - t.offsetWidth/2 - (imgCounter*t.offsetWidth+40*imgCounter)); 133 | t.dataset.tx = tx; 134 | return tx; 135 | }, 136 | y: (_,t) => { 137 | const ty = winsize.height/2 - (t.offsetTop + t.offsetHeight/2) + (imgCounter%2 ? 35 : -35); 138 | t.dataset.ty = ty; 139 | return ty; 140 | }, 141 | rotation: (_,t) => { 142 | const r = imgCounter%2 ? gsap.utils.random(3,7) : gsap.utils.random(-7,-3); 143 | t.dataset.r = r; 144 | return r; 145 | }, 146 | stagger: { 147 | grid: 'auto', 148 | from: 'center', 149 | amount: 0.2 150 | } 151 | }, 0) 152 | // animate content title chars and content text in 153 | .to(menuItemCurrent.DOM.contentTitleChars, { 154 | duration: 0.8, 155 | ease: 'power4.out', 156 | opacity: 1, 157 | startAt: {x: (position,_,arr) => 17*(position-arr.length/2)}, 158 | x: 0, 159 | stagger: { 160 | grid: 'auto', 161 | from: 'center' 162 | } 163 | }, 1) 164 | .to(menuItemCurrent.DOM.contentText, { 165 | duration: 1.8, 166 | ease: 'power4.out', 167 | opacity: 1, 168 | startAt: {y: '10%'}, 169 | y: '0%' 170 | }, 1) 171 | // hide close ctrl initially 172 | .set(this.DOM.closeContentCtrl, { 173 | opacity: 0 174 | }, 0) 175 | // show close ctrl 176 | .to(this.DOM.closeContentCtrl, { 177 | duration: 1, 178 | opacity: 1 179 | }, 0.5) 180 | // scale up and fade out the circle 181 | .to(this.circle.DOM.el, { 182 | duration: 1, 183 | ease: 'expo.in', 184 | scale: 3, 185 | opacity: 0 186 | }, 0); 187 | } 188 | // closes the content and shows the menu 189 | show() { 190 | if ( !this.isOpen || this.isAnimating ) return false; 191 | 192 | this.isAnimating = true; 193 | 194 | // current menu item 195 | const menuItemCurrent = this.menuItems[this.current]; 196 | 197 | // start circle mouse move motion 198 | this.circle.startMouseMoveMotion(); 199 | 200 | // set menu element's pointer events to auto 201 | this.DOM.el.classList.add('menu--open'); 202 | 203 | // gsap timeline for the open animation 204 | this.closeItemTimeline = gsap.timeline({ 205 | onComplete: _ => { 206 | this.current = -1; 207 | this.isAnimating = false; 208 | } 209 | }) 210 | .add(() => this.isOpen = false, 0.8) 211 | // hide close ctrl 212 | .to(this.DOM.closeContentCtrl, { 213 | duration: 0.5, 214 | opacity: 0 215 | }, 0) 216 | // animate content title chars out 217 | .to(menuItemCurrent.DOM.contentTitleChars, { 218 | duration: 0.8, 219 | ease: 'power4.in', 220 | opacity: 0, 221 | x: (position,_,arr) => 17*(position-arr.length/2), 222 | stagger: { 223 | grid: 'auto', 224 | from: 'center' 225 | }, 226 | onComplete: () => { 227 | // hide content (pointer events to none) 228 | menuItemCurrent.DOM.content.classList.remove('content--current'); 229 | } 230 | }, 0) 231 | // animate content text out 232 | .to(menuItemCurrent.DOM.contentText, { 233 | duration: 0.8, 234 | ease: 'power4.in', 235 | opacity: 0, 236 | y: '10%' 237 | }, 0) 238 | 239 | // animate images 240 | let imgCounter = -1; 241 | this.closeItemTimeline 242 | .to(menuItemCurrent.DOM.stackImages, { 243 | duration: 1.4, 244 | ease: 'expo.inOut', 245 | x: 0, 246 | y: 0, 247 | rotation: 0, 248 | stagger: { 249 | grid: 'auto', 250 | from: 'center', 251 | amount: -0.2 252 | } 253 | }, 0) 254 | // set image stack opecity to 0 255 | .to(menuItemCurrent.DOM.imgStack, { 256 | duration: 1.4, 257 | ease: 'power2.inOut', 258 | opacity: 0 259 | }, 0) 260 | // scale down and fade in the circle 261 | .to(this.circle.DOM.el, { 262 | duration: 1.2, 263 | ease: 'expo', 264 | scale: 1, 265 | opacity: 1 266 | }, 0.8); 267 | 268 | // all menu items chars animation 269 | this.animateMenuItemsCharsIn(); 270 | } 271 | // animate menu item's chars out 272 | animateMenuItemsCharsOut() { 273 | this.menuItems.forEach(item => { 274 | // stop all menu item motion on mousemove 275 | item.stopItemMouseMoveMotion(); 276 | 277 | // chars animation 278 | this.openItemTimeline.to(item.DOM.chars, { 279 | duration: 0.8, 280 | ease: 'power4.in', 281 | opacity: 0, 282 | // spread the chars 283 | x: (position,_,arr) => 17*(position-arr.length/2), 284 | stagger: { grid: 'auto', from: 'center' }, 285 | // remove class menu__item--current (ative class) 286 | onComplete: () => this.menuItems[this.current].DOM.el.classList.remove('menu__item--current') 287 | }, 0); 288 | }); 289 | } 290 | // animate menu item's chars in 291 | animateMenuItemsCharsIn() { 292 | this.menuItems.forEach(item => { 293 | // start all menu item motion 294 | item.startItemMouseMoveMotion(); 295 | 296 | // chars animation 297 | this.closeItemTimeline.to(item.DOM.chars, { 298 | duration: 1.2, 299 | ease: 'power4.out', 300 | opacity: 1, 301 | x: 0, 302 | stagger: { grid: 'auto', from: 'center' } 303 | }, 1.1); 304 | }); 305 | } 306 | // on resize re position the images (when the menu is open) 307 | resize() { 308 | if ( !this.isOpen ) return; 309 | 310 | let imgCounter = -1; 311 | gsap.set(this.menuItems[this.current].DOM.stackImages, { 312 | x: (_,t) => { 313 | imgCounter++; 314 | return -1* (winsize.width/2 - t.offsetWidth/2 - (imgCounter*t.offsetWidth+40*imgCounter)); 315 | }, 316 | y: (_,t) => { 317 | return winsize.height/2 - (t.offsetTop + t.offsetHeight/2) + (imgCounter%2 ? 35 : -35); 318 | }, 319 | stagger: { 320 | grid: 'auto', 321 | from: 'center', 322 | amount: 0.2 323 | } 324 | }); 325 | } 326 | } -------------------------------------------------------------------------------- /src/js/menuItem.js: -------------------------------------------------------------------------------- 1 | import "splitting/dist/splitting.css"; 2 | import "splitting/dist/splitting-cells.css"; 3 | import Splitting from "splitting"; 4 | import { gsap } from 'gsap'; 5 | import { MouseMoveController } from './mouseMoveController'; 6 | 7 | export class MenuItem { 8 | constructor(DOM_el) { 9 | this.DOM = { 10 | el: DOM_el 11 | }; 12 | this.DOM.el.dataset.splitting = ''; 13 | 14 | // image stack 15 | this.DOM.imgStack = document.getElementById(this.DOM.el.dataset.stack); 16 | // stack images 17 | this.DOM.stackImages = this.DOM.imgStack.querySelectorAll('img'); 18 | 19 | // content elements 20 | this.DOM.content = document.getElementById(this.DOM.el.dataset.content); 21 | this.DOM.contentTitle = this.DOM.content.querySelector('.content__title'); 22 | this.DOM.contentTitle.dataset.splitting = ''; 23 | this.DOM.contentText = this.DOM.content.querySelector('.content__text'); 24 | 25 | // the item moves as we move the mouse 26 | // start and end movement boundaries 27 | const boundariesItem = {x: gsap.utils.random(-10,10), y: gsap.utils.random(-15,15), r: gsap.utils.random(-2,2)}; 28 | this.mouseMoveItemController = new MouseMoveController(this.DOM.el, boundariesItem); 29 | 30 | const boundariesStack = {x: 50, y: 100}; 31 | this.mouseMoveStackController = new MouseMoveController(this.DOM.imgStack, boundariesStack); 32 | 33 | Splitting(); 34 | // (Splittting) chars for the menu item text 35 | this.DOM.chars = this.DOM.el.querySelectorAll('.char'); 36 | // (Splittting) chars for the content title 37 | this.DOM.contentTitleChars = this.DOM.contentTitle.querySelectorAll('.char'); 38 | } 39 | // show the vertical images stack behinf the menu 40 | showImageStack() { 41 | gsap.killTweensOf(this.DOM.imgStack); 42 | 43 | // "glitch" effect on the images 44 | gsap.timeline() 45 | .set(this.DOM.imgStack, { 46 | opacity: 0.5, 47 | }, 0.04) 48 | .set(this.DOM.stackImages, { 49 | x: () => `${gsap.utils.random(-8,8)}%` 50 | }, 0.04) 51 | .set(this.DOM.imgStack, { 52 | opacity: 0.2 53 | }, '+=0.04') 54 | .set(this.DOM.stackImages, { 55 | x: () => `${gsap.utils.random(-8,8)}%`, 56 | rotation: () => gsap.utils.random(-2,2) 57 | }, '+=0.04') 58 | .set(this.DOM.imgStack, { 59 | opacity: 0.5 60 | }, '+=0.04') 61 | .set(this.DOM.stackImages, { 62 | x: '0%', 63 | y: '0%', 64 | rotation: 0 65 | }, '+=0.04') 66 | } 67 | hideImageStack() { 68 | gsap.killTweensOf(this.DOM.imgStack); 69 | gsap.set(this.DOM.imgStack, {opacity: 0}); 70 | } 71 | startItemMouseMoveMotion() { 72 | this.mouseMoveItemController.start(); 73 | } 74 | stopItemMouseMoveMotion() { 75 | this.mouseMoveItemController.stop(); 76 | } 77 | startStackMouseMoveMotion() { 78 | this.mouseMoveStackController.start(); 79 | } 80 | stopStackMouseMoveMotion() { 81 | this.mouseMoveStackController.stop(); 82 | } 83 | // glitch image stack when hovering on the close button 84 | glitch() { 85 | gsap.killTweensOf(this.DOM.imgStack); 86 | 87 | gsap.timeline() 88 | .set(this.DOM.imgStack, { 89 | opacity: 0.2 90 | }, 0.04) 91 | .set(this.DOM.stackImages, { 92 | x: () => `+=${gsap.utils.random(-15,15)}%`, 93 | y: () => `+=${gsap.utils.random(-15,15)}%`, 94 | opacity: () => gsap.utils.random(1,10)/10 95 | }, 0.08) 96 | .set(this.DOM.imgStack, { 97 | opacity: 0.4 98 | }, '+=0.04') 99 | .set(this.DOM.stackImages, { 100 | y: () => `+=${gsap.utils.random(-8,8)}%`, 101 | rotation: () => gsap.utils.random(-2,2), 102 | opacity: () => gsap.utils.random(1,10)/10, 103 | scale: () => gsap.utils.random(75,95)/100 104 | }, '+=0.06') 105 | .set(this.DOM.imgStack, { 106 | opacity: 1 107 | }, '+=0.06') 108 | .set(this.DOM.stackImages, { 109 | x: (_, t) => t.dataset.tx, 110 | y: (_, t) => t.dataset.ty, 111 | rotation: (_, t) => t.dataset.r, 112 | opacity: 1, 113 | scale: 1 114 | }, '+=0.06') 115 | } 116 | } -------------------------------------------------------------------------------- /src/js/mouseMoveController.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { map, lerp, getMousePos, calcWinsize } from './utils'; 3 | 4 | // Calculate the viewport size 5 | let winsize = calcWinsize(); 6 | window.addEventListener('resize', () => winsize = calcWinsize()); 7 | 8 | // Track the mouse position 9 | let mousepos = {x: winsize.width/2, y: winsize.height/2}; 10 | window.addEventListener('mousemove', ev => mousepos = getMousePos(ev)); 11 | 12 | export class MouseMoveController { 13 | constructor(el, boundaries) { 14 | this.DOM = {el: el}; 15 | // start and end boundaries {x:xVal, y:yVal, r:rotationVal} 16 | this.boundaries = boundaries; 17 | // amounts to move/rotate in each axis 18 | this.transformVals = {tx: 0, ty: 0, r: 0}; 19 | } 20 | start() { 21 | if ( !this.requestId ) { 22 | this.requestId = requestAnimationFrame(() => this.render()); 23 | } 24 | } 25 | stop() { 26 | if ( this.requestId ) { 27 | window.cancelAnimationFrame(this.requestId); 28 | this.requestId = undefined; 29 | } 30 | } 31 | // transform the element as the mouse moves 32 | render() { 33 | this.requestId = undefined; 34 | 35 | // calculate the amount to move/rotate. 36 | // using linear interpolation to smooth things out. 37 | // translation values will be in the range of [-boundaries.x, boundaries.x] for a cursor movement from 0 to the window's width. Also the same applies for the height and rotation 38 | this.transformVals.tx = lerp(this.transformVals.tx, map(mousepos.x, 0, winsize.width, -this.boundaries.x, this.boundaries.x), 0.07); 39 | this.transformVals.ty = lerp(this.transformVals.ty, map(mousepos.y, 0, winsize.height, -this.boundaries.y, this.boundaries.y), 0.07); 40 | this.transformVals.r = lerp(this.transformVals.r, map(mousepos.x, 0, winsize.width, -this.boundaries.r||0, this.boundaries.r||0), 0.07); 41 | 42 | gsap.set(this.DOM.el, {x: this.transformVals.tx, y: this.transformVals.ty, rotation: this.transformVals.r}); 43 | 44 | // loop 45 | this.start(); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /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 | // Map number x from range [a, b] to [c, d] 11 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c; 12 | 13 | // Linear interpolation 14 | const lerp = (a, b, n) => (1 - n) * a + n * b; 15 | 16 | const calcWinsize = () => { 17 | return {width: window.innerWidth, height: window.innerHeight}; 18 | }; 19 | 20 | const distance = (x1,y1,x2,y2) => { 21 | var a = x1 - x2; 22 | var b = y1 - y2; 23 | 24 | return Math.hypot(a,b); 25 | } 26 | 27 | // Gets the mouse position 28 | const getMousePos = e => { 29 | return { 30 | x : e.clientX, 31 | y : e.clientY 32 | }; 33 | }; 34 | 35 | export { 36 | preloadImages, 37 | map, 38 | lerp, 39 | calcWinsize, 40 | distance, 41 | getMousePos 42 | }; --------------------------------------------------------------------------------