├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.1770e3b3.jpg ├── 2.07ca36b5.jpg ├── 3.f6f48295.jpg ├── favicon.a64e97b2.ico ├── index.b5e7c14d.js ├── index.d73f7ad5.css ├── index.e9a2d1b4.js ├── index.html └── shadow.f3dc3bb9.png ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg └── shadow.png ├── index.html └── js ├── fakeProgress.js ├── gsapAnimation.js ├── index.js ├── textLinesReveal.js ├── trail.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 | # Intro Image Trail Animation 2 | 3 | An intro animation with several layout changes and various effect. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/05/introtrail_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=63293) 8 | 9 | [Demo](http://tympanus.net/Development/IntroTrailEffect/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from [Unsplash](https://unsplash.com/) 35 | 36 | ## Misc 37 | 38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 39 | 40 | ## License 41 | [MIT](LICENSE) 42 | 43 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/1.1770e3b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/dist/1.1770e3b3.jpg -------------------------------------------------------------------------------- /dist/2.07ca36b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/dist/2.07ca36b5.jpg -------------------------------------------------------------------------------- /dist/3.f6f48295.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/dist/3.f6f48295.jpg -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:17px}html,body{height:100vh;overflow:hidden}body{--color-text:#fff;--color-title:#dbb59b;--color-bg:#161a19;--color-link:#7f9993;--color-link-hover:#fff;--color-menu:#7f9993;--img-ratio:1.5;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:acumin-pro,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-weight:300}body:after{z-index:1000;content:"";pointer-events:none;width:100vw;height:100vh;transform-origin:100% 0;background:url(shadow.f3dc3bb9.png) 100% 0/cover no-repeat;animation:move 7s 2s infinite alternate;position:fixed;top:0;left:0}@keyframes move{to{transform:scaleX(1.1)}}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width:60px;height:60px;opacity:.4;background:var(--color-link);border-radius:50%;margin:-30px 0 0 -30px;animation:loaderAnim .7s linear infinite alternate forwards;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);white-space:nowrap;outline:0;text-decoration:none;position:relative;overflow:hidden}a:before{content:"";height:1px;width:100%;transform-origin:0%;background:currentColor;transition:transform .3s;position:absolute;top:95%}a:hover:before{transform-origin:100%;transform:scaleX(0)}a:hover{color:var(--color-link-hover);outline:0}a:focus{background:#d3d3d3;outline:0}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.oh{overflow:hidden}.line{transform-origin:0;white-space:nowrap;will-change:transform;padding-bottom:.15rem}.unbutton{font:inherit;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:0}main{height:100%;grid-template:"logo menu"25%". ."25%"button-enter button-enter"1fr"frame frame"/1fr 250px;padding:1rem;display:grid}.frame{z-index:200;grid-area:frame;padding-bottom:.5rem;position:relative}.frame__title{margin:0;font-size:1rem;font-weight:400;position:relative}.frame__links a:not(:last-child){margin-right:1rem}.logo{color:var(--color-title);grid-area:logo;justify-self:start;margin:0;font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:2.45rem;font-weight:300;line-height:1;display:grid}.logo__layer{grid-area:1/1/2/2;transition:all .5s ease-out}.show .logo__layer--1{opacity:.1}.show .logo__layer--2{opacity:.3;transform:translate(50%)}.show .logo__layer--3{transform:translate(100%)}.button-menu{z-index:100;width:1.65rem;height:.65rem;color:var(--color-menu);opacity:.5;cursor:not-allowed;border-top:2px solid;border-bottom:2px solid;grid-area:menu;align-self:start;justify-self:end;margin:.5rem 1.5rem}.intro-progress{width:4ch;color:var(--color-title);grid-area:logo;align-self:start;justify-self:start;font-size:10vw;font-weight:400;line-height:.5}.intro-image{--img-height:260px;height:var(--img-height);width:calc( 1/var(--img-ratio)*var(--img-height));background-repeat:no-repeat;background-size:100%;grid-area:1/1/-1/-1;justify-self:end;position:relative}.intro-content__image .intro-image{--img-height:360px}.trail{align-items:center;justify-items:center;display:grid;position:relative}.no-js .trail{width:100%;height:100%;background-size:100%}.trail__img,.trail__text{will-change:transform;grid-area:1/1/2/2;position:relative}.trail__img{width:100%;height:100%}.intro-content{height:100%;grid-template:"."4rem"title-up"min-content"title-down"min-content"."1rem"image""."1fr/100%;grid-area:1/1/-1/-1;justify-items:center;display:grid;overflow:hidden}.intro-content__title{color:var(--color-title);white-space:nowrap;will-change:transform;align-self:end;font-size:max(1.5rem,min(22vh,14vw));font-weight:400;line-height:.9;position:relative}.intro-content__title em{font-style:italic;font-weight:400}.intro-content__title--up{opacity:0;grid-area:title-up;align-self:end;font-family:kudryashev-d-excontrast-sans,sans-serif;font-weight:300}.intro-content__title--up .trail__text{transform:translateY(-14vh)}.intro-content__title--down{text-transform:uppercase;opacity:0;grid-area:title-down}.intro-content__title--down .trail__text{transform:translateY(18vh)}.intro-content__image{grid-area:image;align-self:end}.button-enter{z-index:200;color:inherit;width:100px;height:100px;cursor:pointer;background:0 0;border:1px solid;border-radius:50%;grid-area:button-enter;align-self:start;justify-self:center;align-items:center;justify-items:center;display:grid;position:relative;overflow:hidden}.button-enter.hide{pointer-events:none}.button-enter span{pointer-events:none;cursor:pointer;width:100%;height:100%;color:#fff;align-items:center;justify-items:center;font-weight:400;transition:color,transform .3s;display:grid;position:relative;transform:translateY(1rem)}.button-enter:hover span,.button-enter:focus-visible span{color:#000;transform:translateY(0)}.button-enter:before{content:"";width:100px;height:100px;background:#fff;margin:-50px 0 0 -50px;transition:transform .3s;position:absolute;top:50%;left:50%;transform:translateY(100%)}.button-enter:hover:before,.button-enter:focus-visible:before{transform:translateY(0%)}.js .logo,.js .button-menu,.js .button-enter{opacity:0}.js .logo.show,.js .button-menu.show,.js .button-enter.show{opacity:1;transition:opacity .5s ease-out}.js .button-enter.show{transition:opacity 1.5s ease-in-out}.content{pointer-events:none;height:100%;grid-column-gap:3.5%;grid-template:". . ."4rem"content-title-up content-title-up content-title-up"min-content"content-title-down content-title-down content-title-down"min-content". . ."2rem"content-about content-about content-about""content-img-1 content-img-2 content-img-3"/31% 31% 31%;grid-area:1/1/-1/-1;padding:0 1rem;display:grid}.content__title{position:relative}.content__title .intro-content__title{width:min-content;grid-column:1/span 2;font-size:max(2rem,min(10vh,8vw))}.content__title--up{z-index:1;grid-area:content-title-up}.content__title--down{z-index:3;grid-area:content-title-down}.content__about{z-index:100;opacity:0;flex-direction:column;grid-area:content-about;font-size:1.3rem;line-height:1.1;display:flex;position:relative}.content__about-title{margin:0 7vw 0 0;font-style:italic}.content__about p{margin:0 0 1rem}.content__image{z-index:2;align-items:flex-end;margin-bottom:-20vh;display:flex;position:relative}.content__image--1{grid-area:content-img-1}.content__image--2{grid-area:content-img-2}.content__image--3{grid-area:content-img-3}.content__image-inner,.content__image .intro-image{width:100%;height:100%;opacity:0;will-change:opacity,transform,border-radius;background-position:50% 0;background-size:cover;border-radius:20vw 20vw 0 0}@media screen and (min-width:53em){main{grid-column-gap:5vw;grid-template:"logo.menu"". . ."50%".button-enter."1fr"frame frame frame"/30vw 1fr 30vw;padding:2.5rem 1rem 0}.intro-content{grid-template-rows:32% 15% 35% 18%;grid-template-areas:"title-up""title-down""image""."}.intro-image{--img-height:45vh}.intro-content__image .intro-image{--img-height:53vh}.content{grid-template-rows:20% 10vh 10vh auto auto;grid-template-areas:". . .""content-title-up content-about content-about""content-title-down content-about content-about""content-img-1 content-img-2 content-img-3"}.content__title .intro-content__title{grid-column:1/span 2}.content__about{max-width:440px;flex-direction:row;grid-row:2/span 2;justify-self:end}.content__image-inner,.content__image .intro-image{height:50vh;border-radius:20vw 20vw 0 0}.button-enter{align-self:center}.frame{width:100%;grid-template-columns:auto auto 1fr;grid-template-areas:"title links sponsor";display:grid}.frame__title{grid-area:title}.frame__links{grid-area:links;margin-left:5vw}} -------------------------------------------------------------------------------- /dist/index.e9a2d1b4.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},i={},n=t.parcelRequire23b3;null==n&&((n=function(t){if(t in e)return e[t].exports;if(t in i){var n=i[t];delete i[t];var r={id:t,exports:{}};return e[t]=r,n.call(r.exports,r,r.exports),r.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){i[t]=e},t.parcelRequire23b3=n),n.register("4hJWI",(function(t,e){!function(e,i){t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},n=i[t]=i[t]||[];return n.includes(e)||n.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let n=i.indexOf(e);return-1!=n&&i.splice(n,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let n=this._onceEvents&&this._onceEvents[t];for(let r of i){n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t}))}));var r={}; 2 | /*! 3 | * imagesLoaded v5.0.0 4 | * JavaScript is all like "You images are done yet or what?" 5 | * MIT License 6 | */!function(t,e){r?r=e(t,n("4hJWI")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:r,(function(t,e){let i=t.jQuery,n=t.console;function r(t,e,s){if(!(this instanceof r))return new r(t,e,s);let a=t;var o;("string"==typeof t&&(a=document.querySelectorAll(t)),a)?(this.elements=(o=a,Array.isArray(o)?o:"object"==typeof o&&"number"==typeof o.length?[...o]:[o]),this.options={},"function"==typeof e?s=e:Object.assign(this.options,e),s&&this.on("always",s),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):n.error(`Bad element for imagesLoaded ${a||t}`)}r.prototype=Object.create(e.prototype),r.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const s=[1,9,11];r.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!s.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const a=/url\((['"])?(.*?)\1\)/gi;function o(t){this.img=t}function u(t,e){this.url=t,this.element=e,this.img=new Image}return r.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=a.exec(e.backgroundImage);for(;null!==i;){let n=i&&i[2];n&&this.addBackground(n,t),i=a.exec(e.backgroundImage)}},r.prototype.addImage=function(t){let e=new o(t);this.images.push(e)},r.prototype.addBackground=function(t,e){let i=new u(t,e);this.images.push(i)},r.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},r.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&n&&n.log(`progress: ${i}`,t,e)},r.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},o.prototype=Object.create(e.prototype),o.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.img.crossOrigin&&(this.proxyImage.crossOrigin=this.img.crossOrigin),this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.currentSrc||this.img.src)},o.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},o.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,n="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,n,e])},o.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},o.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},o.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},o.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype=Object.create(o.prototype),u.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},u.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},u.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},r.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new r(this,t,e).jqDeferred.promise(i(this))})},r.makeJQueryPlugin(),r}));const s=(t,e,i)=>{t.forEach((t=>{const n=document.createElement(e);n.classList=i,t.parentNode.appendChild(n),n.appendChild(t)}))};function a(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class o{constructor(t,e){a(this,"DOM",{el:null,trailElems:null}),a(this,"defaults",{perspective:!1,totalTrailElements:4}),this.DOM.el=t,this.options=Object.assign(this.defaults,e),this.options.perspective&&(this.DOM.el.style.perspective=`${this.options.perspective}px`)}}class u extends o{layout(){this.content=this.DOM.el.innerHTML;let t="";for(let e=0;e<=this.options.totalTrailElements-1;++e){t+=`${this.content}`}this.DOM.el.innerHTML=t,this.DOM.trailElems=this.DOM.el.querySelectorAll(".trail__text"),this.DOM.el.classList.add("trail")}reset(){this.DOM.el.classList.remove("trail"),this.DOM.el.innerHTML=this.content,this.options.perspective&&(this.DOM.el.style.perspective="none")}constructor(t,e){super(t,e),this.layout()}}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function h(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 7 | /*! 8 | * GSAP 3.10.3 9 | * https://greensock.com 10 | * 11 | * @license Copyright 2008-2022, GreenSock. All rights reserved. 12 | * Subject to the terms at https://greensock.com/standard-license or for 13 | * Club GreenSock members, the agreement issued with that membership. 14 | * @author: Jack Doyle, jack@greensock.com 15 | */var c,f,p,d,m,g,_,v,y,b,w,x,T,O,C,M,k,S,E,D,A,I,P,L,B,R,z,V,F={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},N={duration:.5,overwrite:!1,delay:0},q=2*Math.PI,X=q/4,Y=0,j=Math.sqrt,H=Math.cos,U=Math.sin,W=function(t){return"string"==typeof t},$=function(t){return"function"==typeof t},Q=function(t){return"number"==typeof t},G=function(t){return void 0===t},J=function(t){return"object"==typeof t},Z=function(t){return!1!==t},K=function(){return"undefined"!=typeof window},tt=function(t){return $(t)||W(t)},et="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},it=Array.isArray,nt=/(?:-?\.?\d|\.)+/gi,rt=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,st=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,at=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,ot=/[+-]=-?[.\d]+/,ut=/[^,'"\[\]\s]+/gi,lt=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ht={},ct={},ft=function(t){return(ct=Vt(t,ht))&&ki},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)},mt=function(t,e){return t&&(ht[t]=e)&&ct&&(ct[t]=e)||ht},gt=function(){return 0},_t={},vt=[],yt={},bt={},wt={},xt=30,Tt=[],Ot="",Ct=function(t){var e,i,n=t[0];if(J(n)||$(n)||(t=[t]),!(e=(n._gsap||{}).harness)){for(i=Tt.length;i--&&!Tt[i].targetTest(n););e=Tt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new Ge(t[i],e)))||t.splice(i,1);return t},Mt=function(t){return t._gsap||Ct(ge(t))[0]._gsap},kt=function(t,e,i){return(i=t[e])&&$(i)?t[e]():G(i)&&t.getAttribute&&t.getAttribute(e)||i},St=function(t,e){return(t=t.split(",")).forEach(e)||t},Et=function(t){return Math.round(1e5*t)/1e5||0},Dt=function(t){return Math.round(1e7*t)/1e7||0},At=function(t,e){var i=e.charAt(0),n=parseFloat(e.substr(2));return t=parseFloat(t),"+"===i?t+n:"-"===i?t-n:"*"===i?t*n:t/n},It=function(t,e){for(var i=e.length,n=0;t.indexOf(e[n])<0&&++ns;)a=a._prev;return a?(e._next=a._next,a._next=e):(e._next=t[i],t[i]=e),e._next?e._next._prev=e:t[n]=e,e._prev=a,e.parent=e._dp=t,e},Yt=function(t,e,i,n){void 0===i&&(i="_first"),void 0===n&&(n="_last");var r=e._prev,s=e._next;r?r._next=s:t[i]===e&&(t[i]=s),s?s._prev=r:t[n]===e&&(t[n]=r),e._next=e._prev=e.parent=null},jt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},Ht=function(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var i=t;i;)i._dirty=1,i=i.parent;return t},Ut=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)},$t=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},Gt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Jt=function(t){return t._end=Dt(t._start+(t._tDur/Math.abs(t._ts||t._rts||1e-8)||0))},Zt=function(t,e){var i=t._dp;return i&&i.smoothChildTiming&&t._ts&&(t._start=Dt(i._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Jt(t),i._dirty||Ht(i,t)),t},Kt=function(t,e){var i;if((e._time||e._initted&&!e._dur)&&(i=Gt(t.rawTime(),e),(!e._dur||ce(0,e.totalDuration(),i)-e._tTime>1e-8)&&e.render(i,!0)),Ht(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&i.totalTime(i._tTime),i=i._dp;t._zTime=-1e-8}},te=function(t,e,i,n){return e.parent&&jt(e),e._start=Dt((Q(i)?i:i||t!==f?ue(t,i,e):t._time)+e._delay),e._end=Dt(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),Xt(t,e,"_first","_last",t._sort?"_start":0),re(e)||(t._recent=e),n||Kt(t,e),t},ee=function(t,e){return(ht.ScrollTrigger||pt("scrollTrigger",e))&&ht.ScrollTrigger.create(e,t)},ie=function(t,e,i,n){return ri(t,e),t._initted?!i&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&_!==ze.frame?(vt.push(t),t._lazy=[e,n],1):void 0:1},ne=function t(e){var i=e.parent;return i&&i._ts&&i._initted&&!i._lock&&(i.rawTime()<0||t(i))},re=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},se=function(t,e,i,n){var r=t._repeat,s=Dt(e)||0,a=t._tTime/t._tDur;return a&&!n&&(t._time*=s/t._dur),t._dur=s,t._tDur=r?r<0?1e10:Dt(s*(r+1)+t._rDelay*r):s,a>0&&!n?Zt(t,t._tTime=t._tDur*a):t.parent&&Jt(t),i||Ht(t.parent,t),t},ae=function(t){return t instanceof Ze?Ht(t):se(t,t._dur)},oe={_start:0,endTime:gt,totalDuration:gt},ue=function t(e,i,n){var r,s,a,o=e.labels,u=e._recent||oe,l=e.duration()>=1e8?u.endTime(!1):e._dur;return W(i)&&(isNaN(i)||i in o)?(s=i.charAt(0),a="%"===i.substr(-1),r=i.indexOf("="),"<"===s||">"===s?(r>=0&&(i=i.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(i.substr(1))||0)*(a?(r<0?u:n).totalDuration()/100:1)):r<0?(i in o||(o[i]=l),o[i]):(s=parseFloat(i.charAt(r-1)+i.substr(r+1)),a&&n&&(s=s/100*(it(n)?n[0]:n).totalDuration()),r>1?t(e,i.substr(0,r-1),n)+s:l+s)):null==i?l:+i},le=function(t,e,i){var n,r,s=Q(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=i,t){for(n=o,r=i;r&&!("immediateRender"in n);)n=r.vars.defaults||{},r=Z(r.vars.inherit)&&r.parent;o.immediateRender=Z(n.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new li(e[0],o,e[a+1])},he=function(t,e){return t||0===t?e(t):e},ce=function(t,e,i){return ie?e:i},fe=function(t,e){return W(t)&&(e=lt.exec(t))?e[1]:""},pe=[].slice,de=function(t,e){return t&&J(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&J(t[0]))&&!t.nodeType&&t!==p},me=function(t,e,i){return void 0===i&&(i=[]),t.forEach((function(t){var n;return W(t)&&!e||de(t,1)?(n=i).push.apply(n,ge(t)):i.push(t)}))||i},ge=function(t,e,i){return!W(t)||i||!d&&Ve()?it(t)?me(t,i):de(t)?pe.call(t,0):t?[t]:[]:pe.call((e||m).querySelectorAll(t),0)},_e=function(t){return t.sort((function(){return.5-Math.random()}))},ve=function(t){if($(t))return t;var e=J(t)?t:{each:t},i=He(e.ease),n=e.from||0,r=parseFloat(e.base)||0,s={},a=n>0&&n<1,o=isNaN(n)||a,u=e.axis,l=n,h=n;return W(n)?l=h={center:.5,edges:.5,end:1}[n]||0:!a&&o&&(l=n[0],h=n[1]),function(t,a,c){var f,p,d,m,g,_,v,y,b,w=(c||e).length,x=s[w];if(!x){if(!(b="auto"===e.grid?0:(e.grid||[1,1e8])[1])){for(v=-1e8;v<(v=c[b++].getBoundingClientRect().left)&&bv&&(v=g),gw?w-1:u?"y"===u?w/b:b:Math.max(b,w/b))||0)*("edges"===n?-1:1),x.b=w<0?r-w:r,x.u=fe(e.amount||e.each)||0,i=i&&w<0?Ye(i):i}return w=(x[t]-x.min)/x.max||0,Dt(x.b+(i?i(w):w)*x.v)+x.u}},ye=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(i){var n=Math.round(parseFloat(i)/t)*t*e;return(n-n%1)/e+(Q(i)?0:fe(i))}},be=function(t,e){var i,n,r=it(t);return!r&&J(t)&&(i=r=t.radius||1e8,t.values?(t=ge(t.values),(n=!Q(t[0]))&&(i*=i)):t=ye(t.increment)),he(e,r?$(t)?function(e){return n=t(e),Math.abs(n-e)<=i?n:e}:function(e){for(var r,s,a=parseFloat(n?e.x:e),o=parseFloat(n?e.y:0),u=1e8,l=0,h=t.length;h--;)(r=n?(r=t[h].x-a)*r+(s=t[h].y-o)*s:Math.abs(t[h]-a))(r=Math.abs(r))&&(s=n,o=r);return s},Me=function(t,e,i){var n,r,s=t.vars,a=s[e];if(a)return n=s[e+"Params"],r=s.callbackScope||t,i&&vt.length&&Pt(),n?a.apply(r,n):a.call(r)},ke=function(t){return jt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&Me(t,"onInterrupt"),t},Se=function(t){var e=(t=!t.name&&t.default||t).name,i=$(t),n=e&&!i&&t.init?function(){this._props=[]}:t,r={init:gt,render:vi,add:ii,kill:bi,modifier:yi,rawVars:0},s={targetTest:0,get:0,getSetter:di,aliases:{},register:0};if(Ve(),t!==n){if(bt[e])return;zt(n,zt(Nt(t,r),s)),Vt(n.prototype,Vt(r,Nt(t,s))),bt[n.prop=e]=n,t.targetTest&&(Tt.push(n),_t[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}mt(e,n),t.register&&t.register(ki,n,Ti)},Ee={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},De=function(t,e,i){return 255*(6*(t+=t<0?1:t>1?-1:0)<1?e+(i-e)*t*6:t<.5?i:3*t<2?e+(i-e)*(2/3-t)*6:e)+.5|0},Ae=function(t,e,i){var n,r,s,a,o,u,l,h,c,f,p=t?Q(t)?[t>>16,t>>8&255,255&t]:0:Ee.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Ee[t])p=Ee[t];else if("#"===t.charAt(0)){if(t.length<6&&(n=t.charAt(1),r=t.charAt(2),s=t.charAt(3),t="#"+n+n+r+r+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&255,255&p,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&255,255&t]}else if("hsl"===t.substr(0,3))if(p=f=t.match(nt),e){if(~t.indexOf("="))return p=t.match(rt),i&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,n=2*(u=+p[2]/100)-(r=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=De(a+1/3,n,r),p[1]=De(a,n,r),p[2]=De(a-1/3,n,r);else p=t.match(nt)||Ee.transparent;p=p.map(Number)}return e&&!f&&(n=p[0]/255,r=p[1]/255,s=p[2]/255,u=((l=Math.max(n,r,s))+(h=Math.min(n,r,s)))/2,l===h?a=o=0:(c=l-h,o=u>.5?c/(2-l-h):c/(l+h),a=l===n?(r-s)/c+(rk&&(E+=a-S),((i=(r=(D+=a)-E)-I)>0||o)&&(s=++T.frame,O=r-1e3*T.time,T.time=r/=1e3,I+=i+(i>=A?4:A-i),n=1),o||(b=w(t)),n)for(C=0;C=e&&C--},_listeners:P=[]}),Ve=function(){return!y&&ze.wake()},Fe={},Ne=/^[\d.\-M][\d.\-,\s]/,qe=/["']/g,Xe=function(t){for(var e,i,n,r={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,u=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[Xe(s[1])]:(e=t,i=e.indexOf("(")+1,n=e.indexOf(")"),r=e.indexOf("(",i),e.substring(i,~r&&r=1?i:1,s=(n||(e?.3:.45))/(i<1?i:1),a=s/q*(Math.asin(1/r)||0),o=function(t){return 1===t?1:r*Math.pow(2,-10*t)*U((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:We(o);return s=q/s,u.config=function(i,n){return t(e,i,n)},u},Qe=function t(e,i){void 0===i&&(i=1.70158);var n=function(t){return t?--t*t*((i+1)*t+i)+1:0},r="out"===e?n:"in"===e?function(t){return 1-n(1-t)}:We(n);return r.config=function(i){return t(e,i)},r};St("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var i=e<5?e+1:e;Ue(t+",Power"+(i-1),e?function(t){return Math.pow(t,i)}:function(t){return t},(function(t){return 1-Math.pow(1-t,i)}),(function(t){return t<.5?Math.pow(2*t,i)/2:1-Math.pow(2*(1-t),i)/2}))})),Fe.Linear.easeNone=Fe.none=Fe.Linear.easeIn,Ue("Elastic",$e("in"),$e("out"),$e()),B=7.5625,z=1/(R=2.75),Ue("Bounce",(function(t){return 1-V(1-t)}),V=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,se(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Ve(),!arguments.length)return this._tTime;var i=this._dp;if(i&&i.smoothChildTiming&&this._ts){for(Zt(this,t),!i._dp||i.parent||Kt(i,this);i&&i.parent;)i.parent._time!==i._start+(i._ts>=0?i._tTime/i._ts:(i.totalDuration()-i._tTime)/-i._ts)&&i.totalTime(i._tTime,!0),i=i.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&te(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&1e-8===Math.abs(this._zTime)||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Lt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+$t(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},e.totalProgress=function(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},e.progress=function(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+$t(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?Gt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,this.totalTime(ce(-this._delay,this._tDur,e),!0),Jt(this),Ut(this)},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Ve(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&1e-8!==Math.abs(this._zTime)&&(this._tTime-=1e-8)))),this):this._ps},e.startTime=function(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return e&&(e._sort||!this.parent)&&te(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(Z(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Gt(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,i=arguments.length?t:e.rawTime();e;)i=e._start+i/(e._ts||1),e=e._dp;return i},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,ae(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,ae(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(ue(this,t),Z(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,Z(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,i=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=i&&t1?(e?(n[t]=e,i&&(n[t+"Params"]=i),"onUpdate"===t&&(this._onUpdate=e)):delete n[t],this):n[t]},e.then=function(t){var e=this;return new Promise((function(i){var n=$(t)?t:Rt,r=function(){var t=e.then;e.then=null,$(n)&&(n=n(e))&&(n.then||n===e)&&(e.then=t),i(n),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?r():e._prom=r}))},e.kill=function(){ke(this)},t}();zt(Je.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 Ze=function(t){function e(e,i){var n;return void 0===e&&(e={}),(n=t.call(this,e)||this).labels={},n.smoothChildTiming=!!e.smoothChildTiming,n.autoRemoveChildren=!!e.autoRemoveChildren,n._sort=Z(e.sortChildren),f&&te(e.parent||f,l(n),i),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&ee(l(n),e.scrollTrigger),n}h(e,t);var i=e.prototype;return i.to=function(t,e,i){return le(0,arguments,this),this},i.from=function(t,e,i){return le(1,arguments,this),this},i.fromTo=function(t,e,i,n){return le(2,arguments,this),this},i.set=function(t,e,i){return e.duration=0,e.parent=this,qt(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new li(t,e,ue(this,i),1),this},i.call=function(t,e,i){return te(this,li.delayedCall(0,t,e),i)},i.staggerTo=function(t,e,i,n,r,s,a){return i.duration=e,i.stagger=i.stagger||n,i.onComplete=s,i.onCompleteParams=a,i.parent=this,new li(t,i,ue(this,r)),this},i.staggerFrom=function(t,e,i,n,r,s,a){return i.runBackwards=1,qt(i).immediateRender=Z(i.immediateRender),this.staggerTo(t,e,i,n,r,s,a)},i.staggerFromTo=function(t,e,i,n,r,s,a,o){return n.startAt=i,qt(n).immediateRender=Z(n.immediateRender),this.staggerTo(t,e,n,r,s,a,o)},i.render=function(t,e,i){var n,r,s,a,o,u,l,h,c,p,d,m,g=this._time,_=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:Dt(t),b=this._zTime<0!=t<0&&(this._initted||!v);if(this!==f&&y>_&&t>=0&&(y=_),y!==this._tTime||i||b){if(g!==this._time&&v&&(y+=this._time-g,t+=this._time-g),n=y,c=this._start,u=!(h=this._ts),b&&(v||(g=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(d=this._yoyo,o=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,i);if(n=Dt(y%o),y===_?(a=this._repeat,n=v):((a=~~(y/o))&&a===y/o&&(n=v,a--),n>v&&(n=v)),p=Qt(this._tTime,o),!g&&this._tTime&&p!==a&&(p=a),d&&1&a&&(n=v-n,m=1),a!==p&&!this._lock){var w=d&&1&p,x=w===(d&&1&a);if(ae)for(n=t._first;n&&n._start<=i;){if("isPause"===n.data&&n._start>e)return n;n=n._next}else for(n=t._last;n&&n._start>=i;){if("isPause"===n.data&&n._start=g&&t>=0)for(r=this._first;r;){if(s=r._next,(r._act||n>=r._start)&&r._ts&&l!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(n-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(n-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){l=0,s&&(y+=this._zTime=-1e-8);break}}r=s}else{r=this._last;for(var T=t<0?t:n;r;){if(s=r._prev,(r._act||T<=r._end)&&r._ts&&l!==r){if(r.parent!==this)return this.render(t,e,i);if(r.render(r._ts>0?(T-r._start)*r._ts:(r._dirty?r.totalDuration():r._tDur)+(T-r._start)*r._ts,e,i),n!==this._time||!this._ts&&!u){l=0,s&&(y+=this._zTime=T?-1e-8:1e-8);break}}r=s}}if(l&&!e&&(this.pause(),l.render(n>=g?0:-1e-8)._zTime=n>=g?1:-1,this._ts))return this._start=c,Jt(this),this.render(t,e,i);this._onUpdate&&!e&&Me(this,"onUpdate",!0),(y===_&&this._tTime>=this.totalDuration()||!y&&g)&&(c!==this._start&&Math.abs(h)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===_&&this._ts>0||!y&&this._ts<0)&&jt(this,1),e||t<0&&!g||!y&&!g&&_||(Me(this,y===_&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y<_&&this.timeScale()>0)&&this._prom())))}return this},i.add=function(t,e){var i=this;if(Q(e)||(e=ue(this,e,t)),!(t instanceof Je)){if(it(t))return t.forEach((function(t){return i.add(t,e)})),this;if(W(t))return this.addLabel(t,e);if(!$(t))return this;t=li.delayedCall(0,t)}return this!==t?te(this,t,e):this},i.getChildren=function(t,e,i,n){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===i&&(i=!0),void 0===n&&(n=-1e8);for(var r=[],s=this._first;s;)s._start>=n&&(s instanceof li?e&&r.push(s):(i&&r.push(s),t&&r.push.apply(r,s.getChildren(!0,e,i)))),s=s._next;return r},i.getById=function(t){for(var e=this.getChildren(1,1,1),i=e.length;i--;)if(e[i].vars.id===t)return e[i]},i.remove=function(t){return W(t)?this.removeLabel(t):$(t)?this.killTweensOf(t):(Yt(this,t),t===this._recent&&(this._recent=this._last),Ht(this))},i.totalTime=function(e,i){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=Dt(ze.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,i),this._forcing=0,this):this._tTime},i.addLabel=function(t,e){return this.labels[t]=ue(this,e),this},i.removeLabel=function(t){return delete this.labels[t],this},i.addPause=function(t,e,i){var n=li.delayedCall(0,e||gt,i);return n.data="isPause",this._hasPause=1,te(this,n,ue(this,t))},i.removePause=function(t){var e=this._first;for(t=ue(this,t);e;)e._start===t&&"isPause"===e.data&&jt(e),e=e._next},i.killTweensOf=function(t,e,i){for(var n=this.getTweensOf(t,i),r=n.length;r--;)Ke!==n[r]&&n[r].kill(t,e);return this},i.getTweensOf=function(t,e){for(var i,n=[],r=ge(t),s=this._first,a=Q(e);s;)s instanceof li?It(s._targets,r)&&(a?(!Ke||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&n.push(s):(i=s.getTweensOf(r,e)).length&&n.push.apply(n,i),s=s._next;return n},i.tweenTo=function(t,e){e=e||{};var i,n=this,r=ue(n,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,l=s.immediateRender,h=li.to(n,zt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:r,overwrite:"auto",duration:e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale())||1e-8,onStart:function(){if(n.pause(),!i){var t=e.duration||Math.abs((r-(a&&"time"in a?a.time:n._time))/n.timeScale());h._dur!==t&&se(h,t,0,1).render(h._time,!0,!0),i=1}o&&o.apply(h,u||[])}},e));return l?h.render(0):h},i.tweenFromTo=function(t,e,i){return this.tweenTo(e,zt({startAt:{time:ue(this,t)}},i))},i.recent=function(){return this._recent},i.nextLabel=function(t){return void 0===t&&(t=this._time),Ce(this,ue(this,t))},i.previousLabel=function(t){return void 0===t&&(t=this._time),Ce(this,ue(this,t),1)},i.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+1e-8)},i.shiftChildren=function(t,e,i){void 0===i&&(i=0);for(var n,r=this._first,s=this.labels;r;)r._start>=i&&(r._start+=t,r._end+=t),r=r._next;if(e)for(n in s)s[n]>=i&&(s[n]+=t);return Ht(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={}),Ht(this)},i.totalDuration=function(t){var e,i,n,r=0,s=this,a=s._last,o=1e8;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(n=s.parent;a;)e=a._prev,a._dirty&&a.totalDuration(),(i=a._start)>o&&s._sort&&a._ts&&!s._lock?(s._lock=1,te(s,a,i-a._delay,1)._lock=0):o=i,i<0&&a._ts&&(r-=i,(!n&&!s._dp||n&&n.smoothChildTiming)&&(s._start+=i/s._ts,s._time-=i,s._tTime-=i),s.shiftChildren(-i,!1,-1/0),o=0),a._end>r&&a._ts&&(r=a._end),a=e;se(s,s===f&&s._time>r?s._time:r,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(f._ts&&(Lt(f,Gt(t,f)),_=ze.frame),ze.frame>=xt){xt+=F.autoSleep||120;var e=f._first;if((!e||!e._ts)&&F.autoSleep&&ze._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||ze.sleep()}}},e}(Je);zt(Ze.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ke,ti,ei=function(t,e,i,n,r,s,a){var o,u,l,h,c,f,p,d,m=new Ti(this._pt,t,e,0,1,_i,null,r),g=0,_=0;for(m.b=i,m.e=n,i+="",(p=~(n+="").indexOf("random("))&&(n=Te(n)),s&&(s(d=[i,n],t,e),i=d[0],n=d[1]),u=i.match(at)||[];o=at.exec(n);)h=o[0],c=n.substring(g,o.index),l?l=(l+1)%5:"rgba("===c.substr(-5)&&(l=1),h!==u[_++]&&(f=parseFloat(u[_-1])||0,m._pt={_next:m._pt,p:c||1===_?c:",",s:f,c:"="===h.charAt(1)?At(f,h)-f:parseFloat(h)-f,m:l&&l<4?Math.round:0},g=at.lastIndex);return m.c=g0&&!E&&(e._startAt=0),D&&i<=0)return void(i&&(e._zTime=i))}else!1===E&&(e._startAt=0);else if(M&&D)if(A)!E&&(e._startAt=0);else if(i&&(w=!1),s=zt({overwrite:!1,data:"isFromStart",lazy:w&&Z(x),immediateRender:w,stagger:0,parent:P},n),g&&(s[h.prop]=g),jt(e._startAt=li.set(I,s)),i<0&&e._startAt.render(-1,!0),e._zTime=i,w){if(!i)return}else t(e._startAt,1e-8);for(e._pt=e._ptCache=0,x=D&&Z(x)||x&&!D,r=0;r")}));else{for(p in u={},T)"ease"===p||"easeEach"===p||si(p,T[p],u,T.easeEach);for(p in u)for(E=u[p].sort((function(t,e){return t.t-e.t})),I=0,o=0;op-1e-8&&t>=0?p:t<1e-8?0:t;if(d){if(m!==this._tTime||!t||i||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=t<0){if(n=m,h=this.timeline,this._repeat){if(a=d+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*a+t,e,i);if(n=Dt(m%a),m===p?(s=this._repeat,n=d):((s=~~(m/a))&&s===m/a&&(n=d,s--),n>d&&(n=d)),(u=this._yoyo&&1&s)&&(c=this._yEase,n=d-n),o=Qt(this._tTime,a),n===f&&!i&&this._initted)return this._tTime=m,this;s!==o&&(h&&this._yEase&&je(h,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=i=1,this.render(Dt(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(ie(this,t<0?t:n,i,e))return this._tTime=0,this;if(f!==this._time)return this;if(d!==this._dur)return this.render(t,e,i)}if(this._tTime=m,this._time=n,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=l=(c||this._ease)(n/d),this._from&&(this.ratio=l=1-l),n&&!f&&!e&&(Me(this,"onStart"),this._tTime!==m))return this;for(r=this._pt;r;)r.r(l,r.d),r=r._next;h&&h.render(t<0?t:!n&&u?-1e-8:h._dur*h._ease(n/this._dur),e,i)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,i),Me(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&Me(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!d)&&(m===this._tDur&&this._ts>0||!m&&this._ts<0)&&jt(this,1),e||t<0&&!f||!m&&!f||(Me(this,m===p?"onComplete":"onReverseComplete",!0),this._prom&&!(m0)&&this._prom()))}}else!function(t,e,i,n){var r,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&ne(t)&&(t._initted||!re(t))||(t._ts<0||t._dp._ts<0)&&!re(t))?0:1,l=t._rDelay,h=0;if(l&&t._repeat&&(h=ce(0,t._tDur,e),s=Qt(h,l),t._yoyo&&1&s&&(u=1-u),s!==Qt(t._tTime,l)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||n||1e-8===t._zTime||!e&&t._zTime){if(!t._initted&&ie(t,e,n,i))return;for(a=t._zTime,t._zTime=e||(i?1e-8:0),i||(i=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=h,r=t._pt;r;)r.r(u,r.d),r=r._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!i&&Me(t,"onUpdate"),h&&t._repeat&&!i&&t.parent&&Me(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&jt(t,1),i||(Me(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,i);return this},i.targets=function(){return this._targets},i.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},i.resetTo=function(t,e,i,n){y||ze.wake(),this._ts||this.play();var r=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||ri(this,r),function(t,e,i,n,r,s,a){var o,u,l,h=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!h)for(h=t._ptCache[e]=[],u=t._ptLookup,l=t._targets.length;l--;){if((o=u[l][e])&&o.d&&o.d._pt)for(o=o.d._pt;o&&o.p!==e;)o=o._next;if(!o)return ti=1,t.vars[e]="+=0",ri(t,a),ti=0,1;h.push(o)}for(l=h.length;l--;)(o=h[l]).s=!n&&0!==n||r?o.s+(n||0)+s*o.c:n,o.c=i-o.s,o.e&&(o.e=Et(i)+fe(o.e)),o.b&&(o.b=o.s+fe(o.b))}(this,t,e,i,n,this._ease(r/this._dur),r)?this.resetTo(t,e,i,n):(Zt(this,0),this.parent||Xt(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},i.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?ke(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ke&&!0!==Ke.vars.overwrite)._first||ke(this),this.parent&&i!==this.timeline.totalDuration()&&se(this,this._dur*this.timeline._tDur/i,0,1),this}var n,r,s,a,o,u,l,h=this._targets,c=t?ge(t):h,f=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var i=t.length,n=i===e.length;n&&i--&&t[i]===e[i];);return i<0}(h,c))return"all"===e&&(this._pt=0),ke(this);for(n=this._op=this._op||[],"all"!==e&&(W(e)&&(o={},St(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var i,n,r,s,a=t[0]?Mt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(n in i=Vt({},e),o)if(n in i)for(r=(s=o[n].split(",")).length;r--;)i[s[r]]=i[n];return i}(h,e)),l=h.length;l--;)if(~c.indexOf(h[l]))for(o in r=f[l],"all"===e?(n[l]=e,a=r,s={}):(s=n[l]=n[l]||{},a=e),a)(u=r&&r[o])&&("kill"in u.d&&!0!==u.d.kill(o)||Yt(this,u,"_pt"),delete r[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&ke(this),this},e.to=function(t,i){return new e(t,i,arguments[2])},e.from=function(t,e){return le(1,arguments)},e.delayedCall=function(t,i,n,r){return new e(i,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:i,onReverseComplete:i,onCompleteParams:n,onReverseCompleteParams:n,callbackScope:r})},e.fromTo=function(t,e,i){return le(2,arguments)},e.set=function(t,i){return i.duration=0,i.repeatDelay||(i.repeat=0),new e(t,i)},e.killTweensOf=function(t,e,i){return f.killTweensOf(t,e,i)},e}(Je);zt(li.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),St("staggerTo,staggerFrom,staggerFromTo",(function(t){li[t]=function(){var e=new Ze,i=pe.call(arguments,0);return i.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,i)}}));var hi=function(t,e,i){return t[e]=i},ci=function(t,e,i){return t[e](i)},fi=function(t,e,i,n){return t[e](n.fp,i)},pi=function(t,e,i){return t.setAttribute(e,i)},di=function(t,e){return $(t[e])?ci:G(t[e])&&t.setAttribute?pi:hi},mi=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},gi=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},_i=function(t,e){var i=e._pt,n="";if(!t&&e.b)n=e.b;else if(1===t&&e.e)n=e.e;else{for(;i;)n=i.p+(i.m?i.m(i.s+i.c*t):Math.round(1e4*(i.s+i.c*t))/1e4)+n,i=i._next;n+=e.c}e.set(e.t,e.p,n,e)},vi=function(t,e){for(var i=e._pt;i;)i.r(t,i.d),i=i._next},yi=function(t,e,i,n){for(var r,s=this._pt;s;)r=s._next,s.p===n&&s.modifier(t,e,i),s=r},bi=function(t){for(var e,i,n=this._pt;n;)i=n._next,n.p===t&&!n.op||n.op===t?Yt(this,n,"_pt"):n.dep||(e=1),n=i;return!e},wi=function(t,e,i,n){n.mSet(t,e,n.m.call(n.tween,i,n.mt),n)},xi=function(t){for(var e,i,n,r,s=t._pt;s;){for(e=s._next,i=n;i&&i.pr>s.pr;)i=i._next;(s._prev=i?i._prev:r)?s._prev._next=s:n=s,(s._next=i)?i._prev=s:r=s,s=e}t._pt=n},Ti=function(){function t(t,e,i,n,r,s,a,o,u){this.t=e,this.s=n,this.c=r,this.p=i,this.r=s||mi,this.d=a||this,this.set=o||hi,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=wi,this.m=t,this.mt=i,this.tween=e},t}();St(Ot+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",(function(t){return _t[t]=1})),ht.TweenMax=ht.TweenLite=li,ht.TimelineLite=ht.TimelineMax=Ze,f=new Ze({sortChildren:!1,defaults:N,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),F.stringFilter=Re;var Oi={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),i=0;i1){var n=t.map((function(t){return ki.quickSetter(t,e,i)})),r=n.length;return function(t){for(var e=r;e--;)n[e](t)}}t=t[0]||{};var s=bt[e],a=Mt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var n=new s;v._pt=0,n.init(t,i?e+i:e,v,0,[t]),n.render(1,n),v._pt&&vi(1,v)}:a.set(t,o);return s?u:function(e){return u(t,o,i?e+i:e,a,1)}},quickTo:function(t,e,i){var n,r=ki.to(t,Vt(((n={})[e]="+=0.1",n.paused=!0,n),i||{})),s=function(t,i,n){return r.resetTo(e,t,i,n)};return s.tween=r,s},isTweening:function(t){return f.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=He(t.ease,N.ease)),Ft(N,t||{})},config:function(t){return Ft(F,t||{})},registerEffect:function(t){var e=t.name,i=t.effect,n=t.plugins,r=t.defaults,s=t.extendTimeline;(n||"").split(",").forEach((function(t){return t&&!bt[t]&&!ht[t]&&dt(e+" effect requires "+t+" plugin.")})),wt[e]=function(t,e,n){return i(ge(t),zt(e||{},r),n)},s&&(Ze.prototype[e]=function(t,i,n){return this.add(wt[e](t,J(i)?i:(n=i)&&{},this),n)})},registerEase:function(t,e){Fe[t]=He(e)},parseEase:function(t,e){return arguments.length?He(t,e):Fe},getById:function(t){return f.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var i,n,r=new Ze(t);for(r.smoothChildTiming=Z(t.smoothChildTiming),f.remove(r),r._dp=0,r._time=r._tTime=f._time,i=f._first;i;)n=i._next,!e&&!i._dur&&i instanceof li&&i.vars.onComplete===i._targets[0]||te(r,i,i._start-i._delay),i=n;return te(f,r,0),r},utils:{wrap:function t(e,i,n){var r=i-e;return it(e)?xe(e,t(0,e.length),i):he(n,(function(t){return(r+(t-e)%r)%r+e}))},wrapYoyo:function t(e,i,n){var r=i-e,s=2*r;return it(e)?xe(e,t(0,e.length-1),i):he(n,(function(t){return e+((t=(s+(t-e)%s)%s||0)>r?s-t:t)}))},distribute:ve,random:we,snap:be,normalize:function(t,e,i){return Oe(t,e,0,1,i)},getUnit:fe,clamp:function(t,e,i){return he(i,(function(i){return ce(t,e,i)}))},splitColor:Ae,toArray:ge,selector:function(t){return t=ge(t)[0]||dt("Invalid scope")||{},function(e){var i=t.current||t.nativeElement||t;return ge(e,i.querySelectorAll?i:i===t?dt("Invalid scope")||m.createElement("div"):t)}},mapRange:Oe,pipe:function(){for(var t=arguments.length,e=new Array(t),i=0;i=0?an[r]:"")+t},un=function(){"undefined"!=typeof window&&window.document&&(Si=window,Ei=Si.document,Di=Ei.documentElement,Ii=rn("div")||{style:{}},rn("div"),en=on(en),nn=en+"Origin",Ii.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Li=!!on("perspective"),Ai=1)},ln=function t(e){var i,n=rn("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),r=this.parentNode,s=this.nextSibling,a=this.style.cssText;if(Di.appendChild(n),n.appendChild(this),this.style.display="block",e)try{i=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(i=this._gsapBBox());return r&&(s?r.insertBefore(this,s):r.appendChild(this)),Di.removeChild(n),this.style.cssText=a,i},hn=function(t,e){for(var i=e.length;i--;)if(t.hasAttribute(e[i]))return t.getAttribute(e[i])},cn=function(t){var e;try{e=t.getBBox()}catch(i){e=ln.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===ln||(e=ln.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+hn(t,["x","cx","x1"])||0,y:+hn(t,["y","cy","y1"])||0,width:0,height:0}},fn=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!cn(t))},pn=function(t,e){if(e){var i=t.style;e in Bi&&e!==nn&&(e=en),i.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty(e.replace(Fi,"-$1").toLowerCase())):i.removeAttribute(e)}},dn=function(t,e,i,n,r,s){var a=new Ti(t._pt,e,i,0,1,s?$i:Wi);return t._pt=a,a.b=n,a.e=r,t._props.push(i),a},mn={deg:1,rad:1,turn:1},gn=function t(e,i,n,r){var s,a,o,u,l=parseFloat(n)||0,h=(n+"").trim().substr((l+"").length)||"px",c=Ii.style,f=Ni.test(i),p="svg"===e.tagName.toLowerCase(),d=(p?"client":"offset")+(f?"Width":"Height"),m=100,g="px"===r,_="%"===r;return r===h||!l||mn[r]||mn[h]?l:("px"!==h&&!g&&(l=t(e,i,n,"px")),u=e.getCTM&&fn(e),!_&&"%"!==h||!Bi[i]&&!~i.indexOf("adius")?(c[f?"width":"height"]=m+(g?h:r),a=~i.indexOf("adius")||"em"===r&&e.appendChild&&!p?e:e.parentNode,u&&(a=(e.ownerSVGElement||{}).parentNode),a&&a!==Ei&&a.appendChild||(a=Ei.body),(o=a._gsap)&&_&&o.width&&f&&o.time===ze.time?Et(l/o.width*m):((_||"%"===h)&&(c.position=sn(e,"position")),a===e&&(c.position="static"),a.appendChild(Ii),s=Ii[d],a.removeChild(Ii),c.position="absolute",f&&_&&((o=Mt(a)).time=ze.time,o.width=a[d]),Et(g?s*l/m:s&&l?m/s*l:0))):(s=u?e.getBBox()[f?"width":"height"]:e[d],Et(_?l/s*m:l/100*s)))},_n=function(t,e,i,n){var r;return Ai||un(),e in Xi&&"transform"!==e&&~(e=Xi[e]).indexOf(",")&&(e=e.split(",")[0]),Bi[e]&&"transform"!==e?(r=Sn(t,n),r="transformOrigin"!==e?r[e]:r.svg?r.origin:En(sn(t,nn))+" "+r.zOrigin+"px"):(!(r=t.style[e])||"auto"===r||n||~(r+"").indexOf("calc("))&&(r=wn[e]&&wn[e](t,e,i)||sn(t,e)||kt(t,e)||("opacity"===e?1:0)),i&&!~(r+"").trim().indexOf(" ")?gn(t,e,r,i)+i:r},vn=function(t,e,i,n){if(!i||"none"===i){var r=on(e,t,1),s=r&&sn(t,r,1);s&&s!==i?(e=r,i=s):"borderColor"===e&&(i=sn(t,"borderTopColor"))}var a,o,u,l,h,c,f,p,d,m,g,_=new Ti(this._pt,t.style,e,0,1,_i),v=0,y=0;if(_.b=i,_.e=n,i+="","auto"===(n+="")&&(t.style[e]=n,n=sn(t,e)||n,t.style[e]=i),Re(a=[i,n]),n=a[1],u=(i=a[0]).match(st)||[],(n.match(st)||[]).length){for(;o=st.exec(n);)f=o[0],d=n.substring(v,o.index),h?h=(h+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(h=1),f!==(c=u[y++]||"")&&(l=parseFloat(c)||0,g=c.substr((l+"").length),"="===f.charAt(1)&&(f=At(l,f)+g),p=parseFloat(f),m=f.substr((p+"").length),v=st.lastIndex-m.length,m||(m=m||F.units[e]||g,v===n.length&&(n+=m,_.e+=m)),g!==m&&(l=gn(t,e,c,m)||0),_._pt={_next:_._pt,p:d||1===y?d:",",s:l,c:p-l,m:h&&h<4||"zIndex"===e?Math.round:0});_.c=v-1;)i=o[r],Bi[i]&&(n=1,i="transformOrigin"===i?nn:en),pn(s,i);n&&(pn(s,en),u&&(u.svg&&s.removeAttribute("transform"),Sn(s,1),u.uncache=1))}},wn={clearProps:function(t,e,i,n,r){if("isFromStart"!==r.data){var s=t._pt=new Ti(t._pt,e,i,0,0,bn);return s.u=n,s.pr=-10,s.tween=r,t._props.push(i),1}}},xn=[1,0,0,1,0,0],Tn={},On=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},Cn=function(t){var e=sn(t,en);return On(e)?xn:e.substr(7).match(rt).map(Et)},Mn=function(t,e){var i,n,r,s,a=t._gsap||Mt(t),o=t.style,u=Cn(t);return a.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(r=t.transform.baseVal.consolidate().matrix).a,r.b,r.c,r.d,r.e,r.f]).join(",")?xn:u:(u!==xn||t.offsetParent||t===Di||a.svg||(r=o.display,o.display="block",(i=t.parentNode)&&t.offsetParent||(s=1,n=t.nextSibling,Di.appendChild(t)),u=Cn(t),r?o.display=r:pn(t,"display"),s&&(n?i.insertBefore(t,n):i?i.appendChild(t):Di.removeChild(t))),e&&u.length>6?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)},kn=function(t,e,i,n,r,s){var a,o,u,l=t._gsap,h=r||Mn(t,!0),c=l.xOrigin||0,f=l.yOrigin||0,p=l.xOffset||0,d=l.yOffset||0,m=h[0],g=h[1],_=h[2],v=h[3],y=h[4],b=h[5],w=e.split(" "),x=parseFloat(w[0])||0,T=parseFloat(w[1])||0;i?h!==xn&&(o=m*v-g*_)&&(u=x*(-g/o)+T*(m/o)-(m*b-g*y)/o,x=x*(v/o)+T*(-_/o)+(_*b-v*y)/o,T=u):(x=(a=cn(t)).x+(~w[0].indexOf("%")?x/100*a.width:x),T=a.y+(~(w[1]||w[0]).indexOf("%")?T/100*a.height:T)),n||!1!==n&&l.smooth?(y=x-c,b=T-f,l.xOffset=p+(y*m+b*_)-y,l.yOffset=d+(y*g+b*v)-b):l.xOffset=l.yOffset=0,l.xOrigin=x,l.yOrigin=T,l.smooth=!!n,l.origin=e,l.originIsAbsolute=!!i,t.style[nn]="0px 0px",s&&(dn(s,l,"xOrigin",c,x),dn(s,l,"yOrigin",f,T),dn(s,l,"xOffset",p,l.xOffset),dn(s,l,"yOffset",d,l.yOffset)),t.setAttribute("data-svg-origin",x+" "+T)},Sn=function(t,e){var i=t._gsap||new Ge(t);if("x"in i&&!e&&!i.uncache)return i;var n,r,s,a,o,u,l,h,c,f,p,d,m,g,_,v,y,b,w,x,T,O,C,M,k,S,E,D,A,I,P,L,B=t.style,R=i.scaleX<0,z="px",V="deg",N=sn(t,nn)||"0";return n=r=s=u=l=h=c=f=p=0,a=o=1,i.svg=!(!t.getCTM||!fn(t)),g=Mn(t,i.svg),i.svg&&(M=(!i.uncache||"0px 0px"===N)&&!e&&t.getAttribute("data-svg-origin"),kn(t,M||N,!!M||i.originIsAbsolute,!1!==i.smooth,g)),d=i.xOrigin||0,m=i.yOrigin||0,g!==xn&&(b=g[0],w=g[1],x=g[2],T=g[3],n=O=g[4],r=C=g[5],6===g.length?(a=Math.sqrt(b*b+w*w),o=Math.sqrt(T*T+x*x),u=b||w?Vi(w,b)*Ri:0,(c=x||T?Vi(x,T)*Ri+u:0)&&(o*=Math.abs(Math.cos(c*zi))),i.svg&&(n-=d-(d*b+m*x),r-=m-(d*w+m*T))):(L=g[6],I=g[7],E=g[8],D=g[9],A=g[10],P=g[11],n=g[12],r=g[13],s=g[14],l=(_=Vi(L,A))*Ri,_&&(M=O*(v=Math.cos(-_))+E*(y=Math.sin(-_)),k=C*v+D*y,S=L*v+A*y,E=O*-y+E*v,D=C*-y+D*v,A=L*-y+A*v,P=I*-y+P*v,O=M,C=k,L=S),h=(_=Vi(-x,A))*Ri,_&&(v=Math.cos(-_),P=T*(y=Math.sin(-_))+P*v,b=M=b*v-E*y,w=k=w*v-D*y,x=S=x*v-A*y),u=(_=Vi(w,b))*Ri,_&&(M=b*(v=Math.cos(_))+w*(y=Math.sin(_)),k=O*v+C*y,w=w*v-b*y,C=C*v-O*y,b=M,O=k),l&&Math.abs(l)+Math.abs(u)>359.9&&(l=u=0,h=180-h),a=Et(Math.sqrt(b*b+w*w+x*x)),o=Et(Math.sqrt(C*C+L*L)),_=Vi(O,C),c=Math.abs(_)>2e-4?_*Ri:0,p=P?1/(P<0?-P:P):0),i.svg&&(M=t.getAttribute("transform"),i.forceCSS=t.setAttribute("transform","")||!On(sn(t,en)),M&&t.setAttribute("transform",M))),Math.abs(c)>90&&Math.abs(c)<270&&(R?(a*=-1,c+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,c+=c<=0?180:-180)),e=e||i.uncache,i.x=n-((i.xPercent=n&&(!e&&i.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-n)?-50:0)))?t.offsetWidth*i.xPercent/100:0)+z,i.y=r-((i.yPercent=r&&(!e&&i.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-r)?-50:0)))?t.offsetHeight*i.yPercent/100:0)+z,i.z=s+z,i.scaleX=Et(a),i.scaleY=Et(o),i.rotation=Et(u)+V,i.rotationX=Et(l)+V,i.rotationY=Et(h)+V,i.skewX=c+V,i.skewY=f+V,i.transformPerspective=p+z,(i.zOrigin=parseFloat(N.split(" ")[2])||0)&&(B[nn]=En(N)),i.xOffset=i.yOffset=0,i.force3D=F.force3D,i.renderTransform=i.svg?Pn:Li?In:An,i.uncache=0,i},En=function(t){return(t=t.split(" "))[0]+" "+t[1]},Dn=function(t,e,i){var n=fe(e);return Et(parseFloat(e)+parseFloat(gn(t,"x",i+"px",n)))+n},An=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,In(t,e)},In=function(t,e){var i=e||this,n=i.xPercent,r=i.yPercent,s=i.x,a=i.y,o=i.z,u=i.rotation,l=i.rotationY,h=i.rotationX,c=i.skewX,f=i.skewY,p=i.scaleX,d=i.scaleY,m=i.transformPerspective,g=i.force3D,_=i.target,v=i.zOrigin,y="",b="auto"===g&&t&&1!==t||!0===g;if(v&&("0deg"!==h||"0deg"!==l)){var w,x=parseFloat(l)*zi,T=Math.sin(x),O=Math.cos(x);x=parseFloat(h)*zi,w=Math.cos(x),s=Dn(_,s,T*w*-v),a=Dn(_,a,-Math.sin(x)*-v),o=Dn(_,o,O*w*-v+v)}"0px"!==m&&(y+="perspective("+m+") "),(n||r)&&(y+="translate("+n+"%, "+r+"%) "),(b||"0px"!==s||"0px"!==a||"0px"!==o)&&(y+="0px"!==o||b?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+") "),"0deg"!==u&&(y+="rotate("+u+") "),"0deg"!==l&&(y+="rotateY("+l+") "),"0deg"!==h&&(y+="rotateX("+h+") "),"0deg"===c&&"0deg"===f||(y+="skew("+c+", "+f+") "),1===p&&1===d||(y+="scale("+p+", "+d+") "),_.style[en]=y||"translate(0, 0)"},Pn=function(t,e){var i,n,r,s,a,o=e||this,u=o.xPercent,l=o.yPercent,h=o.x,c=o.y,f=o.rotation,p=o.skewX,d=o.skewY,m=o.scaleX,g=o.scaleY,_=o.target,v=o.xOrigin,y=o.yOrigin,b=o.xOffset,w=o.yOffset,x=o.forceCSS,T=parseFloat(h),O=parseFloat(c);f=parseFloat(f),p=parseFloat(p),(d=parseFloat(d))&&(p+=d=parseFloat(d),f+=d),f||p?(f*=zi,p*=zi,i=Math.cos(f)*m,n=Math.sin(f)*m,r=Math.sin(f-p)*-g,s=Math.cos(f-p)*g,p&&(d*=zi,a=Math.tan(p-d),r*=a=Math.sqrt(1+a*a),s*=a,d&&(a=Math.tan(d),i*=a=Math.sqrt(1+a*a),n*=a)),i=Et(i),n=Et(n),r=Et(r),s=Et(s)):(i=m,s=g,n=r=0),(T&&!~(h+"").indexOf("px")||O&&!~(c+"").indexOf("px"))&&(T=gn(_,"x",h,"px"),O=gn(_,"y",c,"px")),(v||y||b||w)&&(T=Et(T+v-(v*i+y*r)+b),O=Et(O+y-(v*n+y*s)+w)),(u||l)&&(a=_.getBBox(),T=Et(T+u/100*a.width),O=Et(O+l/100*a.height)),a="matrix("+i+","+n+","+r+","+s+","+T+","+O+")",_.setAttribute("transform",a),x&&(_.style[en]=a)},Ln=function(t,e,i,n,r){var s,a,o=360,u=W(r),l=parseFloat(r)*(u&&~r.indexOf("rad")?Ri:1)-n,h=n+l+"deg";return u&&("short"===(s=r.split("_")[1])&&(l%=o)!==l%180&&(l+=l<0?o:-360),"cw"===s&&l<0?l=(l+36e9)%o-~~(l/o)*o:"ccw"===s&&l>0&&(l=(l-36e9)%o-~~(l/o)*o)),t._pt=a=new Ti(t._pt,e,i,n,l,ji),a.e=h,a.u="deg",t._props.push(i),a},Bn=function(t,e){for(var i in e)t[i]=e[i];return t},Rn=function(t,e,i){var n,r,s,a,o,u,l,h=Bn({},i._gsap),c=i.style;for(r in h.svg?(s=i.getAttribute("transform"),i.setAttribute("transform",""),c[en]=e,n=Sn(i,1),pn(i,en),i.setAttribute("transform",s)):(s=getComputedStyle(i)[en],c[en]=e,n=Sn(i,1),c[en]=s),Bi)(s=h[r])!==(a=n[r])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(r)<0&&(o=fe(s)!==(l=fe(a))?gn(i,r,s,l):parseFloat(s),u=parseFloat(a),t._pt=new Ti(t._pt,n,r,o,u-o,Yi),t._pt.u=l||0,t._props.push(r));Bn(n,h)};St("padding,margin,Width,Radius",(function(t,e){var i="Top",n="Right",r="Bottom",s="Left",a=(e<3?[i,n,r,s]:[i+s,i+n,r+n,r+s]).map((function(i){return e<2?t+i:"border"+i+t}));wn[e>1?"border"+t:t]=function(t,e,i,n,r){var s,o;if(arguments.length<4)return s=a.map((function(e){return _n(t,e,i)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(n+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,r)}}));var zn,Vn,Fn,Nn={name:"css",register:un,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,i,n,r){var s,a,o,u,l,h,c,f,p,d,m,g,_,v,y,b,w,x,T,O=this._props,C=t.style,M=i.vars.startAt;for(c in Ai||un(),e)if("autoRound"!==c&&(a=e[c],!bt[c]||!ni(c,e,i,n,t,r)))if(l=typeof a,h=wn[c],"function"===l&&(l=typeof(a=a.call(i,n,t,r))),"string"===l&&~a.indexOf("random(")&&(a=Te(a)),h)h(this,t,c,a,i)&&(y=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),a+="",Le.lastIndex=0,Le.test(s)||(f=fe(s),p=fe(a)),p?f!==p&&(s=gn(t,c,s,p)+p):f&&(a+=f),this.add(C,"setProperty",s,a,n,r,0,0,c),O.push(c);else if("undefined"!==l){if(M&&c in M?(s="function"==typeof M[c]?M[c].call(i,n,t,r):M[c],W(s)&&~s.indexOf("random(")&&(s=Te(s)),fe(s+"")||(s+=F.units[c]||fe(_n(t,c))||""),"="===(s+"").charAt(1)&&(s=_n(t,c))):s=_n(t,c),u=parseFloat(s),(d="string"===l&&"="===a.charAt(1)&&a.substr(0,2))&&(a=a.substr(2)),o=parseFloat(a),c in Xi&&("autoAlpha"===c&&(1===u&&"hidden"===_n(t,"visibility")&&o&&(u=0),dn(this,C,"visibility",u?"inherit":"hidden",o?"inherit":"hidden",!o)),"scale"!==c&&"transform"!==c&&~(c=Xi[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in Bi)if(g||((_=t._gsap).renderTransform&&!e.parseTransform||Sn(t,e.parseTransform),v=!1!==e.smoothOrigin&&_.smooth,(g=this._pt=new Ti(this._pt,C,en,0,1,_.renderTransform,_,0,-1)).dep=1),"scale"===c)this._pt=new Ti(this._pt,_,"scaleY",_.scaleY,(d?At(_.scaleY,d+o):o)-_.scaleY||0),O.push("scaleY",c),c+="X";else{if("transformOrigin"===c){w=void 0,x=void 0,T=void 0,w=(b=a).split(" "),x=w[0],T=w[1]||"50%","top"!==x&&"bottom"!==x&&"left"!==T&&"right"!==T||(b=x,x=T,T=b),w[0]=yn[x]||x,w[1]=yn[T]||T,a=w.join(" "),_.svg?kn(t,a,0,v,0,this):((p=parseFloat(a.split(" ")[2])||0)!==_.zOrigin&&dn(this,_,"zOrigin",_.zOrigin,p),dn(this,C,c,En(s),En(a)));continue}if("svgOrigin"===c){kn(t,a,1,v,0,this);continue}if(c in Tn){Ln(this,_,c,u,d?At(u,d+a):a);continue}if("smoothOrigin"===c){dn(this,_,"smooth",_.smooth,a);continue}if("force3D"===c){_[c]=a;continue}if("transform"===c){Rn(this,a,t);continue}}else c in C||(c=on(c)||c);if(m||(o||0===o)&&(u||0===u)&&!qi.test(a)&&c in C)o||(o=0),(f=(s+"").substr((u+"").length))!==(p=fe(a)||(c in F.units?F.units[c]:f))&&(u=gn(t,c,s,p)),this._pt=new Ti(this._pt,m?_:C,c,u,(d?At(u,d+o):o)-u,m||"px"!==p&&"zIndex"!==c||!1===e.autoRound?Yi:Ui),this._pt.u=p||0,f!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Hi);else if(c in C)vn.call(this,t,c,s,d?d+a:a);else{if(!(c in t)){pt(c,a);continue}this.add(t,c,s||t[c],d?d+a:a,n,r)}O.push(c)}y&&xi(this)},get:_n,aliases:Xi,getSetter:function(t,e,i){var n=Xi[e];return n&&n.indexOf(",")<0&&(e=n),e in Bi&&e!==nn&&(t._gsap.x||_n(t,"x"))?i&&Pi===i?"scale"===e?Zi:Ji:(Pi=i||{},"scale"===e?Ki:tn):t.style&&!G(t.style[e])?Qi:~e.indexOf("-")?Gi:di(t,e)},core:{_removeProperty:pn,_getMatrix:Mn}};ki.utils.checkPrefix=on,Fn=St((zn="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Vn="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){Bi[t]=1})),St(Vn,(function(t){F.units[t]="deg",Tn[t]=1})),Xi[Fn[13]]=zn+","+Vn,St("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");Xi[e[1]]=Fn[e[0]]})),St("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){F.units[t]="px"})),ki.registerPlugin(Nn);var qn=ki.registerPlugin(Nn)||ki;qn.core.Tween;function Xn(t,e){for(var i=0;i-1&&t%1==0}(t.length)}(t)?Array.prototype.slice.call(t):[t]}function $n(t){return Un(t)&&/^(1|3|11)$/.test(t.nodeType)}function Qn(t){return"string"==typeof t}function Gn(t){var e,i=t;return Qn(t)&&(i=/^(#[a-z]\w+)$/.test(t.trim())?document.getElementById(t.trim().slice(1)):document.querySelectorAll(t)),(e=i,Wn(e).reduce((function(t,e){return t.concat(Wn(e))}),[])).filter($n)}function Jn(t,e,i){var n={},r=null;return Un(t)&&(r=t[Jn.expando]||(t[Jn.expando]=++Jn.uid),n=Jn.cache[r]||(Jn.cache[r]={})),void 0===i?void 0===e?n:n[e]:void 0!==e?(n[e]=i,i):void 0}function Zn(t){var e=t&&t[Jn.expando];e&&(delete t[e],delete Jn.cache[e])}function Kn(t,e){for(var i=Wn(t),n=i.length,r=0;r/g," ".concat(e," ")),i=r.textContent}return i.replace(/\s+/g," ").trim()}(t,a);if(i=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return(t=t?String(t):"").split(e)}(h).reduce((function(t,i,o,u){var h,c;return i===a?(n.appendChild(mr("br")),t):(r.chars&&(c=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return(t=dr(t))&&Qn(t)&&!e&&fr(t)?pr(t):t.split(e)}(i).map((function(t){return mr(s,{class:"".concat(e.splitClass," ").concat(e.charClass),style:"display: inline-block;",textContent:t})})),l=l.concat(c)),r.words||r.lines?(h=mr(s,{class:"".concat(e.wordClass," ").concat(e.splitClass),style:"display: inline-block; position: ".concat(r.words?"relative":"static"),children:r.chars?c:null,textContent:r.chars?null:i}),n.appendChild(h)):Kn(c,(function(t){n.appendChild(t)})),o!==u.length-1&&n.appendChild(vr(" ")),r.words?t.concat(h):t)}),[]),t.innerHTML="",t.appendChild(n),!o&&!r.lines)return{chars:l,words:i,lines:[]};var c,f,p,d,m,g=[],_=[],v=Jn(t,"nodes",t.getElementsByTagName(s)),y=t.parentElement,b=t.nextElementSibling,w=window.getComputedStyle(t).textAlign;return o&&(d={left:n.offsetLeft,top:n.offsetTop,width:n.offsetWidth},p=t.offsetWidth,f=t.offsetHeight,Jn(t).cssWidth=t.style.width,Jn(t).cssHeight=t.style.height),Kn(v,(function(t){if(t!==n){var e,i=t.parentElement===n;r.lines&&i&&((e=Jn(t,"top",t.offsetTop))!==m&&(m=e,g.push(_=[])),_.push(t)),o&&(Jn(t).top=e||t.offsetTop,Jn(t).left=t.offsetLeft,Jn(t).width=t.offsetWidth,Jn(t).height=c||(c=t.offsetHeight))}})),y&&y.removeChild(t),r.lines&&(n=_r(),u=g.map((function(t){var i=mr(s,{class:"".concat(e.splitClass," ").concat(e.lineClass),style:"display: block; text-align: ".concat(w,"; width: 100%;")});return n.appendChild(i),o&&(Jn(i).type="line",Jn(i).top=Jn(t[0]).top,Jn(i).height=c),Kn(t,(function(t,e,n){r.words?i.appendChild(t):r.chars?Kn(t.children,(function(t){i.appendChild(t)})):i.appendChild(vr(t.textContent)),e!==n.length-1&&i.appendChild(vr(" "))})),i})),t.replaceChild(n,t.firstChild)),o&&(t.style.width="".concat(t.style.width||p,"px"),t.style.height="".concat(f,"px"),Kn(v,(function(t){var e="line"===Jn(t).type,i=!e&&"line"===Jn(t.parentElement).type;t.style.top="".concat(i?0:Jn(t).top,"px"),t.style.left="".concat(e?d.left:Jn(t).left-(i?d.left:0),"px"),t.style.height="".concat(Jn(t).height,"px"),t.style.width="".concat(e?d.width:Jn(t).width,"px"),t.style.position="absolute"}))),y&&(b?y.insertBefore(t,b):y.appendChild(t)),{lines:u,words:r.words?i:[],chars:l}}var br=jn(gr,{}),wr=function(){function t(e,i){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.isSplit=!1,this.settings=jn(br,Hn(i)),this.elements=Gn(e)||[],this.elements.length&&(this.originals=this.elements.map((function(t){return Jn(t,"html",Jn(t).html||t.innerHTML)})),this.settings.types&&this.split())}return Yn(t,null,[{key:"defaults",get:function(){return br},set:function(t){br=jn(br,Hn(t))}}]),Yn(t,[{key:"split",value:function(t){var e=this;this.revert(),this.lines=[],this.words=[],this.chars=[];var i=[window.pageXOffset,window.pageYOffset];void 0!==t&&(this.settings=jn(this.settings,Hn(t))),this.elements.forEach((function(t){var i=yr(t,e.settings),n=i.lines,r=i.words,s=i.chars;e.lines=e.lines.concat(n),e.words=e.words.concat(r),e.chars=e.chars.concat(s),Jn(t).isSplit=!0})),this.isSplit=!0,window.scrollTo(i[0],i[1]),this.elements.forEach((function(t){Wn(Jn(t).nodes||[]).forEach(Zn)}))}},{key:"revert",value:function(){var t=this;this.isSplit&&(this.lines=null,this.words=null,this.chars=null),this.elements.forEach((function(e){Jn(e).isSplit&&Jn(e).html&&(e.innerHTML=Jn(e).html,e.style.height=Jn(e).cssHeight||"",e.style.width=Jn(e).cssWidth||"",t.isSplit=!1)}))}}]),t}();const xr={duration:1.4,ease:"power4"}; 16 | /*! 17 | * matrix 3.10.3 18 | * https://greensock.com 19 | * 20 | * Copyright 2008-2022, GreenSock. All rights reserved. 21 | * Subject to the terms at https://greensock.com/standard-license or for 22 | * Club GreenSock members, the agreement issued with that membership. 23 | * @author: Jack Doyle, jack@greensock.com 24 | */var Tr,Or,Cr,Mr,kr,Sr,Er,Dr,Ar,Ir="transform",Pr=Ir+"Origin",Lr=function(t){var e=t.ownerDocument||t;!(Ir in t.style)&&"msTransform"in t.style&&(Pr=(Ir="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(Or=window,Er=new Hr,e){Tr=e,Cr=e.documentElement,Mr=e.body,(Dr=Tr.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),n=e.createElement("div");Mr.appendChild(i),i.appendChild(n),i.style.position="static",i.style[Ir]="translate3d(0,0,1px)",Ar=n.offsetParent!==i,Mr.removeChild(i)}return e},Br=[],Rr=[],zr=function(){return Or.pageYOffset||Tr.scrollTop||Cr.scrollTop||Mr.scrollTop||0},Vr=function(){return Or.pageXOffset||Tr.scrollLeft||Cr.scrollLeft||Mr.scrollLeft||0},Fr=function(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)},Nr=function t(e){return"fixed"===Or.getComputedStyle(e).position||((e=e.parentNode)&&1===e.nodeType?t(e):void 0)},qr=function t(e,i){if(e.parentNode&&(Tr||Lr(e))){var n=Fr(e),r=n?n.getAttribute("xmlns")||"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s=n?i?"rect":"g":"div",a=2!==i?0:100,o=3===i?100:0,u="position:absolute;display:block;pointer-events:none;margin:0;padding:0;",l=Tr.createElementNS?Tr.createElementNS(r.replace(/^https/,"http"),s):Tr.createElement(s);return i&&(n?(Sr||(Sr=t(e)),l.setAttribute("width",.01),l.setAttribute("height",.01),l.setAttribute("transform","translate("+a+","+o+")"),Sr.appendChild(l)):(kr||((kr=t(e)).style.cssText=u),l.style.cssText=u+"width:0.1px;height:0.1px;top:"+o+"px;left:"+a+"px",kr.appendChild(l))),l}throw"Need document and parent."},Xr=function(t){var e,i=t.getCTM();return i||(e=t.style[Ir],t.style[Ir]="none",t.appendChild(Dr),i=Dr.getCTM(),t.removeChild(Dr),e?t.style[Ir]=e:t.style.removeProperty(Ir.replace(/([A-Z])/g,"-$1").toLowerCase())),i||Er.clone()},Yr=function(t,e){var i,n,r,s,a,o,u=Fr(t),l=t===u,h=u?Br:Rr,c=t.parentNode;if(t===Or)return t;if(h.length||h.push(qr(t,1),qr(t,2),qr(t,3)),i=u?Sr:kr,u)l?(s=-(r=Xr(t)).e/r.a,a=-r.f/r.d,n=Er):t.getBBox?(r=t.getBBox(),n=(n=t.transform?t.transform.baseVal:{}).numberOfItems?n.numberOfItems>1?function(t){for(var e=new Hr,i=0;i4&&(s=r.offsetLeft,a=r.offsetTop,r=0);if("absolute"!==(o=Or.getComputedStyle(t)).position&&"fixed"!==o.position)for(n=t.offsetParent;c&&c!==n;)s+=c.scrollLeft||0,a+=c.scrollTop||0,c=c.parentNode;(r=i.style).top=t.offsetTop-a+"px",r.left=t.offsetLeft-s+"px",r[Ir]=o[Ir],r[Pr]=o[Pr],r.position="fixed"===o.position?"fixed":"absolute",t.parentNode.appendChild(i)}return i},jr=function(t,e,i,n,r,s,a){return t.a=e,t.b=i,t.c=n,t.d=r,t.e=s,t.f=a,t},Hr=function(){function t(t,e,i,n,r,s){void 0===t&&(t=1),void 0===e&&(e=0),void 0===i&&(i=0),void 0===n&&(n=1),void 0===r&&(r=0),void 0===s&&(s=0),jr(this,t,e,i,n,r,s)}var e=t.prototype;return e.inverse=function(){var t=this.a,e=this.b,i=this.c,n=this.d,r=this.e,s=this.f,a=t*n-e*i||1e-10;return jr(this,n/a,-e/a,-i/a,t/a,(i*s-n*r)/a,-(t*s-e*r)/a)},e.multiply=function(t){var e=this.a,i=this.b,n=this.c,r=this.d,s=this.e,a=this.f,o=t.a,u=t.c,l=t.b,h=t.d,c=t.e,f=t.f;return jr(this,o*e+l*n,o*i+l*r,u*e+h*n,u*i+h*r,s+c*e+f*n,a+c*i+f*r)},e.clone=function(){return new t(this.a,this.b,this.c,this.d,this.e,this.f)},e.equals=function(t){var e=this.a,i=this.b,n=this.c,r=this.d,s=this.e,a=this.f;return e===t.a&&i===t.b&&n===t.c&&r===t.d&&s===t.e&&a===t.f},e.apply=function(t,e){void 0===e&&(e={});var i=t.x,n=t.y,r=this.a,s=this.b,a=this.c,o=this.d,u=this.e,l=this.f;return e.x=i*r+n*a+u||0,e.y=i*s+n*o+l||0,e},t}();function Ur(t,e,i,n){if(!t||!t.parentNode||(Tr||Lr(t)).documentElement===t)return new Hr;var r=function(t){for(var e,i;t&&t!==Mr;)(i=t._gsap)&&i.uncache&&i.get(t,"x"),i&&!i.scaleX&&!i.scaleY&&i.renderTransform&&(i.scaleX=i.scaleY=1e-4,i.renderTransform(1,i),e?e.push(i):e=[i]),t=t.parentNode;return e}(t),s=Fr(t)?Br:Rr,a=Yr(t,i),o=s[0].getBoundingClientRect(),u=s[1].getBoundingClientRect(),l=s[2].getBoundingClientRect(),h=a.parentNode,c=!n&&Nr(t),f=new Hr((u.left-o.left)/100,(u.top-o.top)/100,(l.left-o.left)/100,(l.top-o.top)/100,o.left+(c?0:Vr()),o.top+(c?0:zr()));if(h.removeChild(a),r)for(o=r.length;o--;)(u=r[o]).scaleX=u.scaleY=0,u.renderTransform(1,u);return e?f.inverse():f}var Wr,$r,Qr,Gr,Jr,Zr,Kr,ts=1,es=function(t,e){return t.actions.forEach((function(t){return t.vars[e]&&t.vars[e](t)}))},is={},ns=180/Math.PI,rs=Math.PI/180,ss={},as={},os={},us=function(t){return"string"==typeof t?t.split(" ").join("").split(","):t},ls=us("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),hs=us("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),cs=function(t){return Wr(t)[0]||console.warn("Element not found:",t)},fs=function(t){return Math.round(1e4*t)/1e4||0},ps=function(t,e,i){return t.forEach((function(t){return t.classList[i](e)}))},ds={zIndex:1,kill:1,simple:1,spin:1,clearProps:1,targets:1,toggleClass:1,onComplete:1,onUpdate:1,onInterrupt:1,onStart:1,delay:1,repeat:1,repeatDelay:1,yoyo:1,scale:1,fade:1,absolute:1,props:1,onEnter:1,onLeave:1,custom:1,paused:1,nested:1,prune:1,absoluteOnLeave:1},ms={zIndex:1,simple:1,clearProps:1,scale:1,absolute:1,fitChild:1,getVars:1,props:1},gs=function(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()},_s=function(t,e){var i,n={};for(i in t)e[i]||(n[i]=t[i]);return n},vs={},ys=function(t){var e=vs[t]=us(t);return os[t]=e.concat(hs),e},bs=function t(e,i,n){void 0===n&&(n=0);for(var r=e.parentNode,s=1e3*Math.pow(10,n)*(i?-1:1),a=i?900*-s:0;e;)a+=s,e=e.previousSibling;return r?a+t(r,i,n+1):a},ws=function(t,e,i){return t.forEach((function(t){return t.d=bs(i?t.element:t.t,e)})),t.sort((function(t,e){return t.d-e.d})),t},xs=function(t,e){for(var i,n,r=t.element.style,s=t.css=t.css||[],a=e.length;a--;)n=r[i=e[a]]||r.getPropertyValue(i),s.push(n?i:as[i]||(as[i]=gs(i)),n);return r},Ts=function(t){var e=t.css,i=t.element.style,n=0;for(t.cache.uncache=1;n0&&B&&(u.style.opacity=Q?g.opacity-_.opacity:"0"),Ps(g,_,L,F)):_.isVisible!==g.isVisible&&(_.isVisible?g.isVisible||(_.css=g.css,j.push(_),H.splice(o--,1),T&&I&&Ps(g,_,L,F)):(g.isVisible&&Y.push(g),H.splice(o--,1))),L||(u.style.maxWidth=Math.max(g.width,_.width)+"px",u.style.maxHeight=Math.max(g.height,_.height)+"px",u.style.minWidth=Math.min(g.width,_.width)+"px",u.style.minHeight=Math.min(g.height,_.height)+"px"),I&&A&&u.classList.add(A)):H.splice(o--,1),f.push(g);var e;if(A&&(e=f.map((function(t){return t.element})),I&&e.forEach((function(t){return t.classList.remove(A)}))),Vs(!1),L?(N.scaleX=function(t){return H[t].a.scaleX},N.scaleY=function(t){return H[t].a.scaleY}):(N.width=function(t){return H[t].a.width+"px"},N.height=function(t){return H[t].a.height+"px"},N.autoRound=i.autoRound||!1),N.x=function(t){return H[t].a.x+"px"},N.y=function(t){return H[t].a.y+"px"},N.rotation=function(t){return H[t].a.rotation+(z?360*$(t,c[t],c):0)},N.skewX=function(t){return H[t].a.skewX},c=H.map((function(t){return t.t})),(P||0===P)&&(N.modifiers={zIndex:function(){return P}},N.zIndex=P,N.immediateRender=!1!==i.immediateRender),B&&(N.opacity=function(t){return H[t].sd<0?0:H[t].sd>0?H[t].a.opacity:"+=0"}),U.length){R=$r.utils.distribute(R);var n=c.slice(U.length);N.stagger=function(t,e){return R(~U.indexOf(e)?c.indexOf(H[t].swap.t):t,e,n)}}if(ls.forEach((function(t){return i[t]&&q.eventCallback(t,i[t],i[t+"Params"])})),C&&c.length)for(s in X=_s(N,ds),"scale"in C&&(C.scaleX=C.scaleY=C.scale,delete C.scale),C)(r=_s(C[s],ms))[s]=N[s],!("duration"in r)&&"duration"in N&&(r.duration=N.duration),r.stagger=N.stagger,G.call(q,c,r,0),delete X[s];(c.length||j.length||Y.length)&&(A&&q.add((function(){return ps(e,A,q._zTime<0?"remove":"add")}),0)&&!k&&ps(e,A,"add"),c.length&&G.call(q,c,X,0)),Is(w,Y,q),Is(x,j,q);var p=Qr&&Qr.timeline;p&&(p.add(q,0),Qr._final.push((function(){return Os(H,!b)}))),a=q.duration(),q.call((function(){var t=q.time()>=a;t&&!p&&Os(H,!b),A&&ps(e,A,t?"remove":"add")}))},O&&(T=H.filter((function(t){return!t.sd&&!t.a.isVisible&&t.b.isVisible})).map((function(t){return t.a.element}))),Qr)?(T&&(v=Qr._abs).push.apply(v,ks(H,T)),Qr._run.push(m)):(T&&Ss(ks(H,T)),m());return Qr?Qr.timeline:q},Ns=function t(e){e.vars.onInterrupt&&e.vars.onInterrupt.apply(e,e.vars.onInterruptParams||[]),e.getChildren(!0,!1,!0).forEach(t)},qs=function(t,e){if(t&&t.progress()<1&&!t.paused())return e&&(Ns(t),e<2&&t.progress(1),t.kill()),!0},Xs=function(t){for(var e,i=t.idLookup={},n=t.alt={},r=t.elementStates,s=r.length;s--;)i[(e=r[s]).id]?n[e.id]=e:i[e.id]=e},Ys=function(){function t(t,e,i){if(this.props=e&&e.props,this.simple=!(!e||!e.simple),i)this.targets=As(t),this.elementStates=t,Xs(this);else{this.targets=Wr(t);var n=e&&(!1===e.kill||e.batch&&!e.kill);Qr&&!n&&Qr._kill.push(this),this.update(n||!!Qr)}}var e=t.prototype;return e.update=function(t){var e=this;return this.elementStates=this.targets.map((function(t){return new js(t,e.props,e.simple)})),Xs(this),this.interrupt(t),this.recordInlineStyles(),this},e.clear=function(){return this.targets.length=this.elementStates.length=0,Xs(this),this},e.fit=function(t,e,i){for(var n,r,s=ws(this.elementStates.slice(0),!1,!0),a=(t||this).idLookup,o=0;o=0&&this.actions.splice(e,1),this},e.getState=function(t){var e=this,i=Qr,n=Gr;return Qr=this,this.state.clear(),this._kill.length=0,this.actions.forEach((function(i){i.vars.getState&&(i.states.length=0,Gr=i,i.state=i.vars.getState(i)),t&&i.states.forEach((function(t){return e.state.add(t)}))})),Gr=n,Qr=i,this.killConflicts(),this},e.animate=function(){var t,e,i=this,n=Qr,r=this.timeline,s=this.actions.length;for(Qr=this,r.clear(),this._abs.length=this._final.length=this._run.length=0,this.actions.forEach((function(t){t.vars.animate&&t.vars.animate(t);var e,i,n=t.vars.onEnter,r=t.vars.onLeave,s=t.targets;s&&s.length&&(n||r)&&(e=new Ys,t.states.forEach((function(t){return e.add(t)})),(i=e.compare(Ws.getState(s))).enter.length&&n&&n(i.enter),i.leave.length&&r&&r(i.leave))})),Ss(this._abs),this._run.forEach((function(t){return t()})),e=r.duration(),t=this._final.slice(0),r.add((function(){e<=r.time()&&(t.forEach((function(t){return t()})),es(i,"onComplete"))})),Qr=n;s--;)this.actions[s].vars.once&&this.actions[s].kill();return es(this,"onStart"),r.restart(),this},e.loadState=function(t){t||(t=function(){return 0});var e=[];return this.actions.forEach((function(i){if(i.vars.loadState){var n,r=function r(s){s&&(i.targets=s),~(n=e.indexOf(r))&&(e.splice(n,1),e.length||t())};e.push(r),i.vars.loadState(r)}})),e.length||t(),this},e.setState=function(){return this.actions.forEach((function(t){return t.targets=t.vars.setState&&t.vars.setState(t)})),this},e.killConflicts=function(t){return this.state.interrupt(t),this._kill.forEach((function(e){return e.interrupt(t)})),this},e.run=function(t,e){var i=this;return this!==Qr&&(t||this.getState(e),this.loadState((function(){i._killed||(i.setState(),i.animate())}))),this},e.clear=function(t){this.state.clear(),t||(this.actions.length=0)},e.getStateById=function(t){for(var e,i=this.actions.length;i--;)if(e=this.actions[i].getStateById(t))return e;return this.state.idLookup[t]&&this.state},e.kill=function(){this._killed=1,this.clear(),delete is[this.id]},t}(),Ws=function(){function t(){}return t.getState=function(e,i){var n=Ls(e,i);return Gr&&Gr.states.push(n),i&&i.batch&&t.batch(i.batch).state.add(n),n},t.from=function(t,e){return"clearProps"in(e=e||{})||(e.clearProps=!0),Fs(t,Ls(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,-1)},t.to=function(t,e){return Fs(t,Ls(e.targets||t.targets,{props:e.props||t.props,simple:e.simple,kill:!!e.kill}),e,1)},t.fromTo=function(t,e,i){return Fs(t,e,i)},t.fit=function(t,e,i){var n=i?_s(i,ms):{},r=i||n,s=r.absolute,a=r.scale,o=r.getVars,u=r.props,l=r.runBackwards,h=r.onComplete,c=r.simple,f=i&&i.fitChild&&cs(i.fitChild),p=Es(e,u,c,t),d=Es(t,0,c,p),m=u?os[u]:hs;return u&&Ds(n,p.props),l&&(xs(d,m),"immediateRender"in n||(n.immediateRender=!0),n.onComplete=function(){Ts(d),h&&h.apply(this,arguments)}),s&&Ms(d,p),n=Ps(d,p,a||f,u,f,n.duration||o?n:0),o?n:n.duration?$r.to(d.element,n):null},t.makeAbsolute=function(t,e){return(t instanceof Ys?t:new Ys(t,e)).makeAbsolute()},t.batch=function(t){return t||(t="default"),is[t]||(is[t]=new Us(t))},t.killFlipsOf=function(t,e){(t instanceof Ys?t.targets:Wr(t)).forEach((function(t){return t&&qs(t._flip,!1!==e?1:2)}))},t.isFlipping=function(e){var i=t.getByTarget(e);return!!i&&i.isActive()},t.getByTarget=function(t){return(cs(t)||ss)._flip},t.getElementState=function(t,e){return new js(cs(t),e)},t.convertCoordinates=function(t,e,i){var n=Ur(e,!0,!0).multiply(Ur(t));return i?n.apply(i):n},t.register=function(t){if(Jr="undefined"!=typeof document&&document.body){$r=t,Lr(Jr),Wr=$r.utils.toArray;var e=$r.utils.snap(.1);Zr=function(t,i){return e(parseFloat(t)+i)}}},t}();Ws.version="3.10.3","undefined"!=typeof window&&window.gsap&&window.gsap.registerPlugin(Ws),qn.registerPlugin(Ws);const $s=new class extends o{layout(){this.DOM.el.style.backgroundImage="none";let t="";for(let e=0;e<=this.options.totalTrailElements-1;++e){const i=e===this.options.totalTrailElements-1?1:.8;t+=``}this.DOM.el.innerHTML=t,this.DOM.trailElems=this.DOM.el.querySelectorAll(".trail__img"),this.DOM.el.classList.add("trail")}reset(){this.DOM.el.classList.remove("trail"),this.DOM.el.style.backgroundImage=`url(${this.bgImage})`,this.DOM.el.innerHTML="",this.options.perspective&&(this.DOM.el.style.perspective="none")}constructor(t,e){super(t,e),a(this,"bgImage",void 0),this.bgImage=/(?:\(['"]?)(.*?)(?:['"]?\))/.exec(this.DOM.el.style.backgroundImage)[1],this.layout()}}(document.querySelector(".intro-image"),{perspective:1e3,totalTrailElements:8}),Qs=new u(document.querySelector(".intro-content__title--up"),{perspective:1e3,totalTrailElements:2}),Gs=new u(document.querySelector(".intro-content__title--down"),{totalTrailElements:3}),Js={menu:document.querySelector(".button-menu"),logo:document.querySelector(".logo"),progress:document.querySelector(".intro-progress")},Zs={image:document.querySelector(".intro-content__image"),enterButton:document.querySelector(".button-enter")},Ks={titleTop:document.querySelector(".content__title--up"),titleBottom:document.querySelector(".content__title--down"),about:document.querySelector(".content__about"),aboutText:document.querySelector(".content__about-text"),finalImagePlacement:document.querySelector(".content__image--2"),otherImages:document.querySelectorAll(".content__image--1 > .content__image-inner, .content__image--3 > .content__image-inner")},ta=new class{in(t=!0){return this.isVisible=!0,qn.killTweensOf(this.SplitTypeInstance.lines),this.inTimeline=qn.timeline({defaults:xr}).addLabel("start",0).set(this.SplitTypeInstance.lines,{yPercent:105},"start"),t?this.inTimeline.to(this.SplitTypeInstance.lines,{yPercent:0,stagger:.04},"start"):this.inTimeline.set(this.SplitTypeInstance.lines,{yPercent:0},"start"),this.inTimeline}out(t=!0){return this.isVisible=!1,qn.killTweensOf(this.SplitTypeInstance.lines),this.outTimeline=qn.timeline({defaults:xr}).addLabel("start",0),t?this.outTimeline.to(this.SplitTypeInstance.lines,{yPercent:-105,stagger:.04},"start"):this.outTimeline.set(this.SplitTypeInstance.lines,{yPercent:-105},"start"),this.outTimeline}initEvents(){window.addEventListener("resize",(()=>{this.SplitTypeInstance.split(),s(this.SplitTypeInstance.lines,"div","oh"),this.isVisible||qn.set(this.SplitTypeInstance.lines,{yPercent:105})}))}constructor(t){a(this,"DOM",{el:null}),a(this,"SplitTypeInstance",void 0),a(this,"isVisible",void 0),a(this,"inTimeline",void 0),a(this,"outTimeline",void 0),this.DOM={el:t},this.SplitTypeInstance=new wr(this.DOM.el,{types:"lines"}),s(this.SplitTypeInstance.lines,"div","oh"),this.initEvents()}}(Ks.aboutText);let ea={isAnimating:!1,iscontentOpen:!1};Zs.enterButton.addEventListener("click",(()=>{if(ea.isAnimating||ea.iscontentOpen)return!1;ea.isAnimating=!0,ea.iscontentOpen=!0,qn.timeline({defaults:xr,onComplete:()=>{ea.isAnimating=!1}}).addLabel("start",0).to(Zs.enterButton,{duration:.6,opacity:0,scale:.8},"start").add((()=>{const t=Ws.getState(Qs.DOM.el),e=Ws.getState(Gs.DOM.el);Ks.titleTop.appendChild(Qs.DOM.el),Ks.titleBottom.appendChild(Gs.DOM.el),Ws.from(t,{duration:xr.duration,ease:xr.ease,scale:!0}),Ws.from(e,{duration:xr.duration,ease:xr.ease,scale:!0});const i=Ws.getState($s.DOM.el,{props:"border-radius"});Ks.finalImagePlacement.appendChild($s.DOM.el),qn.set($s.DOM.el,{opacity:1}),Ws.from(i,{duration:xr.duration,ease:xr.ease})}),"start").to(Ks.otherImages,{startAt:{yPercent:100},yPercent:0,opacity:1},"start+=0.1").to(Ks.about,{startAt:{yPercent:10},yPercent:0,opacity:1},"start+=0.2").add((()=>{ta.in()}),"start+=0.2")}));new class{onComplete(t){return qn.timeline().to(this.progressVal,{duration:1.5,ease:"steps(14)",value:100,onUpdate:()=>this.DOM.el.innerHTML=Math.floor(this.progressVal.value)+"%",onComplete:t}).to(this.DOM.el,{duration:.7,ease:"power3.inOut",opacity:0})}constructor(t){a(this,"DOM",{el:null}),a(this,"progressVal",{value:0}),this.DOM.el=t}}(Js.progress).onComplete((()=>{if(ea.isAnimating)return!1;ea.isAnimating=!0,qn.timeline({defaults:xr,onComplete:()=>{Qs.reset(),Gs.reset(),$s.reset(),ea.isAnimating=!1}}).addLabel("start",0).add((()=>{const t=Ws.getState($s.DOM.trailElems);Zs.image.appendChild($s.DOM.el),Ws.from(t,{duration:xr.duration,ease:xr.ease,stagger:-.03,scale:!0})}),"start").set([Qs.DOM.trailElems,Gs.DOM.trailElems],{opacity:0},"start").set([Qs.DOM.el,Gs.DOM.el],{opacity:1},"start").to(Qs.DOM.trailElems,{y:0,startAt:{rotateY:160,opacity:0},rotateY:0,opacity:1,stagger:-.1},"start").to(Gs.DOM.trailElems,{y:0,opacity:1,stagger:-.08},"start").to(Zs.enterButton,{startAt:{opacity:0,scale:.8},opacity:1,scale:1},"start+=0.3").add((()=>{Js.menu.classList.add("show"),Js.logo.classList.add("show")}),"start+=0.3")})),((t="img")=>new Promise((e=>{r(document.querySelectorAll(t),{background:!0},e)})))(".intro-image").then((t=>document.body.classList.remove("loading"))); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Intro Image Trail Animation | Codrops

