├── .gitattributes ├── .gitignore ├── 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 ├── 3.1667f2fd.jpg ├── 4.a242a4db.jpg ├── 5.cec98852.jpg ├── 6.63a71a70.jpg ├── 7.febd1f9e.jpg ├── 8.1ec50be9.jpg ├── 9.42343a9c.jpg ├── favicon.61719396.ico ├── index.320bd6f3.css ├── index.cad48f07.js └── index.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html └── js ├── gallery.js ├── index.js ├── menu.js ├── menuItem.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.cache 3 | /parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Inline to Menu Link Animation 2 | 3 | An experimental inline-to-menu-link animation based on a concept by Matthew Hall. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2021/06/InlinetoMenuLink_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=55044) 8 | 9 | [Demo](http://tympanus.net/Development/InlineToMenuLink/) 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 *Author*: [Twitter](), [Dribbble](), [Google+](), [GitHub]() 39 | 40 | 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/) 41 | 42 | ## License 43 | [MIT](LICENSE) 44 | 45 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /dist/1.80b98c5b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/1.80b98c5b.jpg -------------------------------------------------------------------------------- /dist/10.09b8babf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/10.09b8babf.jpg -------------------------------------------------------------------------------- /dist/11.6bf710ad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/11.6bf710ad.jpg -------------------------------------------------------------------------------- /dist/12.bd7243dc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/12.bd7243dc.jpg -------------------------------------------------------------------------------- /dist/13.eaca2609.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/13.eaca2609.jpg -------------------------------------------------------------------------------- /dist/14.8a0d313c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/14.8a0d313c.jpg -------------------------------------------------------------------------------- /dist/15.9d1ab7d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/15.9d1ab7d5.jpg -------------------------------------------------------------------------------- /dist/16.3a8d5f7d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/16.3a8d5f7d.jpg -------------------------------------------------------------------------------- /dist/17.5d19143b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/17.5d19143b.jpg -------------------------------------------------------------------------------- /dist/18.145b6e0b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/18.145b6e0b.jpg -------------------------------------------------------------------------------- /dist/19.4e8371a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/19.4e8371a2.jpg -------------------------------------------------------------------------------- /dist/2.be0b6e97.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/2.be0b6e97.jpg -------------------------------------------------------------------------------- /dist/20.cb743775.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/20.cb743775.jpg -------------------------------------------------------------------------------- /dist/3.1667f2fd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/3.1667f2fd.jpg -------------------------------------------------------------------------------- /dist/4.a242a4db.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/4.a242a4db.jpg -------------------------------------------------------------------------------- /dist/5.cec98852.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/5.cec98852.jpg -------------------------------------------------------------------------------- /dist/6.63a71a70.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/6.63a71a70.jpg -------------------------------------------------------------------------------- /dist/7.febd1f9e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/7.febd1f9e.jpg -------------------------------------------------------------------------------- /dist/8.1ec50be9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/8.1ec50be9.jpg -------------------------------------------------------------------------------- /dist/9.42343a9c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/9.42343a9c.jpg -------------------------------------------------------------------------------- /dist/favicon.61719396.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/dist/favicon.61719396.ico -------------------------------------------------------------------------------- /dist/index.320bd6f3.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:12px}body{margin:0;--color-text:#715942;--color-text-alt:#5a4939;--color-alt:#e8c59e;--color-text-button:#fff;--color-bg:#060606;--color-link:#e8c59e;--color-link-hover:#e8c59e;--color-deco:#292724;color:var(--color-text);background-color:var(--color-bg);font-family:usual,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading:after{top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;opacity:.4;background:var(--color-link);animation:loaderAnim .7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{text-decoration: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}.js .oh{display:inline-block;position:relative;overflow:hidden}.js .oh>span{display:inline-block;will-change:transform}.frame{z-index:1000;text-transform:uppercase;position:relative;text-align:left;top:0;left:0;display:grid;align-items:start;align-content:space-between;width:100%;padding:3rem 4vw 1.85rem;grid-template-columns:100%;grid-template-areas:"title" "links" "author" "credits"}.frame a{font-weight:700}.frame__title{grid-area:title;font-size:1rem;margin:0 0 1rem;font-weight:400}.frame__links{grid-area:links}.frame__links a:not(:last-child){margin-right:1rem}.frame__author{grid-area:author;margin:1rem 0}.frame__credits{grid-area:credits;margin:0}.frame__category{margin:0;grid-area:title;justify-self:start}.frame__close{grid-area:title;justify-self:end;text-transform:uppercase;font-weight:700;cursor:pointer;color:var(--color-text)}.frame__close span:before{content:"\2715";margin:0 .25rem;vertical-align:top}.content{display:flex;flex-direction:column;width:100vw;height:calc(100vh - 13rem);position:relative;justify-content:flex-start;align-items:center;padding:6rem 4vw;font-family:meno-banner,serif}.content--menu{pointer-events:none}.content__quote{font-size:5.25vw;margin:0;text-indent:20vw;line-height:1.1}.content__quote span.word{will-change:transform,opacity}.menu-item{font-weight:400;position:relative;display:inline-block;text-indent:0;cursor:pointer;z-index:100;pointer-events:auto}.menu-item:after{content:"";position:absolute;top:89%;left:0;width:100%;height:.375vw;background:var(--color-alt);z-index:-1;transform:scaleX(.001);opacity:0;transform-origin:100% 50%;transition:transform .3s cubic-bezier(.2,1,.3,1),opacity .1s linear .2s}.content--menu .menu-item.menu-item--active:hover:after,.menu-item.menu-item--active:after,.menu-item:hover:after{opacity:1;transform:scaleX(1);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,1,.3,1),opacity .1s linear}.content--menu .menu-item:after{transform-origin:0 50%}.content--menu .menu-item:hover:after{transform:scaleX(.15)}.splitting .word{text-indent:0}.galleries,.menu-item span{pointer-events:none}.galleries{position:absolute;width:100%;height:100vh;top:0;left:0}.galleries__deco{position:fixed;bottom:0;color:var(--color-deco);font-size:7vw;text-transform:uppercase;white-space:nowrap;line-height:.3;text-indent:-2vw;pointer-events:none;opacity:0;will-change:transform,opacity;font-family:meno-banner,serif;font-style:italic}.galleries__button{position:absolute;width:20vw;height:20vw;text-align:center;display:flex;align-items:center;justify-content:center;top:50%;left:30vw;margin:-10vw 0 0 -10vw;color:var(--color-text-button);text-transform:uppercase;font-weight:700;font-size:1.25rem;cursor:pointer;clip-path:circle(calc(50% + 2px) at 50% 50%);border:1px solid var(--color-text-button);border-radius:50%;opacity:0;cursor:not-allowed}.galleries__button:before{content:"+";margin-right:.5rem}.gallery--current~.galleries__button{pointer-events:auto}.gallery{position:relative;width:100%;height:100%;display:flex;overflow:hidden;align-items:center;isolation:isolate;height:0}.gallery--current{position:absolute;top:0;left:0;height:100%}.gallery__img{flex:none;width:14.5vw;height:auto;margin:0 -1vw;mix-blend-mode:soft-light;opacity:.8;will-change:transform,opacity}.gallery__img:nth-child(odd){margin-top:20vh}.gallery__img:nth-child(3n){margin-top:-20vh}@media screen and (min-width:53em){.frame{pointer-events:none;position:fixed;height:100vh;grid-template-columns:20vw 36vw 1fr auto;grid-template-rows:auto auto auto;grid-template-areas:"title links category close" "... ... ... ..." "author ad ad credits"}.frame__title{margin:0}.frame__links{padding:0}.frame__author{align-self:end;justify-self:start;margin:0}.frame__credits{justify-self:end;align-self:end}.frame__close{grid-area:close}.frame__category{grid-area:category;justify-self:start;margin:0}.frame a,.frame button{pointer-events:auto}.content{height:100vh;justify-content:center}}.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({width:window.innerWidth,height:window.innerHeight});function o(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function u(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 7 | /*! 8 | * GSAP 3.6.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 h,l,f,c,p,d,_,m,g,v,y,w,M,x,b,T,O,D,k,A,P,E,C,S,L,I,z,B,R={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},F={duration:.5,overwrite:!1,delay:0},q=1e8,N=1e-8,j=2*Math.PI,Y=j/4,G=0,U=Math.sqrt,X=Math.cos,W=Math.sin,V=function(t){return"string"==typeof t},Q=function(t){return"function"==typeof t},H=function(t){return"number"==typeof t},Z=function(t){return void 0===t},J=function(t){return"object"==typeof t},$=function(t){return!1!==t},K=function(){return"undefined"!=typeof window},tt=function(t){return Q(t)||V(t)},et="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},it=Array.isArray,rt=/(?:-?\.?\d|\.)+/gi,nt=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,st=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,at=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,ot=/[+-]=-?[.\d]+/,ut=/[#\-+.]*\b[a-z\d-=+%.]+/gi,ht=/[\d.+\-=]+(?:e[-+]\d*)*/i,lt={},ft={},ct=function(t){return(ft=Ft(t,lt))&&xi},pt=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},dt=function(t,e){return!e&&console.warn(t)},_t=function(t,e){return t&&(lt[t]=e)&&ft&&(ft[t]=e)||lt},mt=function(){return 0},gt={},vt=[],yt={},wt={},Mt={},xt=30,bt=[],Tt="",Ot=function(t){var e,i,r=t[0];if(J(r)||Q(r)||(t=[t]),!(e=(r._gsap||{}).harness)){for(i=bt.length;i--&&!bt[i].targetTest(r););e=bt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new Ve(t[i],e)))||t.splice(i,1);return t},Dt=function(t){return t._gsap||Ot(ce(t))[0]._gsap},kt=function(t,e,i){return(i=t[e])&&Q(i)?t[e]():Z(i)&&t.getAttribute&&t.getAttribute(e)||i},At=function(t,e){return(t=t.split(",")).forEach(e)||t},Pt=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},Xt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Wt=function t(e){return!e||e._ts&&t(e.parent)},Vt=function(t){return t._repeat?Qt(t._tTime,t=t.duration()+t._rDelay)*t:0},Qt=function(t,e){var i=Math.floor(t/=e);return t&&i===t?i-1:i},Ht=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Zt=function(t){return t._end=Pt(t._start+(t._tDur/Math.abs(t._ts||t._rts||N)||0))},Jt=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=Pt(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Zt(t),i._dirty||Ut(i,t)),t},$t=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Ht(t.rawTime(),e),(!e._dur||ue(0,e.totalDuration(),i)-e._tTime>N)&&e.render(i,!0)),Ut(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}},Kt=function(t,e,i,r){return e.parent&&Gt(e),e._start=Pt(i+e._delay),e._end=Pt(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function(t,e,i,r,n){void 0===i&&(i="_first"),void 0===r&&(r="_last");var s,a=t[r];if(n)for(s=e[n];a&&a[n]>s;)a=a._prev;a?(e._next=a._next,a._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[r]=e,e._prev=a,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),t._recent=e,r||$t(t,e),t},te=function(t,e){return(lt.ScrollTrigger||pt("scrollTrigger",e))&<.ScrollTrigger.create(e,t)},ee=function(t,e,i,r){return ti(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&_!==Ie.frame?(vt.push(t),t._lazy=[e,r],1):void 0:1},ie=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},re=function(t,e,i,r){var n=t._repeat,s=Pt(e)||0,a=t._tTime/t._tDur;return a&&!r&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:Pt(s*(n+1)+t._rDelay*n):s,a&&!r?Jt(t,t._tTime=t._tDur*a):t.parent&&Zt(t),i||Ut(t.parent,t),t},ne=function(t){return t instanceof He?Ut(t):re(t,t._dur)},se={_start:0,endTime:mt},ae=function t(e,i){var r,n,s=e.labels,a=e._recent||se,o=e.duration()>=q?a.endTime(!1):e._dur;return V(i)&&(isNaN(i)||i in s)?"<"===(r=i.charAt(0))||">"===r?("<"===r?a._start:a.endTime(a._repeat>=0))+(parseFloat(i.substr(1))||0):(r=i.indexOf("="))<0?(i in s||(s[i]=o),s[i]):(n=+(i.charAt(r-1)+i.substr(r+1)),r>1?t(e,i.substr(0,r-1))+n:o+n):null==i?o:+i},oe=function(t,e){return t||0===t?e(t):e},ue=function(t,e,i){return ie?e:i},he=function(t){if("string"!=typeof t)return"";var e=ht.exec(t);return e?t.substr(e.index+e[0].length):""},le=[].slice,fe=function(t,e){return t&&J(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&J(t[0]))&&!t.nodeType&&t!==f},ce=function(t,e){return!V(t)||e||!c&&ze()?it(t)?function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var r;return V(t)&&!e||fe(t,1)?(r=i).push.apply(r,ce(t)):i.push(t)}))||i}(t,e):fe(t)?le.call(t,0):t?[t]:[]:le.call(p.querySelectorAll(t),0)},pe=function(t){return t.sort((function(){return.5-Math.random()}))},de=function(t){if(Q(t))return t;var e=J(t)?t:{each:t},i=Ye(e.ease),r=e.from||0,n=parseFloat(e.base)||0,s={},a=r>0&&r<1,o=isNaN(r)||a,u=e.axis,h=r,l=r;return V(r)?h=l={center:.5,edges:.5,end:1}[r]||0:!a&&o&&(h=r[0],l=r[1]),function(t,a,f){var c,p,d,_,m,g,v,y,w,M=(f||e).length,x=s[M];if(!x){if(!(w="auto"===e.grid?0:(e.grid||[1,q])[1])){for(v=-1e8;v<(v=f[w++].getBoundingClientRect().left)&&wv&&(v=m),mM?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=he(e.amount||e.each)||0,i=i&&M<0?Ne(i):i}return M=(x[t]-x.min)/x.max||0,Pt(x.b+(i?i(M):M)*x.v)+x.u}},_e=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+(H(i)?0:he(i))}},me=function(t,e){var i,r,n=it(t);return!n&&J(t)&&(i=n=t.radius||q,t.values?(t=ce(t.values),(r=!H(t[0]))&&(i*=i)):t=_e(t.increment)),oe(e,n?Q(t)?function(e){return r=t(e),Math.abs(r-e)<=i?r:e}:function(e){for(var n,s,a=parseFloat(r?e.x:e),o=parseFloat(r?e.y:0),u=q,h=0,l=t.length;l--;)(n=r?(n=t[l].x-a)*n+(s=t[l].y-o)*s:Math.abs(t[l]-a))(n=Math.abs(n))&&(s=r,o=n);return s},xe=function(t,e,i){var r,n,s=t.vars,a=s[e];if(a)return r=s[e+"Params"],n=s.callbackScope||t,i&&vt.length&&St(),r?a.apply(n,r):a.call(n)},be=function(t){return Gt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&xe(t,"onInterrupt"),t},Te=function(t){var e=(t=!t.name&&t.default||t).name,i=Q(t),r=e&&!i&&t.init?function(){this._props=[]}:t,n={init:mt,render:pi,add:$e,kill:_i,modifier:di,rawVars:0},s={targetTest:0,get:0,getSetter:hi,aliases:{},register:0};if(ze(),t!==r){if(wt[e])return;Bt(r,Bt(Nt(t,n),s)),Ft(r.prototype,Ft(n,Nt(t,s))),wt[r.prop=e]=r,t.targetTest&&(bt.push(r),gt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}_t(e,r),t.register&&t.register(xi,r,vi)},Oe=255,De={aqua:[0,Oe,Oe],lime:[0,Oe,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Oe],navy:[0,0,128],white:[Oe,Oe,Oe],olive:[128,128,0],yellow:[Oe,Oe,0],orange:[Oe,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Oe,0,0],pink:[Oe,192,203],cyan:[0,Oe,Oe],transparent:[Oe,Oe,Oe,0]},ke=function(t,e,i){return(6*(t=t<0?t+1:t>1?t-1:t)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)*Oe+.5|0},Ae=function(t,e,i){var r,n,s,a,o,u,h,l,f,c,p=t?H(t)?[t>>16,t>>8&Oe,t&Oe]:0:De.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),De[t])p=De[t];else if("#"===t.charAt(0)){if(t.length<6&&(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&Oe,p&Oe,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Oe,t&Oe]}else if("hsl"===t.substr(0,3))if(p=c=t.match(rt),e){if(~t.indexOf("="))return p=t.match(nt),i&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,r=2*(u=+p[2]/100)-(n=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=ke(a+1/3,r,n),p[1]=ke(a,r,n),p[2]=ke(a-1/3,r,n);else p=t.match(rt)||De.transparent;p=p.map(Number)}return e&&!c&&(r=p[0]/Oe,n=p[1]/Oe,s=p[2]/Oe,u=((h=Math.max(r,n,s))+(l=Math.min(r,n,s)))/2,h===l?a=o=0:(f=h-l,o=u>.5?f/(2-h-l):f/(h+l),a=h===r?(n-s)/f+(nO&&(k+=a-D),((i=(n=(A+=a)-k)-E)>0||o)&&(s=++M.frame,x=n-1e3*M.time,M.time=n/=1e3,E+=i+(i>=P?4:P-i),r=1),o||(v=y(t)),r)for(b=0;b=e&&b--},_listeners:C=[]}),ze=function(){return!g&&Ie.wake()},Be={},Re=/^[\d.\-M][\d.\-,\s]/,Fe=/["']/g,qe=function(t){for(var e,i,r,n={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,u=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[qe(s[1])]:(e=t,i=e.indexOf("(")+1,r=e.indexOf(")"),n=e.indexOf("(",i),e.substring(i,~n&&n=1?i:1,s=(r||(e?.3:.45))/(i<1?i:1),a=s/j*(Math.asin(1/n)||0),o=function(t){return 1===t?1:n*Math.pow(2,-10*t)*W((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:Ue(o);return s=j/s,u.config=function(i,r){return t(e,i,r)},u},We=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)}:Ue(r);return n.config=function(i){return t(e,i)},n};At("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Ge(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}))})),Be.Linear.easeNone=Be.none=Be.Linear.easeIn,Ge("Elastic",Xe("in"),Xe("out"),Xe()),L=7.5625,z=1/(I=2.75),Ge("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,re(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(ze(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(Jt(this,t),!i._dp||i.parent||$t(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)&&Kt(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===N||!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+Vt(this))%this._dur||(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)+Vt(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?Qt(this._tTime,i)+1:1},e.timeScale=function(t){if(!arguments.length)return-1e-8===this._rts?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?Ht(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,Xt(this.totalTime(ue(-this._delay,this._tDur,e),!0))},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(ze(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&(this._tTime-=N)&&Math.abs(this._zTime)!==N))),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)&&Kt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+($(t)?this.totalDuration():this.duration())/Math.abs(this._ts)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ht(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,i=arguments.length?t:e.rawTime();e;)i=e._start+i/(e._ts||1),e=e._dp;return i},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,ne(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){return arguments.length?(this._rDelay=t,ne(this)):this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(ae(this,t),$(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,$(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(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=Q(t)?t:zt,n=function(){var t=e.then;e.then=null,Q(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(){be(this)},t}();Bt(Qe.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var He=function(t){function e(e,i){var r;return void 0===e&&(e={}),(r=t.call(this,e,i)||this).labels={},r.smoothChildTiming=!!e.smoothChildTiming,r.autoRemoveChildren=!!e.autoRemoveChildren,r._sort=$(e.sortChildren),r.parent&&$t(r.parent,o(r)),e.scrollTrigger&&te(o(r),e.scrollTrigger),r}u(e,t);var i=e.prototype;return i.to=function(t,e,i){return new ni(t,Ct(arguments,0,this),ae(this,H(e)?arguments[3]:i)),this},i.from=function(t,e,i){return new ni(t,Ct(arguments,1,this),ae(this,H(e)?arguments[3]:i)),this},i.fromTo=function(t,e,i,r){return new ni(t,Ct(arguments,2,this),ae(this,H(e)?arguments[4]:r)),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,jt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ni(t,e,ae(this,i),1),this},i.call=function(t,e,i){return Kt(this,ni.delayedCall(0,t,e),ae(this,i))},i.staggerTo=function(t,e,i,r,n,s,a){return i.duration=e,i.stagger=i.stagger||r,i.onComplete=s,i.onCompleteParams=a,i.parent=this,new ni(t,i,ae(this,n)),this},i.staggerFrom=function(t,e,i,r,n,s,a){return i.runBackwards=1,jt(i).immediateRender=$(i.immediateRender),this.staggerTo(t,e,i,r,n,s,a)},i.staggerFromTo=function(t,e,i,r,n,s,a,o){return r.startAt=i,jt(r).immediateRender=$(r.immediateRender),this.staggerTo(t,e,r,n,s,a,o)},i.render=function(t,e,i){var r,n,s,a,o,u,h,f,c,p,d,_,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=this!==l&&t>g-N&&t>=0?g:tv&&(r=v)),p=Qt(this._tTime,o),!m&&this._tTime&&p!==a&&(p=a),d&&1&a&&(r=v-r,_=1),a!==p&&!this._lock){var M=d&&1&p,x=M===(d&&1&a);if(ae)for(r=t._first;r&&r._start<=i;){if(!r._dur&&"isPause"===r.data&&r._start>e)return r;r=r._next}else for(r=t._last;r&&r._start>=i;){if(!r._dur&&"isPause"===r.data&&r._start=m&&t>=0)for(n=this._first;n;){if(s=n._next,(n._act||r>=n._start)&&n._ts&&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 b=t<0?t:r;n;){if(s=n._prev,(n._act||b<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,i);if(n.render(n._ts>0?(b-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(b-n._start)*n._ts,e,i),r!==this._time||!this._ts&&!u){h=0,s&&(y+=this._zTime=b?-1e-8:N);break}}n=s}}if(h&&!e&&(this.pause(),h.render(r>=m?0:-1e-8)._zTime=r>=m?1:-1,this._ts))return this._start=c,Zt(this),this.render(t,e,i);this._onUpdate&&!e&&xe(this,"onUpdate",!0),(y===g&&g>=this.totalDuration()||!y&&m)&&(c!==this._start&&Math.abs(f)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Gt(this,1),e||t<0&&!m||!y&&!m||(xe(this,y===g?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(H(e)||(e=ae(this,e)),!(t instanceof Qe)){if(it(t))return t.forEach((function(t){return i.add(t,e)})),this;if(V(t))return this.addLabel(t,e);if(!Q(t))return this;t=ni.delayedCall(0,t)}return this!==t?Kt(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 ni?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 V(t)?this.removeLabel(t):Q(t)?this.killTweensOf(t):(Yt(this,t),t===this._recent&&(this._recent=this._last),Ut(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Pt(Ie.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,i),this._forcing=0,this):this._tTime},i.addLabel=function(t,e){return this.labels[t]=ae(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var r=ni.delayedCall(0,e||mt,i);return r.data="isPause",this._hasPause=1,Kt(this,r,ae(this,t))},i.removePause=function(t){var e=this._first;for(t=ae(this,t);e;)e._start===t&&"isPause"===e.data&&Gt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var r=this.getTweensOf(t,i),n=r.length;n--;)Ze!==r[n]&&r[n].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,r=[],n=ce(t),s=this._first,a=H(e);s;)s instanceof ni?Et(s._targets,n)&&(a?(!Ze||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=this,r=ae(i,t),n=e,s=n.startAt,a=n.onStart,o=n.onStartParams,u=n.immediateRender,h=ni.to(i,Bt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:r,overwrite:"auto",duration:e.duration||Math.abs((r-(s&&"time"in s?s.time:i._time))/i.timeScale())||N,onStart:function(){i.pause();var t=e.duration||Math.abs((r-i._time)/i.timeScale());h._dur!==t&&re(h,t,0,1).render(h._time,!0,!0),a&&a.apply(h,o||[])}},e));return u?h.render(0):h},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,Bt({startAt:{time:ae(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),Me(this,ae(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),Me(this,ae(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+N)},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 Ut(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={}),Ut(this)},i.totalDuration=function(t){var e,i,r,n=0,s=this,a=s._last,o=q;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(r=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,Kt(s,a,i-a._delay,1)._lock=0):o=i,i<0&&a._ts&&(n-=i,(!r&&!s._dp||r&&r.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-Infinity),o=0),a._end>n&&a._ts&&(n=a._end),a=e;re(s,s===l&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(l._ts&&(Lt(l,Ht(t,l)),_=Ie.frame),Ie.frame>=xt){xt+=R.autoSleep||120;var e=l._first;if((!e||!e._ts)&&R.autoSleep&&Ie._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Ie.sleep()}}},e}(Qe);Bt(He.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ze,Je=function(t,e,i,r,n,s,a){var o,u,h,l,f,c,p,d,_=new vi(this._pt,t,e,0,1,ci,null,n),m=0,g=0;for(_.b=i,_.e=r,i+="",(p=~(r+="").indexOf("random("))&&(r=ye(r)),s&&(s(d=[i,r],t,e),i=d[0],r=d[1]),u=i.match(at)||[];o=at.exec(r);)l=o[0],f=r.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-c,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m0)P||(e._startAt=0);else if(E&&!(i<0&&C))return void(i&&(e._zTime=i))}else!1===P&&(e._startAt=0);else if(D&&E)if(C)!P&&(e._startAt=0);else if(i&&(M=!1),s=Bt({overwrite:!1,data:"isFromStart",lazy:M&&$(x),immediateRender:M,stagger:0,parent:L},r),m&&(s[c.prop]=m),Gt(e._startAt=ni.set(S,s)),M){if(!i)return}else t(e._startAt,N);for(e._pt=0,x=E&&$(x)||x&&!E,n=0;n")}));else{if(c=A.length,_=M?de(M):mt,J(M))for(p in M)~ii.indexOf(p)&&(m||(m={}),m[p]=M[p]);for(u=0;up-N&&t>=0?p:td&&(r=d)),(u=this._yoyo&&1&s)&&(f=this._yEase,r=d-r),o=Qt(this._tTime,a),r===c&&!i&&this._initted)return this;s!==o&&(l&&this._yEase&&je(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(Pt(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(ee(this,t<0?t:r,i,e))return this._tTime=0,this;if(d!==this._dur)return this.render(t,e,i)}for(this._tTime=_,this._time=r,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(r/d),this._from&&(this.ratio=h=1-h),r&&!c&&!e&&xe(this,"onStart"),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),xe(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&xe(this,"onRepeat"),_!==this._tDur&&_||this._tTime!==_||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(_===this._tDur&&this._ts>0||!_&&this._ts<0)&&Gt(this,1),e||t<0&&!c||!_&&!c||(xe(this,_===p?"onComplete":"onReverseComplete",!0),this._prom&&!(_0)&&this._prom()))}}else!function(t,e,i,r){var n,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&ie(t)||(t._ts<0||t._dp._ts<0)&&"isFromStart"!==t.data&&"isStart"!==t.data)?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=ue(0,t._tDur,e),s=Qt(l,h),a=Qt(t._tTime,h),t._yoyo&&1&s&&(u=1-u),s!==a&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||r||t._zTime===N||!e&&t._zTime){if(!t._initted&&ee(t,e,r,i))return;for(a=t._zTime,t._zTime=e||(i?N:0),i||(i=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&xe(t,"onUpdate"),l&&t._repeat&&!i&&t.parent&&xe(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Gt(t,1),i||(xe(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?be(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ze&&!0!==Ze.vars.overwrite)._first||be(this),this.parent&&i!==this.timeline.totalDuration()&&re(this,this._dur*this.timeline._tDur/i,0,1),this}var r,n,s,a,o,u,h,l=this._targets,f=t?ce(t):l,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,r=i===e.length;r&&i--&&t[i]===e[i];);return i<0}(l,f))return"all"===e&&(this._pt=0),be(this);for(r=this._op=this._op||[],"all"!==e&&(V(e)&&(o={},At(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,r,n,s,a=t[0]?Dt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(r in i=Ft({},e),o)if(r in i)for(n=(s=o[r].split(",")).length;n--;)i[s[n]]=i[r];return i}(l,e)),h=l.length;h--;)if(~f.indexOf(l[h]))for(o in n=c[h],"all"===e?(r[h]=e,a=n,s={}):(s=r[h]=r[h]||{},a=e),a)(u=n&&n[o])&&("kill"in u.d&&!0!==u.d.kill(o)||Yt(this,u,"_pt"),delete n[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&be(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,i){return new e(t,Ct(arguments,1))},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,i,r){return new e(t,Ct(arguments,2))},e.set=function(t,i){return i.duration=0,i.repeatDelay||(i.repeat=0),new e(t,i)},e.killTweensOf=function(t,e,i){return l.killTweensOf(t,e,i)},e}(Qe);Bt(ni.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),At("staggerTo,staggerFrom,staggerFromTo",(function(t){ni[t]=function(){var e=new He,i=le.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var si=function(t,e,i){return t[e]=i},ai=function(t,e,i){return t[e](i)},oi=function(t,e,i,r){return t[e](r.fp,i)},ui=function(t,e,i){return t.setAttribute(e,i)},hi=function(t,e){return Q(t[e])?ai:Z(t[e])&&t.setAttribute?ui:si},li=function(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4,e)},fi=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ci=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)},pi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},di=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},_i=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},mi=function(t,e,i,r){r.mSet(t,e,r.m.call(r.tween,i,r.mt),r)},gi=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},vi=function(){function t(t,e,i,r,n,s,a,o,u){this.t=e,this.s=r,this.c=n,this.p=i,this.r=s||li,this.d=a||this,this.set=o||si,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,i){this.mSet=this.mSet||this.set,this.set=mi,this.m=t,this.mt=i,this.tween=e},t}();At(Tt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",(function(t){return gt[t]=1})),lt.TweenMax=lt.TweenLite=ni,lt.TimelineLite=lt.TimelineMax=He,l=new He({sortChildren:!1,defaults:F,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),R.stringFilter=Le;var yi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var r=t.map((function(t){return xi.quickSetter(t,e,i)})),n=r.length;return function(t){for(var e=n;e--;)r[e](t)}}t=t[0]||{};var s=wt[e],a=Dt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var r=new s;m._pt=0,r.init(t,i?e+i:e,m,0,[t]),r.render(1,r),m._pt&&pi(1,m)}:a.set(t,o);return s?u:function(e){return u(t,o,i?e+i:e,a,1)}},isTweening:function(t){return l.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=Ye(t.ease,F.ease)),qt(F,t||{})},config:function(t){return qt(R,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,r=t.plugins,n=t.defaults,s=t.extendTimeline;(r||"").split(",").forEach((function(t){return t&&!wt[t]&&!lt[t]&&dt(e+" effect requires "+t+" plugin.")})),Mt[e]=function(t,e,r){return i(ce(t),Bt(e||{},n),r)},s&&(He.prototype[e]=function(t,i,r){return this.add(Mt[e](t,J(i)?i:(r=i)&&{},this),r)})},registerEase:function(t,e){Be[t]=Ye(e)},parseEase:function(t,e){return arguments.length?Ye(t,e):Be},getById:function(t){return l.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,r,n=new He(t);for(n.smoothChildTiming=$(t.smoothChildTiming),l.remove(n),n._dp=0,n._time=n._tTime=l._time,i=l._first;i;)r=i._next,!e&&!i._dur&&i instanceof ni&&i.vars.onComplete===i._targets[0]||Kt(n,i,i._start-i._delay),i=r;return Kt(l,n,0),n},utils:{wrap:function t(e,i,r){var n=i-e;return it(e)?ve(e,t(0,e.length),i):oe(r,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,i,r){var n=i-e,s=2*n;return it(e)?ve(e,t(0,e.length-1),i):oe(r,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:de,random:ge,snap:me,normalize:function(t,e,i){return we(t,e,0,1,i)},getUnit:he,clamp:function(t,e,i){return oe(i,(function(i){return ue(t,e,i)}))},splitColor:Ae,toArray:ce,mapRange:we,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?tr[n]:"")+t},ir=function(){"undefined"!=typeof window&&window.document&&(bi=window,Ti=bi.document,Oi=Ti.documentElement,ki=$i("div")||{style:{}},$i("div"),Zi=er(Zi),Ji=Zi+"Origin",ki.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Pi=!!er("perspective"),Di=1)},rr=function t(e){var i,r=$i("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Oi.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)),Oi.removeChild(r),this.style.cssText=a,i},nr=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},sr=function(t){var e;try{e=t.getBBox()}catch(i){e=rr.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===rr||(e=rr.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+nr(t,["x","cx","x1"])||0,y:+nr(t,["y","cy","y1"])||0,width:0,height:0}},ar=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!sr(t))},or=function(t,e){if(e){var i=t.style;e in Ei&&e!==Ji&&(e=Zi),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Ii,"-$1").toLowerCase())):i.removeAttribute(e)}},ur=function(t,e,i,r,n,s){var a=new vi(t._pt,e,i,0,1,s?Gi:Yi);return t._pt=a,a.b=r,a.e=n,t._props.push(i),a},hr={deg:1,rad:1,turn:1},lr=function t(e,i,r,n){var s,a,o,u,h=parseFloat(r)||0,l=(r+"").trim().substr((h+"").length)||"px",f=ki.style,c=zi.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(c?"Width":"Height"),_=100,m="px"===n,g="%"===n;return n===l||!h||hr[n]||hr[l]?h:("px"!==l&&!m&&(h=t(e,i,r,"px")),u=e.getCTM&&ar(e),!g&&"%"!==l||!Ei[i]&&!~i.indexOf("adius")?(f[c?"width":"height"]=_+(m?l:n),a=~i.indexOf("adius")||"em"===n&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==Ti&&a.appendChild||(a=Ti.body),(o=a._gsap)&&g&&o.width&&c&&o.time===Ie.time?Pt(h/o.width*_):((g||"%"===l)&&(f.position=Ki(e,"position")),a===e&&(f.position="static"),a.appendChild(ki),s=ki[d],a.removeChild(ki),f.position="absolute",c&&g&&((o=Dt(a)).time=Ie.time,o.width=a[d]),Pt(m?s*h/_:s&&h?_/s*h:0))):(s=u?e.getBBox()[c?"width":"height"]:e[d],Pt(g?h/s*_:h/100*s)))},fr=function(t,e,i,r){var n;return Di||ir(),e in Ri&&"transform"!==e&&~(e=Ri[e]).indexOf(",")&&(e=e.split(",")[0]),Ei[e]&&"transform"!==e?(n=xr(t,r),n="transformOrigin"!==e?n[e]:br(Ki(t,Ji))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||r||~(n+"").indexOf("calc("))&&(n=_r[e]&&_r[e](t,e,i)||Ki(t,e)||kt(t,e)||("opacity"===e?1:0)),i&&!~(n+"").trim().indexOf(" ")?lr(t,e,n,i)+i:n},cr=function(t,e,i,r){if(!i||"none"===i){var n=er(e,t,1),s=n&&Ki(t,n,1);s&&s!==i?(e=n,i=s):"borderColor"===e&&(i=Ki(t,"borderTopColor"))}var a,o,u,h,l,f,c,p,d,_,m,g,v=new vi(this._pt,t.style,e,0,1,ci),y=0,w=0;if(v.b=i,v.e=r,i+="","auto"===(r+="")&&(t.style[e]=r,r=Ki(t,e)||r,t.style[e]=i),Le(a=[i,r]),r=a[1],u=(i=a[0]).match(st)||[],(r.match(st)||[]).length){for(;o=st.exec(r);)c=o[0],d=r.substring(y,o.index),l?l=(l+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(l=1),c!==(f=u[w++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),(g="="===c.charAt(1)?+(c.charAt(0)+"1"):0)&&(c=c.substr(2)),p=parseFloat(c),_=c.substr((p+"").length),y=st.lastIndex-_.length,_||(_=_||R.units[e]||m,y===r.length&&(r+=_,v.e+=_)),m!==_&&(h=lr(t,e,f,_)||0),v._pt={_next:v._pt,p:d||1===w?d:",",s:h,c:g?g*p:p-h,m:l&&l<4||"zIndex"===e?Math.round:0});v.c=y-1;)i=o[n],Ei[i]&&(r=1,i="transformOrigin"===i?Ji:Zi),or(s,i);r&&(or(s,Zi),u&&(u.svg&&s.removeAttribute("transform"),xr(s,1),u.uncache=1))}},_r={clearProps:function(t,e,i,r,n){if("isFromStart"!==n.data){var s=t._pt=new vi(t._pt,e,i,0,0,dr);return s.u=r,s.pr=-10,s.tween=n,t._props.push(i),1}}},mr=[1,0,0,1,0,0],gr={},vr=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},yr=function(t){var e=Ki(t,Zi);return vr(e)?mr:e.substr(7).match(nt).map(Pt)},wr=function(t,e){var i,r,n,s,a=t._gsap||Dt(t),o=t.style,u=yr(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?mr:u:(u!==mr||t.offsetParent||t===Oi||a.svg||(n=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,r=t.nextSibling,Oi.appendChild(t)),u=yr(t),n?o.display=n:or(t,"display"),s&&(r?i.insertBefore(t,r):i?i.appendChild(t):Oi.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},Mr=function(t,e,i,r,n,s){var a,o,u,h=t._gsap,l=n||wr(t,!0),f=h.xOrigin||0,c=h.yOrigin||0,p=h.xOffset||0,d=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],w=l[5],M=e.split(" "),x=parseFloat(M[0])||0,b=parseFloat(M[1])||0;i?l!==mr&&(o=_*v-m*g)&&(u=x*(-m/o)+b*(_/o)-(_*w-m*y)/o,x=x*(v/o)+b*(-g/o)+(g*w-v*y)/o,b=u):(x=(a=sr(t)).x+(~M[0].indexOf("%")?x/100*a.width:x),b=a.y+(~(M[1]||M[0]).indexOf("%")?b/100*a.height:b)),r||!1!==r&&h.smooth?(y=x-f,w=b-c,h.xOffset=p+(y*_+w*g)-y,h.yOffset=d+(y*m+w*v)-w):h.xOffset=h.yOffset=0,h.xOrigin=x,h.yOrigin=b,h.smooth=!!r,h.origin=e,h.originIsAbsolute=!!i,t.style[Ji]="0px 0px",s&&(ur(s,h,"xOrigin",f,x),ur(s,h,"yOrigin",c,b),ur(s,h,"xOffset",p,h.xOffset),ur(s,h,"yOffset",d,h.yOffset)),t.setAttribute("data-svg-origin",x+" "+b)},xr=function(t,e){var i=t._gsap||new Ve(t);if("x"in i&&!e&&!i.uncache)return i;var r,n,s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,w,M,x,b,T,O,D,k,A,P,E,C,S,L,I,z=t.style,B=i.scaleX<0,F="px",q="deg",N=Ki(t,Ji)||"0";return r=n=s=u=h=l=f=c=p=0,a=o=1,i.svg=!(!t.getCTM||!ar(t)),m=wr(t,i.svg),i.svg&&(D=!i.uncache&&!e&&t.getAttribute("data-svg-origin"),Mr(t,D||N,!!D||i.originIsAbsolute,!1!==i.smooth,m)),d=i.xOrigin||0,_=i.yOrigin||0,m!==mr&&(w=m[0],M=m[1],x=m[2],b=m[3],r=T=m[4],n=O=m[5],6===m.length?(a=Math.sqrt(w*w+M*M),o=Math.sqrt(b*b+x*x),u=w||M?Li(M,w)*Ci:0,(f=x||b?Li(x,b)*Ci+u:0)&&(o*=Math.abs(Math.cos(f*Si))),i.svg&&(r-=d-(d*w+_*x),n-=_-(d*M+_*b))):(I=m[6],S=m[7],P=m[8],E=m[9],C=m[10],L=m[11],r=m[12],n=m[13],s=m[14],h=(g=Li(I,C))*Ci,g&&(D=T*(v=Math.cos(-g))+P*(y=Math.sin(-g)),k=O*v+E*y,A=I*v+C*y,P=T*-y+P*v,E=O*-y+E*v,C=I*-y+C*v,L=S*-y+L*v,T=D,O=k,I=A),l=(g=Li(-x,C))*Ci,g&&(v=Math.cos(-g),L=b*(y=Math.sin(-g))+L*v,w=D=w*v-P*y,M=k=M*v-E*y,x=A=x*v-C*y),u=(g=Li(M,w))*Ci,g&&(D=w*(v=Math.cos(g))+M*(y=Math.sin(g)),k=T*v+O*y,M=M*v-w*y,O=O*v-T*y,w=D,T=k),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,l=180-l),a=Pt(Math.sqrt(w*w+M*M+x*x)),o=Pt(Math.sqrt(O*O+I*I)),g=Li(T,O),f=Math.abs(g)>2e-4?g*Ci:0,p=L?1/(L<0?-L:L):0),i.svg&&(D=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!vr(Ki(t,Zi)),D&&t.setAttribute("transform",D))),Math.abs(f)>90&&Math.abs(f)<270&&(B?(a*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),i.x=r-((i.xPercent=r&&(i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-r)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+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=Pt(a),i.scaleY=Pt(o),i.rotation=Pt(u)+q,i.rotationX=Pt(h)+q,i.rotationY=Pt(l)+q,i.skewX=f+q,i.skewY=c+q,i.transformPerspective=p+F,(i.zOrigin=parseFloat(N.split(" ")[2])||0)&&(z[Ji]=br(N)),i.xOffset=i.yOffset=0,i.force3D=R.force3D,i.renderTransform=i.svg?Er:Pi?Pr:Or,i.uncache=0,i},br=function(t){return(t=t.split(" "))[0]+" "+t[1]},Tr=function(t,e,i){var r=he(e);return Pt(parseFloat(e)+parseFloat(lr(t,"x",i+"px",r)))+r},Or=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Pr(t,e)},Dr="0deg",kr="0px",Ar=") ",Pr=function(t,e){var i=e||this,r=i.xPercent,n=i.yPercent,s=i.x,a=i.y,o=i.z,u=i.rotation,h=i.rotationY,l=i.rotationX,f=i.skewX,c=i.skewY,p=i.scaleX,d=i.scaleY,_=i.transformPerspective,m=i.force3D,g=i.target,v=i.zOrigin,y="",w="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==Dr||h!==Dr)){var M,x=parseFloat(h)*Si,b=Math.sin(x),T=Math.cos(x);x=parseFloat(l)*Si,M=Math.cos(x),s=Tr(g,s,b*M*-v),a=Tr(g,a,-Math.sin(x)*-v),o=Tr(g,o,T*M*-v+v)}_!==kr&&(y+="perspective("+_+Ar),(r||n)&&(y+="translate("+r+"%, "+n+"%) "),(w||s!==kr||a!==kr||o!==kr)&&(y+=o!==kr||w?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+Ar),u!==Dr&&(y+="rotate("+u+Ar),h!==Dr&&(y+="rotateY("+h+Ar),l!==Dr&&(y+="rotateX("+l+Ar),f===Dr&&c===Dr||(y+="skew("+f+", "+c+Ar),1===p&&1===d||(y+="scale("+p+", "+d+Ar),g.style[Zi]=y||"translate(0, 0)"},Er=function(t,e){var i,r,n,s,a,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,c=o.rotation,p=o.skewX,d=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,w=o.xOffset,M=o.yOffset,x=o.forceCSS,b=parseFloat(l),T=parseFloat(f);c=parseFloat(c),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),c+=d),c||p?(c*=Si,p*=Si,i=Math.cos(c)*_,r=Math.sin(c)*_,n=Math.sin(c-p)*-m,s=Math.cos(c-p)*m,p&&(d*=Si,a=Math.tan(p-d),n*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),i*=a=Math.sqrt(1+a*a),r*=a)),i=Pt(i),r=Pt(r),n=Pt(n),s=Pt(s)):(i=_,s=m,r=n=0),(b&&!~(l+"").indexOf("px")||T&&!~(f+"").indexOf("px"))&&(b=lr(g,"x",l,"px"),T=lr(g,"y",f,"px")),(v||y||w||M)&&(b=Pt(b+v-(v*i+y*n)+w),T=Pt(T+y-(v*r+y*s)+M)),(u||h)&&(a=g.getBBox(),b=Pt(b+u/100*a.width),T=Pt(T+h/100*a.height)),a="matrix("+i+","+r+","+n+","+s+","+b+","+T+")",g.setAttribute("transform",a),x&&(g.style[Zi]=a)},Cr=function(t,e,i,r,n,s){var a,o,u=360,h=V(n),l=parseFloat(n)*(h&&~n.indexOf("rad")?Ci:1),f=s?l*s:l-r,c=r+f+"deg";return h&&("short"===(a=n.split("_")[1])&&(f%=u)!==f%180&&(f+=f<0?u:-360),"cw"===a&&f<0?f=(f+36e9)%u-~~(f/u)*u:"ccw"===a&&f>0&&(f=(f-36e9)%u-~~(f/u)*u)),t._pt=o=new vi(t._pt,e,i,r,f,qi),o.e=c,o.u="deg",t._props.push(i),o},Sr=function(t,e){for(var i in e)t[i]=e[i];return t},Lr=function(t,e,i){var r,n,s,a,o,u,h,l=Sr({},i._gsap),f=i.style;for(n in l.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),f[Zi]=e,r=xr(i,1),or(i,Zi),i.setAttribute("transform",s)):(s=getComputedStyle(i)[Zi],f[Zi]=e,r=xr(i,1),f[Zi]=s),Ei)(s=l[n])!==(a=r[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=he(s)!==(h=he(a))?lr(i,n,s,h):parseFloat(s),u=parseFloat(a),t._pt=new vi(t._pt,r,n,o,u-o,Fi),t._pt.u=h||0,t._props.push(n));Sr(r,l)};At("padding,margin,Width,Radius",(function(t,e){var i="Top",r="Right",n="Bottom",s="Left",a=(e<3?[i,r,n,s]:[i+s,i+r,n+r,n+s]).map((function(i){return e<2?t+i:"border"+i+t}));_r[e>1?"border"+t:t]=function(t,e,i,r,n){var s,o;if(arguments.length<4)return s=a.map((function(e){return fr(t,e,i)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(r+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,n)}}));var Ir,zr,Br,Rr={name:"css",register:ir,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,r,n){var s,a,o,u,h,l,f,c,p,d,_,m,g,v,y,w,M,x,b,T=this._props,O=t.style,D=i.vars.startAt;for(f in Di||ir(),e)if("autoRound"!==f&&(a=e[f],!wt[f]||!Ke(f,e,i,r,t,n)))if(h=typeof a,l=_r[f],"function"===h&&(h=typeof(a=a.call(i,r,t,n))),"string"===h&&~a.indexOf("random(")&&(a=ye(a)),l)l(this,t,f,a,i)&&(y=1);else if("--"===f.substr(0,2))s=(getComputedStyle(t).getPropertyValue(f)+"").trim(),a+="",Ce.lastIndex=0,Ce.test(s)||(c=he(s),p=he(a)),p?c!==p&&(s=lr(t,f,s,p)+p):c&&(a+=c),this.add(O,"setProperty",s,a,r,n,0,0,f);else if("undefined"!==h){if(D&&f in D?(s="function"==typeof D[f]?D[f].call(i,r,t,n):D[f],f in R.units&&!he(s)&&(s+=R.units[f]),"="===(s+"").charAt(1)&&(s=fr(t,f))):s=fr(t,f),u=parseFloat(s),(d="string"===h&&"="===a.charAt(1)?+(a.charAt(0)+"1"):0)&&(a=a.substr(2)),o=parseFloat(a),f in Ri&&("autoAlpha"===f&&(1===u&&"hidden"===fr(t,"visibility")&&o&&(u=0),ur(this,O,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==f&&"transform"!==f&&~(f=Ri[f]).indexOf(",")&&(f=f.split(",")[0])),_=f in Ei)if(m||((g=t._gsap).renderTransform&&!e.parseTransform||xr(t,e.parseTransform),v=!1!==e.smoothOrigin&&g.smooth,(m=this._pt=new vi(this._pt,O,Zi,0,1,g.renderTransform,g,0,-1)).dep=1),"scale"===f)this._pt=new vi(this._pt,g,"scaleY",g.scaleY,d?d*o:o-g.scaleY),T.push("scaleY",f),f+="X";else{if("transformOrigin"===f){M=void 0,x=void 0,b=void 0,M=(w=a).split(" "),x=M[0],b=M[1]||"50%","top"!==x&&"bottom"!==x&&"left"!==b&&"right"!==b||(w=x,x=b,b=w),M[0]=pr[x]||x,M[1]=pr[b]||b,a=M.join(" "),g.svg?Mr(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==g.zOrigin&&ur(this,g,"zOrigin",g.zOrigin,p),ur(this,O,f,br(s),br(a)));continue}if("svgOrigin"===f){Mr(t,a,1,v,0,this);continue}if(f in gr){Cr(this,g,f,u,a,d);continue}if("smoothOrigin"===f){ur(this,g,"smooth",g.smooth,a);continue}if("force3D"===f){g[f]=a;continue}if("transform"===f){Lr(this,a,t);continue}}else f in O||(f=er(f)||f);if(_||(o||0===o)&&(u||0===u)&&!Bi.test(a)&&f in O)o||(o=0),(c=(s+"").substr((u+"").length))!==(p=he(a)||(f in R.units?R.units[f]:c))&&(u=lr(t,f,s,p)),this._pt=new vi(this._pt,_?g:O,f,u,d?d*o:o-u,_||"px"!==p&&"zIndex"!==f||!1===e.autoRound?Fi:ji),this._pt.u=p||0,c!==p&&(this._pt.b=s,this._pt.r=Ni);else if(f in O)cr.call(this,t,f,s,a);else{if(!(f in t)){pt(f,a);continue}this.add(t,f,t[f],a,r,n)}T.push(f)}y&&gi(this)},get:fr,aliases:Ri,getSetter:function(t,e,i){var r=Ri[e];return r&&r.indexOf(",")<0&&(e=r),e in Ei&&e!==Ji&&(t._gsap.x||fr(t,"x"))?i&&Ai===i?"scale"===e?Vi:Wi:(Ai=i||{})&&("scale"===e?Qi:Hi):t.style&&!Z(t.style[e])?Ui:~e.indexOf("-")?Xi:hi(t,e)},core:{_removeProperty:or,_getMatrix:wr}};xi.utils.checkPrefix=er,Br=At((Ir="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(zr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Ei[t]=1})),At(zr,(function(t){R.units[t]="deg",gr[t]=1})),Ri[Br[13]]=Ir+","+zr,At("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Ri[e[1]]=Br[e[0]]})),At("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){R.units[t]="px"})),xi.registerPlugin(Rr);var Fr=xi.registerPlugin(Rr)||xi;Fr.core.Tween;class qr{constructor(t){this.DOM={el:t},this.DOM.images=this.DOM.el.querySelectorAll(".gallery__img")}}class Nr{constructor(t){this.DOM={item:t},this.DOM.gallery=document.querySelector(this.DOM.item.href.substring(this.DOM.item.href.indexOf("#"))),this.gallery=new qr(this.DOM.gallery)}}let jr=a();window.addEventListener("resize",(()=>jr=a()));class Yr{constructor(){this.DOM={},this.DOM.frameLinks=[...document.querySelectorAll(".oh")],this.DOM.frameLinksContent=this.DOM.frameLinks.filter((t=>t.classList.contains("view-content"))),this.DOM.frameLinksInitial=this.DOM.frameLinks.filter((t=>!this.DOM.frameLinksContent.includes(t))),this.DOM.closeCtrl=document.querySelector(".frame__close"),this.DOM.content=document.querySelector(".content"),this.DOM.menuItems=[...this.DOM.content.querySelectorAll(".menu-item")],this.menuItems=[],this.DOM.menuItems.forEach((t=>this.menuItems.push(new Nr(t)))),this.DOM.textWords=[...this.DOM.content.querySelectorAll(".content__quote > span.whitespace, .content__quote > span.word")],this.DOM.galleryDeco=document.querySelector(".galleries > .galleries__deco"),this.DOM.galleryButton=document.querySelector(".galleries > .galleries__button"),this.isMenuPage=!1,this.init()}init(){Fr.set(this.DOM.frameLinksContent,{pointerEvents:"none"}),Fr.set(this.DOM.frameLinksContent.map((t=>t.children)),{y:"-100%"}),this.initEvents()}initEvents(){this.DOM.menuItems.forEach((t=>{t.addEventListener("click",this.openMenu.bind(this))})),this.DOM.closeCtrl.addEventListener("click",this.closeMenu.bind(this)),window.addEventListener("resize",(()=>{this.isMenuPage&&Fr.set(this.DOM.menuItems,{x:(t,e)=>.6*jr.width-e.offsetLeft},0)}))}toggleGalleryDeco(){return Fr.timeline({defaults:{duration:this.isMenuPage?.3:1,ease:"power4"},onStart:()=>this.isMenuPage?null:Fr.set(this.DOM.galleryDeco,{x:"15%",y:"100%"})}).to(this.DOM.galleryDeco,{opacity:this.isMenuPage?0:1,x:this.isMenuPage?"5%":"0%",y:this.isMenuPage?"100%":"0%"},this.isMenuPage?0:.5)}showGalleryEntryButton(){return Fr.timeline({onStart:()=>Fr.set(this.DOM.galleryButton,{scale:.9})}).to(this.DOM.galleryButton,{duration:.8,ease:"power4",opacity:1,scale:1},this.isMenuPage?0:.5)}hideGalleryEntryButton(){return Fr.timeline().to(this.DOM.galleryButton,{duration:.3,ease:"power4",opacity:0,scale:.9},this.isMenuPage?0:.5)}toggleFrameLinks(){return Fr.timeline({defaults:{duration:this.isMenuPage?.6:1,ease:this.isMenuPage?"power4":"power4.inOut"},onStart:()=>{Fr.set(this.isMenuPage?this.DOM.frameLinksContent:this.DOM.frameLinksInitial,{pointerEvents:"none"}),Fr.set(this.isMenuPage?this.DOM.frameLinksInitial:this.DOM.frameLinksContent,{pointerEvents:"auto"})}}).to(this.DOM.frameLinksInitial.map((t=>t.children)),{y:this.isMenuPage?"0%":"100%"}).to(this.DOM.frameLinksContent.map((t=>t.children)),{y:this.isMenuPage?"-100%":"0%"},0)}openMenu(t){t.preventDefault();const e=this.DOM.menuItems.indexOf(t.target);this.isAnimating||this.isMenuPage&&this.currentMenuItem===e||(this.isAnimating=!0,this.isMenuPage&&(this.previousMenuItem=this.currentMenuItem,this.DOM.menuItems[this.currentMenuItem].classList.remove("menu-item--active")),this.currentMenuItem=e,t.target.classList.add("menu-item--active"),this.isMenuPage?Promise.all([this.hideGalleryEntryButton(),this.closeGallery(this.previousMenuItem)]).then((()=>Promise.all([this.openGallery(),this.showGalleryEntryButton()]))).then((()=>this.isAnimating=!1)):(this.DOM.content.classList.add("content--menu"),this.togglePage()))}closeMenu(){this.isAnimating||(this.isAnimating=!0,this.DOM.menuItems[this.currentMenuItem].classList.remove("menu-item--active"),this.DOM.content.classList.remove("content--menu"),this.togglePage())}togglePage(){Promise.all([this.toggleFrameLinks(),this.toggleLinksToMenu(),this[this.isMenuPage?"closeGallery":"openGallery"](),this.toggleGalleryDeco(),this[this.isMenuPage?"hideGalleryEntryButton":"showGalleryEntryButton"]()]).then((()=>{this.isMenuPage=!this.isMenuPage,this.isAnimating=!1}))}toggleLinksToMenu(){return Fr.timeline({defaults:{duration:this.isMenuPage?.6:1,ease:this.isMenuPage?"power4":"power4.inOut"}}).to(this.DOM.menuItems,{x:(t,e)=>this.isMenuPage?0:.6*jr.width-e.offsetLeft,stagger:this.isMenuPage?0:{from:this.currentMenuItem,amount:.15}},0).to(this.DOM.textWords.sort(((t,e)=>t.offsetLefte.offsetLeft?1:0)),{x:this.isMenuPage?0:-300,opacity:this.isMenuPage?1:0,stagger:this.isMenuPage?-.004:.004},0)}openGallery(){const t=this.menuItems[this.currentMenuItem].gallery;return Fr.timeline({onStart:()=>{Fr.set(t.DOM.images,{opacity:0},0),t.DOM.el.classList.add("gallery--current")}}).to(t.DOM.images,{duration:.1,ease:"expo.inOut",opacity:t=>Math.max(1-(.1*t+.1),.1),x:"0%",stagger:-.08},this.isMenuPage?0:.5)}closeGallery(t=this.currentMenuItem){const e=this.menuItems[t].gallery;return Fr.timeline().to(e.DOM.images,{duration:.3,ease:"expo",opacity:0,stagger:-.04,onComplete:()=>e.DOM.el.classList.remove("gallery--current")},0)}}var Gr,Ur,Xr={};Gr=Xr,Ur=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 a=t.createElement("span");return i&&(a.className=i),n&&(!s&&a.setAttribute("data-"+i,n),a.textContent=n),e&&r(e,a)||a}function s(t,e){return t.getAttribute("data-"+e)}function a(e,i){return e&&0!=e.length?e.nodeName?[e]:[].slice.call(e[0].nodeName?e:(i||t).querySelectorAll(e)):[]}function o(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 f(t,e,i){var r=i.indexOf(t);if(-1==r)i.unshift(t),u(l[t].depends,(function(e){f(e,t,i)}));else{var n=i.indexOf(e);i.splice(r,1),i.splice(n,0,t)}return i}function c(t,e,i,r){return{by:t,depends:e,key:i,split:r}}function p(t){return f(t,0,[]).map(h(l))}function d(t){l[t.by]=t}function _(t,i,s,o,h){t.normalize();var l=[],f=document.createDocumentFragment();o&&l.push(t.previousSibling);var c=[];return a(t.childNodes).some((function(t){if(!t.tagName||t.hasChildNodes()){if(t.childNodes&&t.childNodes.length)return c.push(t),void l.push.apply(l,_(t,i,s,o,h));var r=t.wholeText||"",a=r.trim();a.length&&(" "===r[0]&&c.push(e(" ")),u(a.split(s),(function(t,e){e&&h&&c.push(n(f,"whitespace"," ",h));var r=n(f,i,t);l.push(r),c.push(r)}))," "===r[r.length-1]&&c.push(e(" ")))}else c.push(t)})),u(c,(function(t){r(f,t)})),t.innerHTML="",r(t,f),l}var m="words",g=c(m,0,"word",(function(t){return _(t,"word",/\s+/,0,1)})),v="chars",y=c(v,[m],"char",(function(t,e,i){var r=[];return u(i.words,(function(t,i){r.push.apply(r,_(t,"char","",e.whitespace&&i))})),r}));function w(t){var e=(t=t||{}).key;return a(t.target||"[data-splitting]").map((function(r){var n=r["🍌"];if(!t.force&&n)return n;n=r["🍌"]={el:r};var a=p(t.by||s(r,"splitting")||v),o=function(t,e){for(var i in e)t[i]=e[i];return t}({},t);return u(a,(function(t){if(t.split){var s=t.by,a=(e?"-"+e:"")+t.key,h=t.split(r,o,n);a&&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,a,h),n[s]=h,r.classList.add(s)}})),r.classList.add("splitting"),n}))}function M(t,e,i){var r=a(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 b=c("lines",[m],"line",(function(t,e,i){return M(t,{matching:i.words},"offsetTop")})),T=c("items",0,"item",(function(t,e){return a(e.matching||t.children,t)})),O=c("rows",0,"row",(function(t,e){return M(t,e,"offsetTop")})),D=c("cols",0,"col",(function(t,e){return M(t,e,"offsetLeft")})),k=c("grid",["rows","cols"]),A="layout",P=c(A,0,0,(function(t,e){var o=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=a("img",t)[0];e.image=h&&(h.currentSrc||h.src)}e.image&&i(t,"background-image","url("+e.image+")");for(var l=o*u,f=[],c=n(0,"cell-grid");l--;){var p=n(c,"cell");n(p,"cell-inner"),f.push(p)}return r(t,c),f})),E=c("cellRows",[A],"row",(function(t,e,i){var r=e.rows,n=o(r);return u(i.layout,(function(t,e,i){n[Math.floor(e/(i.length/r))].push(t)})),n})),C=c("cellColumns",[A],"col",(function(t,e,i){var r=e.columns,n=o(r);return u(i.layout,(function(t,e){n[e%r].push(t)})),n})),S=c("cells",["cellRows","cellColumns"],"cell",(function(t,e,i){return i.layout}));return d(g),d(y),d(b),d(T),d(O),d(D),d(k),d(P),d(E),d(C),d(S),w},"object"==typeof Xr?Xr=Ur():Gr.Splitting=Ur();t(Xr)({by:"words"});((t="img")=>new Promise(((e,i)=>{s(document.querySelectorAll(t),e)})))().then((()=>{document.body.classList.remove("loading"),new Yr}))}(); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Inline to Menu Link Animation | Demo 1 | Codrops

Inline to Menu Link Animation

Based on "Image Carousel" by Matthew Hall

@codrops

Select a category

During his earth period, man experiences the blissful feeling of being fashioned into such forms. The absorption of the watery parts is felt in the soul as an accession of force, or inner strength.
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "InlineToMenuLink", 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/[NAME].git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/[NAME]/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "latest" 25 | }, 26 | "dependencies": { 27 | "gsap": "^3.6.1", 28 | "imagesloaded": "^4.1.4", 29 | "splitting": "^1.0.6" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #715942; 14 | --color-text-alt: #5a4939; 15 | --color-alt: #e8c59e; 16 | --color-text-button: #fff; 17 | --color-bg: #060606; 18 | --color-link: #e8c59e; 19 | --color-link-hover: #e8c59e; 20 | --color-deco: #292724; 21 | color: var(--color-text); 22 | background-color: var(--color-bg); 23 | font-family: usual,-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | /* Page Loader */ 29 | .js .loading::before, 30 | .js .loading::after { 31 | content: ''; 32 | position: fixed; 33 | z-index: 1000; 34 | } 35 | 36 | .js .loading::before { 37 | top: 0; 38 | left: 0; 39 | width: 100%; 40 | height: 100%; 41 | background: var(--color-bg); 42 | } 43 | 44 | .js .loading::after { 45 | top: 50%; 46 | left: 50%; 47 | width: 60px; 48 | height: 60px; 49 | margin: -30px 0 0 -30px; 50 | border-radius: 50%; 51 | opacity: 0.4; 52 | background: var(--color-link); 53 | animation: loaderAnim 0.7s linear infinite alternate forwards; 54 | 55 | } 56 | 57 | @keyframes loaderAnim { 58 | to { 59 | opacity: 1; 60 | transform: scale3d(0.5,0.5,1); 61 | } 62 | } 63 | 64 | a { 65 | text-decoration: none; 66 | color: var(--color-link); 67 | outline: none; 68 | } 69 | 70 | a:hover { 71 | color: var(--color-link-hover); 72 | outline: none; 73 | } 74 | 75 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 76 | a:focus { 77 | /* Provide a fallback style for browsers 78 | that don't support :focus-visible */ 79 | outline: none; 80 | background: lightgrey; 81 | } 82 | 83 | a:focus:not(:focus-visible) { 84 | /* Remove the focus indicator on mouse-focus for browsers 85 | that do support :focus-visible */ 86 | background: transparent; 87 | } 88 | 89 | a:focus-visible { 90 | /* Draw a very noticeable focus style for 91 | keyboard-focus on browsers that do support 92 | :focus-visible */ 93 | outline: 2px solid red; 94 | background: transparent; 95 | } 96 | 97 | .unbutton { 98 | background: none; 99 | border: 0; 100 | padding: 0; 101 | margin: 0; 102 | font: inherit; 103 | } 104 | 105 | .unbutton:focus { 106 | outline: none; 107 | } 108 | 109 | .js .oh { 110 | display: inline-block; 111 | position: relative; 112 | overflow: hidden; 113 | } 114 | 115 | .js .oh > span { 116 | display: inline-block; 117 | will-change: transform; 118 | } 119 | 120 | .frame { 121 | z-index: 1000; 122 | text-transform: uppercase; 123 | position: relative; 124 | text-align: left; 125 | top: 0; 126 | left: 0; 127 | display: grid; 128 | align-items: start; 129 | align-content: space-between; 130 | width: 100%; 131 | padding: 3rem 4vw 1.85rem; 132 | grid-template-columns: 100%; 133 | grid-template-areas: 'title' 134 | 'links' 135 | 'author' 136 | 'credits'; 137 | } 138 | 139 | .frame a { 140 | font-weight: 700; 141 | } 142 | 143 | .frame__title { 144 | grid-area: title; 145 | font-size: 1rem; 146 | margin: 0 0 1rem; 147 | font-weight: normal; 148 | } 149 | 150 | .frame__links { 151 | grid-area: links; 152 | } 153 | 154 | .frame__links a:not(:last-child) { 155 | margin-right: 1rem; 156 | } 157 | 158 | .frame__author { 159 | grid-area: author; 160 | margin: 1rem 0; 161 | } 162 | 163 | .frame__credits { 164 | grid-area: credits; 165 | margin: 0; 166 | } 167 | 168 | .frame__category { 169 | margin: 0; 170 | grid-area: title; 171 | justify-self: start; 172 | } 173 | 174 | .frame__close { 175 | grid-area: title; 176 | justify-self: end; 177 | text-transform: uppercase; 178 | font-weight: bold; 179 | cursor: pointer; 180 | color: var(--color-text); 181 | } 182 | 183 | .frame__close span::before { 184 | content: "\2715"; 185 | margin: 0 0.25rem 0; 186 | vertical-align: top; 187 | } 188 | 189 | .content { 190 | display: flex; 191 | flex-direction: column; 192 | width: 100vw; 193 | height: calc(100vh - 13rem); 194 | position: relative; 195 | justify-content: flex-start; 196 | align-items: center; 197 | padding: 6rem 4vw; 198 | font-family: meno-banner, serif; 199 | } 200 | 201 | .content--menu { 202 | pointer-events: none; 203 | } 204 | 205 | .content__quote { 206 | font-size: 5.25vw; 207 | margin: 0; 208 | text-indent: 20vw; 209 | line-height: 1.1; 210 | } 211 | 212 | .content__quote span.word { 213 | will-change: transform, opacity; 214 | } 215 | 216 | .menu-item { 217 | font-weight: 400; 218 | position: relative; 219 | display: inline-block; 220 | text-indent: 0; 221 | cursor: pointer; 222 | z-index: 100; 223 | pointer-events: auto; 224 | } 225 | 226 | .menu-item::after { 227 | content: ''; 228 | position: absolute; 229 | top: 89%; 230 | left: 0; 231 | width: 100%; 232 | height: 0.375vw; 233 | background: var(--color-alt); 234 | z-index: -1; 235 | transform: scale3d(0.001,1,1); 236 | opacity: 0; 237 | transform-origin: 100% 50%; 238 | transition: transform 0.3s cubic-bezier(0.2,1,0.3,1), opacity 0.1s 0.2s linear; 239 | } 240 | 241 | .menu-item.menu-item--active::after, 242 | .content--menu .menu-item.menu-item--active:hover::after, 243 | .menu-item:hover::after { 244 | opacity: 1; 245 | transform: scale3d(1,1,1); 246 | transform-origin: 0% 50%; 247 | transition: transform 0.7s cubic-bezier(0.2,1,0.3,1), opacity 0.1s linear; 248 | } 249 | 250 | .content--menu .menu-item::after { 251 | transform-origin: 0% 50%; 252 | } 253 | 254 | .content--menu .menu-item:hover::after { 255 | transform: scale3d(0.15,1,1); 256 | } 257 | 258 | .splitting .word { 259 | text-indent: 0; 260 | } 261 | 262 | .menu-item span { 263 | pointer-events: none; 264 | } 265 | 266 | .galleries { 267 | position: absolute; 268 | width: 100%; 269 | height: 100vh; 270 | top: 0; 271 | left: 0; 272 | pointer-events: none; 273 | } 274 | 275 | .galleries__deco { 276 | position: fixed; 277 | bottom: 0; 278 | color: var(--color-deco); 279 | font-size: 7vw; 280 | text-transform: uppercase; 281 | white-space: nowrap; 282 | line-height: 0.3; 283 | text-indent: -2vw; 284 | pointer-events: none; 285 | opacity: 0; 286 | will-change: transform, opacity; 287 | font-family: meno-banner, serif; 288 | font-style: italic; 289 | 290 | } 291 | 292 | .galleries__button { 293 | position: absolute; 294 | width: 20vw; 295 | height: 20vw; 296 | text-align: center; 297 | display: flex; 298 | align-items: center; 299 | justify-content: center; 300 | top: 50%; 301 | left: 30vw; 302 | margin: -10vw 0 0 -10vw; 303 | color: var(--color-text-button); 304 | text-transform: uppercase; 305 | font-weight: bold; 306 | font-size: 1.25rem; 307 | cursor: pointer; 308 | clip-path: circle(calc(50% + 2px) at 50% 50%); 309 | border: 1px solid var(--color-text-button); 310 | border-radius: 50%; 311 | opacity: 0; 312 | cursor: not-allowed; 313 | } 314 | 315 | .galleries__button::before { 316 | content: '+'; 317 | margin-right: 0.5rem; 318 | } 319 | 320 | .gallery--current ~ .galleries__button { 321 | pointer-events: auto; 322 | } 323 | 324 | .gallery { 325 | position: relative; 326 | width: 100%; 327 | height: 100%; 328 | display: flex; 329 | overflow: hidden; 330 | align-items: center; 331 | isolation: isolate; 332 | height: 0; 333 | } 334 | 335 | .gallery--current { 336 | position: absolute; 337 | top: 0; 338 | left: 0; 339 | height: 100%; 340 | } 341 | 342 | .gallery__img { 343 | flex: none; 344 | width: 14.5vw; 345 | height: auto; 346 | margin: 0 -1vw; 347 | mix-blend-mode: soft-light; 348 | opacity: 0.8; 349 | will-change: transform, opacity; 350 | } 351 | 352 | .gallery__img:nth-child(odd) { 353 | margin-top: 20vh; 354 | } 355 | 356 | .gallery__img:nth-child(3n) { 357 | margin-top: -20vh; 358 | } 359 | 360 | @media screen and (min-width: 53em) { 361 | .frame { 362 | pointer-events: none; 363 | position: fixed; 364 | height: 100vh; 365 | grid-template-columns: 20vw 36vw 1fr auto; 366 | grid-template-rows: auto auto auto; 367 | grid-template-areas: 'title links category close' 368 | '... ... ... ...' 369 | 'author ad ad credits'; 370 | } 371 | .frame__title { 372 | margin: 0; 373 | } 374 | .frame__links { 375 | padding: 0; 376 | } 377 | .frame__author { 378 | align-self: end; 379 | justify-self: start; 380 | margin: 0; 381 | } 382 | .frame__credits { 383 | justify-self: end; 384 | align-self: end; 385 | } 386 | .frame__close { 387 | grid-area: close; 388 | } 389 | .frame__category { 390 | grid-area: category; 391 | justify-self: start; 392 | margin: 0; 393 | } 394 | .frame a, 395 | .frame button { 396 | pointer-events: auto; 397 | } 398 | .content { 399 | height: 100vh; 400 | justify-content: center; 401 | } 402 | } 403 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/10.jpg -------------------------------------------------------------------------------- /src/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/11.jpg -------------------------------------------------------------------------------- /src/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/12.jpg -------------------------------------------------------------------------------- /src/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/13.jpg -------------------------------------------------------------------------------- /src/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/14.jpg -------------------------------------------------------------------------------- /src/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/15.jpg -------------------------------------------------------------------------------- /src/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/16.jpg -------------------------------------------------------------------------------- /src/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/17.jpg -------------------------------------------------------------------------------- /src/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/18.jpg -------------------------------------------------------------------------------- /src/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/19.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/20.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/4.jpg -------------------------------------------------------------------------------- /src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/5.jpg -------------------------------------------------------------------------------- /src/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/6.jpg -------------------------------------------------------------------------------- /src/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/7.jpg -------------------------------------------------------------------------------- /src/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/8.jpg -------------------------------------------------------------------------------- /src/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/InlineToMenuLink/0e047cefafbe240234c878544122986cc3dcb95a/src/img/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inline to Menu Link Animation | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

Inline to Menu Link Animation

20 | 25 |

Based on "Image Carousel" by Matthew Hall

26 | @codrops 27 |

Select a category

28 | 29 |
30 |
31 |
32 | During his earth period, man experiences the blissful feeling of being fashioned into such forms. The absorption of the watery parts is felt in the soul as an accession of force, or inner strength.
33 |
34 |
35 | 45 | 55 | 65 | 75 | 76 | 77 |
78 |
79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/js/gallery.js: -------------------------------------------------------------------------------- 1 | export class Gallery { 2 | constructor(el) { 3 | this.DOM = {el: el}; 4 | this.DOM.images = this.DOM.el.querySelectorAll('.gallery__img'); 5 | } 6 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import { Menu } from './menu'; 3 | import 'splitting/dist/splitting.css'; 4 | import 'splitting/dist/splitting-cells.css'; 5 | import Splitting from 'splitting'; 6 | 7 | // initialize Splitting 8 | const splitting = Splitting({by: 'words'}); 9 | 10 | preloadImages().then(() => { 11 | document.body.classList.remove('loading'); 12 | new Menu(); 13 | }); -------------------------------------------------------------------------------- /src/js/menu.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { calcWinsize } from './utils'; 3 | import { MenuItem } from './menuItem'; 4 | 5 | // calculate the viewport size 6 | let winsize = calcWinsize(); 7 | window.addEventListener('resize', () => winsize = calcWinsize()); 8 | 9 | export class Menu { 10 | constructor() { 11 | this.DOM = {}; 12 | // all frame links 13 | this.DOM.frameLinks = [...document.querySelectorAll('.oh')]; 14 | // frame links that are links to show only when the menu appears (after clicking on one of the sentence inline links) 15 | this.DOM.frameLinksContent = this.DOM.frameLinks.filter(el => el.classList.contains('view-content')) 16 | // remaining (the ones shown initially) 17 | this.DOM.frameLinksInitial = this.DOM.frameLinks.filter(el => !this.DOM.frameLinksContent.includes(el)); 18 | // close menu button 19 | this.DOM.closeCtrl = document.querySelector('.frame__close'); 20 | // content element 21 | this.DOM.content = document.querySelector('.content'); 22 | // the links 23 | this.DOM.menuItems = [...this.DOM.content.querySelectorAll('.menu-item')]; 24 | // array of MenuItems 25 | this.menuItems = []; 26 | this.DOM.menuItems.forEach(item => this.menuItems.push(new MenuItem(item))); 27 | // remaining text (span.word) 28 | this.DOM.textWords = [...this.DOM.content.querySelectorAll('.content__quote > span.whitespace, .content__quote > span.word')]; 29 | // gallery deco element 30 | this.DOM.galleryDeco = document.querySelector('.galleries > .galleries__deco'); 31 | // and gallery entry button 32 | this.DOM.galleryButton = document.querySelector('.galleries > .galleries__button'); 33 | // check if we are at the initial page (sentence view) or the menu page (menu/gallery view) 34 | this.isMenuPage = false; 35 | this.init(); 36 | } 37 | init() { 38 | // hide all the frame links that should be visible only after clicking on one of the sentence inline links 39 | gsap.set(this.DOM.frameLinksContent, { 40 | pointerEvents: 'none' 41 | }); 42 | gsap.set(this.DOM.frameLinksContent.map(el => el.children), { 43 | y: '-100%' 44 | }); 45 | 46 | // init/bind events 47 | this.initEvents(); 48 | } 49 | initEvents() { 50 | // click on one of the sentence inline links 51 | this.DOM.menuItems.forEach(menuItem => { 52 | menuItem.addEventListener('click', this.openMenu.bind(this)); 53 | }); 54 | 55 | // click the close menu control 56 | this.DOM.closeCtrl.addEventListener('click', this.closeMenu.bind(this)); 57 | 58 | window.addEventListener('resize', () => { 59 | if ( !this.isMenuPage ) return; 60 | gsap.set(this.DOM.menuItems, { 61 | x: (_,target) => winsize.width * 0.6 - target.offsetLeft 62 | }, 0); 63 | }); 64 | } 65 | // show/hide gallery deco element 66 | toggleGalleryDeco() { 67 | return gsap.timeline({ 68 | defaults: { 69 | duration: !this.isMenuPage ? 1 : 0.3, 70 | ease: 'power4' 71 | }, 72 | onStart: () => !this.isMenuPage ? gsap.set(this.DOM.galleryDeco, {x: '15%', y: '100%'}) : null 73 | }) 74 | .to(this.DOM.galleryDeco, { 75 | opacity: !this.isMenuPage ? 1 : 0, 76 | x: !this.isMenuPage ? '0%' : '5%', 77 | y: !this.isMenuPage ? '0%' : '100%' 78 | }, !this.isMenuPage ? 0.5 : 0); 79 | } 80 | showGalleryEntryButton() { 81 | return gsap.timeline({ 82 | onStart: () => gsap.set(this.DOM.galleryButton, { 83 | scale: 0.9 84 | }) 85 | }) 86 | .to(this.DOM.galleryButton, { 87 | duration: 0.8, ease: 'power4', 88 | opacity: 1, 89 | scale: 1 90 | }, !this.isMenuPage ? 0.5 : 0); 91 | } 92 | hideGalleryEntryButton() { 93 | return gsap.timeline() 94 | .to(this.DOM.galleryButton, { 95 | duration: 0.3, ease: 'power4', 96 | opacity: 0, 97 | scale: 0.9 98 | }, !this.isMenuPage ? 0.5 : 0); 99 | } 100 | // show links for the content or initial page 101 | toggleFrameLinks() { 102 | return gsap.timeline({ 103 | defaults: { 104 | duration: !this.isMenuPage ? 1 : 0.6, 105 | ease: !this.isMenuPage ? 'power4.inOut' : 'power4' 106 | }, 107 | onStart: () => { 108 | // pointer events logic for the frame links: 109 | gsap.set(!this.isMenuPage ? this.DOM.frameLinksInitial : this.DOM.frameLinksContent, { 110 | pointerEvents: 'none' 111 | }); 112 | gsap.set(!this.isMenuPage ? this.DOM.frameLinksContent : this.DOM.frameLinksInitial, { 113 | pointerEvents: 'auto' 114 | }); 115 | } 116 | }) 117 | .to(this.DOM.frameLinksInitial.map(el => el.children), { 118 | y: !this.isMenuPage ? '100%' : '0%' 119 | }) 120 | .to(this.DOM.frameLinksContent.map(el => el.children), { 121 | y: !this.isMenuPage ? '0%' : '-100%' 122 | }, 0); 123 | } 124 | openMenu(ev) { 125 | ev.preventDefault(); 126 | 127 | const clickedMenuItemIndex = this.DOM.menuItems.indexOf(ev.target); 128 | 129 | // return if currently animating or if the clicked menu item is the current selected one 130 | if ( this.isAnimating || this.isMenuPage && this.currentMenuItem === clickedMenuItemIndex ) return; 131 | this.isAnimating = true; 132 | 133 | // remove active class from the current menu item 134 | if ( this.isMenuPage ) { 135 | this.previousMenuItem = this.currentMenuItem; 136 | this.DOM.menuItems[this.currentMenuItem].classList.remove('menu-item--active'); 137 | } 138 | // index of clicked menu item 139 | this.currentMenuItem = clickedMenuItemIndex; 140 | 141 | // add class menu-item--active to the clicked menu item and content--menu to the content element 142 | // related to the link underline animation (CSS) 143 | ev.target.classList.add('menu-item--active'); 144 | 145 | // if we go from the sentence page to the menu page: 146 | if ( !this.isMenuPage ) { 147 | this.DOM.content.classList.add('content--menu'); 148 | 149 | this.togglePage(); 150 | } 151 | // else if we click another menu item while on the menu page 152 | else { 153 | Promise.all([this.hideGalleryEntryButton(), this.closeGallery(this.previousMenuItem)]) 154 | .then(() => Promise.all([this.openGallery(), this.showGalleryEntryButton()])) 155 | .then(() => this.isAnimating = false); 156 | } 157 | } 158 | closeMenu() { 159 | if ( this.isAnimating ) return; 160 | this.isAnimating = true; 161 | 162 | // related to the link underline animation (CSS) 163 | this.DOM.menuItems[this.currentMenuItem].classList.remove('menu-item--active'); 164 | this.DOM.content.classList.remove('content--menu'); 165 | 166 | this.togglePage(); 167 | } 168 | togglePage() { 169 | Promise.all([ 170 | this.toggleFrameLinks(), 171 | this.toggleLinksToMenu(), 172 | this[!this.isMenuPage ? 'openGallery' : 'closeGallery'](), 173 | this.toggleGalleryDeco(), 174 | this[!this.isMenuPage ? 'showGalleryEntryButton' : 'hideGalleryEntryButton']() 175 | ]) 176 | .then(() => { 177 | this.isMenuPage = !this.isMenuPage; 178 | this.isAnimating = false; 179 | }); 180 | } 181 | // animate links to the right side and the remaining text to the left, fading out 182 | // or vice versa 183 | toggleLinksToMenu() { 184 | return gsap.timeline({ 185 | defaults: { 186 | duration: !this.isMenuPage ? 1 : 0.6, 187 | ease: !this.isMenuPage ? 'power4.inOut' : 'power4' 188 | } 189 | }) 190 | .to(this.DOM.menuItems, { 191 | x: (_,target) => !this.isMenuPage ? winsize.width * 0.6 - target.offsetLeft : 0, 192 | stagger: !this.isMenuPage ? { 193 | from: this.currentMenuItem, 194 | amount: 0.15 195 | } : 0 196 | }, 0) 197 | .to(this.DOM.textWords.sort((a,b) => { 198 | // words are ordered by its left value 199 | if ( a.offsetLeft < b.offsetLeft ) { 200 | return -1; 201 | } 202 | else if ( a.offsetLeft > b.offsetLeft ) { 203 | return 1; 204 | } 205 | return 0; 206 | }), { 207 | x: !this.isMenuPage ? -300 : 0, 208 | opacity: !this.isMenuPage ? 0 : 1, 209 | stagger: !this.isMenuPage ? 0.004 : -0.004 210 | }, 0); 211 | } 212 | openGallery() { 213 | // gallery of the cliked menu item 214 | const gallery = this.menuItems[this.currentMenuItem].gallery; 215 | 216 | return gsap.timeline({ 217 | onStart: () => { 218 | gsap.set(gallery.DOM.images, {opacity: 0}, 0); 219 | gallery.DOM.el.classList.add('gallery--current'); 220 | } 221 | }) 222 | .to(gallery.DOM.images, { 223 | duration: 0.1, ease: 'expo.inOut', 224 | opacity: pos => Math.max(1-(pos*0.1+0.1), 0.1), 225 | x: '0%', 226 | stagger: -0.08 227 | }, !this.isMenuPage ? 0.5 : 0); 228 | } 229 | closeGallery(menuItemIndex = this.currentMenuItem) { 230 | // hide the current gallery 231 | const galleryCurrent = this.menuItems[menuItemIndex].gallery; 232 | return gsap.timeline() 233 | .to(galleryCurrent.DOM.images, { 234 | duration: 0.3, ease: 'expo', 235 | opacity: 0, 236 | stagger: -0.04, 237 | onComplete: () => galleryCurrent.DOM.el.classList.remove('gallery--current') 238 | }, 0); 239 | } 240 | } -------------------------------------------------------------------------------- /src/js/menuItem.js: -------------------------------------------------------------------------------- 1 | import { Gallery } from './gallery'; 2 | 3 | export class MenuItem { 4 | constructor(item) { 5 | this.DOM = {item: item}; 6 | this.DOM.gallery = document.querySelector(this.DOM.item.href.substring(this.DOM.item.href.indexOf('#'))); 7 | this.gallery = new Gallery(this.DOM.gallery); 8 | } 9 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Map number x from range [a, b] to [c, d] 4 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c; 5 | 6 | // viewport size 7 | const calcWinsize = () => { 8 | return {width: window.innerWidth, height: window.innerHeight}; 9 | }; 10 | 11 | // preload images 12 | const preloadImages = (selector = 'img') => { 13 | return new Promise((resolve, reject) => { 14 | imagesLoaded(document.querySelectorAll(selector), resolve); 15 | }); 16 | }; 17 | 18 | export {map, calcWinsize, preloadImages}; --------------------------------------------------------------------------------