├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg └── 7.jpg ├── index.html └── js ├── Flip.min.js ├── ScrollTrigger.min.js ├── gsap.min.js ├── index.js ├── item.js ├── lenis.min.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 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 | # On-Scroll SVG Filter Effect 2 | 3 | Combining GSAP's Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani. 4 | 5 | ![On-Scroll SVG Filter Effects](https://tympanus.net/codrops/wp-content/uploads/2023/07/onscrollfilter_feat-1.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=72802) 8 | 9 | [Demo](http://tympanus.net/Development/OnScrollFilter/) 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: 16px; 9 | --color-text: #fff; 10 | --color-bg: #000; 11 | --color-bg-alt: hsl(15deg 55% 6%); 12 | --color-link: rgba(255,255,255,0.5); 13 | --color-link-hover: #fff; 14 | --color-title: #e93f33; 15 | } 16 | 17 | body { 18 | margin: 0; 19 | color: var(--color-text); 20 | background-color: var(--color-bg); 21 | font-family: "tenon", sans-serif; 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | margin-bottom: 50vh; 25 | overflow-x: hidden; 26 | } 27 | 28 | /* Page Loader */ 29 | .js .loading::before, 30 | .js .loading::after { 31 | content: ''; 32 | position: fixed; 33 | z-index: 1000; 34 | } 35 | 36 | .js .loading::before { 37 | top: 0; 38 | left: 0; 39 | width: 100%; 40 | height: 100%; 41 | background: var(--color-bg); 42 | } 43 | 44 | .js .loading::after { 45 | top: 50%; 46 | left: 50%; 47 | width: 60px; 48 | height: 60px; 49 | margin: -30px 0 0 -30px; 50 | border-radius: 50%; 51 | opacity: 0.4; 52 | background: var(--color-link); 53 | animation: loaderAnim 0.7s linear infinite alternate forwards; 54 | } 55 | 56 | @keyframes loaderAnim { 57 | to { 58 | opacity: 1; 59 | transform: scale3d(0.5,0.5,1); 60 | } 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | color: var(--color-link); 66 | outline: none; 67 | cursor: pointer; 68 | } 69 | 70 | a:hover { 71 | color: var(--color-link-hover); 72 | outline: none; 73 | } 74 | 75 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 76 | a:focus { 77 | /* Provide a fallback style for browsers 78 | that don't support :focus-visible */ 79 | outline: none; 80 | background: lightgrey; 81 | } 82 | 83 | a:focus:not(:focus-visible) { 84 | /* Remove the focus indicator on mouse-focus for browsers 85 | that do support :focus-visible */ 86 | background: transparent; 87 | } 88 | 89 | a:focus-visible { 90 | /* Draw a very noticeable focus style for 91 | keyboard-focus on browsers that do support 92 | :focus-visible */ 93 | outline: 2px solid red; 94 | background: transparent; 95 | } 96 | 97 | .unbutton { 98 | background: none; 99 | border: 0; 100 | padding: 0; 101 | margin: 0; 102 | font: inherit; 103 | cursor: pointer; 104 | } 105 | 106 | .unbutton:focus { 107 | outline: none; 108 | } 109 | 110 | .frame { 111 | position: relative; 112 | width: 100%; 113 | padding: 1rem; 114 | display: grid; 115 | grid-template-columns: 100%; 116 | grid-template-areas: 'back' 'prev' 'sponsor'; 117 | grid-gap: 0.5rem; 118 | justify-items: start; 119 | align-self: start; 120 | justify-self: start; 121 | pointer-events: none; 122 | align-items: center; 123 | text-transform: uppercase; 124 | font-size: 0.85rem; 125 | background: var(--color-bg-alt); 126 | } 127 | 128 | body #cdawrap { 129 | justify-self: start; 130 | } 131 | 132 | .frame a { 133 | pointer-events: auto; 134 | } 135 | 136 | .frame a:not(.frame__title-back) { 137 | white-space: nowrap; 138 | overflow: hidden; 139 | position: relative; 140 | } 141 | 142 | .frame a:not(.frame__title-back)::before { 143 | content: ''; 144 | height: 1px; 145 | width: 100%; 146 | background: currentColor; 147 | position: absolute; 148 | top: 90%; 149 | transition: transform 0.3s; 150 | transform-origin: 0% 50%; 151 | } 152 | 153 | .frame a:not(.frame__title-back):hover::before { 154 | transform: scaleX(0); 155 | transform-origin: 100% 50%; 156 | } 157 | 158 | .frame__title { 159 | grid-area: title; 160 | display: flex; 161 | } 162 | 163 | .frame__title-main { 164 | font-size: inherit; 165 | margin: 0; 166 | font-weight: inherit; 167 | } 168 | 169 | .frame__title-back { 170 | position: relative; 171 | display: flex; 172 | align-items: flex-end; 173 | margin-bottom: 0.15rem; 174 | } 175 | 176 | .frame__title-back span { 177 | display: none; 178 | } 179 | 180 | .frame__title-back svg { 181 | fill: currentColor; 182 | } 183 | 184 | .frame__prev { 185 | grid-area: prev; 186 | } 187 | 188 | .frame__credits { 189 | grid-area: credits; 190 | } 191 | 192 | .intro { 193 | height: calc(100vh - 3rem); 194 | text-align: center; 195 | place-items: center; 196 | display: grid; 197 | margin-bottom: 30vh; 198 | background: linear-gradient(0deg, transparent, var(--color-bg-alt)); 199 | } 200 | 201 | .intro__title { 202 | place-items: center; 203 | margin: 0; 204 | line-height: .9; 205 | display: grid; 206 | margin-top: 15vh; 207 | font-weight: 400; 208 | } 209 | 210 | .intro__title-pre { 211 | font-family: "stinger-variable", sans-serif; 212 | font-variation-settings: "wdth" 140, "wght" 300; 213 | font-weight: 300; 214 | font-size: clamp(2rem,10vw,5rem); 215 | color: var(--color-title); 216 | } 217 | 218 | .intro__title-sub { 219 | font-size: 1.5rem; 220 | margin: 1rem 0; 221 | } 222 | 223 | .intro__info { 224 | max-width: 15ch; 225 | opacity: .6; 226 | margin-bottom: 4rem; 227 | padding-bottom: 1rem; 228 | line-height: 1.2; 229 | position: relative; 230 | align-self: end; 231 | } 232 | 233 | .intro__info::after { 234 | content: ""; 235 | width: 1px; 236 | height: 2rem; 237 | background: #fff; 238 | position: absolute; 239 | top: 100%; 240 | left: 50%; 241 | } 242 | 243 | .content__title { 244 | margin-top: 40vh; 245 | } 246 | 247 | .credits { 248 | font-size: 1.5rem; 249 | text-align: center; 250 | margin: 50vh auto 0; 251 | } 252 | 253 | .card-wrap { 254 | margin-top: 5vh; 255 | display: grid; 256 | grid-gap: 2rem; 257 | grid-auto-flow: row; 258 | grid-template-columns: 250px; 259 | } 260 | 261 | .card__image { 262 | display: block; 263 | border-radius: 7px; 264 | background-size: cover; 265 | background-position: 50% 50%; 266 | width: 100%; 267 | height: auto; 268 | aspect-ratio: 4 / 3; 269 | filter: brightness(0.8); 270 | } 271 | 272 | .content-wrap { 273 | display: grid; 274 | place-items: center; 275 | grid-template-areas: 'main'; 276 | } 277 | 278 | .content { 279 | grid-area: main; 280 | display: grid; 281 | place-items: center; 282 | line-height: 1.2; 283 | grid-template-areas: 'content'; 284 | } 285 | 286 | .content-wrap .content:first-child { 287 | height: 100vh; 288 | } 289 | 290 | .content--layout { 291 | grid-template-areas: 'title-up title-down' 292 | 'img img' 293 | 'text text'; 294 | grid-template-columns: 1fr 1fr; 295 | gap: 1rem; 296 | } 297 | 298 | .content__img { 299 | grid-area: img; 300 | max-width: 50%; 301 | height: auto; 302 | } 303 | 304 | .content__img--1 { 305 | aspect-ratio: 896/1344; 306 | } 307 | 308 | .content__img--2 { 309 | aspect-ratio: 1000/450; 310 | } 311 | 312 | .content__img--3 { 313 | aspect-ratio: 1000/560; 314 | } 315 | 316 | .content__img--4 { 317 | aspect-ratio: 1400/560; 318 | } 319 | 320 | .content__img--5 { 321 | aspect-ratio: 680/920; 322 | } 323 | 324 | .content__img--6 { 325 | aspect-ratio: 1; 326 | } 327 | 328 | .content__img--7 { 329 | aspect-ratio: 1400/560; 330 | } 331 | 332 | .title-wrap { 333 | display: flex; 334 | gap: 1em; 335 | align-items: center; 336 | justify-content: center; 337 | } 338 | 339 | .title { 340 | padding-top: 0.3em; 341 | line-height: 0.525; 342 | font-size: 2rem; 343 | font-family: "stinger-variable", sans-serif; 344 | font-variation-settings: "wdth" 140, "wght" 150; 345 | font-weight: 300; 346 | position: relative; 347 | z-index: 100; 348 | text-indent: -0.1em; 349 | } 350 | 351 | .title--up { 352 | grid-area: title-up; 353 | font-style: italic; 354 | 355 | } 356 | 357 | .title--down { 358 | grid-area: title-down; 359 | font-variation-settings: "wdth" 140, "wght" 350; 360 | } 361 | 362 | .content__text { 363 | grid-area: text; 364 | text-transform: uppercase; 365 | margin: 0; 366 | opacity: 0.5; 367 | } 368 | 369 | @media screen and (min-width: 53em) { 370 | .frame { 371 | grid-template-columns: auto auto 1fr; 372 | grid-template-areas: 'back prev sponsor'; 373 | justify-items: start; 374 | grid-gap: 2rem; 375 | } 376 | 377 | .frame__prev { 378 | justify-self: end; 379 | } 380 | 381 | .title { 382 | font-size: clamp(2rem,15vw,9rem); 383 | } 384 | 385 | .content-wrap:not(:last-child) { 386 | margin-bottom: 30vmax; 387 | } 388 | 389 | .content__img { 390 | max-width: none; 391 | } 392 | 393 | .content__img--1 { 394 | height: auto; 395 | width: 100%; 396 | max-width: 100%; 397 | max-height: 100vh; 398 | } 399 | 400 | .content__img--2 { 401 | width: 60vw; 402 | } 403 | 404 | .content__img--3 { 405 | width: 30vw; 406 | align-self: center; 407 | } 408 | 409 | .content__img--4 { 410 | width: 100%; 411 | align-self: center; 412 | } 413 | 414 | .content__img--5 { 415 | height: auto; 416 | width: 100%; 417 | max-width: 100%; 418 | max-height: 100vh; 419 | } 420 | 421 | .content__img--6 { 422 | max-width: 100%; 423 | } 424 | 425 | .content__img--7 { 426 | width: 100%; 427 | align-self: center; 428 | } 429 | 430 | .content--layout-1 { 431 | grid-template-areas: 'title-up img ...' 432 | 'text img title-down'; 433 | grid-template-columns: 30% auto 30%; 434 | grid-template-rows: 1fr 1fr; 435 | column-gap: 2vw; 436 | } 437 | 438 | .content--layout-2 { 439 | grid-template-areas: 'title-up ...' 440 | 'img img' 441 | 'text title-down'; 442 | grid-template-columns: auto auto; 443 | justify-content: center; 444 | row-gap: 3vh; 445 | } 446 | 447 | .content--layout-3 { 448 | grid-template-areas: 'title-up img title-down' 449 | 'text text text'; 450 | grid-template-columns: 20vw auto 20vw; 451 | grid-template-rows: auto auto; 452 | row-gap: 10vh; 453 | column-gap: 2vw; 454 | justify-content: center; 455 | align-content: center; 456 | } 457 | 458 | .content--layout-4 { 459 | width: 100%; 460 | grid-template-areas: 'title-up' 461 | 'img' 462 | 'title-down' 463 | 'text'; 464 | grid-template-columns: 1fr; 465 | justify-content: center; 466 | row-gap: 4vh; 467 | } 468 | 469 | .content--layout-5 { 470 | grid-template-areas: 'title-up img ...' 471 | 'text img title-down'; 472 | grid-template-columns: 30% auto 30%; 473 | grid-template-rows: 1fr 1fr; 474 | column-gap: 3vw; 475 | } 476 | 477 | .content--layout-6 { 478 | grid-template-areas: 'title-up img' 479 | 'title-down img' 480 | 'text img'; 481 | grid-template-columns: 1fr 50%; 482 | grid-template-rows: auto auto 1fr; 483 | column-gap: 3vw; 484 | row-gap: 0; 485 | } 486 | 487 | .content--layout-7 { 488 | width: 100%; 489 | grid-template-areas: 'img img img img' 490 | '... text title-up ...' 491 | '... text title-down ...'; 492 | grid-template-columns: 10vw 1fr 1fr 10vw; 493 | justify-content: center; 494 | row-gap: 4vh; 495 | } 496 | 497 | .title--up { 498 | justify-self: end; 499 | align-self: start; 500 | } 501 | 502 | .content--layout-2 .title--up { 503 | justify-self: start; 504 | } 505 | 506 | .content--layout-3 .title--up { 507 | justify-self: end; 508 | align-self: center; 509 | } 510 | 511 | .content--layout-4 .title--up { 512 | justify-self: center; 513 | } 514 | 515 | .content--layout-6 .title--up { 516 | justify-self: end; 517 | align-self: start; 518 | } 519 | 520 | .content--layout-7 .title--up { 521 | justify-self: start; 522 | } 523 | 524 | .title--down { 525 | justify-self: start; 526 | align-self: end; 527 | } 528 | 529 | .content--layout-2 .title--down { 530 | justify-self: end; 531 | align-self: start; 532 | margin-top: -0.1em; 533 | } 534 | 535 | .content--layout-3 .title--down { 536 | align-self: center; 537 | } 538 | 539 | .content--layout-4 .title--down { 540 | justify-self: center; 541 | } 542 | 543 | .content--layout-6 .title--down { 544 | justify-self: end; 545 | align-self: start; 546 | } 547 | 548 | .content--layout-2 .content__text { 549 | align-self: start; 550 | justify-self: start; 551 | max-width: 400px; 552 | } 553 | 554 | .content--layout-1 .content__text { 555 | max-width: 250px; 556 | text-align: right; 557 | justify-self: end; 558 | align-self: end; 559 | } 560 | 561 | .content--layout-3 .content__text { 562 | column-count: 2; 563 | column-gap: 4vw; 564 | max-width: 590px; 565 | text-align: justify; 566 | } 567 | 568 | .content--layout-4 .content__text { 569 | text-align: center; 570 | max-width: 400px; 571 | margin-top: 3rem; 572 | } 573 | 574 | .content--layout-5 .content__text { 575 | max-width: 250px; 576 | text-align: right; 577 | justify-self: end; 578 | align-self: end; 579 | } 580 | 581 | .content--layout-6 .content__text { 582 | max-width: 250px; 583 | justify-self: end; 584 | align-self: end; 585 | text-align: right; 586 | } 587 | 588 | .content--layout-7 .content__text { 589 | max-width: 250px; 590 | justify-self: start; 591 | align-self: start; 592 | text-align: right; 593 | } 594 | 595 | .card-wrap { 596 | grid-template-columns: repeat(3,250px); 597 | } 598 | 599 | body #cdawrap { 600 | justify-self: end; 601 | } 602 | 603 | } 604 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/favicon.ico -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/img/1.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollFilter/3271b3fac95df7bd224da0c6a5860e48441f17ad/img/7.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | On-Scroll Filter Effects | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | Back to the article 21 | Previous demo 22 |
23 |
24 |

