├── .DS_Store ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── css └── base.css ├── favicon.ico ├── index.html ├── js ├── .DS_Store ├── gsap.min.js ├── imagesloaded.pkgd.min.js ├── index.js └── utils.js └── media ├── .DS_Store ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── beige1.jpg ├── beige2.jpg ├── bg-video.mp4 ├── pink.jpg ├── red1.jpg └── red2.jpg /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/.DS_Store -------------------------------------------------------------------------------- /.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 - 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Grid Item Reveal Animation on Hover 2 | 3 | A grid item reveal animation on hover inspired by [Metalab](https://www.metalab.com/). 4 | 5 | ![Hover Grid](https://generative-placeholders.glitch.me/image?width=800&height=600") 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=76613) 8 | 9 | [Demo](http://tympanus.net/Development/HoverGrid/) 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 | - Video by [Rostislav Uzunov](https://www.pexels.com/video/abstract-digital-animation-7670836/) 18 | - Images generated with [Midjourney](https://midjourney.com) 19 | 20 | ## Misc 21 | 22 | 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/) 23 | 24 | [Support us](https://www.buymeacoffee.com/codrops) 25 | 26 | ## License 27 | [MIT](LICENSE) 28 | 29 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12.5px; 9 | --color-text: #777674; 10 | --color-bg: #000; 11 | --color-link: #777674; 12 | --color-link-hover: #f4d88c; 13 | --page-padding: 1.5rem; 14 | --color-link-works: #fff; 15 | --color-link-works-hover: #f4d88c; 16 | --color-link-works-current: #eeae30; 17 | --color-title: #fff; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | color: var(--color-text); 23 | background-color: var(--color-bg); 24 | font-family: "Onest", sans-serif; 25 | font-optical-sizing: auto; 26 | text-transform: uppercase; 27 | -webkit-font-smoothing: antialiased; 28 | -moz-osx-font-smoothing: grayscale; 29 | } 30 | 31 | /* Page Loader */ 32 | .js .loading::before, 33 | .js .loading::after { 34 | content: ''; 35 | position: fixed; 36 | z-index: 10000; 37 | } 38 | 39 | .js .loading::before { 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background: var(--color-bg); 45 | } 46 | 47 | .js .loading::after { 48 | top: 50%; 49 | left: 50%; 50 | width: 60px; 51 | height: 60px; 52 | margin: -30px 0 0 -30px; 53 | border-radius: 50%; 54 | opacity: 0.4; 55 | background: var(--color-link); 56 | animation: loaderAnim 0.7s linear infinite alternate forwards; 57 | 58 | } 59 | 60 | @keyframes loaderAnim { 61 | to { 62 | opacity: 1; 63 | transform: scale3d(0.5,0.5,1); 64 | } 65 | } 66 | 67 | a { 68 | text-decoration: underline; 69 | color: var(--color-link); 70 | outline: none; 71 | cursor: pointer; 72 | } 73 | 74 | a:hover { 75 | text-decoration: none; 76 | color: var(--color-link-hover); 77 | outline: none; 78 | } 79 | 80 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 81 | a:focus { 82 | /* Provide a fallback style for browsers 83 | that don't support :focus-visible */ 84 | outline: none; 85 | background: lightgrey; 86 | } 87 | 88 | a:focus:not(:focus-visible) { 89 | /* Remove the focus indicator on mouse-focus for browsers 90 | that do support :focus-visible */ 91 | background: transparent; 92 | } 93 | 94 | a:focus-visible { 95 | /* Draw a very noticeable focus style for 96 | keyboard-focus on browsers that do support 97 | :focus-visible */ 98 | outline: 2px solid red; 99 | background: transparent; 100 | } 101 | 102 | .unbutton { 103 | background: none; 104 | border: 0; 105 | padding: 0; 106 | margin: 0; 107 | font: inherit; 108 | cursor: pointer; 109 | } 110 | 111 | .unbutton:focus { 112 | outline: none; 113 | } 114 | 115 | .frame { 116 | padding: var(--page-padding); 117 | position: relative; 118 | min-height: 100vh; 119 | display: grid; 120 | z-index: 1000; 121 | width: 100%; 122 | grid-row-gap: 1rem; 123 | grid-column-gap: 2rem; 124 | justify-items: start; 125 | grid-template-columns: auto auto auto; 126 | grid-template-areas: 127 | 'site year menu' 128 | 'tagline tagline tagline' 129 | 'contact contact contact' 130 | 'works works works' 131 | 'content content content' 132 | 'title title title' 133 | 'links links links'; 134 | } 135 | 136 | .frame a { 137 | pointer-events: auto; 138 | } 139 | 140 | .frame__title { 141 | grid-area: title; 142 | display: flex; 143 | flex-direction: column; 144 | gap: 0.5rem; 145 | align-self: end; 146 | } 147 | 148 | .frame__title h1 { 149 | font-size: inherit; 150 | margin: 0; 151 | font-weight: inherit; 152 | } 153 | 154 | .frame__tagline { 155 | grid-area: tagline; 156 | max-width: 220px; 157 | line-height: 1.4; 158 | } 159 | 160 | .frame__site { 161 | grid-area: site; 162 | } 163 | 164 | .frame__year { 165 | grid-area: year; 166 | } 167 | 168 | .frame__contact { 169 | grid-area: contact; 170 | } 171 | 172 | .frame__works { 173 | grid-area: works; 174 | display: flex; 175 | flex-direction: column; 176 | pointer-events: none; 177 | } 178 | 179 | .frame__works span { 180 | margin-bottom: 1.5rem; 181 | } 182 | 183 | .frame__works a { 184 | pointer-events: auto; 185 | padding: 0.25rem 0; 186 | position: relative; 187 | font-size: 1.5rem; 188 | text-decoration: none; 189 | color: var(--color-link-works); 190 | } 191 | 192 | .frame__works a:hover { 193 | color: var(--color-link-works-hover); 194 | } 195 | 196 | .frame__works a.current { 197 | color: var(--color-link-works-current); 198 | } 199 | 200 | .frame__sponsors { 201 | grid-area: sponsors; 202 | } 203 | 204 | .frame__menu { 205 | grid-area: menu; 206 | justify-self: end; 207 | width: 30px; 208 | aspect-ratio: 1; 209 | position: relative; 210 | display: flex; 211 | flex-direction: column; 212 | align-items: self-end; 213 | gap: 0.5rem; 214 | } 215 | 216 | .frame__menu::before { 217 | content: ''; 218 | width: 100%; 219 | height: 1px; 220 | background: currentColor; 221 | } 222 | 223 | .frame__menu::after { 224 | content: ''; 225 | width: 60%; 226 | height: 1px; 227 | background: currentColor; 228 | } 229 | 230 | .frame__links { 231 | grid-area: links; 232 | display: flex; 233 | flex-wrap: wrap; 234 | gap: 1rem; 235 | align-self: end; 236 | } 237 | 238 | .frame__content { 239 | grid-area: content; 240 | width: 100%; 241 | height: 100%; 242 | display: grid; 243 | grid-template-areas: 'content-item'; 244 | } 245 | 246 | .frame__title-main { 247 | text-transform: none; 248 | line-height: 0.9; 249 | font-weight: 400; 250 | margin: 0; 251 | grid-area: content; 252 | color: var(--color-title); 253 | font-size: clamp(2rem,8vw,9rem); 254 | display: grid; 255 | align-content: center; 256 | width: 100%; 257 | pointer-events: none; 258 | } 259 | 260 | .frame__title-main span:last-child { 261 | margin-left: 1em; 262 | } 263 | 264 | .content { 265 | pointer-events: none; 266 | position: relative; 267 | opacity: 0; 268 | grid-area: content-item; 269 | display: grid; 270 | grid-template-columns: repeat(10,1fr); 271 | grid-template-rows: repeat(10,1fr); 272 | width: 100%; 273 | height: 100%; 274 | z-index: 0; 275 | } 276 | 277 | .content--current { 278 | opacity: 1; 279 | } 280 | 281 | .content__title { 282 | position: relative; 283 | z-index: 10; 284 | text-transform: none; 285 | font-weight: normal; 286 | opacity: 0; 287 | grid-area: 1 / 2 / -1 / -2; 288 | width: 100%; 289 | height: 100%; 290 | display: grid; 291 | align-content: center; 292 | margin: 0; 293 | line-height: 1; 294 | color: var(--color-title); 295 | font-size: clamp(2rem,10vw,9rem); 296 | } 297 | 298 | .no-js .content__title { 299 | opacity: 1; 300 | } 301 | 302 | .content__img { 303 | position: relative; 304 | will-change: clip-path, filter; 305 | } 306 | 307 | .content__img-inner { 308 | background-size: cover; 309 | background-position: 50% 0%; 310 | width: 100%; 311 | height: 100%; 312 | } 313 | 314 | .pos-1 { grid-area: 1 / 1 / 5 / 5; } 315 | .pos-2 { grid-area: 5 / 8 / 10 / 11; } 316 | .pos-3 { grid-area: 8 / 3 / 11 / 5; } 317 | 318 | .pos-4 { grid-area: 3 / 5 / 8 / 10; } 319 | .pos-5 { grid-area: 7 / 4 / 10 / 7; } 320 | .pos-6 { grid-area: 2 / 2 / 4 / 4; } 321 | 322 | .pos-7 { grid-area: 8 / 2 / 11 / 5; } 323 | .pos-8 { grid-area: 2 / 8 / 8 / 11; } 324 | .pos-9 { grid-area: 3 / 3 / 6 / 6; } 325 | 326 | .pos-10 { grid-area: 7 / 7 / 10 / 9; } 327 | .pos-11 { grid-area: 4 / 1 / 10 / 4; } 328 | .pos-12 { grid-area: 2 / 5 / 6 / 9; } 329 | 330 | .pos-13 { grid-area: 3 / 8 / 8 / 11; } 331 | .pos-14 { grid-area: 1 / 5 / 5 / 7; } 332 | .pos-15 { grid-area: 6 / 2 / 11 / 5; } 333 | 334 | .background { 335 | position: fixed; 336 | right: 0; 337 | bottom: 0; 338 | width: 100vw; 339 | height: 100vh; 340 | display: grid; 341 | z-index: -1; 342 | grid-template-areas: 'background'; 343 | grid-template-columns: 100%; 344 | grid-template-rows: 100%; 345 | pointer-events: none; 346 | place-items: center; 347 | } 348 | 349 | .background__image { 350 | position: relative; 351 | z-index: 0; 352 | grid-area: background; 353 | background-size: cover; 354 | filter: brightness(0.2); 355 | width: 120%; 356 | height: 120%; 357 | opacity: 0; 358 | } 359 | 360 | .background__video { 361 | position: relative; 362 | z-index: 1; 363 | grid-area: background; 364 | object-fit: cover; 365 | width: 100%; 366 | height: 100%; 367 | } 368 | 369 | @media screen and (min-width: 53em) { 370 | body { 371 | --page-padding: 2.5rem; 372 | } 373 | .frame { 374 | position: fixed; 375 | bottom: 0; 376 | left: 0; 377 | height: 100%; 378 | width: 100%; 379 | grid-template-columns: 20% 15% 30% 1fr 1fr; 380 | grid-template-rows: auto auto 1fr 1fr auto; 381 | align-content: space-between; 382 | grid-template-areas: 383 | 'tagline ... site year menu' 384 | 'tagline content content content content' 385 | 'contact content content content content' 386 | 'works content content content content' 387 | 'title title links links links'; 388 | } 389 | .frame__contact { 390 | padding-top: 3rem; 391 | } 392 | .frame__links { 393 | gap: 2rem; 394 | } 395 | .frame__works { 396 | margin-bottom: 10vh; 397 | } 398 | .frame__title-main { 399 | grid-area: 5 / 3 / 2 / 6; 400 | } 401 | } 402 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid Item Reveal Animation on Hover | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |

#Hover #Grid Animations

22 | Want animations like these? Hire us 23 |
24 | 32 |
Blending artistry with technology, we transform visionary ideas into tangible, captivating realities that inspire and connect.
33 |
Grafixo
34 |
2024
35 |
Get in touch ↗
36 |
37 |
38 | Article 39 | All demos 40 | GitHub 41 |
42 |

Studio Grafixo

43 |
44 |
45 |

Herex Aether

46 |
47 |
48 |
49 |
50 |
51 |

Cosmic Silence

52 |
53 |
54 |
55 |
56 |
57 |

Mystic Trails

58 |
59 |
60 |
61 |
62 |
63 |

Metamorph

64 |
65 |
66 |
67 |
68 |
69 |

Prismatica

70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/js/.DS_Store -------------------------------------------------------------------------------- /js/gsap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * GSAP 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 _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&ze}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Vt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Mt(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++ia;)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{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})); -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | // Importing utility function for preloading images 2 | import { preloadImages } from './utils.js'; 3 | 4 | // Selecting DOM elements 5 | const workNav = document.querySelector('.frame__works'); 6 | const workLinks = [...workNav.querySelectorAll('a')]; 7 | 8 | const title = document.querySelector('.frame__title-main'); 9 | const bgImageElements = [...document.querySelectorAll('.background__image')]; 10 | const video = document.querySelector('.background__video'); 11 | 12 | // Function to calculate clip-path values based on the direction attribute 13 | const getClipPath = imageElement => { 14 | // Maps direction to corresponding polygon values for clip-path animation 15 | const clipPathDirections = { 16 | right: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)', 17 | left: 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)', 18 | top: 'polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)', 19 | bottom: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)' 20 | }; 21 | 22 | // Direction to where to animate the content image (using clip-path) 23 | const imageDirection = imageElement.dataset.dir; 24 | 25 | // Use the direction to get the corresponding clip-path values, defaulting to full visibility if direction is unknown 26 | const clipPath = { 27 | from: clipPathDirections[imageDirection] || 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', 28 | to: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' 29 | }; 30 | 31 | return clipPath; 32 | } 33 | 34 | // Utility function to toggle the display of work based on mouse events 35 | const toggleWork = (event, isShowing) => { 36 | // Retrieve the href attribute of the target link to identify the content to show/hide 37 | const href = event.target.getAttribute('href'); 38 | const contentElement = document.querySelector(href); 39 | 40 | // Using the data-bg attribute to find the corresponding background element 41 | const bgId = contentElement.dataset.bg; 42 | const bgElement = document.querySelector(`#${bgId}`); 43 | 44 | // Selecting title and images within the content element 45 | const contentTitle = contentElement.querySelector('.content__title'); 46 | const contentImages = [...contentElement.querySelectorAll('.content__img')]; 47 | const contentInnerImages = [...contentElement.querySelectorAll('.content__img-inner')]; 48 | 49 | // Cancel any ongoing animations to avoid conflicts 50 | if (event.target.tlEnter) { 51 | event.target.tlEnter.kill(); 52 | } 53 | if (event.target.tlLeave) { 54 | event.target.tlLeave.kill(); 55 | } 56 | 57 | // Check if we are showing or hiding the content 58 | if ( isShowing ) { 59 | // Make the content element visible and position it above others 60 | gsap.set(contentElement, {zIndex: 1}); 61 | contentElement.classList.add('content--current'); 62 | 63 | // Create and play the animation for showing content 64 | event.target.tlEnter = gsap.timeline({ 65 | defaults: { 66 | duration: 0.95, 67 | ease: 'power4' 68 | } 69 | }) 70 | .set(bgElement, {opacity: 1}) 71 | .fromTo(contentTitle, {opacity: 0, scale: 0.9}, {opacity: 1, scale: 1}, 0) 72 | .fromTo(contentImages, { 73 | xPercent: () => gsap.utils.random(-10, 10), 74 | yPercent: () => gsap.utils.random(-10, 10), 75 | filter: 'brightness(300%)', 76 | clipPath: (index, target) => getClipPath(target)['from'] 77 | }, { 78 | xPercent: 0, 79 | yPercent: 0, 80 | filter: 'brightness(100%)', 81 | clipPath: (index, target) => getClipPath(target)['to'] 82 | }, 0) 83 | .fromTo(contentInnerImages, {scale:1.5}, {scale:1}, 0); 84 | } 85 | else { 86 | // Reset the z-index and prepare the content element for hiding 87 | gsap.set(contentElement, {zIndex: 0}); 88 | 89 | // Create and play the animation for hiding content 90 | event.target.tlLeave = gsap.timeline({ 91 | defaults: { 92 | duration: 0.95, 93 | ease: 'power4' 94 | }, 95 | onComplete: () => { 96 | // Remove the visibility class once the animation completes 97 | contentElement.classList.remove('content--current'); 98 | } 99 | }) 100 | .set(bgElement, {opacity: 0}, 0.05) 101 | .to(contentTitle, {opacity: 0}, 0) 102 | .to(contentImages, {clipPath: (index, target) => getClipPath(target)['from']}, 0) 103 | .to(contentInnerImages, {scale:1.5}, 0) 104 | } 105 | }; 106 | 107 | // Function to handle the mouseenter event on work links 108 | const showWork = event => { 109 | // Call toggleWork with true to show the content 110 | toggleWork(event, true); 111 | }; 112 | 113 | // Function to handle the mouseleave event on work links 114 | const hideWork = event => { 115 | // Call toggleWork with false to hide the content 116 | toggleWork(event, false); 117 | }; 118 | 119 | // Initialize hover effects and video fade in/out for the navigation 120 | const initEvents = () => { 121 | workLinks.forEach(workLink => { 122 | let hoverTimer; // Declare a variable to hold the timeout 123 | workLink.addEventListener('mouseenter', event => { 124 | // Set a timeout to delay the hover effect 125 | hoverTimer = setTimeout(() => showWork(event), 30); // Delay the hover effect for 30ms 126 | }); 127 | 128 | workLink.addEventListener('mouseleave', event => { 129 | // Clear the timeout if the mouse leaves before the delay is over 130 | clearTimeout(hoverTimer); 131 | // Immediately trigger the hideWork function 132 | hideWork(event); 133 | }); 134 | }); 135 | 136 | // Fades out the video/title when hovering over the navigation 137 | workNav.addEventListener('mouseenter', () => { 138 | gsap.killTweensOf([video, title]); 139 | gsap.to([video, title], { 140 | duration: 0.6, 141 | ease: 'power4', 142 | opacity: 0 143 | }) 144 | }); 145 | // Fades in the video/title when not hovering over the navigation 146 | workNav.addEventListener('mouseleave', () => { 147 | gsap.killTweensOf([video, title]); 148 | gsap.to([video, title], { 149 | duration: 0.6, 150 | ease: 'sine.in', 151 | opacity: 1 152 | }) 153 | }); 154 | } 155 | 156 | // Initialize the app once images are preloaded 157 | const init = () => { 158 | initEvents(); 159 | }; 160 | 161 | // Starts the initialization after preloading images 162 | preloadImages('.content__img-inner').then(() => { 163 | document.body.classList.remove('loading'); 164 | init(); 165 | }); 166 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /media/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/.DS_Store -------------------------------------------------------------------------------- /media/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/1.jpg -------------------------------------------------------------------------------- /media/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/10.jpg -------------------------------------------------------------------------------- /media/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/11.jpg -------------------------------------------------------------------------------- /media/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/12.jpg -------------------------------------------------------------------------------- /media/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/13.jpg -------------------------------------------------------------------------------- /media/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/14.jpg -------------------------------------------------------------------------------- /media/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/15.jpg -------------------------------------------------------------------------------- /media/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/2.jpg -------------------------------------------------------------------------------- /media/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/3.jpg -------------------------------------------------------------------------------- /media/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/4.jpg -------------------------------------------------------------------------------- /media/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/5.jpg -------------------------------------------------------------------------------- /media/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/6.jpg -------------------------------------------------------------------------------- /media/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/7.jpg -------------------------------------------------------------------------------- /media/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/8.jpg -------------------------------------------------------------------------------- /media/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/9.jpg -------------------------------------------------------------------------------- /media/beige1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/beige1.jpg -------------------------------------------------------------------------------- /media/beige2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/beige2.jpg -------------------------------------------------------------------------------- /media/bg-video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/bg-video.mp4 -------------------------------------------------------------------------------- /media/pink.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/pink.jpg -------------------------------------------------------------------------------- /media/red1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/red1.jpg -------------------------------------------------------------------------------- /media/red2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/HoverGrid/0a59474715182c0d0bc2219c48f9cdd4f570cf9b/media/red2.jpg --------------------------------------------------------------------------------