1// window width 2let windowWidth = window.innerWidth; 3 4gsap.registerPlugin(ScrollTrigger); 5 6 7// cafe animate 8const slidesCards = [...document.querySelectorAll('.cafe__slide')]; 9const slidesCardsReverse = [...slidesCards].reverse(); 10 11slidesCards.forEach((slide, i) => { 12 slide.style.transform = `translate3d(0px, 0px, ${i * (-100)}px) rotate(${i * 4}deg)`; 13 slide.style.zIndex = `${i * (1)}`; 14 if (i !== 0) { 15 slide.style.opacity = `${0.7}`; 16 } 17}) 18 19slidesCardsReverse.forEach((slide, i) => { 20 slide.style.zIndex = `${i}`; 21}) 22 23const slideAnimate = () => { 24 const first = slidesCards.shift(); 25 const last = slidesCardsReverse.pop(); 26 27 slidesCards.push(first); 28 slidesCardsReverse.unshift(last); 29 30 first.classList.add('_animation'); 31 32 setTimeout(() => { 33 slidesCards[0].style.opacity = `${1}`; 34 slidesCardsReverse.forEach((slide, i) => { 35 slide.style.zIndex = `${i}`; 36 }) 37 38 slidesCards.forEach((slide, i) => { 39 slide.style.transform = `translate3d(0px, 0px, ${i * (-100)}px) rotate(${i * 4}deg)`; 40 41 if (slide !== slidesCards[0]) { 42 slide.style.opacity = `${0.7}`; 43 } 44 }) 45 }, 300); 46 47 setTimeout(() => { 48 first.classList.remove('_animation'); 49 }, 840); 50 51} 52 53let slideAnimTimer = setInterval(slideAnimate, 2000); 54 55document.documentElement.addEventListener('click', (e) => { 56 if (e.target.closest('.cafe__gallery')) { 57 clearInterval(slideAnimTimer); 58 slideAnimate(); 59 slideAnimTimer = setInterval(slideAnimate, 2000); 60 } 61}) 62 63const ordersLeft = document.querySelector('.orders__left'); 64let leftWidthValue = +window.getComputedStyle(ordersLeft).getPropertyValue("width").replace(/[a-z]/gi, ''); 65 66const ordersRight = document.querySelector('.orders__right'); 67let rightWidthValue = +window.getComputedStyle(ordersRight).getPropertyValue("width").replace(/[a-z]/gi, ''); 68 69const ordersCenter = document.querySelector('.orders__center'); 70let centerWidthValue = +window.getComputedStyle(ordersCenter).getPropertyValue("width").replace(/[a-z]/gi, ''); 71 72window.addEventListener("resize", () => { 73 windowWidth = window.innerWidth; 74 leftWidthValue = +window.getComputedStyle(ordersLeft).getPropertyValue("width").replace(/[a-z]/gi, ''); 75 rightWidthValue = +window.getComputedStyle(ordersRight).getPropertyValue("width").replace(/[a-z]/gi, ''); 76 centerWidthValue = +window.getComputedStyle(ordersCenter).getPropertyValue("width").replace(/[a-z]/gi, ''); 77}); 78 79// orders parallax gsap 80if (windowWidth > 768) { 81 const tlOrdersLeft = gsap.timeline({ 82 scrollTrigger: { 83 trigger: ".orders", 84 start: "10% bottom", 85 end: "5% top", 86 scrub: true, 87 } 88 }); 89 tlOrdersLeft.to(ordersLeft, { 90 top: "18.7%", 91 left: "22.3%", 92 width: leftWidthValue - leftWidthValue / 100 * 15, 93 }); 94 95 const tlOrdersLeftBottom = gsap.timeline({ 96 scrollTrigger: { 97 trigger: ".orders", 98 start: "5% top", 99 end: "80% top", 100 scrub: true, 101 } 102 }); 103 tlOrdersLeftBottom.to(ordersLeft, { 104 top: "63.5%", 105 left: "29.3%", 106 width: leftWidthValue - leftWidthValue / 100 * 30, 107 }); 108 109} else { 110 const tlOrdersLeft = gsap.timeline({ 111 scrollTrigger: { 112 trigger: ".orders", 113 start: "20% bottom", 114 end: "40% top", 115 scrub: true, 116 } 117 }); 118 tlOrdersLeft.to(ordersLeft, { 119 top: "38.2%", 120 left:" 5.4%", 121 width: leftWidthValue - leftWidthValue / 100 * 30, 122 }); 123} 124 125 126 127if (windowWidth > 768) { 128 const tlOrdersRight = gsap.timeline({ 129 scrollTrigger: { 130 trigger: ".orders", 131 start: "10% bottom", 132 end: "5% top", 133 scrub: true, 134 } 135 }); 136 tlOrdersRight.to(ordersRight, { 137 top: "8.35%", 138 right: "-0.11%", 139 rotation: 40, 140 width: rightWidthValue - rightWidthValue / 100 * 30, 141 }); 142 143 const tlOrdersRightBottom = gsap.timeline({ 144 scrollTrigger: { 145 trigger: ".orders", 146 start: "5% top", 147 end: "80% top", 148 scrub: true, 149 } 150 }); 151 tlOrdersRightBottom.to(ordersRight, { 152 top: "58.8%", 153 right: "34.6%", 154 rotation: 40, 155 width: rightWidthValue - rightWidthValue / 100 * 45, 156 }); 157} else { 158 const tlOrdersRight = gsap.timeline({ 159 scrollTrigger: { 160 trigger: ".orders", 161 start: "0% bottom",
162 end: "10% top", 163 scrub: true, 164 } 165 }); 166 tlOrdersRight.to(ordersRight, { 167 top: "-5%", 168 right: "-15%", 169 rotation: 30, 170 width: rightWidthValue + rightWidthValue / 100 * 15, 171 }); 172} 173 174 175if (windowWidth > 768) { 176 const tlOrdersCenter = gsap.timeline({ 177 scrollTrigger: { 178 trigger: ".orders", 179 start: "10% bottom", 180 end: "100% top", 181 scrub: true, 182 } 183 }); 184 185 tlOrdersCenter.to(ordersCenter, { 186 bottom: "3.2%", 187 width: centerWidthValue - centerWidthValue / 100 * 20, 188 }); 189} else { 190 const tlOrdersCenter = gsap.timeline({ 191 scrollTrigger: { 192 trigger: ".orders", 193 start: "10% top", 194 end: "100% top", 195 scrub: true, 196 } 197 }); 198 199 tlOrdersCenter.to(ordersCenter, { 200 bottom: "20%", 201 }); 202} 203 204 205// salmon parallax gsap 206const tlSalmonTop = gsap.timeline({ 207 scrollTrigger: { 208 trigger: ".salmon", 209 start: windowWidth > 768 ? "70% bottom" : "70% bottom", 210 end: "100% top", 211 scrub: 0.1, 212 } 213}); 214 215const tlSalmonCenter = gsap.timeline({ 216 scrollTrigger: { 217 trigger: ".salmon", 218 start: windowWidth > 768 ? "75% bottom" : "75% bottom", 219 end: "100% top", 220 scrub: 0.1, 221 } 222}); 223 224const tlSalmonBottom = gsap.timeline({ 225 scrollTrigger: { 226 trigger: ".salmon", 227 start: windowWidth > 768 ? "85% bottom" : "85% bottom", 228 end: "100% top", 229 scrub: 0.1, 230 } 231}); 232 233if (windowWidth > 768) { 234 tlSalmonTop.to('.salmon__img-top', { 235 top: "-30.9%", 236 }); 237 tlSalmonCenter.to('.salmon__img-center', { 238 top: '5%', 239 }) 240 tlSalmonBottom.to('.salmon__img-bottom', { 241 top: '30%', 242 }) 243 } else { 244 tlSalmonTop.to('.salmon__img-top', { 245 top: "-20.9%", 246 }); 247 tlSalmonCenter.to('.salmon__img-center', { 248 top: '0%', 249 }) 250 tlSalmonBottom.to('.salmon__img-bottom', { 251 top: '20%', 252 }) 253 } 254 255// cutlets parallax gsap 256if (windowWidth > 768) { 257 const tlCutlets = gsap.timeline({ 258 scrollTrigger: { 259 trigger: ".cutlets", 260 start: "80% bottom", 261 end: "100% top", 262 scrub: 0.1, 263 } 264 }); 265 tlCutlets.to('.cutlets__cutlet', { 266 bottom: "60%", 267 }); 268} else { 269 const tlCutlets = gsap.timeline({ 270 scrollTrigger: { 271 trigger: ".cutlets", 272 start: "100% bottom", 273 end: "100% top", 274 scrub: 0.1, 275 } 276 }); 277 tlCutlets.to('.cutlets__cutlet', { 278 bottom: "60%", 279 }); 280} 281 282 283const tlBread = gsap.timeline({ 284 scrollTrigger: { 285 trigger: ".cutlets", 286 start: "50% bottom", 287 end: "100% top", 288 scrub: 0.1, 289 } 290}); 291tlBread.to('.cutlets__bread', { 292 top: windowWidth > 768 ? "-39%" : "-45%", 293}); 294 295if (windowWidth > 768) { 296 const tlBreadMini = gsap.timeline({ 297 scrollTrigger: { 298 trigger: ".cutlets", 299 start: "80% bottom", 300 end: "100% top", 301 scrub: 0.1, 302 } 303 }); 304 tlBreadMini.to('.cutlets__bread-mini', { 305 bottom: "59%", 306 }); 307} else { 308 const tlBreadMini = gsap.timeline({ 309 scrollTrigger: { 310 trigger: ".cutlets", 311 start: "100% bottom", 312 end: "100% top", 313 scrub: 0.1, 314 } 315 }); 316 tlBreadMini.to('.cutlets__bread-mini', { 317 bottom: "35%", 318 }); 319} 320 321 322// desserts parallax gsap 323const tlDesserts = gsap.timeline({ 324 scrollTrigger: { 325 trigger: ".desserts", 326 start: "40% bottom", 327 end: "100% top", 328 scrub: 0.1, 329 } 330}); 331if (windowWidth > 768) { 332 tlDesserts.to('.desserts__img', { 333 top: "-49%", 334 }); 335} else { 336 tlDesserts.to('.desserts__img-mob', { 337 top: "-19%", 338 }); 339} 340 341if (windowWidth > 768) { 342 const tlDrinks = gsap.timeline({ 343 scrollTrigger: { 344 trigger: ".drinks", 345 start: "50% bottom", 346 end: "100% top", 347 scrub: 0.1, 348 } 349 }); 350 tlDrinks.to('.drinks__img', { 351 top: "-49%", 352 }); 353} else { 354 const tlDrinks = gsap.timeline({ 355 scrollTrigger: { 356 trigger: ".drinks", 357 start: "95% bottom", 358 end: "100% top", 359 scrub: 0.1, 360 } 361 }); 362 tlDrinks.to('.drinks__img-mob', { 363 top: "-19%", 364 }); 365} 366 367 368 369// hover video 370const videoWraps = document.querySelectorAll('.invite__video-wrap'); 371videoWraps.forEach((wrap) => { 372 const video = wrap.querySelector('.invite__video'); 373 374 wrap.addEventListener("mouseover", (e) => { 375 wrap.classList.add('_hover'); 376 video.play(); 377 }) 378 379 wrap.addEventListener("mouseout", (e) => { 380 wrap.classList.remove('_hover'); 381 video.pause(); 382 }) 383}) 384 385 386 387 388// fancybox 389Fancybox.bind("[data-fancybox]", { 390 placeFocusBack: false, 391}); 392 393 394 395// map gsap 396window.addEventListener('load', function() { 397 ScrollTrigger.config({ 398 autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" 399 }); 400 401 gsap.to('.map__inner', { 402 scrollTrigger: { 403 trigger: ".map", 404 start: "top top", 405 end: "bottom top", 406 scrub: true, 407 pin: ".map__inner", 408 anticipatePin: 1, 409 refreshPriority: 1, 410 invalidateOnRefresh: true, 411 412 toggleClass: { 413 targets: "._body", 414 className: "_smooth" 415 }, 416 417 onUpdate: (self) => { 418 gsap.set(".map__inner", { 419 force3D: true 420 }); 421 422 requestAnimationFrame(() => { 423 self.animation && self.animation.progress(self.progress); 424 }); 425 }, 426 onRefresh: self =>
426 self.update(), 427 }, 428 }); 429 430 gsap.to('.map__progressbar-line-1', { 431 scrollTrigger: { 432 trigger: ".map", 433 // start: "20% top", 434 start: "8% top", 435 // end: "30% top", 436 end: "22% top", 437 scrub: true, 438 }, 439 width: "100%", 440 }); 441 442 gsap.to('.map__progressbar-line-1', { 443 scrollTrigger: { 444 trigger: ".map", 445 // start: "30% top", 446 start: "27% top", 447 end: "35% top", 448 // end: "40% top", 449 scrub: true, 450 toggleClass: { 451 targets: ".map__progressbar-line-1-wrap", 452 className: "_rotated" 453 }, 454 }, 455 width: "0%", 456 }); 457 458 gsap.to('.map__progressbar-line-2', { 459 scrollTrigger: { 460 trigger: ".map", 461 start: "25% top", 462 end: "42% top", 463 scrub: true, 464 }, 465 width: "100%", 466 }); 467 468 gsap.to('.map__progressbar-line-2', { 469 scrollTrigger: { 470 trigger: ".map", 471 start: "45% top", 472 end: "55% top", 473 scrub: true, 474 toggleClass: { 475 targets: ".map__progressbar-line-2-wrap", 476 className: "_rotated" 477 }, 478 }, 479 width: "0%", 480 }); 481 482 gsap.to('.map__progressbar-line-3', { 483 scrollTrigger: { 484 trigger: ".map", 485 start: "45% top", 486 end: "60% top", 487 scrub: true, 488 }, 489 width: "100%", 490 }); 491 492 gsap.to('.map__progressbar-line-3', { 493 scrollTrigger: { 494 trigger: ".map", 495 start: "60% top", 496 end: "70% top", 497 scrub: true, 498 toggleClass: { 499 targets: ".map__progressbar-line-3-wrap", 500 className: "_rotated" 501 }, 502 }, 503 width: "0%", 504 }); 505 506 // points 507 gsap.to('.map__progressbar-point-1', { 508 scrollTrigger: { 509 trigger: ".map", 510 start: "top top", 511 end: "15% top", 512 // end: "26% top", 513 scrub: true, 514 515 toggleClass: { 516 targets: ".map__progressbar-point-1", 517 className: "_active" 518 } 519 }, 520 }); 521 522 gsap.to('.map__progressbar-point-2', { 523 scrollTrigger: { 524 trigger: ".map", 525 start: "15% top", 526 // start: "25% top", 527 // end: "60% top", 528 end: "30% top", 529 scrub: true, 530 531 toggleClass: { 532 targets: ".map__progressbar-point-2", 533 className: "_active" 534 } 535 }, 536 }); 537 538 gsap.to('.map__progressbar-point-3', { 539 scrollTrigger: { 540 trigger: ".map", 541 // start: "59% top", 542 start: "30% top", 543 // end: "75% top", 544 end: "45% top", 545 scrub: true, 546 547 toggleClass: { 548 targets: ".map__progressbar-point-3", 549 className: "_active" 550 } 551 }, 552 }); 553 554 gsap.to('.map__progressbar-point-4', { 555 scrollTrigger: { 556 trigger: ".map", 557 // start: "80% top", 558 start: "50% top", 559 scrub: true, 560 561 toggleClass: { 562 targets: ".map__progressbar-point-4", 563 className: "_active" 564 } 565 }, 566 }); 567 568 // cars 569 gsap.to('.map__car', { 570 scrollTrigger: { 571 trigger: ".map", 572 start: "0% top", 573 // end: "35% top", 574 end: "20% top", 575 scrub: 0.5, 576 577 toggleClass: { 578 targets: ".map__car", 579 className: "_active" 580 }, 581 }, 582 }); 583 584 // car 1 585 const tl = gsap.timeline({ 586 scrollTrigger: { 587 trigger: ".map", 588 start: "1% top", 589 // end: "35% top", 590 end: "20% top", 591 scrub: 0.5, 592 } 593 }); 594 595 const pointsCar1 = [ 596 { position: 0, top: "37%", left: "1.5%", rotation: -94 }, 597 { position: 0.02, top: "32.5%", left: "38%", rotation: -94 }, 598 { position: 0.02, top: "32.5%", left: "38%", rotation: -94 }, 599 { position: 0.2, top: "32.5%", left: "38%", rotation: -7.6 }, 600 { position: 0.22, top: "37%", left: "38.4%", rotation: -7.6 }, 601 { position: 0.3, top: "37%", left: "38.4%", rotation: -42.6 }, 602 { position: 0.35, left: "40%", top: "40%", rotation: -35 }, 603 { position: 0.4, left: "40%", top: "40%", rotation: -65 }, 604 { position: 0.45, left: "43%", top: "43%", rotation: -65 }, 605 { position: 0.55, left: "43%", top: "43%", rotation: -56 }, 606 { position: 0.6, left: "47.2%", top: "48.7%", rotation: -56 }, 607 { position: 0.8, left: "47.2%", top: "48.7%", rotation: 26 }, 608 { position: 1, left: "39.6%", top: "76.7%", rotation: 26 }, 609 { position: 1.1, left: "39.6%", top: "76.7%", rotation: 48 }, 610 { position: 1.2, left: "28.6%", top: "91.7%", rotation: 48 }, 611 { position: 1.4, left: "28.6%", top: "91.7%", rotation: 96 }, 612 { position: 1.6, left: "12.6%", top: "86.7%", rotation: 96 }, 613 { position: 1.8, left: "12.6%", top: "86.7%", rotation: 110 }, 614 { position: 1.85, left: "8.6%", top: "83.7%", rotation: 110 }, 615 { position: 1.9, left: "8.6%", top: "83.7%", rotation: 115 }, 616 { position: 1.95, left: "5.8%", top: "80.8%", rotation: 115 }, 617 { position: 2.05, left: "5.8%", top: "80.8%", rotation: 148.5 }, 618 { position: 2.1, left: "4%", top: "73.8%", rotation: 148.5 },
619 { position: 2.25, left: "4%", top: "73.8%", rotation: 96.5 }, 620 { position: 2.35, left: "1%", top: "73.8%", rotation: 96.5 }, 621 ]; 622 623 const pointsCar1Mob = [ 624 { position: 0, top: "35.4%", left: "1.5%", rotation: -94 }, 625 { position: 0.02, top: "33.8%", left: "28%", rotation: -94 }, 626 { position: 0.02, top: "33.8%", left: "28%", rotation: -94 }, 627 { position: 0.2, top: "33.8%", left: "28%", rotation: -7.6 }, 628 { position: 0.22, top: "37%", left: "28.4%", rotation: -7.6 }, 629 { position: 0.3, top: "37%", left: "28.4%", rotation: -42.6 }, 630 { position: 0.35, left: "32.2%", top: "41.5%", rotation: -35 }, 631 { position: 0.4, left: "32.2%", top: "41.5%", rotation: -65 }, 632 { position: 0.45, left: "37.5%", top: "43.5%", rotation: -65 }, 633 { position: 0.55, left: "37.5%", top: "43.5%", rotation: -56 }, 634 { position: 0.6, left: "46%", top: "48.9%", rotation: -56 }, 635 { position: 0.8, left: "46%", top: "48.9%", rotation: 26 }, 636 { position: 1, left: "30.9%", top: "78.9%", rotation: 26 }, 637 { position: 1.1, left: "30.9%", top: "78.9%", rotation: 48 }, 638 { position: 1.2, left: "10.9%", top: "92.9%", rotation: 48 }, 639 { position: 1.4, left: "10.9%", top: "92.9%", rotation: 96 }, 640 { position: 1.6, left: "0.9%", top: "91.5%", rotation: 96 }, 641 ]; 642 643 if (windowWidth > 768) { 644 pointsCar1.forEach((point) => { 645 tl.to('.map__car-1', { 646 top: point.top, 647 left: point.left, 648 rotation: point.rotation, 649 duration: 0.5, 650 },); 651 }); 652 } else { 653 pointsCar1Mob.forEach((point) => { 654 tl.to('.map__car-1', { 655 top: point.top, 656 left: point.left, 657 rotation: point.rotation, 658 duration: 0.5, 659 },); 660 }); 661 } 662 663 664 665 666 // car 2 667 const tlCar2 = gsap.timeline({ 668 scrollTrigger: { 669 trigger: ".map", 670 start: "1% top", 671 // end: "35% top", 672 end: "20% top", 673 scrub: 0.5, 674 } 675 }); 676 677 const pointsCar2 = [ 678 { top: "2%", left: "44.5%", rotation: 20 }, 679 { top: "2%", left: "44.5%", rotation: 15 }, 680 { top: "7%", left: "44.3%", rotation: 15 }, 681 { top: "9%", left: "44.3%", rotation: 6 }, 682 { top: "9%", left: "44%", rotation: -11 }, 683 { top: "9%", left: "44%", rotation: -11 }, 684 { top: "14%", left: "45%", rotation: -40 }, 685 { top: "17.5%", left: "47%", rotation: -46 }, 686 { top: "20.7%", left: "50.7%", rotation: -62 }, 687 { top: "20.7%", left: "50.7%", rotation: -141 }, 688 { top: "16%", left: "53%", rotation: -141 }, 689 { top: "16%", left: "53%", rotation: -50 }, 690 { top: "24%", left: "58.5%", rotation: -50 }, 691 { top: "24%", left: "58.5%", rotation: -135 }, 692 { top: "19%", left: "63%", rotation: -108.7 }, 693 { top: "19%", left: "66.6%", rotation: -89.7 }, 694 { top: "23%", left: "75%", rotation: -69.7 }, 695 { top: "28.7%", left: "81.9%", rotation: -60.7 }, 696 { top: "35.6%", left: "86.8%", rotation: -38.7 }, 697 { top: "48.6%", left: "91%", rotation: -19.7 }, 698 { top: "49.6%", left: "91%", rotation: 86.2 }, 699 { top: "49.6%", left: "88%", rotation: 115 }, 700 { top: "46%", left: "84%", rotation: 115 }, 701 { top: "52%", left: "83%", rotation: -5.8 }, 702 { top: "65.9%", left: "85.6%", rotation: -22.9 }, 703 { top: "71.7%", left: "87.6%", rotation: -22.9 }, 704 { top: "71.7%", left: "87.6%", rotation: -22.9 }, 705 { top: "71.7%", left: "87.6%", rotation: -10.9 }, 706 { top: "90.7%", left: "89.6%", rotation: -10.9 }, 707 { top: "90.7%", left: "89.6%", rotation: 4 }, 708 { top: "93%", left: "89.3%", rotation: 4 }, 709 ]; 710 711 const pointsCar2Mob = [ 712 { top: "0%", left: "41.5%", rotation: 20 }, 713 { top: "5%", left: "39.5%", rotation: 15 }, 714 { top: "9%", left: "38.9%", rotation: 6 }, 715 { top: "9%", left: "38.9%", rotation: -11 }, 716 { top: "17.8%", left: "42.8%", rotation: -40 }, 717 { top: "21.6%", left: "51.6%", rotation: -57 }, 718 { top: "21.4%", left: "51.6%", rotation: -143 }, 719 { top: "16.6%", left: "56.6%", rotation: -143 }, 720 { top: "16.6%", left: "56.6%", rotation: -51 }, 721 { top: "24.6%", left: "66.6%", rotation: -51 }, 722 { top: "24.6%", left: "66.6%", rotation: -130 }, 723 { top: "21.6%", left: "70.6%", rotation: -130 }, 724 { top: "21.6%", left: "70.6%", rotation: -109 }, 725 { top: "19.6%", left: "76.6%", rotation: -109 }, 726 { top: "19.6%", left: "76.6%", rotation: -88 }, 727 { top: "23.6%", left: "96.5%", rotation: -88 }, 728 ]; 729 730 if (windowWidth > 768) { 731 pointsCar2.forEach((point) => {
732 tlCar2.to('.map__car-2', { 733 top: point.top, 734 left: point.left, 735 rotation: point.rotation, 736 duration: 0.5, 737 }); 738 }); 739 } else { 740 pointsCar2Mob.forEach((point) => { 741 tlCar2.to('.map__car-2', { 742 top: point.top, 743 left: point.left, 744 rotation: point.rotation, 745 duration: 0.5, 746 }); 747 }); 748 } 749 750 751 // car 3 752 const tlCar3 = gsap.timeline({ 753 scrollTrigger: { 754 trigger: ".map", 755 start: "1% top", 756 // end: "35% top", 757 end: "20% top", 758 scrub: 0.5, 759 } 760 }); 761 762 const pointsCar3 = [ 763 { bottom: "1%", left: "54%", rotation: -146 }, 764 { bottom: "3.4%", left: "54.6%", rotation: -146 }, 765 { bottom: "3.4%", left: "54.6%", rotation: -156 }, 766 { bottom: "17.4%", left: "57%", rotation: -168.8 }, 767 { bottom: "34.2%", left: "58.5%", rotation: -168.7 }, 768 { bottom: "34.2%", left: "58.9%", rotation: -80.7 }, 769 { bottom: "33.2%", left: "61.8%", rotation: -80.7 }, 770 { bottom: "33.2%", left: "61.8%", rotation: 20.3 }, 771 { bottom: "33.2%", left: "61.8%", rotation: 20.3 }, 772 { bottom: "29.2%", left: "61.2%", rotation: 19.3 }, 773 { bottom: "29.2%", left: "61.2%", rotation: 19.3 }, 774 { bottom: "29.2%", left: "61.2%", rotation: -18.6 }, 775 { bottom: "15.2%", left: "65.2%", rotation: -31.9 }, 776 { bottom: "15.5%", left: "66%", rotation: -113.6 }, 777 { bottom: "19.4%", left: "69.8%", rotation: -128.6 }, 778 { bottom: "19.4%", left: "69.8%", rotation: -175 }, 779 { bottom: "19.4%", left: "69.8%", rotation: -175 }, 780 { bottom: "25.4%", left: "69.8%", rotation: -175 }, 781 { bottom: "25.4%", left: "69.8%", rotation: -142 }, 782 { bottom: "32%", left: "72.4%", rotation: -142 }, 783 { bottom: "32%", left: "72.4%", rotation: -162 }, 784 { bottom: "49%", left: "71.7%", rotation: -203.8 }, 785 { bottom: "49%", left: "71.7%", rotation: -203.8 }, 786 { bottom: "61.9%", left: "67.9%", rotation: -208.2 }, 787 { bottom: "61.9%", left: "67.9%", rotation: -296.8 }, 788 { bottom: "54.9%", left: "59.9%", rotation: -296.8 }, 789 { bottom: "54.9%", left: "59.9%", rotation: -348.8 }, 790 { bottom: "33.9%", left: "58.6%", rotation: -348.8 }, 791 { bottom: "2.4%", left: "54.6%", rotation: -348.8 }, 792 { bottom: "2.4%", left: "54.6%", rotation: -330.8 }, 793 { bottom: "0.4%", left: "53.5%", rotation: -322.3 }, 794 795 ]; 796 797 const pointsCar3Mob = [ 798 { bottom: "1%", left: "57%", rotation: -146 }, 799 { bottom: "4%", left: "59%", rotation: -146 }, 800 { bottom: "4%", left: "59%", rotation: -155 }, 801 { bottom: "35.5%", left: "67%", rotation: -155 }, 802 { bottom: "35.5%", left: "67%", rotation: -77 }, 803 { bottom: "34.3%", left: "73%", rotation: -77 }, 804 { bottom: "34.3%", left: "73%", rotation: 23 }, 805 { bottom: "30.3%", left: "71.5%", rotation: 23 }, 806 { bottom: "30.3%", left: "71.5%", rotation: -24 }, 807 { bottom: "21.3%", left: "76%", rotation: -24 }, 808 { bottom: "21.3%", left: "76%", rotation: -35 }, 809 { bottom: "16%", left: "81%", rotation: -35 }, 810 { bottom: "16%", left: "81%", rotation: -125 }, 811 { bottom: "21%", left: "88%", rotation: -125 }, 812 { bottom: "21%", left: "88%", rotation: -182 }, 813 { bottom: "27%", left: "88%", rotation: -182 }, 814 { bottom: "27%", left: "88%", rotation: -135 }, 815 { bottom: "33%", left: "93.5%", rotation: -135 }, 816 { bottom: "33%", left: "93.5%", rotation: -168 }, 817 { bottom: "49.9%", left: "92%", rotation: -193 }, 818 { bottom: "49.9%", left: "92%", rotation: -209 }, 819 { bottom: "62.9%", left: "84.5%", rotation: -209 }, 820 { bottom: "62.9%", left: "84.5%", rotation: -300 }, 821 { bottom: "55.5%", left: "69.5%", rotation: -300 }, 822 { bottom: "55.5%", left: "69.5%", rotation: -352 }, 823 { bottom: "34.5%", left: "67%", rotation: -352 }, 824 { bottom: "5.6%", left: "60%", rotation: -352 }, 825 { bottom: "5.6%", left: "60%", rotation: -336 }, 826 { bottom: "3.6%", left: "59%", rotation: -336 }, 827 { bottom: "3.6%", left: "59%", rotation: -326 }, 828 { bottom: "-0.4%", left: "56.5%", rotation: -326 }, 829 ]; 830 831 if (windowWidth > 768) { 832 pointsCar3.forEach((point) => {
833 tlCar3.to('.map__car-3', { 834 bottom: point.bottom, 835 left: point.left, 836 rotation: point.rotation, 837 duration: 0.5, 838 }); 839 }); 840 } else { 841 pointsCar3Mob.forEach((point) => { 842 tlCar3.to('.map__car-3', { 843 bottom: point.bottom, 844 left: point.left, 845 rotation: point.rotation, 846 duration: 0.5, 847 }); 848 }); 849 } 850 851 852 // cafe points 853 const pointsOpen = (elem, percent) => { 854 gsap.to(elem, { 855 scrollTrigger: { 856 trigger: ".map", 857 start: `${percent}% top`, 858 scrub: true, 859 860 toggleClass: { 861 targets: elem, 862 className: "_active" 863 } 864 } 865 }); 866 } 867 868 // points 2016 869 // 15-30% 870 // pointsOpen('.map__cafe-1', "35%"); 871 // pointsOpen('.map__cafe-2', "40%"); 872 // pointsOpen('.map__scoped', "45%"); 873 // pointsOpen('.map__cafe-3', "50%"); 874 // pointsOpen('.map__cafe-4', "55%"); 875 // pointsOpen('.map__cafe-5', "60%"); 876 877 pointsOpen('.map__cafe-1', "15%"); 878 pointsOpen('.map__cafe-2', "17%"); 879 pointsOpen('.map__scoped', "19%"); 880 pointsOpen('.map__cafe-3', "22%"); 881 pointsOpen('.map__cafe-4', "24%"); 882 pointsOpen('.map__cafe-5', "25%"); 883 884 885 // points 2020 886 // Ð¾Ñ 30% до 45% 887 // pointsOpen('.map__cafe-6', "65%"); 888 // pointsOpen('.map__cafe-7', "70%"); 889 // pointsOpen('.map__cafe-8', "75%"); 890 891 pointsOpen('.map__cafe-6', "30%"); 892 pointsOpen('.map__cafe-7', "35%"); 893 pointsOpen('.map__cafe-8', "40%"); 894 895 // points 2024 896 // Ð¾Ñ 45% 897 // pointsOpen('.map__cafe-9', "80%"); 898 // pointsOpen('.map__cafe-10', "85%"); 899 // pointsOpen('.map__cafe-11', "90%"); 900 901 pointsOpen('.map__cafe-9', "45%"); 902 pointsOpen('.map__cafe-10', "50%"); 903 pointsOpen('.map__cafe-11', "55%"); 904 905 // scroll anim visibility 906 gsap.to(".map__circle", { 907 scrollTrigger: { 908 trigger: ".map", 909 start: `-1% top`, 910 toggleClass: { 911 targets: ".map__circle", 912 className: "_active" 913 } 914 } 915 }); 916 917 // text visibility 918 gsap.to(".map__txt-1", { 919 scrollTrigger: { 920 trigger: ".map", 921 start: `-1% top`, 922 // end: `35% top`, 923 end: `15% top`, 924 scrub: true, 925 926 toggleClass: { 927 targets: ".map__txt-1", 928 className: "_active" 929 } 930 } 931 }); 932 933 gsap.to(".map__txt-2", { 934 scrollTrigger: { 935 trigger: ".map", 936 // start: `36% top`, 937 start: `15% top`, 938 // end: `65% top`, 939 end: `30% top`, 940 scrub: true, 941 942 toggleClass: { 943 targets: ".map__txt-2", 944 className: "_active" 945 } 946 } 947 }); 948 949 gsap.to(".map__txt-3", { 950 scrollTrigger: { 951 trigger: ".map", 952 // start: `66% top`, 953 start: `30% top`, 954 end: `50% top`, 955 scrub: true, 956 957 toggleClass: { 958 targets: ".map__txt-3", 959 className: "_active" 960 } 961 } 962 }); 963 964 gsap.to(".map__txt-4", { 965 scrollTrigger: { 966 trigger: ".map", 967 start: `50% top`, 968 scrub: true, 969 970 toggleClass: { 971 targets: ".map__txt-4", 972 className: "_active" 973 } 974 } 975 }); 976});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.