1const PAGES = [ 2 "landingPage", 3 "products", 4 "features", 5 "roadmap", 6 "team", 7 "contact", 8]; 9 10const wrapper = document.getElementById("wrapper"); 11 12const onBurgerClicked = (e) => { 13 Array.from(document.querySelectorAll(".burgerLine")).forEach( 14 (e) => (e.style.background = "#7c329f") 15 ); 16 gsap.to(".first", { 17 duration: 0.5, 18 alignSelf: "flex-start", 19 ease: "power1.out", 20 }); 21 gsap.to(".third", { 22 duration: 0.5, 23 alignSelf: "flex-end", 24 ease: "power1.out", 25 }); 26 gsap.fromTo( 27 "#menu", 28 { x: "50%" }, 29 { duration: 0.5, x: "0%", ease: "power3.out" } 30 ); 31 document.querySelector("body").style.overflow = "hidden"; 32 document.getElementById("overlayMobileMenu").style.overflow = "hidden"; 33 document.getElementById("overlayMobileMenu").style.display = "block"; 34 document.getElementById("menu").style.display = "block"; 35}; 36 37const onOverlayClick = (e) => { 38 e.stopPropagation(); 39 Array.from(document.querySelectorAll(".burgerLine")).forEach( 40 (e) => (e.style.background = "#0abae7") 41 ); 42 gsap.to(".first", { 43 duration: 0.5, 44 alignSelf: "flex-end", 45 ease: "power1.out", 46 }); 47 gsap.to(".third", { 48 duration: 0.5, 49 alignSelf: "flex-start", 50 ease: "power1.out", 51 }); 52 document.getElementById("overlayMobileMenu").style.overflow = "scroll"; 53 document.getElementById("overlayMobileMenu").style.display = "none"; 54 document.getElementById("menu").style.display = "none"; 55 document.querySelector("body").style.overflow = "scroll"; 56}; 57 58const onMenuItemClicked = (e) => { 59 e.stopPropagation(); 60 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 61 if (e.srcElement.id === "logo") { 62 const element = document.getElementById("landingPage"); 63 const viewport = Math.max( 64 document.documentElement.clientHeight || 0, 65 window.innerHeight || 0 66 ); 67 68 const navHeight = 0.07 * viewport; 69 const y = 70 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 71 72 window.scrollTo({ top: y, behavior: "smooth" }); 73 } 74 // Array.from(wrapper.children).forEach((el) => { 75 // if (el.getAttribute("style") !== "display: none") { 76 // el.style.display = "none"; 77 // } 78 // }); 79 80 if (e.target.id.includes("products")) { 81 // document.getElementById("products").style.display = "flex"; 82 const element = document.getElementById("products"); 83 const viewport = Math.max( 84 document.documentElement.clientHeight || 0, 85 window.innerHeight || 0 86 ); 87 88 const navHeight = 0.07 * viewport; 89 const y = 90 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 91 92 window.scrollTo({ top: y, behavior: "smooth" }); 93 productImageAnimation(); 94 // document 95 // .querySelector("#navbar") 96 // .classList.remove( 97 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 98 // ); 99 // document 100 // .querySelector("body") 101 // .classList.remove( 102 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 103 // ); 104 } else if (e.target.id.includes("features")) { 105 const element = document.getElementById("features"); 106 const viewport = Math.max( 107 document.documentElement.clientHeight || 0, 108 window.innerHeight || 0 109 ); 110 111 const navHeight = 0.07 * viewport; 112 const y = 113 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 114 115 window.scrollTo({ top: y, behavior: "smooth" }); 116 // document.getElementById("features").style.display = "flex"; 117 // document 118 // .querySelector("#navbar") 119 // .classList.add( 120 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 121 // ); 122 // document 123 // .querySelector("body") 124 // .classList.add( 125 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 126 // ); 127 featuresImageAnimation(); 128 } else if (e.target.id.includes("roadmap")) { 129 const element = document.getElementById("roadmap"); 130 const viewport = Math.max( 131 document.documentElement.clientHeight || 0, 132 window.innerHeight || 0 133 ); 134 135 const navHeight = 0.07 * viewport; 136 const y = 137 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 138 139 window.scrollTo({ top: y, behavior: "smooth" }); 140 // document.getElementById("roadmap").style.display = "flex"; 141 // document 142 // .querySelector("#navbar") 143 // .classList.add(
144 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 145 // ); 146 // document 147 // .querySelector("body") 148 // .classList.add( 149 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 150 // ); 151 152 roadmapAnimations(); 153 } else if (e.target.id.includes("team")) { 154 const element = document.getElementById("team"); 155 const viewport = Math.max( 156 document.documentElement.clientHeight || 0, 157 window.innerHeight || 0 158 ); 159 160 const navHeight = 0.07 * viewport; 161 const y = 162 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 163 164 window.scrollTo({ top: y, behavior: "smooth" }); 165 // document.getElementById("team").style.display = "flex"; 166 // document 167 // .querySelector("#navbar") 168 // .classList.remove( 169 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 170 // ); 171 // document 172 // .querySelector("body") 173 // .classList.remove( 174 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 175 // ); 176 teamPageAnimations(); 177 } else if (e.target.id.includes("contact")) { 178 const element = document.getElementById("contact"); 179 const viewport = Math.max( 180 document.documentElement.clientHeight || 0, 181 window.innerHeight || 0 182 ); 183 184 const navHeight = 0.07 * viewport; 185 const y = 186 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 187 188 window.scrollTo({ top: y, behavior: "smooth" }); 189 // document.getElementById("contact").style.display = "flex"; 190 // document 191 // .querySelector("#navbar") 192 // .classList.remove( 193 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 194 // ); 195 // document 196 // .querySelector("body") 197 // .classList.remove( 198 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 199 // ); 200 contactAnimations(); 201 } 202 203 onOverlayClick(e); 204 205 return false; 206}; 207 208const onNavItemClickHandler = (e) => { 209 e.stopPropagation(); 210 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 211 if (e.srcElement.id === "logo" || e.srcElement.id === "homeLink") { 212 const element = document.getElementById("landingPage"); 213 const viewport = Math.max( 214 document.documentElement.clientHeight || 0, 215 window.innerHeight || 0 216 ); 217 218 const navHeight = 0.1 * viewport; 219 const y = 220 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 221 222 window.scrollTo({ top: y, behavior: "smooth" }); 223 landingPageAnimations(); 224 // document.getElementById("productsLink").classList.remove("selectedNavItem"); 225 // document.getElementById("featuresLink").classList.remove("selectedNavItem"); 226 // document.getElementById("roadmapLink").classList.remove("selectedNavItem"); 227 // document.getElementById("teamLink").classList.remove("selectedNavItem"); 228 // document.getElementById("contactLink").classList.remove("selectedNavItem"); 229 // document.getElementById("homeLink").classList.add("selectedNavItem"); 230 // document 231 // .querySelector("#navbar") 232 // .classList.remove( 233 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 234 // ); 235 // document 236 // .querySelector("body") 237 // .classList.remove( 238 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 239 // ); 240 // Array.from(wrapper.children).forEach((el) => { 241 // if (el.getAttribute("style") !== "display: none") { 242 // el.style.display = "none"; 243 // } 244 // }); 245 // document.getElementById(PAGES[0]).style.display = "flex"; 246 return false; 247 } 248 const selectedPage = e.target.innerText; 249 const selectedPageIndex = PAGES.findIndex((p) => p === selectedPage); 250 // const currentElement = Array.from(wrapper.children).find((el) => { 251 // return el.getAttribute("style") !== "display: none"; 252 // }); 253 // const currentPageIndex = 254 // currentElement && PAGES.findIndex((p) => p === currentElement.id); 255 256 // Array.from(wrapper.children).forEach((el) => { 257 // if (el.getAttribute("style") !== "display: none") { 258 // el.style.display = "none"; 259 // } 260 // }); 261 // document.getElementById(PAGES[selectedPageIndex]).style.display = "flex"; 262 // document 263 // .querySelector("#navbar") 264 // .classList.remove(
265 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 266 // ); 267 // document 268 // .querySelector("body") 269 // .classList.remove( 270 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 271 // ); 272 if (PAGES[selectedPageIndex] === "products") { 273 // document.getElementById("productsLink").classList.add("selectedNavItem"); 274 // document.getElementById("featuresLink").classList.remove("selectedNavItem"); 275 // document.getElementById("roadmapLink").classList.remove("selectedNavItem"); 276 // document.getElementById("teamLink").classList.remove("selectedNavItem"); 277 // document.getElementById("contactLink").classList.remove("selectedNavItem"); 278 // document.getElementById("homeLink").classList.remove("selectedNavItem"); 279 const element = document.getElementById("products"); 280 const viewport = Math.max( 281 document.documentElement.clientHeight || 0, 282 window.innerHeight || 0 283 ); 284 285 const navHeight = 0.1 * viewport; 286 const y = 287 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 288 289 window.scrollTo({ top: y, behavior: "smooth" }); 290 productImageAnimation(); 291 // document.querySelector("#navbar").classList.add(`${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}`); 292 // document.querySelector("body").classList.add(`${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}`); 293 } else if (PAGES[selectedPageIndex] === "features") { 294 // document.getElementById("productsLink").classList.remove("selectedNavItem"); 295 // document.getElementById("featuresLink").classList.add("selectedNavItem"); 296 // document.getElementById("roadmapLink").classList.remove("selectedNavItem"); 297 // document.getElementById("teamLink").classList.remove("selectedNavItem"); 298 // document.getElementById("contactLink").classList.remove("selectedNavItem"); 299 // document.getElementById("homeLink").classList.remove("selectedNavItem"); 300 // document 301 // .querySelector("#navbar") 302 // .classList.add( 303 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 304 // ); 305 // document 306 // .querySelector("body") 307 // .classList.add( 308 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 309 // ); 310 const element = document.getElementById("features"); 311 const viewport = Math.max( 312 document.documentElement.clientHeight || 0, 313 window.innerHeight || 0 314 ); 315 316 const navHeight = 0.1 * viewport; 317 const y = 318 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 319 320 window.scrollTo({ top: y, behavior: "smooth" }); 321 featuresImageAnimation(); 322 } else if (PAGES[selectedPageIndex] === "roadmap") { 323 // document.getElementById("productsLink").classList.remove("selectedNavItem"); 324 // document.getElementById("featuresLink").classList.remove("selectedNavItem"); 325 // document.getElementById("roadmapLink").classList.add("selectedNavItem"); 326 // document.getElementById("teamLink").classList.remove("selectedNavItem"); 327 // document.getElementById("contactLink").classList.remove("selectedNavItem"); 328 // document.getElementById("homeLink").classList.remove("selectedNavItem"); 329 330 // document 331 // .querySelector("#navbar") 332 // .classList.add( 333 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 334 // ); 335 // document 336 // .querySelector("body") 337 // .classList.add( 338 // `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 339 // ); 340 const element = document.getElementById("roadmap"); 341 const viewport = Math.max( 342 document.documentElement.clientHeight || 0, 343 window.innerHeight || 0 344 ); 345 346 const navHeight = 0.1 * viewport; 347 const y = 348 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 349 350 window.scrollTo({ top: y, behavior: "smooth" }); 351 roadmapAnimations(); 352 } else if (PAGES[selectedPageIndex] === "team") { 353 // document.getElementById("productsLink").classList.remove("selectedNavItem"); 354 // document.getElementById("featuresLink").classList.remove("selectedNavItem"); 355 // document.getElementById("roadmapLink").classList.remove("selectedNavItem"); 356 // document.getElementById("teamLink").classList.add("selectedNavItem"); 357 // document.getElementById("contactLink").classList.remove("selectedNavItem"); 358 // document.getElementById("homeLink").classList.remove("selectedNavItem"); 359 const element = document.getElementById("team"); 360 const viewport = Math.max( 361 document.documentElement.clientHeight || 0, 362 window.innerHeight || 0 363 ); 364 365 const navHeight = 0.1 * viewport; 366 const y = 367 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 368 369 window.scrollTo({ top: y, behavior: "smooth" }); 370 teamPageAnimations(); 371 } else if (PAGES[selectedPageIndex] === "contact") { 372 // document.getElementById("productsLink").classList.remove("selectedNavItem"); 373 // document.getElementById("featuresLink").classList.remove("selectedNavItem"); 374 // document.getElementById("roadmapLink").classList.remove("selectedNavItem"); 375 // document.getElementById("teamLink").classList.remove("selectedNavItem"); 376 // document.getElementById("contactLink").classList.add("selectedNavItem"); 377 // document.getElementById("homeLink").classList.remove("selectedNavItem"); 378 const element = document.getElementById("contact"); 379 const viewport = Math.max( 380 document.documentElement.clientHeight || 0, 381 window.innerHeight || 0 382 ); 383 384 const navHeight = 0.1 * viewport; 385 const y = 386 element.getBoundingClientRect().top + window.pageYOffset - navHeight; 387 388 window.scrollTo({ top: y, behavior: "smooth" }); 389 contactAnimations(); 390 } 391 392 return false;
393}; 394 395// const mouseIsInProductItemContainer = e => { 396const mouseIsInItemContainer = (e, itemContainer) => { 397 const mouseX = e.clientX; 398 const mouseY = e.clientY; 399 400 const { top, bottom, left, right } = document 401 .querySelector(`.${itemContainer}`) 402 .getBoundingClientRect(); 403 404 return mouseX >= left && mouseX <= right && mouseY >= top && mouseY <= bottom; 405}; 406 407let touchStart; 408 409const onTouchStart = (e) => { 410 touchStart = e.changedTouches[0].clientY; 411}; 412 413const onTouchMove = throttle((e) => { 414 onWrapperScroll(e, true); 415}, 1200); 416 417const onWrapperScroll = throttle((e, isMobileEvent = false) => { 418 e.stopPropagation(); 419 if (isMobileEvent && e.target.id.includes("TeamImgMobile")) { 420 // check if it swipe on team page 421 return; 422 } 423 let isScrollUp; 424 if (isMobileEvent && touchStart) { 425 isScrollUp = e.touches[0].clientY > touchStart; 426 } else { 427 isScrollUp = e.deltaY < 0; 428 } 429 if (mouseIsInItemContainer(e, "productItem")) { 430 const currentProductItem = document.querySelector(".productItem"); 431 const productNameDescriptionContainer = Array.from( 432 currentProductItem.querySelectorAll(".productNameDescriptionContainer") 433 ).find((el) => { 434 return window.getComputedStyle(el).display !== "none"; 435 }); 436 if (isScrollUp) { 437 const prevArrow = 438 productNameDescriptionContainer.querySelector(".prevArrow"); 439 prevArrow.click(); 440 } else { 441 const nextArrow = 442 productNameDescriptionContainer.querySelector(".nextArrow"); 443 nextArrow.click(); 444 } 445 return; 446 } else if (mouseIsInItemContainer(e, "featureItem")) { 447 const currentProductItem = document.querySelector(".featureItem"); 448 const productNameDescriptionContainer = Array.from( 449 currentProductItem.querySelectorAll(".featureNameDescriptionContainer") 450 ).find((el) => { 451 return window.getComputedStyle(el).display !== "none"; 452 }); 453 if (isScrollUp) { 454 const prevArrow = 455 productNameDescriptionContainer.querySelector(".prevArrowFeature"); 456 prevArrow.click(); 457 } else { 458 const nextArrow = 459 productNameDescriptionContainer.querySelector(".nextArrowFeature"); 460 nextArrow.click(); 461 } 462 return; 463 } 464 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 465 let foundElement = null; 466 if (PAGES.includes(e.target.id)) { 467 foundElement = e.target.id; 468 } else { 469 for (let i = 0; i < PAGES.length; i++) { 470 foundElement = e.target.closest(`#${PAGES[i]}`); 471 if (foundElement) { 472 foundElement = foundElement.id; 473 } 474 if (foundElement) break; 475 } 476 } 477 const currentPageIndex = PAGES.findIndex((el) => el === foundElement); 478 479 if (isScrollUp) { 480 const previousPageIndex = currentPageIndex - 1; 481 if (previousPageIndex >= 0) { 482 Array.from(wrapper.children).forEach((el) => { 483 if (el.getAttribute("style") !== "display: none") { 484 el.style.display = "none"; 485 } 486 }); 487 488 document.getElementById(PAGES[previousPageIndex]).style.display = "flex"; 489 490 if ( 491 PAGES[previousPageIndex] === "features" || 492 PAGES[previousPageIndex] === "roadmap" 493 ) { 494 document 495 .querySelector("#navbar") 496 .classList.add( 497 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 498 ); 499 document 500 .querySelector("body") 501 .classList.add( 502 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 503 ); 504 } else { 505 document 506 .querySelector("#navbar") 507 .classList.remove( 508 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 509 ); 510 document 511 .querySelector("body") 512 .classList.remove( 513 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 514 ); 515 } 516 517 if (previousPageIndex === 0) { 518 document 519 .getElementById("productsLink") 520 .classList.remove("selectedNavItem"); 521 document 522 .getElementById("featuresLink") 523 .classList.remove("selectedNavItem"); 524 document 525 .getElementById("roadmapLink") 526 .classList.remove("selectedNavItem"); 527 document.getElementById("teamLink").classList.remove("selectedNavItem"); 528 document 529 .getElementById("contactLink") 530 .classList.remove("selectedNavItem"); 531 document.getElementById("homeLink").classList.add("selectedNavItem"); 532 533 landingPageAnimations(); 534 } 535 536 if (PAGES[previousPageIndex] === "products") { 537 document 538 .getElementById("productsLink") 539 .classList.add("selectedNavItem"); 540 document 541 .getElementById("featuresLink") 542 .classList.remove("selectedNavItem"); 543 document 544 .getElementById("roadmapLink") 545 .classList.remove("selectedNavItem"); 546 document.getElementById("teamLink").classList.remove("selectedNavItem"); 547 document 548 .getElementById("contactLink") 549 .classList.remove("selectedNavItem"); 550 document.getElementById("homeLink").classList.remove("selectedNavItem"); 551 productImageAnimation(); 552 } else if (PAGES[previousPageIndex] === "features") { 553 document 554 .getElementById("productsLink") 555 .classList.remove("selectedNavItem"); 556 document 557 .getElementById("featuresLink") 558 .classList.add("selectedNavItem"); 559 document 560 .getElementById("roadmapLink") 561 .classList.remove("selectedNavItem"); 562 document.getElementById("teamLink").classList.remove("selectedNavItem"); 563 document 564 .getElementById("contactLink") 565 .classList.remove("selectedNavItem"); 566 document.getElementById("homeLink").classList.remove("selectedNavItem"); 567 featuresImageAnimation(); 568 } else if (PAGES[previousPageIndex] === "roadmap") { 569 document 570 .getElementById("productsLink") 571 .classList.remove("selectedNavItem"); 572 document 573 .getElementById("featuresLink") 574 .classList.remove("selectedNavItem"); 575 document.getElementById("roadmapLink").classList.add("selectedNavItem"); 576 document.getElementById("teamLink").classList.remove("selectedNavItem"); 577 document 578 .getElementById("contactLink") 579 .classList.remove("selectedNavItem"); 580 document.getElementById("homeLink").classList.remove("selectedNavItem"); 581 roadmapAnimations(); 582 } else if (PAGES[previousPageIndex] === "team") { 583 document 584 .getElementById("productsLink") 585 .classList.remove("selectedNavItem"); 586 document 587 .getElementById("featuresLink") 588 .classList.remove("selectedNavItem"); 589 document 590 .getElementById("roadmapLink") 591 .classList.remove("selectedNavItem"); 592 document.getElementById("teamLink").classList.add("selectedNavItem"); 593 document 594 .getElementById("contactLink") 595 .classList.remove("selectedNavItem"); 596 document.getElementById("homeLink").classList.remove("selectedNavItem"); 597 teamPageAnimations(); 598 } 599 } 600 } else { 601 const nextPageIndex = currentPageIndex + 1; 602 if (nextPageIndex <= PAGES.length - 1) {
603 Array.from(wrapper.children).forEach((el) => { 604 if (el.getAttribute("style") !== "display: none") { 605 el.style.display = "none"; 606 } 607 }); 608 609 document.getElementById(PAGES[nextPageIndex]).style.display = "flex"; 610 611 if ( 612 PAGES[nextPageIndex] === "features" || 613 PAGES[nextPageIndex] === "roadmap" 614 ) { 615 document 616 .querySelector("#navbar") 617 .classList.add( 618 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 619 ); 620 document 621 .querySelector("body") 622 .classList.add( 623 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 624 ); 625 } else { 626 document 627 .querySelector("#navbar") 628 .classList.remove( 629 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 630 ); 631 document 632 .querySelector("body") 633 .classList.remove( 634 `${!isMobile ? "newBackgroundBlue" : "newBackgroundBlueMobile"}` 635 ); 636 } 637 638 if (PAGES[nextPageIndex] === "products") { 639 document 640 .getElementById("productsLink") 641 .classList.add("selectedNavItem"); 642 document 643 .getElementById("featuresLink") 644 .classList.remove("selectedNavItem"); 645 document 646 .getElementById("roadmapLink") 647 .classList.remove("selectedNavItem"); 648 document.getElementById("teamLink").classList.remove("selectedNavItem"); 649 document 650 .getElementById("contactLink") 651 .classList.remove("selectedNavItem"); 652 document.getElementById("homeLink").classList.remove("selectedNavItem"); 653 productImageAnimation(); 654 } else if (PAGES[nextPageIndex] === "features") { 655 document 656 .getElementById("productsLink") 657 .classList.remove("selectedNavItem"); 658 document 659 .getElementById("featuresLink") 660 .classList.add("selectedNavItem"); 661 document 662 .getElementById("roadmapLink") 663 .classList.remove("selectedNavItem"); 664 document.getElementById("teamLink").classList.remove("selectedNavItem"); 665 document 666 .getElementById("contactLink") 667 .classList.remove("selectedNavItem"); 668 document.getElementById("homeLink").classList.remove("selectedNavItem"); 669 featuresImageAnimation(); 670 } else if (PAGES[nextPageIndex] === "roadmap") { 671 document 672 .getElementById("productsLink") 673 .classList.remove("selectedNavItem"); 674 document 675 .getElementById("featuresLink") 676 .classList.remove("selectedNavItem"); 677 document.getElementById("roadmapLink").classList.add("selectedNavItem"); 678 document.getElementById("teamLink").classList.remove("selectedNavItem"); 679 document 680 .getElementById("contactLink") 681 .classList.remove("selectedNavItem"); 682 document.getElementById("homeLink").classList.remove("selectedNavItem"); 683 roadmapAnimations(); 684 } else if (PAGES[nextPageIndex] === "team") { 685 document 686 .getElementById("productsLink") 687 .classList.remove("selectedNavItem"); 688 document 689 .getElementById("featuresLink") 690 .classList.remove("selectedNavItem"); 691 document 692 .getElementById("roadmapLink") 693 .classList.remove("selectedNavItem"); 694 document.getElementById("teamLink").classList.add("selectedNavItem"); 695 document 696 .getElementById("contactLink") 697 .classList.remove("selectedNavItem"); 698 document.getElementById("homeLink").classList.remove("selectedNavItem"); 699 teamPageAnimations(); 700 } else if (PAGES[nextPageIndex] === "contact") { 701 document 702 .getElementById("productsLink") 703 .classList.remove("selectedNavItem"); 704 document 705 .getElementById("featuresLink") 706 .classList.remove("selectedNavItem"); 707 document 708 .getElementById("roadmapLink") 709 .classList.remove("selectedNavItem"); 710 document.getElementById("teamLink").classList.remove("selectedNavItem"); 711 document.getElementById("contactLink").classList.add("selectedNavItem"); 712 document.getElementById("homeLink").classList.remove("selectedNavItem"); 713 contactAnimations(); 714 } 715 } 716 } 717}, 1200); 718 719// function throttle(cb, delay = 1000) { 720// let shouldWait = false;
721// let waitingArgs; 722// const timeoutFunc = () => { 723// if (waitingArgs == null) { 724// shouldWait = false; 725// } else { 726// cb(...waitingArgs); 727// waitingArgs = null; 728// setTimeout(timeoutFunc, delay); 729// } 730// }; 731 732// return (...args) => { 733// if (shouldWait) { 734// waitingArgs = args; 735// return; 736// } 737 738// cb(...args); 739// shouldWait = true; 740 741// setTimeout(timeoutFunc, delay); 742// }; 743// } 744 745function throttle(mainFunction, delay) { 746 let timerFlag = null; // Variable to keep track of the timer 747 748 // Returning a throttled version 749 return (...args) => { 750 if (timerFlag === null) { 751 // If there is no timer currently running 752 mainFunction(...args); // Execute the main function 753 timerFlag = setTimeout(() => { 754 // Set a timer to clear the timerFlag after the specified delay 755 timerFlag = null; // Clear the timerFlag to allow the main function to be executed again 756 }, delay); 757 } 758 }; 759} 760 761function roadmapAnimations() { 762 // gsap.from("#textContainer1", { 763 // duration: 0.5, 764 // opacity: 0, 765 // x: "-10%", 766 // ease: "power1.out", 767 // }); 768 // gsap.from("#roadmapImg1", { duration: 0.5, opacity: 0, ease: "power1.out" }); 769 // gsap.fromTo( 770 // "#line1", 771 // { width: "0%" }, 772 // { duration: 0.5, width: "85%", ease: "power1.out" } 773 // ); 774 // gsap.from("#arrow2", { 775 // duration: 0.5, 776 // visibility: "hidden", 777 // ease: "power1.out", 778 // }); 779 // gsap.from("#textContainer2", { 780 // duration: 0.5, 781 // opacity: 0, 782 // x: "-10%", 783 // delay: 0.3, 784 // ease: "power1.out", 785 // }); 786 // gsap.from("#roadmapImg2", { 787 // duration: 0.5, 788 // opacity: 0, 789 // delay: 0.3, 790 // ease: "power1.out", 791 // }); 792 // gsap.fromTo( 793 // "#line2", 794 // { width: "0%" }, 795 // { duration: 0.5, width: "85%", delay: 0.3, ease: "power1.out" } 796 // ); 797 // gsap.from("#quater2", { 798 // duration: 0.5, 799 // opacity: 0, 800 // delay: 0.3, 801 // ease: "power1.out", 802 // }); 803 // gsap.from("#arrow3", { 804 // duration: 0.5, 805 // visibility: "hidden", 806 // delay: 0.3, 807 // ease: "power1.out", 808 // }); 809 // gsap.from("#textContainer3", { 810 // duration: 0.5, 811 // opacity: 0, 812 // x: "-10%", 813 // delay: 0.5, 814 // ease: "power1.out", 815 // }); 816 // gsap.from("#roadmapImg3", { 817 // duration: 0.5, 818 // opacity: 0, 819 // delay: 0.5, 820 // ease: "power1.out", 821 // }); 822 // gsap.fromTo( 823 // "#line3", 824 // { width: "0%" }, 825 // { duration: 0.5, width: "85%", delay: 0.5, ease: "power1.out" } 826 // ); 827 // gsap.from("#quater3", { 828 // duration: 0.5, 829 // opacity: 0, 830 // delay: 0.5, 831 // ease: "power1.out", 832 // }); 833 // gsap.from("#arrow4", { 834 // duration: 0.5, 835 // visibility: "hidden", 836 // delay: 0.5, 837 // ease: "power1.out", 838 // }); 839 // gsap.from("#textContainer4", { 840 // duration: 0.5, 841 // opacity: 0, 842 // x: "-10%", 843 // delay: 0.8, 844 // ease: "power1.out", 845 // }); 846 // gsap.from("#roadmapImg4", { 847 // duration: 0.5, 848 // opacity: 0, 849 // delay: 0.8, 850 // ease: "power1.out", 851 // }); 852 // gsap.fromTo( 853 // "#line4", 854 // { width: "0%" }, 855 // { duration: 0.5, width: "85%", delay: 0.8, ease: "power1.out" } 856 // ); 857 // gsap.from("#quater4", { 858 // duration: 0.5, 859 // opacity: 0, 860 // delay: 0.8, 861 // ease: "power1.out", 862 // }); 863 // gsap.from(".roadmapHeading", { 864 // duration: 0.5, 865 // opacity: 0, 866 // x: "-20%", 867 // delay: 1, 868 // ease: "power1.out", 869 // }); 870 // restartGIF(); 871} 872 873function restartGIF() { 874 let gifImage = document.getElementById("roadmapGif"); 875 var currentSource = gifImage.src; 876 877 // Add a timestamp as a query parameter to force reloading the image 878 var newSource = currentSource + "?t=" + new Date().getTime(); 879 880 // Change the source of the image 881 gifImage.src = newSource; 882} 883 884function productImageAnimation() { 885 const bullCondition = 886 document.getElementById("productImageBull").style.display !== "none"; 887 const bankCondition = 888 document.getElementById("productImageBank").style.display !== "none";
889 const flowersCondition = 890 document.getElementById("productImageFlowers").style.display !== "none"; 891 const faucetCondition = 892 document.getElementById("productImageFaucet").style.display !== "none"; 893 894 // if (bullCondition) { 895 // gsap.fromTo( 896 // "#productImageBull", 897 // { 898 // // duration: 0.5, 899 // x: "-60%", 900 // transform: "scale(0.5, 1)", 901 // // ease: "power1.out", 902 // }, 903 // { 904 // duration: 0.5, 905 // x: "0%", 906 // transform: "scale(1, 1)", 907 // ease: "power1.out", 908 // } 909 // ); 910 // } else if (bankCondition) { 911 // gsap.fromTo( 912 // "#productImageBank", 913 // { 914 // // duration: 0.5, 915 // y: "60%", 916 // transform: "scale(1, 0.5)", 917 // // ease: "power1.out", 918 // }, 919 // { 920 // duration: 0.5, 921 // y: "0%", 922 // transform: "scale(1, 1)", 923 // ease: "power1.out", 924 // } 925 // ); 926 // } else if (flowersCondition) { 927 // gsap.fromTo( 928 // "#productImageFlowers", 929 // { 930 // // duration: 0.5, 931 // y: "60%", 932 // transform: "scale(1, 0.5)", 933 // // ease: "power1.out", 934 // }, 935 // { 936 // duration: 0.5, 937 // y: "0%", 938 // transform: "scale(1, 1)", 939 // ease: "power1.out", 940 // } 941 // ); 942 // } else if (faucetCondition) { 943 // gsap.fromTo( 944 // "#productImageFaucet", 945 // { 946 // // duration: 0.5, 947 // y: "-60%", 948 // transform: "scale(1, 0.5)", 949 // // ease: "power1.out", 950 // }, 951 // { 952 // duration: 0.5, 953 // y: "0%", 954 // transform: "scale(1, 1)", 955 // ease: "power1.out", 956 // } 957 // ); 958 // } 959} 960 961function featuresImageAnimation() { 962 const gearCondition = 963 document.getElementById("featureImageGear").style.display !== "none"; 964 const arrowTargetCondition = 965 document.getElementById("featureImageArrowTarget").style.display !== "none"; 966 const leverageCondition = 967 document.getElementById("featureImageLeverage").style.display !== "none"; 968 const rudderCondition = 969 document.getElementById("featureImageRudder").style.display !== "none"; 970 971 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 972 973 // if (gearCondition) { 974 // if (isMobile) { 975 // gsap.from("#featureImageGear", { 976 // duration: 0.5, 977 // y: "50%", 978 // transform: "scale(1, 0.5)", 979 // ease: "power1.out", 980 // }); 981 // } else { 982 // // gsap.from("#featureImageGear", { 983 // // duration: 0.5, 984 // // x: "50%", 985 // // opacity: 0, 986 // // transform: "scale(0.5, 1)", 987 // // transform: "rotate(15deg)", 988 // // ease: "power1.out", 989 // // }); 990 // } 991 // } else if (arrowTargetCondition) { 992 // if (isMobile) { 993 // gsap.from("#featureImageArrowTarget", { 994 // duration: 0.5, 995 // y: "50%", 996 // transform: "scale(1, 0.5)", 997 // ease: "power1.out", 998 // }); 999 // } else { 1000 // // gsap.from("#featureImageArrowTarget", { 1001 // // duration: 0.5, 1002 // // x: "50%", 1003 // // opacity: 0, 1004 // // transform: "scale(0.5, 1)", 1005 // // transform: "rotate(15deg)", 1006 // // ease: "power1.out", 1007 // // }); 1008 // } 1009 // } else if (leverageCondition) { 1010 // // gsap.from("#featureImageLeverage", { 1011 // // duration: 0.5, 1012 // // y: "50%", 1013 // // transform: "scale(1, 0.5)", 1014 // // ease: "power1.out", 1015 // // }); 1016 // } else if (rudderCondition) { 1017 // if (isMobile) { 1018 // gsap.from("#featureImageRudder", { 1019 // duration: 0.5, 1020 // y: "50%", 1021 // transform: "scale(1, 0.5)", 1022 // ease: "power1.out", 1023 // }); 1024 // } else { 1025 // // gsap.from("#featureImageRudder", { 1026 // // duration: 0.5, 1027 // // x: "50%", 1028 // // opacity: 0, 1029 // // transform: "scale(0.5, 1)", 1030 // // transform: "rotate(15deg)", 1031 // // ease: "power1.out", 1032 // // }); 1033 // } 1034 // } 1035} 1036 1037function teamPageAnimations() { 1038 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 1039 if (isMobile || screen.width < 1025) { 1040 // left 1041 // gsap.to(".ImgContainerMobileVerticalLeft", { 1042 // duration: 0.3, 1043 // height: "100%", 1044 // ease: "power1.out", 1045 // visibility: "visible", 1046 // ease: "power1.out", 1047 // }); 1048 // gsap.to(".ImgContainerMobileVerticalLeft", { 1049 // duration: 0.3, 1050 // delay: 0.4, 1051 // height: "0%", 1052 // top: "unset", 1053 // bottom: 0, 1054 // ease: "power1.out", 1055 // ease: "power1.out", 1056 // }); 1057 // gsap.to(".ImgContainerMobileVerticalLeft", { 1058 // duration: 0.1, 1059 // delay: 0.8, 1060 // height: "0%", 1061 // visibility: "hidden", 1062 // top: 0, 1063 // bottom: "unset", 1064 // }); 1065 // // right 1066 // gsap.to(".ImgContainerMobileVerticalRight", { 1067 // duration: 0.3, 1068 // height: "100%", 1069 // ease: "power1.out", 1070 // visibility: "visible", 1071 // delay: 0.4, 1072 // ease: "power1.out", 1073 // }); 1074 // gsap.to(".ImgContainerMobileVerticalRight", { 1075 // duration: 0.3, 1076 // delay: 0.4, 1077 // height: "0%", 1078 // bottom: "unset", 1079 // top: 0, 1080 // ease: "power1.out", 1081 // delay: 0.9, 1082 // ease: "power1.out", 1083 // }); 1084 // gsap.to(".ImgContainerMobileVerticalRight", { 1085 // duration: 0.1, 1086 // delay: 1.5, 1087 // height: "0%", 1088 // bottom: 0, 1089 // top: "unset", 1090 // visibility: "hidden", 1091 // }); 1092 // // top 1093 // gsap.to(".ImgContainerMobileHorizontalTop", { 1094 // duration: 0.3, 1095 // width: "100%", 1096 // ease: "power1.out", 1097 // visibility: "visible", 1098 // delay: 0.4, 1099 // ease: "power1.out", 1100 // }); 1101 // gsap.to(".ImgContainerMobileHorizontalTop", { 1102 // duration: 0.3, 1103 // delay: 0.4, 1104 // width: "0%", 1105 // right: "unset",
1106 // left: 0, 1107 // ease: "power1.out", 1108 // delay: 0.9, 1109 // ease: "power1.out", 1110 // }); 1111 // gsap.to(".ImgContainerMobileHorizontalTop", { 1112 // duration: 0.1, 1113 // delay: 1.5, 1114 // width: "0%", 1115 // right: 0, 1116 // left: "unset", 1117 // visibility: "hidden", 1118 // }); 1119 // // bottom 1120 // gsap.to(".ImgContainerMobileHorizontalBottom", { 1121 // duration: 0.3, 1122 // width: "100%", 1123 // ease: "power1.out", 1124 // visibility: "visible", 1125 // delay: 1, 1126 // ease: "power1.out", 1127 // }); 1128 // gsap.to(".ImgContainerMobileHorizontalBottom", { 1129 // duration: 0.3, 1130 // delay: 1.4, 1131 // width: "0%", 1132 // right: 0, 1133 // left: "unset", 1134 // ease: "power1.out", 1135 // delay: 1.4, 1136 // }); 1137 // gsap.to(".ImgContainerMobileHorizontalBottom", { 1138 // duration: 0.1, 1139 // delay: 2, 1140 // width: "0%", 1141 // right: "unset", 1142 // left: 0, 1143 // visibility: "hidden", 1144 // }); 1145 // gsap.from(".teamHeaderMobile", { 1146 // duration: 0.5, 1147 // delay: 1, 1148 // opacity: 0, 1149 // x: "-20%", 1150 // ease: "power1.out", 1151 // }); 1152 // gsap.from(".teamImgMobile", { 1153 // duration: 0.5, 1154 // delay: 1, 1155 // opacity: 0, 1156 // ease: "power1.out", 1157 // }); 1158 // gsap.from(".teamDescriptionWrapperMobile", { 1159 // duration: 0.5, 1160 // delay: 1.2, 1161 // opacity: 0, 1162 // x: "-20%", 1163 // ease: "power1.out", 1164 // }); 1165 // gsap.from(".nameMobileContainer", { 1166 // duration: 0.5, 1167 // delay: 1.2, 1168 // opacity: 0, 1169 // x: "-10%", 1170 // ease: "power1.out", 1171 // }); 1172 // gsap.from(".swipeImg", { 1173 // duration: 0.5, 1174 // delay: 1.5, 1175 // opacity: 0, 1176 // ease: "power1.out", 1177 // }); 1178 // gsap.fromTo( 1179 // ".teamBottomLineMobile", 1180 // { width: "0%", visibility: "visible" }, 1181 // { 1182 // duration: 0.5, 1183 // delay: 1.2, 1184 // width: "100%", 1185 // ease: "power1.out", 1186 // } 1187 // ); 1188 // gsap.to(".teamBottomLineMobile", { 1189 // duration: 0.5, 1190 // delay: 1.6, 1191 // width: "80%", 1192 // ease: "power1.out", 1193 // }); 1194 // gsap.to(".teamBottomLineMobile", { 1195 // duration: 0.1, 1196 // delay: 2, 1197 // visibility: "hidden", 1198 // }); 1199 } else { 1200 // gsap.to(".horizontalLine", { 1201 // duration: 0.5, 1202 // width: "90%", 1203 // ease: "power1.out", 1204 // visibility: "visible", 1205 // }); 1206 // gsap.to(".horizontalLine", { 1207 // duration: 0.5, 1208 // delay: 0.4, 1209 // width: "0%", 1210 // alignSelf: "flex-start", 1211 // ease: "power1.out", 1212 // }); 1213 // gsap.to(".horizontalLine", { 1214 // duration: 0.1, 1215 // delay: 0.8, 1216 // width: "0%", 1217 // height: "1%", 1218 // visibility: "hidden", 1219 // alignSelf: "flex-end", 1220 // }); 1221 // gsap.to(".fromTop", { 1222 // duration: 0.5, 1223 // height: "100%", 1224 // ease: "power1.out", 1225 // visibility: "visible", 1226 // }); 1227 // gsap.to(".fromTop", { 1228 // duration: 0.5, 1229 // delay: 0.4, 1230 // height: "0%", 1231 // alignSelf: "flex-end", 1232 // ease: "power1.out", 1233 // }); 1234 // gsap.to(".fromTop", { 1235 // duration: 0.1, 1236 // delay: 0.8, 1237 // height: "0%", 1238 // width: "1px", 1239 // visibility: "hidden", 1240 // alignSelf: "flex-start", 1241 // }); 1242 // gsap.to(".fromBottom", { 1243 // duration: 0.5, 1244 // height: "100%", 1245 // width: "1px", 1246 // ease: "power1.out", 1247 // visibility: "visible", 1248 // }); 1249 // gsap.to(".fromBottom", { 1250 // duration: 0.5, 1251 // delay: 0.4, 1252 // height: "0%", 1253 // alignSelf: "flex-start", 1254 // ease: "power1.out", 1255 // }); 1256 // gsap.to(".fromBottom", { 1257 // duration: 0.1, 1258 // delay: 0.8, 1259 // height: "0%", 1260 // visibility: "hidden", 1261 // alignSelf: "flex-end", 1262 // }); 1263 } 1264} 1265 1266function contactAnimations() { 1267 // gsap.fromTo( 1268 // ".animationContactImgLeft",
1269 // { left: "-35%" }, 1270 // { 1271 // duration: 1.5, 1272 // display: "block", 1273 // left: "0%", 1274 // ease: "power1.out", 1275 // } 1276 // ); 1277 // gsap.fromTo( 1278 // ".animationContactImgRight", 1279 // { right: "-40%" }, 1280 // { 1281 // duration: 1.5, 1282 // display: "block", 1283 // right: "0%", 1284 // ease: "power1.out", 1285 // } 1286 // ); 1287 // gsap.fromTo( 1288 // ".contactContent", 1289 // { visibility: "hidden", zIndex: 0 }, 1290 // { duration: 0.1, visibility: "visible", zIndex: 4, delay: 1 } 1291 // ); 1292 // gsap.from(".gammaoptions", { 1293 // duration: 0.5, 1294 // opacity: 0, 1295 // y: "-20%", 1296 // delay: 0.3, 1297 // }); 1298 // gsap.from(".britishVirginIslands", { 1299 // duration: 0.5, 1300 // opacity: 0, 1301 // y: "-20%", 1302 // delay: 0.8, 1303 // }); 1304 // gsap.fromTo( 1305 // "#contactPageImg", 1306 // { 1307 // transform: "scale(1, 0.3)", 1308 // y: "20%", 1309 // }, 1310 // { 1311 // duration: 0.8, 1312 // y: "0%", 1313 // transform: "scale(1, 1)", 1314 // ease: "power1.out", 1315 // } 1316 // ); 1317} 1318 1319function landingPageAnimations() { 1320 // gsap.fromTo( 1321 // ".landingPageImg", 1322 // { 1323 // transform: "scale(1, 0.3)", 1324 // // position: "absolute", 1325 // background: "transparent", 1326 // mixBlendMode: "lighten", 1327 // // bottom: "0", 1328 // // right: "0", 1329 // y: "30%", 1330 // }, 1331 // { 1332 // duration: 0.8, 1333 // y: "0%", 1334 // transform: "scale(1, 1)", 1335 // mixBlendMode: "lighten", 1336 // background: "transparent", 1337 // ease: "power1.out", 1338 // } 1339 // ); 1340}
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.