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