1/*************************************************** 2==================== JS INDEX ====================== 3**************************************************** 400. Preloader 501. Cursor Animations 602. Offcanvas 703. Scroll Top 804. Modals 905. Header 1 1006. Header 2 1107. Header 3 1208. Header 5 1309. Header Search 1410. Roll Slider 1511. Workflow Slider 1612. Team Slider 1713. Testimonial Slider 1814. Testimonial Slider 3 1915. Portfolio Slider 2016. Service 1 2117. Counter 2218. Button Hover Animation 2319. Button Move Animation 2420. Register GSAP 2521. Config GSAP 2622. Service 6 2723. Choose Section 2824. Portfolio 5 Animation 2925. Title Animation 3026. Title Animation Top 3127. Text Animation 3228. Text Animation Top 3329. Offcanvas Menu 3430. Service 3 3531. Folks animation 3632. Menu Text Animation 3733. Main Portfolio Sticky 3834. Hero 3 Animation 3935. Home Page 2 Animations 4036. Award Animation 4137. Portfolio Main Slider 4238. Portfolio Animation 4339. Portfolio Slider 2 4440. Portfolio Slider 3 4541. Image Moving Animations 4642. Counter Animation 4743. Workflow Slider Animation | animation__fade 4844. Workflow Slider Animation 2 | fade_bottom 4945. Blog animation 5046. Blog animation 2 5147. Blog Animation 3 5248. Zoom In Animation 5349. Service 3 Animation 5450. Testimonial 2 Animation 5551. Testimonial 3 Image Animation 5652. Pricing Table Animation 5753. Service 2 Animation 5854. Hero 1 Animation 5955. Service 1 Animation 6056. Features 2 Animation 6157. Portfolio 6 Animation 6258. Portfolio 5 Border 6359. Portfolio Main Slider 6460. Portfolio Slider 6 6561. Testimonial Slider 4 6662. Team 7 6763.Portfolio Slider 7 6864. Header 7 6965. Service 7 Animation 70****************************************************/ 71 72(function ($) { 73 "use strict"; 74 75 // Get Device width 76 let device_width = window.innerWidth; 77 78 ///////////////////////////////////////////////////// 79 // 00. Preloader 80 $(document).ready(function () { 81 $(".preloader").hide(); 82 }); 83 ///////////////////////////////////////////////////// 84 85 // 07. Data backgrond 86 $("[data-background").each(function () { 87 $(this).css( 88 "background-image", 89 "url( " + $(this).attr("data-background") + " )" 90 ); 91 }); 92 93 ///////////////////////////////////////////////////// 94 // HERO - 9 95 96 var testimonial_4 = new Swiper(".hero-9", { 97 pagination: { 98 el: ".swiper-pagination", 99 type: "fraction", 100 }, 101 navigation: { 102 nextEl: ".swiper-button-next", 103 prevEl: ".swiper-button-prev", 104 }, 105 direction: "horizontal", 106 loop: true, 107 slidesPerView: 1, 108 spaceBetween: 30, 109 mousewheel: false, 110 pagination: { 111 el: ".swiper-pagination", 112 type: "fraction", 113 clickable: true, 114 115 renderFraction: function (currentClass, totalClass) { 116 return ( 117 '<span class="' + 118 currentClass + 119 '"></span>' + 120 ' <span><i class="fa-solid fa-minus increase-dash"></i></span> ' + 121 '<span class="' + 122 totalClass + 123 '"></span>' 124 ); 125 }, 126 }, 127 breakpoints: { 128 1200: { 129 slidesPerView: 1, 130 }, 131 768: { 132 slidesPerView: 1, 133 }, 134 320: { 135 slidesPerView: 1, 136 }, 137 }, 138 }); 139 140 ///////////////////////////////////////////////////// 141 // 01. Cursor Animations 142 143 // Home Page Client Cursor 144 var client_cursor = document.getElementById("client_cursor"); 145 146 // Team Page Team Cursor 147 var team_cursor = document.getElementById("team_cursor"); 148 149 // Portfolio Cursor 150 var portf_cursor_6 = document.getElementById("portf_cursor_6"); 151 152 // Featured Cursor 153 var featured_cursor = document.getElementById("featured_cursor"); 154 155 var portfolio4_cursor = document.getElementById("portfolio4_cursor"); 156 157 function mousemoveHandler(e) { 158 try { 159 const target = e.target; 160 161 let tl = gsap.timeline({ 162 defaults: { 163 x: e.clientX, 164 y: e.clientY, 165 }, 166 }); 167 let t2 = gsap.timeline({ 168 defaults: { 169 x: e.clientX, 170 y: e.clientY, 171 }, 172 }); 173 174 // Home Page Client Cursor 175 if (target.closest(".testimonial__img")) { 176 tl.to( 177 client_cursor, 178 { 179 opacity: 1, 180 ease: "power4.out", 181 }, 182 "-=0.3" 183 ); 184 } else { 185 t2.to( 186 client_cursor, 187 { 188 opacity: 0, 189 ease: "power4.out", 190 }, 191 "-=0.3" 192 ); 193 } 194 195 // Team Page Team Cursor 196 if (target.closest(".team__slider")) { 197 tl.to( 198 team_cursor, 199 { 200 opacity: 1, 201 ease: "power4.out", 202 }, 203 "-=0.3" 204 ); 205 } else { 206 t2.to( 207 team_cursor, 208 { 209 opacity: 0, 210 ease: "power4.out", 211 }, 212 "-=0.3" 213 ); 214 } 215 216 // Portfolio Cursor 217 if (target.closest(".portfolio__item-6")) { 218 tl.to( 219 portf_cursor_6, 220 { 221 opacity: 1, 222 ease: "power4.out", 223 }, 224 "-=0.3" 225 ); 226 } else { 227 t2.to( 228 portf_cursor_6, 229 { 230 opacity: 0, 231 ease: "power4.out", 232 }, 233 "-=0.3" 234 ); 235 } 236 // Portfolio Cursor 237 if (target.closest(".portfolio__item-6")) { 238 tl.to( 239 portf_cursor_6, 240 { 241 opacity: 1, 242 ease: "power4.out", 243 }, 244 "-=0.3" 245 ); 246 } else { 247 t2.to( 248 portf_cursor_6, 249 { 250 opacity: 0, 251 ease: "power4.out", 252 }, 253 "-=0.3" 254 ); 255 } 256 257 // featured Cursor 258 if (target.closest(".portfolio__slider-3")) { 259 tl.to( 260 featured_cursor, 261 { 262 opacity: 1, 263 ease: "power4.out", 264 }, 265 "-=0.3" 266 ); 267 } else { 268 t2.to( 269 featured_cursor, 270 { 271 opacity: 0, 272 ease: "power4.out", 273 }, 274 "-=0.3" 275 ); 276 } 277 278 // featured Cursor 279 if (target.closest(".portfolio__area-5")) { 280 tl.to( 281 portfolio4_cursor, 282 { 283 opacity: 1, 284 ease: "power4.out", 285 }, 286 "-=0.3" 287 ); 288 } else { 289 t2.to( 290 portfolio4_cursor, 291 { 292 opacity: 0, 293 ease: "power4.out", 294 }, 295 "-=0.3" 296 ); 297 } 298 299 // Main Cursor Moving 300 tl.to(".cursor1", { 301 ease: "power2.out", 302 }).to( 303 ".cursor2", 304 { 305 ease: "power2.out", 306 }, 307 "-=0.4" 308 ); 309 } catch (error) { 310 console.log(error); 311 } 312 } 313 document.addEventListener("mousemove", mousemoveHandler); 314 ///////////////////////////////////////////////////// 315 316 ///////////////////////////////////////////////////// 317 // 02. Offcanvas 318 $("#open_offcanvas").click(function () { 319 $(".offcanvas__area").css("opacity", "1"); 320 $(".offcanvas__area").css("visibility", "visible"); 321 }); 322 $("#close_offcanvas").click(function () { 323 $(".offcanvas__area").css("opacity", "0"); 324 $(".offcanvas__area").css("visibility", "hidden"); 325 }); 326 ///////////////////////////////////////////////////// 327 328 ///////////////////////////////////////////////////// 329 // 03. Scroll Top 330 let scroll_top = document.getElementById("scroll_top"); 331 if (scroll_top) { 332 window.onscroll = function () { 333 if ( 334 document.body.scrollTop > 50 || 335 document.documentElement.scrollTop > 50 336 ) { 337 scroll_top.style.display = "block"; 338 } else { 339 scroll_top.style.display = "none"; 340 } 341 }; 342 343 scroll_top.addEventListener("click", function () { 344 document.body.scrollTop = 0; 345 document.documentElement.scrollTop = 0; 346 }); 347 } 348 /////////////////////////////////////////////// 349 350 ///////////////////////////////////////////////////// 351 // 04. Modals 352 var testimonial = document.querySelector(".testimonial__area"); 353 if (testimonial) { 354 // Testimonial Modal 1 355 var modal_testimonial = document.querySelector("#modal_testimonial"); 356 var modal_trigger = document.querySelector(".modal-trigger"); 357 var modal_close = document.querySelector("#modal_close"); 358 359 modal_trigger.addEventListener("click", function () { 360 modal_testimonial.classList.add("modal-show"); 361 }); 362 modal_close.addEventListener("click", function () { 363 modal_testimonial.classList.remove("modal-show"); 364 }); 365 366 // Testimonial Modal 2 367 var modal_testimonial_2 = document.querySelector("#modal_testimonial2"); 368 var modal_trigger_2 = document.querySelector(".modal-trigger-2"); 369 var modal_close_2 = document.querySelector("#modal_close2"); 370 371 modal_trigger_2.addEventListener("click", function () { 372 modal_testimonial_2.classList.add("modal-show"); 373 }); 374 modal_close_2.addEventListener("click", function () { 375 modal_testimonial_2.classList.remove("modal-show"); 376 }); 377 378 // Testimonial Modal 3 379 var modal_testimonial_3 = document.querySelector("#modal_testimonial3"); 380 var modal_trigger_3 = document.querySelector(".modal-trigger-3"); 381 var modal_close_3 = document.querySelector("#modal_close3"); 382 383 modal_trigger_3.addEventListener("click", function () { 384 modal_testimonial_3.classList.add("modal-show"); 385 }); 386 modal_close_3.addEventListener("click", function () { 387 modal_testimonial_3.classList.remove("modal-show"); 388 }); 389 } 390 391 var job_apply = document.querySelector(".job__apply"); 392 if (job_apply) { 393 // application Modal 1 394 var modal_application = document.querySelector("#application_form"); 395 var apply_trigger = document.querySelector(".job__apply"); 396 var apply_close = document.querySelector("#apply_close"); 397 398 apply_trigger.addEventListener("click", function () { 399 modal_application.classList.add("modal-show"); 400 }); 401 apply_close.addEventListener("click", function () { 402 modal_application.classList.remove("modal-show"); 403 }); 404 405 // application Modal 2 406 var modal_application_2 = document.querySelector("#application_form2"); 407 var apply_trigger_2 = document.querySelector(".apply-trigger"); 408 var apply_close_2 = document.querySelector("#apply_close2"); 409 var back_form1 = document.querySelector("#back_form1"); 410 411 apply_trigger_2.addEventListener("click", function () { 412 modal_application_2.classList.add("modal-show"); 413 }); 414 apply_close_2.addEventListener("click", function () { 415 modal_application_2.classList.remove("modal-show"); 416 modal_application.classList.remove("modal-show"); 417 }); 418 back_form1.addEventListener("click", function () { 419 modal_application_2.classList.remove("modal-show"); 420 }); 421 } 422 ///////////////////////////////////////////////////// 423 424 ///////////////////////////////////////////////////// 425 // 05. Header 1 426 if (device_width < 1365) { 427 let header_bg = document.querySelector(".header__area"); 428 429 if (header_bg) { 430 window.onscroll = function () { 431 if ( 432 document.body.scrollTop > 20 || 433 document.documentElement.scrollTop > 20 434 ) { 435 header_bg.style.background = "#121212"; 436 header_bg.style.setProperty("mix-blend-mode", "unset"); 437 if (scroll_top) { 438 scroll_top.style.display = "block"; 439 } 440 } else { 441 header_bg.style.background = "transparent";
442 header_bg.style.setProperty("mix-blend-mode", "exclusion"); 443 if (scroll_top) { 444 scroll_top.style.display = "none"; 445 } 446 } 447 }; 448 } 449 } 450 ///////////////////////////////////////////////////// 451 452 ///////////////////////////////////////////////////// 453 // 06. Header 2 454 let header_bg_2 = document.querySelector(".header__area-2"); 455 if (header_bg_2) { 456 window.onscroll = function () { 457 if ( 458 document.body.scrollTop > 20 || 459 document.documentElement.scrollTop > 20 460 ) { 461 header_bg_2.style.background = "#121212"; 462 header_bg_2.classList.add("sticky-2"); 463 if (scroll_top) { 464 scroll_top.style.display = "block"; 465 } 466 } else { 467 header_bg_2.style.background = "transparent"; 468 header_bg_2.classList.remove("sticky-2"); 469 if (scroll_top) { 470 scroll_top.style.display = "none"; 471 } 472 } 473 }; 474 } 475 ///////////////////////////////////////////////////// 476 477 ///////////////////////////////////////////////////// 478 // 07. Header 3 479 let header_bg_3 = document.querySelector(".header__area-3"); 480 if (header_bg_3) { 481 window.onscroll = function () { 482 if ( 483 document.body.scrollTop > 20 || 484 document.documentElement.scrollTop > 20 485 ) { 486 header_bg_3.classList.add("sticky-3"); 487 if (scroll_top) { 488 scroll_top.style.display = "block"; 489 } 490 } else { 491 header_bg_3.classList.remove("sticky-3"); 492 if (scroll_top) { 493 scroll_top.style.display = "none"; 494 } 495 } 496 }; 497 } 498 ///////////////////////////////////////////////////// 499 500 ///////////////////////////////////////////////////// 501 // 08. Header 5 502 let header_bg_5 = document.querySelector(".header__area-5"); 503 if (header_bg_5) { 504 window.onscroll = function () { 505 if ( 506 document.body.scrollTop > 20 || 507 document.documentElement.scrollTop > 20 508 ) { 509 header_bg_5.classList.add("sticky-5"); 510 if (scroll_top) { 511 scroll_top.style.display = "block"; 512 } 513 } else { 514 header_bg_5.classList.remove("sticky-5"); 515 if (scroll_top) { 516 scroll_top.style.display = "none"; 517 } 518 } 519 }; 520 } 521 ///////////////////////////////////////////////////// 522 523 ///////////////////////////////////////////////////// 524 // 09. Header Search 525 let header_search = document.querySelector(".header__search"); 526 let search_icon = document.querySelector("#search_icon"); 527 let search_close = document.querySelector("#search_close"); 528 if (header_search) { 529 search_icon.addEventListener("click", function () { 530 header_search.classList.add("open-search"); 531 search_icon.style.display = "none"; 532 search_close.style.display = "block"; 533 }); 534 535 search_close.addEventListener("click", function () { 536 header_search.classList.remove("open-search"); 537 search_icon.style.display = "block"; 538 search_close.style.display = "none"; 539 }); 540 } 541 ///////////////////////////////////////////////////// 542 543 ///////////////////////////////////////////////////// 544 // 10. Roll Slider 545 var roll_slider = new Swiper(".roll__slider", { 546 loop: true, 547 freemode: true, 548 slidesPerView: 1, 549 spaceBetween: 0, 550 centeredSlides: true, 551 allowTouchMove: false, 552 speed: 2000, 553 autoplay: { 554 delay: 1, 555 disableOnInteraction: true, 556 }, 557 breakpoints: { 558 640: { 559 slidesPerView: 3, 560 }, 561 800: { 562 slidesPerView: 3, 563 }, 564 1024: { 565 slidesPerView: 4, 566 }, 567 1300: { 568 slidesPerView: 5, 569 }, 570 1900: { 571 slidesPerView: 8, 572 }, 573 }, 574 }); 575 // 10. Roll Slider 576 var roll_slider = new Swiper(".roll__slider2", { 577 loop: true, 578 freemode: true, 579 slidesPerView: 1, 580 spaceBetween: 60, 581 centeredSlides: false, 582 allowTouchMove: false, 583 speed: 10000, 584 autoplay: { 585 delay: 1, 586 disableOnInteraction: true, 587 }, 588 }); 589 ///////////////////////////////////////////////////// 590 591 ///////////////////////////////////////////////////// 592 // 11. Workflow Slider 593 var workflow_slider = new Swiper(".workflow__slider", { 594 loop: true, 595 freemode: true, 596 slidesPerView: 1, 597 spaceBetween: 0, 598 speed: 2000,
599 breakpoints: { 600 640: { 601 slidesPerView: 2, 602 }, 603 768: { 604 slidesPerView: 2, 605 }, 606 1024: { 607 slidesPerView: 3, 608 }, 609 1200: { 610 slidesPerView: 4, 611 }, 612 }, 613 autoplay: { 614 delay: 2000, 615 disableOnInteraction: false, 616 }, 617 pagination: { 618 el: ".swiper-pagination", 619 type: "fraction", 620 }, 621 navigation: { 622 nextEl: ".swiper-button-next", 623 prevEl: ".swiper-button-prev", 624 }, 625 }); 626 ///////////////////////////////////////////////////// 627 628 ///////////////////////////////////////////////////// 629 // 13. Testimonial Slider 630 var testimonial_slider = new Swiper(".testimonial__slider", { 631 spaceBetween: 0, 632 loop: true, 633 freemode: true, 634 slidesPerView: 1, 635 speed: 2000, 636 637 navigation: { 638 nextEl: ".next-button", 639 prevEl: ".prev-button", 640 }, 641 }); 642 ///////////////////////////////////////////////////// 643 644 ///////////////////////////////////////////////////// 645 // 14. Testimonial Slider 3 646 var testimonial_slider_3 = new Swiper(".testimonial__slider-3", { 647 spaceBetween: 0, 648 loop: true, 649 freemode: true, 650 slidesPerView: 1, 651 speed: 2000, 652 653 navigation: { 654 nextEl: ".next-button", 655 prevEl: ".prev-button", 656 }, 657 }); 658 ///////////////////////////////////////////////////// 659 660 ///////////////////////////////////////////////////// 661 // 15. Portfolio Slider 662 var total_portfolio_item = $(".portfolio__item-6").length; 663 if (total_portfolio_item) { 664 $(".portfolio__total").html(total_portfolio_item); 665 } 666 667 $(document).on("scroll", function () { 668 $(".portfolio__item-6").each(function () { 669 if ( 670 $(this).position().top <= $(document).scrollTop() && 671 $(this).position().top + $(this).outerHeight() > $(document).scrollTop() 672 ) { 673 var item_num = $(this).data("portfitem"); 674 $(".portfolio__current").html(item_num); 675 $(this).addClass("active").siblings().removeClass("active"); 676 } 677 }); 678 }); 679 ///////////////////////////////////////////////////// 680 681 ///////////////////////////////////////////////////// 682 // 16. Service 1 683 $(".service__list a:nth-child(1)") 684 .addClass("active") 685 .siblings() 686 .removeClass("acitve"); 687 688 $(".service__item").on("mousemove", function (e) { 689 var service_id = $(this).data("service"); 690 691 $(".service__img.img-" + service_id) 692 .addClass("active") 693 .siblings() 694 .removeClass("active"); 695 $(".shape-box-" + service_id) 696 .addClass("current") 697 .siblings() 698 .removeClass("current"); 699 700 if (service_id != 1) { 701 $(".service__list a:nth-child(1)").removeClass("active"); 702 } 703 }); 704 705 $(".service__item").on("mouseout", function (e) { 706 var service_id = $(this).data("service"); 707 708 $(".service__list a:nth-child(" + service_id + ")") 709 .addClass("active") 710 .siblings() 711 .removeClass("active"); 712 }); 713 ///////////////////////////////////////////////////// 714 715 ///////////////////////////////////////////////////// 716 // 17. Counter 717 const about_counter = window.counterUp.default; 718 const about_cb = (entries) => { 719 entries.forEach((entry) => { 720 const el = entry.target; 721 if (entry.isIntersecting && !el.classList.contains("is-visible")) { 722 about_counter(el, { 723 duration: 1000, 724 delay: 16, 725 }); 726 el.classList.add("is-visible"); 727 } 728 }); 729 }; 730 731 const IO = new IntersectionObserver(about_cb, { 732 threshold: 1, 733 }); 734 735 const els = document.querySelectorAll(".counter__number");
736 els.forEach((el) => { 737 IO.observe(el); 738 }); 739 ///////////////////////////////////////////////////// 740 741 ///////////////////////////////////////////////////// 742 // 18. Button Hover Animation 743 $(".btn-hover").on("mouseenter", function (e) { 744 var x = e.pageX - $(this).offset().left; 745 var y = e.pageY - $(this).offset().top; 746 747 $(this).find("span").css({ 748 top: y, 749 left: x, 750 }); 751 }); 752 753 $(".btn-hover").on("mouseout", function (e) { 754 var x = e.pageX - $(this).offset().left; 755 var y = e.pageY - $(this).offset().top; 756 757 $(this).find("span").css({ 758 top: y, 759 left: x, 760 }); 761 }); 762 ///////////////////////////////////////////////////// 763 764 ///////////////////////////////////////////////////// 765 // 19. Button Move Animation 766 const all_btns = gsap.utils.toArray(".btn_wrapper"); 767 if (all_btns.length > 0) { 768 var all_btn = gsap.utils.toArray(".btn_wrapper"); 769 } else { 770 var all_btn = gsap.utils.toArray("#btn_wrapper"); 771 } 772 const all_btn_cirlce = gsap.utils.toArray(".btn-item"); 773 all_btn.forEach((btn, i) => { 774 $(btn).mousemove(function (e) { 775 callParallax(e); 776 }); 777 function callParallax(e) { 778 parallaxIt(e, all_btn_cirlce[i], 80); 779 } 780 781 function parallaxIt(e, target, movement) { 782 var $this = $(btn); 783 var relX = e.pageX - $this.offset().left; 784 var relY = e.pageY - $this.offset().top; 785 786 gsap.to(target, 0.5, { 787 x: ((relX - $this.width() / 2) / $this.width()) * movement, 788 y: ((relY - $this.height() / 2) / $this.height()) * movement, 789 ease: Power2.easeOut, 790 }); 791 } 792 $(btn).mouseleave(function (e) { 793 gsap.to(all_btn_cirlce[i], 0.5, { 794 x: 0, 795 y: 0, 796 ease: Power2.easeOut, 797 }); 798 }); 799 }); 800 ///////////////////////////////////////////////////// 801 802 ///////////////////////////////////////////////////// 803 // 20. Register GSAP 804 gsap.registerPlugin(ScrollTrigger, ScrollSmoother, TweenMax, ScrollToPlugin); 805 ///////////////////////////////////////////////////// 806 807 ///////////////////////////////////////////////////// 808 // 21. Config GSAP 809 gsap.config({ 810 nullTargetWarn: false, 811 }); 812 ///////////////////////////////////////////////////// 813 814 ///////////////////////////////////////////////////// 815 // 22. Service 6 816 if (device_width > 1200) { 817 gsap.to(".service__list-6", { 818 scrollTrigger: { 819 trigger: ".service__area-6", 820 pin: ".service__list-6", 821 pinSpacing: true, 822 start: "top top", 823 end: "bottom bottom", 824 }, 825 }); 826 827 gsap.to(".service__image-wrap", { 828 scrollTrigger: { 829 trigger: ".service__area-6", 830 pin: ".mid-content", 831 pinSpacing: true, 832 start: "top top", 833 end: "bottom bottom", 834 markers: false, 835 }, 836 }); 837 838 let service_images = gsap.utils.toArray(".service__image"); 839 let service_imagess = gsap.utils.toArray(".service__image img"); 840 let service_items = gsap.utils.toArray(".service__item-6"); 841 842 if (service_items) { 843 service_items.forEach((image, i) => { 844 console.log(service_images[i].img); 845 let tl = gsap.timeline({ 846 scrollTrigger: { 847 trigger: image, 848 scrub: 1, 849 start: "top top-=600", 850 markers: false, 851 }, 852 }); 853 tl.to(service_images[i], { 854 zIndex: "1", 855 }); 856 tl.to( 857 service_imagess[i], 858 { 859 opacity: 0, 860 duration: 1, 861 scale: 1.2, 862 ease: "power4.out", 863 }, 864 "-=1" 865 ); 866 }); 867 } 868 869 let navItems = gsap.utils.toArray(".service__list-6 li a"); 870 if (navItems) { 871 navItems.forEach((nav) => { 872 nav.addEventListener("click", (e) => { 873 e.preventDefault(); 874 const ids = nav.getAttribute("href"); 875 gsap.to(window, { duration: 0.5, scrollTo: ids, ease: "power4.out" }); 876 }); 877 }); 878 } 879 880 // Active Nav 881 $(document).on("scroll", function () { 882 $(".service__item-6").each(function () { 883 if ( 884 $(this).position().top - 200 <= $(document).scrollTop() && 885 $(this).position().top - 200 + $(this).outerHeight() > 886 $(document).scrollTop() 887 ) { 888 var sec_id = $(this).data("secid"); 889 890 $(".service__list-6 li:nth-child(" + sec_id + ")") 891 .addClass("active") 892 .siblings() 893 .removeClass("active"); 894 } 895 }); 896 }); 897 } 898 ///////////////////////////////////////////////////// 899 900 ///////////////////////////////////////////////////// 901 // 23. Choose Section 902 if (device_width > 1200) { 903 var workflow_section_3 = document.querySelector(".workflow__wrapper-3"); 904 if (workflow_section_3) { 905 let duration = 1, 906 sections = gsap.utils.toArray(".wf_panel"), 907 sectionIncrement = duration / (sections.length - 1), 908 tl = gsap.timeline({ 909 scrollTrigger: { 910 trigger: ".workflow__wrapper-3", 911 pin: true, 912 scrub: 0.1, 913 start: "top top", 914 end: "+=2000", 915 }, 916 }); 917 918 tl.to(sections, { 919 xPercent: -100 * (sections.length - 1), 920 duration: duration, 921 ease: "none", 922 }); 923 924 sections.forEach((section, index) => { 925 let tween = gsap.from(section, { 926 opacity: 0, 927 scale: 1, 928 duration: 0.5, 929 force3D: true, 930 paused: true, 931 }); 932 addSectionCallbacks(tl, { 933 start: sectionIncrement * (index - 0.99), 934 end: sectionIncrement * (index + 0.99), 935 onEnter: () => tween.play(), 936 onLeave: () => tween.reverse(), 937 onEnterBack: () => tween.play(), 938 onLeaveBack: () => tween.reverse(), 939 }); 940 index || tween.progress(1); 941 }); 942 943 function addSectionCallbacks( 944 timeline, 945 { start, end, param, onEnter, onLeave, onEnterBack, onLeaveBack } 946 ) { 947 let trackDirection = (animation) => {
948 let onUpdate = animation.eventCallback("onUpdate"), 949 prevTime = animation.time(); 950 animation.direction = animation.reversed() ? -1 : 1; 951 animation.eventCallback("onUpdate", () => { 952 let time = animation.time(); 953 if (prevTime !== time) { 954 animation.direction = time < prevTime ? -1 : 1; 955 prevTime = time; 956 } 957 onUpdate && onUpdate.call(animation); 958 }); 959 }, 960 empty = (v) => v; 961 timeline.direction || trackDirection(timeline); 962 start >= 0 && 963 timeline.add( 964 () => 965 ((timeline.direction < 0 ? onLeaveBack : onEnter) || empty)( 966 param 967 ), 968 start 969 ); 970 end <= timeline.duration() && 971 timeline.add( 972 () => 973 ((timeline.direction < 0 ? onEnterBack : onLeave) || empty)( 974 param 975 ), 976 end 977 ); 978 } 979 } 980 } 981 ///////////////////////////////////////////////////// 982 983 ///////////////////////////////////////////////////// 984 // Choose Section 985 if (device_width > 1200) { 986 var workflow_section_3 = document.querySelector(".workflow__wrapper-10"); 987 if (workflow_section_3) { 988 let duration = 1, 989 sections = gsap.utils.toArray(".wf_panel-10"), 990 sectionIncrement = duration / (sections.length - 1), 991 tl = gsap.timeline({ 992 scrollTrigger: { 993 trigger: ".workflow__wrapper-10", 994 pin: true, 995 scrub: 0.5, 996 start: "top top", 997 end: "+=2000", 998 }, 999 }); 1000 1001 tl.to(sections, { 1002 xPercent: -100 * (sections.length - 1), 1003 duration: duration, 1004 ease: "none", 1005 }); 1006 1007 sections.forEach((section, index) => { 1008 let tween = gsap.from(section, { 1009 opacity: 0, 1010 scale: 1, 1011 duration: 0.5, 1012 force3D: true, 1013 paused: true, 1014 }); 1015 addSectionCallbacks(tl, { 1016 start: sectionIncrement * (index - 0.99), 1017 end: sectionIncrement * (index + 0.99), 1018 onEnter: () => tween.play(), 1019 onLeave: () => tween.reverse(), 1020 onEnterBack: () => tween.play(), 1021 onLeaveBack: () => tween.reverse(), 1022 }); 1023 index || tween.progress(1); 1024 }); 1025 1026 function addSectionCallbacks( 1027 timeline, 1028 { start, end, param, onEnter, onLeave, onEnterBack, onLeaveBack } 1029 ) { 1030 let trackDirection = (animation) => { 1031 let onUpdate = animation.eventCallback("onUpdate"), 1032 prevTime = animation.time(); 1033 animation.direction = animation.reversed() ? -1 : 1; 1034 animation.eventCallback("onUpdate", () => { 1035 let time = animation.time(); 1036 if (prevTime !== time) { 1037 animation.direction = time < prevTime ? -1 : 1; 1038 prevTime = time; 1039 } 1040 onUpdate && onUpdate.call(animation); 1041 }); 1042 }, 1043 empty = (v) => v; 1044 timeline.direction || trackDirection(timeline); 1045 start >= 0 && 1046 timeline.add( 1047 () => 1048 ((timeline.direction < 0 ? onLeaveBack : onEnter) || empty)( 1049 param 1050 ), 1051 start 1052 ); 1053 end <= timeline.duration() && 1054 timeline.add( 1055 () => 1056 ((timeline.direction < 0 ? onEnterBack : onLeave) || empty)( 1057 param 1058 ), 1059 end 1060 ); 1061 } 1062 } 1063 } 1064 if (device_width > 1200) { 1065 var workflow_section_11 = document.querySelector(".workflow__wrapper-11"); 1066 if (workflow_section_11) { 1067 let duration = 1, 1068 sections = gsap.utils.toArray(".wf_panel-11"), 1069 sectionIncrement = duration / (sections.length - 1), 1070 tl = gsap.timeline({ 1071 scrollTrigger: { 1072 trigger: ".workflow__wrapper-11", 1073 pin: true, 1074 scrub: 1, 1075 start: "top top", 1076 end: "+=7000", 1077 }, 1078 }); 1079 1080 tl.to(sections, { 1081 xPercent: -100 * (sections.length - 1), 1082 duration: duration, 1083 ease: "none", 1084 }); 1085 1086 sections.forEach((section, index) => { 1087 let tween = gsap.from(section, { 1088 opacity: 0, 1089 scale: 1, 1090 duration: 0.5, 1091 force3D: true, 1092 paused: true, 1093 }); 1094 addSectionCallbacks(tl, { 1095 start: sectionIncrement * (index - 0.99), 1096 end: sectionIncrement * (index + 0.99), 1097 onEnter: () => tween.play(), 1098 onLeave: () => tween.reverse(), 1099 onEnterBack: () => tween.play(), 1100 onLeaveBack: () => tween.reverse(), 1101 }); 1102 index || tween.progress(1); 1103 }); 1104 1105 function addSectionCallbacks( 1106 timeline, 1107 { start, end, param, onEnter, onLeave, onEnterBack, onLeaveBack } 1108 ) { 1109 let trackDirection = (animation) => {
1110 let onUpdate = animation.eventCallback("onUpdate"), 1111 prevTime = animation.time(); 1112 animation.direction = animation.reversed() ? -1 : 1; 1113 animation.eventCallback("onUpdate", () => { 1114 let time = animation.time(); 1115 if (prevTime !== time) { 1116 animation.direction = time < prevTime ? -1 : 1; 1117 prevTime = time; 1118 } 1119 onUpdate && onUpdate.call(animation); 1120 }); 1121 }, 1122 empty = (v) => v; 1123 timeline.direction || trackDirection(timeline); 1124 start >= 0 && 1125 timeline.add( 1126 () => 1127 ((timeline.direction < 0 ? onLeaveBack : onEnter) || empty)( 1128 param 1129 ), 1130 start 1131 ); 1132 end <= timeline.duration() && 1133 timeline.add( 1134 () => 1135 ((timeline.direction < 0 ? onEnterBack : onLeave) || empty)( 1136 param 1137 ), 1138 end 1139 ); 1140 } 1141 } 1142 } 1143 ///////////////////////////////////////////////////// 1144 1145 if (device_width > 100) { 1146 ///////////////////////////////////////////////////// 1147 // 24. Portfolio 5 Animation 1148 let skewSetter = gsap.quickTo(".portfolio__item-5 img", "skewY"), 1149 clamp = gsap.utils.clamp(-15, 15); 1150 const smoother = ScrollSmoother.create({ 1151 smooth: 1.35, 1152 effects: device_width < 1025 ? false : true, 1153 smoothTouch: false, 1154 normalizeScroll: false, 1155 ignoreMobileResize: true, 1156 onUpdate: (self) => skewSetter(clamp(self.getVelocity() / -80)), 1157 onStop: () => skewSetter(0), 1158 }); 1159 1160 ///////////////////////////////////////////////////// 1161 /////////////////////////////////////////////////// 1162 // // timeline area 1163 // document.addEventListener("DOMContentLoaded", function() { 1164 // // Select all timeline images 1165 // const timelineImages = document.querySelectorAll('.scroll-backInUp img'); 1166 1167 // // Loop through each image and set up animation 1168 // timelineImages.forEach(image => { 1169 // gsap.from(image, { 1170 // opacity: 0, 1171 // scale: 0.5, 1172 // duration: 5, // Adjust duration for slow motion 1173 // ease: 'power4.out', 1174 // scrollTrigger: { 1175 // trigger: '.scroll-backInUp', // Trigger animation when this section is scrolled into view 1176 // start: 'top bottom', // Animation starts when top of the section reaches bottom of viewport 1177 // end: 'bottom bottom', // Animation ends when bottom of the section reaches bottom of viewport 1178 // toggleActions: 'play none none none' // Specifies how the animation should play 1179 // } 1180 // }); 1181 // }); 1182 // }); 1183 /////////////////////////////////////////////////// 1184 1185 ///////////////////////////////////////////////////// 1186 // 25. Title Animation 1187 let splitTitleLines = gsap.utils.toArray(".title-anim"); 1188 1189 splitTitleLines.forEach((splitTextLine) => { 1190 const tl = gsap.timeline({ 1191 scrollTrigger: { 1192 trigger: splitTextLine, 1193 start: "top 90%", 1194 end: "bottom 60%", 1195 scrub: false, 1196 markers: false, 1197 toggleActions: "play none none none", 1198 }, 1199 }); 1200 1201 const itemSplitted = new SplitText(splitTextLine, { 1202 type: "words, lines", 1203 }); 1204 gsap.set(splitTextLine, { perspective: 400 }); 1205 itemSplitted.split({ type: "lines" }); 1206 tl.from(itemSplitted.lines, { 1207 duration: 1, 1208 delay: 0.3, 1209 opacity: 0, 1210 rotationX: -80, 1211 force3D: true, 1212 transformOrigin: "top center -50", 1213 stagger: 0.1, 1214 }); 1215 }); 1216 ///////////////////////////////////////////////////// 1217 1218 ///////////////////////////////////////////////////// 1219 // 26. Title Animation Top 1220 1221 ///////////////////////////////////////////////////// 1222 1223 ///////////////////////////////////////////////////// 1224 // 27. Text Animation 1225 let splitTextLines = gsap.utils.toArray(".text-anim p"); 1226
1227 splitTextLines.forEach((splitTextLine) => { 1228 const tl = gsap.timeline({ 1229 scrollTrigger: { 1230 trigger: splitTextLine, 1231 start: "top 90%", 1232 duration: 2, 1233 end: "bottom 60%", 1234 scrub: false, 1235 markers: false, 1236 toggleActions: "play none none none", 1237 }, 1238 }); 1239 1240 const itemSplitted = new SplitText(splitTextLine, { type: "lines" }); 1241 gsap.set(splitTextLine, { perspective: 400 }); 1242 itemSplitted.split({ type: "lines" }); 1243 tl.from(itemSplitted.lines, { 1244 duration: 1, 1245 delay: 0.5, 1246 opacity: 0, 1247 rotationX: -80, 1248 force3D: true, 1249 transformOrigin: "top center -50", 1250 stagger: 0.1, 1251 }); 1252 }); 1253 ///////////////////////////////////////////////////// 1254 1255 ///////////////////////////////////////////////////// 1256 // 28. Text Animation Top 1257 let text_anim_top = gsap.utils.toArray(".text-anim-top"); 1258 1259 text_anim_top.forEach((splitTextLine2) => { 1260 const tl = gsap.timeline({ 1261 scrollTrigger: { 1262 trigger: splitTextLine2, 1263 start: "top 100%", 1264 toggleActions: "play none play reset", 1265 }, 1266 }); 1267 1268 const itemSplitted = new SplitText(splitTextLine2, { type: "words" }), 1269 textNumWords = itemSplitted.words.length; 1270 1271 gsap.delayedCall(0.05, function () { 1272 for (var i = 0; i < textNumWords; i++) { 1273 tl.from( 1274 itemSplitted.words[i], 1275 1, 1276 { force3D: true, scale: Math.random() > 0.5 ? 0 : 2, opacity: 0 }, 1277 Math.random() 1278 ); 1279 } 1280 }); 1281 }); 1282 ///////////////////////////////////////////////////// 1283 } 1284 1285 jQuery(document).ready(function () { 1286 ///////////////////////////////////////////////////// 1287 // 29. Offcanvas Menu 1288 $(".offcanvas__menu").meanmenu({ 1289 meanScreenWidth: "5000", 1290 meanMenuContainer: ".offcanvas__menu-wrapper", 1291 meanMenuCloseSize: "36px", 1292 }); 1293 ///////////////////////////////////////////////////// 1294 }); 1295 1296 ///////////////////////////////////////////////////// 1297 // 30. Service 3 1298 const serviceImgItem = document.querySelectorAll(".service__item-3"); 1299 1300 function followImageCursor(event, serviceImgItem) { 1301 const contentBox = serviceImgItem.getBoundingClientRect(); 1302 const dx = event.clientX - contentBox.x; 1303 const dy = event.clientY - contentBox.y; 1304 serviceImgItem.children[3].style.transform = `translate(${dx}px, ${dy}px)`; 1305 } 1306 1307 serviceImgItem.forEach((item, i) => { 1308 item.addEventListener("mousemove", (event) => { 1309 setInterval(followImageCursor(event, item), 1000); 1310 }); 1311 }); 1312 ///////////////////////////////////////////////////// 1313 1314 ///////////////////////////////////////////////////// 1315 // 31. Folks animation 1316 let endTl = gsap.timeline({ 1317 repeat: -1, 1318 delay: 0.5, 1319 scrollTrigger: { 1320 trigger: ".end", 1321 start: "bottom 100%-=50px", 1322 }, 1323 }); 1324 gsap.set(".end", { 1325 opacity: 0, 1326 }); 1327 gsap.to(".end", { 1328 opacity: 1, 1329 duration: 1, 1330 ease: "power2.out", 1331 scrollTrigger: { 1332 trigger: ".end", 1333 start: "bottom 100%-=50px", 1334 once: true, 1335 }, 1336 }); 1337 let mySplitText = new SplitText(".end", { type: "words,chars" }); 1338 let chars = mySplitText.chars; 1339 // let endGradient = chroma.scale(['#F9D371', '#F47340', '#EF2F88', '#8843F2']); 1340 let endGradient = chroma.scale(["#fff", "#fff", "#fff", "#fff"]); 1341 endTl.to(chars, { 1342 duration: 0.5, 1343 scaleY: 0.6, 1344 ease: "power3.out", 1345 stagger: 0.04, 1346 transformOrigin: "center bottom", 1347 }); 1348 endTl.to( 1349 chars, 1350 { 1351 yPercent: -20, 1352 ease: "elastic", 1353 stagger: 0.03, 1354 duration: 0.8, 1355 }, 1356 0.5 1357 ); 1358 endTl.to( 1359 chars, 1360 { 1361 scaleY: 1, 1362 ease: "elastic.out(2.5, 0.2)", 1363 stagger: 0.03, 1364 duration: 1.5, 1365 }, 1366 0.5 1367 ); 1368 endTl.to( 1369 chars, 1370 { 1371 color: (i, el, arr) => { 1372 return endGradient(i / arr.length).hex(); 1373 }, 1374 ease: "power2.out", 1375 stagger: 0.03, 1376 duration: 0.3, 1377 }, 1378 0.5 1379 ); 1380 endTl.to( 1381 chars, 1382 { 1383 yPercent: 0, 1384 ease: "back", 1385 stagger: 0.03, 1386 duration: 0.8, 1387 }, 1388 0.7 1389 ); 1390 endTl.to(chars, { 1391 // color: '#c9f31d', 1392 color: "#fff", 1393 duration: 1.4, 1394 stagger: 0.05, 1395 }); 1396 ///////////////////////////////////////////////////// 1397 1398 ///////////////////////////////////////////////////// 1399 // 32. Menu Text Animation 1400 document 1401 .querySelectorAll(".menu-anim > li > a") 1402 .forEach( 1403 (button) => 1404 (button.innerHTML = 1405 '<div class="menu-text"><span>' + 1406 button.textContent.split("").join("</span><span>") + 1407 "</span></div>") 1408 ); 1409 1410 setTimeout(() => { 1411 var menu_text = document.querySelectorAll(".menu-text span"); 1412 menu_text.forEach((item) => { 1413 var font_sizes = window.getComputedStyle(item, null); 1414 let font_size = font_sizes.getPropertyValue("font-size"); 1415 let size_in_number = parseInt(font_size.replace("px", "")); 1416 let new_size = parseInt(size_in_number / 3); 1417 new_size = new_size + "px"; 1418 if (item.innerHTML == " ") { 1419 item.style.width = new_size; 1420 } 1421 }); 1422 }, 1000); 1423 ///////////////////////////////////////////////////// 1424 1425 ///////////////////////////////////////////////////// 1426 // 33. Main Portfolio Sticky 1427 // ScrollTrigger.create({ 1428 // trigger: ".portfolio__wrapper-6", 1429 // start: "top top", 1430 // end: "bottom bottom", 1431 // pin: ".portfolio__title-wrap-6", 1432 // pinSpacing: false, 1433 // }); 1434 ///////////////////////////////////////////////////// 1435 1436 ///////////////////////////////////////////////////// 1437 // 34. Hero 3 Animation 1438 const radio_buttons = document.querySelector("#video_check"); 1439 const video_start = document.querySelector(".hero__area-3"); 1440 1441 if (radio_buttons) { 1442 radio_buttons.addEventListener("click", function () { 1443 let video = document.querySelector(".video-title"); 1444 let videoClose = document.querySelector(".video-title.close-video-title"); 1445 if (radio_buttons.checked) { 1446 document.querySelector(".wrapper").style.zIndex = "1"; 1447 video.style.display = "none"; 1448 videoClose.style.display = "block"; 1449 video_start.classList.add("start-video"); 1450 document.querySelector(".header__area-3").classList.add("bg-white"); 1451 } else { 1452 document.querySelector(".wrapper").style.zIndex = "999"; 1453 video.style.display = "block"; 1454 videoClose.style.display = "none"; 1455 video_start.classList.remove("start-video"); 1456 document.querySelector(".header__area-3").classList.remove("bg-white"); 1457 } 1458 }); 1459 } 1460 ///////////////////////////////////////////////////// 1461 1462 ///////////////////////////////////////////////////// 1463 // 35. Home Page 2 Animations 1464 let tHero = gsap.timeline(); 1465 1466 let heading_title = new SplitText(".sec-title-3", { type: "chars" }); 1467 let heading_char = heading_title.chars; 1468 1469 tHero.from(heading_char, { 1470 rotate: 20, 1471 ease: "back.out", 1472 opacity: 0, 1473 duration: 2, 1474 stagger: 0.1, 1475 }); 1476 1477 tHero.from( 1478 ".hero2-shape img", 1479 { 1480 xPercent: -100, 1481 duration: 1, 1482 }, 1483 "-=6.5" 1484 ); 1485 1486 tHero.from( 1487 ".hero__text-2 p", 1488 { 1489 opacity: 0, 1490 x: -30, 1491 duration: 1.5, 1492 }, 1493 "-=5" 1494 ); 1495 1496 var hero_bts = document.querySelector(".hero__text-2 .btn_wrapper"); 1497 if (hero_bts) { 1498 var hero_btn = document.querySelector(".hero__text-2 .btn_wrapper"); 1499 } else { 1500 var hero_btn = document.querySelector(".hero__text-2 #btn_wrapper"); 1501 } 1502 tHero.from( 1503 hero_btn, 1504 { 1505 opacity: 0, 1506 y: -70, 1507 ease: "bounce", 1508 duration: 1.5, 1509 }, 1510 "-=5" 1511 ); 1512 1513 // All Buttons 1514 let arr1 = gsap.utils.toArray("#btn_wrapper"); 1515 let arr2 = gsap.utils.toArray(".btn_wrapper"); 1516 const all_buttons = arr1.concat(arr2); 1517 1518 all_buttons.forEach((btn) => { 1519 if (!btn.classList.contains("hero__button")) { 1520 gsap.from(btn, { 1521 scrollTrigger: { 1522 trigger: btn, 1523 start: "top center+=150", 1524 markers: false, 1525 }, 1526 opacity: 0, 1527 y: -70, 1528 ease: "bounce", 1529 duration: 1.5, 1530 }); 1531 } 1532 }); 1533 1534 let imageTl = gsap.timeline({ 1535 scrollTrigger: { 1536 trigger: ".about__img-2", 1537 start: "top bottom", 1538 markers: false, 1539 scrub: 1, 1540 end: "bottom center", 1541 }, 1542 }); 1543 1544 // Image pin 1545 imageTl.to(".about__img-2 img", { 1546 scale: 1.15, 1547 duration: 1, 1548 }); 1549 ///////////////////////////////////////////////////// 1550 1551 ///////////////////////////////////////////////////// 1552 // 36. Award Animation 1553 let award_timeline = gsap.timeline({ 1554 scrollTrigger: { 1555 trigger: ".award__text", 1556 start: "top center+=150", 1557 }, 1558 }); 1559 1560 gsap.set(".award__text", { 1561 opacity: 0, 1562 y: -500, 1563 }); 1564 award_timeline.to(".award__text", { 1565 opacity: 1, 1566 y: 0, 1567 duration: 2, 1568 ease: "bounce", 1569 }); 1570 1571 gsap.set(".award__text-2", { opacity: 0, y: -500 }); 1572 1573 award_timeline.to( 1574 ".award__text-2", 1575 { 1576 opacity: 1, 1577 y: 0, 1578 duration: 2, 1579 ease: "bounce", 1580 }, 1581 "-=1.5" 1582 ); 1583 1584 award_timeline.to( 1585 ".award__text", 1586 { 1587 x: -100, 1588 duration: 2, 1589 }, 1590 "-=1" 1591 ); 1592 award_timeline.to( 1593 ".award__text-2", 1594 { 1595 x: -100, 1596 duration: 2, 1597 }, 1598 "-=1" 1599 ); 1600 award_timeline.to( 1601 ".award__text", 1602 { 1603 x: 0, 1604 duration: 2, 1605 }, 1606 "-=1" 1607 ); 1608 award_timeline.to( 1609 ".award__text-2", 1610 { 1611 x: 0, 1612 duration: 2, 1613 }, 1614 "-=1" 1615 ); 1616 ///////////////////////////////////////////////////// 1617 1618 ///////////////////////////////////////////////////// 1619 // 38. Portfolio Animation 1620 if (device_width > 767) { 1621 let portfolioline = gsap.timeline({ 1622 scrollTrigger: { 1623 trigger: ".portfolio__area", 1624 start: "top center-=200", 1625 pin: ".portfolio__text", 1626 end: "bottom bottom+=80", 1627 markers: false, 1628 pinSpacing: false, 1629 scrub: 1, 1630 }, 1631 }); 1632 1633 portfolioline.to(".portfolio__text", { 1634 scale: 1.15, 1635 duration: 1, 1636 }); 1637 portfolioline.to(".portfolio__text", { 1638 scale: 1.15, 1639 duration: 1, 1640 }); 1641 portfolioline.to( 1642 ".portfolio__text", 1643 { 1644 scale: 1, 1645 duration: 1, 1646 }, 1647 "+=2" 1648 ); 1649 } 1650 1651 let portfolio_lists = gsap.utils.toArray(".portfolio__item");
1652 portfolio_lists.forEach((portfolio, i) => { 1653 gsap.set(portfolio, { opacity: 0.7 }); 1654 let t1 = gsap.timeline(); 1655 1656 t1.set(portfolio, { 1657 position: "relative", 1658 }); 1659 t1.to(portfolio, { 1660 scrollTrigger: { 1661 trigger: portfolio, 1662 scrub: 2, 1663 duration: 1.5, 1664 start: "top bottom+=100", 1665 end: "bottom center", 1666 markers: false, 1667 }, 1668 scale: 1, 1669 opacity: 1, 1670 rotateX: 0, 1671 }); 1672 }); 1673 1674 gsap.to(".bg_image img", { 1675 xPercent: -18, 1676 scrollTrigger: { 1677 trigger: ".portfolio__area", 1678 start: "top top", 1679 end: "bottom center", 1680 pin: ".bg_image", 1681 scrub: 3, 1682 }, 1683 }); 1684 ///////////////////////////////////////////////////// 1685 1686 var portfolio_project_thumbs = new Swiper(".portfolio__project-thumbs", { 1687 loop: true, 1688 spaceBetween: 0, 1689 slidesPerView: 1, 1690 freeMode: true, 1691 watchSlidesProgress: true, 1692 allowTouchMove: false, 1693 }); 1694 var portfolio_project = new Swiper(".portfolio__project-slider", { 1695 loop: true, 1696 spaceBetween: 10, 1697 navigation: { 1698 nextEl: ".pp-next", 1699 prevEl: ".pp-prev", 1700 }, 1701 thumbs: { 1702 swiper: portfolio_project_thumbs, 1703 }, 1704 }); 1705 ///////////////////////////////////////////////////// 1706 1707 ///////////////////////////////////////////////////// 1708 // 40. Portfolio Slider 3 1709 var portfolio_slider_3 = new Swiper(".portfolio__slider-3", { 1710 speed: 1500, 1711 loop: true, 1712 effect: "fade", 1713 autoplay: { 1714 delay: 5000, 1715 disableOnInteraction: false, 1716 }, 1717 pagination: { 1718 el: ".swiper-pagination", 1719 type: "fraction", 1720 }, 1721 navigation: { 1722 nextEl: ".pp-next", 1723 prevEl: ".pp-prev", 1724 }, 1725 }); 1726 ///////////////////////////////////////////////////// 1727 1728 ///////////////////////////////////////////////////// 1729 // 41. Image Moving Animations 1730 1731 // Service Page 1732 let image_list = [".solution__wrapper img"]; 1733 imageMoving(".solution__area", image_list); 1734 1735 // Home Page Client 1736 imageMoving(".testimonial__area", ".testimonial__img img"); 1737 1738 // Testimonial 3 1739 imageMoving(".testimonial__area-3", ".testimonial__area-3 img"); 1740 1741 // Image Moving with Cursor Function 1742 function imageMoving(wrapper, image_list) { 1743 let container = document.querySelector(wrapper); 1744 try { 1745 if (container) { 1746 container.addEventListener("mousemove", (e) => { 1747 var x = e.clientX; 1748 var y = e.clientY; 1749 let viewportWidth = window.innerWidth; 1750 let viewportHeight = window.innerHeight; 1751 let center = viewportWidth / 2; 1752 let centerHeight = innerHeight / 2; 1753 1754 if (x > center) { 1755 gsap.to(image_list, { 1756 x: 15, 1757 duration: 5, 1758 ease: "power4.out", 1759 }); 1760 } else { 1761 gsap.to(image_list, { 1762 x: -15, 1763 duration: 5, 1764 ease: "power4.out", 1765 }); 1766 } 1767 if (y > centerHeight) { 1768 gsap.to(image_list, { 1769 y: 15, 1770 duration: 5, 1771 ease: "power4.out", 1772 }); 1773 } else { 1774 gsap.to(image_list, { 1775 y: -15, 1776 duration: 5, 1777 ease: "power4.out", 1778 }); 1779 } 1780 }); 1781 } 1782 } catch (err) { 1783 console.log(err); 1784 } 1785 } 1786 ///////////////////////////////////////////////////// 1787 1788 imageMovingPortfolio(".portfolio-section", ".portfolio__hero img"); 1789 1790 // Image Moving with Cursor Function 1791 function imageMovingPortfolio(wrapper, image_list) { 1792 let container = document.querySelector(wrapper); 1793 try { 1794 if (container) { 1795 container.addEventListener("mousemove", (e) => { 1796 var x = e.clientX; 1797 var y = e.clientY; 1798 let viewportWidth = window.innerWidth; 1799 let viewportHeight = window.innerHeight; 1800 let center = viewportWidth / 2; 1801 let centerHeight = innerHeight / 2; 1802 1803 if (x > center) { 1804 gsap.to(image_list, { 1805 x: 60, 1806 duration: 5, 1807 ease: "power4.out", 1808 }); 1809 } else { 1810 gsap.to(image_list, { 1811 x: -60, 1812 duration: 5, 1813 ease: "power4.out", 1814 }); 1815 } 1816 if (y > centerHeight) { 1817 gsap.to(image_list, { 1818 scale: 1.15, 1819 duration: 5, 1820 ease: "power4.out", 1821 }); 1822 } else { 1823 gsap.to(image_list, { 1824 scale: 1, 1825 duration: 5, 1826 ease: "power4.out", 1827 }); 1828 } 1829 }); 1830 } 1831 } catch (err) { 1832 console.log(err); 1833 } 1834 } 1835 1836 ///////////////////////////////////////////////////// 1837 // 42. Counter Animation 1838 gsap.set(".counter_animation .counter__anim", { y: -100, opacity: 0 }); 1839 if (device_width < 1023) { 1840 const counterArray = gsap.utils.toArray( 1841 ".counter_animation .counter__anim" 1842 ); 1843 counterArray.forEach((item, i) => { 1844 let counterTl = gsap.timeline({ 1845 scrollTrigger: { 1846 trigger: item, 1847 start: "top center+=200", 1848 }, 1849 }); 1850 counterTl.to(item, { 1851 y: 0, 1852 opacity: 1, 1853 ease: "bounce", 1854 duration: 1.5, 1855 }); 1856 }); 1857 } else { 1858 gsap.to(".counter_animation .counter__anim", { 1859 scrollTrigger: { 1860 trigger: ".counter_animation", 1861 start: "top center+=300", 1862 }, 1863 y: 0, 1864 opacity: 1, 1865 ease: "bounce", 1866 duration: 1.5, 1867 stagger: { 1868 each: 0.3, 1869 }, 1870 }); 1871 } 1872 ///////////////////////////////////////////////////// 1873 1874 ///////////////////////////////////////////////////// 1875 // 43. Workflow Slider Animation | animation__fade 1876 gsap.set(".fade_left", { x: -20, opacity: 0 }); 1877 gsap.to(".fade_left", { 1878 scrollTrigger: { 1879 trigger: ".fade_left", 1880 start: "top center+=300", 1881 }, 1882 x: 0, 1883 opacity: 1, 1884 ease: "power2.out", 1885 duration: 1, 1886 stagger: { 1887 each: 0.2, 1888 }, 1889 }); 1890 ///////////////////////////////////////////////////// 1891 1892 ///////////////////////////////////////////////////// 1893 // 44. Workflow Slider Animation 2 | fade_bottom 1894 gsap.set(".fade_bottom", { y: 30, opacity: 0 }); 1895 1896 if (device_width < 1023) { 1897 const fadeArray = gsap.utils.toArray(".fade_bottom"); 1898 fadeArray.forEach((item, i) => { 1899 let fadeTl = gsap.timeline({ 1900 scrollTrigger: { 1901 trigger: item, 1902 start: "top center+=200", 1903 }, 1904 }); 1905 fadeTl.to(item, { 1906 y: 0, 1907 opacity: 1, 1908 ease: "power2.out", 1909 duration: 1.5, 1910 }); 1911 }); 1912 } else { 1913 gsap.to(".fade_bottom", { 1914 scrollTrigger: { 1915 trigger: ".fade_bottom", 1916 start: "top center+=300", 1917 markers: false, 1918 }, 1919 y: 0, 1920 opacity: 1, 1921 ease: "power2.out", 1922 duration: 1, 1923 stagger: { 1924 each: 0.2, 1925 }, 1926 }); 1927 } 1928 ///////////////////////////////////////////////////// 1929 1930 ///////////////////////////////////////////////////// 1931 // 45. Blog animation 1932 gsap.set(".blog__animation .blog__item", { x: 50, opacity: 0 }); 1933 1934 if (device_width < 1023) { 1935 const blogList = gsap.utils.toArray(".blog__animation .blog__item"); 1936 blogList.forEach((item, i) => { 1937 let blogTl = gsap.timeline({ 1938 scrollTrigger: { 1939 trigger: item, 1940 start: "top center+=200", 1941 }, 1942 }); 1943 blogTl.to(item, { 1944 x: 0, 1945 opacity: 1, 1946 ease: "power2.out", 1947 duration: 1.5, 1948 }); 1949 }); 1950 } else { 1951 gsap.to(".blog__animation .blog__item", { 1952 scrollTrigger: { 1953 trigger: ".blog__animation .blog__item", 1954 start: "top center+=300", 1955 markers: false, 1956 }, 1957 x: 0, 1958 opacity: 1, 1959 ease: "power2.out", 1960 duration: 2, 1961 stagger: { 1962 each: 0.3, 1963 }, 1964 }); 1965 } 1966 ///////////////////////////////////////////////////// 1967 1968 ///////////////////////////////////////////////////// 1969 // 46. Blog animation 2 1970 gsap.set(".blog__animation .blog__item-2", { x: 50, opacity: 0 }); 1971 1972 if (device_width < 1023) { 1973 const blogList = gsap.utils.toArray(".blog__animation .blog__item-2"); 1974 blogList.forEach((item, i) => { 1975 let blogTl = gsap.timeline({ 1976 scrollTrigger: { 1977 trigger: item, 1978 start: "top center+=200", 1979 }, 1980 }); 1981 blogTl.to(item, { 1982 x: 0, 1983 opacity: 1, 1984 ease: "power2.out", 1985 duration: 1.5, 1986 }); 1987 }); 1988 } else { 1989 gsap.to(".blog__animation .blog__item-2", { 1990 scrollTrigger: { 1991 trigger: ".blog__animation .blog__item-2", 1992 start: "top center+=300", 1993 markers: false, 1994 }, 1995 x: 0, 1996 opacity: 1, 1997 ease: "power2.out", 1998 duration: 2, 1999 stagger: { 2000 each: 0.3, 2001 }, 2002 }); 2003 } 2004 ///////////////////////////////////////////////////// 2005 2006 ///////////////////////////////////////////////////// 2007 // 47. Blog Animation 3
2008 gsap.set(".blog__animation .blog__item-3", { x: 50, opacity: 0 }); 2009 2010 if (device_width < 1023) { 2011 const blogList = gsap.utils.toArray(".blog__animation .blog__item-3"); 2012 blogList.forEach((item, i) => { 2013 let blogTl = gsap.timeline({ 2014 scrollTrigger: { 2015 trigger: item, 2016 start: "top center+=200", 2017 }, 2018 }); 2019 blogTl.to(item, { 2020 x: 0, 2021 opacity: 1, 2022 ease: "power2.out", 2023 duration: 1.5, 2024 }); 2025 }); 2026 } else { 2027 gsap.to(".blog__animation .blog__item-3", { 2028 scrollTrigger: { 2029 trigger: ".blog__animation .blog__item-3", 2030 start: "top center+=300", 2031 markers: false, 2032 }, 2033 x: 0, 2034 opacity: 1, 2035 ease: "power2.out", 2036 duration: 2, 2037 stagger: { 2038 each: 0.3, 2039 }, 2040 }); 2041 } 2042 ///////////////////////////////////////////////////// 2043 2044 ///////////////////////////////////////////////////// 2045 // 48. Zoom In Animation 2046 gsap.set(".zoom_in", { opacity: 0, y: 30, scale: 0.5 }); 2047 gsap.to(".zoom_in", { 2048 scrollTrigger: { 2049 trigger: ".zoom_in", 2050 start: "top center+=200", 2051 markers: false, 2052 }, 2053 y: 0, 2054 opacity: 1, 2055 scale: 1, 2056 ease: "power2.out", 2057 duration: 1, 2058 stagger: { 2059 each: 0.2, 2060 }, 2061 }); 2062 ///////////////////////////////////////////////////// 2063 2064 ///////////////////////////////////////////////////// 2065 // 49. Service 3 Animation 2066 let service__items_3 = gsap.utils.toArray(".service_animation"); 2067 let service__items_heading = gsap.utils.toArray(".service_animation h3"); 2068 let service__items_content = gsap.utils.toArray( 2069 ".service_animation .service__content-3" 2070 ); 2071 2072 service__items_3.forEach((service_item, i) => { 2073 gsap.set([service__items_heading[i], service__items_content[i]], { 2074 x: -30, 2075 opacity: 0, 2076 }); 2077 2078 let service3_timeline = gsap.timeline({ 2079 scrollTrigger: { 2080 trigger: service_item, 2081 start: "top center+=200", 2082 markers: false, 2083 }, 2084 }); 2085 2086 service3_timeline.to(service__items_heading[i], { 2087 x: 0, 2088 opacity: 1, 2089 ease: "power2.out", 2090 duration: 1.5, 2091 stagger: { 2092 each: 0.2, 2093 }, 2094 }); 2095 service3_timeline.to( 2096 service__items_content[i], 2097 { 2098 x: 0, 2099 opacity: 1, 2100 ease: "power2.out", 2101 duration: 1.5, 2102 stagger: { 2103 each: 0.2, 2104 }, 2105 }, 2106 "-=1" 2107 ); 2108 }); 2109 ///////////////////////////////////////////////////// 2110 2111 ///////////////////////////////////////////////////// 2112 // 50. Testimonial 2 Animation 2113 gsap.set(".testimonial__inner-2", { 2114 opacity: 0, 2115 x: -100, 2116 }); 2117 2118 gsap.to(".testimonial__inner-2", { 2119 scrollTrigger: { 2120 trigger: ".testimonial__slider-wrapper-2", 2121 start: "top center+=100", 2122 end: "bottom bottom", 2123 }, 2124 opacity: 1, 2125 x: 0, 2126 duration: 1, 2127 }); 2128 ///////////////////////////////////////////////////// 2129 2130 ///////////////////////////////////////////////////// 2131 // 51. Testimonial 3 Image Animation 2132 gsap.set(".animation_image_zoom img", { opacity: 0, scale: 0.5 }); 2133 2134 gsap.to(".animation_image_zoom img", { 2135 scrollTrigger: { 2136 trigger: ".testimonial__area-3", 2137 start: "top center+=200", 2138 markers: false, 2139 }, 2140 opacity: 1, 2141 scale: 1, 2142 x: 20, 2143 ease: "power2.out", 2144 duration: 2.5, 2145 stagger: { 2146 each: 0.3, 2147 }, 2148 }); 2149 ///////////////////////////////////////////////////// 2150 2151 ///////////////////////////////////////////////////// 2152 // 52. Pricing Table Animation 2153 let pricing_timeline = gsap.timeline({ 2154 scrollTrigger: { 2155 trigger: ".price__table", 2156 start: "top center", 2157 }, 2158 }); 2159 2160 gsap.set(".animation_from_bottom", { yPercent: 50 }); 2161 2162 pricing_timeline.to(".animation_from_bottom", { 2163 yPercent: 0, 2164 duration: 2, 2165 ease: "power4.out", 2166 }); 2167 2168 gsap.set(".animation_from_top", { yPercent: -50, opacity: 0 }); 2169 pricing_timeline.to( 2170 ".animation_from_top", 2171 { 2172 yPercent: 0, 2173 duration: 2, 2174 opacity: 1, 2175 ease: "power4.out", 2176 }, 2177 "-=2" 2178 ); 2179 ///////////////////////////////////////////////////// 2180 2181 ///////////////////////////////////////////////////// 2182 // 53. Service 2 Animation 2183 let animation__services2 = gsap.utils.toArray( 2184 ".animation__service-2 .service__item-2" 2185 ); 2186 gsap.set(animation__services2, { 2187 opacity: 0, 2188 x: -30, 2189 }); 2190 2191 if (animation__services2) { 2192 if (device_width < 1023) { 2193 animation__services2.forEach((item, i) => { 2194 gsap.to(item, { 2195 scrollTrigger: { 2196 trigger: item, 2197 start: "top center+=200", 2198 markers: false, 2199 }, 2200 opacity: 1, 2201 x: 0, 2202 ease: "power2.out", 2203 duration: 2, 2204 stagger: { 2205 each: 0.4, 2206 }, 2207 }); 2208 }); 2209 } else { 2210 gsap.to(".animation__service-2 .service__item-2", { 2211 scrollTrigger: { 2212 trigger: ".animation__service-2", 2213 start: "top center+=200", 2214 markers: false, 2215 }, 2216 opacity: 1, 2217 x: 0, 2218 ease: "power2.out", 2219 duration: 2, 2220 stagger: { 2221 each: 0.4, 2222 }, 2223 }); 2224 } 2225 } 2226 ///////////////////////////////////////////////////// 2227 2228 ///////////////////////////////////////////////////// 2229 // 54. Hero 1 Animation 2230 // if (document.querySelector(".animation__hero_one")) { 2231 // let heroOnetl = gsap.timeline() 2232 // gsap.set(".animation__hero_one .experience", { 2233 // y: 50, 2234 // opacity: 0, 2235 // }) 2236 2237 // // animation__hero_one a 2238 // let split_char_btn = new SplitText(".animation__hero_one a", { type: "chars, words" }) 2239 // heroOnetl.from(split_char_btn.words, { duration: 1, x: -50, opacity: 0, autoAlpha: 0, stagger: 0.1 }); 2240 2241 // //hero__title 2242 // let split_char_hero = new SplitText(".hero__title", { type: "chars, words" }) 2243 // heroOnetl.from(split_char_hero.chars, { duration: 1, x: 70, opacity: 0, autoAlpha: 0, stagger: 0.1 }, '-=1'); 2244 2245 // //hero__Sub_title 2246 // let split_char_hero_subtitle = new SplitText(".animation__hero_one .hero__sub-title", { type: "words" }) 2247 // heroOnetl.from(split_char_hero_subtitle.words, { duration: 1, x: 50, opacity: 0, autoAlpha: 0, stagger: 0.07 }, '-=1.5'); 2248 2249 // // heroOnetl.to(".animation__hero_one .hero__sub-title", { 2250 // // y: 0, 2251 // // opacity: 1, 2252 // // duration: 2, 2253 // // ease: "power2.out" 2254 // // }, '-=1.5') 2255 2256 // heroOnetl.to(".animation__hero_one .experience", { 2257 // y: 0, 2258 // opacity: 1, 2259 // duration: 2, 2260 // ease: "power2.out" 2261 // }, '-=1.5') 2262 // } 2263 2264 ///////////////////////////////////////////////////// 2265 2266 ///////////////////////////////////////////////////// 2267 // 55. Service 1 Animation 2268 let home1_services = gsap.utils.toArray(".animation_home1_service"); 2269 let service__number = gsap.utils.toArray( 2270 ".animation_home1_service .service__number span" 2271 ); 2272 let service__title = gsap.utils.toArray( 2273 ".animation_home1_service .service__title" 2274 ); 2275 let service__text = gsap.utils.toArray( 2276 ".animation_home1_service .service__text p" 2277 ); 2278 let service__link = gsap.utils.toArray( 2279 ".animation_home1_service .service__link p" 2280 ); 2281
2282 home1_services.forEach((service, i) => { 2283 gsap.set( 2284 [ 2285 service__number[i], 2286 service__title[i], 2287 service__text[i], 2288 service__link[i], 2289 ], 2290 { opacity: 1, x: -50 } 2291 ); 2292 2293 let home1ServiceTl = gsap.timeline({ 2294 scrollTrigger: { 2295 trigger: service, 2296 start: "top center+=300", 2297 end: "bottom bottom", 2298 markers: false, 2299 }, 2300 }); 2301 2302 home1ServiceTl.to(service__number[i], { 2303 x: 0, 2304 opacity: 1, 2305 color: "#121212", 2306 duration: 1.2, 2307 }); 2308 home1ServiceTl.to( 2309 service__title[i], 2310 { 2311 x: 0, 2312 opacity: 1, 2313 color: "#121212", 2314 duration: 1.2, 2315 }, 2316 "-=1" 2317 ); 2318 home1ServiceTl.to( 2319 service__text[i], 2320 { 2321 x: 0, 2322 opacity: 1, 2323 color: "#121212", 2324 duration: 1.2, 2325 }, 2326 "-=1" 2327 ); 2328 home1ServiceTl.to( 2329 service__link[i], 2330 { 2331 x: 0, 2332 opacity: 1, 2333 color: "#121212", 2334 duration: 1.2, 2335 }, 2336 "-=1" 2337 ); 2338 }); 2339 ///////////////////////////////////////////////////// 2340 2341 ///////////////////////////////////////////////////// 2342 // 56. Features 2 Animation 2343 let animation__feature2 = gsap.utils.toArray( 2344 ".animation__feature2 .feature__item" 2345 ); 2346 if (device_width < 1023) { 2347 animation__feature2.forEach((item, i) => { 2348 gsap.set(item, { opacity: 0, y: 60 }); 2349 let featured2Timeline = gsap.timeline({ 2350 scrollTrigger: { 2351 trigger: item, 2352 start: "top center+=200", 2353 }, 2354 }); 2355 featured2Timeline.to(item, { 2356 opacity: 1, 2357 y: 0, 2358 duration: 1.5, 2359 ease: "power4.out", 2360 }); 2361 }); 2362 } else { 2363 gsap.set(".animation__feature2 .feature__item", { opacity: 0, y: 40 }); 2364 gsap.to(".animation__feature2 .feature__item", { 2365 scrollTrigger: { 2366 trigger: ".animation__feature2", 2367 start: "top center+=200", 2368 }, 2369 opacity: 1, 2370 y: 0, 2371 duration: 2, 2372 ease: "power4.out", 2373 stagger: 0.3, 2374 }); 2375 } 2376 ///////////////////////////////////////////////////// 2377 2378 ///////////////////////////////////////////////////// 2379 // 57. Portfolio 6 Animation 2380 const portfolio_listss = gsap.utils.toArray(".portfolio__item-6 img"); 2381 if (portfolio_listss) { 2382 portfolio_listss.forEach((item, i) => { 2383 gsap.from(item, { 2384 scrollTrigger: { 2385 trigger: item, 2386 start: "top center", 2387 scrub: 1.5, 2388 }, 2389 scale: 2.5, 2390 duration: 1, 2391 }); 2392 }); 2393 } 2394 ///////////////////////////////////////////////////// 2395 2396 ///////////////////////////////////////////////////// 2397 // 58. Portfolio 5 Border 2398 let total_portfolio_items = document.querySelectorAll(".portfolio__item-5"); 2399 let total_row = Math.ceil(total_portfolio_items.length / 3); 2400 2401 let border_row = document.getElementById("items__border"); 2402 for (let i = 0; i < total_row; i++) { 2403 border_row.innerHTML += '<span class="sec-line"></span> '; 2404 } 2405 2406 let row_height = 100 / total_row; 2407 var total_lines = document.querySelectorAll("#items__border .sec-line"); 2408 2409 total_lines.forEach((item, i) => {
2410 let counter = i + 1; 2411 item.style.top = `${row_height * counter}%`; 2412 item.style.opacity = 1; 2413 }); 2414 ///////////////////////////////////////////////////// 2415 2416 // Charchater Come Animation 2417 let char_come = document.querySelectorAll(".animation__char_come"); 2418 2419 char_come.forEach((char_come) => { 2420 let split_char = new SplitText(char_come, { type: "chars, words" }); 2421 gsap.from(split_char.chars, { 2422 duration: 1, 2423 x: 70, 2424 autoAlpha: 0, 2425 stagger: 0.05, 2426 }); 2427 }); 2428 2429 // Charchater Come long Animation 2430 let char_come_long = document.querySelectorAll(".animation__char_come_long"); 2431 2432 char_come_long.forEach((char_come) => { 2433 let split_char = new SplitText(char_come, { type: "chars, words" }); 2434 gsap.from(split_char.chars, { 2435 duration: 0.5, 2436 x: 70, 2437 autoAlpha: 0, 2438 stagger: 0.15, 2439 }); 2440 }); 2441 2442 // Charchater Up Animation 2443 let char_up = document.querySelector(".animation__char_up"); 2444 let split_char_up = new SplitText(char_up, { type: "chars, words" }); 2445 gsap.from(split_char_up.chars, { 2446 duration: 1, 2447 y: 15, 2448 autoAlpha: 0, 2449 stagger: 0.05, 2450 }); 2451 2452 // Service Page hero Animation 2453 let word_up = document.querySelector(".animation__word_up"); 2454 let split_word_up = new SplitText(word_up, { 2455 type: "words", 2456 position: "absolute", 2457 }); 2458 gsap.from(split_word_up.words, { 2459 duration: 1, 2460 y: 50, 2461 autoAlpha: 0, 2462 stagger: 0.05, 2463 }); 2464 2465 // Service Page hero Animation 2466 let word_come = document.querySelectorAll(".animation__word_come"); 2467 word_come.forEach((word_come) => { 2468 let split_word_come = new SplitText(word_come, { 2469 type: "chars words", 2470 position: "absolute", 2471 }); 2472 gsap.from(split_word_come.words, { 2473 duration: 1, 2474 x: 50, 2475 autoAlpha: 0, 2476 stagger: 0.05, 2477 }); 2478 }); 2479 2480 // Service Page hero Animation 2481 let word_come_long = document.querySelectorAll(".animation__word_come_long"); 2482 word_come_long.forEach((word_come_long) => { 2483 let split_word_come_long = new SplitText(word_come_long, { 2484 type: "chars words", 2485 position: "absolute", 2486 }); 2487 gsap.from(split_word_come_long.words, { 2488 duration: 1, 2489 x: 50, 2490 autoAlpha: 0, 2491 stagger: 0.5, 2492 }); 2493 }); 2494 2495 // Home page Hero Animation 2496 2497 ///////////////////////////////////////////////////// 2498 // Service Page Animation 2499 let animation__service_page = gsap.utils.toArray(".animation__service_page"); 2500 if (animation__service_page) { 2501 animation__service_page.forEach((item, i) => { 2502 gsap.from(item, { 2503 scrollTrigger: { 2504 trigger: item, 2505 start: "top center+=20%", 2506 markers: false, 2507 }, 2508 opacity: 0, 2509 x: -50, 2510 ease: "power2.out", 2511 duration: 2, 2512 }); 2513 }); 2514 } 2515 ///////////////////////////////////////////////////// 2516 2517 ///////////////////////////////////////////////////// 2518 // 59. Portfolio Main Slider 2519 var breakpoint = window.matchMedia("( max-width: 1300px )"); 2520 var pp_main_wrap = document.querySelector(".portfolio__main-slider"); 2521 2522 if (pp_main_wrap) { 2523 var enableSwiper = function () { 2524 var pp_main = new Swiper(".portfolio__main-slider", { 2525 allowTouchMove: false, 2526 slidesPerView: 1, 2527 spaceBetween: 0, 2528 mousewheel: true, 2529 effect: "fade", 2530 pagination: { 2531 el: ".swiper-pagination", 2532 clickable: true, 2533 }, 2534 }); 2535 }; 2536 2537 var breakpointChecker = function () { 2538 if (breakpoint.matches === true) { 2539 if (pp_main !== undefined) pp_main.destroy(true, true); 2540 return; 2541 } else if (breakpoint.matches === false) { 2542 return enableSwiper(); 2543 } 2544 }; 2545 2546 breakpoint.addListener(breakpointChecker); 2547 breakpointChecker(); 2548 } 2549 ///////////////////////////////////////////////////// 2550 2551 ///////////////////////////////////////////////////// 2552 // 60. Portfolio Slider 6 2553 var portfolio_slider_6 = new Swiper(".portfolio__slider-4", { 2554 speed: 1500, 2555 loop: true, 2556 slidesPerView: 1, 2557 spaceBetween: 15, 2558 breakpoints: { 2559 768: { 2560 slidesPerView: 2, 2561 }, 2562 1000: { 2563 slidesPerView: 2, 2564 spaceBetween: 60, 2565 }, 2566 1200: { 2567 slidesPerView: 2, 2568 spaceBetween: 90, 2569 }, 2570 1400: { 2571 slidesPerView: 2, 2572 spaceBetween: 120, 2573 }, 2574 }, 2575 }); 2576 ///////////////////////////////////////////////////// 2577 2578 ///////////////////////////////////////////////////// 2579 // 61. Testimonial Slider 4 2580 2581 var testimonial_slider_4 = new Swiper(".testimonial__slider-4", { 2582 spaceBetween: 20, 2583 loop: true, 2584 freemode: true, 2585 slidesPerView: 3, 2586 speed: 2000,
2587 pagination: { 2588 el: ".pagination", 2589 type: "fraction", 2590 }, 2591 navigation: { 2592 nextEl: ".next-button", 2593 prevEl: ".prev-button", 2594 }, 2595 breakpoints: { 2596 0: { 2597 slidesPerView: 1, 2598 }, 2599 768: { 2600 slidesPerView: 2, 2601 }, 2602 1024: { 2603 slidesPerView: 3, 2604 }, 2605 }, 2606 }); 2607 ///////////////////////////////////////////////////// 2608 2609 // Switcher JS 2610 $("#switcher_open").on("click", function () { 2611 $(this).hide(); 2612 $("#switcher_close").show(); 2613 $(".switcher__icon").css("right", "280px"); 2614 $(".switcher__items").css({ 2615 right: "0", 2616 }); 2617 }); 2618 2619 $("#switcher_close").on("click", function () { 2620 $(this).hide(); 2621 $("#switcher_open").show(); 2622 $(".switcher__icon").css("right", "0"); 2623 $(".switcher__items").css({ 2624 right: "-280px", 2625 }); 2626 }); 2627 2628 // Mode JS 2629 $(".mode-type button").on("click", function (e) { 2630 $(this).addClass("active").siblings().removeClass("active"); 2631 2632 var mode_val = $(".mode-type button.active").attr("data-mode"); 2633 if (mode_val == "dark") { 2634 $("body").addClass("dark"); 2635 } else { 2636 $("body").removeClass("dark"); 2637 } 2638 }); 2639 2640 // Language JS 2641 $(".lang_dir button").on("click", function (e) { 2642 $(this).addClass("active").siblings().removeClass("active"); 2643 2644 var dir_val = $(".lang_dir button.active").attr("data-mode"); 2645 if (dir_val == "rtl") { 2646 $("body").addClass("dir-rtl"); 2647 } else { 2648 $("body").removeClass("dir-rtl"); 2649 } 2650 }); 2651 2652 // Cursor JS 2653 $("#cursor_style").on("change", function () { 2654 var cursor_val = $(this).val(); 2655 2656 if (cursor_val == "1") { 2657 $(".cursor1").hide(); 2658 $(".cursor2").hide(); 2659 } else { 2660 $(".cursor1").show(); 2661 $(".cursor2").show(); 2662 } 2663 }); 2664 2665 ///////////////////////////////////////////////////// 2666 // 62. Team 7 2667 const team_item_7 = document.querySelectorAll(".team__item-7"); 2668 2669 function teamImageAnimation(event, team_item_7) { 2670 const contentBox = team_item_7.getBoundingClientRect(); 2671 const dx = event.clientX - contentBox.x; 2672 const dy = event.clientY - contentBox.y; 2673 team_item_7.children[3].style.transform = `translate(${dx}px, ${dy}px)`; 2674 } 2675 2676 team_item_7.forEach((item, i) => { 2677 item.addEventListener("mousemove", (event) => { 2678 setInterval(teamImageAnimation(event, item), 1000); 2679 }); 2680 }); 2681 /////////////////////////////////////////////////////// 2682 2683 ///////////////////////////////////////////////////// 2684 // 63. Portfolio Slider 7 2685 var portfolio_slider_7 = new Swiper(".portfolio__slider-7", { 2686 loop: true, 2687 freemode: true, 2688 slidesPerView: 1, 2689 spaceBetween: 30, 2690 centeredSlides: true, 2691 speed: 2000, 2692 breakpoints: { 2693 640: { 2694 slidesPerView: 2, 2695 }, 2696 800: { 2697 slidesPerView: 2, 2698 spaceBetween: 50, 2699 }, 2700 1200: { 2701 slidesPerView: 3, 2702 spaceBetween: 70, 2703 }, 2704 }, 2705 }); 2706 ///////////////////////////////////////////////////// 2707 2708 ///////////////////////////////////////////////////// 2709 // 64. Header 7 2710 let header_bg_7 = document.querySelector(".header__area-7"); 2711 if (header_bg_7) { 2712 window.onscroll = function () { 2713 if ( 2714 document.body.scrollTop > 20 || 2715 document.documentElement.scrollTop > 20 2716 ) { 2717 header_bg_7.classList.add("sticky-7"); 2718 if (scroll_top) { 2719 scroll_top.style.display = "block"; 2720 } 2721 } else { 2722 header_bg_7.classList.remove("sticky-7"); 2723 if (scroll_top) { 2724 scroll_top.style.display = "none"; 2725 } 2726 } 2727 }; 2728 } 2729 ///////////////////////////////////////////////////// 2730 2731 ///////////////////////////////////////////////////// 2732 // 65. Service 7 Animation 2733 let animation_services_7 = gsap.utils.toArray( 2734 ".animation_service_7 .service__item-7" 2735 ); 2736 gsap.set(animation_services_7, { 2737 opacity: 0, 2738 x: -30, 2739 }); 2740 2741 if (animation_services_7) { 2742 if (device_width < 1023) { 2743 animation_services_7.forEach((item, i) => { 2744 gsap.to(item, { 2745 scrollTrigger: { 2746 trigger: item, 2747 start: "top center+=200", 2748 markers: false, 2749 }, 2750 opacity: 1, 2751 x: -0, 2752 ease: "power2.out", 2753 duration: 2, 2754 stagger: { 2755 each: 0.4, 2756 }, 2757 }); 2758 }); 2759 } else { 2760 gsap.to(".animation_service_7 .service__item-7", { 2761 scrollTrigger: { 2762 trigger: ".animation_service_7", 2763 start: "top center+=200", 2764 markers: false, 2765 }, 2766 opacity: 1, 2767 x: 0, 2768 ease: "power2.out", 2769 duration: 2, 2770 stagger: { 2771 each: 0.4, 2772 }, 2773 }); 2774 } 2775 } 2776 ///////////////////////////////////////////////////// 2777 2778 ///////////////////////////////////////////////////// 2779 // 65. Service 7 Animation 2780 let animation_workflow_6 = gsap.utils.toArray( 2781 ".animation_workflow_6 .workflow__item-4" 2782 ); 2783 if (animation_workflow_6) { 2784 if (device_width < 1023) {
2785 animation_workflow_6.forEach((item, i) => { 2786 gsap.from(item, { 2787 scrollTrigger: { 2788 trigger: item, 2789 start: "top center+=200", 2790 markers: false, 2791 }, 2792 opacity: 0, 2793 x: -30, 2794 ease: "power2.out", 2795 duration: 2, 2796 stagger: { 2797 each: 0.4, 2798 }, 2799 }); 2800 }); 2801 } else { 2802 gsap.from(".animation_workflow_6 .workflow__item-4", { 2803 scrollTrigger: { 2804 trigger: ".animation_workflow_6", 2805 start: "top center+=200", 2806 markers: false, 2807 }, 2808 opacity: 0, 2809 x: -30, 2810 ease: "power2.out", 2811 duration: 2, 2812 stagger: { 2813 each: 0.4, 2814 }, 2815 }); 2816 } 2817 } 2818 ///////////////////////////////////////////////////// 2819 2820 ///////////////////////////////////////////////////// 2821 // 66. Blog Animation 3 2822 gsap.set(".blog__animation .blog__item-4", { x: 50, opacity: 0 }); 2823 2824 if (device_width < 1023) { 2825 const blogList = gsap.utils.toArray(".blog__animation .blog__item-4"); 2826 blogList.forEach((item, i) => { 2827 let blogTl = gsap.timeline({ 2828 scrollTrigger: { 2829 trigger: item, 2830 start: "top center+=200", 2831 }, 2832 }); 2833 blogTl.to(item, { 2834 x: 0, 2835 opacity: 1, 2836 ease: "power2.out", 2837 duration: 1.5, 2838 }); 2839 }); 2840 } else { 2841 gsap.to(".blog__animation .blog__item-4", { 2842 scrollTrigger: { 2843 trigger: ".blog__animation .blog__item-4", 2844 start: "top center+=300", 2845 markers: false, 2846 }, 2847 x: 0, 2848 opacity: 1, 2849 ease: "power2.out", 2850 duration: 2, 2851 stagger: { 2852 each: 0.3, 2853 }, 2854 }); 2855 } 2856 ///////////////////////////////////////////////////// 2857 2858 // Home One Hero Animation 2859 let HomeDigital = gsap.timeline(); 2860 let HomeDigitalImage = gsap.timeline(); 2861 2862 let hero7_thum_anim = document.querySelector(".hero7__thum-anim"); 2863 if (hero7_thum_anim) { 2864 let hero7_thumb_1 = document.querySelector(".image-1"); 2865 let hero7_thumb_2 = document.querySelector(".image-2"); 2866 let hero7_thumb_3 = document.querySelector(".image-3"); 2867 let hero7_thumb_4 = document.querySelector(".image-4"); 2868 2869 gsap.from(".image-1", { 2870 x: 65, 2871 yPercent: 100, 2872 opacity: 0, 2873 duration: 2, 2874 delay: 1, 2875 }); 2876 2877 gsap.from(".image-2", { 2878 delay: 1.5, 2879 scale: 0, 2880 duration: 1.5, 2881 }); 2882 2883 gsap.from(".image-3", { 2884 x: 65, 2885 yPercent: -100, 2886 duration: 2, 2887 opacity: 0, 2888 delay: 1, 2889 }); 2890 gsap.from(".image-4", { 2891 xPercent: -100, 2892 yPercent: -100, 2893 duration: 2, 2894 opacity: 0, 2895 delay: 1, 2896 }); 2897 } 2898 2899 // Charchater Come long Animation 2900 let mark = document.querySelector(".hero__area-3 .title-left"); 2901 let eting = document.querySelector(".hero__area-3 .title-right"); 2902 let hero__text_animation = document.querySelector(".hero__text-animation"); 2903 2904 let split_creatives = new SplitText(mark, { type: "chars" }); 2905 let split_solutions = new SplitText(eting, { type: "chars" }); 2906 let split_text_animation = new SplitText(hero__text_animation, { 2907 type: "chars words", 2908 }); 2909 2910 HomeDigital.from(split_creatives.chars, { 2911 duration: 2, 2912 x: 100, 2913 autoAlpha: 0, 2914 stagger: 0.2, 2915 }); 2916 HomeDigital.from( 2917 split_solutions.chars, 2918 { duration: 1, x: 100, autoAlpha: 0, stagger: 0.1 }, 2919 "-=1" 2920 ); 2921 HomeDigital.from( 2922 split_text_animation.words, 2923 { duration: 1, x: 50, autoAlpha: 0, stagger: 0.05 }, 2924 "-=1" 2925 ); 2926 2927 // Home page Hero Animation 2928 let homeCreative = gsap.timeline(); 2929 2930 // Charchater Come long Animation 2931 let creative = document.querySelector(".service__hero-right-2 .creative"); 2932 let solution = document.querySelector(".service__hero-right-2 .solution"); 2933 let heroContent = document.querySelector( 2934 ".service__hero-right-2 .animate_content" 2935 ); 2936 2937 let split_creative = new SplitText(creative, { type: "chars" }); 2938 let split_solution = new SplitText(solution, { type: "chars" }); 2939 let split_herocontent = new SplitText(heroContent, { type: "chars words" }); 2940 2941 homeCreative.from(split_creative.chars, { 2942 duration: 1, 2943 x: 70, 2944 autoAlpha: 0, 2945 stagger: 0.1, 2946 }); 2947 homeCreative.from( 2948 split_solution.chars, 2949 { duration: 1, x: 70, autoAlpha: 0, stagger: 0.1 }, 2950 "-=1.5" 2951 ); 2952 homeCreative.from( 2953 split_herocontent.words, 2954 { duration: 1, x: 50, autoAlpha: 0, stagger: 0.05 }, 2955 "-=1" 2956 ); 2957 2958 // Home page Hero Animation 2959 gsap.set(".experience", { 2960 y: 50, 2961 opacity: 0, 2962 }); 2963 let homeAgency = gsap.timeline(); 2964 2965 // Charchater Come long Animation 2966 let hero__title = document.querySelector(".hero__title"); 2967 let hero__subtitle = document.querySelector(".hero__sub-title"); 2968 2969 let split_hero__title = new SplitText(hero__title, { type: "chars" }); 2970 let split_hero__subtitle = new SplitText(hero__subtitle, { 2971 type: "chars words", 2972 }); 2973 2974 homeAgency.from(split_hero__title.chars, { 2975 duration: 1, 2976 x: 70, 2977 autoAlpha: 0, 2978 stagger: 0.1, 2979 }); 2980 homeAgency.from( 2981 split_hero__subtitle.words, 2982 { duration: 1, x: 50, autoAlpha: 0, stagger: 0.05 }, 2983 "-=1" 2984 ); 2985 2986 homeAgency.to( 2987 ".experience", 2988 { 2989 y: 0, 2990 opacity: 1, 2991 duration: 2, 2992 ease: "power2.out", 2993 }, 2994 "-=1.5" 2995 ); 2996 2997 // Home 6 Hero Animation 2998 let homeStratup = gsap.timeline(); 2999 3000 // Charchater Come long Animation 3001 let hero6_title = document.querySelector(".hero__six_anim .hero__title-6");
3002 let hero6_desc = document.querySelector(".hero__six_anim p"); 3003 3004 let hero6_button = document.querySelector(".hero__six_anim a"); 3005 let hero6_image = document.querySelector(".hero__right-6 img"); 3006 3007 gsap.set(hero6_image, { 3008 opacity: 0, 3009 y: 50, 3010 }); 3011 gsap.set(hero6_button, { 3012 opacity: 0, 3013 y: 50, 3014 }); 3015 3016 let split_hero6_title = new SplitText(hero6_title, { type: "chars" }); 3017 let split_hero6_desc = new SplitText(hero6_desc, { type: "chars words" }); 3018 3019 homeStratup.from(split_hero6_title.chars, { 3020 duration: 1, 3021 x: 70, 3022 autoAlpha: 0, 3023 stagger: 0.1, 3024 }); 3025 homeStratup.from( 3026 split_hero6_desc.words, 3027 { duration: 1, x: 50, autoAlpha: 0, stagger: 0.05 }, 3028 "-=1" 3029 ); 3030 homeStratup.to( 3031 hero6_button, 3032 { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 3033 "-=1.5" 3034 ); 3035 homeStratup.to( 3036 hero6_image, 3037 { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 3038 "-=1" 3039 ); 3040 3041 ///////////////////////////////////////////////////// 3042 // 67. Workflow Slider Animation | fade_bottom 2 3043 gsap.set(".fade_bottom_2", { y: 30, opacity: 0 }); 3044 3045 if (device_width < 1023) { 3046 const fadeArray = gsap.utils.toArray(".fade_bottom_2"); 3047 fadeArray.forEach((item, i) => { 3048 let fadeTl = gsap.timeline({ 3049 scrollTrigger: { 3050 trigger: item, 3051 start: "top center+=200", 3052 }, 3053 }); 3054 fadeTl.to(item, { 3055 y: 0, 3056 opacity: 1, 3057 ease: "power2.out", 3058 duration: 1.5, 3059 }); 3060 }); 3061 } else { 3062 gsap.to(".fade_bottom_2", { 3063 scrollTrigger: { 3064 trigger: ".fade_bottom_2", 3065 start: "top center+=300", 3066 markers: false, 3067 }, 3068 y: 0, 3069 opacity: 1, 3070 ease: "power2.out", 3071 duration: 1, 3072 stagger: { 3073 each: 0.2, 3074 }, 3075 }); 3076 } 3077 ///////////////////////////////////////////////////// 3078 3079 ///////////////////////////////////////////////////// 3080 // 68. Workflow Slider Animation 2 | fade_bottom 3081 gsap.set(".fade_bottom_3", { y: 30, opacity: 0 }); 3082 3083 if (device_width < 1023) { 3084 const fadeArray = gsap.utils.toArray(".fade_bottom_3"); 3085 fadeArray.forEach((item, i) => { 3086 let fadeTl = gsap.timeline({ 3087 scrollTrigger: { 3088 trigger: item, 3089 start: "top center+=200", 3090 }, 3091 }); 3092 fadeTl.to(item, { 3093 y: 0, 3094 opacity: 1, 3095 ease: "power2.out", 3096 duration: 1.5, 3097 }); 3098 }); 3099 } else { 3100 gsap.to(".fade_bottom_3", { 3101 scrollTrigger: { 3102 trigger: ".fade_bottom_3", 3103 start: "top center+=300", 3104 markers: false, 3105 }, 3106 y: 0, 3107 opacity: 1, 3108 ease: "power2.out", 3109 duration: 1, 3110 stagger: { 3111 each: 0.2, 3112 }, 3113 }); 3114 } 3115 ///////////////////////////////////////////////////// 3116 3117 ///////////////////////////////////////////////////// 3118 // 69. Workflow Slider Animation 2 | fade_bottom 3119 gsap.set(".fade_bottom_4", { y: 30, opacity: 0 }); 3120 3121 if (device_width < 1023) { 3122 const fadeArray = gsap.utils.toArray(".fade_bottom_4"); 3123 fadeArray.forEach((item, i) => { 3124 let fadeTl = gsap.timeline({ 3125 scrollTrigger: { 3126 trigger: item, 3127 start: "top center+=200", 3128 }, 3129 }); 3130 fadeTl.to(item, { 3131 y: 0, 3132 opacity: 1, 3133 ease: "power2.out", 3134 duration: 1.5, 3135 }); 3136 }); 3137 } else { 3138 gsap.to(".fade_bottom_4", { 3139 scrollTrigger: { 3140 trigger: ".fade_bottom_4", 3141 start: "top center+=300", 3142 markers: false, 3143 }, 3144 y: 0, 3145 opacity: 1, 3146 ease: "power2.out", 3147 duration: 1, 3148 stagger: { 3149 each: 0.2, 3150 }, 3151 }); 3152 } 3153 ///////////////////////////////////////////////////// 3154 3155 ///////////////////////////////////////////////////// 3156 // 69. Workflow Slider Animation 2 | fade_bottom_5 3157 gsap.set(".fade_bottom_5", { y: 30, opacity: 0 }); 3158 3159 if (device_width < 1023) { 3160 const fadeArray = gsap.utils.toArray(".fade_bottom_5"); 3161 fadeArray.forEach((item, i) => { 3162 let fadeTl = gsap.timeline({ 3163 scrollTrigger: { 3164 trigger: item, 3165 start: "top center+=200", 3166 }, 3167 }); 3168 fadeTl.to(item, { 3169 y: 0, 3170 opacity: 1, 3171 ease: "power2.out", 3172 duration: 1.5, 3173 }); 3174 }); 3175 } else { 3176 gsap.to(".fade_bottom_5", { 3177 scrollTrigger: { 3178 trigger: ".fade_bottom_5", 3179 start: "top center+=300", 3180 markers: false, 3181 }, 3182 y: 0, 3183 opacity: 1, 3184 ease: "power2.out", 3185 duration: 1, 3186 stagger: { 3187 each: 0.2, 3188 }, 3189 }); 3190 } 3191 ///////////////////////////////////////////////////// 3192 3193 // HERO - 10 3194 var hero10 = new Swiper(".hero10_activition", { 3195 direction: "horizontal", 3196 loop: true, 3197 speed: 1500, 3198 slidesPerView: 4, 3199 spaceBetween: 30, 3200 mousewheel: true, 3201 mousewheelControl: true, 3202 keyboard: true, 3203 navigation: { 3204 nextEl: ".swiper-button-next", 3205 prevEl: ".swiper-button-prev", 3206 }, 3207 pagination: { 3208 el: ".swiper-pagination", 3209 type: "fraction", 3210 clickable: true, 3211 3212 renderFraction: function (currentClass, totalClass) { 3213 return ( 3214 '<span class="' + 3215 currentClass + 3216 '"></span>' + 3217 ' <span><i class="fa-solid fa-minus increase-dash"></i></span> ' + 3218 '<span class="' + 3219 totalClass + 3220 '"></span>' 3221 ); 3222 }, 3223 }, 3224 breakpoints: { 3225 1400: { 3226 slidesPerView: 4, 3227 }, 3228 1000: { 3229 slidesPerView: 3, 3230 }, 3231 768: { 3232 slidesPerView: 2, 3233 }, 3234 320: { 3235 slidesPerView: 1, 3236 }, 3237 }, 3238 }); 3239 3240 // ========================================================= 3241 // Image Hover 3242 const hover_title = document.querySelectorAll(".hover_wrap"); 3243 3244 if (hover_title) {
3245 function hoverImgFunc(event, hover_title) { 3246 const contentBox = hover_title.getBoundingClientRect(); 3247 const dx = event.clientX - contentBox.x; 3248 const dy = event.clientY - contentBox.y; 3249 hover_title.children[0].style.transform = `translate(${dx}px, ${dy}px)`; 3250 } 3251 3252 hover_title.forEach((item, i) => { 3253 item.addEventListener("mousemove", (event) => { 3254 setInterval(hoverImgFunc(event, item), 1000); 3255 }); 3256 }); 3257 } 3258 // ========================================================= 3259 3260 // ===================================================================== 3261 // showcase 8 hover 3262 const hover_8_wrap = document.querySelectorAll(".hover_8_wrap a"); 3263 const h8_wrap_len = hover_8_wrap.length; 3264 3265 if (h8_wrap_len == 1) { 3266 function showCase8Func(event, hover_8_wrap) { 3267 const contentBox = hover_8_wrap[0].getBoundingClientRect(); 3268 const dx = event.pageX; 3269 const dy = event.clientY - contentBox.y; 3270 document.querySelector( 3271 ".hover_8_img" 3272 ).style.transform = `translate(${dx}px, ${dy}px)`; 3273 } 3274 hover_8_wrap[0].addEventListener("mousemove", (event) => { 3275 setInterval(showCase8Func(event, hover_8_wrap), 1000); 3276 document.querySelector(".hover_8_img").classList.add("active"); 3277 }); 3278 hover_8_wrap[0].addEventListener("mouseout", (event) => { 3279 document.querySelector(".hover_8_img").classList.remove("active"); 3280 }); 3281 } 3282 3283 if (h8_wrap_len == 2) { 3284 function showCase8Func(event, hover_8_wrap) { 3285 const contentBox = hover_8_wrap[0].getBoundingClientRect(); 3286 const dx = event.pageX; 3287 const dy = event.clientY - contentBox.y; 3288 document.querySelector( 3289 ".hover_8_img" 3290 ).style.transform = `translate(${dx}px, ${dy}px)`; 3291 3292 console.log(event.pageX); 3293 } 3294 hover_8_wrap[0].addEventListener("mousemove", (event) => { 3295 setInterval(showCase8Func(event, hover_8_wrap), 1000); 3296 document.querySelector(".hover_8_img").classList.add("active"); 3297 }); 3298 hover_8_wrap[0].addEventListener("mouseout", (event) => { 3299 document.querySelector(".hover_8_img").classList.remove("active"); 3300 }); 3301 3302 function showCase8Func2(event, hover_8_wrap) { 3303 const contentBox = hover_8_wrap[1].getBoundingClientRect(); 3304 const dx = event.pageX; 3305 const dy = event.clientY - contentBox.y; 3306 document.querySelector( 3307 ".hover_8_img_2" 3308 ).style.transform = `translate(${dx}px, ${dy}px)`; 3309 } 3310 hover_8_wrap[1].addEventListener("mousemove", (event) => { 3311 setInterval(showCase8Func2(event, hover_8_wrap), 1000); 3312 document.querySelector(".hover_8_img_2").classList.add("active"); 3313 }); 3314 hover_8_wrap[1].addEventListener("mouseout", (event) => { 3315 document.querySelector(".hover_8_img_2").classList.remove("active"); 3316 }); 3317 } 3318 // ================================================================= 3319 3320 // Home 9 3321 let slider_9_image = document.querySelector(".slider9_images"); 3322 3323 if (slider_9_image) { 3324 document.querySelector(".slider9_images").style.display = "none"; 3325 var cols = 1; 3326 if (device_width > 767) { 3327 cols = 3; 3328 } else { 3329 cols = 1; 3330 } 3331 3332 const main = document.getElementById("main"); 3333 let parts = []; 3334 3335 var content_list = document.querySelectorAll(".slide9_content"); 3336 var title_list = document.querySelectorAll(".slide9_content h2"); 3337 3338 var content_list = document.querySelectorAll(".slide9_content p"); 3339 3340 var images_listss = document.querySelectorAll(".slider9_image img"); 3341 var images = []; 3342 var titles = []; 3343 var contents = []; 3344 3345 images_listss.forEach((item) => { 3346 let srcs = item.getAttribute("src"); 3347 images.push(srcs); 3348 }); 3349 title_list.forEach((item) => { 3350 let title = item.innerHTML; 3351 titles.push(title); 3352 }); 3353 content_list.forEach((item) => { 3354 let content = item.innerHTML; 3355 contents.push(content); 3356 }); 3357 3358 let current = 0; 3359 let playing = false; 3360 3361 for (let col = 0; col < cols; col++) { 3362 let part = document.createElement("div"); 3363 part.className = "part"; 3364 let el = document.createElement("a"); 3365 el.className = "section"; 3366 el.href = "http://127.0.0.1:5500/service-details.html"; 3367 3368 let img = document.createElement("img"); 3369 img.src = images[current]; 3370 el.appendChild(img); 3371 3372 let h2 = document.createElement("h2"); 3373 h2.innerHTML = titles[current]; 3374 el.appendChild(h2); 3375 3376 let p = document.createElement("p"); 3377 p.innerHTML = contents[current]; 3378 el.appendChild(p); 3379
3380 part.style.setProperty("--x", (-100 / cols) * col + "vw"); 3381 part.appendChild(el); 3382 main.appendChild(part); 3383 parts.push(part); 3384 } 3385 3386 // Cursor Pointer and Circle event 3387 function lerp(start, end, amount) { 3388 return (1 - amount) * start + amount * end; 3389 } 3390 3391 const cursor = document.createElement("div"); 3392 cursor.className = "cursor"; 3393 3394 const cursorF = document.createElement("div"); 3395 cursorF.className = "cursor-f"; 3396 let cursorX = 0; 3397 let cursorY = 0; 3398 let pageX = 0; 3399 let pageY = 0; 3400 let size = 8; 3401 let sizeF = 36; 3402 let followSpeed = 0.16; 3403 3404 document.body.appendChild(cursor); 3405 document.body.appendChild(cursorF); 3406 3407 if ("ontouchstart" in window) { 3408 cursor.style.display = "none"; 3409 cursorF.style.display = "none"; 3410 } 3411 3412 cursor.style.setProperty("--size", size + "px"); 3413 cursorF.style.setProperty("--size", sizeF + "px"); 3414 3415 window.addEventListener("mousemove", function (e) { 3416 pageX = e.clientX; 3417 pageY = e.clientY; 3418 cursor.style.left = e.clientX - size / 2 + "px"; 3419 cursor.style.top = e.clientY - size / 2 + "px"; 3420 }); 3421 3422 function loop() { 3423 cursorX = lerp(cursorX, pageX, followSpeed); 3424 cursorY = lerp(cursorY, pageY, followSpeed); 3425 cursorF.style.top = cursorY - sizeF / 2 + "px"; 3426 cursorF.style.left = cursorX - sizeF / 2 + "px"; 3427 requestAnimationFrame(loop); 3428 } 3429 loop(); 3430 3431 // Rollover UP & Down Mouse Wheel Navigation 3432 let animOptions = { 3433 duration: 2.3, 3434 ease: Power4.easeInOut, 3435 }; 3436 3437 function go(dir) { 3438 if (!playing) { 3439 playing = true; 3440 if (current + dir < 0) current = images.length - 1; 3441 else if (current + dir >= images.length) current = 0; 3442 else current += dir; 3443 3444 function up(part, next) { 3445 part.appendChild(next); 3446 gsap 3447 .to(part, { ...animOptions, y: -window.innerHeight }) 3448 .then(function () { 3449 part.children[0].remove(); 3450 gsap.to(part, { duration: 0, y: 0 }); 3451 }); 3452 } 3453 3454 function down(part, next) { 3455 part.prepend(next); 3456 gsap.to(part, { duration: 0, y: -window.innerHeight }); 3457 gsap.to(part, { ...animOptions, y: 0 }).then(function () { 3458 part.children[1].remove(); 3459 playing = false; 3460 }); 3461 } 3462 3463 for (let p in parts) { 3464 let part = parts[p]; 3465 let next = document.createElement("a"); 3466 next.href = "http://127.0.0.1:5500/service-details.html"; 3467 next.className = "section"; 3468 let img = document.createElement("img"); 3469 img.src = images[current]; 3470 next.appendChild(img); 3471 3472 let h2 = document.createElement("h2"); 3473 h2.innerHTML = titles[current]; 3474 next.appendChild(h2); 3475 3476 let pa = document.createElement("p"); 3477 pa.innerHTML = contents[current]; 3478 next.appendChild(pa); 3479 3480 if ((p - Math.max(0, dir)) % 2) { 3481 down(part, next); 3482 } else { 3483 up(part, next); 3484 } 3485 } 3486 } 3487 } 3488 3489 //Press Up & Down Keyboard Arrow Event 3490 window.addEventListener("keydown", function (e) { 3491 if (["ArrowDown", "ArrowRight"].includes(e.key)) { 3492 go(1); 3493 } else if (["ArrowUp", "ArrowLeft"].includes(e.key)) { 3494 go(-1); 3495 } 3496 }); 3497 3498 // Cursor Invent Target Touches 3499 let startY; 3500 let endY; 3501 let clicked = false; 3502 3503 function mousedown(e) { 3504 gsap.to(cursor, { scale: 4.5 }); 3505 gsap.to(cursorF, { scale: 0.4 }); 3506 3507 clicked = true; 3508 startY = e.clientY || e.touches[0].clientY || e.targetTouches[0].clientY; 3509 } 3510 3511 function mouseup(e) { 3512 gsap.to(cursor, { scale: 1 }); 3513 gsap.to(cursorF, { scale: 1 }); 3514 3515 endY = e.clientY || endY; 3516 if (clicked && startY && Math.abs(startY - endY) >= 40) { 3517 go(!Math.min(0, startY - endY) ? 1 : -1); 3518 clicked = false; 3519 startY = null; 3520 endY = null; 3521 } 3522 } 3523 3524 window.addEventListener("mousedown", mousedown, false); 3525 window.addEventListener("touchstart", mousedown, false); 3526 window.addEventListener( 3527 "touchmove", 3528 function (e) { 3529 if (clicked) { 3530 endY = e.touches[0].clientY || e.targetTouches[0].clientY; 3531 } 3532 }, 3533 false 3534 ); 3535 window.addEventListener("touchend", mouseup, false); 3536 window.addEventListener("mouseup", mouseup, false); 3537 3538 //Mouse Wheel Scroll Transition 3539 let scrollTimeout; 3540 function wheel(e) { 3541 clearTimeout(scrollTimeout); 3542 setTimeout(function () { 3543 if (e.deltaY < -40) { 3544 go(-1); 3545 } else if (e.deltaY >= 40) { 3546 go(1); 3547 } 3548 }); 3549 } 3550 window.addEventListener("mousewheel", wheel, false); 3551 window.addEventListener("wheel", wheel, false); 3552 3553 let alls = document.querySelectorAll("#main .part"); 3554 alls[0].classList.add("showed"); 3555 } 3556 3557 // Tilt JS 3558 let tilt = document.querySelectorAll(".wc-tilt"); 3559 let tilt_2 = document.querySelectorAll(".wc-tilt-2"); 3560 3561 if (tilt) { 3562 VanillaTilt.init(document.querySelectorAll(".wc-tilt"), { 3563 max: 15, 3564 speed: 3000, 3565 }); 3566 } 3567 3568 if (tilt_2) { 3569 VanillaTilt.init(document.querySelectorAll(".wc-tilt-2"), {
3570 max: 10, 3571 speed: 3000, 3572 }); 3573 } 3574 3575 // Home 16 3576 var shocase_list_16 = document.querySelectorAll(".showcase__content-16"); 3577 3578 shocase_list_16.forEach((shocase16) => { 3579 gsap.to(shocase16, { 3580 scrollTrigger: { 3581 trigger: shocase16, 3582 pin: shocase16, 3583 pinSpacing: false, 3584 start: "top top", 3585 delay: 1, 3586 }, 3587 }); 3588 }); 3589 3590 //////////////////////////////////////////////// 3591 // Home 8 3592 let imageTl_8 = gsap.timeline({ 3593 scrollTrigger: { 3594 trigger: ".portfolio__big", 3595 start: "top top+=90", 3596 pin: true, 3597 markers: false, 3598 scrub: 1, 3599 pinSpacing: false, 3600 end: "bottom bottom+=150", 3601 }, 3602 }); 3603 imageTl_8.to(".portfolio__big-inner", { 3604 width: "100%", 3605 }); 3606 /////////////////////////////////////////////////// 3607 3608 ////////////////////////////////////////////////// 3609 // Home 12 3610 const portfImgItem12 = document.querySelectorAll(".portfolio__item-12"); 3611 3612 function portfImageCursor(event, portfImgItem12) { 3613 const contentBox = portfImgItem12.getBoundingClientRect(); 3614 const dx = event.clientX - contentBox.x; 3615 const dy = event.clientY - contentBox.y; 3616 portfImgItem12.children[3].style.transform = `translate(${dx}px, ${dy}px)`; 3617 } 3618 3619 portfImgItem12.forEach((item, i) => { 3620 item.addEventListener("mousemove", (event) => { 3621 setInterval(portfImageCursor(event, item), 1000); 3622 }); 3623 }); 3624 ///////////////////////////////////////////////////// 3625 3626 ///////////////////////////////////////////////////// 3627 // Activate MixitUp 3628 let mixitup_17 = document.querySelector(".showcase-mixitup"); 3629 if (mixitup_17) { 3630 var mixer = mixitup(".showcase-mixitup"); 3631 } 3632 ///////////////////////////////////////////////////// 3633 3634 ///////////////////////////////////////////////////// 3635 // Home 17 3636 gsap.to(".showcase__menu-4", { 3637 scrollTrigger: { 3638 trigger: ".showcase__area-4", 3639 pin: ".showcase__menu-4", 3640 pinSpacing: false, 3641 start: "top top", 3642 end: "bottom center", 3643 markers: false, 3644 delay: 1, 3645 }, 3646 }); 3647 ///////////////////////////////////////////////////// 3648 3649 ///////////////////////////////////////////////////// 3650 // 3651 let mainSliderSelector = ".main-slider", 3652 thumbSliderSelector = ".thumb-slider"; 3653 3654 // Main Slider 3655 let mainSliderOptions = { 3656 loop: true, 3657 speed: 1500, 3658 parallax: true, 3659 mousewheel: true, 3660 loopAdditionalSlides: 6, 3661 grabCursor: true, 3662 effect: "fade", 3663 watchSlidesProgress: true, 3664 pagination: { 3665 el: ".swiper-pagination", 3666 clickable: true, 3667 }, 3668 }; 3669 let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions); 3670 3671 // thumb Slider 3672 let thumbSliderOptions = { 3673 loop: true, 3674 loopAdditionalSlides: 5, 3675 speed: 1500, 3676 spaceBetween: 15, 3677 centeredSlides: true, 3678 touchRatio: 0.2, 3679 slideToClickedSlide: true, 3680 direction: "vertical", 3681 breakpoints: { 3682 200: { 3683 slidesPerView: 3, 3684 }, 3685 768: { 3686 slidesPerView: 5, 3687 }, 3688 1024: { 3689 slidesPerView: 5, 3690 }, 3691 1400: { 3692 slidesPerView: 7, 3693 }, 3694 }, 3695 }; 3696 let thumbSlider = new Swiper(thumbSliderSelector, thumbSliderOptions); 3697 3698 mainSlider.controller.control = thumbSlider; 3699 thumbSlider.controller.control = mainSlider; 3700 3701 ///////////////////////////////////////////////////// 3702 3703 ///////////////////////////////////////////////////// 3704 // Home 11 3705 let mainSliderSelector11 = ".main-slider11", 3706 thumbSliderSelector11 = ".thumb-slider11"; 3707 3708 // Main Slider 3709 let mainSliderOptions11 = { 3710 loop: true, 3711 speed: 1500, 3712 parallax: true, 3713 mousewheel: true, 3714 loopAdditionalSlides: 6, 3715 grabCursor: true, 3716 effect: "fade", 3717 watchSlidesProgress: true, 3718 direction: "vertical", 3719 }; 3720 let mainSlider11 = new Swiper(mainSliderSelector11, mainSliderOptions11); 3721 3722 // thumb Slider 3723 let thumbSliderOptions11 = { 3724 loop: true, 3725 loopAdditionalSlides: 5, 3726 speed: 1500, 3727 centeredSlides: true, 3728 touchRatio: 0.2, 3729 slideToClickedSlide: true, 3730 direction: "vertical", 3731 breakpoints: { 3732 200: { 3733 slidesPerView: 6, 3734 }, 3735 768: { 3736 slidesPerView: 6, 3737 }, 3738 1200: { 3739 slidesPerView: 5, 3740 }, 3741 }, 3742 }; 3743 let thumbSlider11 = new Swiper(thumbSliderSelector11, thumbSliderOptions11); 3744 3745 mainSlider11.controller.control = thumbSlider11; 3746 thumbSlider11.controller.control = mainSlider11; 3747 ///////////////////////////////////////////////////// 3748 3749 // Job Details 3750 if (device_width > 767) { 3751 gsap.to(".job__detail-sidebar", { 3752 scrollTrigger: { 3753 trigger: ".job__detail", 3754 pin: ".job__detail-sidebar", 3755 pinSpacing: false, 3756 start: "top top", 3757 end: "bottom center", 3758 markers: false, 3759 delay: 1, 3760 }, 3761 }); 3762 } 3763 3764 ////////////////////////////////////////////////// 3765 // Woocommerce Hero Slider 3766 const woocommerce_hero = new Swiper(".woocomerce-active", { 3767 loop: true, 3768 speed: 2000,
3769 autoplay: { 3770 delay: 2000, 3771 }, 3772 effect: "fade", 3773 pagination: { 3774 el: ".swiper-pagination", 3775 type: "fraction", 3776 }, 3777 navigation: { 3778 nextEl: ".woocomerce__hero-next", 3779 prevEl: ".woocomerce__hero-prev", 3780 }, 3781 scrollbar: { 3782 el: ".swiper-scrollbar", 3783 }, 3784 }); 3785 3786 ////////////////////////////////////////////////// 3787 // Woocommerce Feature Slider 3788 const woocommerce_feature = new Swiper(".feature1-active", { 3789 speed: 2000, 3790 slidesPerView: 4, 3791 spaceBetween: 20, 3792 navigation: { 3793 nextEl: ".swiper-button-parrow", 3794 prevEl: ".swiper-button-narrow", 3795 }, 3796 breakpoints: { 3797 320: { 3798 slidesPerView: 1, 3799 spaceBetween: 10, 3800 }, 3801 480: { 3802 slidesPerView: 1, 3803 spaceBetween: 10, 3804 }, 3805 640: { 3806 slidesPerView: 2, 3807 spaceBetween: 20, 3808 }, 3809 991: { 3810 slidesPerView: 3, 3811 spaceBetween: 20, 3812 }, 3813 1200: { 3814 slidesPerView: 4, 3815 spaceBetween: 20, 3816 }, 3817 }, 3818 }); 3819 3820 ////////////////////////////////////////////////// 3821 // Woocommerce Feature Slider 2 3822 const woocommerce_feature_2 = new Swiper(".feature2-active", { 3823 speed: 2000, 3824 slidesPerView: 4, 3825 spaceBetween: 20, 3826 navigation: { 3827 nextEl: ".swiper-button-parrow", 3828 prevEl: ".swiper-button-narrow", 3829 }, 3830 breakpoints: { 3831 320: { 3832 slidesPerView: 1, 3833 spaceBetween: 10, 3834 }, 3835 480: { 3836 slidesPerView: 1, 3837 spaceBetween: 10, 3838 }, 3839 640: { 3840 slidesPerView: 2, 3841 spaceBetween: 20, 3842 }, 3843 991: { 3844 slidesPerView: 3, 3845 spaceBetween: 20, 3846 }, 3847 1200: { 3848 slidesPerView: 4, 3849 spaceBetween: 20, 3850 }, 3851 }, 3852 }); 3853 3854 ////////////////////////////////////////////////// 3855 // Woocommerce Category Slider 3856 const woocommerce_category = new Swiper(".category-active", { 3857 speed: 2000, 3858 slidesPerView: 9, 3859 spaceBetween: 5, 3860 navigation: { 3861 nextEl: ".swiper-button-parrow", 3862 prevEl: ".swiper-button-narrow", 3863 }, 3864 breakpoints: { 3865 320: { 3866 slidesPerView: 2, 3867 spaceBetween: 20, 3868 }, 3869 480: { 3870 slidesPerView: 3, 3871 spaceBetween: 20, 3872 }, 3873 640: { 3874 slidesPerView: 4, 3875 spaceBetween: 20, 3876 }, 3877 900: { 3878 slidesPerView: 6, 3879 spaceBetween: 20, 3880 }, 3881 1200: { 3882 slidesPerView: 8, 3883 spaceBetween: 20, 3884 }, 3885 }, 3886 }); 3887 3888 ////////////////////////////////////////////////// 3889 // Woocommerce Brand Slider 3890 const woocommerce_brand = new Swiper(".woocomerce-brand-active", { 3891 loop: true, 3892 speed: 6000, 3893 autoplay: { 3894 delay: 1, 3895 }, 3896 allowTouchMove: false, 3897 slidesPerView: 9, 3898 spaceBetween: 5, 3899 breakpoints: { 3900 320: { 3901 slidesPerView: 2, 3902 spaceBetween: 5, 3903 }, 3904 700: { 3905 slidesPerView: 3, 3906 spaceBetween: 30, 3907 }, 3908 1000: { 3909 slidesPerView: 5, 3910 spaceBetween: 40, 3911 }, 3912 }, 3913 }); 3914 3915 ////////////////////////////////////////////////// 3916 // Woocommerce Testimonial Slider 3917 const woocommerce_testimonial = new Swiper(".woocomerce-testimonial", { 3918 speed: 2000, 3919 slidesPerView: 1, 3920 spaceBetween: 1, 3921 breakpoints: { 3922 320: { 3923 slidesPerView: 1, 3924 spaceBetween: 5, 3925 }, 3926 480: { 3927 slidesPerView: 1, 3928 spaceBetween: 30, 3929 }, 3930 640: { 3931 slidesPerView: 1, 3932 spaceBetween: 40, 3933 }, 3934 }, 3935 }); 3936 3937 ///////////////////////////////////////////////// 3938 // Featured Products Animation 3939 gsap.set(".wc_feature_products .woocomerce__feature-product", { 3940 x: 50, 3941 opacity: 0, 3942 }); 3943 3944 if (device_width < 1023) { 3945 const blogList = gsap.utils.toArray( 3946 ".wc_feature_products .woocomerce__feature-product" 3947 ); 3948 blogList.forEach((item, i) => { 3949 let blogTl = gsap.timeline({ 3950 scrollTrigger: { 3951 trigger: item, 3952 start: "top center+=200", 3953 }, 3954 }); 3955 blogTl.to(item, { 3956 x: 0, 3957 opacity: 1, 3958 ease: "power2.out", 3959 duration: 1.5, 3960 }); 3961 }); 3962 } else { 3963 gsap.to(".wc_feature_products .woocomerce__feature-product", { 3964 scrollTrigger: { 3965 trigger: ".wc_feature_products .woocomerce__feature-product", 3966 start: "top center+=300", 3967 markers: false, 3968 }, 3969 x: 0, 3970 opacity: 1, 3971 ease: "power2.out", 3972 duration: 2, 3973 stagger: { 3974 each: 0.3, 3975 }, 3976 }); 3977 } 3978 ///////////////////////////////////////////////// 3979 3980 ///////////////////////////////////////////////// 3981 // New Arrival Products Animation 3982 gsap.set(".new_arrival_products .woocomerce__feature-product", { 3983 x: 50, 3984 opacity: 0, 3985 }); 3986 3987 if (device_width < 1023) { 3988 const blogList = gsap.utils.toArray( 3989 ".new_arrival_products .woocomerce__feature-product" 3990 ); 3991 blogList.forEach((item, i) => { 3992 let blogTl = gsap.timeline({ 3993 scrollTrigger: { 3994 trigger: item, 3995 start: "top center+=200", 3996 }, 3997 }); 3998 blogTl.to(item, { 3999 x: 0, 4000 opacity: 1, 4001 ease: "power2.out", 4002 duration: 1.5, 4003 }); 4004 }); 4005 } else { 4006 gsap.to(".new_arrival_products .woocomerce__feature-product", { 4007 scrollTrigger: { 4008 trigger: ".new_arrival_products .woocomerce__feature-product", 4009 start: "top center+=300", 4010 markers: false, 4011 }, 4012 x: 0, 4013 opacity: 1, 4014 ease: "power2.out", 4015 duration: 2, 4016 stagger: { 4017 each: 0.3, 4018 }, 4019 }); 4020 } 4021 ///////////////////////////////////////////////// 4022 4023 ///////////////////////////////////////////////// 4024 // You Missed Products Animation 4025 gsap.set(".missed_products .woocomerce__feature-product", { 4026 x: 50, 4027 opacity: 0, 4028 }); 4029 4030 if (device_width < 1023) { 4031 const blogList = gsap.utils.toArray( 4032 ".missed_products .woocomerce__feature-product" 4033 ); 4034 blogList.forEach((item, i) => { 4035 let blogTl = gsap.timeline({ 4036 scrollTrigger: { 4037 trigger: item, 4038 start: "top center+=200", 4039 }, 4040 }); 4041 blogTl.to(item, { 4042 x: 0, 4043 opacity: 1, 4044 ease: "power2.out", 4045 duration: 1.5, 4046 }); 4047 }); 4048 } else { 4049 gsap.to(".missed_products .woocomerce__feature-product", { 4050 scrollTrigger: { 4051 trigger: ".missed_products .woocomerce__feature-product", 4052 start: "top center+=300", 4053 markers: false, 4054 }, 4055 x: 0, 4056 opacity: 1, 4057 ease: "power2.out", 4058 duration: 2, 4059 stagger: { 4060 each: 0.3, 4061 }, 4062 }); 4063 } 4064 ///////////////////////////////////////////////// 4065 4066 ///////////////////////////////////////////////// 4067 // Category Products Animation 4068 gsap.set(".wc_category_products .woocomerce__category-item", { 4069 x: 50, 4070 opacity: 0, 4071 }); 4072 4073 if (device_width < 1023) { 4074 const blogList = gsap.utils.toArray( 4075 ".wc_category_products .woocomerce__category-item" 4076 ); 4077 blogList.forEach((item, i) => { 4078 let blogTl = gsap.timeline({ 4079 scrollTrigger: { 4080 trigger: item, 4081 start: "top center+=200", 4082 }, 4083 }); 4084 blogTl.to(item, { 4085 x: 0, 4086 opacity: 1, 4087 ease: "power2.out", 4088 duration: 1.5, 4089 }); 4090 }); 4091 } else { 4092 gsap.to(".wc_category_products .woocomerce__category-item", { 4093 scrollTrigger: { 4094 trigger: ".wc_category_products .woocomerce__category-item", 4095 start: "top center+=300", 4096 markers: false, 4097 }, 4098 x: 0, 4099 opacity: 1, 4100 ease: "power2.out", 4101 duration: 2, 4102 stagger: { 4103 each: 0.3, 4104 }, 4105 }); 4106 } 4107 ///////////////////////////////////////////////// 4108 4109 ///////////////////////////////////////////////// 4110 // Instagram Images Animation 4111 gsap.set(".wc_instagram_img .woocomerce__instagram-item", { 4112 x: 50, 4113 opacity: 0, 4114 }); 4115 4116 if (device_width < 1023) { 4117 const blogList = gsap.utils.toArray( 4118 ".wc_instagram_img .woocomerce__instagram-item" 4119 ); 4120 blogList.forEach((item, i) => { 4121 let blogTl = gsap.timeline({ 4122 scrollTrigger: { 4123 trigger: item, 4124 start: "top center+=200", 4125 }, 4126 }); 4127 blogTl.to(item, { 4128 x: 0, 4129 opacity: 1, 4130 ease: "power2.out", 4131 duration: 1.5, 4132 }); 4133 }); 4134 } else { 4135 gsap.to(".wc_instagram_img .woocomerce__instagram-item", { 4136 scrollTrigger: { 4137 trigger: ".wc_instagram_img .woocomerce__instagram-item", 4138 start: "top center+=300", 4139 markers: false, 4140 }, 4141 x: 0, 4142 opacity: 1, 4143 ease: "power2.out", 4144 duration: 2, 4145 stagger: { 4146 each: 0.3, 4147 }, 4148 }); 4149 } 4150 ///////////////////////////////////////////////// 4151 4152 ///////////////////////////////////////////////// 4153 // Single Product Images Animation 4154 gsap.set(".product_imgs img", { y: 50, opacity: 0 }); 4155 4156 if (device_width < 1023) { 4157 const blogList = gsap.utils.toArray(".product_imgs img"); 4158 blogList.forEach((item, i) => { 4159 let blogTl = gsap.timeline({ 4160 scrollTrigger: { 4161 trigger: item, 4162 start: "top center+=200", 4163 }, 4164 }); 4165 blogTl.to(item, { 4166 y: 0, 4167 opacity: 1, 4168 ease: "power2.out", 4169 duration: 1.5, 4170 }); 4171 }); 4172 } else { 4173 gsap.to(".product_imgs img", { 4174 scrollTrigger: { 4175 trigger: ".product_imgs img", 4176 start: "top center+=300", 4177 markers: false, 4178 }, 4179 y: 0, 4180 opacity: 1, 4181 ease: "power2.out", 4182 duration: 2, 4183 stagger: { 4184 each: 0.3, 4185 }, 4186 }); 4187 } 4188 ///////////////////////////////////////////////// 4189 4190 ///////////////////////////////////////////////// 4191 // Single Product Content Animation 4192 gsap.set(".wc_slide_btm", { y: 50, opacity: 0 }); 4193 4194 if (device_width < 1023) { 4195 const blogList = gsap.utils.toArray(".wc_slide_btm"); 4196 blogList.forEach((item, i) => { 4197 let blogTl = gsap.timeline({ 4198 scrollTrigger: { 4199 trigger: item, 4200 start: "top center+=200", 4201 }, 4202 }); 4203 blogTl.to(item, { 4204 y: 0, 4205 opacity: 1, 4206 ease: "power2.out", 4207 duration: 1.5, 4208 }); 4209 }); 4210 } else { 4211 gsap.to(".wc_slide_btm", { 4212 scrollTrigger: { 4213 trigger: ".wc_slide_btm", 4214 start: "top center+=300", 4215 markers: false, 4216 }, 4217 y: 0, 4218 opacity: 1, 4219 ease: "power2.out", 4220 duration: 1.5, 4221 stagger: { 4222 each: 0.3, 4223 }, 4224 }); 4225 } 4226 ///////////////////////////////////////////////// 4227 4228 ///////////////////////////////////////////////// 4229 // Buttons 4230 let all_buttons_wc = gsap.utils.toArray(".wc_btn_wrapper"); 4231 4232 all_buttons_wc.forEach((btn) => { 4233 if (!btn.classList.contains("hero__button")) { 4234 gsap.from(btn, { 4235 scrollTrigger: { 4236 trigger: btn, 4237 start: "top center+=150", 4238 markers: false, 4239 }, 4240 opacity: 0, 4241 y: -70, 4242 ease: "bounce", 4243 duration: 1.5, 4244 }); 4245 } 4246 }); 4247 ///////////////////////////////////////////////// 4248 4249 ///////////////////////////////////////////////// 4250 // Shop color buttons 4251 $("#color").click(function () { 4252 $(this).toggleClass("active"); 4253 $(".woocomerce__filtering-colors").slideToggle("slow"); 4254 }); 4255 $("#price").click(function () { 4256 $(this).toggleClass("active"); 4257 $(".woocomerce__filtering-price").slideToggle("slow"); 4258 }); 4259 $("#brand").click(function () { 4260 $(this).toggleClass("active"); 4261 $(".woocomerce__filtering-brand").slideToggle("slow"); 4262 }); 4263 4264 $("#sort").click(function () { 4265 $(this).toggleClass("active"); 4266 $(".woocomerce__filtering-sort").slideToggle("slow"); 4267 }); 4268
4269 $("#rating").click(function () { 4270 $(this).toggleClass("active"); 4271 $(".woocomerce__filtering-rate").slideToggle("slow"); 4272 }); 4273 ///////////////////////////////////////////////// 4274 4275 ///////////////////////////////////////////////// 4276 let wc_width = screen.width; 4277 if (wc_width < 992) { 4278 $(".woocomerce__filtering-filtericon").click(function () { 4279 $(".woocomerce__shopsidebar").toggleClass("showed"); 4280 }); 4281 } 4282 ///////////////////////////////////////////////// 4283 4284 ///////////////////////////////////////////////// 4285 var range_slider = $("#slider-range"); 4286 4287 if (range_slider) { 4288 $("#slider-range").slider({ 4289 range: true, 4290 min: 0, 4291 max: 6000, 4292 values: [0, 6000], 4293 slide: function (event, ui) { 4294 $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 4295 }, 4296 }); 4297 $("#amount").val( 4298 "$" + 4299 $("#slider-range").slider("values", 0) + 4300 " - $" + 4301 $("#slider-range").slider("values", 1) 4302 ); 4303 } 4304 ///////////////////////////////////////////////// 4305 4306 ///////////////////////////////////////////////// 4307 // 4308 $("#slider_range_2").slider({ 4309 range: true, 4310 min: 0, 4311 max: 6000, 4312 values: [0, 6000], 4313 slide: function (event, ui) { 4314 $("#amount_2").val("$" + ui.values[0] + " - $" + ui.values[1]); 4315 }, 4316 }); 4317 $("#amount_2").val( 4318 "$" + 4319 $("#slider_range_2").slider("values", 0) + 4320 " - $" + 4321 $("#slider_range_2").slider("values", 1) 4322 ); 4323 ///////////////////////////////////////////////// 4324 4325 ///////////////////////////////////////////////// 4326 // increment / decrement 4327 $(".counter__increment, .counter__decrement").click(function (e) { 4328 e.preventDefault(); 4329 var $this = $(this); 4330 var $counter__input = $(this).parent().find(".counter__input"); 4331 var $currentVal = parseInt($(this).parent().find(".counter__input").val()); 4332 4333 //Increment 4334 if ($currentVal != NaN && $this.hasClass("counter__increment")) { 4335 $counter__input.val($currentVal + 1); 4336 } 4337 //Decrement 4338 else if ($currentVal != NaN && $this.hasClass("counter__decrement")) { 4339 if ($currentVal >= 1) { 4340 $counter__input.val($currentVal - 1); 4341 } 4342 } 4343 }); 4344 ///////////////////////////////////////////////// 4345 4346 ///////////////////////////////////////////////// 4347 // Shop Category 4348 let items = document.querySelectorAll(".cateitem"); 4349 let categorys = document.querySelectorAll(".cat1"); 4350 let minuses = document.querySelectorAll(".minus"); 4351 items.forEach((item) => { 4352 item.addEventListener("click", () => { 4353 minuses.forEach((m) => { 4354 removefunc(); 4355 m.classList.add("show"); 4356 }); 4357 }); 4358 }); 4359 4360 function removefunc() { 4361 minuses.forEach((e) => { 4362 e.classList.remove("show"); 4363 }); 4364 } 4365 ///////////////////////////////////////////////// 4366 4367 ///////////////////////////////////////////////// 4368 // Category Products Animation 4369 4370 if (device_width > 1300) { 4371 const blogList = gsap.utils.toArray( 4372 ".woocomerce__instagram-item:nth-child(odd)" 4373 ); 4374 blogList.forEach((item, i) => { 4375 let blogTl = gsap.timeline({ 4376 scrollTrigger: { 4377 trigger: item, 4378 start: "top center+=200", 4379 scrub: true, 4380 }, 4381 }); 4382 blogTl.to(item, { 4383 y: -50, 4384 opacity: 1, 4385 ease: "power2.out", 4386 duration: 1.5, 4387 }); 4388 }); 4389 4390 const blogList2 = gsap.utils.toArray( 4391 ".woocomerce__instagram-item:nth-child(even)" 4392 ); 4393 blogList2.forEach((item, i) => { 4394 let blogTl = gsap.timeline({ 4395 scrollTrigger: { 4396 trigger: item, 4397 start: "top center+=200", 4398 scrub: true, 4399 }, 4400 }); 4401 blogTl.to(item, { 4402 y: 50, 4403 opacity: 1, 4404 ease: "power2.out", 4405 duration: 1.5, 4406 }); 4407 }); 4408 } 4409 ///////////////////////////////////////////////// 4410 // Home page timeline 4411 (function ($) { 4412 $(function () { 4413 $(window).on("scroll", function () { 4414 fnOnScroll(); 4415 }); 4416 4417 $(window).on("resize", function () { 4418 fnOnResize(); 4419 }); 4420 4421 var agTimeline = $(".js-timeline"), 4422 agTimelineLine = $(".js-timeline_line"), 4423 agTimelineLineProgress = $(".js-timeline_line-progress"), 4424 agTimelinePoint = $(".js-timeline-card_point-box"), 4425 agTimelineItem = $(".js-timeline_item"), 4426 agOuterHeight = $(window).outerHeight(), 4427 agHeight = $(window).height(), 4428 f = -1, 4429 agFlag = false;
4430 4431 function fnOnScroll() { 4432 agPosY = $(window).scrollTop(); 4433 4434 fnUpdateFrame(); 4435 } 4436 4437 function fnOnResize() { 4438 agPosY = $(window).scrollTop(); 4439 agHeight = $(window).height(); 4440 4441 fnUpdateFrame(); 4442 } 4443 4444 function fnUpdateWindow() { 4445 agFlag = false; 4446 4447 agTimelineLine.css({ 4448 top: 4449 agTimelineItem.first().find(agTimelinePoint).offset().top - 4450 agTimelineItem.first().offset().top, 4451 bottom: 4452 agTimeline.offset().top + 4453 agTimeline.outerHeight() - 4454 agTimelineItem.last().find(agTimelinePoint).offset().top, 4455 }); 4456 4457 f !== agPosY && ((f = agPosY), agHeight, fnUpdateProgress()); 4458 } 4459 4460 function fnUpdateProgress() { 4461 var agTop = agTimelineItem.last().find(agTimelinePoint).offset().top; 4462 4463 i = agTop + agPosY - $(window).scrollTop(); 4464 a = 4465 agTimelineLineProgress.offset().top + agPosY - $(window).scrollTop(); 4466 n = agPosY - a + agOuterHeight / 2; 4467 i <= agPosY + agOuterHeight / 2 && (n = i - a); 4468 agTimelineLineProgress.css({ height: n + "px" }); 4469 4470 agTimelineItem.each(function () { 4471 var agTop = $(this).find(agTimelinePoint).offset().top; 4472 4473 agTop + agPosY - $(window).scrollTop() < agPosY + 0.5 * agOuterHeight 4474 ? $(this).addClass("js-ag-active") 4475 : $(this).removeClass("js-ag-active"); 4476 }); 4477 } 4478 4479 function fnUpdateFrame() { 4480 agFlag || requestAnimationFrame(fnUpdateWindow); 4481 agFlag = true; 4482 } 4483 }); 4484 })(jQuery); 4485})(jQuery);
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.