├── .gitignore ├── .DS_Store ├── .gitattributes ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 20.jpg ├── 21.jpg ├── 22.jpg ├── 23.jpg ├── 24.jpg ├── 25.jpg ├── 26.jpg ├── .DS_Store └── noise.png ├── favicon.ico ├── js ├── .DS_Store ├── smoothscroll.js ├── utils.js ├── imagesloaded.pkgd.min.js ├── index.js ├── lenis.min.js ├── Flip.min.js └── gsap.min.js ├── README.md ├── LICENSE ├── css └── base.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/1.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/7.jpg -------------------------------------------------------------------------------- /img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/8.jpg -------------------------------------------------------------------------------- /img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/9.jpg -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/10.jpg -------------------------------------------------------------------------------- /img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/11.jpg -------------------------------------------------------------------------------- /img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/12.jpg -------------------------------------------------------------------------------- /img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/13.jpg -------------------------------------------------------------------------------- /img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/14.jpg -------------------------------------------------------------------------------- /img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/15.jpg -------------------------------------------------------------------------------- /img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/16.jpg -------------------------------------------------------------------------------- /img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/17.jpg -------------------------------------------------------------------------------- /img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/18.jpg -------------------------------------------------------------------------------- /img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/19.jpg -------------------------------------------------------------------------------- /img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/20.jpg -------------------------------------------------------------------------------- /img/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/21.jpg -------------------------------------------------------------------------------- /img/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/22.jpg -------------------------------------------------------------------------------- /img/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/23.jpg -------------------------------------------------------------------------------- /img/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/24.jpg -------------------------------------------------------------------------------- /img/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/25.jpg -------------------------------------------------------------------------------- /img/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/26.jpg -------------------------------------------------------------------------------- /js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/js/.DS_Store -------------------------------------------------------------------------------- /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/.DS_Store -------------------------------------------------------------------------------- /img/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/IntroGridMotionTransition/HEAD/img/noise.png -------------------------------------------------------------------------------- /js/smoothscroll.js: -------------------------------------------------------------------------------- 1 | // Initializes smooth scrolling with Lenis and integrates it with GSAP's ScrollTrigger. 2 | // Function to set up smooth scrolling. 3 | const initSmoothScrolling = () => { 4 | // Initialize Lenis for smooth scroll effects. Lerp value controls the smoothness. 5 | const lenis = new Lenis({ lerp: 0.15 }); 6 | 7 | // Ensure GSAP animations are in sync with Lenis' scroll frame updates. 8 | gsap.ticker.add(time => { 9 | lenis.raf(time * 1000); // Convert GSAP's time to milliseconds for Lenis. 10 | }); 11 | 12 | // Turn off GSAP's default lag smoothing to avoid conflicts with Lenis. 13 | gsap.ticker.lagSmoothing(0); 14 | }; 15 | 16 | // Activate the smooth scrolling feature. 17 | initSmoothScrolling(); 18 | -------------------------------------------------------------------------------- /js/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Preloads images specified by the CSS selector. 3 | * @function 4 | * @param {string} [selector='img'] - CSS selector for target images. 5 | * @returns {Promise} - Resolves when all specified images are loaded. 6 | */ 7 | export const preloadImages = (selector = 'img') => { 8 | return new Promise((resolve) => { 9 | // The imagesLoaded library is used to ensure all images (including backgrounds) are fully loaded. 10 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 11 | }); 12 | }; 13 | 14 | // Linear interpolation 15 | export const lerp = (a, b, n) => (1 - n) * a + n * b; 16 | 17 | // Gets the mouse position 18 | export const getMousePos = e => { 19 | return { 20 | x : e.clientX, 21 | y : e.clientY 22 | }; 23 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Intro Grid with Hover Motion 2 | 3 | A little hover motion effect on a grid and an intro animation. 4 | 5 | ![Intro Grid](https://tympanus.net/codrops/wp-content/uploads/2024/05/hovermotion_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=77934) 8 | 9 | [Demo](https://tympanus.net/Development/IntroGridMotionTransition) 10 | 11 | ## Installation 12 | 13 | Run this demo on a [local server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). 14 | 15 | ## Credits 16 | 17 | - Images generated with [Midjourney](https://midjourney.com) 18 | 19 | ## Misc 20 | 21 | Follow Codrops: [X](http://www.X.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 22 | 23 | ## License 24 | [MIT](LICENSE) 25 | 26 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2024 [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 | -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v5.0.0 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | !function(t,e){"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},s=i[t]=i[t]||[];return s.includes(e)||s.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 s=i.indexOf(e);return-1!=s&&i.splice(s,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 s=this._onceEvents&&this._onceEvents[t];for(let n of i){s&&s[n]&&(this.off(t,n),delete s[n]),n.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t})), 7 | /*! 8 | * imagesLoaded v5.0.0 9 | * JavaScript is all like "You images are done yet or what?" 10 | * MIT License 11 | */ 12 | function(t,e){"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:this,(function(t,e){let i=t.jQuery,s=t.console;function n(t,e,o){if(!(this instanceof n))return new n(t,e,o);let r=t;var h;("string"==typeof t&&(r=document.querySelectorAll(t)),r)?(this.elements=(h=r,Array.isArray(h)?h:"object"==typeof h&&"number"==typeof h.length?[...h]:[h]),this.options={},"function"==typeof e?o=e:Object.assign(this.options,e),o&&this.on("always",o),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):s.error(`Bad element for imagesLoaded ${r||t}`)}n.prototype=Object.create(e.prototype),n.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const o=[1,9,11];n.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!o.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 r=/url\((['"])?(.*?)\1\)/gi;function h(t){this.img=t}function d(t,e){this.url=t,this.element=e,this.img=new Image}return n.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=r.exec(e.backgroundImage);for(;null!==i;){let s=i&&i[2];s&&this.addBackground(s,t),i=r.exec(e.backgroundImage)}},n.prototype.addImage=function(t){let e=new h(t);this.images.push(e)},n.prototype.addBackground=function(t,e){let i=new d(t,e);this.images.push(i)},n.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()}))},n.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&&s&&s.log(`progress: ${i}`,t,e)},n.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)}},h.prototype=Object.create(e.prototype),h.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)},h.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},h.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,s="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,s,e])},h.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},h.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},h.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},h.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype=Object.create(h.prototype),d.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())},d.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},n.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new n(this,t,e).jqDeferred.promise(i(this))})},n.makeJQueryPlugin(),n})); -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12px; 9 | --color-text: #292828; 10 | --color-bg: #ddd; 11 | --color-link: #000; 12 | --color-link-hover: #000; 13 | --page-padding: 1rem; 14 | --angle: -15deg; 15 | --trans-content: -30vh; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | color: var(--color-text); 21 | background-color: var(--color-bg); 22 | font-family: new-science-mono, sans-serif; 23 | text-transform: uppercase; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .noscroll { 29 | height: 100dvh; 30 | width: 100%; 31 | overflow: hidden; 32 | position: fixed; 33 | top: 0; 34 | } 35 | 36 | /* Page Loader */ 37 | .js .loading::before, 38 | .js .loading::after { 39 | content: ''; 40 | position: fixed; 41 | z-index: 1000; 42 | } 43 | 44 | .js .loading::before { 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | background: var(--color-bg); 50 | } 51 | 52 | .js .loading::after { 53 | top: 50%; 54 | left: 50%; 55 | width: 60px; 56 | height: 60px; 57 | margin: -30px 0 0 -30px; 58 | border-radius: 50%; 59 | opacity: 0.4; 60 | background: var(--color-link); 61 | animation: loaderAnim 0.7s linear infinite alternate forwards; 62 | 63 | } 64 | 65 | @keyframes loaderAnim { 66 | to { 67 | opacity: 1; 68 | transform: scale3d(0.5,0.5,1); 69 | } 70 | } 71 | 72 | a { 73 | text-decoration: none; 74 | color: var(--color-link); 75 | outline: none; 76 | cursor: pointer; 77 | } 78 | 79 | a:hover { 80 | text-decoration: underline; 81 | color: var(--color-link-hover); 82 | outline: none; 83 | } 84 | 85 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 86 | a:focus { 87 | /* Provide a fallback style for browsers 88 | that don't support :focus-visible */ 89 | outline: none; 90 | background: lightgrey; 91 | } 92 | 93 | a:focus:not(:focus-visible) { 94 | /* Remove the focus indicator on mouse-focus for browsers 95 | that do support :focus-visible */ 96 | background: transparent; 97 | } 98 | 99 | a:focus-visible { 100 | /* Draw a very noticeable focus style for 101 | keyboard-focus on browsers that do support 102 | :focus-visible */ 103 | outline: 2px solid red; 104 | background: transparent; 105 | } 106 | 107 | .unbutton { 108 | background: none; 109 | border: 0; 110 | padding: 0; 111 | margin: 0; 112 | font: inherit; 113 | cursor: pointer; 114 | } 115 | 116 | .unbutton:focus { 117 | outline: none; 118 | } 119 | 120 | .frame { 121 | font-size: 12px; 122 | color: #e3b774; 123 | padding: var(--page-padding); 124 | display: grid; 125 | z-index: 1000; 126 | grid-row-gap: 1rem; 127 | grid-column-gap: 2rem; 128 | pointer-events: none; 129 | justify-items: start; 130 | position: absolute; 131 | top: 0; 132 | left: 0; 133 | width: 100%; 134 | grid-template-columns: 1fr; 135 | grid-template-rows: auto auto; 136 | grid-template-areas: 'title' 'sponsor'; 137 | transition: opacity 0.3s; 138 | } 139 | 140 | .hidden { 141 | opacity: 0; 142 | pointer-events: none; 143 | } 144 | 145 | .frame #cdawrap { 146 | justify-self: end; 147 | max-width: 300px; 148 | text-align: right; 149 | } 150 | 151 | .frame a { 152 | pointer-events: auto; 153 | color: #fff; 154 | } 155 | 156 | .frame a:focus, 157 | .frame a:hover { 158 | color: #fff; 159 | } 160 | 161 | .frame__title { 162 | grid-area: title; 163 | font-size: 1.25rem; 164 | margin: 0; 165 | font-weight: 400; 166 | font-family: "new-science", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 167 | } 168 | 169 | .intro { 170 | width: 100%; 171 | height: 100vh; 172 | overflow: hidden; 173 | position: relative; 174 | display: flex; 175 | align-items: center; 176 | justify-content: center; 177 | background: #000; 178 | } 179 | 180 | .intro::after { 181 | content: ''; 182 | position: absolute; 183 | top: 0; 184 | left: 0; 185 | width: 100%; 186 | height: 100%; 187 | background: url(../img/noise.png), radial-gradient(circle, #f9a13275 0%, transparent 100%); 188 | background-size: 250px, 100%; 189 | pointer-events: none; 190 | } 191 | 192 | .intro--open { 193 | height: 80vh; 194 | } 195 | 196 | .grid { 197 | gap: 1rem; 198 | flex: none; 199 | position: relative; 200 | width: 200vw; 201 | height: 200vh; 202 | display: grid; 203 | grid-template-rows: repeat(5,1fr); 204 | grid-template-columns: 100%; 205 | transform: rotate(var(--angle)); 206 | transform-origin: center center; 207 | } 208 | 209 | .row { 210 | display: grid; 211 | gap: 1rem; 212 | grid-template-columns: repeat(7,1fr); 213 | will-change: transform, filter; 214 | } 215 | 216 | .row__item { 217 | position: relative; 218 | } 219 | 220 | .row__item-inner { 221 | position: relative; 222 | width: 100%; 223 | height: 100%; 224 | overflow: hidden; 225 | border-radius: 10px; 226 | } 227 | 228 | .row__item-img { 229 | width: 100%; 230 | height: 100%; 231 | background-size: cover; 232 | background-position: 50% 50%; 233 | position: absolute; 234 | top: 0; 235 | left: 0; 236 | } 237 | 238 | .row__item-img--large { 239 | width: 100vw; 240 | height: 100vh; 241 | top: 50%; 242 | left: 50%; 243 | margin: -50vh 0 0 -50vw; 244 | background-position: 50% 70%; 245 | will-change: transform, filter; 246 | } 247 | 248 | .enter { 249 | color: rgba(0,0,0,0.8); 250 | position: absolute; 251 | text-transform: uppercase; 252 | padding: 1.75rem 4rem; 253 | font-weight: 700; 254 | z-index: 100; 255 | font-family: "new-science", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 256 | font-weight: 700; 257 | font-size: 1.15rem; 258 | background: url(../img/noise.png), radial-gradient(circle, #f9a13275 0%, transparent 100%); 259 | background-size: 250px, 100%; 260 | transition: all 0.3s; 261 | cursor: pointer; 262 | } 263 | 264 | .enter::before { 265 | content: ''; 266 | position: absolute; 267 | width: 100%; 268 | height: 100%; 269 | top: 0; 270 | left: 0; 271 | border: 1px solid rgba(0,0,0,0.8); 272 | border-radius: 3rem; 273 | transition: all 0.3s; 274 | z-index: -1; 275 | 276 | } 277 | 278 | .enter:focus::before, 279 | .enter:hover::before { 280 | background-color: rgba(0,0,0,0.2); 281 | } 282 | 283 | .fullview { 284 | position: absolute; 285 | width: 100%; 286 | height: 100%; 287 | top: 0; 288 | left: 0; 289 | pointer-events: none; 290 | } 291 | 292 | .fullview .row__item-inner { 293 | border-radius: 0px; 294 | } 295 | 296 | .content { 297 | padding: var(--page-padding); 298 | position: relative; 299 | } 300 | 301 | .content::before { 302 | content: ''; 303 | position: absolute; 304 | border-radius: 10px 10px 0 0; 305 | height: calc(100% + (-1) * var(--trans-content)); 306 | width: 100%; 307 | top: 0; 308 | left: 0; 309 | z-index: 0; 310 | background: url(../img/noise.png), radial-gradient(at top, #f9a132 0%, #ddd 100%); 311 | background-size: 250px, 100%; 312 | } 313 | 314 | .content > * { 315 | position: relative; 316 | } 317 | 318 | .content__nav { 319 | display: flex; 320 | flex-wrap: wrap; 321 | gap: 1rem; 322 | justify-content: space-between; 323 | } 324 | 325 | .content__header h2 { 326 | font-size: 2rem; 327 | font-family: new-science-extended, sans-serif; 328 | font-weight: 400; 329 | margin: 6rem 0 10vh; 330 | line-height: 0.9; 331 | } 332 | 333 | .content__text { 334 | text-wrap: balance; 335 | display: flex; 336 | flex-direction: column; 337 | gap: 10vh; 338 | padding: 0 5vw; 339 | } 340 | 341 | .content__text p { 342 | max-width: 700px; 343 | font-size: 1.5rem; 344 | line-height: 1.4; 345 | margin: 0; 346 | margin-left: auto; 347 | } 348 | 349 | .content__text p.highlight { 350 | max-width: 1000px; 351 | font-size: 2rem; 352 | font-family: new-science-extended, sans-serif; 353 | font-weight: 400; 354 | } 355 | 356 | .content__footer { 357 | display: flex; 358 | justify-content: space-between; 359 | margin-top: 20vh; 360 | transform: translateY(calc(-1 * var(--trans-content))); 361 | } 362 | 363 | @media screen and (min-width: 53em) { 364 | body { 365 | --page-padding: 2rem 3rem; 366 | } 367 | .frame { 368 | grid-template-columns: auto 1fr; 369 | grid-template-areas: 'title sponsor'; 370 | align-content: space-between; 371 | } 372 | .content__header h2 { 373 | font-size: clamp(2rem,20vh,16rem); 374 | } 375 | .content__text p.highlight { 376 | font-size: clamp(2rem,7vh,4rem); 377 | } 378 | } 379 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hover Motion & Transition Image Grid | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
Explore
75 |
76 |
77 | 87 |
88 |

