├── .DS_Store ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── css └── base.css ├── favicon.ico ├── img ├── .DS_Store ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── noise.png └── shadow.png ├── index.html ├── index2.html └── js ├── .DS_Store ├── ScrollTrigger.min.js ├── demo1 └── index.js ├── demo2 └── index.js ├── gsap.min.js ├── imagesloaded.pkgd.min.js ├── lenis.min.js └── utils.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/.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 - 2022 [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 | # Reflection Scroll 2 | 3 | A decorative reflection effect where we simulate a reflected page and scroll it along with the content. 4 | 5 | ![Reflection Scroll](https://tympanus.net/codrops/wp-content/uploads/2024/02/reflectionscroll_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=75702) 8 | 9 | [Demo](https://tympanus.net/Development/ReflectionScroll/) 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: [Twitter](http://www.twitter.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 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12px; 9 | --color-text: #2935ba; 10 | --color-bg: #1a0b37; 11 | --color-title: #9577cc; 12 | --color-link: #2935ba; 13 | --color-link-hover: #9577cc; 14 | --page-padding: 1rem; 15 | --rheight: 15vh; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | color: var(--color-text); 21 | font-family: "ouma-latin-variable", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 22 | font-variation-settings: "wght" 400; 23 | text-transform: uppercase; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | background: var(--color-bg); 27 | overflow-x: hidden; 28 | } 29 | 30 | body::before { 31 | content: ''; 32 | position: fixed; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: calc(var(--rheight) + 1px); 37 | pointer-events: none; 38 | z-index: 2000; 39 | background-image: linear-gradient(0deg, rgb(0 0 0 / 68%), rgb(15 10 23 / 62%)); 40 | box-shadow: 0px 0px 10vh rgba(0,0,0,0.8); 41 | } 42 | 43 | /* Page Loader */ 44 | .js .loading::before, 45 | .js .loading::after { 46 | content: ''; 47 | position: fixed; 48 | z-index: 1000; 49 | } 50 | 51 | .js .loading::before { 52 | top: 0; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | background: var(--color-bg); 57 | } 58 | 59 | .js .loading::after { 60 | top: 50%; 61 | left: 50%; 62 | width: 60px; 63 | height: 60px; 64 | margin: -30px 0 0 -30px; 65 | border-radius: 50%; 66 | opacity: 0.4; 67 | background: var(--color-link); 68 | animation: loaderAnim 0.7s linear infinite alternate forwards; 69 | 70 | } 71 | 72 | @keyframes loaderAnim { 73 | to { 74 | opacity: 1; 75 | transform: scale3d(0.5,0.5,1); 76 | } 77 | } 78 | 79 | a { 80 | text-decoration: underline; 81 | color: var(--color-link); 82 | outline: none; 83 | cursor: pointer; 84 | } 85 | 86 | a:hover { 87 | text-decoration: none; 88 | color: var(--color-link-hover); 89 | outline: none; 90 | } 91 | 92 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 93 | a:focus { 94 | /* Provide a fallback style for browsers 95 | that don't support :focus-visible */ 96 | outline: none; 97 | background: lightgrey; 98 | } 99 | 100 | a:focus:not(:focus-visible) { 101 | /* Remove the focus indicator on mouse-focus for browsers 102 | that do support :focus-visible */ 103 | background: transparent; 104 | } 105 | 106 | a:focus-visible { 107 | /* Draw a very noticeable focus style for 108 | keyboard-focus on browsers that do support 109 | :focus-visible */ 110 | outline: 2px solid red; 111 | background: transparent; 112 | } 113 | 114 | .unbutton { 115 | background: none; 116 | border: 0; 117 | padding: 0; 118 | margin: 0; 119 | font: inherit; 120 | cursor: pointer; 121 | } 122 | 123 | .unbutton:focus { 124 | outline: none; 125 | } 126 | 127 | .frame { 128 | padding: 1.5rem 2rem; 129 | display: grid; 130 | z-index: 1000; 131 | position: fixed; 132 | bottom: 0; 133 | left: 0; 134 | width: 100%; 135 | grid-row-gap: 1rem; 136 | grid-column-gap: 2rem; 137 | pointer-events: none; 138 | justify-items: start; 139 | grid-template-areas: 'title' 'prev' 'back' 'sub' 'sponsor' 'demos'; 140 | } 141 | 142 | .frame #cdawrap { 143 | justify-self: start; 144 | } 145 | 146 | .frame a { 147 | pointer-events: auto; 148 | } 149 | 150 | .frame__title { 151 | grid-area: title; 152 | font-size: inherit; 153 | margin: 0; 154 | } 155 | 156 | .frame__back { 157 | grid-area: back; 158 | justify-self: start; 159 | } 160 | 161 | .frame__prev { 162 | grid-area: prev; 163 | justify-self: start; 164 | } 165 | 166 | .frame__sub { 167 | grid-area: sub; 168 | } 169 | 170 | .frame__demos { 171 | grid-area: demos; 172 | display: flex; 173 | gap: 1rem; 174 | } 175 | 176 | .wrap { 177 | position: fixed; 178 | overflow: hidden; 179 | background: var(--color-bg); 180 | width: 100%; 181 | top: 0; 182 | box-shadow: 0 -25px 45px rgba(0,0,0,0.3); 183 | height: var(--rheight); 184 | transform: scaleY(-1); 185 | } 186 | 187 | .demo-2 .wrap { 188 | box-shadow: 0 -25px 45px rgba(0,0,0,0.15); 189 | } 190 | 191 | .content { 192 | position: relative; 193 | display: grid; 194 | grid-template-columns: repeat(auto-fit,minmax(200px,300px)); 195 | grid-column-gap: 10vw; 196 | grid-row-gap: 10vh; 197 | padding: 0 var(--page-padding) 60vh; 198 | width: 100%; 199 | margin: var(--rheight) auto 0; 200 | justify-content: center; 201 | align-items: start; 202 | background-image: url(../img/noise.png), radial-gradient(circle, rgb(38 3 130) 0%, rgb(14 3 33) 100%); 203 | background-size: 400px, 100% 100vh; 204 | background-attachment: fixed; 205 | } 206 | 207 | .demo-2 .content { 208 | justify-content: center; 209 | grid-template-columns: repeat(2,auto); 210 | grid-column-gap: 5vw; 211 | align-items: center; 212 | } 213 | 214 | .content--reflection { 215 | position: absolute; 216 | top: 0; 217 | margin: 0 auto; 218 | } 219 | 220 | .item { 221 | position: relative; 222 | margin: 0; 223 | aspect-ratio: 2/3; 224 | width: 100%; 225 | } 226 | 227 | .demo-2 .item { 228 | max-width: 300px; 229 | justify-self: center; 230 | align-self: center; 231 | aspect-ratio: 0.75; 232 | width: 100%; 233 | } 234 | 235 | .demo-1 .item { 236 | perspective: 1000px; 237 | transform-style: preserve-3d; 238 | } 239 | 240 | .item__inner { 241 | width: 100%; 242 | height: 100%; 243 | } 244 | 245 | .item__img { 246 | position: relative; 247 | overflow: hidden; 248 | display: grid; 249 | place-items: center; 250 | width: 100%; 251 | height: 100%; 252 | } 253 | 254 | .item__img-inner { 255 | position: relative; 256 | width: 100%; 257 | height: 100%; 258 | background-position: 50% 0%; 259 | background-size: cover; 260 | } 261 | 262 | .item__caption { 263 | display: grid; 264 | place-items: center; 265 | position: absolute; 266 | bottom: 0; 267 | left: 0; 268 | width: 100%; 269 | mix-blend-mode: plus-lighter; 270 | } 271 | 272 | .item__caption-title, 273 | .content__title { 274 | white-space: nowrap; 275 | font-size: inherit; 276 | margin: 0; 277 | font-size: clamp(1.5rem,8vw,3rem); 278 | text-transform: uppercase; 279 | } 280 | 281 | .item__caption-title { 282 | margin: 2rem 0; 283 | } 284 | 285 | .content__title { 286 | text-align: center; 287 | font-size: clamp(2rem,20vw,20rem); 288 | line-height: 0.5; 289 | text-transform: uppercase; 290 | grid-column: 1 / -1; 291 | width: 100%; 292 | color: var(--color-title); 293 | font-weight: 600; 294 | font-family: "ivymode", sans-serif; 295 | mix-blend-mode: overlay; 296 | display: flex; 297 | justify-content: center; 298 | } 299 | 300 | .content__title:not(:first-child) { 301 | margin: 10vh auto; 302 | } 303 | 304 | .item__caption-meta { 305 | margin: 0; 306 | } 307 | 308 | .credits { 309 | grid-column: 1 / -1; 310 | text-align: center; 311 | font-size: 1.25rem; 312 | } 313 | 314 | @media screen and (min-width: 53em) { 315 | body { 316 | --page-padding: 2rem; 317 | } 318 | .frame { 319 | grid-template-columns: auto auto 1fr 1fr; 320 | align-content: space-between; 321 | grid-template-areas: 'title back prev sponsor demos'; 322 | } 323 | .frame #cdawrap, .frame__sub { 324 | justify-self: end; 325 | } 326 | } 327 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/favicon.ico -------------------------------------------------------------------------------- /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/.DS_Store -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/1.jpg -------------------------------------------------------------------------------- /img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/10.jpg -------------------------------------------------------------------------------- /img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/11.jpg -------------------------------------------------------------------------------- /img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/12.jpg -------------------------------------------------------------------------------- /img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/13.jpg -------------------------------------------------------------------------------- /img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/14.jpg -------------------------------------------------------------------------------- /img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/15.jpg -------------------------------------------------------------------------------- /img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/16.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/7.jpg -------------------------------------------------------------------------------- /img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/8.jpg -------------------------------------------------------------------------------- /img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/9.jpg -------------------------------------------------------------------------------- /img/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/noise.png -------------------------------------------------------------------------------- /img/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/img/shadow.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reflection Scroll Effect | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Reflection Scroll

19 | Article 20 | Previous demo 21 | 25 |
26 |
27 |

Mosho

28 |
29 |
30 |
31 |
32 |
33 |
34 |

XJ9

35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |

ZQ8

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |

KRY

55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |

XVQ

65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |

JXW

75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |

LZM

85 |
86 |
87 |
88 |

Washo

89 |
90 |
91 |
92 |
93 |
94 |
95 |

WMR

96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |

PNY

106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |

QGF

116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |

FJT

126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |

BQZ

136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |

VXH

146 |
147 |
148 |
149 |

Umot

150 |
151 |
152 |
153 |
154 |
155 |
156 |

MXT

157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |

QSY

167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |

VBG

177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |

LYQ

187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |

XJ9

197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |

ZQ8

207 |
208 |
209 |
210 |

Mosho

211 |
212 |
213 |
214 |
215 |
216 |
217 |

XJ9

218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |

ZQ8

228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |

KRY

238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |

XVQ

248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |

JXW

258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |

LZM

268 |
269 |
270 |
271 |

Washo

272 |
273 |
274 |
275 |
276 |
277 |
278 |

WMR

279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |

PNY

289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |

QGF

299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |

FJT

309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |

BQZ

319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |

VXH

329 |
330 |
331 |
332 |

Umot

333 |
334 |
335 |
336 |
337 |
338 |
339 |

MXT

340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |

QSY

350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |

VBG

360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 |

LYQ

370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 |

XJ9

380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |

ZQ8

390 |
391 |
392 |
393 |
394 |

Made by @codrops

395 |

Subscribe to get the latest in frontend twice a week.

396 |
397 |
398 |
399 |
400 |

Mosho

401 |
402 |
403 |
404 |
405 |
406 |
407 |

XJ9

408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |

ZQ8

418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |

KRY

428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |

XVQ

438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |
446 |
447 |

JXW

448 |
449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 |

LZM

458 |
459 |
460 |
461 |

Washo

462 |
463 |
464 |
465 |
466 |
467 |
468 |

WMR

469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |
478 |

PNY

479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |

QGF

489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |

FJT

499 |
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507 |
508 |

BQZ

509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |

VXH

519 |
520 |
521 |
522 |

Umot

523 |
524 |
525 |
526 |
527 |
528 |
529 |

MXT

530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |

QSY

540 |
541 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |

VBG

550 |
551 |
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |

LYQ

560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |

XJ9

570 |
571 |
572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |

ZQ8

580 |
581 |
582 |
583 |

Mosho

584 |
585 |
586 |
587 |
588 |
589 |
590 |

XJ9

591 |
592 |
593 |
594 |
595 |
596 |
597 |
598 |
599 |
600 |

ZQ8

601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 |
610 |

KRY

611 |
612 |
613 |
614 |
615 |
616 |
617 |
618 |
619 |
620 |

XVQ

621 |
622 |
623 |
624 |
625 |
626 |
627 |
628 |
629 |
630 |

JXW

631 |
632 |
633 |
634 |
635 |
636 |
637 |
638 |
639 |
640 |

LZM

641 |
642 |
643 |
644 |

Washo

645 |
646 |
647 |
648 |
649 |
650 |
651 |

WMR

652 |
653 |
654 |
655 |
656 |
657 |
658 |
659 |
660 |
661 |

PNY

662 |
663 |
664 |
665 |
666 |
667 |
668 |
669 |
670 |
671 |

QGF

672 |
673 |
674 |
675 |
676 |
677 |
678 |
679 |
680 |
681 |

FJT

682 |
683 |
684 |
685 |
686 |
687 |
688 |
689 |
690 |
691 |

BQZ

692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
700 |
701 |

VXH

702 |
703 |
704 |
705 |

Umot

706 |
707 |
708 |
709 |
710 |
711 |
712 |

MXT

713 |
714 |
715 |
716 |
717 |
718 |
719 |
720 |
721 |
722 |

QSY

723 |
724 |
725 |
726 |
727 |
728 |
729 |
730 |
731 |
732 |

VBG

733 |
734 |
735 |
736 |
737 |
738 |
739 |
740 |
741 |
742 |

LYQ

743 |
744 |
745 |
746 |
747 |
748 |
749 |
750 |
751 |
752 |

XJ9

753 |
754 |
755 |
756 |
757 |
758 |
759 |
760 |
761 |
762 |

ZQ8

763 |
764 |
765 |
766 |
767 |
768 |
769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reflection Scroll Effect | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Reflection Scroll

19 | Article 20 | Previous demo 21 | 25 |
26 |
27 |

Asha

28 |
29 |
30 |
31 |
32 |
33 |

XJ9

34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |

ZQ8

42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |

KRY

50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |

XVQ

58 |
59 |
60 |

Wuth

61 |
62 |
63 |
64 |
65 |
66 |

JXW

67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |

LZM

75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |

WMR

83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |

PNY

91 |
92 |
93 |

Bist

94 |
95 |
96 |
97 |
98 |
99 |

QGF

100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |

FJT

108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |

BQZ

116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |

VXH

124 |
125 |
126 |

Roth

127 |
128 |
129 |
130 |
131 |
132 |

MXT

133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |

QSY

141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |

VBG

149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |

LYQ

157 |
158 |
159 |

Asha

160 |
161 |
162 |
163 |
164 |
165 |

XJ9

166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |

ZQ8

174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |

KRY

182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |

XVQ

190 |
191 |
192 |

Wuth

193 |
194 |
195 |
196 |
197 |
198 |

JXW

199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |

LZM

207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |

WMR

215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |

PNY

223 |
224 |
225 |

Bist

226 |
227 |
228 |
229 |
230 |
231 |

QGF

232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |

FJT

240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |

BQZ

248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |

VXH

256 |
257 |
258 |

Roth

259 |
260 |
261 |
262 |
263 |
264 |

MXT

265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |

QSY

273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |

VBG

281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |

LYQ

289 |
290 |
291 |
292 |

Made by @codrops

293 |

Subscribe to get the latest in frontend twice a week.

294 |
295 |
296 |
297 |
298 |

Asha

299 |
300 |
301 |
302 |
303 |
304 |

XJ9

305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |

ZQ8

313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |

KRY

321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |

XVQ

329 |
330 |
331 |

Wuth

332 |
333 |
334 |
335 |
336 |
337 |

JXW

338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |

LZM

346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |

WMR

354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |

PNY

362 |
363 |
364 |

Bist

365 |
366 |
367 |
368 |
369 |
370 |

QGF

371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |

FJT

379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |

BQZ

387 |
388 |
389 |
390 |
391 |
392 |
393 |
394 |

VXH

395 |
396 |
397 |

Roth

398 |
399 |
400 |
401 |
402 |
403 |

MXT

404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |

QSY

412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |

VBG

420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |

LYQ

428 |
429 |
430 |

Asha

431 |
432 |
433 |
434 |
435 |
436 |

XJ9

437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |

ZQ8

445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |

KRY

453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |

XVQ

461 |
462 |
463 |

Wuth

464 |
465 |
466 |
467 |
468 |
469 |

JXW

470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |

LZM

478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |

WMR

486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |

PNY

494 |
495 |
496 |

Bist

497 |
498 |
499 |
500 |
501 |
502 |

QGF

503 |
504 |
505 |
506 |
507 |
508 |
509 |
510 |

FJT

511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |

BQZ

519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |

VXH

527 |
528 |
529 |

Roth

530 |
531 |
532 |
533 |
534 |
535 |

MXT

536 |
537 |
538 |
539 |
540 |
541 |
542 |
543 |

QSY

544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |

VBG

552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |

LYQ

560 |
561 |
562 |
563 |
564 |
565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | -------------------------------------------------------------------------------- /js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ReflectionScroll/e89432e83b3be44cb958d7f0d9303d79708f5252/js/.DS_Store -------------------------------------------------------------------------------- /js/ScrollTrigger.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * ScrollTrigger 3.12.2 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2023, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership. 7 | * @author: Jack Doyle, jack@greensock.com 8 | */ 9 | 10 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;r=Math.abs(r)?t:r}function O(){(Ae=Se.core.globals().ScrollTrigger)&&Ae.core&&function _integrate(){var e=Ae.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,ze),n.push.apply(n,Ie),ze=t,Ie=n,i=function _bridge(e,t){return r[e](t)}}()}function P(e){return(Se=e||r())&&"undefined"!=typeof document&&document.body&&(Te=window,Pe=(Ce=document).documentElement,Me=Ce.body,t=[Te,Ce,Pe,Me],Se.utils.clamp,De=Se.core.context||function(){},Oe="onpointerenter"in Me?"pointer":"mouse",Ee=E.isTouch=Te.matchMedia&&Te.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Te||0=o,n=Math.abs(t)>=o;k&&(r||n)&&k(se,e,t,be,me),r&&(m&&0Math.abs(t)?"x":"y",ie=!0),"y"!==ae&&(be[2]+=e,se._vx.update(e,!0)),"x"!==ae&&(me[2]+=t,se._vy.update(t,!0)),n?ee=ee||requestAnimationFrame(bf):bf()}function ef(e){if(!_e(e,1)){var t=(e=M(e,s)).clientX,r=e.clientY,n=t-se.x,o=r-se.y,i=se.isDragging;se.x=t,se.y=r,(i||Math.abs(se.startX-t)>=a||Math.abs(se.startY-r)>=a)&&(h&&(re=!0),i||(se.isDragging=!0),df(n,o),i||p&&p(se))}}function hf(e){return e.touches&&1=e)return a[n];return a[n-1]}for(n=a.length,e+=r;n--;)if(a[n]<=e)return a[n];return a[0]}:function(e,t,r){void 0===r&&(r=.001);var n=i(e);return!t||Math.abs(n-e)r&&(n*=t/100),e=e.substr(0,r-1)),e=n+(e in q?q[e]*t:~e.indexOf("%")?parseFloat(e)*t/100:parseFloat(e)||0)}return e}function Bb(e,t,r,n,o,i,a,s){var l=o.startColor,c=o.endColor,u=o.fontSize,f=o.indent,d=o.fontWeight,p=Xe.createElement("div"),g=Ja(r)||"fixed"===z(r,"pinType"),h=-1!==e.indexOf("scroller"),v=g?We:r,b=-1!==e.indexOf("start"),m=b?l:c,y="border-color:"+m+";font-size:"+u+";color:"+m+";font-weight:"+d+";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";return y+="position:"+((h||s)&&g?"fixed;":"absolute;"),!h&&!s&&g||(y+=(n===He?D:I)+":"+(i+parseFloat(f))+"px;"),a&&(y+="box-sizing:border-box;text-align:left;width:"+a.offsetWidth+"px;"),p._isStart=b,p.setAttribute("class","gsap-marker-"+e+(t?" marker-"+t:"")),p.style.cssText=y,p.innerText=t||0===t?e+"-"+t:e,v.children[0]?v.insertBefore(p,v.children[0]):v.appendChild(p),p._offset=p["offset"+n.op.d2],H(p,0,n,b),p}function Gb(){return 34We.clientWidth)||(ze.cache++,v?k=k||requestAnimationFrame(Q):Q(),st||V("scrollStart"),st=at())}function Ib(){y=Ne.innerWidth,m=Ne.innerHeight}function Jb(){ze.cache++,je||h||Xe.fullscreenElement||Xe.webkitFullscreenElement||b&&y===Ne.innerWidth&&!(Math.abs(Ne.innerHeight-m)>.25*Ne.innerHeight)||c.restart(!0)}function Mb(){return vb(re,"scrollEnd",Mb)||Pt(!0)}function Pb(e){for(var t=0;tt)&&e.setPositions(e.start,Math.max(e.start+1,t),!0)}),r.forEach(function(e){return e&&e.render&&e.render(-1)}),ze.forEach(function(e){Ra(e)&&(e.smooth&&requestAnimationFrame(function(){return e.target.style.scrollBehavior="smooth"}),e.rec&&e(e.rec))}),Rb(_,1),c.pause(),Ct++,Q(rt=2),kt.forEach(function(e){return Ra(e.vars.onRefresh)&&e.vars.onRefresh(e)}),rt=re.isRefreshing=!1,V("refresh")}else ub(re,"scrollEnd",Mb)},j=0,Mt=1,Q=function _updateAll(e){if(!rt||2===e){re.isUpdating=!0,ot&&ot.update(0);var t=kt.length,r=at(),n=50<=r-T,o=t&&kt[0].scroll();if(Mt=o=F})},ke.update=function(e,t,r){if(!de||r||e){var n,o,i,a,s,l,c,u=!0===rt?re:ke.scroll(),f=e?0:(u-D)/N,d=f<0?0:1=Oa(be,he),fe)if(e||!n&&!l)lc(ae,V);else{var g=_t(ae,!0),h=u-D;lc(ae,We,g.top+(he===He?h:0)+xt,g.left+(he===He?0:h)+xt)}Et(n||l?W:G),Z&&d<1&&n||b(j+(1!==d||l?0:Q))}}else b(Ga(j+Q*d));!ue||A.tween||je||it||te.restart(!0),T&&(s||ce&&d&&(d<1||!tt))&&Ge(T.targets).forEach(function(e){return e.classList[n||ce?"add":"remove"](T.className)}),!k||ve||e||k(ke),a&&!je?(ve&&(c&&("complete"===i?O.pause().totalProgress(1):"reset"===i?O.restart(!0).pause():"restart"===i?O.restart(!0):O[i]()),k&&k(ke)),!s&&tt||(C&&s&&Va(ke,C),xe[o]&&Va(ke,xe[o]),ce&&(1===d?ke.kill(!1,1):xe[o]=0),s||xe[o=1===d?1:3]&&Va(ke,xe[o])),pe&&!n&&Math.abs(ke.getVelocity())>(Sa(pe)?pe:2500)&&(Ua(ke.callbackAnimation),ee?ee.progress(1):Ua(O,"reverse"===i?1:!d,1))):ve&&k&&!je&&k(ke)}if(x){var v=de?u/de.duration()*(de._caScrollDist||0):u;y(v+(q._isFlipped?1:0)),x(v)}S&&S(-u/de.duration()*(de._caScrollDist||0))}},ke.enable=function(e,t){ke.enabled||(ke.enabled=!0,ub(be,"resize",Jb),me||ub(be,"scroll",Hb),Te&&ub(ScrollTrigger,"refreshInit",Te),!1!==e&&(ke.progress=Oe=0,R=B=Me=Ae()),!1!==t&&ke.refresh())},ke.getTween=function(e){return e&&A?A.tween:ee},ke.setPositions=function(e,t,r,n){if(de){var o=de.scrollTrigger,i=de.duration(),a=o.end-o.start;e=o.start+a*e/i,t=o.start+a*t/i}ke.refresh(!1,!1,{start:Ba(e,r&&!!ke._startClamp),end:Ba(t,r&&!!ke._endClamp)},n),ke.update()},ke.adjustPinSpacing=function(e){if($&&e){var t=$.indexOf(he.d)+1;$[t]=parseFloat($[t])+e+xt,$[1]=parseFloat($[1])+e+xt,Et($)}},ke.disable=function(e,t){if(ke.enabled&&(!1!==e&&ke.revert(!0,!0),ke.enabled=ke.isActive=!1,t||ee&&ee.pause(),re=0,n&&(n.uncache=1),Te&&vb(ScrollTrigger,"refreshInit",Te),te&&(te.pause(),A.tween&&A.tween.kill()&&(A.tween=0)),!me)){for(var r=kt.length;r--;)if(kt[r].scroller===be&&kt[r]!==ke)return;vb(be,"resize",Jb),me||vb(be,"scroll",Hb)}},ke.kill=function(e,t){ke.disable(e,t),ee&&!t&&ee.kill(),a&&delete Tt[a];var r=kt.indexOf(ke);0<=r&&kt.splice(r,1),r===Qe&&0i&&(b()>i?a.progress(1)&&b(i):a.resetTo("scrollY",i))}Ta(e)||(e={}),e.preventDefault=e.isNormalizer=e.allowClicks=!0,e.type||(e.type="wheel,touch"),e.debounce=!!e.debounce,e.id=e.id||"normalizer";var n,i,l,o,a,c,u,s,f=e.normalizeScrollX,t=e.momentum,r=e.allowNestedScroll,d=e.onRelease,p=J(e.target)||Je,g=Le.core.globals().ScrollSmoother,h=g&&g.get(),v=R&&(e.content&&J(e.content)||h&&!1!==e.content&&!h.smooth()&&h.content()),b=K(p,He),m=K(p,qe),y=1,x=(E.isTouch&&Ne.visualViewport?Ne.visualViewport.scale*Ne.visualViewport.width:Ne.outerWidth)/Ne.innerWidth,_=0,w=Ra(t)?function(){return t(n)}:function(){return t||2.8},S=uc(p,e.type,!0,r),k=Fa,T=Fa;return v&&Le.set(v,{y:"+=0"}),e.ignoreCheck=function(e){return R&&"touchmove"===e.type&&function ignoreDrag(){if(o){requestAnimationFrame(rq);var e=Ga(n.deltaY/2),t=T(b.v-e);if(v&&t!==b.v+b.offset){b.offset=t-b.v;var r=Ga((parseFloat(v&&v._gsap.y)||0)-b.offset);v.style.transform="matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, "+r+", 0, 1)",v._gsap.y=r+"px",b.cacheID=ze.cache,Q()}return!0}b.offset&&vq(),o=!0}()||1.05=i||i-1<=r)&&Le.to({},{onUpdate:Bq,duration:o})}else s.restart(!0);d&&d(e)},e.onWheel=function(){a._ts&&a.pause(),1e3 { 15 | // Instantiate the Lenis object with specified properties 16 | lenis = new Lenis({ 17 | lerp: 0.2, // Lower values create a smoother scroll effect 18 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 19 | }); 20 | 21 | // Update ScrollTrigger each time the user scrolls 22 | lenis.on('scroll', () => ScrollTrigger.update); 23 | 24 | // Define a function to run at each animation frame 25 | const scrollFn = (time) => { 26 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 27 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 28 | 29 | // Update translateY property of .content--reflection based on scroll amount 30 | reflectionEl.style.transform = `translateY(${-lenis.actualScroll}px)`; 31 | }; 32 | // Start the animation frame loop 33 | requestAnimationFrame(scrollFn); 34 | }; 35 | 36 | // Function to handle scroll-triggered animations 37 | const scroll = () => { 38 | contentItems.forEach((item, pos) => { 39 | const reflectionItem = reflectionItems[pos]; 40 | 41 | gsap.timeline({ 42 | scrollTrigger: { 43 | trigger: item, 44 | start: 'top bottom', 45 | end: 'bottom top', 46 | scrub: true 47 | } 48 | }) 49 | .fromTo([item, reflectionItem], { 50 | transformOrigin: '50% 120%', 51 | filter: 'contrast(120%) brightness(100%)' 52 | }, { 53 | ease: 'power1.in', 54 | rotationX: 70, 55 | z: -300, 56 | scaleY: 0.8, 57 | filter: 'contrast(65%) brightness(30%)' 58 | }, 0) 59 | .fromTo([item.querySelector('.item__img-inner'), reflectionItem.querySelector('.item__img-inner')], { 60 | scale: 1 61 | }, { 62 | ease: 'sine.inOut', 63 | scale: 1.3 64 | }, 0); 65 | }); 66 | }; 67 | 68 | // Initialization function 69 | const init = () => { 70 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 71 | scroll(); // Apply scroll-triggered animations 72 | }; 73 | 74 | preloadImages('.item__img-inner').then(() => { 75 | // Once images are preloaded, remove the 'loading' indicator/class from the body 76 | document.body.classList.remove('loading'); 77 | init(); 78 | }); -------------------------------------------------------------------------------- /js/demo2/index.js: -------------------------------------------------------------------------------- 1 | // Importing utility function for preloading images 2 | import { preloadImages } from '../utils.js'; 3 | 4 | // Variable to store the Lenis smooth scrolling object 5 | let lenis; 6 | 7 | // Selecting DOM elements for content and reflection 8 | const contentEl = document.querySelector('.content'); 9 | const contentItems = [...contentEl.querySelectorAll('.item')]; 10 | const reflectionEl = document.querySelector('.content--reflection'); 11 | const reflectionItems = [...reflectionEl.querySelectorAll('.item')]; 12 | 13 | // Initializes Lenis for smooth scrolling with specific properties 14 | const initSmoothScrolling = () => { 15 | // Instantiate the Lenis object with specified properties 16 | lenis = new Lenis({ 17 | lerp: 0.2, // Lower values create a smoother scroll effect 18 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 19 | }); 20 | 21 | // Update ScrollTrigger each time the user scrolls 22 | lenis.on('scroll', () => ScrollTrigger.update); 23 | 24 | // Define a function to run at each animation frame 25 | const scrollFn = (time) => { 26 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 27 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 28 | 29 | // Update translateY property of .content--reflection based on scroll amount 30 | reflectionEl.style.transform = `translateY(${-lenis.actualScroll}px)`; 31 | }; 32 | // Start the animation frame loop 33 | requestAnimationFrame(scrollFn); 34 | }; 35 | 36 | // Function to handle scroll-triggered animations 37 | const scroll = () => { 38 | // Loop through each content item and set up animations 39 | contentItems.forEach((item, pos) => { 40 | 41 | // Selecting elements for each content item 42 | const itemImg = item.querySelector('.item__img'); 43 | const itemImgInner = itemImg.querySelector('.item__img-inner'); 44 | const itemCaption = item.querySelector('.item__caption'); 45 | 46 | // Selecting elements for each reflection item 47 | const reflectionItem = reflectionItems[pos]; 48 | const reflectionItemImg = reflectionItem.querySelector('.item__img'); 49 | const reflectionItemImgInner = reflectionItemImg.querySelector('.item__img-inner'); 50 | const reflectionItemCaption = reflectionItem.querySelector('.item__caption'); 51 | 52 | // Set up GSAP timeline for each content-reflection pair 53 | gsap.timeline({ 54 | scrollTrigger: { 55 | trigger: item, 56 | start: 'top bottom', 57 | scrub: true 58 | } 59 | }) 60 | // Animation for image and reflection image 61 | .fromTo([itemImg, reflectionItemImg], { 62 | filter: 'brightness(120%) blur(0px)', 63 | transformOrigin: '50% 100%' 64 | }, { 65 | ease: 'power3.in', 66 | filter: 'brightness(50%) blur(25px)', 67 | skewX: 3, 68 | borderRadius: 100, 69 | scaleY: 0, 70 | scaleX: 1.1, 71 | }, 0) 72 | .to([itemImg, reflectionItemImg], { 73 | ease: 'power4.in', 74 | skewY: -3 75 | }, 0) 76 | // Animation for image inner content 77 | .fromTo([itemImgInner, reflectionItemImgInner], { 78 | scale: 1 79 | }, { 80 | ease: 'none', 81 | scale: 2 82 | }, 0) 83 | // Animation for caption 84 | .to([itemCaption, reflectionItemCaption], { 85 | ease: 'power4.in', 86 | opacity: 0, 87 | scale: 0 88 | }, 0); 89 | }); 90 | }; 91 | 92 | // Initialization function 93 | const init = () => { 94 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 95 | scroll(); // Apply scroll-triggered animations 96 | }; 97 | 98 | // Preload images before initializing animations 99 | preloadImages('.item__img-inner').then(() => { 100 | // Once images are preloaded, remove the 'loading' indicator/class from the body 101 | document.body.classList.remove('loading'); 102 | init(); // Initialize animations after preloading 103 | }); 104 | -------------------------------------------------------------------------------- /js/gsap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * GSAP 3.12.2 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2023, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for Club GreenSock 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))&&Ee}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(Ot(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&&At(t,"onInterrupt"),t}function wb(t){if(x()&&t){var e=(t=!t.name&&t.default||t).name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:he,add:Qt,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(Ee,i,_e)}else t&&Ct.push(t)}function zb(t,e,r){return(6*(t+=t<0?1:1>16,e>>8&St,e&St]:0:Et.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[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=d=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*($(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 Zt?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=Zt.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||$(t)||Z(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!==c))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($(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,Wt,Qt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var c,d=t[e],p="get"!==i?i:s(d)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():d,_=s(d)?l?re:te:$t;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(c=ka(p,n)+(Ya(p)||0))&&0!==c||(n=c))),!f||p!==n||Wt)return isNaN(p*n)||""===n?(d||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,c,d,p,_=new _e(this._pt,t,e,0,1,ue,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(d=~(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++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?ka(c,l)-c:parseFloat(l)-c,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(C=u[l].sort(function(t,e){return t.t-e.t}),o=D=0;o=t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||L||(At(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),z.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i){d||Rt.wake(),this._ts||this.play();var n,a=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Gt(this,a),n=this._ease(a/this._dur),function _updatePropTweens(t,e,r,i,n,a,s){var o,u,h,l,f=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!f)for(f=t._ptCache[e]=[],h=t._ptLookup,l=t._targets.length;l--;){if((o=h[l][e])&&o.d&&o.d._pt)for(o=o.d._pt;o&&o.p!==e&&o.fp!==e;)o=o._next;if(!o)return Wt=1,t.vars[e]="+=0",Gt(t,s),Wt=0,1;f.push(o)}for(l=f.length;l--;)(o=(u=f[l])._pt||u).s=!i&&0!==i||n?o.s+(i||0)+a*o.c:i,o.c=r-o.s,u.e&&(u.e=ia(r)+Ya(u.e)),u.b&&(u.b=o.s+Ya(u.b))}(this,t,e,r,i,n,a)?this.resetTo(t,e,r,i):(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,c=t?Ot(t):f,d=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,c))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(~c.indexOf(f[l]))for(u in a=d[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(Zt.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){Zt[r]=function(){var t=new Xt,e=Mt.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 $t=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:$t},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||$t,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=Zt,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/lenis.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).Lenis=e()}(this,function(){function t(t,e){for(var i=0;i=1)?1:this.easing(s);this.value=this.from+(this.to-this.from)*r}null==(e=this.onUpdate)||e.call(this,this.value,{completed:n}),n&&this.stop()}},e.stop=function(){this.isRunning=!1},e.fromTo=function(t,e,i){var o=i.lerp,n=void 0===o?.1:o,s=i.duration,r=void 0===s?1:s,l=i.easing,h=void 0===l?function(t){return t}:l,a=i.onUpdate;this.from=this.value=t,this.to=e,this.lerp=n,this.duration=r,this.easing=h,this.currentTime=0,this.isRunning=!0,this.onUpdate=a},t}();function s(t,e){var i;return function(){var o=arguments,n=this;clearTimeout(i),i=setTimeout(function(){t.apply(n,o)},e)}}var r=/*#__PURE__*/function(){function t(t,e){var i=this;this.onWindowResize=function(){i.width=window.innerWidth,i.height=window.innerHeight},this.onWrapperResize=function(){i.width=i.wrapper.clientWidth,i.height=i.wrapper.clientHeight},this.onContentResize=function(){var t=i.wrapper===window?document.documentElement:i.wrapper;i.scrollHeight=t.scrollHeight,i.scrollWidth=t.scrollWidth},this.wrapper=t,this.content=e,this.wrapper===window?(window.addEventListener("resize",this.onWindowResize,!1),this.onWindowResize()):(this.wrapperResizeObserver=new ResizeObserver(s(this.onWrapperResize,100)),this.wrapperResizeObserver.observe(this.wrapper),this.onWrapperResize()),this.contentResizeObserver=new ResizeObserver(s(this.onContentResize,100)),this.contentResizeObserver.observe(this.content),this.onContentResize()}return t.prototype.destroy=function(){var t,e;window.removeEventListener("resize",this.onWindowResize,!1),null==(t=this.wrapperResizeObserver)||t.disconnect(),null==(e=this.contentResizeObserver)||e.disconnect()},e(t,[{key:"limit",get:function(){return{x:this.scrollWidth-this.width,y:this.scrollHeight-this.height}}}]),t}(),l=/*#__PURE__*/function(){function t(t,e){var i=this,n=e.wheelMultiplier,s=void 0===n?1:n,r=e.touchMultiplier,l=void 0===r?2:r,h=e.normalizeWheel,a=void 0!==h&&h;this.onTouchStart=function(t){var e=t.targetTouches?t.targetTouches[0]:t,o=e.clientY;i.touchStart.x=e.clientX,i.touchStart.y=o,i.lastDelta={x:0,y:0}},this.onTouchMove=function(t){var e=t.targetTouches?t.targetTouches[0]:t,o=e.clientX,n=e.clientY,s=-(o-i.touchStart.x)*i.touchMultiplier,r=-(n-i.touchStart.y)*i.touchMultiplier;i.touchStart.x=o,i.touchStart.y=n,i.lastDelta={x:s,y:r},i.emitter.emit("scroll",{type:"touch",deltaX:s,deltaY:r,event:t})},this.onTouchEnd=function(t){i.emitter.emit("scroll",{type:"touch",inertia:!0,deltaX:i.lastDelta.x,deltaY:i.lastDelta.y,event:t})},this.onWheel=function(t){var e=t.deltaX,n=t.deltaY;i.normalizeWheel&&(e=o(-100,e,100),n=o(-100,n,100)),i.emitter.emit("scroll",{type:"wheel",deltaX:e*=i.wheelMultiplier,deltaY:n*=i.wheelMultiplier,event:t})},this.element=t,this.wheelMultiplier=s,this.touchMultiplier=l,this.normalizeWheel=a,this.touchStart={x:null,y:null},this.emitter={events:{},emit:function(t){for(var e=this.events[t]||[],i=0,o=e.length;iMath.abs(s)?r:s:"horizontal"===e.options.gestureOrientation&&(c=s);var u=h&&e.options.syncTouch,p=h&&n&&Math.abs(c)>1;p&&(c=e.velocity*e.options.touchInertiaMultiplier),e.scrollTo(e.targetScroll+c,i({programmatic:!1},u&&{lerp:p?e.syncTouchLerp:.4}))}}},this.onScroll=function(){if(!e.isScrolling){var t=e.animatedScroll;e.animatedScroll=e.targetScroll=e.actualScroll,e.velocity=0,e.direction=Math.sign(e.animatedScroll-t),e.emit()}},s&&console.warn("Lenis: `direction` option is deprecated, use `orientation` instead"),h&&console.warn("Lenis: `gestureDirection` option is deprecated, use `gestureOrientation` instead"),a&&console.warn("Lenis: `mouseMultiplier` option is deprecated, use `wheelMultiplier` instead"),c&&console.warn("Lenis: `smooth` option is deprecated, use `smoothWheel` instead"),window.lenisVersion="1.0.11",p!==document.documentElement&&p!==document.body||(p=window),this.options={wrapper:p,content:v,wheelEventsTarget:f,smoothWheel:w,smoothTouch:y,syncTouch:b,syncTouchLerp:M,touchInertiaMultiplier:L,duration:W,easing:O,lerp:k,infinite:H,gestureOrientation:Y,orientation:D,touchMultiplier:P,wheelMultiplier:A,normalizeWheel:V},this.dimensions=new r(p,v),this.rootElement.classList.add("lenis"),this.velocity=0,this.isStopped=!1,this.isSmooth=w||y,this.isScrolling=!1,this.targetScroll=this.animatedScroll=this.actualScroll,this.animate=new n,this.emitter={events:{},emit:function(t){for(var e=this.events[t]||[],i=0,o=e.length;i0&&e<0||t<0&&e>0)&&(e+=t),e):this.animatedScroll;var t,e}},{key:"progress",get:function(){return 0===this.limit?1:this.scroll/this.limit}},{key:"isSmooth",get:function(){return this.__isSmooth},set:function(t){this.__isSmooth!==t&&(this.rootElement.classList.toggle("lenis-smooth",t),this.__isSmooth=t)}},{key:"isScrolling",get:function(){return this.__isScrolling},set:function(t){this.__isScrolling!==t&&(this.rootElement.classList.toggle("lenis-scrolling",t),this.__isScrolling=t)}},{key:"isStopped",get:function(){return this.__isStopped},set:function(t){this.__isStopped!==t&&(this.rootElement.classList.toggle("lenis-stopped",t),this.__isStopped=t)}}]),t}();return h}); -------------------------------------------------------------------------------- /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 | 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 | // Exporting utility functions for use in other modules. 15 | export { 16 | preloadImages 17 | }; --------------------------------------------------------------------------------