25 | On-Scroll Filter Effect 26 | Based on this demo by Fabio Ottaviani 27 |

28 | Scroll moderately to fully experience the animations 29 |
30 |
31 |
32 |
33 | Foot 34 | Print 35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |

As darkness cloaked the forsaken city, the crew huddled together, their eyes darting nervously into the murky abyss.

51 |
52 |
53 |
54 |
55 |
56 | Storm 57 | Born 58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |

The skies above were tinged with an otherworldly hue, casting an eerie glow on the jagged rock formations below.

75 |
76 |
77 |
78 |
79 |
80 | Hind 81 | Sight 82 |
83 |
84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |

The Forbidden Planet was not merely an ancient world lost to time—it was a prison, a gateway to realms beyond their understanding. They had unwittingly set loose a force that threatened not only their lives but the very fabric of the universe itself. The desert planet, a riddle waiting to be unraveled, held its secrets close, leaving the crew with a lingering sense of awe and dread, a constant reminder of their insignificance in the face of an unforgiving universe.

98 |
99 |
100 |
101 |
102 |
103 | Heart 104 | Ache 105 |
106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |

Sandstorms raged across the barren landscape, their fury obscuring the horizon and leaving a veil of gritty particles that stung the skin. The sun, a distant orb of fiery intensity, cast an unforgiving glare that scorched the unforgiving land.