Intro Image Trail Animation

0%
Zofia
Dabrowski

About

Some time ago a group of people were sitting in a restaurant, and one of them asked the others to say what they meant by Reality. There was much vague discussion, much talk of metaphysics and psychology, but one of those present, when asked his opinion, simply shrugged his shoulders and pointed at the saltshaker.
-------------------------------------------------------------------------------- /dist/shadow.f3dc3bb9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/dist/shadow.f3dc3bb9.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "introtraileffect", 3 | "version": "1.0.0", 4 | "browserslist": "> 0.5%, last 2 versions, not dead", 5 | "description": "", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/codrops/[NAME].git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/[NAME]/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "^2.4.1" 25 | }, 26 | "dependencies": { 27 | "gsap": "^3.10.3", 28 | "imagesloaded": "^5.0.0", 29 | "split-type": "^0.2.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 17px; 9 | } 10 | 11 | html, body { 12 | height: 100vh; 13 | overflow: hidden; 14 | } 15 | 16 | body { 17 | margin: 0; 18 | --color-text: #fff; 19 | --color-title: #dbb59b; 20 | --color-bg: #161a19; 21 | --color-link: #7f9993; 22 | --color-link-hover: #fff; 23 | --color-menu: #7f9993; 24 | --img-ratio: 1.5; 25 | font-weight: 300; 26 | color: var(--color-text); 27 | background: var(--color-bg); 28 | font-family: acumin-pro, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 29 | -webkit-font-smoothing: antialiased; 30 | -moz-osx-font-smoothing: grayscale; 31 | } 32 | 33 | body::after { 34 | z-index: 1000; 35 | content: ''; 36 | pointer-events: none; 37 | width: 100vw; 38 | height: 100vh; 39 | position: fixed; 40 | top: 0; 41 | left: 0; 42 | background: url(../img/shadow.png) no-repeat 100% 0%; 43 | background-size: cover; 44 | animation: move 7s infinite alternate 2s; 45 | transform-origin: 100% 0%; 46 | } 47 | 48 | @keyframes move { 49 | to { 50 | transform: scaleX(1.1); 51 | } 52 | } 53 | 54 | /* Page Loader */ 55 | .js .loading::before, 56 | .js .loading::after { 57 | content: ''; 58 | position: fixed; 59 | z-index: 1000; 60 | } 61 | 62 | .js .loading::before { 63 | top: 0; 64 | left: 0; 65 | width: 100%; 66 | height: 100%; 67 | background: var(--color-bg); 68 | } 69 | 70 | .js .loading::after { 71 | top: 50%; 72 | left: 50%; 73 | width: 60px; 74 | height: 60px; 75 | margin: -30px 0 0 -30px; 76 | border-radius: 50%; 77 | opacity: 0.4; 78 | background: var(--color-link); 79 | animation: loaderAnim 0.7s linear infinite alternate forwards; 80 | 81 | } 82 | 83 | @keyframes loaderAnim { 84 | to { 85 | opacity: 1; 86 | transform: scale3d(0.5,0.5,1); 87 | } 88 | } 89 | 90 | a { 91 | text-decoration: none; 92 | color: var(--color-link); 93 | outline: none; 94 | white-space: nowrap; 95 | overflow: hidden; 96 | position: relative; 97 | } 98 | 99 | a::before { 100 | content: ''; 101 | height: 1px; 102 | width: 100%; 103 | background: currentColor; 104 | position: absolute; 105 | top: 95%; 106 | transition: transform 0.3s; 107 | transform-origin: 0% 50%; 108 | } 109 | 110 | a:hover::before { 111 | transform: scaleX(0); 112 | transform-origin: 100% 50%; 113 | } 114 | 115 | a:hover { 116 | color: var(--color-link-hover); 117 | outline: none; 118 | } 119 | 120 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 121 | a:focus { 122 | /* Provide a fallback style for browsers 123 | that don't support :focus-visible */ 124 | outline: none; 125 | background: lightgrey; 126 | } 127 | 128 | a:focus:not(:focus-visible) { 129 | /* Remove the focus indicator on mouse-focus for browsers 130 | that do support :focus-visible */ 131 | background: transparent; 132 | } 133 | 134 | a:focus-visible { 135 | /* Draw a very noticeable focus style for 136 | keyboard-focus on browsers that do support 137 | :focus-visible */ 138 | outline: 2px solid red; 139 | background: transparent; 140 | } 141 | 142 | .oh { 143 | overflow: hidden; 144 | } 145 | 146 | .line { 147 | transform-origin: 0 50%; 148 | padding-bottom: 0.15rem; 149 | white-space: nowrap; 150 | will-change: transform; 151 | } 152 | 153 | .unbutton { 154 | background: none; 155 | border: 0; 156 | padding: 0; 157 | margin: 0; 158 | font: inherit; 159 | } 160 | 161 | .unbutton:focus { 162 | outline: none; 163 | } 164 | 165 | main { 166 | padding: 1rem; 167 | display: grid; 168 | height: 100%; 169 | grid-template-columns: 1fr 250px; 170 | grid-template-rows: 25% 25% 1fr; 171 | grid-template-areas: 'logo menu' '... ...' 'button-enter button-enter' 'frame frame'; 172 | } 173 | 174 | .frame { 175 | grid-area: frame; 176 | padding-bottom: 0.5rem; 177 | position: relative; 178 | z-index: 200; 179 | } 180 | 181 | .frame__title { 182 | font-size: 1rem; 183 | margin: 0; 184 | font-weight: normal; 185 | position: relative; 186 | } 187 | 188 | .frame__links a:not(:last-child) { 189 | margin-right: 1rem; 190 | } 191 | 192 | .logo { 193 | margin: 0; 194 | font-size: 2.45rem; 195 | grid-area: logo; 196 | font-family: kudryashev-d-excontrast-sans, sans-serif; 197 | font-weight: 300; 198 | display: grid; 199 | justify-self: start; 200 | line-height: 1; 201 | color: var(--color-title); 202 | } 203 | 204 | .logo__layer { 205 | grid-area: 1 / 1 / 2 / 2; 206 | transition: all ease-out 0.5s; 207 | } 208 | 209 | .show .logo__layer--1 { 210 | opacity: 0.1; 211 | } 212 | 213 | .show .logo__layer--2 { 214 | opacity: 0.3; 215 | transform: translateX(50%); 216 | } 217 | 218 | .show .logo__layer--3 { 219 | transform: translateX(100%); 220 | } 221 | 222 | .button-menu { 223 | z-index: 100; 224 | margin: 0.5rem 1.5rem; 225 | grid-area: menu; 226 | justify-self: end; 227 | width: 1.65rem; 228 | height: 0.65rem; 229 | color: var(--color-menu); 230 | border-top: 2px solid currentColor; 231 | border-bottom: 2px solid currentColor; 232 | opacity: 0.5; 233 | align-self: start; 234 | cursor: not-allowed; 235 | } 236 | 237 | .intro-progress { 238 | grid-area: logo; 239 | justify-self: start; 240 | align-self: start; 241 | font-size: 10vw; 242 | width: 4ch; 243 | line-height: 0.5; 244 | font-weight: 400; 245 | color: var(--color-title); 246 | } 247 | 248 | .intro-image { 249 | position: relative; 250 | background-size: 100%; 251 | background-repeat: no-repeat; 252 | grid-area: 1 / 1 / -1 / -1; 253 | justify-self: end; 254 | --img-height: 260px; 255 | height: var(--img-height); 256 | width: calc( 1 / var(--img-ratio) * var(--img-height)); 257 | } 258 | 259 | .intro-content__image .intro-image { 260 | --img-height: 360px; 261 | } 262 | 263 | .trail { 264 | position: relative; 265 | display: grid; 266 | place-items: center; 267 | } 268 | 269 | .no-js .trail { 270 | width: 100%; 271 | height: 100%; 272 | background-size: 100%; 273 | } 274 | 275 | .trail__img, 276 | .trail__text { 277 | position: relative; 278 | will-change: transform; 279 | grid-area: 1 / 1 / 2 / 2; 280 | } 281 | 282 | .trail__img { 283 | width: 100%; 284 | height: 100%; 285 | } 286 | 287 | .intro-content { 288 | height: 100%; 289 | overflow: hidden; 290 | grid-area: 1 / 1 / -1 / -1; 291 | display: grid; 292 | grid-template-columns: 100%; 293 | justify-items: center; 294 | grid-template-rows: 4rem min-content min-content 1rem auto 1fr; 295 | grid-template-areas: '...' 'title-up' 'title-down' '...' 'image' '...'; 296 | } 297 | 298 | .intro-content__title { 299 | font-size: 25vh; 300 | font-size: clamp(1.5rem,22vh,14vw); 301 | line-height: 0.9; 302 | position: relative; 303 | color: var(--color-title); 304 | font-weight: 400; 305 | white-space: nowrap; 306 | align-self: end; 307 | will-change: transform; 308 | } 309 | 310 | .intro-content__title em { 311 | font-weight: 400; 312 | font-style: italic; 313 | } 314 | 315 | .intro-content__title--up { 316 | font-family: kudryashev-d-excontrast-sans, sans-serif; 317 | font-weight: 300; 318 | grid-area: title-up; 319 | align-self: end; 320 | opacity: 0; 321 | } 322 | 323 | .intro-content__title--up .trail__text { 324 | transform: translateY(-14vh); 325 | } 326 | 327 | .intro-content__title--down { 328 | text-transform: uppercase; 329 | grid-area: title-down; 330 | opacity: 0; 331 | } 332 | 333 | .intro-content__title--down .trail__text { 334 | transform: translateY(18vh); 335 | } 336 | 337 | .intro-content__image { 338 | grid-area: image; 339 | align-self: end; 340 | } 341 | 342 | .button-enter { 343 | position: relative; 344 | z-index: 200; 345 | grid-area: button-enter; 346 | align-self: center; 347 | justify-self: center; 348 | color: inherit; 349 | background: transparent; 350 | width: 100px; 351 | height: 100px; 352 | display: grid; 353 | place-items: center; 354 | border-radius: 50%; 355 | overflow: hidden; 356 | cursor: pointer; 357 | border: 1px solid currentColor; 358 | align-self: start; 359 | } 360 | 361 | .button-enter.hide { 362 | pointer-events: none; 363 | } 364 | 365 | .button-enter span { 366 | pointer-events: none; 367 | cursor: pointer; 368 | position: relative; 369 | display: block; 370 | width: 100%; 371 | height: 100%; 372 | display: grid; 373 | place-items: center; 374 | color: #fff; 375 | font-weight: 400; 376 | transform: translateY(1rem); 377 | transition: color, transform 0.3s; 378 | } 379 | 380 | .button-enter:hover span, 381 | .button-enter:focus-visible span { 382 | color: #000; 383 | transform: translateY(0); 384 | } 385 | 386 | .button-enter::before { 387 | content: ''; 388 | position: absolute; 389 | top: 50%; 390 | left: 50%; 391 | width: 100px; 392 | height: 100px; 393 | margin: -50px 0 0 -50px; 394 | background: #fff; 395 | transform: translateY(100%); 396 | transition: transform 0.3s; 397 | } 398 | 399 | .button-enter:hover::before, 400 | .button-enter:focus-visible::before { 401 | transform: translateY(0%); 402 | } 403 | 404 | .js .logo, 405 | .js .button-menu, 406 | .js .button-enter { 407 | opacity: 0; 408 | } 409 | 410 | .js .logo.show, 411 | .js .button-menu.show, 412 | .js .button-enter.show { 413 | transition: opacity ease-out 0.5s; 414 | opacity: 1; 415 | } 416 | 417 | .js .button-enter.show { 418 | transition: opacity ease-in-out 1.5s; 419 | } 420 | 421 | .content { 422 | pointer-events: none; 423 | height: 100%; 424 | grid-area: 1 / 1 / -1 / -1; 425 | display: grid; 426 | padding: 0 1rem; 427 | grid-template-columns: 31% 31% 31%; 428 | grid-column-gap: 3.5%; 429 | grid-template-rows: 4rem min-content min-content 2rem auto auto; 430 | grid-template-areas: '... ... ...' 431 | 'content-title-up content-title-up content-title-up' 432 | 'content-title-down content-title-down content-title-down' 433 | '... ... ...' 434 | 'content-about content-about content-about' 435 | 'content-img-1 content-img-2 content-img-3'; 436 | } 437 | 438 | .content__title { 439 | position: relative; 440 | } 441 | 442 | .content__title .intro-content__title { 443 | font-size: clamp(2rem, 10vh, 8vw); 444 | width: min-content; 445 | grid-column: 1 / span 2; 446 | } 447 | 448 | .content__title--up { 449 | z-index: 1; 450 | grid-area: content-title-up; 451 | 452 | } 453 | 454 | .content__title--down { 455 | z-index: 3; 456 | grid-area: content-title-down; 457 | } 458 | 459 | .content__about { 460 | position: relative; 461 | z-index: 100; 462 | grid-area: content-about; 463 | display: flex; 464 | flex-direction: column; 465 | font-size: 1.3rem; 466 | line-height: 1.1; 467 | opacity: 0; 468 | } 469 | 470 | .content__about-title { 471 | font-style: italic; 472 | margin: 0 7vw 0 0; 473 | } 474 | 475 | .content__about p { 476 | margin: 0 0 1rem; 477 | } 478 | 479 | .content__image { 480 | position: relative; 481 | z-index: 2; 482 | display: flex; 483 | align-items: flex-end; 484 | margin-bottom: -20vh; 485 | } 486 | 487 | .content__image--1 { 488 | grid-area: content-img-1; 489 | } 490 | 491 | .content__image--2 { 492 | grid-area: content-img-2; 493 | } 494 | 495 | .content__image--3 { 496 | grid-area: content-img-3; 497 | } 498 | 499 | .content__image-inner, 500 | .content__image .intro-image { 501 | background-position: 50% 0%; 502 | background-size: cover; 503 | width: 100%; 504 | height: 100%; 505 | opacity: 0; 506 | border-radius: 20vw 20vw 0 0; 507 | will-change: opacity, transform, border-radius; 508 | } 509 | 510 | @media screen and (min-width: 53em) { 511 | main { 512 | padding: 2.5rem 1rem 0; 513 | grid-column-gap: 5vw; 514 | grid-template-columns: 30vw 1fr 30vw; 515 | grid-template-rows: auto 50% 1fr auto; 516 | grid-template-areas: 'logo ... menu' 517 | '... ... ...' 518 | '... button-enter ...' 519 | 'frame frame frame'; 520 | } 521 | .intro-content { 522 | grid-template-rows: 32% 15% 35% 18%; 523 | grid-template-areas: 'title-up' 'title-down' 'image' '...'; 524 | } 525 | .intro-image { 526 | --img-height: 45vh; 527 | } 528 | 529 | .intro-content__image .intro-image { 530 | --img-height: 53vh; 531 | } 532 | .content { 533 | grid-template-rows: 20% 10vh 10vh auto auto; 534 | grid-template-areas: '... ... ...' 535 | 'content-title-up content-about content-about' 536 | 'content-title-down content-about content-about' 537 | 'content-img-1 content-img-2 content-img-3'; 538 | } 539 | .content__title .intro-content__title { 540 | grid-column: 1 / span 2; 541 | } 542 | .content__about { 543 | flex-direction: row; 544 | grid-row: 2 / span 2; 545 | justify-self: end; 546 | max-width: 440px; 547 | } 548 | .content__image-inner, 549 | .content__image .intro-image { 550 | height: 50vh; 551 | border-radius: 20vw 20vw 0 0; 552 | } 553 | .button-enter { 554 | align-self: center; 555 | } 556 | .frame { 557 | display: grid; 558 | width: 100%; 559 | grid-template-areas: 'title links sponsor'; 560 | grid-template-columns: auto auto 1fr; 561 | } 562 | 563 | .frame__title { 564 | grid-area: title; 565 | } 566 | 567 | .frame__links { 568 | grid-area: links; 569 | } 570 | 571 | .frame__links { 572 | margin-left: 5vw; 573 | } 574 | } 575 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroTrailEffect/eec7367cbb03b052ffc683227f6ae39557e84d3f/src/img/shadow.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Intro Image Trail Animation | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

Intro Image Trail Animation

20 | 21 | 26 |
27 | 28 | 33 | 34 | 35 | 36 | 0% 37 | 38 |
39 | 40 |
41 |
Zofia
42 |
43 | 44 |
45 |
Dabrowski
46 |
47 | 48 | 51 | 52 |
53 |
54 |
55 |
56 |

About

57 |
58 | Some time ago a group of people were sitting in a restaurant, and one of them asked the others to say what they meant by Reality. 59 | There was much vague discussion, much talk of metaphysics and psychology, but one of those present, when asked his opinion, simply shrugged his shoulders and pointed at the saltshaker. 60 |
61 |
62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 |
71 |
72 | 73 |
74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /src/js/fakeProgress.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | 3 | /** 4 | * Class representing a fake progress loader 5 | */ 6 | export class FakeProgress { 7 | // DOM elements 8 | DOM = { 9 | // Main element 10 | el: null, 11 | }; 12 | progressVal = {value: 0}; 13 | 14 | /** 15 | * Constructor. 16 | * @param {Element} DOM_el 17 | */ 18 | constructor(DOM_el) { 19 | this.DOM.el = DOM_el; 20 | } 21 | /** 22 | * Simulates a loading progress. 23 | * @param {Function} onProgressComplete callback 24 | * @return {GSAP Timeline} 25 | */ 26 | onComplete(onProgressComplete) { 27 | return gsap.timeline().to(this.progressVal, { 28 | duration: 1.5, 29 | ease: 'steps(14)', 30 | value: 100, 31 | onUpdate: () => this.DOM.el.innerHTML = Math.floor(this.progressVal.value) + '%', 32 | onComplete: onProgressComplete 33 | }) 34 | // then hide it 35 | .to(this.DOM.el, { 36 | duration: 0.7, 37 | ease: 'power3.inOut', 38 | opacity: 0 39 | }); 40 | } 41 | } -------------------------------------------------------------------------------- /src/js/gsapAnimation.js: -------------------------------------------------------------------------------- 1 | export const animationDefaults = { 2 | duration: 1.4, 3 | ease: 'power4' 4 | }; -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils' 2 | import { TrailImage, TrailText } from './trail'; 3 | import { FakeProgress } from './fakeProgress'; 4 | import { TextLinesReveal } from './textLinesReveal'; 5 | import { animationDefaults } from './gsapAnimation'; 6 | import { gsap } from 'gsap'; 7 | import { Flip } from 'gsap/Flip'; 8 | gsap.registerPlugin(Flip); 9 | 10 | // trail elements (Image and the two intro title elements (up and down) 11 | const trailImage = new TrailImage(document.querySelector('.intro-image'), {perspective: 1000, totalTrailElements: 8}); 12 | const trailTextTop = new TrailText(document.querySelector('.intro-content__title--up'), {perspective: 1000, totalTrailElements: 2}); 13 | const trailTextBottom = new TrailText(document.querySelector('.intro-content__title--down'), {totalTrailElements: 3}); 14 | 15 | // DOM elements 16 | const frame = { 17 | menu: document.querySelector('.button-menu'), 18 | logo: document.querySelector('.logo'), 19 | progress: document.querySelector('.intro-progress') 20 | }; 21 | const intro = { 22 | image: document.querySelector('.intro-content__image'), 23 | enterButton: document.querySelector('.button-enter'), 24 | }; 25 | const content = { 26 | titleTop: document.querySelector('.content__title--up'), 27 | titleBottom: document.querySelector('.content__title--down'), 28 | about: document.querySelector('.content__about'), 29 | aboutText: document.querySelector('.content__about-text'), 30 | finalImagePlacement: document.querySelector('.content__image--2'), 31 | otherImages: document.querySelectorAll('.content__image--1 > .content__image-inner, .content__image--3 > .content__image-inner') 32 | } 33 | 34 | // the TextLinesReveal instance (animate each text line of the about text using the SplitText library) 35 | const aboutLines = new TextLinesReveal(content.aboutText); 36 | 37 | // state 38 | let state = { 39 | isAnimating: false, 40 | iscontentOpen: false 41 | }; 42 | 43 | // First step: fake progress and move the image to the center of the screen. Also animate the top/bottom texts in and show the enter button 44 | const showIntro = () => { 45 | 46 | if ( state.isAnimating ) { 47 | return false; 48 | } 49 | state.isAnimating = true; 50 | 51 | gsap.timeline({ 52 | defaults: animationDefaults, 53 | onComplete: () => { 54 | // Reset the trails structure on the texts and image 55 | trailTextTop.reset(); 56 | trailTextBottom.reset(); 57 | trailImage.reset(); 58 | 59 | state.isAnimating = false; 60 | } 61 | }) 62 | .addLabel('start', 0) 63 | .add(() => { 64 | // Let's use the gsap Flip plugin to animate the image into a new element (.intro-content__image) 65 | // Get state 66 | const state = Flip.getState(trailImage.DOM.trailElems); 67 | // Change place 68 | intro.image.appendChild(trailImage.DOM.el); 69 | // Flip 70 | Flip.from(state, { 71 | duration: animationDefaults.duration, 72 | ease: animationDefaults.ease, 73 | stagger: -0.03, 74 | scale: true 75 | //rotateY: 360, 76 | }) 77 | }, 'start') 78 | // Hide the intro title trail elements initially and show its parents which are hidden by default (CSS) 79 | .set([trailTextTop.DOM.trailElems, trailTextBottom.DOM.trailElems], { 80 | opacity: 0 81 | }, 'start') 82 | .set([trailTextTop.DOM.el, trailTextBottom.DOM.el], { 83 | opacity: 1 84 | }, 'start') 85 | // Now translate the title elements 86 | .to(trailTextTop.DOM.trailElems, { 87 | y: 0, 88 | startAt: {rotateY: 160, opacity: 0}, 89 | rotateY: 0, 90 | opacity: 1, 91 | stagger: -0.1 92 | }, 'start') 93 | .to(trailTextBottom.DOM.trailElems, { 94 | y: 0, 95 | opacity: 1, 96 | stagger: -0.08, 97 | }, 'start') 98 | // And show the intro enter button 99 | .to(intro.enterButton, { 100 | startAt: {opacity: 0, scale: 0.8}, 101 | opacity: 1, 102 | scale: 1 103 | }, 'start+=0.3') 104 | .add(() => { 105 | // Show the logo and menu button 106 | frame.menu.classList.add('show'); 107 | frame.logo.classList.add('show'); 108 | }, 'start+=0.3'); 109 | 110 | }; 111 | 112 | // Second step: show the other images and scale down the texts 113 | const showContent = () => { 114 | 115 | if ( state.isAnimating || state.iscontentOpen ) { 116 | return false; 117 | } 118 | state.isAnimating = true; 119 | state.iscontentOpen = true; 120 | 121 | gsap.timeline({ 122 | defaults: animationDefaults, 123 | onComplete: () => { 124 | state.isAnimating = false; 125 | } 126 | }) 127 | .addLabel('start', 0) 128 | .to(intro.enterButton, { 129 | duration: 0.6, 130 | opacity: 0, 131 | scale: 0.8, 132 | }, 'start') 133 | .add(() => { 134 | 135 | const topTitleState = Flip.getState(trailTextTop.DOM.el); 136 | const bottomTitleState = Flip.getState(trailTextBottom.DOM.el); 137 | 138 | content.titleTop.appendChild(trailTextTop.DOM.el); 139 | content.titleBottom.appendChild(trailTextBottom.DOM.el); 140 | 141 | Flip.from(topTitleState, { 142 | duration: animationDefaults.duration, 143 | ease: animationDefaults.ease, 144 | scale: true 145 | }); 146 | 147 | Flip.from(bottomTitleState, { 148 | duration: animationDefaults.duration, 149 | ease: animationDefaults.ease, 150 | scale: true 151 | }); 152 | 153 | const imageState = Flip.getState(trailImage.DOM.el, {props: 'border-radius'}); 154 | // Change place 155 | content.finalImagePlacement.appendChild(trailImage.DOM.el); 156 | gsap.set(trailImage.DOM.el, {opacity: 1}); 157 | // Flip 158 | Flip.from(imageState, { 159 | duration: animationDefaults.duration, 160 | ease: animationDefaults.ease 161 | }); 162 | 163 | }, 'start') 164 | 165 | // animate the other images in 166 | .to(content.otherImages, { 167 | startAt: {yPercent: 100}, 168 | yPercent: 0, 169 | opacity: 1 170 | }, 'start+=0.1') 171 | // about section 172 | .to(content.about, { 173 | startAt: {yPercent: 10}, 174 | yPercent: 0, 175 | opacity: 1 176 | }, 'start+=0.2') 177 | // about text lines 178 | .add( () => { 179 | aboutLines.in(); 180 | }, 'start+=0.2') 181 | 182 | }; 183 | 184 | // Enter button click event 185 | intro.enterButton.addEventListener('click', showContent); 186 | 187 | // Simulate the initial progress 188 | const fakeProgress = new FakeProgress(frame.progress); 189 | fakeProgress.onComplete(showIntro); 190 | 191 | // Preload images 192 | preloadImages('.intro-image').then( _ => document.body.classList.remove('loading')); 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /src/js/textLinesReveal.js: -------------------------------------------------------------------------------- 1 | import SplitType from 'split-type'; 2 | import { animationDefaults } from './gsapAnimation'; 3 | import { wrapLines } from './utils'; 4 | import { gsap } from 'gsap'; 5 | 6 | /** 7 | * Class representing a text line element that reveals itself by animating its translateY value 8 | */ 9 | export class TextLinesReveal { 10 | // DOM elements 11 | DOM = { 12 | // main element (a text DOM element) 13 | el: null 14 | } 15 | // Split Type instance 16 | SplitTypeInstance; 17 | // Checks if the Split Type lines are visible or not 18 | isVisible; 19 | // Animation timelines 20 | inTimeline; 21 | outTimeline; 22 | 23 | /** 24 | * Constructor. 25 | * @param {Element} DOM_el - a text DOM element 26 | */ 27 | constructor(DOM_el) { 28 | this.DOM = { 29 | el: DOM_el 30 | }; 31 | 32 | this.SplitTypeInstance = new SplitType(this.DOM.el, { types: 'lines' }); 33 | // Wrap the lines (div with class .oh) 34 | // The inner child will be the one animating the transform 35 | wrapLines(this.SplitTypeInstance.lines, 'div', 'oh'); 36 | 37 | this.initEvents(); 38 | } 39 | 40 | /** 41 | * Animates the lines in. 42 | * @return {GSAP Timeline} the animation timeline 43 | * @param {Boolean} animation - with or without animation. 44 | */ 45 | in(animation = true) { 46 | // Lines are visible 47 | this.isVisible = true; 48 | 49 | gsap.killTweensOf(this.SplitTypeInstance.lines); 50 | this.inTimeline = gsap.timeline({defaults: animationDefaults}) 51 | .addLabel('start', 0) 52 | .set(this.SplitTypeInstance.lines, { 53 | yPercent: 105 54 | }, 'start'); 55 | 56 | if ( animation ) { 57 | this.inTimeline.to(this.SplitTypeInstance.lines, { 58 | yPercent: 0, 59 | stagger: 0.04 60 | }, 'start'); 61 | } 62 | else { 63 | this.inTimeline.set(this.SplitTypeInstance.lines, { 64 | yPercent: 0 65 | }, 'start'); 66 | } 67 | 68 | return this.inTimeline; 69 | } 70 | 71 | /** 72 | * Animates the lines out. 73 | * @param {Boolean} animation - with or without animation. 74 | * @return {GSAP Timeline} the animation timeline 75 | */ 76 | out(animation = true) { 77 | // Lines are invisible 78 | this.isVisible = false; 79 | 80 | gsap.killTweensOf(this.SplitTypeInstance.lines); 81 | 82 | this.outTimeline = gsap.timeline({defaults: animationDefaults}).addLabel('start', 0); 83 | 84 | if ( animation ) { 85 | this.outTimeline.to(this.SplitTypeInstance.lines, { 86 | yPercent: -105, 87 | stagger: 0.04 88 | }, 'start'); 89 | } 90 | else { 91 | this.outTimeline.set(this.SplitTypeInstance.lines, { 92 | yPercent: -105, 93 | }, 'start'); 94 | } 95 | 96 | return this.outTimeline; 97 | } 98 | 99 | /** 100 | * Initializes some events. 101 | */ 102 | initEvents() { 103 | // Re-initialize the Split Text on window resize. 104 | window.addEventListener('resize', () => { 105 | // Re-split text 106 | // https://github.com/lukePeavey/SplitType#instancesplitoptions-void 107 | this.SplitTypeInstance.split(); 108 | 109 | // Need to wrap again the new lines elements (div with class .oh) 110 | wrapLines(this.SplitTypeInstance.lines, 'div', 'oh'); 111 | 112 | // Hide the lines 113 | if ( !this.isVisible ) { 114 | gsap.set(this.SplitTypeInstance.lines, {yPercent: 105}); 115 | } 116 | }); 117 | } 118 | } -------------------------------------------------------------------------------- /src/js/trail.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Class representing a Trail element, 3 | * an element that has [trailElems] children/clones (of type image or text) 4 | * and that we can use to stagger it's translation so it looks like a trail or dragging effect 5 | */ 6 | class Trail { 7 | // DOM elements 8 | DOM = { 9 | // Main element (.trail) 10 | el: null, 11 | // Trail child elements (.trail__img or .trail__text) 12 | trailElems: null, 13 | }; 14 | // option defaults 15 | defaults = { 16 | // 3d 17 | perspective: false, 18 | // Total number of inner image elements 19 | totalTrailElements: 4, 20 | }; 21 | 22 | /** 23 | * Constructor. 24 | * @param {Element} DOM_el - the .trail element 25 | */ 26 | constructor(DOM_el, options) { 27 | this.DOM.el = DOM_el; 28 | this.options = Object.assign(this.defaults, options); 29 | 30 | // 3d 31 | if ( this.options.perspective ) { 32 | this.DOM.el.style.perspective = `${this.options.perspective}px` 33 | } 34 | } 35 | } 36 | 37 | /** 38 | * Class representing an image trail element 39 | */ 40 | export class TrailImage extends Trail { 41 | // the image path 42 | bgImage; 43 | 44 | /** 45 | * Constructor. 46 | * @param {Element} DOM_el - the .trail element 47 | */ 48 | constructor(DOM_el, options) { 49 | super(DOM_el, options); 50 | // Get the main element's background image url 51 | this.bgImage = /(?:\(['"]?)(.*?)(?:['"]?\))/.exec(this.DOM.el.style.backgroundImage)[1]; 52 | // Create the HTML markup for the trail elements 53 | this.layout(); 54 | } 55 | /** 56 | * Creates the HTML markup for the trail elements 57 | */ 58 | layout() { 59 | // Remove the background image from the main element 60 | this.DOM.el.style.backgroundImage = 'none'; 61 | 62 | let innerHTML = ''; 63 | for (let i = 0; i <= this.options.totalTrailElements - 1; ++i) { 64 | const opacityVal = i === this.options.totalTrailElements - 1 ? 1 : 0.8;//1/this.options.totalTrailElements * i + 1/this.options.totalTrailElements 65 | innerHTML += ``; 66 | } 67 | // Append to the main element 68 | this.DOM.el.innerHTML = innerHTML; 69 | 70 | // Get inner .trail__img elements 71 | this.DOM.trailElems = this.DOM.el.querySelectorAll('.trail__img'); 72 | 73 | this.DOM.el.classList.add('trail'); 74 | } 75 | reset() { 76 | this.DOM.el.classList.remove('trail'); 77 | this.DOM.el.style.backgroundImage = `url(${this.bgImage})`; 78 | this.DOM.el.innerHTML = ''; 79 | if ( this.options.perspective ) { 80 | this.DOM.el.style.perspective = 'none'; 81 | } 82 | } 83 | } 84 | 85 | /** 86 | * Class representing a text trail element 87 | */ 88 | export class TrailText extends Trail { 89 | /** 90 | * Constructor. 91 | * @param {Element} DOM_el - the .trail element 92 | */ 93 | constructor(DOM_el, options) { 94 | super(DOM_el, options); 95 | // Create the HTML markup for the trail elements 96 | this.layout(); 97 | } 98 | /** 99 | * Creates the HTML markup for the trail elements 100 | */ 101 | layout() { 102 | // Get the main element's innerHTML 103 | this.content = this.DOM.el.innerHTML; 104 | 105 | let innerHTML = ''; 106 | for (let i = 0; i <= this.options.totalTrailElements - 1; ++i) { 107 | const opacityVal = i === this.options.totalTrailElements - 1 ? 1 : 1/this.options.totalTrailElements * i + 1/this.options.totalTrailElements 108 | innerHTML += `${this.content}`; 109 | } 110 | // Append to the main element 111 | this.DOM.el.innerHTML = innerHTML; 112 | 113 | // Get inner .trail__text elements 114 | this.DOM.trailElems = this.DOM.el.querySelectorAll('.trail__text'); 115 | 116 | this.DOM.el.classList.add('trail'); 117 | } 118 | reset() { 119 | this.DOM.el.classList.remove('trail'); 120 | this.DOM.el.innerHTML = this.content; 121 | if ( this.options.perspective ) { 122 | this.DOM.el.style.perspective = 'none'; 123 | } 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | /** 4 | * Preload images 5 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img' 6 | */ 7 | const preloadImages = (selector = 'img') => { 8 | return new Promise((resolve) => { 9 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 10 | }); 11 | }; 12 | 13 | /** 14 | * Wraps the elements of an array. 15 | * @param {Array} arr - the array of elements to be wrapped 16 | * @param {String} wrapType - the type of the wrap element ('div', 'span' etc) 17 | * @param {String} wrapClass - the wrap class(es) 18 | */ 19 | const wrapLines = (arr, wrapType, wrapClass) => { 20 | arr.forEach(el => { 21 | const wrapEl = document.createElement(wrapType); 22 | wrapEl.classList = wrapClass; 23 | el.parentNode.appendChild(wrapEl); 24 | wrapEl.appendChild(el); 25 | }); 26 | } 27 | 28 | export { 29 | preloadImages, 30 | wrapLines 31 | }; --------------------------------------------------------------------------------