Nova Motion

89 |
90 |
91 |

At NovaMotion®, our team of creative artists and tech experts work together to explore new possibilities. Each project shows our dedication to new ideas and high quality, whether it's a commercial, film, or interactive display.

92 |

We believe motion design can tell stories, evoke emotions, and inspire imaginations.

93 |

Our clients are at the core of everything we do at NovaMotion®. We pride ourselves on building strong, lasting relationships based on trust, communication, and mutual respect. We listen carefully to your needs and goals, ensuring we fully understand your vision.

94 |

By collaborating closely, we tailor our approach to meet your unique requirements, delivering results that exceed expectations. Whether you are a small business or a large corporation, we are committed to helping you succeed. With NovaMotion®, you are not just a client; you are a valued partner in creating exceptional visual stories.

95 |
96 | 100 |
101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | // Importing utility functions for preloading images, getting mouse position, and linear interpolation 2 | import { preloadImages, getMousePos, lerp } from './utils.js'; 3 | 4 | // Registers the Flip plugin with GSAP 5 | gsap.registerPlugin(Flip); 6 | 7 | const body = document.body; // Reference to the body element 8 | const frame = document.querySelector('.frame'); // Reference to the frame element 9 | const content = document.querySelector('.content'); // Reference to the content element 10 | const enterButton = document.querySelector('.enter'); // Reference to the "Explore" button 11 | const fullview = document.querySelector('.fullview'); // Reference to the fullview element 12 | const grid = document.querySelector('.grid'); // Reference to the grid element 13 | const gridRows = grid.querySelectorAll('.row'); // Reference to all row elements within the grid 14 | 15 | // Cache window size and update on resize 16 | let winsize = { width: window.innerWidth, height: window.innerHeight }; 17 | window.addEventListener('resize', () => { 18 | winsize = { width: window.innerWidth, height: window.innerHeight }; 19 | }); 20 | 21 | // Initialize mouse position object 22 | let mousepos = { x: winsize.width / 2, y: winsize.height / 2 }; 23 | 24 | // Configuration for enabling/disabling animations 25 | const config = { 26 | translateX: true, 27 | skewX: false, 28 | contrast: true, 29 | scale: false, 30 | brightness: true 31 | }; 32 | 33 | // Total number of rows 34 | const numRows = gridRows.length; 35 | // Calculate the middle row assuming an odd number of rows 36 | const middleRowIndex = Math.floor(numRows / 2); 37 | 38 | const middleRow = gridRows[middleRowIndex]; // Reference to the middle row 39 | const middleRowItems = middleRow.querySelectorAll('.row__item'); // Reference to all items within the middle row 40 | const numRowItems = middleRowItems.length; // Number of items in the middle row 41 | const middleRowItemIndex = Math.floor(numRowItems / 2); // Index of the middle item in the middle row 42 | // Select the .row__item-inner element inside the middle .row__item element of the middle row 43 | // This element will be used for the animation that transitions the image to fullscreen when the button is clicked 44 | const middleRowItemInner = middleRowItems[middleRowItemIndex].querySelector('.row__item-inner'); 45 | // And the inner image 46 | const middleRowItemInnerImage = middleRowItemInner.querySelector('.row__item-img'); 47 | // Setting the final size of the middle image for the reveal effect 48 | middleRowItemInnerImage.classList.add('row__item-img--large'); 49 | 50 | // amt represents the interpolation amount for each row's movement. 51 | // A higher amt value means faster interpolation and less lag behind the mouse movement. 52 | const baseAmt = 0.1; // The amt for the middle row, which will have the fastest response. 53 | const minAmt = 0.05; // Minimum amt value to ensure rows have a noticeable movement lag. 54 | const maxAmt = 0.1; // Maximum amt value to ensure rows have a noticeable movement lag. 55 | 56 | // Initialize rendered styles for each row with dynamically calculated amt values 57 | let renderedStyles = Array.from({ length: numRows }, (v, index) => { 58 | const distanceFromMiddle = Math.abs(index - middleRowIndex); 59 | // Calculate amt dynamically based on the distance from the middle row 60 | const amt = Math.max(baseAmt - distanceFromMiddle * 0.03, minAmt); 61 | // Inverted amt for scale: outermost rows are faster 62 | const scaleAmt = Math.min(baseAmt + distanceFromMiddle * 0.03, maxAmt); 63 | let style = { amt, scaleAmt }; 64 | 65 | if (config.translateX) { 66 | style.translateX = { previous: 0, current: 0 }; 67 | } 68 | if (config.skewX) { 69 | style.skewX = { previous: 0, current: 0 }; 70 | } 71 | if (config.contrast) { 72 | style.contrast = { previous: 100, current: 100 }; 73 | } 74 | if (config.scale) { 75 | style.scale = { previous: 1, current: 1 }; 76 | } 77 | if (config.brightness) { 78 | style.brightness = { previous: 100, current: 100 }; 79 | } 80 | 81 | return style; 82 | }); 83 | 84 | // Tracks if the render loop is running 85 | let requestId; 86 | 87 | // Update mouse position 88 | const updateMousePosition = (ev) => { 89 | const pos = getMousePos(ev); 90 | mousepos.x = pos.x; 91 | mousepos.y = pos.y; 92 | }; 93 | 94 | // Map mouse position to translation range 95 | const calculateMappedX = () => { 96 | return ((mousepos.x / winsize.width) * 2 - 1) * 40 * winsize.width / 100; 97 | }; 98 | 99 | // Map mouse position to skew range (-3 to 3) 100 | const calculateMappedSkew = () => { 101 | return ((mousepos.x / winsize.width) * 2 - 1) * 3; 102 | }; 103 | 104 | // Map mouse position to contrast range (100 at center to 125 at edges) 105 | const calculateMappedContrast = () => { 106 | const centerContrast = 100; 107 | const edgeContrast = 330; 108 | const t = Math.abs((mousepos.x / winsize.width) * 2 - 1); 109 | const factor = Math.pow(t, 2); // Quadratic factor for non-linear mapping 110 | return centerContrast - factor * (centerContrast - edgeContrast); 111 | }; 112 | 113 | // Map mouse position to scale range (1 at center to 0.95 at edges) 114 | const calculateMappedScale = () => { 115 | const centerScale = 1; 116 | const edgeScale = 0.95; 117 | return centerScale - Math.abs((mousepos.x / winsize.width) * 2 - 1) * (centerScale - edgeScale); 118 | }; 119 | 120 | // Map mouse position to brightness range (100 at center to 15 at edges) 121 | const calculateMappedBrightness = () => { 122 | const centerBrightness = 100; 123 | const edgeBrightness = 15; 124 | const t = Math.abs((mousepos.x / winsize.width) * 2 - 1); 125 | const factor = Math.pow(t, 2); // Quadratic factor for non-linear mapping 126 | return centerBrightness - factor * (centerBrightness - edgeBrightness); 127 | }; 128 | 129 | // Function to get the value of a CSS variable 130 | const getCSSVariableValue = (element, variableName) => { 131 | return getComputedStyle(element).getPropertyValue(variableName).trim(); 132 | }; 133 | 134 | // Render the current frame 135 | const render = () => { 136 | const mappedValues = { 137 | translateX: calculateMappedX(), 138 | skewX: calculateMappedSkew(), 139 | contrast: calculateMappedContrast(), 140 | scale: calculateMappedScale(), 141 | brightness: calculateMappedBrightness() 142 | }; 143 | 144 | // Calculate and set the translation for each row 145 | gridRows.forEach((row, index) => { 146 | const style = renderedStyles[index]; 147 | 148 | // Update current positions and interpolate values 149 | for (let prop in config) { 150 | if (config[prop]) { 151 | style[prop].current = mappedValues[prop]; 152 | const amt = prop === 'scale' ? style.scaleAmt : style.amt; 153 | style[prop].previous = lerp(style[prop].previous, style[prop].current, amt); 154 | } 155 | } 156 | 157 | // Apply the interpolated values 158 | let gsapSettings = {}; 159 | if (config.translateX) gsapSettings.x = style.translateX.previous; 160 | if (config.skewX) gsapSettings.skewX = style.skewX.previous; 161 | if (config.scale) gsapSettings.scale = style.scale.previous; 162 | if (config.contrast) gsapSettings.filter = `contrast(${style.contrast.previous}%)`; 163 | if (config.brightness) gsapSettings.filter = `${gsapSettings.filter ? gsapSettings.filter + ' ' : ''}brightness(${style.brightness.previous}%)`; 164 | 165 | gsap.set(row, gsapSettings); 166 | }); 167 | 168 | // Continue the render loop 169 | requestId = requestAnimationFrame(render); 170 | }; 171 | 172 | // Start the render loop 173 | const startRendering = () => { 174 | if (!requestId) { 175 | render(); 176 | } 177 | }; 178 | 179 | // Stop the render loop 180 | const stopRendering = () => { 181 | if (requestId) { 182 | cancelAnimationFrame(requestId); 183 | requestId = undefined; 184 | } 185 | }; 186 | 187 | const enterFullview = () => { 188 | // Logic to animate the middle image to full view using gsap Flip 189 | const flipstate = Flip.getState(middleRowItemInner); 190 | fullview.appendChild(middleRowItemInner); 191 | 192 | // Get the CSS variable value for the translation 193 | const transContent = getCSSVariableValue(content, '--trans-content'); 194 | 195 | // Create a GSAP timeline for the Flip animation 196 | const tl = gsap.timeline(); 197 | 198 | // Add the Flip animation to the timeline 199 | tl.add(Flip.from(flipstate, { 200 | duration: 0.9, 201 | ease: 'power4', 202 | absolute: true, 203 | onComplete: stopRendering 204 | })) 205 | // Fade out grid 206 | .to(grid, { 207 | duration: 0.9, 208 | ease: 'power4', 209 | opacity: 0.01 210 | }, 0) 211 | // Scale up the inner image 212 | .to(middleRowItemInnerImage, { 213 | scale: 1.2, 214 | duration: 3, 215 | ease: 'sine' 216 | }, '<-=0.45') 217 | // Move the content up 218 | .to(content, { 219 | y: transContent, // Use the CSS variable value 220 | duration: 0.9, 221 | ease: 'power4' 222 | }) 223 | // Show the frame 224 | .add(() => frame.classList.remove('hidden'), '<') 225 | // Scale and move 226 | .to(middleRowItemInnerImage, { 227 | scale: 1.1, 228 | startAt: {filter: 'brightness(100%)'}, 229 | filter: 'brightness(50%)', 230 | y: '-5vh', 231 | duration: 0.9, 232 | ease: 'power4' 233 | }, '<'); 234 | 235 | // Hide the button 236 | enterButton.classList.add('hidden'); 237 | // Scrolling allowed 238 | body.classList.remove('noscroll'); 239 | }; 240 | 241 | // Initialization function 242 | const init = () => { 243 | startRendering(); 244 | 245 | // Initialize click event for the "Explore" button 246 | enterButton.addEventListener('click', enterFullview); 247 | // Add touchstart event for mobile devices 248 | enterButton.addEventListener('touchstart', enterFullview); 249 | }; 250 | 251 | // Preloading images and initializing setup when complete 252 | preloadImages('.row__item-img').then(() => { 253 | document.body.classList.remove('loading'); 254 | init(); 255 | }); 256 | 257 | // Mouse movement event listener to update mouse position 258 | window.addEventListener('mousemove', updateMousePosition); 259 | // Touch move event listener for touch devices 260 | window.addEventListener('touchmove', (ev) => { 261 | const touch = ev.touches[0]; 262 | updateMousePosition(touch); 263 | }); 264 | -------------------------------------------------------------------------------- /js/lenis.min.js: -------------------------------------------------------------------------------- 1 | var t,e;t=this,e=function(){function t(t,e,i){return Math.max(t,Math.min(e,i))}class Animate{advance(e){if(!this.isRunning)return;let i=!1;if(this.lerp)this.value=(s=this.value,o=this.to,n=60*this.lerp,l=e,function(t,e,i){return(1-i)*t+i*e}(s,o,1-Math.exp(-n*l))),Math.round(this.value)===this.to&&(this.value=this.to,i=!0);else{this.currentTime+=e;const s=t(0,this.currentTime/this.duration,1);i=s>=1;const o=i?1:this.easing(s);this.value=this.from+(this.to-this.from)*o}var s,o,n,l;this.onUpdate?.(this.value,i),i&&this.stop()}stop(){this.isRunning=!1}fromTo(t,e,{lerp:i=.1,duration:s=1,easing:o=(t=>t),onStart:n,onUpdate:l}){this.from=this.value=t,this.to=e,this.lerp=i,this.duration=s,this.easing=o,this.currentTime=0,this.isRunning=!0,n?.(),this.onUpdate=l}}class Dimensions{constructor({wrapper:t,content:e,autoResize:i=!0,debounce:s=250}={}){this.wrapper=t,this.content=e,i&&(this.debouncedResize=function(t,e){let i;return function(){let s=arguments,o=this;clearTimeout(i),i=setTimeout((function(){t.apply(o,s)}),e)}}(this.resize,s),this.wrapper===window?window.addEventListener("resize",this.debouncedResize,!1):(this.wrapperResizeObserver=new ResizeObserver(this.debouncedResize),this.wrapperResizeObserver.observe(this.wrapper)),this.contentResizeObserver=new ResizeObserver(this.debouncedResize),this.contentResizeObserver.observe(this.content)),this.resize()}destroy(){this.wrapperResizeObserver?.disconnect(),this.contentResizeObserver?.disconnect(),window.removeEventListener("resize",this.debouncedResize,!1)}resize=()=>{this.onWrapperResize(),this.onContentResize()};onWrapperResize=()=>{this.wrapper===window?(this.width=window.innerWidth,this.height=window.innerHeight):(this.width=this.wrapper.clientWidth,this.height=this.wrapper.clientHeight)};onContentResize=()=>{this.wrapper===window?(this.scrollHeight=this.content.scrollHeight,this.scrollWidth=this.content.scrollWidth):(this.scrollHeight=this.wrapper.scrollHeight,this.scrollWidth=this.wrapper.scrollWidth)};get limit(){return{x:this.scrollWidth-this.width,y:this.scrollHeight-this.height}}}class Emitter{constructor(){this.events={}}emit(t,...e){let i=this.events[t]||[];for(let t=0,s=i.length;t{this.events[t]=this.events[t]?.filter((t=>e!==t))}}off(t,e){this.events[t]=this.events[t]?.filter((t=>e!==t))}destroy(){this.events={}}}const e=100/6;class VirtualScroll{constructor(t,{wheelMultiplier:e=1,touchMultiplier:i=1}){this.element=t,this.wheelMultiplier=e,this.touchMultiplier=i,this.touchStart={x:null,y:null},this.emitter=new Emitter,window.addEventListener("resize",this.onWindowResize,!1),this.onWindowResize(),this.element.addEventListener("wheel",this.onWheel,{passive:!1}),this.element.addEventListener("touchstart",this.onTouchStart,{passive:!1}),this.element.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.element.addEventListener("touchend",this.onTouchEnd,{passive:!1})}on(t,e){return this.emitter.on(t,e)}destroy(){this.emitter.destroy(),window.removeEventListener("resize",this.onWindowResize,!1),this.element.removeEventListener("wheel",this.onWheel,{passive:!1}),this.element.removeEventListener("touchstart",this.onTouchStart,{passive:!1}),this.element.removeEventListener("touchmove",this.onTouchMove,{passive:!1}),this.element.removeEventListener("touchend",this.onTouchEnd,{passive:!1})}onTouchStart=t=>{const{clientX:e,clientY:i}=t.targetTouches?t.targetTouches[0]:t;this.touchStart.x=e,this.touchStart.y=i,this.lastDelta={x:0,y:0},this.emitter.emit("scroll",{deltaX:0,deltaY:0,event:t})};onTouchMove=t=>{const{clientX:e,clientY:i}=t.targetTouches?t.targetTouches[0]:t,s=-(e-this.touchStart.x)*this.touchMultiplier,o=-(i-this.touchStart.y)*this.touchMultiplier;this.touchStart.x=e,this.touchStart.y=i,this.lastDelta={x:s,y:o},this.emitter.emit("scroll",{deltaX:s,deltaY:o,event:t})};onTouchEnd=t=>{this.emitter.emit("scroll",{deltaX:this.lastDelta.x,deltaY:this.lastDelta.y,event:t})};onWheel=t=>{let{deltaX:i,deltaY:s,deltaMode:o}=t;i*=1===o?e:2===o?this.windowWidth:1,s*=1===o?e:2===o?this.windowHeight:1,i*=this.wheelMultiplier,s*=this.wheelMultiplier,this.emitter.emit("scroll",{deltaX:i,deltaY:s,event:t})};onWindowResize=()=>{this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight}}return class Lenis{constructor({wrapper:t=window,content:e=document.documentElement,wheelEventsTarget:i=t,eventsTarget:s=i,smoothWheel:o=!0,syncTouch:n=!1,syncTouchLerp:l=.075,touchInertiaMultiplier:r=35,duration:h,easing:a=(t=>Math.min(1,1.001-Math.pow(2,-10*t))),lerp:c=!h&&.1,infinite:d=!1,orientation:p="vertical",gestureOrientation:u="vertical",touchMultiplier:m=1,wheelMultiplier:g=1,autoResize:v=!0,__experimental__naiveDimensions:S=!1}={}){this.__isSmooth=!1,this.__isScrolling=!1,this.__isStopped=!1,this.__isLocked=!1,this.onVirtualScroll=({deltaX:t,deltaY:e,event:i})=>{if(i.ctrlKey)return;const s=i.type.includes("touch"),o=i.type.includes("wheel");if(this.options.syncTouch&&s&&"touchstart"===i.type&&!this.isStopped&&!this.isLocked)return void this.reset();const n=0===t&&0===e,l="vertical"===this.options.gestureOrientation&&0===e||"horizontal"===this.options.gestureOrientation&&0===t;if(n||l)return;let r=i.composedPath();if(r=r.slice(0,r.indexOf(this.rootElement)),r.find((t=>{var e,i,n,l,r;return(null===(e=t.hasAttribute)||void 0===e?void 0:e.call(t,"data-lenis-prevent"))||s&&(null===(i=t.hasAttribute)||void 0===i?void 0:i.call(t,"data-lenis-prevent-touch"))||o&&(null===(n=t.hasAttribute)||void 0===n?void 0:n.call(t,"data-lenis-prevent-wheel"))||(null===(l=t.classList)||void 0===l?void 0:l.contains("lenis"))&&!(null===(r=t.classList)||void 0===r?void 0:r.contains("lenis-stopped"))})))return;if(this.isStopped||this.isLocked)return void i.preventDefault();if(this.isSmooth=this.options.syncTouch&&s||this.options.smoothWheel&&o,!this.isSmooth)return this.isScrolling=!1,void this.animate.stop();i.preventDefault();let h=e;"both"===this.options.gestureOrientation?h=Math.abs(e)>Math.abs(t)?e:t:"horizontal"===this.options.gestureOrientation&&(h=t);const a=s&&this.options.syncTouch,c=s&&"touchend"===i.type&&Math.abs(h)>5;c&&(h=this.velocity*this.options.touchInertiaMultiplier),this.scrollTo(this.targetScroll+h,Object.assign({programmatic:!1},a?{lerp:c?this.options.syncTouchLerp:1}:{lerp:this.options.lerp,duration:this.options.duration,easing:this.options.easing}))},this.onNativeScroll=()=>{if(!this.__preventNextScrollEvent&&!this.isScrolling){const t=this.animatedScroll;this.animatedScroll=this.targetScroll=this.actualScroll,this.velocity=0,this.direction=Math.sign(this.animatedScroll-t),this.emit()}},window.lenisVersion="1.0.42",t!==document.documentElement&&t!==document.body||(t=window),this.options={wrapper:t,content:e,wheelEventsTarget:i,eventsTarget:s,smoothWheel:o,syncTouch:n,syncTouchLerp:l,touchInertiaMultiplier:r,duration:h,easing:a,lerp:c,infinite:d,gestureOrientation:u,orientation:p,touchMultiplier:m,wheelMultiplier:g,autoResize:v,__experimental__naiveDimensions:S},this.animate=new Animate,this.emitter=new Emitter,this.dimensions=new Dimensions({wrapper:t,content:e,autoResize:v}),this.toggleClassName("lenis",!0),this.velocity=0,this.isLocked=!1,this.isStopped=!1,this.isSmooth=n||o,this.isScrolling=!1,this.targetScroll=this.animatedScroll=this.actualScroll,this.options.wrapper.addEventListener("scroll",this.onNativeScroll,!1),this.virtualScroll=new VirtualScroll(s,{touchMultiplier:m,wheelMultiplier:g}),this.virtualScroll.on("scroll",this.onVirtualScroll)}destroy(){this.emitter.destroy(),this.options.wrapper.removeEventListener("scroll",this.onNativeScroll,!1),this.virtualScroll.destroy(),this.dimensions.destroy(),this.toggleClassName("lenis",!1),this.toggleClassName("lenis-smooth",!1),this.toggleClassName("lenis-scrolling",!1),this.toggleClassName("lenis-stopped",!1),this.toggleClassName("lenis-locked",!1)}on(t,e){return this.emitter.on(t,e)}off(t,e){return this.emitter.off(t,e)}setScroll(t){this.isHorizontal?this.rootElement.scrollLeft=t:this.rootElement.scrollTop=t}resize(){this.dimensions.resize()}emit(){this.emitter.emit("scroll",this)}reset(){this.isLocked=!1,this.isScrolling=!1,this.animatedScroll=this.targetScroll=this.actualScroll,this.velocity=0,this.animate.stop()}start(){this.isStopped&&(this.isStopped=!1,this.reset())}stop(){this.isStopped||(this.isStopped=!0,this.animate.stop(),this.reset())}raf(t){const e=t-(this.time||t);this.time=t,this.animate.advance(.001*e)}scrollTo(e,{offset:i=0,immediate:s=!1,lock:o=!1,duration:n=this.options.duration,easing:l=this.options.easing,lerp:r=!n&&this.options.lerp,onComplete:h,force:a=!1,programmatic:c=!0}={}){if(!this.isStopped&&!this.isLocked||a){if(["top","left","start"].includes(e))e=0;else if(["bottom","right","end"].includes(e))e=this.limit;else{let t;if("string"==typeof e?t=document.querySelector(e):(null==e?void 0:e.nodeType)&&(t=e),t){if(this.options.wrapper!==window){const t=this.options.wrapper.getBoundingClientRect();i-=this.isHorizontal?t.left:t.top}const s=t.getBoundingClientRect();e=(this.isHorizontal?s.left:s.top)+this.animatedScroll}}if("number"==typeof e){if(e+=i,e=Math.round(e),this.options.infinite?c&&(this.targetScroll=this.animatedScroll=this.scroll):e=t(0,e,this.limit),s)return this.animatedScroll=this.targetScroll=e,this.setScroll(this.scroll),this.reset(),void(null==h||h(this));if(!c){if(e===this.targetScroll)return;this.targetScroll=e}this.animate.fromTo(this.animatedScroll,e,{duration:n,easing:l,lerp:r,onStart:()=>{o&&(this.isLocked=!0),this.isScrolling=!0},onUpdate:(t,e)=>{this.isScrolling=!0,this.velocity=t-this.animatedScroll,this.direction=Math.sign(this.velocity),this.animatedScroll=t,this.setScroll(this.scroll),c&&(this.targetScroll=t),e||this.emit(),e&&(this.reset(),this.emit(),null==h||h(this),this.__preventNextScrollEvent=!0,requestAnimationFrame((()=>{delete this.__preventNextScrollEvent})))}})}}}get rootElement(){return this.options.wrapper===window?document.documentElement:this.options.wrapper}get limit(){return this.options.__experimental__naiveDimensions?this.isHorizontal?this.rootElement.scrollWidth-this.rootElement.clientWidth:this.rootElement.scrollHeight-this.rootElement.clientHeight:this.dimensions.limit[this.isHorizontal?"x":"y"]}get isHorizontal(){return"horizontal"===this.options.orientation}get actualScroll(){return this.isHorizontal?this.rootElement.scrollLeft:this.rootElement.scrollTop}get scroll(){return this.options.infinite?(t=this.animatedScroll,e=this.limit,(t%e+e)%e):this.animatedScroll;var t,e}get progress(){return 0===this.limit?1:this.scroll/this.limit}get isSmooth(){return this.__isSmooth}set isSmooth(t){this.__isSmooth!==t&&(this.__isSmooth=t,this.toggleClassName("lenis-smooth",t))}get isScrolling(){return this.__isScrolling}set isScrolling(t){this.__isScrolling!==t&&(this.__isScrolling=t,this.toggleClassName("lenis-scrolling",t))}get isStopped(){return this.__isStopped}set isStopped(t){this.__isStopped!==t&&(this.__isStopped=t,this.toggleClassName("lenis-stopped",t))}get isLocked(){return this.__isLocked}set isLocked(t){this.__isLocked!==t&&(this.__isLocked=t,this.toggleClassName("lenis-locked",t))}get className(){let t="lenis";return this.isStopped&&(t+=" lenis-stopped"),this.isLocked&&(t+=" lenis-locked"),this.isScrolling&&(t+=" lenis-scrolling"),this.isSmooth&&(t+=" lenis-smooth"),t}toggleClassName(t,e){this.rootElement.classList.toggle(t,e),this.emitter.emit("className change",this)}}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Lenis=e(); -------------------------------------------------------------------------------- /js/Flip.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Flip 3.12.5 3 | * https://gsap.com 4 | * 5 | * @license Copyright 2024, GreenSock. All rights reserved. 6 | * Subject to the terms at https://gsap.com/standard-license or for Club GSAP members, the agreement issued with that membership. 7 | * @author: Jack Doyle, jack@greensock.com 8 | */ 9 | 10 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument||t;!(w in t.style)&&"msTransform"in t.style&&(k=(w="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(y=window,d=new M,e){a=(g=e).documentElement,b=e.body,(s=g.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),n=e.createElement("div"),r=e&&(e.body||e.firstElementChild);r&&r.appendChild&&(r.appendChild(i),i.appendChild(n),i.setAttribute("style","position:static;transform:translate3d(0,0,1px)"),m=n.offsetParent!==i,r.removeChild(i))}return e}function t(){return y.pageYOffset||g.scrollTop||a.scrollTop||b.scrollTop||0}function u(){return y.pageXOffset||g.scrollLeft||a.scrollLeft||b.scrollLeft||0}function v(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)}function x(t,e){if(t.parentNode&&(g||p(t))){var i=v(t),n=i?i.getAttribute("xmlns")||"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",r=i?e?"rect":"g":"div",a=2!==e?0:100,s=3===e?100:0,o="position:absolute;display:block;pointer-events:none;margin:0;padding:0;",l=g.createElementNS?g.createElementNS(n.replace(/^https/,"http"),r):g.createElement(r);return e&&(i?(f=f||x(t),l.setAttribute("width",.01),l.setAttribute("height",.01),l.setAttribute("transform","translate("+a+","+s+")"),f.appendChild(l)):(c||((c=x(t)).style.cssText=o),l.style.cssText=o+"width:0.1px;height:0.1px;top:"+s+"px;left:"+a+"px",c.appendChild(l))),l}throw"Need document and parent."}function z(t){var e,i=t.getCTM();return i||(e=t.style[w],t.style[w]="none",t.appendChild(s),i=s.getCTM(),t.removeChild(s),e?t.style[w]=e:t.style.removeProperty(w.replace(/([A-Z])/g,"-$1").toLowerCase())),i||d.clone()}function A(t,e){var i,n,r,a,s,o,l=v(t),u=t===l,p=l?C:E,h=t.parentNode;if(t===y)return t;if(p.length||p.push(x(t,1),x(t,2),x(t,3)),i=l?f:c,l)u?(a=-(r=z(t)).e/r.a,s=-r.f/r.d,n=d):t.getBBox?(r=t.getBBox(),a=(n=(n=t.transform?t.transform.baseVal:{}).numberOfItems?1=o;t&&!n&&ha(H,!x),L&&X(e,L,t?"remove":"add")})},k&&(S=H.filter(function(t){return!t.sd&&!t.a.isVisible&&t.b.isVisible}).map(function(t){return t.a.element})),tt?(S&&(y=tt._abs).push.apply(y,ka(H,S)),tt._run.push(m)):(S&&la(ka(H,S)),m());var K=tt?tt.timeline:R;return K.revert=function(){return lt(K,1,1)},K}function Da(t){for(var e,i=t.idLookup={},n=t.alt={},r=t.elementStates,a=r.length;a--;)i[(e=r[a]).id]?n[e.id]=e:i[e.id]=e}var I,Q,tt,r,o,P,T,l,n,h=1,F={},O=180/Math.PI,N=Math.PI/180,D={},Y={},et={},it=S("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),nt=S("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),rt={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},at={zIndex:1,simple:1,clearProps:1,scale:1,absolute:1,fitChild:1,getVars:1,props:1},st={},R="paddingTop,paddingRight,paddingBottom,paddingLeft,gridArea,transition".split(","),G=function _parseElementState(t,e,i,n){return t instanceof pt?t:t instanceof ut?function _findElStateInState(t,e){return e&&t.idLookup[G(e).id]||t.elementStates[0]}(t,n):new pt("string"==typeof t?V(t)||console.warn(t+" not found"):t,e,i)},ot=function _fit(t,e,i,n,r,a){var s,o,l,u,p,h,c,f=t.element,d=t.cache,m=t.parent,g=t.x,v=t.y,y=e.width,x=e.height,b=e.scaleX,w=e.scaleY,S=e.rotation,k=e.bounds,_=a&&T&&T(f,"transform"),C=t,V=e.matrix,E=V.e,M=V.f,B=t.bounds.width!==k.width||t.bounds.height!==k.height||t.scaleX!==b||t.scaleY!==w||t.rotation!==S,F=!B&&t.simple&&e.simple&&!r;return F||!m?(b=w=1,S=s=0):(h=(p=function _getInverseGlobalMatrix(t){var e=t._gsap||Q.core.getCache(t);return e.gmCache===Q.ticker.frame?e.gMatrix:(e.gmCache=Q.ticker.frame,e.gMatrix=getGlobalMatrix(t,!0,!1,!0))}(m)).clone().multiply(e.ctm?e.matrix.clone().multiply(e.ctm):e.matrix),S=W(Math.atan2(h.b,h.a)*O),s=W(Math.atan2(h.c,h.d)*O+S)%360,b=Math.sqrt(Math.pow(h.a,2)+Math.pow(h.b,2)),w=Math.sqrt(Math.pow(h.c,2)+Math.pow(h.d,2))*Math.cos(s*N),r&&(r=I(r)[0],u=Q.getProperty(r),c=r.getBBox&&"function"==typeof r.getBBox&&r.getBBox(),C={scaleX:u("scaleX"),scaleY:u("scaleY"),width:c?c.width:Math.ceil(parseFloat(u("width","px"))),height:c?c.height:parseFloat(u("height","px"))}),d.rotation=S+"deg",d.skewX=s+"deg"),i?(b*=y!==C.width&&C.width?y/C.width:1,w*=x!==C.height&&C.height?x/C.height:1,d.scaleX=b,d.scaleY=w):(y=P(y*b/C.scaleX,0),x=P(x*w/C.scaleY,0),f.style.width=y+"px",f.style.height=x+"px"),n&&pa(f,e.props),F||!m?(g+=E-t.matrix.e,v+=M-t.matrix.f):B||m!==e.parent?(d.renderTransform(1,d),h=getGlobalMatrix(r||f,!1,!1,!0),o=p.apply({x:h.e,y:h.f}),g+=(l=p.apply({x:E,y:M})).x-o.x,v+=l.y-o.y):(p.e=p.f=0,g+=(l=p.apply({x:E-t.matrix.e,y:M-t.matrix.f})).x,v+=l.y),g=P(g,.02),v=P(v,.02),!a||a instanceof pt?(d.x=g+"px",d.y=v+"px",d.renderTransform(1,d)):_&&_.revert(),a&&(a.x=g,a.y=v,a.rotation=S,a.skewX=s,i?(a.scaleX=b,a.scaleY=w):(a.width=y,a.height=x)),a||d},j=[],H="width,height,overflowX,overflowY".split(","),lt=function _killFlip(t,e,i){if(t&&t.progress()<1&&(!t.paused()||i))return e&&(function _interrupt(t){t.vars.onInterrupt&&t.vars.onInterrupt.apply(t,t.vars.onInterruptParams||[]),t.getChildren(!0,!1,!0).forEach(_interrupt)}(t),e<2&&t.progress(1),t.kill()),!0},ut=((n=FlipState.prototype).update=function update(t){var e=this;return this.elementStates=this.targets.map(function(t){return new pt(t,e.props,e.simple)}),Da(this),this.interrupt(t),this.recordInlineStyles(),this},n.clear=function clear(){return this.targets.length=this.elementStates.length=0,Da(this),this},n.fit=function fit(t,e,i){for(var n,r,a=ea(this.elementStates.slice(0),!1,!0),s=(t||this).idLookup,o=0;oa;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function ya(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function za(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Aa(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Ca(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ea(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ga(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ha(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||X)||0))}function Ia(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0X)&&e.render(r,!0)),Aa(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur(n=Math.abs(n))&&(a=i,o=n);return a}function tb(t){return za(t),t.scrollTrigger&&t.scrollTrigger.kill(!!L),t.progress()<1&&Ct(t,"onInterrupt"),t}function wb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:he,add:Wt,kill:ce,modifier:fe,rawVars:0},a={targetTest:0,get:0,getSetter:ne,aliases:{},register:0};if(Ft(),t!==i){if(pt[e])return;qa(i,qa(ua(t,n),a)),yt(i.prototype,yt(n,ua(t,a))),pt[i.prop=e]=i,t.targetTest&&(gt.push(i),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}S(e,i),t.register&&t.register(ze,i,_e)}else At.push(t)}function zb(t,e,r){return(6*(t+=t<0?1:1>16,e>>8&St,e&St]:0:zt.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),zt[e])p=zt[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&St,p&St,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&St,e&St]}else if("hsl"===e.substr(0,3))if(p=c=e.match(tt),r){if(~e.indexOf("="))return p=e.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3=U?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*(Z(i)?i[0]:i).totalDuration()),1=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=i&&(a instanceof $t?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(ya(this,t),t===this._recent&&(this._recent=this._last),Aa(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Rt.time-(0r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=xt(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=$t.to(i,qa({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||X,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ra(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,qa({startAt:{time:xt(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+X)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Aa(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Aa(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=U;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Ka(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ra(a,a===I&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(I._ts&&(na(I,Ga(t,I)),f=Rt.frame),Rt.frame>=mt){mt+=q.autoSleep||120;var e=I._first;if((!e||!e._ts)&&q.autoSleep&&Rt._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Rt.sleep()}}},Timeline}(Ut);qa(Xt.prototype,{_lock:0,_hasPause:0,_forcing:0});function ac(t,e,i,n,a,o){var u,h,l,f;if(pt[t]&&!1!==(u=new pt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Kt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||Z(t)||$(t))return r(t)?Kt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Kt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new _e(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function gc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if(Z(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Nt,Gt,Wt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?re:te:Zt;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(d=ka(p,n)+(Ya(p)||0))&&0!==d||(n=d))),!f||p!==n||Gt)return isNaN(p*n)||""===n?(c||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new _e(this._pt,t,e,0,1,ue,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=ob(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(it)||[];o=it.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ka(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m")}),s.duration();else{for(l in u={},x)"ease"===l||"easeEach"===l||gc(l,x[l],u,x.easeEach);for(l in u)for(A=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o=t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||L||(Ct(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),D.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||Rt.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Gt=1,t.vars[e]="+=0",Qt(t,s),Gt=0,o?R(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ia(r)+Ya(h.e)),h.b&&(h.b=u.s+Ya(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(Ia(this,0),this.parent||xa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?tb(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Nt&&!0!==Nt.vars.overwrite)._first||tb(this),this.parent&&i!==this.timeline.totalDuration()&&Ra(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Mt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),tb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ha(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?fa(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=yt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||ya(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&tb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Va(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Va(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return I.killTweensOf(t,e,r)},Tween}(Ut);qa($t.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){$t[r]=function(){var t=new Xt,e=kt.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function oc(t,e,r){return t.setAttribute(e,r)}function wc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var Zt=function _setterPlain(t,e,r){return t[e]=r},te=function _setterFunc(t,e,r){return t[e](r)},re=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},ne=function _getSetter(t,e){return s(t[e])?te:u(t[e])&&t.setAttribute?oc:Zt},ae=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},se=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ue=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},he=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},fe=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},ce=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?ya(this,i,"_pt"):i.dep||(e=1),i=r;return!e},pe=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},_e=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=wc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ae,this.d=s||this,this.set=o||Zt,this.pr=u||0,(this._next=t)&&(t._prev=this)}ha(vt+"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 ft[t]=1}),ot.TweenMax=ot.TweenLite=$t,ot.TimelineLite=ot.TimelineMax=Xt,I=new Xt({sortChildren:!1,defaults:V,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),q.stringFilter=Fb;function Ec(t){return(ye[t]||Te).map(function(t){return t()})}function Fc(){var t=Date.now(),o=[];2