121 |
122 |
123 |
124 |
125 |
126 | Night 127 | Fall 128 |
129 |
130 |
131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 |

From the shadows, strange shapes began to emerge, haunting figures that seemed to materialize from the very fabric of the night.

144 |
145 |
146 |
147 |
148 |
149 | Fire 150 | Storm 151 |
152 |
153 |
154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 |

Visions of a vibrant world, once teeming with life, flickered in her mind's eye, only to be devoured by the relentless sands of time.

168 |
169 |
170 |
171 |
172 |
173 | Star 174 | Light 175 |
176 |
177 |
178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |

The desert world had claimed another fragment of history, another chapter buried beneath the sands of oblivion.

191 |
192 |
193 |
194 |

More you might like

195 |
196 |
197 | 198 |

Ideas for Grid to Slideshow Switch Animations

199 |
200 |
201 | 202 |

Ideas for Grid to Slideshow Switch Animations

203 |
204 |
205 | 206 |

Smooth Panel Scroll Effects

207 |
208 |
209 |
210 |

Made by @codrops

211 |
212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | -------------------------------------------------------------------------------- /js/Flip.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Flip 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 p(t){var e=t.ownerDocument||t;!(w in t.style)&&"msTransform"in t.style&&(k=(w="msTransform")+"Origin");for(;e.parentNode&&(e=e.parentNode););if(y=window,d=new M,e){r=(g=e).documentElement,b=e.body,(a=g.createElementNS("http://www.w3.org/2000/svg","g")).style.transform="none";var i=e.createElement("div"),n=e.createElement("div");b.appendChild(i),i.appendChild(n),i.style.position="static",i.style[w]="translate3d(0,0,1px)",m=n.offsetParent!==i,b.removeChild(i)}return e}function t(){return y.pageYOffset||g.scrollTop||r.scrollTop||b.scrollTop||0}function u(){return y.pageXOffset||g.scrollLeft||r.scrollLeft||b.scrollLeft||0}function v(t){return t.ownerSVGElement||("svg"===(t.tagName+"").toLowerCase()?t:null)}function x(t,e){if(t.parentNode&&(g||p(t))){var i=v(t),n=i?i.getAttribute("xmlns")||"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",r=i?e?"rect":"g":"div",a=2!==e?0:100,s=3===e?100:0,o="position:absolute;display:block;pointer-events:none;margin:0;padding:0;",l=g.createElementNS?g.createElementNS(n.replace(/^https/,"http"),r):g.createElement(r);return e&&(i?(f=f||x(t),l.setAttribute("width",.01),l.setAttribute("height",.01),l.setAttribute("transform","translate("+a+","+s+")"),f.appendChild(l)):(c||((c=x(t)).style.cssText=o),l.style.cssText=o+"width:0.1px;height:0.1px;top:"+s+"px;left:"+a+"px",c.appendChild(l))),l}throw"Need document and parent."}function z(t){var e,i=t.getCTM();return i||(e=t.style[w],t.style[w]="none",t.appendChild(a),i=a.getCTM(),t.removeChild(a),e?t.style[w]=e:t.style.removeProperty(w.replace(/([A-Z])/g,"-$1").toLowerCase())),i||d.clone()}function A(t,e){var i,n,r,a,s,o,l=v(t),u=t===l,p=l?C:E,h=t.parentNode;if(t===y)return t;if(p.length||p.push(x(t,1),x(t,2),x(t,3)),i=l?f:c,l)u?(a=-(r=z(t)).e/r.a,s=-r.f/r.d,n=d):t.getBBox?(r=t.getBBox(),a=(n=(n=t.transform?t.transform.baseVal:{}).numberOfItems?1=o;t&&!n&&ha(H,!x),L&&X(e,L,t?"remove":"add")})},k&&(S=H.filter(function(t){return!t.sd&&!t.a.isVisible&&t.b.isVisible}).map(function(t){return t.a.element})),tt?(S&&(y=tt._abs).push.apply(y,ka(H,S)),tt._run.push(m)):(S&&la(ka(H,S)),m());var K=tt?tt.timeline:R;return K.revert=function(){return lt(K,1,1)},K}function Da(t){for(var e,i=t.idLookup={},n=t.alt={},r=t.elementStates,a=r.length;a--;)i[(e=r[a]).id]?n[e.id]=e:i[e.id]=e}var I,Q,tt,s,o,P,T,l,n,h=1,F={},O=180/Math.PI,N=Math.PI/180,D={},Y={},et={},it=S("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),nt=S("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),rt={zIndex:1,kill:1,simple:1,spin:1,clearProps:1,targets:1,toggleClass:1,onComplete:1,onUpdate:1,onInterrupt:1,onStart:1,delay:1,repeat:1,repeatDelay:1,yoyo:1,scale:1,fade:1,absolute:1,props:1,onEnter:1,onLeave:1,custom:1,paused:1,nested:1,prune:1,absoluteOnLeave:1},at={zIndex:1,simple:1,clearProps:1,scale:1,absolute:1,fitChild:1,getVars:1,props:1},st={},R="paddingTop,paddingRight,paddingBottom,paddingLeft,gridArea,transition".split(","),j=function _parseElementState(t,e,i,n){return t instanceof pt?t:t instanceof ut?function _findElStateInState(t,e){return e&&t.idLookup[j(e).id]||t.elementStates[0]}(t,n):new pt("string"==typeof t?V(t)||console.warn(t+" not found"):t,e,i)},ot=function _fit(t,e,i,n,r,a){var s,o,l,u,p,h,c,f=t.element,d=t.cache,m=t.parent,g=t.x,v=t.y,y=e.width,x=e.height,b=e.scaleX,w=e.scaleY,S=e.rotation,k=e.bounds,_=a&&T&&T(f,"transform"),C=t,V=e.matrix,E=V.e,M=V.f,B=t.bounds.width!==k.width||t.bounds.height!==k.height||t.scaleX!==b||t.scaleY!==w||t.rotation!==S,F=!B&&t.simple&&e.simple&&!r;return F||!m?(b=w=1,S=s=0):(h=(p=function _getInverseGlobalMatrix(t){var e=t._gsap||Q.core.getCache(t);return e.gmCache===Q.ticker.frame?e.gMatrix:(e.gmCache=Q.ticker.frame,e.gMatrix=getGlobalMatrix(t,!0,!1,!0))}(m)).clone().multiply(e.ctm?e.matrix.clone().multiply(e.ctm):e.matrix),S=W(Math.atan2(h.b,h.a)*O),s=W(Math.atan2(h.c,h.d)*O+S)%360,b=Math.sqrt(Math.pow(h.a,2)+Math.pow(h.b,2)),w=Math.sqrt(Math.pow(h.c,2)+Math.pow(h.d,2))*Math.cos(s*N),r&&(r=I(r)[0],u=Q.getProperty(r),c=r.getBBox&&"function"==typeof r.getBBox&&r.getBBox(),C={scaleX:u("scaleX"),scaleY:u("scaleY"),width:c?c.width:Math.ceil(parseFloat(u("width","px"))),height:c?c.height:parseFloat(u("height","px"))}),d.rotation=S+"deg",d.skewX=s+"deg"),i?(b*=y!==C.width&&C.width?y/C.width:1,w*=x!==C.height&&C.height?x/C.height:1,d.scaleX=b,d.scaleY=w):(y=P(y*b/C.scaleX,0),x=P(x*w/C.scaleY,0),f.style.width=y+"px",f.style.height=x+"px"),n&&pa(f,e.props),F||!m?(g+=E-t.matrix.e,v+=M-t.matrix.f):B||m!==e.parent?(d.renderTransform(1,d),h=getGlobalMatrix(r||f,!1,!1,!0),o=p.apply({x:h.e,y:h.f}),g+=(l=p.apply({x:E,y:M})).x-o.x,v+=l.y-o.y):(p.e=p.f=0,g+=(l=p.apply({x:E-t.matrix.e,y:M-t.matrix.f})).x,v+=l.y),g=P(g,.02),v=P(v,.02),!a||a instanceof pt?(d.x=g+"px",d.y=v+"px",d.renderTransform(1,d)):_&&_.revert(),a&&(a.x=g,a.y=v,a.rotation=S,a.skewX=s,i?(a.scaleX=b,a.scaleY=w):(a.width=y,a.height=x)),a||d},G=[],H="width,height,overflowX,overflowY".split(","),lt=function _killFlip(t,e,i){if(t&&t.progress()<1&&(!t.paused()||i))return e&&(function _interrupt(t){t.vars.onInterrupt&&t.vars.onInterrupt.apply(t,t.vars.onInterruptParams||[]),t.getChildren(!0,!1,!0).forEach(_interrupt)}(t),e<2&&t.progress(1),t.kill()),!0},ut=((n=FlipState.prototype).update=function update(t){var e=this;return this.elementStates=this.targets.map(function(t){return new pt(t,e.props,e.simple)}),Da(this),this.interrupt(t),this.recordInlineStyles(),this},n.clear=function clear(){return this.targets.length=this.elementStates.length=0,Da(this),this},n.fit=function fit(t,e,i){for(var n,r,a=ea(this.elementStates.slice(0),!1,!0),s=(t||this).idLookup,o=0;o=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(),1e3a;)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 { 10 | // Instantiate the Lenis object with specified properties 11 | lenis = new Lenis({ 12 | lerp: 0.1, // Lower values create a smoother scroll effect 13 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 14 | }); 15 | 16 | // Update ScrollTrigger each time the user scrolls 17 | lenis.on('scroll', () => ScrollTrigger.update()); 18 | 19 | // Define a function to run at each animation frame 20 | const scrollFn = (time) => { 21 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 22 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 23 | }; 24 | // Start the animation frame loop 25 | requestAnimationFrame(scrollFn); 26 | }; 27 | 28 | // Start preloading fonts 29 | preloadFonts('qsy7khk').then(() => { 30 | // Once fonts are loaded, remove the 'loading' class from the body, ending the loading state 31 | document.body.classList.remove('loading'); 32 | // Initialize smooth scrolling 33 | initSmoothScrolling(); 34 | // Select all elements with the class 'content-wrap', and for each, create a new instance of the Item class 35 | [...document.querySelectorAll('.content-wrap')].forEach(element => { 36 | new Item(element); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /js/item.js: -------------------------------------------------------------------------------- 1 | export class Item { 2 | // Initialize DOM and style related properties 3 | // Various elements within this item 4 | DOM = { 5 | // Main DOM element 6 | el: null, 7 | // .title-wrap element 8 | titleWrap: null, 9 | // .title--up 10 | titleUp: null, 11 | // .title--down 12 | titleDown: null, 13 | // .content elements 14 | content: null, 15 | // svg element 16 | svg: null, 17 | // This is the mask element, it can be either a circle or a path SVG element. 18 | // We will be animating the 'radius' attribute for circle or the 'd' attribute for path. 19 | mask: null, 20 | // image element 21 | image: null, 22 | }; 23 | // flipstate saves the current state of title elements 24 | flipstate = null; 25 | 26 | /** 27 | * Sets up the necessary elements and data for an Item instance. 28 | * @param {HTMLElement} DOM_el - The DOM element that represents the item. 29 | */ 30 | constructor(DOM_el) { 31 | // Assign DOM elements 32 | this.DOM.el = DOM_el; 33 | this.DOM.titleWrap = this.DOM.el.querySelector('.title-wrap'); 34 | this.DOM.titleUp = this.DOM.titleWrap.querySelector('.title--up'); 35 | this.DOM.titleDown = this.DOM.titleWrap.querySelector('.title--down'); 36 | this.DOM.content = [...this.DOM.el.querySelectorAll('.content')]; 37 | this.DOM.svg = this.DOM.el.querySelector('.content__img'); 38 | this.DOM.mask = this.DOM.svg.querySelector('.mask'); 39 | this.DOM.image = this.DOM.svg.querySelector('image'); 40 | 41 | // Save current state 42 | this.flipstate = Flip.getState([this.DOM.titleUp, this.DOM.titleDown]); 43 | 44 | // Change layout 45 | this.DOM.content[1].prepend(this.DOM.titleUp, this.DOM.titleDown); 46 | 47 | // Check if the mask element is a circle or a path 48 | const isCircle = this.DOM.mask.tagName.toLowerCase() === 'circle'; 49 | 50 | // Create the Flip.from that we'll pass into the ScrollTrigger animation property 51 | const flip = Flip.from(this.flipstate, { 52 | ease: 'none', 53 | simple: true 54 | }) 55 | .fromTo(this.DOM.mask, { 56 | attr: isCircle ? {r: this.DOM.mask.getAttribute('r')} : {d: this.DOM.mask.getAttribute('d')}, 57 | }, { 58 | ease: 'none', 59 | attr: isCircle ? {r: this.DOM.mask.dataset.valueFinal} : {d: this.DOM.mask.dataset.valueFinal}, 60 | }, 0) 61 | // Also scale up the image element 62 | .fromTo(this.DOM.image, { 63 | transformOrigin: '50% 50%', 64 | filter: 'brightness(100%)' 65 | }, { 66 | ease: 'none', 67 | scale: isCircle ? 1.2 : 1, 68 | filter: 'brightness(150%)' 69 | }, 0); 70 | 71 | 72 | ScrollTrigger.create({ 73 | trigger: this.DOM.titleWrap, 74 | ease: 'none', 75 | start: 'clamp(top bottom-=10%)', 76 | end: '+=40%', 77 | scrub: true, 78 | animation: flip, 79 | }); 80 | } 81 | } -------------------------------------------------------------------------------- /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 | // Preload images 2 | const preloadFonts = (id) => { 3 | return new Promise((resolve) => { 4 | WebFont.load({ 5 | typekit: { 6 | id: id 7 | }, 8 | active: resolve 9 | }); 10 | }); 11 | }; 12 | 13 | export { 14 | preloadFonts 15 | }; --------------------------------------------------------------------------------