1(function ($) { 2 "use strict"; 3 4 gsap.registerPlugin(DrawSVGPlugin, ScrollTrigger, CSSRulePlugin, ScrollToPlugin, MorphSVGPlugin, CustomEase, InertiaPlugin, ScrollSmoother, TextPlugin, Flip); 5 6 var mobileQuery = window.matchMedia('(max-width: 450px)'); 7 8 var keys = { 9 37: 1, 10 38: 1, 11 39: 1, 12 40: 1 13 }; 14 15 function preventDefault(e) { 16 e.preventDefault(); 17 } 18 19 function preventDefaultForScrollKeys(e) { 20 if (keys[e.keyCode]) { 21 preventDefault(e); 22 return false; 23 } 24 } 25 26 // modern Chrome requires { passive: false } when adding event 27 var supportsPassive = false; 28 try { 29 window.addEventListener("test", null, Object.defineProperty({}, 'passive', { 30 get: function () { 31 supportsPassive = true; 32 } 33 })); 34 } catch (e) {} 35 36 var wheelOpt = supportsPassive ? { 37 passive: false 38 } : false; 39 var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel'; 40 41 // call this to Disable 42 function disableScroll() { 43 if ($('body').hasClass('smooth-scroll')) { 44 45 let aliothSmoother = ScrollSmoother.get(); 46 aliothSmoother.paused(true); 47 48 } else { 49 50 window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF 51 window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop 52 window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile 53 window.addEventListener('keydown', preventDefaultForScrollKeys, false); 54 } 55 } 56 57 // call this to Enable 58 function enableScroll() { 59 60 if ($('body').hasClass('smooth-scroll')) { 61 62 let aliothSmoother = ScrollSmoother.get(); 63 aliothSmoother.paused(false); 64 65 66 } else { 67 window.removeEventListener('DOMMouseScroll', preventDefault, false); 68 window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 69 window.removeEventListener('touchmove', preventDefault, wheelOpt); 70 window.removeEventListener('keydown', preventDefaultForScrollKeys, false); 71 } 72 73 } 74 75 76 var siteHeader = $('.site-header'), 77 page = $('main'), 78 body = $('body'), 79 mouseCursor = $('#mouseCursor'), 80 cursorDark, cursorLight, cursorY, 81 scrollSmoother, 82 $cursorInner = ' <div class="mouse-cursor-icon"></div><svg height="100%" width="100%" viewbox="0 0 100 100"><circle class="main-circle" cx="50" cy="50" r="40" /></svg><span class="mouse-cursor-text"></span>'; 83 84 mouseCursor.append($cursorInner); 85 86 87 // Match Medias 88 89 var matchMedia = gsap.matchMedia(), 90 isPhone = '(max-width: 450px)', 91 isTablet = '(min-width: 450px) and (max-width: 900px)', 92 isDesktop = '(min-width: 900px)'; 93 94 /** Mouse Cursor **/ 95 function naylaMouseCursor(init) { 96 97 if (init) { 98 99 let cursorText = mouseCursor.children('.mouse-cursor-text').wrapInner('<span></span>'), 100 cursorIcon = mouseCursor.children('.mouse-cursor-icon'), 101 yperc, 102 cursorActive; 103 104 gsap.set(mouseCursor, { 105 xPercent: -50, 106 yPercent: -50 107 }); 108 109 110 let xTo = gsap.quickTo(mouseCursor, "x", { 111 duration: 0.6, 112 ease: "power3" 113 }), 114 yTo = gsap.quickTo(mouseCursor, "y", { 115 duration: 0.6, 116 ease: "power3" 117 }); 118 119 120 function icko(e) { 121 122 xTo(e.clientX); 123 yTo(e.clientY); 124 125 cursorY = e.clientY 126 127 } 128 129 window.addEventListener("mousemove", icko); 130 131 } 132 133 134 135 // * Default Hover Stte *// 136 137 function defaultHover(targets) { 138 139 $(targets).on('mouseenter', function () { 140 141 mouseCursor.addClass('hover-size') 142 143 }) 144 145 $(targets).on('mouseleave', function () { 146 147 mouseCursor.removeClass('hover-size'); 148 }) 149 150 } 151 152 defaultHover('a , .menu-toggle, .rotate-text-area , .project-slide-button, button, .hover-classic, .cv-toggle, .scroll-button'); 153 154 155 156 function textHover(targets) { 157 158 $(targets).on('mouseenter', function () { 159
160 let $this = $(this), 161 text = $this.data('cursor-text'); 162 163 mouseCursor.addClass('hover-size'); 164 mouseCursor.addClass('hover-text'); 165 cursorText.children('span').html(text) 166 167 }) 168 169 $(targets).on('mouseleave', function () { 170 171 mouseCursor.removeClass('hover-size'); 172 mouseCursor.removeClass('hover-text'); 173 174 cursorText.find('span').empty() 175 }) 176 177 } 178 179 textHover('.cursor-text') 180 181 182 function iconHover(targets) { 183 184 $(targets).on('mouseenter', function () { 185 186 let $this = $(this), 187 icon = $this.data('cursor-icon'); 188 189 icon == null ? icon = 'arrow_outward' : ''; 190 191 cursorIcon.attr('data-icon', icon); 192 193 mouseCursor.addClass('hover-size'); 194 mouseCursor.addClass('hover-icon'); 195 196 }) 197 198 $(targets).on('mouseleave', function () { 199 200 mouseCursor.removeClass('hover-size'); 201 mouseCursor.removeClass('hover-icon'); 202 }) 203 } 204 205 iconHover('.cursor-icon, .nayla-awards-list > li > a, .showcase-carousel .showcase-project a'); 206 207 } 208 209 function cursorDrag(action) { 210 211 if (action === 'hover') { 212 213 mouseCursor.removeClass('press') 214 mouseCursor.append('<div class="multi-icon"></div>') 215 mouseCursor.addClass('hover-size'); 216 mouseCursor.addClass('multi'); 217 } 218 219 if (action === 'press') { 220 221 mouseCursor.addClass('press') 222 223 } 224 225 if (action === 'leave') { 226 mouseCursor.removeClass('hover-size hover-icon multi press'); 227 $('.multi-icon').remove(); 228 } 229 230 } 231 232 233 mouseCursor.hasClass('dark') ? cursorDark = true : ''; 234 mouseCursor.hasClass('light') ? cursorLight = true : ''; 235 236 function cursorLayoutChange(layout, color, reset) { 237 238 mouseCursor.removeClass('dark light'); 239 240 if (reset) { 241 242 cursorDark ? mouseCursor.addClass('dark') : ''; 243 cursorLight ? mouseCursor.addClass('light') : ''; 244 245 } 246 247 if (color) { 248 249 let hsl = gsap.utils.splitColor(color, true), 250 lightness = hsl[hsl.length - 1]; 251 252 lightness <= 50 ? mouseCursor.addClass('light') : ''; 253 lightness > 50 ? mouseCursor.addClass('dark') : ''; 254 255 256 } else if (layout) { 257 258 layout === 'light' ? mouseCursor.addClass('light') : ''; 259 layout === 'dark' ? mouseCursor.addClass('dark') : ''; 260 } 261 262 } 263 264 265 var winLoaded; 266 winLoaded = false 267 268 function pageLoader() { 269 270 let perc = $('.page-loader-percentage'), 271 totImages, 272 loadedImages, 273 percentage, 274 minTime = 5, 275 img = $('.page-loader-logo').children('img'), 276 caption = $('.page-loader-caption'), 277 countLabels = [0]; 278 279 img.length ? img.clone().addClass('clone').insertAfter(img) : ''; 280 281 countLabels.push(Math.floor(gsap.utils.random(20, 30))); 282 countLabels.push(Math.floor(gsap.utils.random(40, 60))); 283 countLabels.push(Math.floor(gsap.utils.random(60, 80))); 284 countLabels.push(100); 285 286 perc.append('<div class="page-loader-count"></div>'); 287
288 countLabels.forEach(element => $('.page-loader-count').append('<span class="count_' + element + '">' + element + '</span>')); 289 290 291 let tl = gsap.timeline({ 292 delay: .1, 293 id: 'pageLoaderAnimation', 294 onStart: () => { 295 $('html').addClass('loading') 296 }, 297 onComplete: () => { 298 299 if (winLoaded == true) { 300 301 setTimeout(function () { 302 303 gsap.to('.page-loader > div', { 304 opacity: 0 305 }) 306 307 gsap.to('.page-loader', { 308 height: 0, 309 delay: 0, 310 duration: 1, 311 ease: 'expo.inOut', 312 onStart: () => { 313 setTimeout(function () { 314 315 ScrollTrigger.enable() 316 $('html').removeClass('loading') 317 }, 500) 318 319 }, 320 321 }) 322 323 324 }, 100) 325 326 } else { 327 328 $(window).on('load', function () { 329 330 331 setTimeout(function () { 332 333 gsap.to('.page-loader > div', { 334 opacity: 0 335 }) 336 337 gsap.to('.page-loader', { 338 height: 0, 339 delay: 0, 340 duration: 1, 341 ease: 'expo.inOut', 342 onStart: () => { 343 setTimeout(function () { 344 345 ScrollTrigger.enable() 346 $('html').removeClass('loading') 347 }, 500) 348 349 }, 350 351 }) 352 353 354 }, 100) 355 356 357 358 }) 359 } 360 361 362 363 } 364 }); 365 366 if (caption.length) { 367 new SplitText(caption, { 368 type: 'lines, chars', 369 linesClass: 'capt_line', 370 charsClass: 'capt_char' 371 }) 372 373 let lines = caption.find('.capt_line'), 374 chars = caption.find('.capt_char'); 375 376 377 lines.clone().addClass('clone').appendTo(caption) 378 379 gsap.from(chars, { 380 yPercent: 100, 381 duration: .75, 382 stagger: 0.02, 383 delay: .5, 384 ease: 'expo.out', 385 }) 386 387 388 } 389 390 391 392 $('body').imagesLoaded() 393 394 .progress(function (instance, image) { 395 396 397 totImages = instance.images.length; 398 loadedImages = instance.progressedCount; 399 percentage = 100 / (totImages / loadedImages); 400 401 let snapPerc = gsap.utils.snap(countLabels, percentage); 402 403 if (perc.length) { 404 405 let countFind = '.count_' + snapPerc + '', 406 transVal = $(countFind).position().top, 407 calc = 100 / snapPerc, 408 calcWin = $(window).outerHeight() / calc, 409 i = 0, 410 spacing = mobileQuery.matches ? 60 : 150; 411 412 413 tl.to('.page-loader-count', { 414 y: -1 * $(countFind).position().top, 415 duration: 1, 416 ease: 'expo.inOut' 417 }, 'label_' + snapPerc); 418 419 tl.to(perc, { 420 y: -1 * (calcWin - (calcWin != 0 ? perc.outerHeight() : 0) - (calcWin == $(window).outerHeight() ? spacing : 0)), 421 duration: 1, 422 ease: 'expo.inOut' 423 }, 'label_' + snapPerc); 424 } 425 426 if (img.length) { 427 let logoMask = 'inset(' + (100 - percentage) + '% 0% 0% 0%)' 428 429 tl.to('img.clone', { 430 clipPath: logoMask 431 }, 'label_' + snapPerc); 432 } 433 434 if (caption.length) { 435 436 437 let capt = caption.find('.capt_line.clone'), 438 wido = percentage + '%' 439 440 tl.to(capt, { 441 width: wido, 442 duration: 1, 443 ease: 'expo.inOut' 444 }, 'label_' + snapPerc); 445 446 } 447 448 }).done(function () { 449 450 451 }); 452 453 454 }; 455 456 457 function smoothScroll() { 458 459 if (body.hasClass('smooth-scroll')) { 460 461 $('#page').wrap('<div id="smooth-wrapper"></div>'); 462 $('#primary').wrap('<div id="smooth-content"></div>'); 463 464 if ((!siteHeader.hasClass('fixed')) && (!siteHeader.hasClass('sticky'))) { 465 466 467 siteHeader.prependTo('#smooth-content') 468 $('.menu-overlay').prependTo('#smooth-content') 469 470 } 471 472 $('#footer').appendTo('#smooth-content') 473 474 var smoother = ScrollSmoother.create({ 475 wrapper: '#smooth-wrapper', 476 content: "#smooth-content", 477 smooth: 1, 478 normalizeScroll: false, 479 ignoreMobileResize: true, 480 effects: false, 481 preventDefault: true, 482 }); 483 484 } 485 486 } 487 488 var headerLight = false,
489 headerDark = true; 490 491 492 if (siteHeader.hasClass('light')) { 493 headerLight = true 494 headerDark = false 495 } 496 497 498 function headerLayoutChange(layout, color, smooth, reset) { 499 500 if (!siteHeader.hasClass('blend')) { 501 502 function resetHeader() { 503 504 if (smooth) { 505 506 let tl = gsap.timeline({ 507 508 }); 509 510 tl.to(siteHeader, { 511 opacity: 0, 512 duration: 0.175, 513 ease: 'none', 514 onComplete: () => { 515 siteHeader.removeClass('dark light'); 516 517 } 518 }, 0); 519 520 tl.to(siteHeader, { 521 opacity: 1, 522 duration: 0.175, 523 ease: 'none', 524 onStart: () => { 525 headerLight ? siteHeader.addClass('light') : ''; 526 headerDark ? siteHeader.addClass('dark') : ''; 527 528 } 529 }, 0.2) 530 531 } else { 532 533 siteHeader.removeClass('dark light') 534 535 setTimeout(function () { 536 537 headerDark ? siteHeader.addClass('dark') : ''; 538 headerLight ? siteHeader.addClass('light') : ''; 539 540 }) 541 542 543 }; 544 545 546 } 547 548 function changeLayout() { 549 550 siteHeader.removeClass('dark light') 551 552 if (color) { 553 554 let hsl = gsap.utils.splitColor(color, true), 555 lightness = hsl[hsl.length - 1]; 556 557 lightness < 50 ? siteHeader.addClass('light') : ''; 558 lightness > 50 ? siteHeader.addClass('dark') : ''; 559 560 561 562 } else if (layout) { 563 564 layout === 'light' ? siteHeader.addClass('light') : ''; 565 layout === 'dark' ? siteHeader.addClass('dark') : ''; 566 } 567 } 568 569 function smoothChange() { 570 571 let tl = gsap.timeline(); 572 573 tl.to(siteHeader, { 574 opacity: 0, 575 duration: 0.175, 576 ease: 'none', 577 onComplete: () => { 578 changeLayout(); 579 } 580 }); 581 582 tl.to(siteHeader, { 583 opacity: 1, 584 duration: 0.175, 585 ease: 'none', 586 }) 587 588 } 589 590 reset ? resetHeader() : ''; 591 smooth ? smoothChange() : changeLayout(); 592 593 } 594 595 596 } 597 598 function naylaDynamicList() { 599 600 let list = $('.nayla-dynamic-list'); 601 602 603 list.each(function () { 604 605 let list = $(this), 606 item = list.find('ul').children('li'), 607 image = item.find('.list-image'), 608 animation = list.data('animation'), 609 scrub = list.data('scrub'); 610 611 animation ? list.find('a').addClass(animation) : ''; 612 scrub ? list.find('a').data('scrub', true) : ''; 613 614 615 item.each(function () { 616 617 let $this = $(this); 618 619 animation ? new naylaTextAnimation($this.find('a')) : ''; 620 621 $this.find('a').on('mouseenter', () => { 622 623 list.addClass('hovered'); 624 $this.addClass('current'); 625 626 }) 627 628 $this.find('a').on('mousemove', function (e) { 629 630 let mouseLeft = e.clientX, 631 mouseTop = e.clientY, 632 myLeft = mouseLeft - $this.offset().left, 633 myTop = mouseTop - $this.offset().top + $(window).scrollTop(), 634 movX = event.movementX < 0 ? event.movementX * -1 : event.movementX; 635 636 gsap.to(image, { 637 left: myLeft, 638 top: myTop, 639 duration: 1, 640 ease: 'power3.out', 641 }) 642 643 }) 644 645 $this.find('a').on('mouseleave', () => { 646 647 list.removeClass('hovered'); 648 $this.removeClass('current'); 649 650 }) 651 652 653 654 }) 655 656 657 658 659 }) 660 661 662 663 664 } 665 666 667 668 function naylaHeader() { 669 670 var headerHeight = siteHeader.outerHeight(), 671 stickyTargets = $('.hide-sticky'), 672 logo = $('.site-logo'), 673 stickyLogo = $('.sticky-logo'), 674 allInstances = ScrollTrigger.getAll(), 675 headerPadding = siteHeader.css('paddingTop'), 676 resetDelay = 1, 677 fixed, 678 sticky, 679 dynamic; 680 681 682 function animateLogos(direction) { 683 684 if (stickyLogo) { 685 686 let tl = gsap.timeline(); 687 688 if (direction == 'play') { 689 690 tl.to(logo, { 691 opacity: 0, 692 duration: 0.35, 693 onComplete: () => { 694 logo.hide() 695 } 696 }) 697 698 tl.fromTo(stickyLogo, { 699 opacity: 0 700 }, { 701 opacity: 1, 702 duration: 0.35, 703 onStart: () => { 704 stickyLogo.show() 705 } 706 }); 707 708 709 } else if (direction == 'reverse') { 710 711 712 tl.to(stickyLogo, { 713 opacity: 0, 714 duration: 0.35, 715 onComplete: () => { 716 stickyLogo.hide() 717 } 718 }) 719 720 tl.fromTo(logo, { 721 opacity: 0 722 }, { 723 opacity: 1, 724 duration: 0.35, 725 onStart: () => { 726 logo.show() 727 } 728 }); 729 } 730 731 } 732 733 } 734 735 animateLogos() 736 737 if (siteHeader.hasClass('sticky')) { 738 sticky = true; 739 } 740 741 if (siteHeader.hasClass('fixed')) { 742 fixed = true; 743 resetDelay = 0.1 744 } 745 746 if (siteHeader.hasClass('dynamic')) { 747 dynamic = true; 748 } else { 749 dynamic = false;
750 } 751 752 function resetHeader(stAnim) { 753 754 animateLogos('reverse'); 755 756 if (dynamic != true) { 757 758 if (sticky) { 759 760 gsap.to(siteHeader, { 761 paddingTop: headerPadding, 762 paddingBottom: headerPadding, 763 ease: 'power2.out', 764 duration: .4, 765 onComplete: () => { 766 siteHeader.removeClass('sticked'); 767 768 gsap.set(siteHeader, { 769 clearProps: 'all' 770 }) 771 772 } 773 }) 774 } else if (fixed) { 775 776 siteHeader.removeClass('sticked'); 777 } 778 779 } else { 780 781 siteHeader.removeClass('sticked'); 782 783 } 784 // ScrollTrigger.getById('stickyAnim').disable() 785 } 786 787 var delayedCall = gsap.delayedCall(resetDelay, resetHeader); 788 delayedCall.kill(); 789 790 791 function fixedHeader() { 792 793 ScrollTrigger.addEventListener('refresh', () => { 794 795 var fixedStart = 'top top'; 796 797 allInstances.forEach(function (st) { 798 799 if ((st.pin != null) && (st.start <= 0)) { 800 801 fixedStart = 'top+=' + st.end + ' top'; 802 } 803 804 }) 805 806 ScrollTrigger.create({ 807 trigger: $('body').hasClass('smooth-scroll') ? '#smooth-content' : 'body', 808 start: fixedStart, 809 end: 'bottom bottom', 810 id: 'fixed_header', 811 812 onEnter: () => { 813 animateLogos('play'); 814 815 if (stickyTargets.length) { 816 gsap.to(stickyTargets, { 817 opacity: 0, 818 y: -50, 819 stagger: 0.05, 820 duration: .35, 821 ease: 'power3.in', 822 overwrite: true 823 }) 824 } 825 826 }, 827 onLeaveBack: () => { 828 829 resetHeader(); 830 831 if (stickyTargets.length) { 832 gsap.to(stickyTargets, { 833 opacity: 1, 834 y: 0, 835 duration: 1.5, 836 stagger: 0.1, 837 ease: 'expo.out', 838 overwrite: true 839 }) 840 } 841 } 842 843 }) 844 845 let fixedHeader = ScrollTrigger.getById('fixed_header'); 846 847 848 }) 849 850 } 851 852 siteHeader.hasClass('fixed') ? fixedHeader() : ''; 853 854 function dynamicHeader() { 855 856 var fixedStart; 857 858 allInstances.forEach(function (st) { 859 860 if ((st.pin != null) && (st.start <= 0)) { 861 862 fixedStart = 'top+=' + st.vars.end + ' top'; 863 864 ScrollTrigger.create({ 865 trigger: 'body', 866 pin: siteHeader, 867 start: 'top top', 868 end: fixedStart, 869 id: 'header_pin' 870 }) 871 872 873 } 874 875 }) 876 877 878 879 } 880 881 siteHeader.hasClass('dynamic') ? dynamicHeader() : ''; 882 883 function stickyHeader() { 884 885 let stickyStart = 'top+=1000 center', 886 stickyReset = 'top top', 887 topPin = []; 888 889 var stickyAnim = ScrollTrigger.create({ 890 trigger: "body", 891 start: 'top top', 892 end: 'bottom bottom', 893 id: 'stickyAnim', 894 onUpdate: function (self) { 895 896 if (self.direction == -1) { 897 gsap.to(siteHeader, { 898 y: '0%' 899 }) 900 901 } else if (self.direction == 1) { 902 903 gsap.to(siteHeader, { 904 y: '-100%' 905 }) 906 } 907 908 }, 909 910 }); 911 912 stickyAnim.disable(); 913 914
915 allInstances.forEach(function (st) { 916 917 if ((st.pin != null) && (st.start <= 0)) { 918 topPin.push(st) 919 } 920 921 }) 922 923 if (topPin) { 924 925 stickyStart = 'top+=' + (600 + topPin[0].end) + ' center'; 926 stickyReset = 'top+=' + topPin[0].end + ' top'; 927 928 929 let pin = ScrollTrigger.create({ 930 trigger: 'body', 931 pin: siteHeader, 932 start: 'top top', 933 end: stickyReset 934 }) 935 936 937 ScrollTrigger.create({ 938 trigger: 'body', 939 940 start: stickyReset, 941 end: stickyStart, 942 onLeave: () => { 943 944 gsap.set(siteHeader, { 945 y: '-100%' 946 }) 947 948 stickyAnim.enable(); 949 siteHeader.addClass('sticked'); 950 animateLogos('play') 951 952 }, 953 onLeaveBack: () => { 954 955 siteHeader.removeClass('sticked') 956 gsap.set(siteHeader, { 957 clearProps: 'all' 958 }) 959 960 // ScrollTrigger.refresh(true) 961 // ScrollTrigger.refresh(update) 962 963 }, 964 onEnter: () => { 965 delayedCall.kill(); 966 } 967 968 }) 969 970 } else { 971 972 ScrollTrigger.create({ 973 trigger: 'body', 974 start: 'top top', 975 end: 'top+=1000 center', 976 onLeave: () => { 977 978 979 gsap.to(siteHeader, { 980 y: '-100%' 981 }) 982 983 stickyAnim.enable(); 984 siteHeader.addClass('sticked'); 985 animateLogos('play') 986 987 }, 988 onLeaveBack: () => { 989 delayedCall.restart(true) 990 991 }, 992 onEnter: () => { 993 delayedCall.kill(); 994 } 995 996 }) 997 998 } 999 1000 1001 1002 1003 } 1004 1005 siteHeader.hasClass('sticky') ? stickyHeader() : ''; 1006 1007 1008 // Classic Navigation // 1009 1010 var resetNavigation = ''; 1011 1012 function classicNavigation() { 1013 1014 let nav = $('#site-navigation.classic'), 1015 overlay = $('.menu-overlay'), 1016 headerHeight = siteHeader.outerHeight(), 1017 subBg = nav.data('sub-background'); 1018 1019 1020 if (nav.hasClass('one-page')) { 1021 1022 nav.children('ul').children('li').each(function () { 1023 1024 let $this = $(this), 1025 target = $this.children('a').attr('href'); 1026 1027 1028 1029 $this.find('a').on('click', (e) => { 1030 1031 e.preventDefault() 1032 1033 }) 1034 1035 $this.find('a').addClass('scroll-button'); 1036 1037 $this.find('a').attr('data-scroll-to', target); 1038 1039 }) 1040 1041 } 1042 1043 1044 1045 let hsl = gsap.utils.splitColor(subBg, true), 1046 lightness; 1047 1048 lightness = hsl[hsl.length - 1]; 1049 1050 if ((lightness <= 50) && (lightness != 0)) { 1051 overlay.addClass('dark') 1052 } else { 1053 overlay.addClass('light') 1054 } 1055 1056 function headerLayout(reset) { 1057 1058 if (reset) { 1059 1060 siteHeader.removeClass('menu-open'); 1061 if (headerDark) { 1062 siteHeader.removeClass('light') 1063 siteHeader.addClass('dark') 1064 } else if (headerLight) { 1065 siteHeader.removeClass('dark') 1066 siteHeader.addClass('light') 1067 } 1068 1069 } else { 1070 1071 if ((lightness <= 50) && (lightness != 0) && (headerDar
1071k == true)) { 1072 1073 siteHeader.removeClass('dark') 1074 siteHeader.addClass('light') 1075 } 1076 1077 if ((lightness > 50) && (lightness != 0) && (headerLight == true)) { 1078 1079 siteHeader.removeClass('light') 1080 siteHeader.addClass('dark') 1081 } 1082 } 1083 } 1084 1085 var headerReset = gsap.delayedCall(.45, headerLayout, [true]); 1086 headerReset.kill(); 1087 1088 if (nav.length) { 1089 1090 resetNavigation = document.getElementById("site-navigation").innerHTML; 1091 1092 nav.each(function () { 1093 1094 let $this = $(this), 1095 menu = $this.children('ul'), 1096 menuItems = menu.children('li'); 1097 1098 menuItems.each(function () { 1099 1100 let menuItem = $(this), 1101 link = menuItem.children('a'); 1102 1103 link.wrapInner('<span class="hov_span" data-text="' + link.text() + '"></span>'); 1104 1105 if (menuItem.hasClass('has-children')) { 1106 1107 var subMenuIn = gsap.timeline({ 1108 onStart: () => { 1109 subMenuOut.pause(); 1110 1111 }, 1112 }), 1113 subMenuOut = gsap.timeline({ 1114 onStart: () => { 1115 subMenuIn.pause(); 1116 }, 1117 onComplete: () => { 1118 subMenuWrapper.removeClass('active') 1119 } 1120 }), 1121 subMenuWrapper = menuItem.children('.sub-menu-wrapper'), 1122 subChilds = subMenuWrapper.children(); 1123 1124 subMenuWrapper.css('top', menuItem.offset().top + menuItem.outerHeight()) 1125 1126 menuItem.on('mouseenter', function (i) { 1127 1128 headerReset.kill(); 1129 headerLayout(false) 1130 subMenuWrapper.addClass('active') 1131 siteHeader.addClass('sub-active') 1132 let wrapperHeight = subMenuWrapper.outerHeight(); 1133 1134 subMenuIn.restart(); 1135 1136 gsap.to(overlay, { 1137 height: wrapperHeight + headerHeight, 1138 duration: .7, 1139 ease: 'expo.out' 1140 }) 1141 1142 subMenuIn.fromTo(subChilds, { 1143 x: 100, 1144 y: 0, 1145 opacity: 0 1146 }, { 1147 x: 0, 1148 y: 0, 1149 opacity: 1, 1150 stagger: 0.1, 1151 duration: 1.5, 1152 ease: 'expo.out' 1153 }, 0.2) 1154 1155 }) 1156 1157 menuItem.on('mouseleave', function () { 1158 1159 headerReset.restart(true) 1160 1161 subMenuOut.restart(); 1162 1163 gsap.to(overlay, { 1164 height: 0, 1165 duration: .7, 1166 ease: 'expo.inOut' 1167 1168 }) 1169 1170 subMenuOut.to(subChilds, { 1171 x: -50, 1172 opacity: 0, 1173 duration: .4, 1174 ease: 'expo.out' 1175 }, 0) 1176 1177 }) 1178 1179 1180 } 1181 }) 1182 1183 }) 1184 1185 } 1186 1187 } 1188 classicNavigation(); 1189 1190 function menuItemAnims(menu, direction) { 1191 1192 menu.each(function () { 1193 1194 let items = $(this).children('li'), 1195 targets = [items.children('a').find('.mt_char'), items.children('.sub-toggle')], 1196 val = items.outerHeight(), 1197 stg = 0.02; 1198 1199 $(this).hasClass('sub-menu') ? stg = 0.01 : ''; 1200
1201 if (direction === 'in') { 1202 1203 gsap.fromTo(targets, { 1204 y: val 1205 }, { 1206 y: 0, 1207 stagger: stg, 1208 1209 duration: 1.5, 1210 ease: 'expo.out', 1211 overwrite: true, 1212 onStart: () => { 1213 $(this).addClass('active'); 1214 }, 1215 1216 }) 1217 } else if (direction === 'out') { 1218 1219 var animOut = gsap.fromTo(targets, { 1220 y: 0 1221 }, { 1222 y: -1 * val, 1223 stagger: 0.005, 1224 overwrite: true, 1225 duration: .5, 1226 ease: 'expo.in', 1227 onStart: () => { 1228 $(this).addClass('animating') 1229 }, 1230 onComplete: () => { 1231 1232 $(this).removeClass('active') 1233 $(this).removeClass('animating') 1234 } 1235 1236 }) 1237 1238 } 1239 1240 }) 1241 1242 1243 1244 } 1245 1246 1247 // Fullscreen Navigation // 1248 function fullscreenNavigation() { 1249 1250 let nav = $('#site-navigation.fullscreen_menu'), 1251 wrapper = nav.children('.fullscreen-menu-wrapper'), 1252 mainMenu = nav.find('.main-menu'), 1253 items = mainMenu.find('li a'), 1254 hasChildren = mainMenu.find('li.has-children'); 1255 1256 items.addClass('menu-link'); 1257 1258 1259 if (nav.length) { 1260 1261 hasChildren.each(function () { 1262 1263 let childLength = $(this).find('li').not('.sub-menu-title').length; 1264 1265 $(this).append('<span class="sub-toggle">(' + childLength + ')</span>'); 1266 1267 }) 1268 1269 mainMenu.append('<span class="sub-close"><span class="material-icons">close</span></span>') 1270 1271 let subClose = nav.find('.sub-close'); 1272 1273 new SplitText(items, { 1274 type: 'lines, chars', 1275 linesClass: 'mt_line', 1276 charsClass: 'mt_char' 1277 }) 1278 1279 wrapper.css('paddingTop', headerHeight + 50); 1280 1281 hasChildren.children('.sub-toggle').on('click', function () { 1282 1283 let $this = $(this).parent('li'), 1284 parentMenu = $this.parent('ul'), 1285 subMenu = $this.find('.sub-menu'); 1286 1287 subClose.addClass('active') 1288 1289 parentMenu.length ? menuItemAnims(parentMenu, 'out') : ''; 1290 gsap.delayedCall(.5, menuItemAnims, [subMenu, "in"]); 1291 1292 }) 1293 1294 hasChildren.children('a').on('click', function () { 1295 1296 let parentLi = $(this).parent('li'), 1297 toggle = parentLi.children('.sub-toggle'); 1298 1299 $(this).attr('href').length <= 2 ? toggle.click() : ''; 1300 1301 }) 1302 1303 // Closing Sub Menus // 1304 1305 subClose.on('click', function () { 1306 1307 let outMenu = nav.find('ul.menu.active'), 1308 inMenu = outMenu.parent('div').parent('li').parent('ul'); 1309 1310 menuItemAnims(outMenu, 'out'); 1311 gsap.delayedCall(.5, menuItemAnims, [inMenu, "in"]); 1312 1313 if (inMenu.hasClass('main-menu')) { 1314 1315 subClose.removeClass('active') 1316 } 1317 1318 }) 1319 1320 1321 } 1322 1323 } 1324 fullscreenNavigation(); 1325 // Menu Toggle // 1326 1327 function menuToggle(targetMenu) { 1328 1329 var menuToggle = $('.menu-toggle'), 1330 overlay = $('.menu-overlay'), 1331 text = menuToggle.find('.toggle-text'), 1332 closeText = text.attr('data-close-text'), 1333 bgColor = overlay.css('backgroundColor'); 1334 1335 1336 1337 text.wrapInner('<span data-close-text="' + closeText + '"></span>'); 1338 1339 var headerReset = gsap.delayedCall(1, headerLayoutChange, [false, false, false, true]); 1340 headerReset.kill(); 1341 1342 1343 let navTweens = gsap.getTweensOf(targetMenu.find('*').not('.main-menu *, .nayla-button, .nayla-button *')), 1344 i = 0, 1345 tltl = gsap.timeline({ 1346 id: 'fs_menu_tl' 1347 }); 1348 1349 for (i = 0; i < navTweens.length; i++) { 1350 1351 1352 navTweens[i].parent.pause() 1353 navTweens[i].parent.scrollTrigger.kill() 1354 tltl.add(navTweens[i], (0 + i / 10)) 1355 1356 } 1357 1358 tltl.pause(); 1359 1360 menuToggle.on('click', function () { 1361 1362 var clicks = $(this).data('clicks'), 1363 mainMenu = targetMenu.find('.main-menu'); 1364 1365 if (clicks) { 1366 enableScroll(); 1367 1368 let activeMenu = targetMenu.find('ul.menu.active'); 1369 targetMenu.find('.sub-close').removeClass('active'); 1370 1371 $('html').hasClass('loading') ? '' : headerReset.restart(true); 1372 1373 menuItemAnims(activeMenu, 'out'); 1374 1375 tltl.timeScale(3) 1376 tltl.reverse(); 1377 1378 gsap.killTweensOf(overlay); 1379 1380 gsap.to(overlay, { 1381 height: 0, 1382 duration: .7, 1383 delay: .5, 1384 ease: 'expo.inOut', 1385 onComplete: () => { 1386 menuToggle.removeClass('active'); 1387 targetMenu.removeClass('active'); 1388 } 1389 }) 1390 1391 } else { 1392 1393 disableScroll(); 1394 1395 menuToggle.addClass('active') 1396 targetMenu.addClass('active'); 1397 siteHeader.addClass('menu-open'); 1398 1399 headerReset.kill(); 1400 1401 headerLayoutChange(false, bgColor, false, false) 1402 1403 1404 menuItemAnims(mainMenu, 'in'); 1405 1406 gsap.killTweensOf(overlay); 1407 gsap.to(overlay, { 1408 height: '100vh', 1409 duration: 1, 1410 delay: 0, 1411 ease: 'expo.out', 1412 }) 1413 1414 tltl.timeScale(1) 1415 tltl.restart(true); 1416 1417 1418 1419 } 1420 1421 $(this).data("clicks", !clicks); 1422 1423 }) 1424 1425 } 1426 1427 let nav = $('#site-navigation'), 1428 items = nav.find('li'), 1429 mainMenu = $('#page'), 1430 isClassic; 1431 1432 if ((nav.hasClass('classic')) && (!nav.hasClass('one-page'))) { 1433 1434 isClassic = true; 1435 } 1436 1437 matchMedia.add({ 1438 1439 // set up any number of arbitrarily-named conditions. The function below will be called when ANY of them match. 1440 isMobile: "(max-width: 450px)" 1441 1442 }, (context) => { 1443 1444 // context.conditions has a boolean property for each condition defined above indicating if it's matched or not. 1445 let { 1446 isMobile 1447 } = context.conditions; 1448 1449 if (isClassic) { 1450 1451 gsap.set('.menu-overlay', { 1452 clearProps: 'all' 1453 }) 1454 1455 1456 document.getElementById("site-navigation").innerHTML = resetNavigation; 1457 1458 $('.sub-menu').unwrap(); 1459 1460 nav.removeClass('classic') 1461 nav.addClass('fullscreen_menu temp_fullscreen section'); 1462 nav.wrapInner('<div class="wrapper fullscreen-menu-wrapper"><div class="c-col-12"></div></div>'); 1463 1464 fullscreenNavigation(); 1465 1466 let headerHeight = siteHeader.outerHeight(); 1467 1468 $('.fullscreen-menu-wrapper').css('paddingTop', headerHeight); 1469 1470 1471 } 1472 1473 1474 return () => { 1475 1476 if (isClassic) { 1477 1478 document.getElementById("site-navigation").innerHTML = resetNavigation; 1479 1480 gsap.set(nav, { 1481 clearProps: 'all' 1482 }) 1483 1484 nav.addClass('classic') 1485 nav.removeClass('fullscreen_menu temp_fullscreen section'); 1486 1487 1488 classicNavigation(); 1489 1490 } 1491 1492 } 1493 }); 1494 1495 menuToggle(nav); 1496 1497 1498 } 1499
1500 ///////////////////////////////// 1501 // General Scroll Animations // 1502 ///////////////////////////////// 1503 1504 class naylaGeneralAnimations { 1505 1506 DOM = { 1507 el: null, 1508 }; 1509 1510 animations = ['fadeIn', 'fadeUp', 'fadeDown', 'fadeLeft', 'fadeRight', 'scaleIn', 'slideUp', 'slideLeft', 'slideRight', 'maskUp', 'maskDown', 'maskLeft', 'maskRight', 'maskCustom']; 1511 1512 // Animation Defaults 1513 defaults = { 1514 1515 duration: 1, 1516 delay: 0, 1517 stagger: 0, 1518 ease: 'power1.inOut', 1519 1520 }; 1521 1522 // Animation start stages 1523 from = { 1524 1525 } 1526 1527 // Scroll options 1528 scroll = { 1529 scrollTrigger: { 1530 trigger: null, 1531 scrub: null, 1532 pin: null, 1533 start: 'top bottom', 1534 } 1535 } 1536 1537 out = { 1538 yPercent: null, 1539 stagger: null, 1540 duration: null, 1541 ease: 'expo.in', 1542 delay: 0 1543 } 1544 1545 constructor(DOM_el, options, fromOptions, scroll, out) { 1546 1547 this.DOM.el = DOM_el; 1548 this.stagger = $(this.DOM.el).data('stagger'); 1549 this.duration = $(this.DOM.el).data('duration'); 1550 this.delay = $(this.DOM.el).data('delay'); 1551 this.scrub = $(this.DOM.el).data('scrub'); 1552 this.pin = $(this.DOM.el).data('pin'); 1553 this.animOut = $(this.DOM.el).data('out'); 1554 this.target = $(this.DOM.el).data('trigger'); 1555 1556 this.target == null ? this.scroll.scrollTrigger.trigger = this.DOM.el : this.scroll.scrollTrigger.trigger = $(this.target); 1557 1558 1559 this.progress = 0; 1560 1561 this.pin == null ? this.pin = false : ''; 1562 this.scrub == null ? this.scrub = false : ''; 1563 1564 this.animOut == null ? this.animOut = false : ''; 1565 1566 this.classes = this.DOM.el.attr('class').split(' '); 1567 1568 let animations = this.animations, 1569 classes = this.classes; 1570 1571 const activeAnimation = classes.filter(function (obj) { 1572 return animations.indexOf(obj) !== -1; 1573 }); 1574 1575 1576 // Set Animation Targets 1577 this.target = $(this.DOM.el); 1578 this.img = $(this.DOM.el).children('img'); 1579 //// 1580 1581 this.scaleimage = false; 1582 classes.includes('imgScale') ? this.scaleimage = true : ''; 1583 1584 this.from.visibility = 'visible' 1585 // Defaults for animations 1586 1587 if (activeAnimation[0] === 'fadeIn') { 1588 1589 this.from.opacity = 0; 1590 1591 this.defaults.opacity = 1; 1592 this.defaults.duration = 1.25; 1593 1594 } 1595 1596 if ((activeAnimation[0] === 'fadeUp') || (activeAnimation[0] === 'fadeDown')) { 1597 1598 this.from.opacity = 0; 1599 1600 1601 activeAnimation[0] === 'fadeUp' ? this.from.y = 100 : this.from.yPercent = -100; 1602 1603 this.defaults.opacity = 1; 1604 this.defaults.y = 0; 1605 1606 this.defaults.duration = 1.25; 1607 1608 1609 this.scroll.scrollTrigger.start = 'top-=100 bottom' 1610 1611 } 1612 1613 if ((activeAnimation[0] === 'fadeLeft') || (activeAnimation[0] === 'fadeRight')) { 1614 1615 this.from.opacity = 0; 1616 1617 activeAnimation[0] === 'fadeLeft' ? this.from.xPercent = 100 : this.from.xPercent = -100; 1618 1619 this.defaults.opacity = 1; 1620 this.defaults.xPercent = 0; 1621 this.defaults.duration = 1.25; 1622 1623 } 1624 1625 if (activeAnimation[0] === 'scaleIn') { 1626 1627 this.target.attr('data-start') == null ? this.from.scale = 0 : this.from.scale = this.target.attr('data-start'); 1628 1629 this.target.css('transformOrigin', this.target.attr('data-origin')) 1630 1631 this.defaults.scale = 1; 1632 } 1633 1634 if ((activeAnimation[0] === 'slideRight') || (activeAnimation[0] === 'slideLeft')) { 1635 1636 let leftVal = this.target.offset().left + this.target.outerWidth(), 1637 rightVal = $(window).outerWidth() - leftVal + this.target.outerWidth(); 1638 1639 activeAnimation[0] === 'slideRight' ? this.from.x = -1 * leftVal : this.from.x = rightVal; 1640 1641 this.defaults.x = 0 1642 this.defaults.duration = 2 1643 this.defaults.ease = 'power4.out' 1644 } 1645 1646 if ((activeAnimation[0] === 'slideUp')) { 1647 1648 this.from.y = $(window).outerHeight(); 1649
1650 this.scroll.scrollTrigger.trigger = this.target[0].offsetParent; 1651 1652 this.defaults.y = 0 1653 this.defaults.duration = 2 1654 this.defaults.ease = 'expo.out' 1655 1656 } 1657 1658 1659 1660 if (activeAnimation[0] === 'maskUp' || activeAnimation[0] === 'maskDown' || activeAnimation[0] === 'maskLeft' || activeAnimation[0] === 'maskRight' || activeAnimation[0] === 'maskCustom') { 1661 1662 1663 activeAnimation[0] === 'maskUp' ? this.from.clipPath = 'inset(100% 0% 0% 0%)' : ''; 1664 activeAnimation[0] === 'maskDown' ? this.from.clipPath = 'inset(0% 0% 100% 0%)' : ''; 1665 activeAnimation[0] === 'maskRight' ? this.from.clipPath = 'inset(0% 100% 0% 0%)' : ''; 1666 activeAnimation[0] === 'maskLeft' ? this.from.clipPath = 'inset(0% 0% 0% 100%)' : ''; 1667 1668 if (activeAnimation[0] === 'maskCustom') { 1669 1670 let startWidth = this.target.data('width'), 1671 startLeft = this.target.data('left'), 1672 startPath = 'inset(0% ' + (100 - startWidth - startLeft) + '% 0% ' + startLeft + '%)'; 1673 1674 this.from.clipPath = startPath 1675 1676 } 1677 1678 this.defaults.clipPath = 'inset(0% 0% 0% 0%)' 1679 this.defaults.duration = 2 1680 this.defaults.ease = 'power4.inOut' 1681 1682 } 1683 1684 1685 // Return default if data is null 1686 this.stagger == null ? this.stagger = this.defaults.stagger : ''; 1687 this.delay == null ? this.delay = this.defaults.delay : ''; 1688 this.duration == null ? this.duration = this.defaults.duration : ''; 1689 1690 // Asign options 1691 this.options = Object.assign(this.defaults, options); 1692 this.fromOptions = Object.assign(this.from, fromOptions); 1693 this.scroll = Object.assign(this.scroll, scroll); 1694 1695 this.options.stagger = this.stagger; 1696 this.options.delay = this.delay; 1697 this.options.duration = this.duration; 1698 1699 if (this.pin) { 1700 1701 this.scrub = true 1702 1703 this.scroll.scrollTrigger.pin = true; 1704 this.scroll.scrollTrigger.scrub = 1; 1705 this.scroll.scrollTrigger.start = 'center center'; 1706 1707 1708 this.scroll.scrollTrigger.end = this.duration == null ? 'botom top' : 'bottom+=' + (this.duration * 1000) + ' top'; 1709 } 1710 1711 if ((this.scrub) && (!this.pin)) { 1712 this.scroll.scrollTrigger.scrub = 1; 1713 this.scroll.scrollTrigger.start = 'top bottom'; 1714 this.scroll.scrollTrigger.end = 'top top' 1715 } 1716 1717 if (this.animOut) { 1718 1719 this.out.stagger = this.options.stagger; 1720 this.out.duration = this.options.duration; 1721 1722 this.out = Object.assign(this.out, out); 1723 1724 } 1725 1726 this.render(); 1727 } 1728 1729 render() { 1730 1731 var tl = gsap.timeline(this.scroll) 1732 1733 tl.fromTo(this.target, this.fromOptions, this.options); 1734 1735 this.animOut == true ? this.tl.to(this.target, this.out) : ''; 1736 1737 1738 } 1739 1740 }; 1741 1742 1743 function naylaGeneralAnims(target) { 1744 1745 target.each(function () { 1746 1747 let $this = $(this); 1748 1749 new naylaGeneralAnimations($this) 1750 1751 }) 1752 1753 } 1754 1755 ///////////////////////////////// 1756 // Image Scroll Animations // 1757 ///////////////////////////////// 1758 1759 function naylaParallaxImages() { 1760 1761 var image = $('div.single-image.parallax-image'); 1762 1763 image.each(function () { 1764 1765 let $this = $(this), 1766 img = $this.find('img'), 1767 width = $this.outerWidth(), 1768 height = $this.outerHeight(), 1769 speed = $this.data('parallax-speed') == null ? 60 : $this.data('parallax-speed'), 1770 parallaxVal = height * (speed / 100), 1771 imgHeight = 'calc(100% + ' + parallaxVal + 'px)'; 1772 1773 $this.wrapInner('<div class="image-parallax-wrap"></div>'); 1774 1775 let wrap = $this.find('.image-parallax-wrap'); 1776 1777 $this.css('height', height); 1778 1779 wrap.css('height', imgHeight) 1780 1781 1782 gsap.from(wrap, { 1783 y: -parallaxVal, 1784 ease: 'none', 1785 id: 'parallaximg', 1786 scrollTrigger: { 1787 trigger: $this, 1788 start: 'top bottom', 1789 end: 'bottom top', 1790 scrub: true, 1791 onUpdate: () => { 1792 1793 } 1794 } 1795 }) 1796 1797 }) 1798 1799 } 1800 1801 1802 class naylaImageAnimation { 1803 1804 DOM = { 1805 el: null, 1806 image: null 1807 }; 1808 1809 animations = ['slideLeft', 'slideRight', 'slideUp', 'slideDown', 'blockUp', 'blockLeft', 'blockRight', 'blockDown']; 1810 1811 // Animation Defaults 1812 defaults = { 1813 1814 duration: 1, 1815 delay: 0, 1816 stagger: 0, 1817 ease: 'expo.out', 1818 1819 }; 1820 1821 // Animation start stages 1822 from = { 1823 yPercent: 0, 1824 1825 } 1826 1827 // Scroll options 1828 scroll = { 1829 scrollTrigger: { 1830 trigger: null, 1831 scrub: null, 1832 pin: null, 1833 start: 'top bottom' 1834 } 1835 } 1836 1837 out = { 1838 yPercent: null, 1839 stagger: null, 1840 duration: null, 1841 ease: 'expo.out' 1842 } 1843 1844 constructor(DOM_el, options, fromOptions, scroll, out) { 1845 1846 this.DOM.el = DOM_el; 1847 1848 this.duration = $(this.DOM.el).data('duration'); 1849 this.delay = $(this.DOM.el).data('delay'); 1850 this.scrub = $(this.DOM.el).data('scrub'); 1851
1852 this.scroll.scrollTrigger.trigger = this.DOM.el; 1853 1854 this.classes = this.DOM.el.attr('class').split(' '); 1855 1856 let animations = this.animations, 1857 classes = this.classes; 1858 1859 const activeAnimation = classes.filter(function (obj) { 1860 return animations.indexOf(obj) !== -1; 1861 }); 1862 1863 1864 // Animation interractions 1865 if (classes.includes('pin-anim')) { 1866 this.scroll.scrollTrigger.pin = true 1867 this.scroll.scrollTrigger.scrub = true 1868 this.scroll.scrollTrigger.start = 'center center' 1869 } 1870 1871 // Set Animation Targets 1872 this.target = $(this.DOM.el); 1873 this.img = $(this.DOM.el).children('img'); 1874 //// 1875 1876 this.scaleimage = false; 1877 classes.includes('imgScale') ? this.scaleimage = true : ''; 1878 1879 1880 // Defaults for animations 1881 1882 if (activeAnimation[0] === 'slideLeft') { 1883 1884 this.from.clipPath = 'inset(0% 0% 0% 100%)'; 1885 1886 this.defaults.clipPath = 'inset(0% 0% 0% 0%)'; 1887 this.defaults.duration = 2; 1888 1889 } 1890 1891 if (activeAnimation[0] === 'slideRight') { 1892 1893 this.from.clipPath = 'inset(0% 100% 0% 0%)'; 1894 1895 this.defaults.clipPath = 'inset(0% 0% 0% 0%)'; 1896 this.defaults.duration = 1.25; 1897 1898 } 1899 1900 if (activeAnimation[0] === 'slideUp') { 1901 1902 this.from.clipPath = 'inset(100% 0% 0% 0%)'; 1903 1904 this.defaults.clipPath = 'inset(0% 0% 0% 0%)'; 1905 this.defaults.duration = 2; 1906 1907 } 1908 1909 if (activeAnimation[0] === 'slideDown') { 1910 1911 this.from.clipPath = 'inset(0% 0% 100% 0%)'; 1912 1913 this.defaults.clipPath = 'inset(0% 0% 0% 0%)'; 1914 this.defaults.duration = 1.25; 1915 1916 this.defaults.ease = 'power3.inOut'; 1917 } 1918 1919 if ((activeAnimation[0] === 'blockUp') || (activeAnimation[0] === 'blockDown') || (activeAnimation[0] === 'blockLeft') || (activeAnimation[0] === 'blockRight')) { 1920 1921 1922 $(this.DOM.el).append('<span class="block-ov"></div>'); 1923 this.target = $(this.DOM.el).find('.block-ov'); 1924 1925 let bg = $(this.DOM.el).data('block-color'); 1926 1927 if (bg === 'auto') { 1928 1929 let imgSrc = $(this.DOM.el).find('img').attr('src') 1930 1931 colorjs.average(imgSrc, { 1932 amount: 1 1933 }).then(imgColor => { 1934 1935 $(this.DOM.el).find('.block-ov').css('backgroundColor', "rgb" + "(" + imgColor + ")"); 1936 1937 }) 1938 1939 } else { 1940 $(this.DOM.el).find('.block-ov').css('backgroundColor', $(this.DOM.el).data('block-color')); 1941 } 1942 1943 activeAnimation[0] === 'blockUp' ? this.from.height = '100%' : ''; 1944 1945 1946 this.defaults.height = '0%'; 1947 this.defaults.duration = 1; 1948 1949 1950 this.defaults.ease = 'expo.inOut'; 1951 1952 } 1953 1954 1955 1956 // Return default if data is null 1957 1958 this.delay == null ? this.delay = this.defaults.delay : ''; 1959 this.duration == null ? this.duration = this.defaults.duration : ''; 1960 1961 this.scrub == null ? this.scrub = false : ''; 1962 1963 1964 // Asign options 1965 this.options = Object.assign(this.defaults, options); 1966 this.fromOptions = Object.assign(this.from, fromOptions); 1967 this.scroll = Object.assign(this.scroll, scroll); 1968 1969 1970 this.options.delay = this.delay; 1971 this.options.duration = this.duration; 1972 this.scroll.scrollTrigger.scrub = this.scrub 1973 1974 1975 // If anim out 1976 1977 if (classes.includes('anim-out')) { 1978 1979 this.out.stagger = this.options.stagger; 1980 this.out.duration = this.options.duration; 1981 1982 this.out = Object.assign(this.out, out); 1983 } else { 1984 1985 this.out = null; 1986 } 1987 1988 requestAnimationFrame(() => this.render()); 1989 } 1990 1991 render() { 1992 1993 var tl = gsap.timeline(this.scroll) 1994 1995 1996 1997 tl.fromTo(this.target, this.fromOptions, this.options); 1998 1999 if (this.scaleimage) { 2000 tl.fromTo(this.img, { 2001 scale: 1.2 2002 }, { 2003 scale: 1, 2004 duration: this.options.duration, 2005 ease: this.options.ease, 2006 delay: this.options.delay 2007 }, 0) 2008 2009 } 2010 2011 2012 this.out != null ? tl.to(this.target, this.out) : ''; 2013 2014 2015 } 2016 2017 }; 2018 2019 function naylaImageAnims() { 2020 2021 $('.has-anim-image').each(function () { 2022 2023
2024 let $this = $(this); 2025 new naylaImageAnimation($this); 2026 2027 }) 2028 } 2029 2030 2031 ///////////////////////////////// 2032 // Text Scroll Animations // 2033 ///////////////////////////////// 2034 2035 class naylaTextAnimation { 2036 2037 DOM = { 2038 el: null, 2039 chars: null, 2040 words: null, 2041 lines: null 2042 }; 2043 2044 animations = ['charsUp', 'charsDown', 'charsRight', 'charsLeft', 'wordsUp', 'wordsDown', 'linesUp', 'linesDown', 'charsFadeOn', 'wordsFadeOn', 'linesFadeOn', 'charsScaleUp', 'charsScaleDown', 'charsRotateIn', 'charsFlipUp', 'charsFlipDown', 'linesMask', 'wordsJustifyCollapse', 'wordsJustifyExpand', 'slideLeft', 'slideRight']; 2045 2046 // Animation Defaults 2047 defaults = { 2048 yPercent: 0, 2049 duration: 1, 2050 delay: 0, 2051 stagger: 0, 2052 ease: 'expo.out', 2053 x: 0, 2054 }; 2055 2056 // Animation start stages 2057 from = { 2058 yPercent: 0, 2059 x: 0 2060 } 2061 2062 // Scroll options 2063 scroll = { 2064 scrollTrigger: { 2065 trigger: null, 2066 scrub: null, 2067 pin: null, 2068 start: 'top bottom', 2069 } 2070 } 2071 2072 out = { 2073 yPercent: null, 2074 stagger: null, 2075 duration: null, 2076 ease: 'expo.in', 2077 delay: 0 2078 } 2079 2080 constructor(DOM_el, options, fromOptions, scroll, out) { 2081 2082 this.DOM.el = DOM_el; 2083 this.stagger = $(this.DOM.el).data('stagger'); 2084 this.duration = $(this.DOM.el).data('duration'); 2085 this.delay = $(this.DOM.el).data('delay'); 2086 this.scrub = $(this.DOM.el).data('scrub'); 2087 this.pin = $(this.DOM.el).data('pin'); 2088 this.animOut = $(this.DOM.el).data('out'); 2089 this.target = $(this.DOM.el).data('trigger'); 2090 2091 2092 this.target == null ? this.scroll.scrollTrigger.trigger = this.DOM.el : this.scroll.scrollTrigger.trigger = $(this.target); 2093 2094 this.progress = 0; 2095 2096 // Set default inetraction settings 2097 this.pin == null ? this.pin = false : ''; 2098 this.scrub == null ? this.scrub = false : ''; 2099 2100 this.animOut == null ? this.animOut = false : ''; 2101 2102 this.classes = this.DOM.el.attr('class').split(' '); 2103 2104 let animations = this.animations, 2105 classes = this.classes; 2106 2107 const activeAnimation = classes.filter(function (obj) { 2108 return animations.indexOf(obj) !== -1; 2109 }); 2110 2111 const isFade = classes.includes('fade'), 2112 isMask = classes.includes('mask'), 2113 noRevert = classes.includes('no-revert'); 2114 2115 isFade ? this.from.opacity = 0 : ''; 2116 isFade ? this.defaults.opacity = 1 : ''; 2117 2118 noRevert ? this.noRevert = true : ''; 2119 2120 this.anim = activeAnimation[0]; 2121 2122 activeAnimation[0].includes('chars') ? this.type = 'chars, lines' : ''; 2123 activeAnimation[0].includes('words') ? this.type = 'words' : ''; 2124 activeAnimation[0].includes('lines') ? this.type = 'lines' : ''; 2125 activeAnimation[0].includes('Justify') ? this.type = 'lines, words' : ''; 2126 2127 2128 this.split = new SplitText(this.DOM.el, { 2129 type: this.type, 2130 charsClass: 'anim_char', 2131 linesClass: 'anim_line', 2132 wordsClass: 'anim_word', 2133 reduceWhiteSpace: true 2134 2135 }) 2136 2137 2138 // Set Animation Targets 2139 2140 if (activeAnimation[0].includes('words')) { 2141 2142 $(this.DOM.el).find('.anim_word').wrapInner('<span></span>') 2143 this.target = $(this.DOM.el).find('.anim_word').children('span'); 2144 } 2145 2146 if (activeAnimation[0].includes('chars')) { 2147 2148 $(this.DOM.el).find('.anim_char').wrapInner('<span></span>') 2149 this.target = $(this.DOM.el).find('.anim_char').children('span'); 2150 } 2151 2152 if (activeAnimation[0].includes('lines')) { 2153 2154 $(this.DOM.el).find('.anim_line').wrapInner('<span></span>') 2155 this.target = $(this.DOM.el).find('.anim_line').children('span'); 2156 } 2157 2158 // Defaults for animations 2159 2160 if (activeAnimation[0] === 'charsUp') { 2161 2162 this.from.yPercent = 100; 2163 2164 this.defaults.yPercent = 0; 2165 this.defaults.stagger = 0.05; 2166 this.defaults.duration = 2; 2167 2168 this.animOut ? this.out.yPercent = -100 : ''; 2169 2170 } 2171 2172 if (activeAnimation[0] === 'charsDown') { 2173 2174 this.from.yPercent = -100 2175 2176 this.defaults.stagger = 0.035; 2177 this.defaults.duration = 2; 2178 2179 this.animOut ? this.out.yPercent = 100 : ''; 2180 } 2181 2182 if (activeAnimation[0] === 'charsRight') { 2183 2184 let arr = []; 2185 $(this.DOM.el).find('.anim_char').each(function () { 2186 arr.push($(this).outerWidth()) 2187 }) 2188 2189 this.from.x = -1 * Math.max(...arr) 2190 2191 this.defaults.stagger = -0.035; 2192 this.defaults.duration = 1.5; 2193 2194 this.animOut ? this.out.x = this.from.x * -1 : ''; 2195 } 2196 2197 if (activeAnimation[0] === 'charsLeft') { 2198 2199 let arr = []; 2200 2201 $(this.DOM.el).find('.anim_char').each(function () { 2202 arr.push($(this).outerWidth()) 2203 }) 2204 2205 this.from.x = Math.max(...arr) 2206 2207 this.defaults.stagger = 0.035; 2208 this.defaults.duration = 1.5; 2209 2210 this.animOut ? this.out.x = this.from.x * -1 : ''; 2211 } 2212 2213 if (activeAnimation[0] === 'wordsUp') { 2214 2215 this.from.yPercent = 100 2216 2217 this.defaults.stagger = 0.025; 2218 this.defaults.duration = 2; 2219 2220 this.animOut ? this.out.yPercent = -100 : ''; 2221 } 2222 2223 if (activeAnimation[0] === 'wordsDown') { 2224 2225 this.from.yPercent = -100 2226 2227 this.defaults.stagger = -0.01; 2228 this.defaults.duration = 2; 2229 } 2230 2231 if (activeAnimation[0] === 'linesUp') { 2232 2233 this.from.yPercent = 100 2234 2235 this.defaults.stagger = 0.15; 2236 this.defaults.duration = 2; 2237 this.defaults.ease = 'expo.out'; 2238 } 2239 2240 if (activeAnimation[0] === 'linesDown') { 2241 2242 this.from.yPercent = -100 2243 2244 this.defaults.stagger = -0.1; 2245 this.defaults.duration = 1.5; 2246 } 2247 2248 if (activeAnimation[0] === 'charsFadeOn') { 2249 2250 isMask ? this.from.opacity = 0.01 : this.from.opacity = 0; 2251 2252 this.defaults.opacity = 1; 2253 2254 this.defaults.stagger = 0.01; 2255 this.defaults.duration = 1.5; 2256 2257 this.animOut ? this.out.opacity = 0 : ''; 2258 this.animOut ? this.out.stagger = -0.01 : ''; 2259 this.animOut ? this.out.ease = 'none' : ''; 2260 } 2261 2262 if (activeAnimation[0] === 'wordsFadeOn') { 2263 2264 isMask ? this.from.opacity = 0.1 : this.from.opacity = 0; 2265 2266 2267 this.defaults.opacity = 1; 2268 2269 this.defaults.stagger = 0.02; 2270 this.defaults.duration = 3; 2271 } 2272 2273 if (activeAnimation[0] === 'linesFadeOn') { 2274 2275 isMask ? this.from.opacity = 0.01 : this.from.opacity = 0; 2276 2277 this.defaults.opacity = 1; 2278 2279 this.defaults.stagger = 0.1; 2280 this.defaults.duration = 2; 2281 } 2282 2283 if ((activeAnimation[0] === 'charsScaleUp') || (activeAnimation[0] === 'charsScaleDown')) { 2284 this.from.scaleY = 0 2285 2286 this.defaults.scaleY = 1 2287 this.defaults.stagger = 0.05; 2288 this.defaults.duration = 2; 2289 } 2290 2291 if (activeAnimation[0] === 'charsRotateIn') { 2292 2293 this.from.rotateX = -90 2294 2295 this.defaults.rotateX = 0; 2296 2297 this.defaults.stagger = 0.03; 2298 this.defaults.duration = 2; 2299 2300 this.animOut ? this.out.rotateX = 90 : ''; 2301 2302 2303 2304 } 2305 2306 if (activeAnimation[0] === 'charsFlipUp') { 2307 2308 this.from.x = -50 2309 this.from.yPercent = 50 2310 this.from.rotateY = 180 2311 this.from.opacity = 0 2312 2313 this.defaults.x = 0 2314 this.defaults.yPercent = 0 2315 this.defaults.rotateY = 0 2316 this.defaults.opacity = 1 2317 2318 this.defaults.stagger = -0.05; 2319 this.defaults.duration = 1; 2320 } 2321 2322 if (activeAnimation[0] === 'charsFlipDown') { 2323 2324 this.from.x = 50 2325 this.from.yPercent = -50 2326 this.from.rotateY = -180 2327 this.from.opacity = 0 2328 2329 this.defaults.x = 0 2330 this.defaults.yPercent = 0 2331 this.defaults.rotateY = 0 2332 this.defaults.opacity = 1 2333 2334 this.defaults.stagger = 0.05; 2335 this.defaults.duration = 1; 2336 } 2337 2338 if (activeAnimation[0] === 'linesMask') { 2339 2340 $(this.DOM.el).find('.anim_line').each(function () { 2341
2342 let $this = $(this), 2343 span = $this.children('span'); 2344 2345 span.clone().addClass('clone').appendTo($this); 2346 2347 2348 }) 2349 2350 2351 this.from.width = '0%' 2352 2353 this.defaults.width = '100%' 2354 this.defaults.stagger = 0.2; 2355 this.defaults.duration = 2; 2356 2357 this.scrub == true ? this.defaults.ease = 'none' : ''; 2358 2359 this.scroll.scrollTrigger.start = 'top 70%' 2360 this.scroll.scrollTrigger.end = 'bottom center' 2361 2362 } 2363 2364 if (activeAnimation[0] === 'slideLeft') { 2365 2366 this.target = $(this.DOM.el).find('.anim_line'); 2367 this.from.x = -1 * this.target.outerWidth(); 2368 2369 if (this.target.outerWidth() > $(window).outerWidth()) { 2370 2371 this.defaults.x = 0 2372 } else { 2373 this.defaults.x = 0; 2374 } 2375 2376 this.animOut ? this.defaults.x = -1 * $(window).outerWidth() - 400 : ''; 2377 this.animOut ? this.out.ease = 'none' : ''; 2378 2379 this.defaults.ease = 'none'; 2380 2381 } 2382 2383 if (activeAnimation[0] === 'slideRight') { 2384 2385 this.target = $(this.DOM.el).find('.anim_line'); 2386 this.from.x = $(window).outerWidth(); 2387 2388 if (this.target.outerWidth() > $(window).outerWidth()) { 2389 2390 this.defaults.x = 0 - (this.target.outerWidth() - $(window).outerWidth() + 300) 2391 } else { 2392 this.defaults.x = 0; 2393 } 2394 2395 this.animOut ? this.defaults.x = -1 * $(window).outerWidth() - 400 : ''; 2396 this.animOut ? this.out.ease = 'none' : ''; 2397 2398 this.defaults.ease = 'none'; 2399 2400 2401 2402 } 2403 2404 // Return default if data is null 2405 this.stagger == null ? this.stagger = this.defaults.stagger : ''; 2406 this.delay == null ? this.delay = this.defaults.delay : ''; 2407 this.duration == null ? this.duration = this.defaults.duration : ''; 2408 2409 // Asign options 2410 this.options = Object.assign(this.defaults, options); 2411 this.fromOptions = Object.assign(this.from, fromOptions); 2412 this.scroll = Object.assign(this.scroll, scroll); 2413 2414 this.options.stagger = this.stagger; 2415 this.options.delay = this.delay; 2416 this.options.duration = this.duration; 2417 2418 if (this.pin) { 2419 2420 this.scrub = true 2421 2422 this.scroll.scrollTrigger.pin = true; 2423 this.scroll.scrollTrigger.scrub = 1; 2424 this.scroll.scrollTrigger.start = 'center center'; 2425 2426 this.scroll.scrollTrigger.end = this.duration == null ? 'botom top' : 'bottom+=' + (this.duration * 1000) + ' top'; 2427 } 2428 2429 if ((this.scrub) && (!this.pin)) { 2430 2431 this.scroll.scrollTrigger.scrub = 1; 2432 this.scroll.scrollTrigger.start = 'top+=100 bottom'; 2433 this.scroll.scrollTrigger.end = 'bottom center' 2434 } 2435 2436 if (this.animOut) { 2437 2438 this.out.stagger = this.options.stagger; 2439 this.out.duration = this.options.duration; 2440 2441 this.out = Object.assign(this.out, out); 2442 2443 } 2444 2445 this.render(); 2446 } 2447 2448 render() { 2449 2450 this.tl = gsap.timeline(this.scroll) 2451 2452 this.tl.fromTo(this.target, this.fromOptions, this.options); 2453 2454 this.animOut == true ? this.tl.to(this.target, this.out) : ''; 2455 2456 this.tl.eventCallback("onComplete", () => { 2457 2458 $(this.DOM.el).addClass('is-inview') 2459 2460 this.scrub != true && !this.noRevert ? this.split.revert() : ''; 2461 2462 this.progress = 1; 2463 2464 }); 2465 2466 2467 } 2468 2469 }; 2470 2471 function naylaTextAnims() { 2472 2473 let hasAnim = $('.has-anim-text'), 2474 exclude = 'ul, li, a'; 2475 2476 hasAnim.not(exclude).each(function () { 2477 2478 let $this = $(this) 2479 2480 let textAnim = new naylaTextAnimation($this); 2481 2482 2483 matchMedia.add({ 2484 isMobile: "(max-width: 450px)" 2485 2486 }, (context) => { 2487 2488 if (textAnim.progress == 0) { 2489 2490 textAnim.split.revert(); 2491 textAnim.tl.revert(); 2492 2493 new naylaTextAnimation($this); 2494 2495 } 2496 2497 return () => { 2498 2499 } 2500 }); 2501 2502 2503 2504 if ($this.hasClass('wordsJustifyCollapse') || $this.hasClass('wordsJustifyExpand')) { 2505 2506 let words = $this.find('.anim_word'), 2507 start = $this.offset().top < $(window).outerHeight() ? 0 : 'top bottom+=200', 2508 scrub = $this.data('scrub') 2509 2510 $this.hasClass('wordsJustifyExpand') ? $this.css('textAlignLast', 'justify') : $this.css('textAlignLast', 'auto'); 2511 2512 const state = Flip.getState(words); 2513 2514 $this.hasClass('wordsJustifyExpand') ? $this.css('textAlignLast', 'auto') : $this.css('textAlignLast', 'justify'); 2515 2516 2517 if (scrub) { 2518 2519 Flip.to(state, { 2520 duration: 1, 2521 ease: "none", 2522 stagger: 0, 2523 absolute: true, 2524 absoluteOnLeave: true, 2525 scrollTrigger: { 2526 trigger: $this, 2527 start: start, 2528 end: 'top center', 2529 scrub: 1.2, 2530 } 2531 2532 }); 2533 2534 } else { 2535 2536 ScrollTrigger.create({ 2537 trigger: $this, 2538 start: start, 2539 end: 'bottom center', 2540 onEnter: () => { 2541 Flip.to(state, { 2542 duration: 2, 2543 ease: "expo.out", 2544 stagger: 0, 2545 absolute: true, 2546 absoluteOnLeave: true, 2547 }); 2548 } 2549 2550 }) 2551 } 2552 2553 } 2554 2555 2556 }) 2557 2558 2559 } 2560 2561 function naylaListAnimations() { 2562 2563 let list = $('ul'); 2564 2565 list.each(function () { 2566
2567 let $this = $(this), 2568 listItem = $this.find('li'), 2569 animation = $this.data('animation'); 2570 2571 if (animation) { 2572 2573 2574 listItem.addClass(animation); 2575 listItem.addClass('no-revert'); 2576 2577 listItem.each(function () { 2578 2579 let $this = $(this); 2580 2581 let anim = new naylaTextAnimation($this); 2582 2583 2584 }) 2585 } 2586 2587 2588 }) 2589 } 2590 2591 2592 function detectPov() { 2593 2594 $('.detect-pov').each(function () { 2595 2596 let $this = $(this); 2597 2598 ScrollTrigger.create({ 2599 trigger: $this, 2600 onEnter: () => { 2601 $this.addClass('is-inview') 2602 } 2603 }) 2604 2605 }) 2606 } 2607 2608 2609 2610 ///////////////////////// 2611 // Pages // 2612 ///////////////////////// 2613 2614 // Single Post Page 2615 2616 function naylaSinglePostPage() { 2617 2618 var singlePost = $('.single-post-page'); 2619 2620 singlePost.each(function () { 2621 2622 let post = $(this), 2623 meta = post.find('.entry-meta'), 2624 metaWrap = post.find('.entry-meta-wrap'), 2625 trigEnd = "bottom bottom-=" + (metaWrap.outerHeight() / 2 - 75) + "'", 2626 content = post.find('.entry-content'), 2627 image = post.find('.post-featured-image'), 2628 title = post.find('.post-title-sub'); 2629 2630 new SplitText(title, { 2631 type: 'words, lines', 2632 wordsClass: 'pt-sub-word' 2633 }) 2634 2635 ScrollTrigger.create({ 2636 trigger: content, 2637 start: 'top top+=50', 2638 end: trigEnd, 2639 2640 pin: meta, 2641 onEnter: () => { 2642 2643 gsap.fromTo('.pt-sub-word', { 2644 yPercent: 100 2645 }, { 2646 yPercent: 0, 2647 2648 stagger: 0.025, 2649 duration: 1, 2650 ease: 'expo.out' 2651 2652 }) 2653 2654 2655 gsap.to(image, { 2656 scale: .8, 2657 marginTop: '1em' 2658 }) 2659 2660 }, 2661 onLeaveBack: () => { 2662 gsap.to(image, { 2663 scale: 1, 2664 marginTop: 0 2665 }) 2666 2667 } 2668 }) 2669 2670 2671 2672 }) 2673 2674 2675 2676 } 2677 2678 2679 2680 // Product Pages 2681 2682 function naylaProductPage() { 2683 2684 2685 var productPage = $('.product-page-content'), 2686 gallery = productPage.find('.product-gallery'), 2687 info = productPage.find('.product-info'), 2688 endo = gallery.outerHeight() - info.outerHeight(); 2689 2690 2691 var galleryScroll = ScrollTrigger.create({ 2692 trigger: gallery, 2693 pin: info, 2694 start: 'top top', 2695 end: endo, 2696 2697 }) 2698 2699 function detailTabs() { 2700 2701 let tabs = $('.tab-titles-wrap'), 2702 titles = tabs.find('.tab-title'); 2703 2704 2705 2706 titles.on('click', function () { 2707 2708 let $this = $(this), 2709 findContent = '.tab_' + $this.attr('data-tab'); 2710 2711 $('.tab-content').removeClass('active'); 2712 $('.tab-title').removeClass('active'); 2713 $(findContent).addClass('active') 2714 $this.addClass('active') 2715 2716 2717 }) 2718 2719 2720 2721 2722 } 2723 detailTabs() 2724 2725 2726 matchMedia.add({ 2727 isMobile: "(max-width: 450px)" 2728 2729 }, (context) => { 2730 let { 2731 isMobile 2732 } = context.conditions; 2733 2734 galleryScroll.kill() 2735 2736 2737 var galeryDrag = Draggable.create(gallery.find('.product-gallery-wrap'), { 2738 type: 'x', 2739 bounds: { 2740 minX: 0, 2741 2742 }, 2743 lockAxis: true, 2744 dragResistance: 0.5, 2745 inertia: true, 2746 2747 zIndexBoost: false, 2748 2749 }); 2750 2751 2752 return () => { 2753 2754 2755 } 2756 }); 2757 2758 2759 2760 } 2761 2762 2763 // Project Pages 2764 2765 function naylaProjectPages() { 2766
2767 let $this = $('.project-page'), 2768 header = $this.find('.project-page-header'), 2769 wrapper = header.children('div'), 2770 image = $this.find('.project-image.featured'), 2771 title = $this.find('.project-title'), 2772 backButton = $this.find('.project-back-button'); 2773 2774 backButton.on('click', function () { 2775 2776 history.back() 2777 2778 }) 2779 2780 2781 if ((header.hasClass('fullscreen-image')) || (header.hasClass('half-image')) || (header.hasClass('tall'))) { 2782 2783 gsap.to(image.find('img'), { 2784 yPercent: 30, 2785 ease: 'none', 2786 scrollTrigger: { 2787 trigger: header, 2788 start: 'top top', 2789 end: 'bottom top', 2790 scrub: 1 2791 } 2792 }); 2793 2794 } 2795 2796 if (header.hasClass('fullscreen-image')) { 2797 2798 gsap.to(title, { 2799 yPercent: 100, 2800 2801 ease: 'none', 2802 scrollTrigger: { 2803 trigger: header, 2804 start: 'top top', 2805 end: 'bottom top', 2806 scrub: 1 2807 } 2808 }); 2809 2810 } 2811 2812 2813 if (header.hasClass('creative')) { 2814 2815 image.addClass('single-image parallax-image') 2816 2817 } 2818 2819 if (header.hasClass('tall')) { 2820 2821 2822 let rotate = header.find('.rotate-text-area'); 2823 2824 ScrollTrigger.create({ 2825 trigger: rotate, 2826 pin: true, 2827 start: 1, 2828 endTrigger: header.find('.wrapper'), 2829 end: 'bottom+=100 bottom', 2830 }) 2831 2832 2833 } 2834 2835 if (header.hasClass('image-gallery')) { 2836 2837 let hero = header.find('.project-hero'), 2838 images = header.find('.project-images'), 2839 slideButton = header.find('.project-slide-button'), 2840 slider = images.children('.project-images-slider'), 2841 speed = $(window).outerHeight() * images.data('speed'), 2842 vertical, horizontal, 2843 tl = gsap.timeline({ 2844 scrollTrigger: { 2845 trigger: header, 2846 start: 'top top', 2847 pin: true, 2848 scrub: 1, 2849 end: speed, 2850 id: 'projectImagesScroll' 2851 } 2852 }), 2853 heroTl = gsap.timeline({ 2854 scrollTrigger: { 2855 trigger: header, 2856 start: 1, 2857 scrub: 1, 2858 end: 500 2859 2860 } 2861 }); 2862 2863 2864 if (header.hasClass('vertical')) { 2865 vertical = true; 2866 horizontal = false; 2867 } else if (header.hasClass('horizontal')) { 2868 horizontal = true; 2869 vertical = false;
2870 } 2871 2872 2873 var sliderHeight, sliderTop, transVal, sliderWidth, sliderLeft; 2874 2875 function initAnim() { 2876 2877 sliderWidth = slider.outerWidth(); 2878 sliderLeft = slider.offset().left; 2879 sliderHeight = slider.outerHeight(); 2880 sliderTop = slider.offset().top; 2881 transVal = sliderHeight + sliderTop - $(window).outerHeight() + 50; 2882 2883 tl.clear(); 2884 2885 if (horizontal) { 2886 tl.to(slider, { 2887 xPercent: -100, 2888 }, 0) 2889 2890 2891 2892 } else if (vertical) { 2893 tl.to(slider, { 2894 y: -1 * transVal, 2895 2896 }, 0) 2897 2898 } 2899 2900 } 2901 2902 initAnim() 2903 2904 if (horizontal) { 2905 2906 let words = title.find('.anim_word'), 2907 state = Flip.getState(words), 2908 tl = gsap.timeline({ 2909 scrollTrigger: { 2910 trigger: header, 2911 start: 0, 2912 scrub: 1, 2913 end: 250, 2914 } 2915 }) 2916 2917 title.css('text-align-last', 'unset'); 2918 2919 Flip.from(state, { 2920 duration: 1, 2921 absolute: true, 2922 absoluteOnLeave: true, 2923 scrollTrigger: { 2924 trigger: header, 2925 start: -1, 2926 scrub: 1, 2927 end: 500, 2928 } 2929 }); 2930 2931 2932 tl.to(slideButton, { 2933 left: 0, 2934 2935 }, 0) 2936 2937 tl.to(slideButton.find('span'), { 2938 rotate: -45, 2939 2940 }, 0) 2941 2942 tl.to(header.find('.project-category, .project-meta, .project-slide-button'), { 2943 opacity: 0 2944 2945 }, 0) 2946 2947 slideButton.on('click', () => { 2948 gsap.to(window, { 2949 duration: .45, 2950 scrollTo: 250, 2951 ease: 'expo.inOut', 2952 2953 }); 2954 }) 2955 2956 2957 } else if (vertical) { 2958 2959 slideButton.on('click', function () { 2960 2961 let scrollToo = 750 * Math.ceil(ScrollTrigger.getById('projectImagesScroll').progress * 10); 2962 2963 if (scrollToo > transVal) { 2964 scrollToo = transVal; 2965 } 2966 2967 if (slideButton.hasClass('return')) { 2968 2969 gsap.to(window, { 2970 duration: .45, 2971 scrollTo: 0, 2972 ease: 'expo.inOut', 2973 onComplete: () => { 2974 slideButton.removeClass('return'); 2975 } 2976 }); 2977 2978 } else { 2979 2980 gsap.to(window, { 2981 duration: .75, 2982 scrollTo: scrollToo, 2983 ease: 'expo.out', 2984 }); 2985 } 2986 2987 if (transVal == scrollToo) { 2988 2989 slideButton.addClass('return'); 2990 } 2991 }) 2992 2993 2994 matchMedia.add({ 2995 isMobile: "(max-width: 450px)" 2996 2997 }, (context) => { 2998 let { 2999 isMobile 3000 } = context.conditions; 3001 3002 initAnim() 3003 3004 heroTl.to(hero, { 3005 opacity: 0, 3006 y: -100 3007 }) 3008 3009 return () => { 3010 heroTl.clear(); 3011 initAnim() 3012 3013 } 3014 }); 3015 } 3016 3017 } 3018 3019 let nextProj = $('.nayla-next-project'), 3020 link = nextProj.find('a'), 3021 nextTitle = nextProj.find('.next-project-title'), 3022 nextImage = nextProj.find('.next-project-image'); 3023 link.addClass('next-project-link') 3024 3025 if ($this.data('barba-namespace') !== 'project-gallery-horizontal' || $this.data('barba-namespace') !== 'project-gallery-vertical') { 3026 3027 let tl = gsap.timeline({ 3028 scrollTrigger: { 3029 trigger: nextProj, 3030 scrub: true, 3031 start: 'bottom bottom', 3032 end: 'bottom top', 3033 } 3034 }); 3035 3036 tl.fromTo(nextTitle, { 3037 opacity: 0, 3038 yPercent: 100 3039 }, { 3040 opacity: 1, 3041 yPercent: -50, 3042 3043 }, 0) 3044 3045 ScrollTrigger.create({ 3046 trigger: nextProj, 3047 start: 'bottom bottom', 3048 end: 'bottom top', 3049 pin: true, 3050 pinSpacing: false, 3051 }) 3052 3053 } 3054 3055 } 3056 3057 3058 function naylaPortfolio() { 3059
3060 let portfolio = $('.portfolio-grid'); 3061 3062 portfolio.each(function () { 3063 3064 let portfolio = $(this), 3065 controls = portfolio.children('.grid-controls'), 3066 projectsWrapper = portfolio.children('.grid-projects-wrapper'), 3067 padTop = parseInt(projectsWrapper.css('paddingTop'), 10), 3068 projects = projectsWrapper.find('.grid-project'), 3069 viewText = portfolio.data('view-text'), 3070 hovers = portfolio.data('hovers').split(' '), 3071 projectsLength = projects.length, 3072 lineCount = Math.floor(projectsLength / 2), 3073 projectsHeight = projects.outerHeight(), 3074 projectsWidth = projects.outerWidth(), 3075 gridGap = parseInt(projectsWrapper.css('gap'), 10), 3076 columns = 2, 3077 hoverImage, hoverCursor, hoverArrow; 3078 3079 portfolio.hasClass('col-3') ? columns = 3 : ''; 3080 portfolio.hasClass('col-4') ? columns = 4 : ''; 3081 3082 hovers.includes('imageMask') ? hoverImage = true : ''; 3083 hovers.includes('cursor') ? hoverCursor = true : ''; 3084 hovers.includes('imageMask') ? hoverArrow = true : ''; 3085 projectHovers(); 3086 3087 // Hovers 3088 function projectHovers() { 3089 3090 projects.each(function (i) { 3091 3092 i++ 3093 let $this = $(this), 3094 image = $this.find('img'), 3095 metas = $this.find('.grid-project-meta').children('div'), 3096 title = $this.find('.grid-project-title'), 3097 category = $this.find('.grid-project-category'), 3098 titleText = title.text(); 3099 3100 $this.addClass('project_' + i); 3101 $this.attr('data-index', i) 3102 3103 if (hovers.includes('classic')) { 3104 3105 portfolio.addClass('hover-classic') 3106 3107 3108 metas.children('span').length ? '' : metas.wrapInner('<span></span>'); 3109 3110 title.children('span').attr('data-hover', titleText) 3111 category.children('span').attr('data-view-text', viewText) 3112 } 3113 3114 if (hoverImage) { 3115 portfolio.addClass('hover-imageMask'); 3116 image.clone().addClass('masked').insertAfter(image) 3117 } 3118 3119 if (hoverCursor) { 3120 portfolio.addClass('hover-cursor'); 3121 3122 $this.addClass('cursor-icon'); 3123 $this.attr('data-cursor-icon', 'arrow_outward'); 3124 3125 } 3126 3127 hoverArrow ? portfolio.addClass('hover-arrow') : ''; 3128 3129 3130 // Parallax Images 3131 if (portfolio.hasClass('parallax-on')) { 3132 3133 gsap.to(image.not('masked'), { 3134 y: -100, 3135 3136 scrollTrigger: { 3137 trigger: $this, 3138 scrub: 2, 3139 } 3140 }) 3141 3142 } 3143 3144 }) 3145 } 3146 // Create seperators 3147 function createSeperators(lengths) { 3148 3149 portfolio.find('hr').remove(); 3150 3151 if (!portfolio.hasClass('masonry')) { 3152 3153 let line = '<hr></hr>', 3154 i = 1; 3155 3156 projectsWrapper.find('.grid-project:visible').each(function (i) { 3157 i++ 3158 $(this).attr('data-current-index', i) 3159 3160 }) 3161 3162 for (i = 1; i < lengths; i++) { 3163 3164 i % columns == 0 ? $(line).insertAfter(projectsWrapper.find('.grid-project:visible[data-current-index="' + i + '"]')) : ''; 3165 } 3166 } 3167 } 3168 createSeperators(projectsLength); 3169 3170 // Filtering 3171 if (portfolio.hasClass('filterable')) { 3172 3173 let portfolioFilters = portfolio.find('.portfolio-filters'), 3174 filterCats = portfolioFilters.find('li'); 3175 3176 filterCats.each(function () { 3177
3178 let $this = $(this), 3179 id = $this.attr('id'), 3180 length; 3181 3182 id == 'all' ? length = projectsLength : length = portfolio.find('.' + id).length; 3183 3184 $this.append('<span class="projects-length">(' + length + ')</span>'); 3185 3186 $this.on('click', () => { 3187 id == 'all' ? portfolio.removeClass('filtered') : portfolio.addClass('filtered'); 3188 3189 3190 filterCats.removeClass('active'); 3191 $this.addClass('active'); 3192 3193 let state = Flip.getState(projects); 3194 3195 if (id === 'all') { 3196 projects.show(); 3197 portfolio.hasClass('grid-list') ? '' : createSeperators(projectsLength); 3198 } else { 3199 projects.show(); 3200 projects.not('.' + id).hide(); 3201 let visibleLength = projectsLength - projects.not('.' + id).length; 3202 3203 portfolio.hasClass('grid-list') ? '' : createSeperators(visibleLength); 3204 } 3205 3206 if (portfolio.hasClass('grid-list')) { 3207 3208 Flip.from(state, { 3209 duration: 1, 3210 scale: false, 3211 ease: "expo.out", 3212 stagger: 0, 3213 absolute: true, 3214 absoluteOnLeave: true, 3215 onEnter: elements => gsap.fromTo(elements, { 3216 opacity: 0, 3217 x: 25 3218 }, { 3219 opacity: 1, 3220 x: 0 3221 3222 3223 }), 3224 onLeave: elements => gsap.to(elements, { 3225 opacity: 0, 3226 x: -25 3227 3228 3229 }) 3230 }); 3231 3232 3233 } else { 3234 3235 Flip.from(state, { 3236 duration: 1, 3237 scale: false, 3238 ease: "expo.out", 3239 stagger: 0, 3240 absolute: true, 3241 absoluteOnLeave: true, 3242 onEnter: elements => gsap.fromTo(elements, { 3243 opacity: 0, 3244 scale: 0 3245 }, { 3246 opacity: 1, 3247 scale: 1, 3248 3249 }), 3250 onLeave: elements => gsap.to(elements, { 3251 opacity: 0, 3252 scale: 0, 3253 3254 }) 3255 }); 3256 3257 } 3258 3259 3260 3261 }) 3262 3263 }); 3264 3265 function filtersVisible() { 3266 3267 let state = Flip.getState(filterCats); 3268 3269 portfolioFilters.toggleClass('hovered') 3270 3271 Flip.from(state, { 3272 duration: 1, 3273 ease: 'expo.out', 3274 absolute: false, 3275 absoluteOnLeave: true, 3276 onEnter: elements => gsap.fromTo(elements, { 3277 opacity: 0, 3278 3279 }, { 3280 opacity: 0.5, 3281 stagger: 0.05 3282 }), 3283 onLeave: elements => gsap.to(elements, { 3284 opacity: 0, 3285 stagger: -0.05 3286 }) 3287 }) 3288 } 3289 3290 portfolioFilters.hover( 3291 () => filtersVisible(), 3292 () => filtersVisible() 3293 ); 3294 } 3295 3296 // Layout Switch 3297 3298 let switchGrid = portfolio.find('.switch-grid'), 3299 switchList = portfolio.find('.switch-list'); 3300 3301 // List 3302 switchList.on('click', () => { 3303 3304 switchList.addClass('active'); 3305 switchGrid.removeClass('active'); 3306 3307 gsap.to(portfolio.find('hr'), { 3308 opacity: 0, 3309 }) 3310 3311 gsap.to(projects, { 3312 clipPath: 'inset(0% 0% 100% 0%)', 3313 y: -25, 3314 duration: .75, 3315 ease: 'circ.inOut', 3316 onComplete: () => { 3317 portfolio.removeClass('hover-arrow hover-imageMask hover-cursor'); 3318 portfolio.find('hr').remove(); 3319 portfolio.find('img.masked').remove(); 3320 portfolio.addClass('grid-list'); 3321 portfolio.find('.grid-project-meta > *'); 3322 $('<span class="g-list-arrow material-icons">arrow_outward</span>').insertBefore(projects.find('.grid-project-wrap .grid-project-meta > div:last-child')) 3323 3324 projects.each(function (i) { 3325 3326 let delay = 0 + (i / 8) 3327 3328 gsap.fromTo($(this).find('.grid-project-meta > *'), { 3329 y: 50 3330 }, { 3331 y: 0, 3332 duration: 1.5, 3333 ease: 'expo.out', 3334 delay: delay, 3335 stagger: 0.04, 3336 onStart: () => { 3337 3338 portfolio.addClass('animating'); 3339 $(this).addClass('gl-inview'); 3340 3341 gsap.set(projects, { 3342 clearProps: 'clipPath' 3343 }) 3344 3345 }, 3346 onComplete: () => { 3347 portfolio.removeClass('animating'); 3348 ScrollTrigger.refresh(true) 3349 ScrollTrigger.update(true) 3350 3351 } 3352 }) 3353 3354 }) 3355 } 3356 }) 3357 3358 }); 3359 3360 3361 // Grid 3362 switchGrid.on('click', () => { 3363 3364 switchGrid.addClass('active'); 3365 switchList.removeClass('active'); 3366 3367 portfolio.addClass('animating'); 3368 projects.removeClass('gl-inview'); 3369 3370 3371 gsap.to(portfolio.find('.grid-project-meta > *'), { 3372 opacity: 0, 3373 duration: .75, 3374 ease: 'expo.out', 3375 onComplete: () => { 3376 3377 gsap.set('.grid-project-meta > *', { 3378 clearProps: 'all' 3379 }) 3380 3381 let currLength = projectsWrapper.find('.grid-project:visible').length; 3382 portfolio.removeClass('grid-list'); 3383 3384 createSeperators(currLength); 3385 portfolio.find('.g-list-arrow').remove(); 3386 portfolio.removeClass('animating'); 3387 3388 gsap.fromTo(projects, { 3389 clipPath: 'inset(100% 0% 0% 0%)', 3390 y: 100 3391 }, { 3392 clipPath: 'inset(0% 0% 0% 0%)', 3393 y: 0, 3394 duration: 1.5, 3395 ease: 'expo.out', 3396 stagger: 0, 3397 3398 }) 3399 projectHovers(); 3400 ScrollTrigger.refresh(true) 3401 ScrollTrigger.update(true) 3402 3403 } 3404 }) 3405 3406 }) 3407 3408 }) 3409 3410 } 3411 3412 function naylaShopPage() { 3413 3414 let products = $('.nayla-products-grid'); 3415 3416 products.each(function () { 3417 3418 let products = $(this), 3419 grid = products.find('.grid--products'), 3420 product = grid.find('.grid--product'), 3421 controls = products.find('.product-grid-controls'), 3422 length = controls.find('.products--length'), 3423 switcher = controls.find('.grid--switcher'), 3424 switch4 = switcher.find('.switch-col-4'), 3425 switch2 = switcher.find('.switch-col-2'); 3426 3427 length.prepend('<span>' + product.length + ' </span>'); 3428 3429 switch2.on('click', function () { 3430 3431 gsap.to(grid, { 3432 opacity: 0, 3433 onComplete: () => { 3434 grid.addClass('col-2') 3435 gsap.to(grid, { 3436 opacity: 1 3437 }) 3438 } 3439 }) 3440 3441 }) 3442 3443 switch4.on('click', function () { 3444 3445 gsap.to(grid, { 3446 opacity: 0, 3447 onComplete: () => { 3448 grid.removeClass('col-2') 3449 gsap.to(grid, { 3450 opacity: 1 3451 }) 3452 } 3453 }) 3454 }) 3455 }) 3456 3457 } 3458 naylaShopPage() 3459 3460
3461 /////////////////////////////// 3462 // Showcase Layouts // 3463 /////////////////////////////// 3464 3465 3466 3467 function slideNav(slider, parent) { 3468 3469 let prev = parent.find('.slide-prev'), 3470 next = parent.find('.slide-next'); 3471 3472 next.on('click', function () { 3473 slider.slideNext(); 3474 }) 3475 3476 prev.on('click', function () { 3477 slider.slidePrev(); 3478 }) 3479 3480 } 3481 3482 function showcaseWall() { 3483 3484 var wallWrap = $('.showcase-wall'); 3485 3486 wallWrap.each(function () { 3487 3488 let mainWrap = $(this), 3489 wrapper = mainWrap.find('.showcase-wall-wrap, .showcase-footer'), 3490 overlay = mainWrap.find('.sw-overlay'), 3491 project = mainWrap.find('.showcase-project'), 3492 title = project.find('.project-title'), 3493 projectWraps = mainWrap.find('.sw-projects-wrap'), 3494 height = mainWrap.outerHeight(), 3495 speed = mainWrap.data('speed'), 3496 end = speed == null ? height + 1000 : height + speed, 3497 tl = gsap.timeline({ 3498 scrollTrigger: { 3499 trigger: mainWrap, 3500 scrub: 1, 3501 pin: true, 3502 start: 'top top', 3503 end: end, 3504 id: 'showcaseWallScroll' 3505 } 3506 }); 3507 3508 3509 if (mainWrap.hasClass('animate-in')) { 3510 3511 disableScroll(); 3512 3513 mainWrap.addClass('animating'); 3514 3515 new SplitText(title, { 3516 type: 'chars', 3517 charsClass: 'pt_char' 3518 }) 3519 3520 $('.sw-projects-wrap').each(function () { 3521 3522 let 3523 $this = $(this), 3524 char = $this.find('.pt_char'), 3525 tl = gsap.timeline({ 3526 onComplete: function () { 3527 mainWrap.removeClass('animating'); 3528 enableScroll(); 3529 } 3530 }); 3531 3532 tl.from($(this), { 3533 x: 1000, 3534 duration: 1.5, 3535 ease: 'power2.out', 3536 }, 0) 3537 3538 tl.fromTo(char, { 3539 y: 200, 3540 }, { 3541 y: 0, 3542 duration: 1.5, 3543 ease: 'power2.out', 3544 stagger: 0.02 3545 }, 0) 3546 }) 3547 } 3548 3549 projectWraps.each(function () { 3550 3551 let $this = $(this), 3552 startPos = $this.data('start-pos'), 3553 endPos = $this.data('end-pos'); 3554 3555 tl.fromTo($this, { 3556 xPercent: startPos, 3557 }, { 3558 xPercent: endPos 3559 }, 0) 3560 3561 }); 3562 3563 3564 3565 var layoutReset = gsap.delayedCall(0.1, layoutChange, [overlay, false, wrapper], { 3566 oncomplete: () => { 3567 wrapper.removeClass('dark light') 3568 } 3569 }); 3570 layoutReset.kill(); 3571 3572 3573 project.each(function (i) { 3574 3575 i++ 3576 let $this = $(this), 3577 image = $this.find('.project-image'), 3578 findImage = '.image_' + i, 3579 img = image.find('img').attr('src'), 3580 secondary = $this.find('a'); 3581 3582 3583 $this.attr('data-index', i); 3584 3585 $this.prepend('<span class="project-index">' + i + '</span>') 3586 3587 image.addClass('image_' + i) 3588 3589 mainWrap.hasClass('animate-colors') ? projectColorSettings($this) : ''; 3590 3591 3592 image.css('width', image.outerWidth()) 3593 image.css('height', image.outerHeight()) 3594 3595 $this.attr('data-index', i); 3596 3597 $this.on('mousemove', function (e) { 3598 3599 let mouseLeft = e.clientX, 3600 mouseTop = e.clientY, 3601 myLeft = mouseLeft - $this.offset().left, 3602 myTop = mouseTop - $this.offset().top + $(window).scrollTop(), 3603 movX = event.movementX < 0 ? event.movementX * -1 : event.movementX; 3604 3605 gsap.to(image, { 3606 left: myLeft, 3607 top: myTop, 3608 rotate: gsap.utils.clamp(-10, 10, (event.movementX / 5)), 3609 duration: 1, 3610 ease: 'power3.out', 3611 }) 3612 3613 }) 3614 3615 $this.find('a').on('mouseenter', function () { 3616
3617 layoutReset.kill(); 3618 3619 mainWrap.addClass('hovered'); 3620 $this.addClass('current'); 3621 3622 image.addClass('transition--media') 3623 3624 mainWrap.hasClass('animate-colors') ? layoutChange(overlay, $this, wrapper) : ''; 3625 3626 3627 }) 3628 3629 $this.find('a').on('mouseleave', function () { 3630 3631 mainWrap.removeClass('hovered') 3632 $this.removeClass('current') 3633 3634 image.removeClass('transition--media') 3635 3636 mainWrap.hasClass('animate-colors') ? layoutReset.restart(true) : ''; 3637 3638 }) 3639 3640 $this.find('a').on('click', function () { 3641 3642 3643 $this.find('a').off('mouseleave') 3644 3645 }) 3646 3647 }) 3648 3649 3650 matchMedia.add({ 3651 isMobile: "(max-width: 550px)" 3652 3653 }, (context) => { 3654 let { 3655 isMobile 3656 } = context.conditions; 3657 3658 3659 tl.revert() 3660 3661 3662 3663 return () => { 3664 3665 3666 3667 3668 } 3669 }); 3670 3671 3672 3673 }) 3674 3675 3676 } 3677 3678 3679 3680 3681 function showcase3dTitles() { 3682 3683 let showcase3dTitles = $('.showcase-3d-titles'); 3684 3685 showcase3dTitles.each(function () { 3686 3687 let $this = $(this), 3688 projectsWrap = $this.find('.s3t-projects-wrap'), 3689 project = $this.find('.showcase-project'), 3690 imagesWrap = $this.find('.s3t-images'), 3691 projectLength = project.length, 3692 rotateX = 360 / projectLength, 3693 fontSize = parseInt($this.find('.project-title').css('font-size')); 3694 3695 imagesWrap.addClass('transition--media'); 3696 3697 project.each(function (i) { 3698 3699 let $this = $(this), 3700 image = $this.find('.project-image'); 3701 3702 $this.find('a').addClass('sc-link'); 3703 3704 $this.find('a').on('click', () => { 3705 $this.off('mouseleave') 3706 }) 3707 3708 $this.data('index', i) 3709 3710 image.addClass('image_' + i).appendTo(imagesWrap) 3711 3712 $(this).css('--rotateX', -1 * rotateX * i + "deg") 3713 $(this).addClass('active-title_' + i) 3714 3715 $this.on('mouseenter', () => { 3716 3717 if ($this.hasClass('active')) { 3718 3719 3720 imagesWrap.addClass('active') 3721 } 3722 3723 }) 3724 3725 $this.on('mouseleave', () => { 3726 3727 if ($this.hasClass('active')) { 3728 3729 let image = '.image_' + $this.data('index'); 3730 3731 3732 imagesWrap.removeClass('active') 3733 3734 } 3735 3736 3737 }) 3738 3739 3740 }) 3741 3742 $this.css('--transformZ', projectLength * fontSize / 6.4 + "px") 3743 3744 3745 let endo = $(window).outerHeight() * projectLength / 3; 3746 3747 gsap.to(projectsWrap, { 3748 rotateX: "360", 3749 ease: "none", 3750 scrollTrigger: { 3751 trigger: $this, 3752 pin: true, 3753 start: "top top", 3754 end: endo, 3755 scrub: 1, 3756 repeat: -1, 3757 onUpdate: (self) => { 3758 let prog = self.progress * projectLength, 3759 snap = gsap.utils.snap(1) 3760 3761 3762 $this.find('.active-title_' + snap(prog) % projectLength).addClass('active') 3763 3764 $this.find('.active-title_' + snap(prog) % projectLength).prevAll().removeClass('active') 3765 3766 $this.find('.active-title_' + snap(prog) % projectLength).nextAll().removeClass('active'); 3767 3768 3769 let activeProj = $('.showcase-project.active'), 3770 image = '.image_' + activeProj.data('index'); 3771 3772 $('.project-image').removeClass('active') 3773 $(image).addClass('active') 3774 3775 3776 }, 3777 3778 } 3779 }) 3780 3781 3782 3783 }) 3784 3785 } 3786 3787 function showcaseFullscreenWall() { 3788 3789 var main = $('.showcase-fullscreen-wall'); 3790 3791 main.each(function () { 3792 3793 let parent = $(this), 3794 wrapper = parent.find('.sfw-projects-wrapper'), 3795 projects = wrapper.find('.showcase-project'), 3796 switcList = parent.find('.switch-titles'), 3797 switchImages = parent.find('.switch-images'), 3798 animation = parent.data('animation'); 3799 3800 3801 projects.each(function (i) { 3802 i++ 3803
3804 let $this = $(this), 3805 image = $this.find('.project-image'), 3806 title = $this.find('.project-title'); 3807 3808 $this.find('a').addClass('sc-link') 3809 3810 new SplitText(title, { 3811 type: 'lines', 3812 linesClass: 'title_line' 3813 }) 3814 3815 image.css('width', image.outerWidth()) 3816 image.css('height', image.outerHeight()) 3817 3818 $this.attr('data-index', i); 3819 3820 $this.on('mousemove', function (e) { 3821 3822 let mouseLeft = e.clientX, 3823 mouseTop = e.clientY, 3824 myLeft = mouseLeft - $this.offset().left, 3825 myTop = mouseTop - $this.offset().top, 3826 movX = event.movementX < 0 ? event.movementX * -1 : event.movementX; 3827 3828 gsap.to(image, { 3829 left: myLeft, 3830 top: myTop, 3831 rotate: gsap.utils.clamp(-10, 10, (event.movementX / 5)), 3832 duration: 1, 3833 ease: 'power3.out', 3834 }) 3835 3836 3837 3838 }) 3839 3840 $this.on('mouseenter', function () { 3841 3842 parent.addClass('hovered') 3843 $this.addClass('current') 3844 $this.find('.project-image').addClass('transition--media') 3845 3846 }) 3847 3848 $this.on('mouseleave', function () { 3849 3850 parent.removeClass('hovered') 3851 $this.removeClass('current') 3852 $this.find('.project-image').removeClass('transition--media'); 3853 3854 }) 3855 3856 $this.find('a').on('click', function () { 3857 3858 $this.off('mouseleave'); 3859 gsap.to($this.find('img'), { 3860 scale: 1 3861 }) 3862 }) 3863 3864 if (animation) { 3865 3866 title.find('.title_line').addClass('has-anim-text') 3867 title.find('.title_line').addClass(animation) 3868 3869 3870 title.find('.title_line').attr('data-delay', (i / 20)) 3871 3872 $this.addClass('detect-pov') 3873 3874 } 3875 3876 }); 3877 3878 }) 3879 3880 3881 3882 3883 } 3884 3885 function showcaseList() { 3886 3887 var sflWrap = $('.showcase-list'); 3888 3889 sflWrap.each(function () { 3890 3891 let $this = $(this), 3892 projectsWrap = $this.find('.sfl-projects-wrap'), 3893 speed = $this.attr('data-speed'), 3894 wrapHeight = projectsWrap.outerHeight(), 3895 end = speed == null ? wrapHeight + 1000 : (wrapHeight + parseInt(speed)), 3896 transVal = $(window).outerHeight() - wrapHeight, 3897 project = $this.find('.showcase-project'), 3898 overlay = $this.find('.sc-overlay'); 3899 3900 3901 project.each(function (i) { 3902 3903 i++ 3904 let $this = $(this), 3905 image = $this.find('.project-image'), 3906 img = image.find('img'), 3907 findImage = '.image_' + i, 3908 imgSrc = image.find('img').attr('src'), 3909 secondary = $this.find('a'); 3910 3911 3912 secondary.addClass('sc-link') 3913 i >= 10 ? $this.attr('data-index', i) : $this.attr('data-index', '0' + i); 3914 3915 3916 image.addClass('image_' + i); 3917 3918 $this.on('mouseenter', function (e) { 3919 3920 let mouseLeft = e.clientX, 3921 myLeft = mouseLeft - $this.offset().left; 3922 3923 project.not($this).addClass('op-down') 3924 $this.addClass('hovered') 3925 $this.find('.project-image').addClass('transition--media') 3926 3927 gsap.set($this, { 3928 zIndex: 2 3929 }); 3930 3931 gsap.fromTo(image, { 3932 scale: .5, 3933 opacity: .5 3934 }, { 3935 scale: 1, 3936 opacity: 1 3937 }) 3938 3939 gsap.set(image, { 3940 left: myLeft, 3941 rotate: event.movementX / 7, 3942 3943 }) 3944 3945 }); 3946 3947 $this.on('mousemove', function (e) { 3948 3949 let mouseLeft = e.clientX, 3950 myLeft = mouseLeft - $this.offset().left, 3951 bright = 'brightness(' + event.movementX + ')'; 3952 3953 gsap.to(image, { 3954 left: myLeft, 3955 rotate: event.movementX / 7, 3956 duration: 1, 3957 ease: 'power3.out', 3958 }) 3959 3960 3961 3962 }) 3963 3964 projectsWrap.on('mouseleave', function () { 3965 3966 gsap.to(overlay, { 3967 backgroundColor: 'transparent', 3968 3969 }) 3970 3971 }) 3972 3973 3974 3975 $this.on('mouseleave', function () { 3976 3977 gsap.set($this, { 3978 clearProps: 'all' 3979 }); 3980 3981 project.removeClass('op-down'); 3982 project.removeClass('hovered'); 3983 project.find('.project-image').removeClass('transition--media') 3984 3985 }) 3986 3987 $this.find('a').on('click', () => { 3988 $this.off('mouseleave') 3989 }) 3990 3991 3992 3993 3994 }) 3995 3996 3997 if ($this.hasClass('animate-in')) { 3998 3999 $this.find('.project-title').addClass('has-anim-text charsScaleDown fade') 4000 $this.find('.project-title').attr('data-delay', .5) 4001 4002 } 4003 4004 4005 }) 4006 4007 4008 } 4009 4010 function showcaseFullscreenSlideshow() { 4011 4012 4013 var fullscreenSlideshow = $('.showcase-fullscreen-slideshow'); 4014 4015 fullscreenSlideshow.each(function () { 4016 4017 let fsSlideshow = $(this), 4018 projects = fsSlideshow.find('.showcase-project'), 4019 images = fsSlideshow.find('.fs-images-slider'), 4020 footer = fsSlideshow.find('.showcase-footer'), 4021 current = fsSlideshow.find('.sfs-current'), 4022 total = fsSlideshow.find('.sfs-total'), 4023 headerChange, footerChange; 4024 4025 images.addClass('transition--media') 4026 4027 current.html('01') 4028 total.html(projects.length < 10 ? '0' + projects.length : projects.length) 4029 4030 headerChange = false;
4031 footerChange = false; 4032 4033 4034 if (fsSlideshow.hasClass('header-change')) { 4035 headerChange = true; 4036 siteHeader.addClass('mx-difference'); 4037 } 4038 4039 if (fsSlideshow.hasClass('footer-change')) { 4040 footerChange = true; 4041 footer.addClass('mx-difference'); 4042 } 4043 4044 projects.each(function (i) { 4045 4046 4047 let $this = $(this), 4048 image = $this.find('.project-image'), 4049 layout = $this.data('layout'), 4050 elements = $this.find('.project-inner, .project-button a'), 4051 title = $this.find('.project-title'), 4052 cat = $this.find('.project-category'), 4053 summary = $this.find('.project-summary'); 4054 4055 4056 $this.addClass('wrapper'); 4057 4058 new SplitText([cat, summary], { 4059 type: 'words', 4060 wordsClass: 'pd_word' 4061 }) 4062 4063 $this.find('.pd_word').wrapInner('<span></span>') 4064 4065 new SplitText(title, { 4066 type: 'words, chars', 4067 wordsClass: 'pt_word', 4068 charsClass: 'pt_char' 4069 }) 4070 4071 $this.find('.pt_char').wrapInner('<span></span>') 4072 4073 $this.addClass('project_' + i); 4074 $this.attr('data-index', i); 4075 4076 image.addClass('swiper-slide image_' + i).wrapInner('<div class="fs-parallax-wrap"><div class="slide-bgimg"></div></div>').appendTo(images.find('.swiper-wrapper')); 4077 }) 4078 4079 4080 let link = $('.project_0 a').attr('href'); 4081 $('.project-button > a').attr('href', link); 4082 $('.project-button > a').addClass('sc-link'); 4083 4084 $('.project_0').addClass('active') 4085 4086 4087 function headerMainChange(color, delay1, delay2) { 4088 4089 4090 let hsl = gsap.utils.splitColor(color, true), 4091 lightness = hsl[hsl.length - 1]; 4092 4093 setTimeout(function () { 4094 4095 if ((lightness > 50) && (lightness != 0)) { 4096 4097 fsSlideshow.removeClass('temp_dark') 4098 fsSlideshow.addClass('temp_light') 4099 4100 4101 } else if ((lightness < 50) && (lightness != 0)) { 4102 4103 fsSlideshow.removeClass('temp_light') 4104 fsSlideshow.addClass('temp_dark'); 4105 } 4106 4107 4108 }, delay1) 4109 4110 setTimeout(function () { 4111 4112 if ((lightness > 50) && (lightness != 0)) { 4113 4114 siteHeader.removeClass('temp_dark') 4115 siteHeader.addClass('temp_light') 4116 4117 } else if ((lightness < 50) && (lightness != 0)) { 4118 4119 siteHeader.removeClass('temp_light') 4120 siteHeader.addClass('temp_dark') 4121 } 4122 4123 }, delay2) 4124 4125 } 4126 4127 let firtsColor = fsSlideshow.find('.project_0').data('elements-color'); 4128 headerMainChange(firtsColor, 0, 0) 4129 4130 4131 var interleaveOffset = 0.7, 4132 imagesSwiper = new Swiper(".fs-images-slider", { 4133 // autoplay: true, 4134 speed: 1000, 4135 slidesPerView: 1, 4136 // slidesPerGroupAuto: false, 4137 navigaton: { 4138 prevEl: '.fs-prev', 4139 nextEl: '.fs-next' 4140 }, 4141 init: false, 4142 edgeSwipeDetection: true, 4143 mousewheel: { 4144 eventsTarget: '.showcase-fullscreen-slideshow', 4145 // releaseOnEdges: true, 4146 }, 4147 direction: 'vetical', 4148 parallax: true, 4149 // watchSlideProgress: true, 4150 on: { 4151 slideChange: function () { 4152 let swiper = this, 4153 projectIn = fsSlideshow.find('.project_' + swiper.activeIndex), 4154 projectOut = fsSlideshow.find('.project_' + swiper.previousIndex), 4155 outMetas = projectOut.find('.pd_word span'), 4156 outTitle = projectOut.find('.pt_char span'), 4157 outButton = projectOut.find('.project-button span'), 4158 inButton = projectIn.find('.project-button span'), 4159 inMetas = projectIn.find('.pd_word span'), 4160 inTitle = projectIn.find('.pt_char span'); 4161 4162 projectIn.addClass('active'); 4163 projectOut.removeClass('active'); 4164 4165 let bgaColor = projectIn.data('elements-color'); 4166 4167 if (swiper.activeIndex > swiper.previousIndex) { 4168 4169 headerMainChange(bgaColor, 350, 750) 4170 4171 gsap.set([outMetas, outTitle, inMetas, inTitle], { 4172 clearProps: 'all' 4173 }) 4174 4175 let metasOut = gsap.to(outMetas, { 4176 yPercent: -100, 4177 ease: 'power3.in', 4178 duration: .4, 4179 stagger: 0.01, 4180 4181 }); 4182 gsap.to(outTitle, { 4183 yPercent: -100, 4184 ease: 'power3.in', 4185 duration: .4, 4186 stagger: 0.01, 4187 onComplete: () => { 4188 projectOut.hide(); 4189 } 4190 }) 4191 4192 gsap.from(inTitle, { 4193 yPercent: 100, 4194 ease: 'power3.out', 4195 duration: .6, 4196 stagger: 0.02, 4197 delay: .6, 4198 onStart: () => { 4199 projectIn.show(); 4200 } 4201 }) 4202 4203 4204 gsap.from(inMetas, { 4205 yPercent: 100, 4206 ease: 'power3.out', 4207 duration: .6, 4208 stagger: 0.03, 4209 delay: 1 4210 }) 4211 4212 gsap.from(inButton, { 4213 yPercent: 100, 4214 xPercent: -100, 4215 ease: 'power3.out', 4216 duration: .6, 4217 stagger: 0.03, 4218 delay: 1 4219 }) 4220 4221 } else { 4222 4223 //Prev Animation 4224 4225 headerMainChange(bgaColor, 750, 350) 4226 gsap.set([outMetas, outTitle, inMetas, inTitle], { 4227 clearProps: 'all' 4228 }) 4229 4230 gsap.to(outMetas, { 4231 yPercent: 100, 4232 ease: 'power3.in', 4233 duration: .4, 4234 stagger: 0.01 4235 }); 4236 4237 gsap.to(outTitle, { 4238 yPercent: 100, 4239 ease: 'power3.in', 4240 duration: .4, 4241 stagger: 0.01, 4242 onComplete: () => { 4243 projectOut.hide(); 4244 } 4245 }) 4246 4247 gsap.from(inTitle, { 4248 yPercent: -100, 4249 ease: 'power3.out', 4250 duration: .6, 4251 stagger: 0.02, 4252 delay: .6, 4253 onStart: () => { 4254 projectIn.show(); 4255 } 4256 }) 4257 4258 4259 gsap.from(inMetas, { 4260 yPercent: -100, 4261 ease: 'power3.out', 4262 duration: .6, 4263 stagger: -0.03, 4264 delay: 1 4265 }) 4266 4267 gsap.from(inButton, { 4268 yPercent: 100, 4269 xPercent: -100, 4270 ease: 'power3.out', 4271 duration: .6, 4272 stagger: 0.03, 4273 delay: 1 4274 }) 4275 4276 4277 4278 }; 4279 4280 let activeProj = fsSlideshow.find('.showcase-project.active'), 4281 bgColor = activeProj.data('background-color'); 4282 4283 }, 4284 progress: function () { 4285 let swiper = this; 4286 for (let i = 0; i < swiper.slides.length; i++) { 4287 let slideProgress = swiper.slides[i].progress, 4288 innerOffset = swiper.height * interleaveOffset, 4289 innerTranslate = slideProgress * innerOffset; 4290 4291 swiper.slides[i].querySelector(".slide-bgimg").style.transform = 4292 "translateY(" + innerTranslate + "px)"; 4293 } 4294 }, 4295 setTransition: function (speed) { 4296 let swiper = this; 4297 for (let i = 0; i < swiper.slides.length; i++) { 4298 swiper.slides[i].style.transition = speed + "ms"; 4299 swiper.slides[i].querySelector(".slide-bgimg").style.transition = 1000 + "ms"; 4300 } 4301 }, 4302 slideChangeTransitionEnd: function () { 4303 4304 let swiper = this; 4305 4306 let link = $('.showcase-project.active a').attr('href'); 4307 $('.project-button > a').attr('href', link) 4308 4309 4310 current.html($('.showcase-project.active').data('index') < 10 ? '0' + ($('.showcase-project.active').data('index') + 1) : ($('.showcase-project.active').data('index') + 1)) 4311 4312 4313 if (($('body').innerHeight()) > ($(window).outerHeight())) { 4314 4315 if (swiper.slides.length == (swiper.activeIndex + 1)) { 4316 4317 swiper.mousewheel.disable(); 4318 4319 ScrollTrigger.create({ 4320 trigger: fsSlideshow, 4321 start: 'top top', 4322 end: 'center top', 4323 onLeave: function () { 4324 4325 }, 4326 onLeaveBack: (self) => { 4327 4328 setTimeout(function () { 4329 4330 4331 self.kill(); 4332 swiper.mousewheel.enable(); 4333 4334 }, 1000) 4335 4336 } 4337 }) 4338 4339 } 4340 4341 } 4342 4343 } 4344 4345 } 4346 }); 4347 4348 slideNav(imagesSwiper, fsSlideshow) 4349 4350 4351 $(document).ready(function () { 4352 4353 imagesSwiper.init(); 4354 4355 }) 4356 4357 // Intro Animation 4358 4359 if (fsSlideshow.hasClass('animate-in')) { 4360 4361 let tl = gsap.timeline({ 4362 once: true, 4363 delay: 1 4364 }) 4365 4366 tl.fromTo(fsSlideshow.find('.fs-images-slider'), { 4367 clipPath: 'inset(0% 0% 0% 100%)' 4368 }, { 4369 clipPath: 'inset(0% 0% 0% 0%)', 4370 duration: 1, 4371 ease: 'power3.inOut', 4372 4373 }) 4374 4375 tl.fromTo(fsSlideshow.find('.project_0 .pt_char span, .project-button a'), { 4376 x: 100 4377 }, { 4378 x: 0, 4379 duration: 1, 4380 ease: 'power3.out', 4381 stagger: 0.01, 4382 4383 }) 4384 4385 tl.fromTo(fsSlideshow.find('.showcase-footer'), { 4386 y: 100 4387 }, { 4388 y: 0, 4389 duration: 1, 4390 ease: 'power3.out' 4391 }) 4392 4393 4394 } 4395 4396 }) 4397 4398 } 4399 4400 function layoutChange(target, project, parent) { 4401 4402 if (project) { 4403 4404 let primaryColor = project.data('primary-color'), 4405 secondaryColor = project.data('secondary-color'), 4406 tl = gsap.timeline(); 4407 4408 if (primaryColor) { 4409 4410 tl.to(target, { 4411 backgroundColor: primaryColor, 4412 duration: .75, 4413 ease: 'sine.out', 4414 onStart: () => { 4415 headerLayoutChange(false, primaryColor, false, false); 4416 cursorLayoutChange(false, primaryColor, false); 4417 4418 let hsl = gsap.utils.splitColor(primaryColor, true), 4419 lightness = hsl[hsl.length - 1]; 4420 4421 if (parent) { 4422 lightness < 50 ? parent.addClass('light') : parent.removeClass('light'); 4423 lightness > 50 ? parent.addClass('dark') : parent.removeClass('dark'); 4424 4425 } 4426 4427 } 4428 }, 0) 4429 4430 } else { 4431 4432 tl.to(target, { 4433 backgroundColor: 'transparent', 4434 duration: .75, 4435 ease: 'sine.out', 4436 onStart: () => { 4437 headerLayoutChange(false, false, false, true); 4438 cursorLayoutChange(false, false, true) 4439 } 4440 }, 0); 4441 4442 parent ? parent.removeAttr('style') : ''; 4443 4444 } 4445 4446 4447 if (parent) { 4448 if (secondaryColor) { 4449 parent.attr('style', '--mainColor: ' + secondaryColor + '') 4450 4451 } else { 4452 4453 parent.removeAttr('style'); 4454 parent.removeClass('dark light') 4455 } 4456 4457 4458 } 4459 4460 4461 4462 4463 4464 } else { 4465 4466 gsap.to(target, { 4467 backgroundColor: 'transparent', 4468 duration: .75, 4469 ease: 'sine.out', 4470 onStart: () => { 4471 headerLayoutChange(false, false, false, true); 4472 cursorLayoutChange(false, false, true) 4473 } 4474 }); 4475 4476 parent.removeAttr('style'); 4477 parent.removeClass('dark light') 4478 4479 } 4480 } 4481 4482 4483 function projectColorSettings(project) { 4484
4485 let $this = project, 4486 img = project.find('img'), 4487 imgSrc = img.attr('src'), 4488 bgColor = project.data('primary-color'), 4489 elementsColor = project.data('secondary-color'); 4490 4491 if ((bgColor == null) && (img.length)) { 4492 4493 colorjs.average(imgSrc, { 4494 amount: 1 4495 }).then(imgColor => { 4496 4497 let finalColor = "rgb" + "(" + imgColor + ")"; 4498 $this.attr('data-primary-color', finalColor); 4499 4500 }) 4501 4502 } 4503 4504 if (((bgColor == null) && (!img.length))) { 4505 4506 project.attr('data-primary-color', false) 4507 } 4508 4509 4510 if (elementsColor == null) { 4511 4512 $this.attr('data-secondary-color', false) 4513 } 4514 4515 } 4516 4517 function changeHeaderStatus() { 4518 siteHeader.hasClass('dark') ? headerDark = true : headerDark = false; 4519 siteHeader.hasClass('light') ? headerLight = true : headerLight = false; 4520 } 4521 4522 4523 4524 function showcaseMinimalList() { 4525 4526 var mainWrap = $('.showcase-minimal-list'); 4527 4528 mainWrap.each(function () { 4529 4530 var mainWrap = $(this), 4531 projectsWrap = mainWrap.find('.sml-projects-wrap'), 4532 pwHeight = projectsWrap.outerHeight(), 4533 project = projectsWrap.find('.showcase-project'), 4534 projectsLength = project.length, 4535 images = mainWrap.find('.sml-images'), 4536 overlay = mainWrap.find('.sfc-overlay'), 4537 animation = mainWrap.data('animation'), 4538 colorAnim; 4539 4540 images.addClass('transition--media') 4541 4542 4543 colorAnim = true; 4544 4545 if (!mainWrap.hasClass('animate-colors')) { 4546 colorAnim = false 4547 } 4548 4549 // Project Settgins 4550 4551 project.each(function (i) { 4552 4553 4554 let $this = $(this), 4555 title = $this.find('.project-title'), 4556 image = $this.find('.project-image'); 4557 4558 animation ? title.addClass('has-anim-text ' + animation) : ''; 4559 4560 $this.find('a').addClass('sc-link'); 4561 4562 if (colorAnim == true) { 4563 4564 projectColorSettings($this); 4565 4566 } 4567 4568 $this.attr('data-index', i) 4569 image.addClass('image_' + i).appendTo(images); 4570 4571 $this.addClass('project_' + i); 4572 }) 4573 4574 4575 let end = window.innerHeight * 5; 4576 4577 gsap.to(projectsWrap, { 4578 y: pwHeight * -1, 4579 ease: "none", 4580 scrollTrigger: { 4581 trigger: projectsWrap, 4582 start: "top top", 4583 end: end , 4584 pin: mainWrap, 4585 scrub: true, 4586 onUpdate: (self) => { 4587 4588 let prog = self.progress * projectsLength, 4589 snap = Math.floor(prog), 4590 findProj = $('.project_' + snap), 4591 findImg = '.image_' + findProj.data('index'), 4592 path = findProj.data('mask'), 4593 bgColor = findProj.data('background-color'), 4594 elementsColor = findProj.data('elements-color'); 4595 4596 project.removeClass('active') 4597 findProj.addClass('active'); 4598 images.find('.project-image').hide(); 4599 images.find('.project-image').removeClass('active'); 4600 $(findImg).show(); 4601 $(findImg).addClass('active'); 4602 4603 4604 4605 4606 layoutChange(overlay, findProj, projectsWrap.find('a')) 4607 changeHeaderStatus() 4608 4609 4610 4611 4612 } 4613 } 4614 }) 4615 4616 }) 4617 4618 } 4619 4620 function showcaseCarousel() { 4621 4622 var mainWrap = $('.showcase-carousel'); 4623 4624 mainWrap.each(function () { 4625 4626 let mainWrap = $(this), 4627 overlay = mainWrap.find('.sfc-overlay'), 4628 images = mainWrap.find('.sc-images'), 4629 scWrap = mainWrap.find('.sc-wrapper'),
4630 wrapperWidth = scWrap.outerWidth(), 4631 projectsWrap = mainWrap.find('.sc-projects-wrap'), 4632 projects = projectsWrap.find('.showcase-project'), 4633 wrapperHeight = mainWrap.outerHeight(), 4634 speed = wrapperHeight + mainWrap.data('speed'), 4635 frac = mainWrap.find('.slides-fraction'), 4636 curr = frac.find('.slide-current'), 4637 tot = frac.find('.slide-total'), 4638 colorAnim; 4639 4640 curr.html('1') 4641 tot.html(projects.length) 4642 4643 images.addClass('transition--media') 4644 4645 mainWrap.hasClass('animate-colors') ? colorAnim = true : colorAnim = false; 4646 4647 images.addClass('swiper-container').wrapInner('<div class="swiper-wrapper"></div>'); 4648 4649 // Project Settings 4650 4651 projects.each(function (i) { 4652 4653 let $this = $(this), 4654 image = $this.find('.project-image'); 4655 4656 $this.find('a').addClass('sc-link') 4657 4658 $this.find('a').addClass('cursor-icon'); 4659 $this.find('a').attr('data-cursor-icon', 'arrow_outward') 4660 4661 $this.attr('data-index', i); 4662 $this.addClass('project_' + i); 4663 4664 colorAnim ? projectColorSettings($this) : ''; 4665 4666 image.addClass('swiper-slide image_' + i).wrapInner('<div class="fs-parallax-wrap"><div class="slide-bgimg"></div></div>').appendTo(images.find('.swiper-wrapper')); 4667 4668 }) 4669 4670 // Init first 4671 4672 if (colorAnim) { 4673 4674 let bgColor = $('.project_0').data('primary-color'); 4675 4676 gsap.set(overlay, { 4677 backgroundColor: bgColor 4678 }) 4679 4680 } 4681 4682 // Init Images Slider 4683 var interleaveOffset = 0.8, 4684 imagesSlider = new Swiper('.sc-images', { 4685 slidesPerView: 1, 4686 speed: 700, 4687 // mousewheel: true, 4688 parallax: true, 4689 watchSlidesProgress: true, 4690 on: { 4691 progress: function () { 4692 let swiper = this; 4693 for (let i = 0; i < swiper.slides.length; i++) { 4694 let slideProgress = swiper.slides[i].progress, 4695 innerOffset = swiper.width * interleaveOffset, 4696 innerTranslate = slideProgress * innerOffset; 4697 4698 swiper.slides[i].querySelector(".slide-bgimg").style.transform = 4699 "translateX(" + innerTranslate + "px)"; 4700 } 4701 }, 4702 setTransition: function (speed) { 4703 let swiper = this; 4704 for (let i = 0; i < swiper.slides.length; i++) { 4705 swiper.slides[i].style.transition = speed + "ms"; 4706 swiper.slides[i].querySelector(".slide-bgimg").style.transition = 700 + "ms"; 4707 } 4708 }, 4709 slideChange: function () { 4710 4711 let activeProject = mainWrap.find('.showcase-project.active'), 4712 bgColor = activeProject.data('primary-color'), 4713 elementsColor = activeProject.data('secondary-color'); 4714 4715 colorAnim ? layoutChange(overlay, activeProject, $('.showcase-footer, .sc-wrapper')) : ''; 4716 4717 } 4718 4719 }, 4720 4721 }) 4722 4723 // Scroll 4724 4725 var tl = gsap.timeline({ 4726 scrollTrigger: { 4727 trigger: mainWrap, 4728 pin: true, 4729 scrub: 1, 4730 end: speed, 4731 markers: false, 4732 id: 'showcaseCarouselScroll', 4733 onUpdate: (self) => { 4734 4735 if (self.progress <= 0.0001) { 4736 projects.removeClass('active'); 4737 4738 mainWrap.find('.project_0').addClass('active'); 4739 4740 } else if (self.progress >= 0.0001) { 4741 4742 projects.each(function (i) { 4743
4744 let $this = $(this), 4745 ofLeft = $this.offset().left, 4746 windowWidth = $(window).outerWidth(), 4747 deadLine = (windowWidth / 2) - $this.outerWidth(), 4748 currentTransform = scWrap.css('transform'), 4749 gimmeThat = currentTransform.split(" ")[4].replace(/\,/g, ''); 4750 4751 if ((ofLeft < (windowWidth / 2)) && (ofLeft > deadLine)) { 4752 $this.addClass('active'); 4753 } else { 4754 $this.removeClass('active'); 4755 } 4756 4757 }); 4758 4759 } 4760 4761 let activeProject = mainWrap.find('.showcase-project.active'), 4762 slideGo = activeProject.data('index'); 4763 4764 curr.html(slideGo + 1) 4765 4766 imagesSlider.slideTo(slideGo, 700); 4767 4768 4769 }, 4770 4771 } 4772 }); 4773 4774 4775 let firstPos = ($(window).outerWidth() / 2) - ($('.project_0').outerWidth() / 2) + 75, 4776 fillLine = mainWrap.find('.sc-line-fill'), 4777 lastPos = (wrapperWidth * -1) + ($(window).outerWidth() / 2); 4778 4779 tl.to(fillLine, { 4780 width: '100%' 4781 }, 0) 4782 4783 tl.fromTo(scWrap, { 4784 x: firstPos 4785 }, { 4786 x: lastPos, 4787 ease: 'none', 4788 id: 'willUpdated' 4789 }, 0) 4790 4791 // Mobile 4792 4793 4794 matchMedia.add({ 4795 isMobile: "(max-width: 550px)" 4796 4797 }, (context) => { 4798 let { 4799 isMobile 4800 } = context.conditions; 4801 4802 tl.revert(); 4803 window.scrollTo(0, 0) 4804 4805 let wrapperWidth = scWrap.outerWidth(), 4806 firstPos = ($(window).outerWidth() / 2) - ($('.project_0').outerWidth() / 2) + 75, 4807 fillLine = mainWrap.find('.sc-line-fill'), 4808 lastPos = (wrapperWidth * -1) + ($(window).outerWidth() / 2), 4809 proga = 0; 4810 4811 projects.removeClass('active'); 4812 4813 mainWrap.find('.project_0').addClass('active'); 4814 4815 4816 let scDrag = Draggable.create(scWrap, { 4817 type: 'x', 4818 bounds: { 4819 minX: 0, 4820 maxX: lastPos 4821 }, 4822 lockAxis: true, 4823 trigger: '.showcase-carousel', 4824 dragResistance: 0.5, 4825 inertia: true, 4826 onThrowUpdate: () => { 4827 4828 let prog = Math.floor((scDrag[0].endX * 100) / lastPos) / 100; 4829 4830 4831 if (prog <= 0) { 4832 projects.removeClass('active'); 4833 4834 mainWrap.find('.project_0').addClass('active'); 4835 4836 } else if (prog >= 0) { 4837 4838 projects.each(function (i) { 4839 4840 let $this = $(this), 4841 ofLeft = $this.offset().left, 4842 windowWidth = $(window).outerWidth(), 4843 deadLine = (windowWidth / 2) - $this.outerWidth(), 4844 currentTransform = scWrap.css('transform'), 4845 gimmeThat = currentTransform.split(" ")[4].replace(/\,/g, ''); 4846 4847 4848 if ((ofLeft < (windowWidth / 2)) && (ofLeft > deadLine)) { 4849 $this.addClass('active'); 4850 } else { 4851 $this.removeClass('active'); 4852 } 4853 4854 }); 4855 4856 } 4857 4858 let activeProject = mainWrap.find('.showcase-project.active'),
4859 slideGo = activeProject.data('index'); 4860 4861 4862 imagesSlider.slideTo(slideGo, 700); 4863 }, 4864 zIndexBoost: false, 4865 onDrag: () => { 4866 4867 let prog = Math.floor((scDrag[0].endX * 100) / lastPos) / 100; 4868 4869 4870 if (prog <= 0.1) { 4871 projects.removeClass('active'); 4872 4873 mainWrap.find('.project_0').addClass('active'); 4874 4875 } else if (prog >= 0) { 4876 4877 projects.each(function (i) { 4878 4879 let $this = $(this), 4880 ofLeft = $this.offset().left, 4881 windowWidth = $(window).outerWidth(), 4882 deadLine = (windowWidth / 2) - $this.outerWidth(), 4883 currentTransform = scWrap.css('transform'), 4884 gimmeThat = currentTransform.split(" ")[4].replace(/\,/g, ''); 4885 4886 4887 if ((ofLeft < (windowWidth / 2)) && (ofLeft > deadLine)) { 4888 $this.addClass('active'); 4889 } else { 4890 $this.removeClass('active'); 4891 } 4892 4893 }); 4894 4895 } 4896 4897 let activeProject = mainWrap.find('.showcase-project.active'), 4898 slideGo = activeProject.data('index'); 4899 4900 curr.html(slideGo + 1) 4901 imagesSlider.slideTo(slideGo, 700); 4902 4903 } 4904 }); 4905 4906 4907 return () => { 4908 4909 let wrapperHeight = mainWrap.outerHeight(), 4910 speed = wrapperHeight + mainWrap.data('speed'), 4911 wrapperWidth = scWrap.outerWidth(), 4912 firstPos = ($(window).outerWidth() / 2) - ($('.project_0').outerWidth() / 2) + 75, 4913 fillLine = mainWrap.find('.sc-line-fill'), 4914 lastPos = (wrapperWidth * -1) + ($(window).outerWidth() / 2); 4915 tl.to(fillLine, { 4916 width: '100%' 4917 }, 0) 4918 4919 tl.fromTo(scWrap, { 4920 x: firstPos 4921 }, { 4922 x: lastPos, 4923 ease: 'none', 4924 }, 0); 4925 4926 ScrollTrigger.getById('showcaseCarouselScroll').vars.end = lastPos * -1 4927 4928 } 4929 }); 4930 4931 4932 4933 function scIntro() { 4934 4935 let intro = gsap.timeline({ 4936 once: true, 4937 scrollTrigger: { 4938 start: 'top-=1 top' 4939 } 4940 4941 }); 4942 4943 projects.each(function () { 4944 4945 let $this = $(this), 4946 title = $this.find('.project-title'); 4947 4948 var splitTitle = new SplitText(title, { 4949 type: 'lines, chars', 4950 linesClass: 'pt_line', 4951 charsClass: 'pt_char', 4952 display: 'inline-block', 4953 reduceWhiteSpace: false 4954 4955 }) 4956 4957 let char = $this.find('.pt_char'), 4958 line = $this.find('.pt_line'); 4959 4960 char.wrapInner('<span></span>'); 4961 4962 intro.from(line, { 4963 x: 200, 4964 duration: 1, 4965 ease: 'power2.out', 4966 }, .5) 4967 4968 intro.from(char.find('span'), { 4969 x: 120, 4970 stagger: 0.05, 4971 ease: 'power1.out', 4972 duration: 1, 4973 onComplete: () => { 4974 4975 splitTitle.revert(); 4976 } 4977 }, .5) 4978 4979 intro.fromTo(images, { 4980 clipPath: 'inset(100% 0% 0% 0%)', 4981 }, { 4982 clipPath: 'inset(0% 0% 0% 0%)', 4983 ease: 'expo.inOut', 4984 duration: 1 4985 4986 }, 0) 4987 4988 intro.fromTo(mainWrap.find('.sc-line').first(), { 4989 width: '0%' 4990 }, { 4991 width: '100%', 4992 ease: 'power2.inOut', 4993 duration: 1.6 4994 4995 }, .5) 4996 4997 intro.fromTo(mainWrap.find('.showcase-footer'), { 4998 y: 100 4999 }, { 5000 y: 0, 5001 duration: 1, 5002 ease: 'power2.out' 5003 }, .5) 5004 5005 }) 5006 5007 5008 5009 } 5010 5011 mainWrap.hasClass('animate-in') ? scIntro() : ''; 5012 5013 5014 5015 5016 }) 5017 5018 5019 } 5020 5021 function showcaseFullscreenCarousel() { 5022 5023 var showcaseFullscreenCarousel = $('.showcase-fullscreen-carousel'); 5024 5025 showcaseFullscreenCarousel.each(function (i) { 5026 i++ 5027 5028 let mainWrap = $(this), 5029 projectsWrap = mainWrap.find('.fc-slideshow-wrap'), 5030 projects = projectsWrap.find('.showcase-project'), 5031 imagesWrap = mainWrap.find('.fc-images-slider'),
5032 overlay = mainWrap.find('.sfc-overlay'), 5033 footer = mainWrap.find('.showcase-footer'), 5034 dragger = mainWrap.find('.dragging-class'), 5035 frac = mainWrap.find('.sfc-fraction'), 5036 curr = frac.find('.sfc-current'), 5037 tot = frac.find('.sfc-total'), 5038 cat = mainWrap.find('.sfc-categories'), 5039 headerChange, footerChange, colorAnim; 5040 5041 imagesWrap.addClass('transition--media') 5042 curr.html('01') 5043 tot.html(projects.length > 9 ? projects.length : '0' + projects.length) 5044 5045 5046 colorAnim = false; 5047 5048 if (mainWrap.hasClass('animate-colors')) { 5049 colorAnim = true 5050 } 5051 5052 projectsWrap.addClass('swiper-container').wrapInner('<div class="swiper-wrapper"></div>') 5053 5054 5055 projects.each(function (i) { 5056 5057 let $this = $(this), 5058 title = $this.find('.project-title'), 5059 image = $this.find('.project-image'); 5060 5061 5062 colorAnim ? projectColorSettings($this) : ''; 5063 5064 $this.attr('data-index', i) 5065 title.attr('data-hover', title.find('*').text()) 5066 $this.addClass('project_' + i) 5067 5068 $this.find('a').addClass('sc-link'); 5069 5070 image.addClass('swiper-slide').wrapInner('<div class="fs-parallax-wrap"><div class="slide-bgimg"></div></div>').appendTo(imagesWrap.find('.swiper-wrapper')); 5071 5072 $this.addClass('swiper-slide'); 5073 5074 }) 5075 5076 5077 colorAnim ? layoutChange(overlay, $('.project_0'), projectsWrap) : ''; 5078 5079 var titlesSlider = new Swiper('.fc-slideshow-wrap', { 5080 slidesPerView: 'auto', 5081 centeredSlides: true, 5082 speed: 1500, 5083 noSwiping: true, 5084 slideToClickedSlide: true, 5085 allowTouchMove: false, 5086 mousewheel: { 5087 invert: false, 5088 eventsTarget: '.dragging-class' 5089 5090 } 5091 }), 5092 interleaveOffset = 0.5, 5093 imagesSlider = new Swiper('.fc-images-slider', { 5094 slidesPerView: 1, 5095 speed: 1500, 5096 parallax: true, 5097 noSwiping: true, 5098 watchSlideProgress: true, 5099 on: { 5100 slideChange: function () { 5101 5102 projects.removeClass('active'); 5103 5104 gsap.set(dragger, { 5105 x: (this.snapGrid[this.activeIndex - 1] * -1) / projLength 5106 }) 5107 5108 if (colorAnim == true) { 5109 5110 let act = projectsWrap.find('.project_' + this.activeIndex); 5111 layoutChange(overlay, act, projectsWrap); 5112 5113 let category = act.find('.project-category').text(); 5114 5115 gsap.to(cat, { 5116 duration: 1.5, 5117 text: { 5118 value: category, 5119 5120 }, 5121 ease: "expo.out" 5122 }); 5123 5124 5125 } 5126 5127 }, 5128 slideChangeTransitionEnd: function () { 5129 5130 let index = $('.showcase-project.swiper-slide-active').data('index') + 1; 5131 5132 5133 curr.html(index > 9 ? index : '0' + index) 5134 5135 }, 5136 progress: function () { 5137 let swiper = this; 5138 for (let i = 0; i < swiper.slides.length; i++) { 5139 let slideProgress = swiper.slides[i].progress, 5140 innerOffset = swiper.width * interleaveOffset, 5141 innerTranslate = slideProgress * innerOffset; 5142 5143 swiper.slides[i].querySelector(".slide-bgimg").style.transform =
5144 "translateX(" + innerTranslate + "px)"; 5145 } 5146 }, 5147 setTransition: function (speed) { 5148 let swiper = this; 5149 for (let i = 0; i < swiper.slides.length; i++) { 5150 swiper.slides[i].style.transition = speed + "ms"; 5151 swiper.slides[i].querySelector(".slide-bgimg").style.transition = 1500 + "ms"; 5152 } 5153 }, 5154 } 5155 5156 }); 5157 5158 function checkActiveProject() { 5159 5160 projects.each(function () { 5161 5162 let $this = $(this), 5163 projWidth = Math.PI * $this.outerWidth(), 5164 projLeft = Math.PI * $this.offset().left, 5165 activeLine = (Math.PI * $(window).outerWidth()) / 2, 5166 deadLine = activeLine - (projWidth * 0.5), 5167 index = $this.data('index'), 5168 bgColor = $this.data('background-color'), 5169 elementsColor = $this.data('elements-color'); 5170 5171 if ((projLeft < activeLine) && (projLeft > deadLine)) { 5172 5173 $this.addClass('active'); 5174 5175 imagesSlider.slideTo(index, 1500); 5176 5177 5178 5179 } else { 5180 5181 $this.removeClass('active') 5182 } 5183 }) 5184 5185 } 5186 5187 checkActiveProject(); 5188 5189 let wrapWidth = mainWrap.find('.swiper-wrapper').outerWidth(), 5190 snapGrid = titlesSlider.snapGrid, 5191 draggerEnd = -1 * snapGrid[snapGrid.length - 1], 5192 firstTranslate = titlesSlider.getTranslate(), 5193 projLength = projects.length; 5194 5195 dragger.css('width', wrapWidth) 5196 5197 var titlesDrag = Draggable.create(dragger, { 5198 type: 'x', 5199 bounds: { 5200 minX: 0, 5201 // minX: titlesSlider.getTranslate(), 5202 maxX: draggerEnd / projLength 5203 }, 5204 lockAxis: true, 5205 inertia: false, 5206 zIndexBoost: false, 5207 dragResistence: 1, 5208 onPress: self => { 5209 5210 titlesSlider.disable(); 5211 mainWrap.addClass('dragging'); 5212 $('.swiper-slide-active').addClass('active'); 5213 gsap.set(projectsWrap.find('.swiper-wrapper'), { 5214 clearProps: 'transition-duration' 5215 }); 5216 5217 if (colorAnim == true) { 5218 let project = projectsWrap.find('.showcase-project.swiper-slide-active'); 5219 layoutChange(overlay, project, projectsWrap) 5220 } 5221 5222 gsap.to([siteHeader, mainWrap.find('.showcase-footer, .sfc-fraction')], { 5223 opacity: 0, 5224 duration: .3 5225 }) 5226 5227 }, 5228 onDrag: self => { 5229 let currentTransform = dragger.css('transform'), 5230 gimmeThat = currentTransform.split(" ")[4].replace(/\,/g, ''), 5231 myVal = gimmeThat * projLength; 5232 5233 5234 gsap.to(projectsWrap.find('.swiper-wrapper'), { 5235 x: myVal, 5236 5237 }) 5238 5239 if (gimmeThat == 0) { 5240 titlesDrag[0].applyBounds({ 5241 minX: firstTranslate, 5242 maxX: draggerEnd / projLength 5243 }) 5244 } 5245 if (gimmeThat > 0) { 5246 titlesDrag[0].applyBounds({ 5247 minX: firstTranslate / projLength, 5248 maxX: draggerEnd / projLength 5249 }) 5250 } 5251 gsap.ticker.add(checkActiveProject); 5252 5253 if (colorAnim == true) { 5254 let project = projectsWrap.find('.showcase-project.active'); 5255 layoutChange(overlay, project, projectsWrap) 5256 } 5257 5258 5259 5260 }, 5261 onRelease: self => { 5262 5263 gsap.ticker.remove(checkActiveProject); 5264 mainWrap.removeClass('dragging'); 5265 5266 let activeProj = projectsWrap.find('.showcase-project.active').data('index'); 5267 5268 gsap.to([siteHeader, mainWrap.find('.showcase-footer, .sfc-fraction')], { 5269 opacity: 1, 5270 duration: .5, 5271 delay: .3 5272 }) 5273 5274 gsap.to(projectsWrap.find('.swiper-wrapper'), { 5275 x: snapGrid[activeProj] * -1, 5276 5277 onComplete: () => { 5278 projects.removeClass('active') 5279 titlesSlider.enable(); 5280 titlesSlider.slideTo(activeProj, 1500);
5281 titlesSlider.update(); 5282 5283 } 5284 }) 5285 5286 5287 5288 } 5289 5290 }); 5291 5292 titlesSlider.controller.control = imagesSlider; 5293 5294 }) 5295 5296 } 5297 5298 function showcaseInfiniteGrid() { 5299 5300 let fullscreenGrid = $('.showcase-infinite-grid'); 5301 5302 fullscreenGrid.each(function (i) { 5303 i++ 5304 5305 var mainWrap = $(this), 5306 id = 'grid_' + i, 5307 grid = mainWrap.find('.sfg-grid-wrapper'), 5308 cols = 2, 5309 projectImages = mainWrap.find('.project-image'), 5310 titlesWrap = mainWrap.find('.sfg-titles'), 5311 overlay = mainWrap.find('.sfg-overlay'), 5312 colorAnim, horizontal; 5313 5314 if (!grid.find('.showcase-project').length % 2 === 0) { 5315 grid.append('<div class="showcase-project"></div>') 5316 } 5317 5318 if (mainWrap.hasClass('col-3')) { 5319 5320 cols = 3; 5321 } 5322 5323 if (mainWrap.hasClass('horizontal')) { 5324 5325 horizontal = true; 5326 5327 grid.append('<div class="sfg_grid_row sfg_grid_row_top"></div>') 5328 grid.append('<div class="sfg_grid_row sfg_grid_row_bottom"></div>') 5329 5330 } 5331 5332 colorAnim = true; 5333 5334 mainWrap.attr('id', id); 5335 5336 let parent = document.getElementById(id); 5337 5338 const repeatItems = (parentEl, total = 0) => { 5339 const items = [...parentEl.children]; 5340 for (let i = 0; i <= total - 1; ++i) { 5341 var cln = items[i].cloneNode(true); 5342 parentEl.appendChild(cln); 5343 } 5344 }; 5345 repeatItems(parent.querySelector('.sfg-grid-wrapper'), cols * 2); 5346 5347 let projects = grid.find('.showcase-project'); 5348 5349 projects.each(function (i) { 5350 i++ 5351 let $this = $(this), 5352 image = $this.find('.project-image'), 5353 img = $this.find('img'); 5354 5355 5356 if (horizontal && (i % 2 === 0)) { 5357 5358 $this.appendTo('.sfg_grid_row_bottom') 5359 5360 } else { 5361 $this.appendTo('.sfg_grid_row_top') 5362 } 5363 5364 5365 $this.attr('data-index', i) 5366 5367 for (let i = 0; i <= 5; ++i) { 5368 img.clone().appendTo($this.find('.project-image')) 5369 } 5370 5371 img = $this.find('img'); 5372 5373 img.each(function (i) { 5374 5375 i++ 5376 gsap.set($(this), { 5377 opacity: '0.' + i 5378 }) 5379 }) 5380 5381 $this.find('a').on('mouseenter', () => { 5382 grid.addClass('hovered') 5383 $this.addClass('current') 5384 }) 5385 5386 $this.find('a').on('mouseleave', () => { 5387 grid.removeClass('hovered'); 5388 $this.removeClass('current') 5389 }) 5390 5391 5392 5393 }) 5394 5395 5396 5397 let direction = 'vertical'; 5398 5399 if (horizontal) { 5400 direction = 'horizontal' 5401 } 5402 5403 const lenis = new Lenis({ 5404 wrapper: parent.querySelector('.sfg-infinite-wrap'), 5405 content: parent.querySelector('.sfg-grid-wrapper'), 5406 smooth: true, 5407 infinite: true, 5408 smoothTouch: true, 5409 lerp: 0.001, 5410 direction: direction 5411 5412 }); 5413 5414 function raf(time) { 5415 lenis.raf(time); 5416 requestAnimationFrame(raf); 5417 } 5418 5419 requestAnimationFrame(raf); 5420 5421 lenis.on('scroll', (e) => { 5422 var bgMarquee = gsap.getById('nayla_marquee'), 5423 velocity = e.velocity / 15 5424 5425 if ((e.velocity < 5) && (e.velocity > -5)) { 5426 5427 mainWrap.removeClass('lenis-scrolling') 5428 5429 } else { 5430 mainWrap.addClass('lenis-scrolling') 5431 } 5432 5433 projects.each(function () { 5434
5435 let $this = $(this), 5436 img = $this.find('img'); 5437 5438 img.each(function (i) { 5439 i++ 5440 let yVal = (e.velocity) / 1.5 * i; 5441 5442 if (i > 1) { 5443 5444 if (horizontal) { 5445 gsap.to($(this), { 5446 x: -1 * yVal, 5447 ease: 'power3.out', 5448 5449 }) 5450 5451 } else { 5452 gsap.to($(this), { 5453 y: -1 * yVal, 5454 ease: 'power3.out', 5455 5456 }) 5457 } 5458 5459 5460 5461 } 5462 5463 5464 }) 5465 5466 }) 5467 }) 5468 5469 }) 5470 5471 } 5472 5473 5474 function showcaseInteractiveGrid() { 5475 5476 let grid = $('.showcase-interactive-grid'); 5477 5478 grid.each(function () { 5479 5480 let grid = $(this), 5481 wrapper = grid.children('.projects-wrapper'), 5482 projects = wrapper.find('.showcase-project'), 5483 animation = grid.data('animation'), 5484 positions = []; 5485 5486 projects.each(function (i) { 5487 5488 let $this = $(this), 5489 left = $this.offset().left + ($this.offset().left > $(window).outerWidth() / 2 ? 75 : 0), 5490 top = $this.offset().top > $(window).outerHeight() / 2 ? $this.offset().top + ($(window).outerHeight() / 4) : $this.offset().top, 5491 title = $this.find('.project-title'), 5492 details = $this.find('.project-details'), 5493 singlePos = []; 5494 5495 5496 5497 animation ? $this.addClass('has-anim ' + animation) : ''; 5498 animation ? $this.attr('data-delay', (i / 15)) : ''; 5499 animation ? $this.attr('data-duration', 1.5) : ''; 5500 5501 $this.attr('data-left', left) 5502 5503 left > $(window).outerWidth() / 2 ? $this.addClass('project-right') : $this.addClass('project-left'); 5504 5505 $this.attr('data-index', i) 5506 5507 singlePos.push(top, left) 5508 positions.push(singlePos); 5509 5510 new SplitText(title, { 5511 type: 'chars, lines', 5512 linesClass: 'tit_line', 5513 charsClass: 'tit_char', 5514 }) 5515 5516 }) 5517 5518 5519 function zoomIn(active) { 5520 5521 let state = Flip.getState(projects, { 5522 props: 'opacity, filter' 5523 }), 5524 tl = gsap.timeline(), 5525 left = positions[active.data('index')][1] - 25, 5526 top = positions[active.data('index')][0] - 25; 5527 5528 projects.removeClass('active'); 5529 active.addClass('active') 5530 5531 if (!mobileQuery.matches) { 5532 gsap.set(wrapper, { 5533 x: -1 * left, 5534 y: -1 * top 5535 }) 5536 5537 } 5538 5539 grid.addClass('scatter-active') 5540 5541 wrapper.addClass('intro-grid--scatter') 5542 5543 var flippo = Flip.from(state, { 5544 duration: 1, 5545 ease: 'expo.inOut', 5546 absolute: true, 5547 5548 simple: true, 5549 prune: true, 5550 }); 5551 5552 5553 tl.add(flippo); 5554 5555 5556 tl.from(active.find('.tit_char'), { 5557 yPercent: 100, 5558 stagger: 0.025, 5559 duration: 1, 5560 ease: 'expo.out', 5561 5562 }, 0.5) 5563 5564 tl.from(active.find('.project-details'), { 5565 y: 100, 5566 opacity: 0, 5567 duration: 1.5, 5568 ease: 'expo.out', 5569 }, 1) 5570 5571 5572 } 5573 5574 function zoomOut() { 5575 5576 let state = Flip.getState(projects, { 5577 props: 'opacity, filter' 5578 }), 5579 tl = gsap.timeline(); 5580 5581 projects.removeClass('active'); 5582 5583 5584 5585 gsap.set(wrapper, { 5586 x: 0, 5587 y: 0 5588 }) 5589 5590 5591 5592 grid.removeClass('scatter-active') 5593 5594 wrapper.removeClass('intro-grid--scatter') 5595 5596 var flippo = Flip.from(state, { 5597 duration: 1, 5598 ease: 'expo.inOut', 5599 absolute: true, 5600 simple: true, 5601 prune: true, 5602 }); 5603 5604 5605 tl.add(flippo); 5606 5607 } 5608 5609 5610 5611 projects.on('click', function () { 5612
5613 let $this = $(this); 5614 5615 zoomIn($this); 5616 5617 }) 5618 5619 $('.scatter-close').on('click', () => { 5620 5621 zoomOut() 5622 5623 5624 }) 5625 5626 if (grid.hasClass('animate-in')) { 5627 5628 grid.addClass('will-animated') 5629 wrapper.addClass('intro-grid--scatter') 5630 5631 gsap.set(wrapper, { 5632 x: -500, 5633 y: -500 5634 }) 5635 5636 5637 5638 ScrollTrigger.create({ 5639 trigger: 'body', 5640 start: 'top-=1 top', 5641 onEnter: () => { 5642 zoomOut() 5643 5644 grid.removeClass('will-animated') 5645 } 5646 5647 5648 }) 5649 5650 5651 5652 5653 5654 5655 } 5656 5657 5658 5659 }) 5660 5661 5662 5663 5664 } 5665 5666 function showcaseCards() { 5667 5668 let cards = $('.showcase-cards'); 5669 5670 cards.each(function () { 5671 5672 let cards = $(this), 5673 overlay = cards.find('.sc-overlay'), 5674 wrapper = cards.children('.ssv-projects-wrap'), 5675 projects = wrapper.find('.showcase-project'), 5676 colorAnim; 5677 5678 cards.hasClass('animate-colors') ? colorAnim = true : ''; 5679 5680 5681 projects.first().addClass('active') 5682 5683 projects.each(function (i) { 5684 5685 let $this = $(this), 5686 image = $this.find('.project-image'); 5687 5688 $this.attr('data-index', i); 5689 $this.addClass('project_' + i); 5690 5691 gsap.set($this, { 5692 zIndex: 100 - i, 5693 y: -i * 30, 5694 z: -i * 100, 5695 }) 5696 5697 gsap.set(image, { 5698 opacity: 1 - (i / 5) 5699 }) 5700 5701 colorAnim ? projectColorSettings($this) : ''; 5702 5703 5704 }) 5705 5706 5707 layoutChange(overlay, $('.project_0'), cards) 5708 5709 5710 var wheeler = Hamster(document.querySelector('.showcase-cards')), 5711 direction, proj, isAnimating; 5712 5713 isAnimating = false; 5714 5715 wheeler.wheel(function (event, delta, deltaX, deltaY) { 5716 5717 direction = deltaY; 5718 5719 if ((direction == 1) && (!isAnimating)) { 5720 5721 proj = $('.active'); 5722 5723 layoutChange('.sc-overlay', proj.next(), cards) 5724 5725 let nextProjects = proj.nextAll(), 5726 tl = gsap.timeline({ 5727 onUpdate: () => { 5728 isAnimating = true 5729 }, 5730 onComplete: () => { 5731 setTimeout(function () { 5732 isAnimating = false 5733 }, 500) 5734 5735 } 5736 }); 5737 5738 if (proj.hasClass('active')) { 5739 5740 tl.to(proj, { 5741 yPercent: 100, 5742 duration: 1, 5743 onComplete: () => { 5744 proj.removeClass('active'); 5745 proj.next().addClass('active') 5746 } 5747 }, 0) 5748 5749 nextProjects.each(function (i) { 5750 5751 let nexto = $(this), 5752 img = nexto.find('.project-image'); 5753 5754 tl.to(nexto, { 5755 y: -i * 30, 5756 z: -i * 100, 5757 duration: 1, 5758 5759 }, 0) 5760 5761 tl.to(img, { 5762 duration: 1, 5763 opacity: 1 - (i / 5) 5764 }, 0) 5765 5766 5767 5768 }) 5769 5770 } 5771 5772 } else if ((direction == -1) && (!isAnimating)) { 5773 5774 proj = $('.active').prev(); 5775 5776 layoutChange('.sc-overlay', proj, cards) 5777 5778 5779 let prevProjects = proj.nextAll(); 5780 5781 if (proj) { 5782 5783 gsap.to(proj, { 5784 yPercent: 0, 5785 duration: 1, 5786 onComplete: () => { 5787 5788 proj.addClass('active'); 5789 proj.next().removeClass('active') 5790 } 5791 }) 5792 5793 prevProjects.each(function (i) { 5794 5795 i++ 5796 let nexto = $(this), 5797 img = nexto.find('.project-image'); 5798 5799 gsap.to(nexto, { 5800 y: -i * 30,
5801 z: -i * 100, 5802 duration: 1, 5803 5804 }) 5805 5806 gsap.to(img, { 5807 opacity: 1 - (i / 5), 5808 duration: 1, 5809 }) 5810 5811 5812 }) 5813 5814 5815 5816 5817 } 5818 5819 } 5820 5821 5822 }); 5823 5824 5825 }) 5826 5827 } 5828 5829 5830 function horizontalList() { 5831 5832 $('.showcase-horizontal-list').each(function () { 5833 5834 let mainWrap = $(this), 5835 titlesWrap = mainWrap.find('.shl-wrapper'), 5836 projects = titlesWrap.find('.showcase-project'), 5837 imagesWrap = mainWrap.find('.shl-images'), 5838 projLength = projects.length, 5839 cat = mainWrap.find('.shl-cat'), 5840 fract = mainWrap.find('.shl-fraction'), 5841 curr = fract.children('.shl-curr'), 5842 tot = fract.children('.shl-tot'); 5843 5844 if (projLength < 10) { 5845 tot.html('0' + projLength) 5846 5847 } else { 5848 tot.html(projLength) 5849 } 5850 5851 projects.each(function (i) { 5852 i++ 5853 5854 let $this = $(this), 5855 image = $this.find(('.project-image')), 5856 link = $this.find('a'); 5857 5858 $this.addClass('project_' + i); 5859 $this.attr('data-index', i); 5860 image.wrapInner('<div class="image-wrap"></div>').addClass('project_image_' + i).appendTo(imagesWrap); 5861 5862 link.on('mouseenter', function () { 5863 5864 let findImg = $('.project_image_' + i).find('.image-wrap'); 5865 5866 gsap.to(findImg, { 5867 filter: 'grayscale(0%)', 5868 duration: .3, 5869 opacity: 1 5870 }) 5871 5872 }) 5873 5874 link.on('mouseleave', function () { 5875 5876 gsap.to(mainWrap.find('.image-wrap'), { 5877 filter: 'grayscale(100%)', 5878 duration: .3, 5879 opacity: 0.5 5880 }) 5881 }) 5882 5883 }) 5884 5885 5886 let x = 0, 5887 snapProg = []; 5888 5889 for (x = 0; x <= projLength; x++) { 5890 snapProg.push(x / (projLength - 1)) 5891 } 5892 5893 imagesWrap.find('.project-image').first().addClass('active') 5894 5895 gsap.to(titlesWrap, { 5896 xPercent: -100, 5897 ease: 'none', 5898 scrollTrigger: { 5899 trigger: mainWrap, 5900 scrub: 1, 5901 // snap: { 5902 // snapTo: snapProg, 5903 // directional: false 5904 // }, 5905 end: 'bottom+=5000 top', 5906 pin: true, 5907 onUpdate: self => { 5908 5909 let findProj = '.project_' + Math.ceil(self.progress * projLength), 5910 findImage = '.project_image_' + Math.ceil(self.progress * projLength), 5911 activeIndex = $(findProj).data('index'), 5912 snapProg = self.progress * projLength; 5913 5914 if (activeIndex < 10) { 5915 curr.html('0' + activeIndex) 5916 5917 } else { 5918 curr.html(activeIndex) 5919 } 5920 5921 cat.text($(findProj).find('.project-category').text()) 5922 5923 5924 5925 5926 imagesWrap.find('.project-image').removeClass('active'); 5927 projects.removeClass('active'); 5928 $(findProj).addClass('active'); 5929 $(findImage).addClass('active'); 5930 5931 5932 $(findProj).prevAll().each(function (i) { 5933 5934 let $this = $(this); 5935 5936 gsap.to($this, { 5937 opacity: 0.1 - (i / 20), 5938 duration: .2 5939 }) 5940 5941 }) 5942 5943 $(findProj).nextAll().each(function (i) { 5944
5945 let $this = $(this); 5946 5947 gsap.to($this, { 5948 opacity: 0.1 - (i / 20), 5949 duration: .2 5950 5951 }) 5952 5953 }) 5954 5955 } 5956 } 5957 }) 5958 5959 5960 5961 5962 5963 5964 }) 5965 5966 5967 5968 5969 5970 5971 } 5972 5973 5974 5975 /////////////////////////////// 5976 // Page Build Elements // 5977 /////////////////////////////// 5978 5979 function postsGrid() { 5980 5981 var grid = $('.nayla-posts-grid'); 5982 5983 5984 grid.each(function () { 5985 5986 5987 let grid = $(this), 5988 filters = grid.find('.grid--filters .filters-list > li'), 5989 posts = grid.find('.grid--post--item'), 5990 switcher = grid.find('.grid--switcher'); 5991 5992 5993 filters.each(function () { 5994 5995 let $this = $(this), 5996 cat = $this.data('category'); 5997 5998 $this.on('click', function () { 5999 6000 filters.removeClass('active') 6001 $this.addClass('active') 6002 6003 6004 if (cat === 'all') { 6005 6006 6007 let postsState = Flip.getState(posts); 6008 6009 posts.show(); 6010 6011 Flip.from(postsState, { 6012 duration: 1, 6013 scale: false, 6014 ease: "expo.out", 6015 stagger: 0, 6016 absolute: true, 6017 absoluteOnLeave: true, 6018 onEnter: elements => gsap.fromTo(elements, { 6019 opacity: 0, 6020 scale: 0 6021 }, { 6022 opacity: 1, 6023 scale: 1, 6024 6025 }), 6026 onLeave: elements => gsap.to(elements, { 6027 opacity: 0, 6028 scale: 0, 6029 6030 }) 6031 }); 6032 6033 6034 } else { 6035 6036 6037 let findCat = '.cat_' + cat, 6038 postsState = Flip.getState(posts); 6039 6040 posts.show(); 6041 posts.hide(); 6042 $(findCat).show(); 6043 6044 Flip.from(postsState, { 6045 duration: 1, 6046 scale: false, 6047 ease: "expo.out", 6048 stagger: 0, 6049 absolute: true, 6050 absoluteOnLeave: true, 6051 onEnter: elements => gsap.fromTo(elements, { 6052 opacity: 0, 6053 scale: grid.hasClass('grid-list') ? 1 : 0, 6054 }, { 6055 opacity: 1, 6056 scale: 1, 6057 6058 }), 6059 onLeave: elements => gsap.to(elements, { 6060 opacity: 0, 6061 scale: grid.hasClass('grid-list') ? 1 : 0, 6062 6063 }) 6064 }); 6065 6066 } 6067 6068 }) 6069 6070 6071 6072 }) 6073 6074 6075 let switchCol = switcher.find('.switch-col'), 6076 switchList = switcher.find('.switch-list'); 6077 6078 6079 switchCol.on('click', function () { 6080 6081 if (grid.hasClass('grid-list')) { 6082 6083 gsap.to(grid, { 6084 opacity: 0, 6085 onComplete: () => { 6086 grid.removeClass('grid-list'); 6087 grid.addClass('grid-col'); 6088 6089 gsap.to(grid, { 6090 opacity: 1 6091 }) 6092 } 6093 6094 }) 6095 6096 6097 } 6098 6099 6100 }) 6101 6102 switchList.on('click', function () { 6103 6104 if (grid.hasClass('grid-col')) { 6105 6106 gsap.to(grid, { 6107 opacity: 0, 6108 onComplete: () => { 6109 grid.removeClass('grid-col'); 6110 grid.addClass('grid-list'); 6111 6112 gsap.to(grid, { 6113 opacity: 1 6114 }) 6115 } 6116 6117 }) 6118 6119 6120 } 6121 6122 6123 }) 6124 6125 }) 6126 6127 6128 } 6129
6130 postsGrid() 6131 6132 function naylaCartButton() { 6133 6134 var button = $('.nayla-cart-button'); 6135 6136 button.wrapInner('<span></span>') 6137 6138 6139 6140 } 6141 6142 function naylaProductRatings() { 6143 6144 var rating = $('.product-rating'); 6145 6146 rating.each(function () { 6147 6148 let $this = $(this), 6149 stars = $this.find('.product-stars'), 6150 perc = $this.data('rating'), 6151 i = 1; 6152 6153 for (i = 1; i <= 5; i++) { 6154 6155 stars.append('<span class="material-icons">star</span>') 6156 } 6157 6158 stars.clone().addClass('stars-fill').appendTo($this); 6159 6160 gsap.set($this.find('.stars-fill'), { 6161 width: perc + '%' 6162 }) 6163 6164 6165 }) 6166 } 6167 naylaProductRatings() 6168 6169 function naylaAddTocartButton() { 6170 6171 var button = $('.product-add-to-cart'); 6172 6173 button.each(function () { 6174 6175 let dcr = $('.count--decrease'), 6176 inc = $('.count--increase'), 6177 input = $('.current-quantity'), 6178 currVal = input.attr('value'), 6179 x = 1; 6180 6181 dcr.on('click', () => { 6182 6183 x-- 6184 6185 x < 1 ? x = 1 : ''; 6186 6187 6188 input.attr('value', x) 6189 6190 }) 6191 6192 inc.on('click', () => { 6193 x++ 6194 6195 input.attr('value', x); 6196 6197 6198 }) 6199 6200 6201 }) 6202 6203 6204 } 6205 6206 naylaAddTocartButton() 6207 6208 6209 function naylaLightboxGallery(gallery, items) { 6210 6211 let $items = $(items), 6212 $gallery = $(gallery), 6213 itemsLenght = $items.length, 6214 thumbsDragger, thumbsWheeler; 6215 6216 const $lightbox = $('<div>', { 6217 class: 'nayla-lightbox-hold', 6218 html: ` 6219 <div class="lightbox-overlay"></div> 6220 <div class="lightbox-gal"></div> 6221 <span class="active-hold"></span> 6222 <div class="lightbox-close">CLOSE</div> 6223 <div class="lightbox-fraction"><div class="lf-curr"></div><div class="lf-tot">${itemsLenght}</div></div> 6224 ` 6225 }), 6226 lightboxReset = $lightbox.html(), 6227 itemsState = Flip.getState($items, { 6228 props: 'padding , opacity, filter' 6229 }); 6230 6231 6232 6233 6234 function createNav(range, length, index) { 6235 6236 let wrap = $('.lightbox-convert'), 6237 x = 0, 6238 result = 0, 6239 prevVal = []; 6240 6241 6242 for (x = 0; x < index; x++) { 6243 prevVal.push($('.thumb_' + x).outerWidth()) 6244 } 6245 6246 prevVal.length != 0 ? result = prevVal.reduce((a, b) => a + b, 0) : ''; 6247 6248 let curr = $('.thumb_' + index).outerWidth() / 2, 6249 currX = -result - curr; 6250 6251 gsap.to(wrap, { 6252 x: currX, 6253 duration: 2, 6254 ease: 'expo.inOut', 6255 }) 6256 6257 const snaps = $items.map(function () { 6258 return -($(this).position().left + ($(this).outerWidth() / 2)); 6259 }).get(); 6260 6261 function detectActive() { 6262 6263 $items.each(function () { 6264 6265 let $this = $(this), 6266 entrance = $this.offset().left, 6267 deadLine = $this.offset().left + $this.outerWidth(), 6268 center = $(window).outerWidth() / 2; 6269 6270 entrance < center && center < deadLine ? $this.addClass('active') : $this.removeClass('active'); 6271 6272 let active = $('.grid--item.active').data('index'); 6273 6274 $('.lightbox-gal img').removeClass('active') 6275 $('.lb--img--' + active).addClass('active') 6276 6277 }) 6278 6279 gsap.to('.active-hold', { 6280 width: $('.lightbox-thumb.active').outerWidth() - 13, 6281 duration: .35 6282 }) 6283 6284 // Update Fraction 6285 $lightbox.find('.lf-curr').html($('.lightbox-thumb.active').data('index') + 1) 6286 6287 } 6288 6289 6290 6291 // NavbyDrag 6292 thumbsDragger = Draggable.create(wrap, { 6293 type: 'x', 6294 bounds: { 6295 minX: -$items.first().outerWidth() / 2,
6296 maxX: -range + ($items.last().outerWidth() / 2) 6297 }, 6298 lockAxis: true, 6299 inertia: true, 6300 zIndexBoost: false, 6301 id: 'lightboxThumbs', 6302 snap: snaps, 6303 onDrag: () => detectActive(), 6304 onPress: () => cursorDrag('press'), 6305 onRelease: () => cursorDrag('hover'), 6306 onThrowUpdate: () => detectActive() 6307 }); 6308 thumbsDragger[0].disable(); 6309 6310 6311 wrap.hover( 6312 () => { 6313 thumbsDragger[0].enabled() ? cursorDrag('hover') : ''; 6314 }, 6315 () => { 6316 thumbsDragger[0].enabled() ? cursorDrag('leave') : ''; 6317 } 6318 ); 6319 6320 6321 //NavbyWheel 6322 thumbsWheeler = Hamster(document.querySelector('.nayla-lightbox-hold')); 6323 var xVal = currX; 6324 6325 thumbsWheeler.wheel(function (event, delta, deltaX, deltaY) { 6326 6327 detectActive(); 6328 thumbsDragger[0].update(); 6329 6330 xVal += event.deltaY * 1.1; 6331 xVal = Math.min(Math.max(-range + ($items.last().outerWidth() / 2), xVal), -$items.first().outerWidth() / 2); 6332 6333 gsap.to(wrap, { 6334 x: xVal, 6335 onComplete: () => { 6336 gsap.to(wrap, { 6337 x: gsap.utils.snap(snaps, xVal), 6338 }) 6339 } 6340 }) 6341 }); 6342 6343 //NavbyClick 6344 // $items.on('click', function () { 6345 // 6346 // if ($gallery.hasClass('lightbox-active')) { 6347 // 6348 // console.log('navinlgihtbox') 6349 // 6350 // gsap.to(wrap, { 6351 // x: -($(this).position().left + ($(this).outerWidth() / 2)), 6352 // duration: 1, 6353 // ease: 'expo.inOut', 6354 // onUpdate: () => { 6355 // detectActive(); 6356 // thumbsDragger[0].update(); 6357 // } 6358 // }) 6359 // 6360 // } 6361 // 6362 // }) 6363 6364 6365 } 6366 6367 $(items).each(function (i) { 6368 6369 let $this = $(this), 6370 img = $this.find('img'), 6371 cl = $(items).find('img').clone(); 6372 6373 $this.attr('data-index', i); 6374 $this.addClass('thumb_' + i); 6375 6376 6377 $this.on('click', () => { 6378 6379 if (!$gallery.hasClass('lightbox-active')) { 6380 $this.addClass('active'); 6381 //Resets 6382 disableScroll(); 6383 gsap.killTweensOf($items); 6384 $('body').append($lightbox); 6385 $gallery.addClass('lightbox-active'); 6386 6387 setTimeout(function () { 6388 cl.appendTo('.lightbox-gal'); 6389 6390 $('.lightbox-gal').find('img').each(function (i) { 6391 $(this).addClass('lb--img--' + i); 6392 }); 6393 $lightbox.find('.lf-curr').html(i + 1) 6394 6395 }) 6396 6397 let itemIndex = $(this).data('index'); 6398 6399 $gallery.addClass('lightbox-convert'); 6400 $items.addClass('lightbox-thumb'); 6401 6402 const result = $items.toArray().reduce((a, item) => a + Math.floor($(item).outerWidth()), 10); 6403 6404 gsap.to('.active-hold', { 6405 width: $this.outerWidth() - 9, 6406 duration: 1 6407 }) 6408 6409 createNav(result, 18, itemIndex) 6410 6411 6412 lightboxAnim('in') 6413 6414 Flip.from(itemsState, { 6415 duration: 2, 6416 ease: 'expo.inOut', 6417 absolute: true, 6418 onStart: () => { 6419 setTimeout(function () { 6420 let activeImage = $('.lb--img--' + $this.data('index')); 6421 activeImage.addClass('active'); 6422 6423 gsap.fromTo(activeImage, { 6424 clipPath: 'inset(100% 0% 0% 0%)', 6425 scale: .5 6426 }, { 6427 clipPath: 'inset(0% 0% 0% 0%)', 6428 delay: 1.6, 6429 scale: .5, 6430 duration: 1.5, 6431 ease: 'expo.out', 6432 onComplete: () => { 6433 gsap.to(activeImage, { 6434 scale: 1, 6435 duration: 1, 6436 ease: 'expo.inOut', 6437 onComplete: () => { 6438 gsap.set(body, { 6439 clearProps: 'cursor' 6440 }) 6441 } 6442 }) 6443 } 6444 6445 }) 6446 6447 }) 6448 6449 }, 6450 onComplete: () => { 6451 $lightbox.find('.lightbox-close').on('click', () => closeLightBox()) 6452 } 6453 6454 }); 6455 6456 6457 } 6458 6459 6460 }) 6461 6462 6463 }) 6464 6465 6466 function lightboxAnim(direction) { 6467 6468 6469 let tl = gsap.timeline({ 6470 onStart: () => { 6471 $('body').css('cursor', 'wait') 6472 }, 6473 }), 6474 lightbox = $lightbox,
6475 overlay = lightbox.find('.lightbox-overlay'); 6476 6477 if (direction === 'in') { 6478 6479 tl.to(overlay, { 6480 height: '100%', 6481 duration: 1.5, 6482 ease: 'expo.out', 6483 delay: 1, 6484 onComplete: () => { 6485 $lightbox.addClass('active'); 6486 thumbsDragger[0].enable(); 6487 } 6488 }) 6489 6490 6491 6492 } else if (direction === 'out') { 6493 6494 6495 tl.to(lightbox, { 6496 clipPath: 'inset(0% 0% 100% 0%)', 6497 duration: 1, 6498 ease: 'expo.inOut', 6499 onStart: () => { 6500 $gallery.css('zIndex', 9999999999999); 6501 thumbsDragger[0].disable(); 6502 6503 }, 6504 onComplete: () => { 6505 gsap.set(lightbox, { 6506 clearProps: 'all' 6507 }) 6508 lightbox.find('img').removeClass('active'); 6509 lightbox.html(lightboxReset) 6510 lightbox.removeClass('active') 6511 lightbox.remove(); 6512 gsap.set($gallery, { 6513 clearProps: 'all' 6514 }) 6515 6516 } 6517 }) 6518 6519 6520 } 6521 6522 6523 } 6524 6525 6526 function closeLightBox() { 6527 6528 6529 thumbsDragger[0].kill() 6530 thumbsWheeler.unwheel(); 6531 6532 enableScroll() 6533 const itemsNewState = Flip.getState($items, { 6534 props: 'padding , opacity, filter' 6535 }); 6536 6537 lightboxAnim('out') 6538 6539 $gallery.removeClass('lightbox-convert'); 6540 $gallery.removeClass('lightbox-active'); 6541 $items.removeClass('lightbox-thumb active'); 6542 6543 gsap.to($gallery, { 6544 x: 0, 6545 duration: 2, 6546 6547 ease: 'expo.inOut', 6548 6549 }) 6550 6551 6552 6553 Flip.from(itemsNewState, { 6554 duration: 2, 6555 6556 ease: 'expo.inOut', 6557 absolute: true, 6558 onComplete: () => { 6559 gsap.set(body, { 6560 clearProps: 'cursor' 6561 }) 6562 } 6563 6564 }); 6565 6566 6567 } 6568 6569 6570 } 6571 6572 function naylaDynamicGrid() { 6573 6574 const grid = $('.nayla-dynamic-grid'); 6575 6576 grid.each(function () { 6577 6578 let grid = $(this), 6579 wrapper = grid.children('.grid--wrapper'), 6580 items = wrapper.children('.grid--item'), 6581 animation = grid.data('animation'); 6582 6583 6584 6585 grid.hasClass('lightbox-gallery') ? grid.css('height', grid.outerHeight()) : ''; 6586 6587 grid.hasClass('lightbox-gallery') ? naylaLightboxGallery(wrapper, items) : ''; 6588 6589 items.each(function (i) { 6590 6591 i++ 6592 6593 let $this = $(this); 6594 6595 if (grid.hasClass('parallax-on') && $this.find('img').length) { 6596 6597 $this.find('img').wrap('<div class="parallax-wrap"></div>'); 6598 6599 $this.find('.parallax-wrap').css('width', $this.outerWidth()); 6600 $this.find('img').css('height', 'calc(100% + 100px)'); 6601 6602 gsap.to($this.find('img'), { 6603 y: -100, 6604 ease: 'none', 6605 scrollTrigger: { 6606 trigger: $this, 6607 scrub: 1, 6608 start: 'top bottom', 6609 emd: 'bottom top', 6610 } 6611 }) 6612 6613 $(window).on('resize', () => { 6614 6615 gsap.set($this.find('.parallax-wrap'), { 6616 clearProps: 'width' 6617 }) 6618 $this.find('.parallax-wrap').css('width', $this.outerWidth()); 6619 6620 }) 6621 6622 } 6623 6624 if (animation != null) { 6625 6626 let stg = 0; 6627 6628 grid.attr('data-stagger') < 0 ? stg = -1 * (grid.attr('data-stagger') / i) : stg = grid.attr('data-stagger') * i; 6629 6630 6631 $this.addClass(animation); 6632 $this.attr('data-duration', grid.attr('data-duration')); 6633 $this.attr('data-delay', stg) 6634 $this.attr('data-block-color', grid.attr('data-block-color')) 6635 6636 grid.hasClass('image-grid') ? new naylaImageAnimation($this) : new naylaGeneralAnimations($this); 6637 6638 } 6639 6640 }) 6641 6642 6643 }) 6644 6645 } 6646 6647 function naylaForms() { 6648 6649 let form = $('.nayla-form'); 6650 6651 form.each(function () { 6652
6653 let $this = $(this), 6654 inputs = $this.find('input, textarea'); 6655 6656 6657 inputs.each(function () { 6658 6659 let $this = $(this), 6660 wrap = $this.parent('div'), 6661 label = wrap.find('label'); 6662 6663 $this.on('focus', () => { 6664 6665 wrap.addClass('active'); 6666 6667 }) 6668 6669 $this.on('focusout', () => { 6670 6671 $this.val().length > 0 ? '' : wrap.removeClass('active'); 6672 6673 6674 6675 }) 6676 6677 6678 6679 6680 }) 6681 6682 6683 }) 6684 6685 6686 } 6687 6688 function naylaDynamicCarousel() { 6689 const carousel = $('.nayla-dynamic-carousel'); 6690 6691 carousel.each(function () { 6692 6693 let carousel = $(this), 6694 wrapper = carousel.children('.carousel--wrapper'), 6695 items = wrapper.children('.carousel--item'), 6696 end, 6697 length = items.length, 6698 parentLeft, 6699 next = carousel.find('.carousel--next'), 6700 prev = carousel.find('.carousel--prev'), 6701 animation = carousel.data('animation'), 6702 customPin = carousel.data('pin'), 6703 speed = carousel.data('scroll-speed'), 6704 carouselDrag, 6705 wrapScroll, 6706 val; 6707 6708 6709 val = 0; 6710 end = wrapper.outerWidth() - items.last().outerWidth() - (items.last().outerWidth() / 2); 6711 parentLeft = carousel.offset().left, 6712 6713 carousel.find('.carousel--total').html(length); 6714 6715 items.each(function (i) { 6716 6717 let $this = $(this); 6718 6719 $this.attr('data-index', i); 6720 $this.addClass('carousel--item--' + i); 6721 6722 if (carousel.hasClass('parallax-on')) { 6723 6724 $this.find('img').wrap('<div class="parallax-wrap"></div>'); 6725 $this.find('.parallax-wrap').css('height', $this.find('img').outerHeight()); 6726 $this.find('.parallax-wrap').css('width', $this.find('img').outerWidth()); 6727 6728 $this.find('img').css('width', mobileQuery.matches ? 'calc(100% + 50px)' : 'calc(100% + 100px)'); 6729 6730 $(window).on('resize', () => { 6731 6732 $this.find('.parallax-wrap').css('width', $this.outerWidth()); 6733 $this.find('img').css('width', mobileQuery.matches ? 'calc(100% + 50px)' : 'calc(100% + 100px)'); 6734 6735 }) 6736 } 6737 6738 if (animation != null) { 6739 6740 let stg = 0; 6741 6742 carousel.attr('data-stagger') < 0 ? stg = -1 * (carousel.attr('data-stagger') / i) : stg = carousel.attr('data-stagger') * i; 6743 6744 6745 $this.addClass(animation); 6746 $this.attr('data-duration', carousel.attr('data-duration')); 6747 $this.attr('data-delay', stg) 6748 $this.attr('data-block-color', carousel.attr('data-block-color')) 6749 6750 carousel.hasClass('image-carousel') ? new naylaImageAnimation($this) : new naylaGeneralAnimations($this); 6751 6752 } 6753 6754 }) 6755 6756 function getCurrentItem() { 6757 6758 items.each(function () { 6759 6760 let $this = $(this), 6761 pad = $this.css('paddingRight'), 6762 entrance = $this.offset().left, 6763 deadLine = $this.offset().left + $this.outerWidth(), 6764 center = $(window).outerWidth() / 2; 6765 6766 entrance < center && center < deadLine ? $this.addClass('active') : $this.removeClass('active'); 6767 6768 let activeItem = wrapper.find('.carousel--item.active'); 6769 6770 items.removeClass('prev next'); 6771 prev.removeClass('disabled'); 6772 next.removeClass('disabled'); 6773 6774 !activeItem.next().length ? next.addClass('disabled') : activeItem.next().addClass('next'); 6775 !activeItem.prev().length ? prev.addClass('disabled') : activeItem.prev().addClass('prev'); 6776 6777 6778 activeItem.data('index') == null ? '' : carousel.find('.carousel--current').html(activeItem.data('index') + 1); 6779 6780 6781 if (carousel.hasClass('parallax-on')) { 6782 6783 let piv = ScrollTrigger.positionInViewport(this, 'right', true) * (mobileQuery.matches ? 50 : 100); 6784 6785 if ($this.find('img').length) { 6786 gsap.to($this.find('img'), { 6787 x: Math.floor(-piv) 6788 }) 6789 } 6790 6791 } 6792 6793 }) 6794 6795 6796 } 6797 getCurrentItem(); 6798 6799 function navDrag() { 6800 6801 wrapper.addClass('cursor-text'); 6802 wrapper.attr('data-cursor-text', carousel.attr('data-drag-text')); 6803 6804 carouselDrag = Draggable.create(wrapper, { 6805 type: 'x', 6806 bounds: { 6807 minX: 0, 6808 maxX: -end 6809 }, 6810 lockAxis: true, 6811 dragResistance: 0.5, 6812 inertia: true, 6813 onThrowUpdate: () => { 6814 getCurrentItem(); 6815 val = carouselDrag[0].x * -1 6816 }, 6817 zIndexBoost: false, 6818 onDrag: () => { 6819 getCurrentItem(); 6820 val = carouselDrag[0].x * -1 6821 } 6822 }); 6823 6824 } 6825 6826 function navScroll() { 6827 6828 let endtrigger = speed == null ? 'bottom+=3000 bottom' : 'bottom+=' + speed + ' bottom', 6829 start = customPin == null ? 'center center' : 'top top', 6830 pinTarget = customPin == null ? carousel : customPin, 6831 endNumber = speed == null ? 1000 : 1000 + speed; 6832 6833 6834 6835 6836 if (carousel.hasClass('items-bottom')) { 6837 6838 start = 'bottom bottom' 6839 6840 } 6841 6842 // carousel.find('.carousel-control
6842s') ? start = 'center center+=50' : ''; 6843 6844 wrapScroll = gsap.timeline({ 6845 scrollTrigger: { 6846 trigger: pinTarget, 6847 start: start, 6848 end: carousel.offset().top < $(window).outerHeight() ? endNumber : endtrigger, 6849 pin: true, 6850 id: 'caroScroll', 6851 scrub: 1, 6852 pinReparent: $('body').hasClass('smooth-scroll') ? true : false, 6853 onLeaveBack: () => getCurrentItem(), 6854 onEnterBack: () => getCurrentItem(), 6855 onScrubComplete: () => getCurrentItem(), 6856 onEnter: () => getCurrentItem(), 6857 onLeave: () => getCurrentItem(), 6858 onUpdate: () => getCurrentItem() 6859 } 6860 }); 6861 6862 6863 6864 wrapScroll.to(wrapper, { 6865 x: -end, 6866 6867 }) 6868 6869 } 6870 6871 var snaps; 6872 6873 function getSnaps() { 6874 6875 snaps = items.map(function () { 6876 if (mobileQuery.matches) { 6877 return -($(this).position().left + ($(this).outerWidth()) + parentLeft); 6878 } else { 6879 return -($(this).position().left + ($(this).outerWidth() / 2) + parentLeft); 6880 } 6881 }).get(); 6882 6883 6884 6885 } 6886 6887 function navPrevNext() { 6888 6889 next.on('click', function () { 6890 6891 getSnaps(); 6892 let nextProj = wrapper.find('.carousel--item.next'), 6893 marg = parseInt(nextProj.css('marginRight')), 6894 index = nextProj.data('index') - 1 6895 6896 gsap.to(wrapper, { 6897 x: mobileQuery.matches ? snaps[index] : snaps[index] + marg, 6898 duration: 1.5, 6899 ease: 'expo.out', 6900 onUpdate: () => { 6901 getCurrentItem(); 6902 carouselDrag ? carouselDrag[0].update() : ''; 6903 } 6904 }) 6905 6906 }) 6907 6908 prev.on('click', function () { 6909 6910 getSnaps(); 6911 6912 let prevProj = wrapper.find('.carousel--item.prev'), 6913 marg = parseInt(prevProj.css('marginRight')), 6914 index = prevProj.data('index') - 1, 6915 val = snaps[index]; 6916 6917 val == null ? val = 0 : ''; 6918 gsap.to(wrapper, { 6919 x: mobileQuery.matches ? val : val + marg, 6920 duration: 1.5, 6921 ease: 'expo.out', 6922 onUpdate: () => { 6923 getCurrentItem(); 6924 carouselDrag ? carouselDrag[0].update() : ''; 6925 } 6926 }) 6927 6928 }) 6929 } 6930 6931 6932 carousel.hasClass('navScroll') ? navScroll() : navDrag(); 6933 6934 carousel.find('.carousel--navigation').length ? navPrevNext() : ''; 6935 6936 6937 6938 6939 matchMedia.add({ 6940 isMobile: "(max-width: 450px)" 6941 6942 }, (context) => { 6943 6944 let { 6945 isMobile 6946 } = context.conditions; 6947 6948 gsap.set(wrapper, { 6949 x: 0 6950 }) 6951 6952 gsap.set(wrapper.find('img'), { 6953 clearProps: 'transform' 6954 }) 6955 6956 parentLeft = carousel.offset().left; 6957 6958 gsap.set(items.find('img'), { 6959 clearProps: 'transform' 6960 }) 6961 6962 end = wrapper.outerWidth() - items.last().outerWidth(); 6963 6964 if (carouselDrag) { 6965 6966 carouselDrag[0].applyBounds({ 6967 minX: 0, 6968 maxX: -end 6969 }) 6970 6971 carouselDrag[0].update() 6972 } 6973 6974 6975 if (wrapScroll) { 6976 wrapScroll.clear() 6977 6978 wrapScroll.to(wrapper, { 6979 x: -end, 6980 6981 }) 6982 6983 } 6984 6985 return () => { 6986 6987 6988 gsap.set(wrapper.find('img'), { 6989 clearProps: 'transform' 6990 }) 6991 6992 gsap.set(wrapper, { 6993 x: 0 6994 }) 6995 parentLeft = carousel.offset().left; 6996 6997 gsap.set(items.find('img'), { 6998 clearProps: 'transform' 6999 }) 7000
7001 end = wrapper.outerWidth() - items.last().outerWidth() - (items.last().outerWidth() / 2); 7002 7003 if (carouselDrag) { 7004 carouselDrag[0].applyBounds({ 7005 minX: 0, 7006 maxX: -end 7007 }) 7008 carouselDrag[0].update() 7009 } 7010 7011 if (wrapScroll) { 7012 wrapScroll.clear() 7013 7014 wrapScroll.to(wrapper, { 7015 x: -end, 7016 7017 }) 7018 7019 } 7020 7021 7022 7023 7024 } 7025 }); 7026 7027 7028 }) 7029 7030 } 7031 7032 function naylaParallax() { 7033 7034 const item = $('.has-parallax'); 7035 7036 item.each(function () { 7037 7038 let $this = $(this), 7039 tl = gsap.timeline({ 7040 7041 scrollTrigger: { 7042 trigger: $this, 7043 start: 'top bottom', 7044 end: 'bottom top', 7045 scrub: 1 7046 } 7047 }), 7048 speed = $this.data('parallax-speed'), 7049 direction = $this.data('parallax-direction'), 7050 x = 0, 7051 y = 0; 7052 7053 speed == null ? speed = 20 : ''; 7054 direction == null ? direction = 'up' : ''; 7055 7056 direction == 'up' ? y = (speed * -1) : ''; 7057 direction == 'down' ? y = speed : ''; 7058 direction == 'left' ? x = (speed * -1) : ''; 7059 direction == 'right' ? x = speed : ''; 7060 7061 tl.to($this, { 7062 yPercent: y, 7063 xPercent: x, 7064 7065 }); 7066 7067 matchMedia.add({ 7068 isMobile: "(max-width: 450px)" 7069 7070 }, (context) => { 7071 let { 7072 isMobile 7073 } = context.conditions; 7074 7075 tl.clear(); 7076 gsap.set($this, { 7077 clearProps: 'all' 7078 }) 7079 7080 return () => { 7081 tl.to($this, { 7082 yPercent: y, 7083 xPercent: x, 7084 7085 }); 7086 7087 } 7088 }); 7089 7090 }) 7091 7092 7093 } 7094 7095 function naylaIcons() { 7096 7097 $('.nayla-icon').each(function () { 7098 7099 let $this = $(this); 7100 7101 7102 if ($this.hasClass('animate')) { 7103 7104 7105 ScrollTrigger.create({ 7106 trigger: $this, 7107 onEnter: () => { 7108 7109 $this.addClass('is_inview') 7110 7111 } 7112 }) 7113 7114 7115 7116 } 7117 7118 7119 7120 7121 }) 7122 7123 7124 } 7125 7126 function naylaImageCompare() { 7127 7128 let imageCompare = $('.image-compare'); 7129 7130 7131 imageCompare.each(function () { 7132 7133 let $this = $(this), 7134 image1 = $this.find('.compare-image-1'), 7135 image2 = $this.find('.compare-image-2'); 7136 7137 gsap.to(image1, { 7138 clipPath: 'inset(0% 100% 0% 0%)', 7139 scrollTrigger: { 7140 trigger: $this, 7141 scrub: 1, 7142 start: 'center center', 7143 end: 'bottom+=1000 top', 7144 pin: true 7145 7146 } 7147 }) 7148 7149 7150 7151 }) 7152 7153 7154 } 7155 7156 function naylaLightbox() { 7157 7158 let lightbox = $('.lightbox'), 7159 isSingle = true; 7160 7161 lightbox.each(function () { 7162 7163 let $this = $(this), 7164 imgSrc = $this.attr('src'), 7165 height = $this.outerHeight(), 7166 parent = $this.parent('div'); 7167 parent.css('height', height) 7168 7169 7170 $this.on('click', () => { 7171 7172 7173 var clicks = $(this).data('clicks'); 7174 if (clicks) { 7175 enableScroll(); 7176 } else { 7177 $('body').append('<div class="lightbox-focus"></div>'); 7178 disableScroll() 7179 } 7180 7181 $(this).data("clicks", !clicks); 7182 7183 const state = Flip.getState($this, { 7184 props: "transform" 7185 }); 7186 7187 $this.toggleClass('open'); 7188 $('.lightbox-focus').toggleClass('open'); 7189 7190 let bac = Flip.from(state, { 7191 duration: 1.25, 7192 ease: "expo.inOut", 7193 absolute: true, 7194 absoluteOnLeave: true, 7195 prune: true, 7196 simple: true, 7197 onComplete: () => { 7198 $this.hasClass('open') ? $this.css('zIndex', 99999) : gsap.set($this, { 7199 clearProps: 'all' 7200 }); 7201 7202 $this.hasClass('open') ? '' : $('.lightbox-focus').remove(); 7203 7204 7205 }, 7206 7207 }); 7208 7209 7210 7211 }) 7212 7213 7214 }) 7215 7216 7217 7218 7219 7220 7221 } 7222 7223 function gridScroll() { 7224 7225 7226 let pinned = $('.pinned'); 7227 7228 pinned.each(function () { 7229
7230 let $this = $(this), 7231 dataPin = $this.attr('data-pin'), 7232 height = $this.outerHeight(); 7233 7234 7235 let pinnedScroll = ScrollTrigger.create({ 7236 trigger: dataPin, 7237 pin: $this, 7238 pinSpacing: false, 7239 start: 'top top+=' + siteHeader.outerHeight() + '', 7240 end: 'bottom top+=' + (height + siteHeader.outerHeight()) + '' 7241 }) 7242 7243 matchMedia.add({ 7244 isMobile: "(max-width: 450px)" 7245 7246 }, (context) => { 7247 7248 pinnedScroll.kill() 7249 7250 return () => { 7251 7252 } 7253 }); 7254 7255 7256 7257 }) 7258 7259 } 7260 7261 function naylaSections() { 7262 7263 var section = $('#content').find('.section'), 7264 page = $('.page-content'), 7265 pageBg = page.css('background-color'), 7266 pinned; 7267 7268 function changeBg(section, color, leave) { 7269 7270 gsap.to(page, { 7271 backgroundColor: color, 7272 duration: .6, 7273 7274 }); 7275 7276 section.addClass('active') 7277 7278 if ((siteHeader.hasClass('fixed')) && (!siteHeader.hasClass('blend'))) { 7279 7280 headerLayoutChange(false, color, true, false); 7281 leave ? headerLayoutChange(false, false, true, true) : ''; 7282 } 7283 7284 cursorLayoutChange(false, color, false) 7285 7286 leave ? cursorLayoutChange(false, false, true) : ''; 7287 leave ? section.removeClass('active') : ''; 7288 } 7289 7290 section.each(function () { 7291 7292 let $this = $(this), 7293 bgColor = $this.css('background-color'), 7294 bg = $this.find('.section-background'), 7295 sectionLayout, 7296 pinnedBg; 7297 7298 $this.hasClass('light') ? sectionLayout = 'light' : ''; 7299 $this.hasClass('dark') ? sectionLayout = 'dark' : ''; 7300 7301 // Cursor change 7302 7303 $(window).on('scroll', function (e) { 7304 7305 let topPos = $this.offset().top - $(window).scrollTop(), 7306 height = $this.outerHeight(), 7307 deadLine = topPos + height; 7308 7309 7310 if ((topPos < cursorY) && (cursorY < deadLine)) { 7311 7312 if (!$this.hasClass('anim-bg')) { 7313 7314 if (($this.css('background-color') === 'rgba(0, 0, 0, 0)') && (sectionLayout != null)) { 7315 7316 cursorLayoutChange(sectionLayout, false, false) 7317 7318 } else if (($this.css('background-color') !== 'rgba(0, 0, 0, 0)')) { 7319 7320 cursorLayoutChange(false, bgColor, false) 7321 } 7322 7323 } 7324 7325 } else if (cursorY > deadLine) { 7326 7327 $('.section.active').length ? '' : cursorLayoutChange(false, false, true); 7328 7329 } 7330 }) 7331 7332 7333 if (!$this.hasClass('anim-bg')) { 7334 7335 $this.on('mouseenter', function () { 7336 7337 if (($this.css('background-color') === 'rgba(0, 0, 0, 0)') && (sectionLayout != null)) { 7338 7339 cursorLayoutChange(sectionLayout, false, false) 7340 7341 } else if (($this.css('background-color') !== 'rgba(0, 0, 0, 0)')) { 7342 7343 cursorLayoutChange(false, bgColor, false) 7344 } 7345 7346 }) 7347 7348 $this.on('mouseleave', function () { 7349 7350 $('.section.active').length ? '' : cursorLayoutChange(false, false, true); 7351 7352 }) 7353 7354 } 7355 7356 // Cursor change 7357 7358 // Background Animations 7359 if ($this.hasClass('anim-bg')) { 7360 7361 $this.css('background', 'transparent'); 7362 7363 ScrollTrigger.create({ 7364 trigger: $this, 7365 start: 'top center', 7366 end: 'bottom center', 7367 onEnter: () => changeBg($this, bgColor, false), 7368 onEnterBack: () => changeBg($this, bgColor, false), 7369 onLeave: () => changeBg($this, pageBg, true), 7370 onLeaveBack: () => changeBg($this, pageBg, true) 7371 }); 7372 7373 } else { 7374 7375 if (siteHeader.hasClass('sticky') || siteHeader.hasClass('fixed')) { 7376 7377 if (($this.css('background-color') === 'rgba(0, 0, 0, 0)') && (sectionLayout != null)) { 7378 7379 ScrollTrigger.create({ 7380 trigger: $this, 7381 start: 'top top+=50', 7382 end: 'bottom top+=50', 7383 onEnter: () => headerLayoutChange(sectionLayout, false, false, false), 7384 onEnterBack: () => headerLayoutChange(sectionLayout, false, false, false), 7385 onLeave: () => headerLayoutChange(false, false, false, true), 7386 onLeave: () => headerLayoutChange(false, false, false, true), 7387 onLeaveBack: () => headerLayoutChange(false, false, false, true) 7388 }); 7389 7390 7391 } else if (($this.css('background-color') !== 'rgba(0, 0, 0, 0)') && ($this.offset().top > 0)) { 7392 7393 7394 // If background not alpha 7395 ScrollTrigger.create({ 7396 trigger: $this, 7397 start: 'top top+=75', 7398 end: 'bottom top+=75', 7399 onEnter: () => headerLayoutChange(false, bgColor, false, false), 7400 onEnterBack: () => headerLayoutChange(false, bgColor, false, false), 7401 onLeave: () => headerLayoutChange(false, false, false, true), 7402 onLeaveBack: () => headerLayoutChange(false, false, false, true) 7403 }); 7404 7405 } 7406 } 7407 }
7408 // Background Animations 7409 7410 if (bg.hasClass('fixed-bg')) { 7411 7412 ScrollTrigger.create({ 7413 trigger: $this, 7414 pin: bg, 7415 start: 'top top', 7416 end: 'bottom bottom', 7417 pinSpacing: false, 7418 7419 }); 7420 7421 7422 7423 } 7424 7425 }) 7426 7427 7428 } 7429 7430 function circleMaskBg() { 7431 7432 $('.circle-mask-background').each(function () { 7433 7434 let $this = $(this), 7435 img = $this.children('img'), 7436 url = img.attr('src'); 7437 7438 img.remove(); 7439 7440 $this.append('<svg class="mask-bg" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><defs><filter id="displacementFilter"><feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="3" result="noise" /><feDisplacementMap in="SourceGraphic" in2="noise" scale="50" xChannelSelector="R" yChannelSelector="G" /></filter><mask id="circleMask"><circle cx="50%" cy="50%" r="00" fill="white" class="mask" style="filter: url(#displacementFilter);" /></mask></defs><image xlink:href="' + url + '" x=0 y=0 width="100%" mask="url(#circleMask)" /></svg>'); 7441 7442 let circle = $this.find('#circleMask > circle'); 7443 7444 $(window).on('mousemove', function (e) { 7445 7446 let top = e.clientY / ($this.outerHeight() / 100), 7447 left = e.clientX / ($this.outerWidth() / 100); 7448 7449 gsap.to(circle, { 7450 cx: left, 7451 cy: top, 7452 7453 }) 7454 }) 7455 7456 gsap.to(circle, { 7457 r: 350, 7458 scrollTrigger: { 7459 trigger: $this, 7460 7461 } 7462 }) 7463 7464 }) 7465 7466 } 7467 7468 7469 7470 function naylaVideo(vid) { 7471 7472 7473 var video = $(vid); 7474 7475 if (video.length) { 7476 7477 video.each(function (i) { 7478 7479 i++ 7480 let $this = $(this), 7481 video = $this.find('.n-video'), 7482 playText = $this.data('play-text'), 7483 pauseText = $this.data('pause-text'), 7484 muteText = $this.data('mute-text'), 7485 unmuteText = $this.data('unmute-text'), 7486 nautoplay = $this.data('autoplay'), 7487 nmuted = $this.data('muted'), 7488 nloop = $this.data('loop'), 7489 play = $this.data('play'), 7490 controls; 7491 7492 7493 // [play-large play progress mute fullscreen] 7494 7495 $this.data('controls') != false ? controls = $this.data('controls').split(" ") : ''; 7496 7497 7498 playText == null ? playText = 'Play' : ''; 7499 pauseText == null ? pauseText = 'Pause' : ''; 7500 muteText == null ? muteText = 'Mute' : ''; 7501 unmuteText == null ? unmuteText = 'Unmute' : ''; 7502 7503 7504 const naylaVid = new Plyr(video, { 7505 controls: 0, 7506 clickToPlay: true, 7507 autopause: false, 7508 debug: false, 7509 fullscreen: false, 7510 storage: { 7511 enabled: false 7512 }, 7513 youtube: { 7514 modestbranding: 0, 7515 controls: 0, 7516 rel: 0, 7517 cc_load_policy: 0, 7518 iv_load_policy: 3, 7519 noCookie: true, 7520 frameborder: 0, 7521 }, 7522 vimeo: { 7523 autopause: false, 7524 controls: false, 7525 } 7526 7527 }); 7528 7529 if (!$this.hasClass('n-self')) { 7530 naylaVid.autoplay = nautoplay 7531 naylaVid.muted = nmuted 7532 naylaVid.loop = nloop 7533 7534 if (nautoplay == true) { 7535 7536 naylaVid.play(); 7537 7538 7539 } 7540 } 7541 7542 7543 7544 naylaVid.on('ready', (event) => { 7545 7546 7547 if ($this.find('video').attr('autoplay')) { 7548 7549 naylaVid.play() 7550 } 7551 7552 7553 $this.find('.plyr').addClass('nayla_video_' + i); 7554 7555 let vid = $('.nayla_video_' + i); 7556 7557 7558 7559 vid.find('.plyr__video-wrapper').addClass('nayla-video-wrap'); 7560 vid.find('.plyr__controls').addClass('nayla-controls-wrap'); 7561 7562 vid.find('.plyr__control[data-plyr="play"]').append('<span class="hover-default nayla-player-control nayla-play">' + playText + '</span><span class="hover-default nayla-player-control nayla-pause">' + pauseText + '</span>') 7563 7564 vid.find('.plyr__controls__item.plyr__volume button[data-plyr="mute"]').append('<span class="hover-default nayla-player-control nayla-mute">' + muteText + '</span><span class="hover-default nayla-player-control nayla-unmute">' + unmuteText + '</span>'); 7565 7566 if ($this.hasClass('nayla-play')) { 7567 7568 if (play !== 'icon') { 7569 7570 $this.append('<div class="play-icon text"><span>' + play + '</span></div>') 7571 7572 } else { 7573 7574 $this.append('<div class="play-icon icon"><span class="material-icons">play_arrow</span></div>') 7575 } 7576 7577 7578 7579 $this.find('.play-icon').on('click', function () { 7580 7581 naylaVid.muted = false;
7582 naylaVid.restart(); 7583 $this.addClass('nayla-play-started'); 7584 7585 }) 7586 } 7587 7588 function lightboxPlay() { 7589 7590 7591 naylaVid.fullscreen = false 7592 7593 vid.append('<span class="lightbox-close">Close</span>') 7594 vid.addClass('nlv').prependTo('#page'); 7595 7596 $('.nlv').addClass('lightbox-open') 7597 7598 vid.find('.plyr__video-wrapper').addClass('nayla-video-wrap'); 7599 vid.find('.plyr__controls').addClass('nayla-controls-wrap'); 7600 7601 $this.find('.play-icon').on('click', function () { 7602 7603 vid.addClass('lightbox-open'); 7604 naylaVid.muted = false; 7605 naylaVid.restart(); 7606 7607 }) 7608 7609 $('.lightbox-close').on('click', function () { 7610 7611 vid.off('click') 7612 7613 vid.removeClass('nlv lightbox-open'); 7614 7615 vid.find('.plyr__video-wrapper').removeClass('nayla-video-wrap'); 7616 vid.find('.plyr__controls').removeClass('nayla-controls-wrap'); 7617 7618 naylaVid.muted = true; 7619 7620 vid.prependTo($this); 7621 7622 }) 7623 7624 7625 } 7626 7627 7628 7629 if ($this.hasClass('cursor-play')) { 7630 7631 vid.addClass('not-started') 7632 7633 naylaVid.controls = false 7634 7635 vid.on('mouseenter', function () { 7636 7637 if (vid.hasClass('not-started')) { 7638 7639 if (play !== 'icon') { 7640 7641 mouseCursor.find('.mouse-cursor-text').children('span').html(play) 7642 mouseCursor.addClass('hover-text'); 7643 mouseCursor.addClass('hover-size') 7644 mouseCursor.addClass('hover-player'); 7645 7646 7647 } else { 7648 7649 mouseCursor.find('.mouse-cursor-icon').attr('data-icon', 'play_arrow') 7650 mouseCursor.addClass('hover-icon'); 7651 7652 } 7653 7654 7655 mouseCursor.addClass('hover-size') 7656 mouseCursor.addClass('hover-player'); 7657 7658 } 7659 7660 }) 7661 7662 vid.on('click', function () { 7663 7664 lightboxPlay() 7665 7666 if (vid.hasClass('not-started')) { 7667 7668 vid.removeClass('not-started') 7669 naylaVid.muted = false; 7670 naylaVid.restart(); 7671 7672 mouseCursor.removeClass('hover-icon'); 7673 mouseCursor.removeClass('hover-size') 7674 mouseCursor.removeClass('hover-player'); 7675 mouseCursor.removeClass('hover-text'); 7676 } 7677 7678 7679 7680 7681 }) 7682 7683 vid.on('mouseleave', () => { 7684 mouseCursor.removeClass('hover-size') 7685 mouseCursor.removeClass('hover-icon'); 7686 mouseCursor.removeClass('hover-player'); 7687 mouseCursor.removeClass('hover-text'); 7688 7689 }) 7690 7691 if ($this.hasClass('lightbox')) { 7692 7693 naylaVid.on('controlshidden', () => { 7694 mouseCursor.addClass('temp_hidden') 7695 mouseCursor.addClass('temp_hidden') 7696 7697 $('.lightbox-close').addClass('temp_hidden') 7698 }) 7699 7700 naylaVid.on('controlsshown', () => { 7701 mouseCursor.removeClass('temp_hidden'); 7702 $('.lightbox-close').removeClass('temp_hidden') 7703 7704 }) 7705 7706 } 7707 7708 } 7709 7710 if ($this.hasClass('play-on-hover')) { 7711 7712 naylaVid.pause(); 7713 7714 $this.on('mouseenter', () => { 7715 7716 naylaVid.play(); 7717 }) 7718 7719 $this.on('mouseleave', () => { 7720 7721 naylaVid.pause(); 7722 }) 7723 7724 } 7725 7726 7727 }); 7728 7729 7730 7731 }) 7732 7733 7734 } 7735 7736 7737 7738 7739 } 7740 7741 function naylaHeading() { 7742 7743 7744 let heading = $('.nayla-heading'); 7745 7746 heading.each(function () { 7747 7748 let heading = $(this), 7749 text = heading.children('*'), 7750 icon = heading.data('icon'); 7751 7752 text.attr('data-icon', icon) 7753 7754 7755 7756 }) 7757 7758 7759 } 7760 7761 function naylaCircleText() { 7762 let circularText = $(".nayla-circular-text"); 7763 circularText.each(function (i) {
7764 let $this = $(this); 7765 $this.wrapInner("<div class='circular-text-wrap'></div>") 7766 let textWrap = $this.find('.circular-text-wrap'); 7767 7768 textWrap.wrapInner("<div class='circular-text-content'></div>") 7769 7770 let circularContent = $this.find(".circular-text-content"), 7771 dataHeight = $this.data("height"), 7772 dataDuration = $this.data("duration"), 7773 dataTarget = $this.data('target'), 7774 circleSplit = new SplitText($this.find('.circle-text'), { 7775 type: "words, chars", 7776 charsClass: "circle-char", 7777 wordsClass: "circle-word", 7778 position: "absolute" 7779 }), 7780 fontSize = parseInt($this.find('.circle-char').css('font-size')), 7781 charLenght = $this.find('.circle-char').length, 7782 textLenght = (dataHeight / charLenght) / (fontSize / 1.75), 7783 circleChar = $this.find('.circle-char'), 7784 circleWord = $this.find('.circle-word'), 7785 snap = gsap.utils.snap(1), 7786 dataSeperator = $this.data('seperator'), 7787 dataIcon = $this.data('icon'); 7788 7789 7790 if (dataIcon) { 7791 7792 $this.append("<div class='circular-text-icon'><span class='material-icons'>" + dataIcon + "</span></div>") 7793 7794 } 7795 7796 if (dataSeperator) { 7797 circularContent.append('<h3 class="circle-seperator"></h3>') 7798 7799 let seperator = $this.find('.circle-seperator'); 7800 seperator.css('line-height', circleChar.css('line-height')) 7801 seperator.wrapInner('<span class="material-icons">' + dataSeperator + '</span>') 7802 7803 seperator = $this.find('.circle-seperator'), 7804 seperator.wrapInner("<div class='circle-char'></div>") 7805 seperator.addClass('circle-word') 7806 7807 } 7808 7809 for (i = 2; i <= snap(textLenght); i++) { 7810 circularContent.clone().appendTo(textWrap) 7811 } 7812 gsap.set($this.find(".circular-text-content"), { 7813 width: dataHeight, 7814 height: dataHeight 7815 }) 7816 $this.find('.circle-word').append("<span class='circle-char'></span>") 7817 7818 $this.find('.circle-word').each(function (i) { 7819 let $this = $(this) 7820 gsap.set($this, { 7821 left: '50%', 7822 top: 0, 7823 height: "100%", 7824 xPercent: -50 7825 }) 7826 }) 7827 let char = $this.find('.circle-char'), 7828 circleText = $this.find('.circle-text'); 7829 char.each(function (i) { 7830 i++; 7831 let $this = $(this), 7832 rotateMultiplier = 360 / (char.length); 7833 gsap.set($this, { 7834 rotate: rotateMultiplier * i, 7835 left: '50%', 7836 xPercent: -50, 7837 top: 0, 7838 height: "50%" 7839 }) 7840 }) 7841 gsap.set(textWrap, { 7842 width: dataHeight, 7843 height: dataHeight 7844 }) 7845 let tl = gsap.timeline() 7846 if ($this.hasClass('counter-clockwise')) { 7847 tl.to(textWrap, { 7848 rotate: -360, 7849 duration: dataDuration, 7850 ease: "none", 7851 repeat: -1 7852 }) 7853 } else { 7854 tl.to(textWrap, { 7855 rotate: 360, 7856 duration: dataDuration, 7857 ease: "none", 7858 repeat: -1 7859 }) 7860 } 7861 7862 let whaler = Hamster(document.querySelector('body')), 7863 wheelDeltaY, currentDeltaY; 7864 7865 function createWheelStopListener(element, callback, timeout) { 7866 var handle = null; 7867 var onScroll = function () { 7868 if (handle) { 7869 clearTimeout(handle); 7870 } 7871 handle = setTimeout(callback, timeout || 200); // default 200 ms 7872 }; 7873 element.addEventListener('wheel', onScroll); 7874 return function () { 7875 element.removeEventListener('wheel', onScroll); 7876 }; 7877 } 7878 7879 whaler.wheel(function (event, delta, deltaX, deltaY) { 7880 7881 wheelDeltaY = event.deltaY; 7882 7883 event.deltaY < 0 ? wheelDeltaY = -1 * event.deltaY : ''; 7884 7885 tl.timeScale(1 + (wheelDeltaY * 2)) 7886 7887 }); 7888 7889 createWheelStopListener(window, function () { 7890 7891 tl.timeScale(1) 7892 7893 }); 7894 7895 7896 7897 $this.on('click', function () { 7898 gsap.to(window, { 7899 scrollTo: dataTarget, 7900 ease: "power3.out", 7901 duration: 3 7902 }) 7903 }) 7904 }) 7905 } 7906 7907 function naylaButtons() { 7908 7909 var button = $('.nayla-button'); 7910 7911 button.each(function () { 7912 7913 let button = $(this), 7914 $this = $(this).children('a'), 7915 icon = $this.find('.button-icon'), 7916 tl = gsap.timeline({ 7917 paused: true 7918 }), 7919 line, 7920 animation = $this.data('animation'), 7921 stagger = $this.data('stagger'), 7922 duration = $this.data('duration'); 7923 7924 if (animation) { 7925 7926 $this.wrapInner('<span class="button-anim-holder has-anim-text ' + animation + '"></span>') 7927 7928 $this.find('.button-anim-holder').attr('data-duration', duration) 7929 $this.find('.button-anim-holder').attr('data-stagger', stagger) 7930 7931 $this.addClass('detect-pov') 7932 7933 new naylaTextAnimation($this.find('.button-anim-holder')) 7934 7935 } 7936 7937 7938 button.hasClass('underline') ? $this.append('<span class="button-line"></span>') : ''; 7939 7940 }) 7941 7942 7943 7944 } 7945 7946 function naylaMarquee(i) { 7947 7948 var velocity; 7949 let marquee = $('.nayla-marquee'); 7950 7951 7952 marquee.each(function () {
7953 let $this = $(this), 7954 text = $this.children('*'), 7955 dataDuration = $this.data('duration'), 7956 seperator = $this.data('seperator'); 7957 7958 text.append('<span class="material-icons">' + seperator + '</span>') 7959 $this.wrapInner('<div class="marquee-wrap"></div>') 7960 7961 let infItem = $this.find('.marquee-wrap'), 7962 infWidht = infItem.outerWidth(), 7963 infLenght = window.innerWidth / infWidht, 7964 gap = infItem.offset().left; 7965 7966 7967 7968 7969 function infinityOnResize() { 7970 for (i = 2; i < infLenght + 2; i++) { 7971 infItem.clone().appendTo($this) 7972 } 7973 let infItemLenght = $this.find('.maruqee-wrap').length 7974 let parse = parseInt(infWidht) 7975 gsap.set(infItem, { 7976 width: parse 7977 }) 7978 7979 gsap.set($this, { 7980 width: infItemLenght * $this.find('.marquee-wrap').outerWidth(true), 7981 display: 'flex' 7982 }) 7983 let tl = gsap.timeline({ 7984 repeat: -1 7985 }) 7986 if ($this.hasClass('left-to-right')) { 7987 tl.fromTo($this, { 7988 x: -1 * (parse + gap) 7989 }, { 7990 x: -1 * gap, 7991 ease: 'none', 7992 duration: parse / 1000 * dataDuration 7993 }) 7994 } else { 7995 tl.fromTo($this, { 7996 x: -1 * gap 7997 }, { 7998 x: -1 * (parse + gap), 7999 ease: 'none', 8000 duration: parse / 1000 * dataDuration 8001 }) 8002 } 8003 8004 let whaler = Hamster(document.querySelector('body')), 8005 wheelDeltaY, currentDeltaY; 8006 8007 function createWheelStopListener(element, callback, timeout) { 8008 var handle = null; 8009 var onScroll = function () { 8010 if (handle) { 8011 clearTimeout(handle); 8012 } 8013 handle = setTimeout(callback, timeout || 200); // default 200 ms 8014 }; 8015 element.addEventListener('wheel', onScroll); 8016 return function () { 8017 element.removeEventListener('wheel', onScroll); 8018 }; 8019 } 8020 8021 whaler.wheel(function (event, delta, deltaX, deltaY) { 8022 8023 wheelDeltaY = event.deltaY; 8024 8025 event.deltaY < 0 ? wheelDeltaY = -1 * event.deltaY : ''; 8026 8027 tl.timeScale(1 + (wheelDeltaY * 2)) 8028 8029 }); 8030 8031 createWheelStopListener(window, function () { 8032 8033 tl.timeScale(1) 8034 8035 }); 8036 } 8037 8038 8039 8040 infinityOnResize(); 8041 8042 8043 window.onresize = function () { 8044 $this.find('.nayla-marquee:first-child').nextAll().remove() 8045 let infItem = $this.find('.infinity-item'), 8046 infWidht = infItem.outerWidth(), 8047 infLenght = window.innerWidth / infWidht; 8048 infinityOnResize(); 8049 } 8050 }) 8051 8052 8053 8054 } 8055 8056 function naylaServices() { 8057 let naylaServices = $('.nayla-services'); 8058 8059 naylaServices.each(function () { 8060 8061 let services = $(this), 8062 servicesItem = services.find('.nayla-service'); 8063 8064 servicesItem.append("<span class='services-item-bottom-line nayla-service-line'></span>") 8065 8066 servicesItem.each(function (i) { 8067 8068 i++; 8069 8070 var $this = $(this), 8071 titleWrap = $this.find(".service-title-wrap"), 8072 contentWrap = $this.find(".service-content-wrap"), 8073 titleHeight = titleWrap.outerHeight(), 8074 calcEnd = siteHeader.hasClass('sticky') || siteHeader.hasClass('fixed') ? siteHeader.outerHeight() + 50 : 50, 8075 start = siteHeader.hasClass('sticky') || siteHeader.hasClass('fixed') ? siteHeader.outerHeight() : 50; 8076 8077 let index = i < 10 ? '0' + i : i; 8078 services.hasClass('ordered') ? titleWrap.attr('data-index', "(" + index + ")") : ''; 8079 8080 let mobileQuery = window.matchMedia('(max-width: 1112px)'); 8081 8082 if (services.hasClass('pin-titles')) { 8083 8084 if (mobileQuery.matches) { 8085 8086 ScrollTrigger.create({ 8087 trigger: $this, 8088 pin: titleWrap, 8089 start: "top top", 8090 end: "bottom-=" + servicesItem.outerHeight(true) + "top", 8091 pinSpacing: false 8092 }) 8093 8094 } else { 8095 8096 ScrollTrigger.create({ 8097 pin: titleWrap, 8098 trigger: contentWrap, 8099 start: 'top top+=' + start + '', 8100 end: 'bottom top+=' + (titleHeight + 50) + '' 8101 8102 }) 8103 } 8104 } 8105 8106 8107 }) 8108 }) 8109 } 8110 8111 function naylaAccordion() { 8112 let naylaAccordion = $('.nayla-accordion'); 8113 8114 naylaAccordion.each(function () {
8115 let $this = $(this), 8116 acrdTitle = $this.find('.accordion-title'), 8117 acrdContent = $this.find('.accordion-content'), 8118 activeContent = $this.find('.active > .accordion-content'), 8119 icon = $this.data('toggle-icon'), 8120 animation = $this.data('animation'); 8121 8122 if (animation) { 8123 8124 acrdTitle.wrapInner('<span></span>') 8125 8126 acrdTitle.addClass('detect-pov') 8127 acrdTitle.children('span').addClass('has-anim-text') 8128 acrdTitle.children('span').addClass(animation) 8129 8130 new naylaTextAnimation(acrdTitle.children('span')) 8131 } 8132 8133 acrdTitle.append('<span class="material-icons accordion-toggle">' + icon + '</span>') 8134 8135 8136 acrdContent.wrapInner("<div class='accordion-content-wrap'></div>") 8137 8138 $this.find('.accordion-content-wrap').each(function () { 8139 $(this).css('height', $(this).outerHeight(true)) 8140 }) 8141 8142 $this.find('.accordion-wrap').children().each(function (i) { 8143 i++; 8144 if (i < 10) { 8145 $(this).attr('data-index', '0' + i) 8146 } else { 8147 $(this).attr('data-index', i) 8148 } 8149 }) 8150 8151 acrdContent.css('height', 0) 8152 activeContent.css('height', activeContent.children().outerHeight(true)) 8153 8154 acrdTitle.on('click', function () { 8155 8156 let acrdItem = $(this).parent() 8157 gsap.to(acrdContent, { 8158 height: 0, 8159 duration: .5, 8160 8161 }) 8162 8163 if (acrdItem.hasClass('active')) { 8164 acrdItem.removeClass('active') 8165 8166 } else { 8167 8168 acrdTitle.parent().removeClass('active') 8169 $(this).parent().addClass('active') 8170 gsap.to($(this).next(), { 8171 height: $(this).next().children().outerHeight(true), 8172 8173 onUpdate: () => {
8174 ScrollTrigger.update() 8175 } 8176 }) 8177 // 8178 // gsap.to(window, { 8179 // scrollTo: $('li.active').offset().top - 200, 8180 // delay: dataDuration, 8181 // 8182 // }) 8183 } 8184 }) 8185 }) 8186 } 8187 8188 function naylaClinetsCarousel() { 8189 8190 let clientCarousel = $('.nayla-clients-carousel'); 8191 8192 clientCarousel.each(function () { 8193 8194 let $this = $(this), 8195 clientWrap = $this.find('.clients-wrapper'), 8196 clientFullWidth = clientWrap.outerWidth(), 8197 dataDuration = $this.data('duration'), 8198 windowWidth = window.innerWidth, 8199 tl = gsap.timeline(); 8200 8201 if (clientFullWidth < windowWidth) { 8202 8203 let i = 0, 8204 clientLenght = Math.ceil(windowWidth * 2 / clientFullWidth); 8205 8206 for (i = 1; i <= clientLenght; i++) { 8207 8208 clientWrap.clone().appendTo($this) 8209 } 8210 8211 $this.css('width', (clientLenght + 1) * clientFullWidth) 8212 8213 } else { 8214 8215 clientWrap.clone().appendTo($this) 8216 $this.css('width', (clientFullWidth * 2)) 8217 8218 } 8219 8220 function dragMove() { 8221 var x = parseInt($this.css('transform').split(',')[4]), 8222 speed = clientFullWidth / dataDuration 8223 8224 8225 if ($this.hasClass('left-to-right')) { 8226 gsap.fromTo($this, { 8227 x: x 8228 }, { 8229 x: 0, 8230 duration: (-1 * x) / speed, 8231 ease: 'none', 8232 onComplete: () => { 8233 gsap.set($this, { 8234 x: 0 8235 }) 8236 8237 tl.fromTo($this, { 8238 x: -1 * clientFullWidth 8239 }, { 8240 x: 0, 8241 duration: dataDuration, 8242 ease: 'none', 8243 repeat: -1 8244 }) 8245 } 8246 }) 8247 8248 } else { 8249 gsap.fromTo($this, { 8250 x: x 8251 }, { 8252 x: -1 * clientFullWidth, 8253 ease: 'none', 8254 duration: (clientFullWidth - (-1 * x)) / speed, 8255 onComplete: () => { 8256 gsap.set($this, { 8257 x: 0 8258 }) 8259 tl.to($this, { 8260 x: -1 * clientFullWidth, 8261 duration: dataDuration, 8262 ease: 'none', 8263 repeat: -1 8264 }) 8265 } 8266 }) 8267 } 8268 8269 } 8270 8271 if ($this.hasClass('left-to-right')) { 8272 tl.fromTo($this, { 8273 x: -1 * clientFullWidth 8274 }, { 8275 x: 0, 8276 duration: dataDuration, 8277 ease: 'none', 8278 repeat: -1, 8279 }) 8280 } else { 8281 tl.to($this, { 8282 x: -1 * clientFullWidth, 8283 duration: dataDuration, 8284 ease: 'none', 8285 repeat: -1 8286 }) 8287 } 8288 Draggable.create($this, { 8289 type: 'x', 8290 edgeResistance: 0.4, 8291 onDrag: (self) => { 8292 var x = parseInt($this.css('transform').split(',')[4]); 8293 if ($this.hasClass('left-to-right')) { 8294 if (x > 0) { 8295 gsap.set($this, { 8296 x: (-1 * clientFullWidth) + x 8297 }) 8298 } else if (x < -1 * clientFullWidth) { 8299 gsap.set($this, { 8300 x: x + (clientFullWidth) 8301 }) 8302 } 8303 } else { 8304 if (-1 * x > clientFullWidth) { 8305 gsap.set($this, { 8306 x: x + clientFullWidth 8307 }) 8308 } else if (x > 0) { 8309 gsap.set($this, { 8310 x: (-1 * clientFullWidth) + x 8311 }) 8312 } 8313 } 8314 }, 8315 onUpdate: () => { 8316 if (x > 0) { 8317 gsap.set($this, { 8318 x: (-1 * clientFullWidth) + x 8319 }) 8320 } else if (x < -1 * clientFullWidth) { 8321 gsap.set($this, { 8322 x: x + (clientFullWidth) 8323 }) 8324 } 8325 }, 8326 onDragEnd: () => { 8327 dragMove(); 8328 } 8329 }) 8330 $this.on('click', function () { 8331 dragMove() 8332 }) 8333 }) 8334 } 8335 8336 function naylaInfiniteCarousel() { 8337 8338 let clientCarousel = $('.nayla-infinite-carousel'); 8339 8340 clientCarousel.each(function () { 8341
8342 let $this = $(this), 8343 clientWrap = $this.find('.carousel--wrapper'), 8344 clientFullWidth = clientWrap.outerWidth(), 8345 dataDuration = $this.data('duration'), 8346 windowWidth = window.innerWidth, 8347 tl = gsap.timeline(); 8348 8349 if (clientFullWidth < windowWidth) { 8350 8351 let i = 0, 8352 clientLenght = Math.ceil(windowWidth * 2 / clientFullWidth); 8353 8354 for (i = 1; i <= clientLenght; i++) { 8355 8356 clientWrap.clone().appendTo($this) 8357 } 8358 8359 $this.css('width', (clientLenght + 1) * clientFullWidth) 8360 8361 } else { 8362 8363 clientWrap.clone().appendTo($this) 8364 $this.css('width', (clientFullWidth * 2)) 8365 8366 } 8367 8368 function dragMove() { 8369 var x = parseInt($this.css('transform').split(',')[4]), 8370 speed = clientFullWidth / dataDuration 8371 8372 8373 if ($this.hasClass('left-to-right')) { 8374 gsap.fromTo($this, { 8375 x: x 8376 }, { 8377 x: 0, 8378 duration: (-1 * x) / speed, 8379 ease: 'none', 8380 onComplete: () => { 8381 gsap.set($this, { 8382 x: 0 8383 }) 8384 8385 tl.fromTo($this, { 8386 x: -1 * clientFullWidth 8387 }, { 8388 x: 0, 8389 duration: dataDuration, 8390 ease: 'none', 8391 repeat: -1 8392 }) 8393 } 8394 }) 8395 8396 } else { 8397 gsap.fromTo($this, { 8398 x: x 8399 }, { 8400 x: -1 * clientFullWidth, 8401 ease: 'none', 8402 duration: (clientFullWidth - (-1 * x)) / speed, 8403 onComplete: () => { 8404 gsap.set($this, { 8405 x: 0 8406 }) 8407 tl.to($this, { 8408 x: -1 * clientFullWidth, 8409 duration: dataDuration, 8410 ease: 'none', 8411 repeat: -1 8412 }) 8413 } 8414 }) 8415 } 8416 8417 } 8418 8419 if ($this.hasClass('left-to-right')) { 8420 tl.fromTo($this, { 8421 x: -1 * clientFullWidth 8422 }, { 8423 x: 0, 8424 duration: dataDuration, 8425 ease: 'none', 8426 repeat: -1, 8427 }) 8428 } else { 8429 tl.to($this, { 8430 x: -1 * clientFullWidth, 8431 duration: dataDuration, 8432 ease: 'none', 8433 repeat: -1 8434 }) 8435 } 8436 Draggable.create($this, { 8437 type: 'x', 8438 edgeResistance: 0.4, 8439 onDrag: (self) => { 8440 var x = parseInt($this.css('transform').split(',')[4]); 8441 if ($this.hasClass('left-to-right')) { 8442 if (x > 0) { 8443 gsap.set($this, { 8444 x: (-1 * clientFullWidth) + x 8445 }) 8446 } else if (x < -1 * clientFullWidth) { 8447 gsap.set($this, { 8448 x: x + (clientFullWidth) 8449 }) 8450 } 8451 } else { 8452 if (-1 * x > clientFullWidth) { 8453 gsap.set($this, { 8454 x: x + clientFullWidth 8455 }) 8456 } else if (x > 0) { 8457 gsap.set($this, { 8458 x: (-1 * clientFullWidth) + x 8459 }) 8460 } 8461 } 8462 }, 8463 onUpdate: () => { 8464 if (x > 0) { 8465 gsap.set($this, { 8466 x: (-1 * clientFullWidth) + x 8467 }) 8468 } else if (x < -1 * clientFullWidth) { 8469 gsap.set($this, { 8470 x: x + (clientFullWidth) 8471 }) 8472 } 8473 }, 8474 onDragEnd: () => { 8475 dragMove(); 8476 } 8477 }) 8478 $this.on('click', function () { 8479 dragMove() 8480 }) 8481 }) 8482 } 8483 8484 function naylaTestimonials() { 8485 8486 let testimonials = $('.nayla-testimonials'); 8487 8488 testimonials.each(function () { 8489 8490 let testimonials = $(this), 8491 wrap = testimonials.find('.testimonials-wrapper'), 8492 single = wrap.find('.testimonial'), 8493 nav = testimonials.find('.testimonials-nav'), 8494 avatars = single.find('.testimonial-avatar'), 8495 prev = testimonials.find('.test-prev'), 8496 next = testimonials.find('.test-next'), 8497 current = testimonials.find('.test_current'), 8498 total = testimonials.find('.test_total'); 8499 8500 current.html('01') 8501 total.html(single.length > 10 ? single.length : '0' + single.length) 8502 8503 avatars.append('<svg height="100%" width="100%" viewbox="0 0 100 100"><circle cx="50" cy="50" r="40" /></svg>') 8504 8505 wrap.css('height', single.first().outerHeight()); 8506 single.first().addClass('active'); 8507 8508 8509 let tl = gsap.timeline({ 8510 repeat: -1 8511 }); 8512 8513 single.each(function (i) { 8514
8515 let $this = $(this), 8516 circle = $this.find('svg circle'); 8517 8518 $this.addClass('testimonial_' + i) 8519 8520 $this.attr('data-index', i); 8521 8522 tl.to($this, { 8523 opacity: 0, 8524 duration: 0.5, 8525 delay: 5, 8526 onComplete: () => { 8527 $this.removeClass('active'); 8528 $this.next().addClass('active'); 8529 } 8530 }, 'label' + i) 8531 8532 tl.from(circle, 5, { 8533 duration: 2, 8534 drawSVG: 0, 8535 onComplete: () => { 8536 gsap.set(circle, { 8537 drawSVG: 0 8538 }) 8539 } 8540 }, 'label' + i); 8541 8542 if ($this.next().length) { 8543 8544 tl.to($this.next(), { 8545 opacity: 1, 8546 duration: 0.5, 8547 delay: 6, 8548 onStart: () => { 8549 current.html($this.next().data('index') + 1 > 10 ? $this.next().data('index') + 1 : '0' + ($this.next().data('index') + 1)) 8550 } 8551 }, 'label' + i) 8552 8553 tl.to(wrap, { 8554 height: $this.next().outerHeight(), 8555 duration: 0.5, 8556 delay: 5.9, 8557 }, 'label' + i) 8558 8559 } else { 8560 8561 8562 tl.to($('.testimonial_0'), { 8563 opacity: 1, 8564 duration: 0.5, 8565 delay: 6, 8566 onStart: () => { 8567 current.html('01') 8568 } 8569 }, 'label' + i) 8570 8571 8572 } 8573 8574 }) 8575 8576 8577 8578 nav.on('mouseenter', () => { 8579 tl.pause() 8580 }) 8581 8582 nav.on('mouseleave', () => { 8583 tl.resume() 8584 }) 8585 8586 8587 let clicksForward = 0, 8588 clicksBackward = single.length; 8589 8590 next.on('click', () => { 8591 8592 clicksForward++ 8593 8594 if (clicksForward >= single.length) { 8595 clicksForward = -1 8596 clicksForward++ 8597 } 8598 8599 gsap.to(wrap, { 8600 opacity: 0, 8601 onComplete: () => { 8602 let tlSeek = 'label' + clicksForward; 8603 tl.seek(tlSeek) 8604 8605 gsap.to(wrap, { 8606 opacity: 1 8607 }) 8608 8609 } 8610 }) 8611 8612 }) 8613 8614 prev.on('click', () => { 8615 8616 clicksBackward-- 8617 8618 if (clicksBackward < 0) { 8619 8620 clicksBackward = single.length - 1 8621 clicksBackward-- 8622 } 8623 8624 8625 8626 8627 gsap.to(wrap, { 8628 opacity: 0, 8629 onComplete: () => { 8630 let tlSeek = 'label' + clicksBackward; 8631 tl.seek(tlSeek) 8632 8633 gsap.to(wrap, { 8634 opacity: 1 8635 }) 8636 8637 } 8638 }) 8639 8640 }) 8641 8642 8643 }) 8644 8645 8646 8647 } 8648 8649 const noise = () => { 8650 let canvas, ctx; 8651 8652 let wWidth, wHeight; 8653 8654 let noiseData = []; 8655 let frame = 0; 8656 8657 let loopTimeout; 8658 8659 8660 // Create Noise 8661 const createNoise = () => { 8662 const idata = ctx.createImageData(wWidth, wHeight); 8663 const buffer32 = new Uint32Array(idata.data.buffer); 8664 const len = buffer32.length; 8665 8666 for (let i = 0; i < len; i++) { 8667 if (Math.random() < 0.5) { 8668 buffer32[i] = 0xff000000; 8669 } 8670 } 8671 8672 noiseData.push(idata); 8673 }; 8674 8675 8676 // Play Noise 8677 const paintNoise = () => { 8678 if (frame === 9) { 8679 frame = 0; 8680 } else { 8681 frame++; 8682 } 8683 8684 ctx.putImageData(noiseData[frame], 0, 0); 8685 }; 8686 8687 8688 // Loop 8689 const loop = () => { 8690 paintNoise(frame); 8691 8692 loopTimeout = window.setTimeout(() => { 8693 window.requestAnimationFrame(loop); 8694 }, (1000 / 25)); 8695 }; 8696 8697 8698 // Setup 8699 const setup = () => { 8700 wWidth = window.innerWidth; 8701 wHeight = window.innerHeight; 8702 8703 canvas.width = wWidth; 8704 canvas.height = wHeight; 8705 8706 for (let i = 0; i < 10; i++) { 8707 createNoise(); 8708 } 8709 8710 loop(); 8711 }; 8712 8713 8714 // Reset 8715 let resizeThrottle; 8716 const reset = () => { 8717 window.addEventListener('resize', () => { 8718 window.clearTimeout(resizeThrottle); 8719 8720 resizeThrottle = window.setTimeout(() => { 8721 window.clearTimeout(loopTimeout); 8722 setup(); 8723 }, 200); 8724 }, false); 8725 }; 8726 8727 8728 // Init 8729 const init = (() => { 8730 canvas = document.getElementById('noised-bg'); 8731 ctx = canvas.getContext('2d'); 8732 8733 setup(); 8734 })(); 8735 }; 8736 8737 $('#noised-bg').length ? noise() : ''; 8738 8739 8740 8741 function naylaScrollButtons() { 8742 8743 let button = $('.scroll-button'); 8744 8745 button.each(function () { 8746
8747 let $this = $(this), 8748 target = $this.data('scroll-to'); 8749 8750 8751 8752 $this.on('click', () => { 8753 8754 8755 setTimeout(function () { 8756 8757 gsap.to(window, { 8758 duration: 1, 8759 scrollTo: isNaN(target) ? $(target).offset().top - 25 : target, 8760 ease: 'expo.inOut', 8761 }); 8762 8763 }, 100) 8764 8765 8766 8767 8768 8769 8770 }) 8771 8772 8773 }) 8774 8775 } 8776 8777 function naylaNumberCounter() { 8778 8779 let numberCt = $('.nayla-number-counter'); 8780 8781 numberCt.each(function () { 8782 8783 let $this = $(this), 8784 ctNumberSplit = new SplitText($this.find('.ct-number'), { 8785 type: 'words, chars', 8786 charsClass: 'ct-number-char', 8787 wordsClass: 'ct-number-word' 8788 }), 8789 ctChar = $this.find('.ct-number-char'), 8790 ctWord = $this.find('.ct-number-word'), 8791 dataCount = $this.data('count'), 8792 ctStart = $this.find('.count-start'), 8793 ctEnd = $this.find('.count-end'); 8794 8795 8796 8797 ctChar.each(function () { 8798 8799 let $this = $(this); 8800 8801 $this.wrapInner("<div class='value-loop-char'></div>") 8802 let valueLoop = $this.find('.value-loop-char'), 8803 valueChar = parseInt($this.text()), 8804 i = 0; 8805 8806 for (i = valueChar + 1; i < valueChar + dataCount; i++) { 8807 $this.prepend("<div class='value-loop-char'>" + i + "</div>") 8808 } 8809 8810 gsap.set($this.find('.value-loop-char'), { 8811 yPercent: '100' 8812 }) 8813 8814 $this.find('.value-loop-char').each(function () { 8815 let $this = $(this), 8816 valueNo = $this.text(); 8817 8818 if (valueNo > 9) { 8819 $this.html(parseInt(valueNo) - 10) 8820 } 8821 }) 8822 }) 8823 8824 let tl = gsap.timeline({ 8825 scrollTrigger: { 8826 trigger: $this, 8827 start: 'top bottom', 8828 }, 8829 }) 8830 8831 8832 if (ctStart.length == 1) { 8833 tl.to(ctStart, { 8834 y: 0, 8835 duration: $this.data('duration') == null ? 2.5 : $this.data('duration'), 8836 ease: 'expo.out', 8837 }, 0) 8838 8839 } 8840 8841 tl.to(ctChar, { 8842 yPercent: -100, 8843 duration: $this.data('duration') == null ? 2.5 : $this.data('duration'), 8844 stagger: $this.data('stagger') == null ? 0.1 : $this.data('stagger'), 8845 ease: 'expo.out', 8846 }, 0); 8847 8848 8849 if (ctEnd.length == 1) { 8850 tl.to(ctEnd, { 8851 y: 0, 8852 duration: $this.data('duration') == null ? 2.5 : $this.data('duration'), 8853 ease: 'expo.out', 8854 }, 0.5) 8855 8856 } 8857 8858 8859 8860 8861 }) 8862 } 8863 8864 function naylaTeamMember() { 8865 8866 const member = $('.nayla-team-member'); 8867 8868 member.each(function () { 8869 8870 let $this = $(this), 8871 cv = $this.find('.team-member-cv'), 8872 card = $this.find('.team-member-card'), 8873 image = $this.find('.team-member-image'), 8874 8875 parentHeight = $this.outerHeight(), 8876 cardHeight = card.outerHeight(), 8877 cvHeight = cv.outerHeight(); 8878 8879 image.append('<div class="cv-toggle"><span class="material-icons">add</span></div>') 8880 8881 8882 let cvToggle = $this.find('.cv-toggle'); 8883 8884 cvToggle.on('click', function () { 8885 8886 var clicks = $(this).data('clicks'), 8887 tl = gsap.timeline(); 8888 8889 if (clicks) { 8890 8891 //Close 8892 8893 $this.removeClass('active'); 8894 8895 tl.to(cv, { 8896 opacity: 0, 8897 duration: .5, 8898 display: 'none', 8899 onComplete: () => { 8900 gsap.set(card, { 8901 paddingBottom: cvHeight + 50, 8902 }) 8903 } 8904 8905 }) 8906 8907 if ($this.hasClass('overlay')) { 8908 8909 tl.to(card, { 8910 paddingBottom: 0, 8911 8912 }, 0.5) 8913 8914 } else { 8915 8916 tl.to(image, { 8917 height: 'auto', 8918 duration: .75, 8919 ease: 'expo.out' 8920 }, 0.5) 8921 8922 tl.to(card, { 8923 paddingBottom: 0, 8924 duration: .75, 8925 ease: 'expo.out' 8926 }, 0.5) 8927 8928 8929 } 8930 8931 8932 8933 8934 } else { 8935 8936 // Open 8937 8938 $this.addClass('active'); 8939 8940 if ($this.hasClass('overlay')) { 8941 8942 tl.to(card, { 8943 paddingBottom: cvHeight + 50, 8944 }) 8945 8946 } else { 8947 8948 tl.to(image, { 8949 height: parentHeight - (cardHeight + cvHeight + 50 + 15), 8950 duration: 1, 8951 ease: 'expo.out' 8952 }) 8953 8954 tl.to(card, { 8955 paddingBottom: cvHeight + 50, 8956 duration: 1, 8957 ease: 'expo.out' 8958 }, 0) 8959 8960 } 8961 8962 tl.to(cv, { 8963 opacity: 1, 8964 duration: .5, 8965 display: 'block', 8966 onStart: () => { 8967 gsap.set(card, { 8968 paddingBottom: 0, 8969 }) 8970 } 8971 8972 }) 8973 8974 } 8975 $(this).data("clicks", !clicks); 8976 8977 }) 8978 8979 8980 8981 8982 }) 8983 8984 8985 } 8986 8987 function naylaInfiniteTabs() { 8988 let naylaInfiniteTab = $('.nayla-infinite-tabs'); 8989 8990 naylaInfiniteTab.each(function () {
8991 let $this = $(this), 8992 tabTitleWrap = $this.find('.tab-title-wrap'), 8993 tabTitle = $this.find('.tab-title'); 8994 8995 $this.find('.tab-content').each(function (i) { 8996 i++; 8997 $(this).addClass('data-index_' + i) 8998 }) 8999 9000 tabTitle.each(function (i) { 9001 i++; 9002 $(this).attr('data-index', i) 9003 }) 9004 9005 tabTitle.on('click', function () { 9006 tabTitle.removeClass('active') 9007 $(this).addClass('active'); 9008 9009 let prevWidth = 0; 9010 9011 $(this).prevAll().each(function (i) { 9012 prevWidth += parseInt($(this).outerWidth(true), 10) 9013 }) 9014 gsap.to(tabTitleWrap, { 9015 x: -1 * prevWidth, 9016 duration: 1.5, 9017 ease: 'expo.out', 9018 onStart: () => { 9019 9020 let tl = gsap.timeline() 9021 9022 tl.to($this.find('.tab-content'), { 9023 opacity: 0, 9024 duration: $this.data('duration') / 2, 9025 onComplete: () => { 9026 $this.find('.tab-content').hide() 9027 $this.find('.tab-content.data-index_' + $(this).data('index')).show() 9028 } 9029 }) 9030 9031 tl.to($this.find('.tab-content.data-index_' + $(this).data('index')), { 9032 opacity: 1, 9033 duration: $this.data('duration') / 2 9034 }) 9035 9036 gsap.to($this.find('.tab-contents-wrap'), { 9037 height: $this.find('.tab-content.data-index_' + $(this).data('index')).outerHeight(true) 9038 }) 9039 9040 }, 9041 onComplete: () => { 9042 9043 $(this).prevAll().appendTo(tabTitleWrap) 9044 gsap.set(tabTitleWrap, { 9045 x: 0 9046 }) 9047 } 9048 }) 9049 }) 9050 9051 }) 9052 9053 // function updateOnResize() { 9054 // prevWidth = 0 9055 // $(this).prevAll().each(function (i) { 9056 // prevWidth += parseInt($(this).outerWidth(true), 10) 9057 // $this.find('.tab-content.data-index_' + $(this).data('index')).outerHeight(true) 9058 // }) 9059 // } 9060 // matchMedia.add(isPhone, () => { 9061 // updateOnResize() 9062 // }); 9063 // matchMedia.add(isTablet, () => { 9064 // updateOnResize() 9065 // }); 9066 // matchMedia.add(isDesktop, () => { 9067 // updateOnResize() 9068 // }); 9069 } 9070 9071 function initPages() { 9072 $('.project-page').length ? naylaProjectPages() : ''; 9073 naylaPortfolio(); 9074 naylaProductPage(); 9075 naylaSinglePostPage() 9076 9077 } 9078 9079 9080 9081 function initPageElements() { 9082 9083 naylaIcons() 9084 naylaHeading() 9085 naylaCartButton() 9086 naylaTeamMember() 9087 naylaCircleText(); 9088 naylaButtons(); 9089 naylaMarquee() 9090 naylaServices() 9091 naylaNumberCounter(); 9092 naylaAccordion(); 9093 naylaInfiniteTabs(); 9094 naylaClinetsCarousel(); 9095 naylaInfiniteCarousel(); 9096 naylaDynamicGrid(); 9097 naylaForms(); 9098 gridScroll() 9099 naylaTestimonials() 9100 // naylaImageCompare() 9101 9102 naylaDynamicCarousel(); 9103 naylaParallax(); 9104 naylaLightbox() 9105 naylaDynamicList(); 9106 detectPov() 9107 circleMaskBg() 9108 } 9109 9110 function initShowcases() { 9111 showcaseWall(); 9112 showcaseList(); 9113 showcaseFullscreenSlideshow(); 9114 showcaseMinimalList(); 9115 showcaseCarousel(); 9116 showcaseInfiniteGrid(); 9117 showcaseFullscreenCarousel(); 9118 horizontalList(); 9119 showcaseFullscreenWall(); 9120 showcaseInteractiveGrid() 9121 showcaseCards(); 9122 showcase3dTitles() 9123 } 9124 9125 9126 9127 if (($('.page-loader').length) && (!sessionStorage.getItem('doNotShow'))) { 9128 sessionStorage.setItem('doNotShow', 'true'); 9129 setTimeout(function () { 9130 9131 pageLoader() 9132 9133 }, 200) 9134 } else { 9135 $('.page-loader').remove() 9136 } 9137 9138 naylaMouseCursor(true); 9139 smoothScroll(); 9140 9141 9142 9143 $(window).on('load', function () { 9144 9145 winLoaded = true; 9146 9147 window.scrollTo(0, 0); 9148 9149 naylaVideo($('.nayla-video')); 9150 naylaGeneralAnims($('.has-anim')); 9151 naylaTextAnims(); 9152 naylaListAnimations(); 9153 naylaImageAnims() 9154 naylaParallaxImages(); 9155 9156 9157 9158 9159 9160 9161 9162 initShowcases(); 9163 initPageElements(); 9164 naylaSections(); 9165 initPages(); 9166 9167 naylaHeader(); 9168 naylaScrollButtons() 9169 9170 document.querySelector('.page-loader') ? ScrollTrigger.disable() : null; 9171 9172 ScrollTrigger.refresh(true); // <- This time is in seconds 9173 9174 9175 }) 9176 9177 9178
9179 ////////////////////////// 9180 // Page Transitions // 9181 ////////////////////////// 9182 9183 9184 9185 let caption = $('.page-transition-caption'); 9186 9187 new SplitText(caption, { 9188 type: 'lines, chars', 9189 linesClass: 'capt_lines', 9190 charsClass: 'capt_chars' 9191 }) 9192 9193 function transitionCaption(tl, intro, outro) { 9194 9195 let chars = $('.capt_chars'); 9196 9197 if (intro) { 9198 9199 tl.from(chars, { 9200 yPercent: 100, 9201 duration: 1.5, 9202 ease: 'expo.out', 9203 delay: .4, 9204 stagger: 0.025 9205 }, 0) 9206 } 9207 9208 if (outro) { 9209 9210 tl.to(chars, { 9211 yPercent: -100, 9212 duration: .5, 9213 ease: 'expo.in', 9214 stagger: -0.015, 9215 onComplete: () => { 9216 gsap.set(chars, { 9217 clearProps: 'y' 9218 }) 9219 } 9220 }, 0) 9221 9222 } 9223 9224 } 9225 9226 9227 let transitions = $('.nayla-page-transition'), 9228 block, paper, overlay, up, down, left, right, opacity, pageOver; 9229 9230 transitions.hasClass('up') ? up = true : transitions.hasClass('down') ? down = true : transitions.hasClass('left') ? left = true : transitions.hasClass('right') ? right = true : ''; 9231 9232 transitions.hasClass('block') ? block = true : transitions.hasClass('overlay') ? overlay = true : transitions.hasClass('opacity') ? opacity = true : transitions.hasClass('page-over') ? pageOver = true : ''; 9233 9234 9235 9236 function blockTrans() { 9237 9238 let blocksCount = Math.ceil($(window).outerHeight() / 75), 9239 i = 0; 9240 9241 for (i = 0; i <= blocksCount; i++) { 9242 9243 transitions.append('<span class="transition-block"></span>') 9244 } 9245 } 9246 9247 block ? blockTrans() : ''; 9248 9249 9250 function pageOverDef() { 9251 9252 $('<span class="page-over-ovs"></span>').insertBefore(transitions) 9253 9254 } 9255 9256 pageOver ? pageOverDef() : ''; 9257 9258 function animateBlocks(time, intro, outro) { 9259 9260 let direction = left ? 'inset(0% 100% 0% 0%)' : right ? 'inset(0% 0% 0% 100%)' : up ? 'inset(100% 0% 0% 0%)' : down ? 'inset(0% 0% 100% 0%)' : '', 9261 stagger = up ? -0.04 : down ? 0.04 : left ? 0.04 : right ? -0.04 : '', 9262 ease = up ? 'power4.out' : down ? 'power4.out' : left ? 'power4.inOut' : right ? 'power4.inOut' : '', 9263 duration = up ? .65 : down ? .65 : left ? 1 : right ? 1 : ''; 9264 9265 if (intro) { 9266 9267 transitions.css('visibility', 'visible'); 9268 9269 time.to('.transition-block', { 9270 clipPath: 'inset(0% 0% 0% 0%)', 9271 duration: duration, 9272 ease: ease, 9273 stagger: stagger 9274 }) 9275 9276 9277 } else if (outro) { 9278 9279 time.to('.transition-block', { 9280 clipPath: direction, 9281 duration: duration, 9282 ease: ease, 9283 stagger: stagger 9284 }) 9285 } 9286 } 9287 9288 function animateOverlay(time, intro, outro) { 9289 9290 if (intro) { 9291 9292 time.to(transitions, { 9293 height: '100vh', 9294 width: '100vw', 9295 duration: 1, 9296 ease: 'power3.inOut' 9297 }, 0) 9298 9299 // 9300 // time.to('#content, .project-page-header', { 9301 // y: up ? -100 : down ? 100 : 0, 9302 // x: left ? 100 : right ? -100 : 0, 9303 // duration: 1, 9304 // ease: 'expo.inOut', 9305 // }, 0) 9306 9307 } 9308 9309 9310 if (outro) { 9311 9312 let top = up ? 0 : down ? 'unset' : '', 9313 bottom = up ? 'unset' : down ? 0 : '', 9314 height = up ? '0vh' : down ? '0vh' : left ? '100vh' : right ? '100vh' : '', 9315 width = up ? '100vw' : down ? '100vw' : left ? '0vh' : right ? '0vh' : '', 9316 lefto = left ? 'unset' : right ? 0 : '', 9317 righto = left ? 0 : right ? 'unset' : ''; 9318 9319 time.to(transitions, { 9320 height: height, 9321 width: width, 9322 duration: 1, 9323 left: lefto, 9324 right: righto, 9325 top: top, 9326 bottom: bottom, 9327 ease: 'power3.inOut' 9328 }, 0) 9329 9330 9331 // time.from('#content, .project-page-header', { 9332 // y: up ? 100 : down ? -100 : 0, 9333 // x: left ? -100 : right ? 100 : 0, 9334 // duration: 1, 9335 // ease: 'power3.inOut' 9336 // }, 0) 9337 9338 } 9339 9340 } 9341 9342 function animateOpacity(time, intro, outro) { 9343 9344 if (intro) { 9345 9346 time.to('#content, .project-page-header', { 9347 y: up ? -100 : down ? 100 : 0, 9348 x: left ? 100 : right ? -100 : 0, 9349 opacity: 0, 9350 duration: 1, 9351 ease: 'power3.in', 9352 }, 0) 9353 9354 } 9355 9356 9357 if (outro) { 9358 9359 time.from('#content, .project-page-header', { 9360 y: up ? 100 : down ? -100 : 0, 9361 x: left ? -100 : right ? 100 : 0, 9362 opacity: 0, 9363 duration: 1, 9364 ease: 'power3.out', 9365 }, 0) 9366 9367 } 9368 9369 9370 } 9371 9372 function animatePageOver(time, intro, outro) { 9373 9374 let origin = $(window).scrollTop(), 9375 brightOverlay = '<span class="bright-ov"></span>'; 9376 9377 gsap.set('#content , .project-page-header', { 9378 transformOrigin: 'center ' + origin 9379 }) 9380 9381 if (intro) { 9382 9383 time.to(transitions, { 9384 height: '100vh', 9385 width: '100vw', 9386 duration: 1.5, 9387 ease: 'expo.inOut' 9388 9389 }, 0) 9390 9391 time.to('.page-over-ovs', { 9392 opacity: 1, 9393 scale: 1, 9394 duration: 1, 9395 9396 }, 0) 9397 9398 9399 } 9400 9401 9402 if (outro) { 9403 9404 gsap.set('.page-over-ovs', { 9405 clearProps: 'all' 9406 }) 9407 9408 time.to(transitions, { 9409 opacity: 0, 9410 9411 duration: 1 9412 }, 0) 9413 9414 9415 } 9416 9417 } 9418 9419 9420 9421 // General Resets 9422 9423 function getMediaToCenter() { 9424 9425 var media = document.querySelector('.transition--media') 9426 9427 let state = Flip.getState(media, { 9428 props: 'top, left, x, y' 9429 }), 9430 height = media.offsetHeight, 9431 width = media.offsetWidth; 9432 9433 gsap.set(media, { 9434 rotate: 0, 9435 position: 'fixed', 9436 height: height, 9437 width: width, 9438 top: window.innerHeight / 2, 9439 left: window.innerWidth / 2, 9440 xPercent: -50, 9441 yPercent: -50, 9442 x: 0, 9443 y: 0, 9444 rotate: 0, 9445 opacity: 1, 9446 clipPath: 'inset(0%)', 9447 display: 'block', 9448 maxHeight: 'unset', 9449 maxWidth: 'unset' 9450 }) 9451 9452 Flip.from(state, { 9453 duration: 1, 9454 absolute: true, 9455 absoluteOnLeave: true, 9456 }); 9457 9458 } 9459 9460 9461 function getMediaPosition() { 9462 9463 var media = document.querySelector('.transition--media') 9464 9465 let state = Flip.getState(media, { 9466 props: 'top, left, x, y' 9467 }), 9468 height = media.offsetHeight, 9469 width = media.offsetWidth; 9470 9471 gsap.set(media, { 9472 rotate: 0, 9473 position: 'fixed', 9474 height: height, 9475 width: width, 9476 top: window.innerHeight / 2, 9477 yPercent: -50, 9478 9479 }) 9480 9481 Flip.from(state, { 9482 duration: 1, 9483 absolute: true, 9484 absoluteOnLeave: true, 9485 }); 9486 9487 } 9488 9489 function animateMedia(tl, fullscreen, slide, mask, direction) { 9490 9491 var media = document.querySelector('.transition--media'); 9492 9493 if (fullscreen) { 9494 9495 tl.to(media, { 9496 width: '100vw', 9497 height: '100vh', 9498 duration: 1, 9499 ease: 'expo.inOut', 9500 }) 9501 9502 9503 } 9504 9505 if (mask) { 9506 9507 tl.to(media, { 9508 clipPath: 'inset(0% 0% 100% 0%)', 9509 duration: 1, 9510 ease: 'expo.inOut', 9511 }, 1.5) 9512 9513 9514 } 9515 9516 9517 9518 } 9519
9520 function projectBackground(current, next, tl) { 9521 9522 9523 if (current === next) { 9524 9525 9526 9527 } else { 9528 9529 let ov = document.createElement('span') 9530 ov.classList.add('project-trans-overlay'); 9531 ov.style.backgroundColor = next; 9532 9533 document.querySelector('#page').append(ov); 9534 9535 9536 tl.to(ov, { 9537 height: '100svh', 9538 duration: 1, 9539 ease: 'expo.inOut', 9540 onStart: () => { 9541 9542 setTimeout(function () { 9543 headerLayoutChange(false, next, false, false) 9544 9545 }, 650) 9546 9547 9548 9549 } 9550 }, 1.75) 9551 9552 } 9553 9554 9555 9556 } 9557 9558 // Showcase Animations 9559 9560 function fullscreenCarouselOut(tl) { 9561 9562 let slides = $('.showcase-fullscreen-carousel .showcase-project.swiper-slide').not('.swiper-slide-active'), 9563 title = $('.showcase-project.swiper-slide-active').find('.project-title'); 9564 9565 new SplitText(title, { 9566 type: 'chars', 9567 charsClass: 'fc_char' 9568 }) 9569 9570 tl.to([slides, '.sfc-fraction', '.showcase-footer', '.project-button'], { 9571 opacity: 0 9572 }, 0) 9573 9574 } 9575 9576 function fullscreenCarouselIn(tl) { 9577 9578 tl.to('.fc_char', { 9579 yPercent: -100, 9580 duration: .5, 9581 stagger: 0.05, 9582 ease: 'power3.in' 9583 }) 9584 } 9585 9586 function fullscreenSlideshowOut(tl) { 9587 9588 9589 let active = $('.fs-slideshow-wrap .showcase-project.active'); 9590 9591 tl.to([active.find('.pt_char'), active.find('.pd_word span')], { 9592 yPercent: -100, 9593 duration: .75, 9594 ease: 'expo.in', 9595 stagger: 0.02 9596 }, 0) 9597 9598 tl.to('.showcase-footer', { 9599 opacity: 0 9600 }, 0) 9601 9602 tl.to('.project-button', { 9603 opacity: 0 9604 }, 0) 9605 9606 } 9607 9608 function showcaseListOut(tl) { 9609 9610 tl.to('.sfl-projects .project-title, .sfl-projects .project-meta', { 9611 yPercent: -100, 9612 opacity: 0 9613 }, 0) 9614 9615 9616 } 9617 9618 9619 function outAnimShowcaseCarousel(time) { 9620 9621 let carousel = $('.showcase-carousel'), 9622 project = carousel.find('.showcase-project.active'), 9623 title = carousel.find('.project-title'), 9624 image = carousel.find('.swiper-slide-active .slide-bgimg'); 9625 9626 image.addClass('trans-image') 9627 carousel.addClass('animating'); 9628 9629 time.to(title, { 9630 yPercent: -100, 9631 duration: 1, 9632 ease: 'expo.inOut' 9633 }, 0) 9634 9635 time.to([$('.showcase-footer'), $('.sc-lines')], { 9636 opacity: 0, 9637 duration: 1, 9638 ease: 'expo.inOut' 9639 }, 0) 9640 9641 } 9642 9643 function minimalListOut(tl) { 9644 9645 tl.to('.sml-wrapper .project-title', { 9646 9647 yPercent: -100, 9648 duration: 1, 9649 ease: 'power4.in', 9650 stagger: 0.025 9651 9652 }, 0) 9653 9654 } 9655 9656 function fullscreenWallOut(tl) { 9657 9658 tl.to('.title_line', { 9659 yPercent: -25, 9660 rotateX: -90, 9661 duration: 1, 9662 ease: 'expo.in' 9663 }, 0) 9664 9665 tl.to('.project-title, .showcase-footer', { 9666 opacity: 0, 9667 duration: 1, 9668 ease: 'expo.in' 9669 }, 0) 9670 9671 } 9672 9673 function showcase3dTitlesOut(tl) { 9674 9675 let currRot = $('.s3t-projects-wrap').css('transform'); 9676 9677 tl.to('.s3t-projects-wrap .project-title', { 9678 y: -200, 9679 duration: 1, 9680 ease: 'expo.in', 9681 opacity: 0 9682 }, 0) 9683 9684 tl.to('.showcase-footer', { 9685 9686 opacity: 0 9687 }, 0) 9688 9689 9690 9691 } 9692 9693 9694 barba.init({ 9695 debug: false, 9696 cacheIgnore: true, 9697 transitions: [ 9698 { 9699 name: 'default-transition', 9700 leave() { 9701 9702 return new Promise(function (resolve, reject) { 9703 9704 transitions.addClass('running') 9705 9706 let tl = gsap.timeline({ 9707 9708 onComplete: () => { 9709 9710 resolve(); 9711 } 9712 }); 9713 9714 block ? animateBlocks(tl, true, false) : overlay ? animateOverlay(tl, true, false) : opacity ? animateOpacity(tl, true, false) : pageOver ? animatePageOver(tl, true, false) : ''; 9715 9716 transitionCaption(tl, true, false) 9717 }) 9718 9719 }, 9720 beforeEnter() { 9721 9722 return new Promise(function (resolve, reject) { 9723 9724 let tl = gsap.timeline({ 9725 onStart: () => { 9726 resolve(); 9727 transitions.removeClass('running') 9728 }, 9729 onComplete: () => { 9730 9731 gsap.set(transitions, { 9732 clearProps: 'all' 9733 }) 9734 9735 if (block) { 9736 9737 gsap.set('.transition-block', { 9738 clearProps: 'all' 9739 }) 9740 9741 } 9742 9743 } 9744 }); 9745 9746 block ? animateBlocks(tl, false, true) : overlay ? animateOverlay(tl, false, true) : opacity ? animateOpacity(tl, false, true) : pageOver ? animatePageOver(tl, false, true) : ''; 9747 9748 transitionCaption(tl, false, true) 9749 9750 }) 9751 } 9752 9753 }, { 9754 name: 'fullscreen-menu-transition', 9755 from: { 9756 custom: ({ 9757 trigger 9758 }) => { 9759 return trigger.classList && trigger.classList.contains('menu-link'); 9760 }, 9761 }, 9762 leave() { 9763 9764 return new Promise(function (resolve, reject) { 9765 9766 transitions.addClass('running') 9767 9768 let tl = gsap.timeline({ 9769 9770 onComplete: () => { 9771 9772 resolve(); 9773 9774 9775 } 9776 }), 9777 toggle = $('.menu-toggle'); 9778 9779 toggle.trigger('click') 9780 gsap.getTweensOf('.menu-overlay')[0].kill(); 9781 9782 9783 gsap.set('.nayla-page-transition', { 9784 height: '100vh', 9785 width: '100vw', 9786 background: 'transparent', 9787 transitionDuration: '0s' 9788 }) 9789 9790 transitionCaption(tl, true, false) 9791 9792 }) 9793 9794 }, 9795 beforeEnter() { 9796 9797 return new Promise(function (resolve, reject) { 9798 9799 let tl = gsap.timeline({ 9800 onStart: () => { 9801 resolve(); 9802 transitions.removeClass('running') 9803 }, 9804 onComplete: () => { 9805 gsap.set(transitions, { 9806 clearProps: 'all' 9807 }) 9808 } 9809 9810 }),
9811 overlay = $('.menu-overlay'); 9812 9813 tl.to(overlay, { 9814 height: 0, 9815 duration: .7, 9816 ease: 'expo.inOut', 9817 onComplete: () => { 9818 9819 $('.menu-toggle').removeClass('active'); 9820 $('#site-navigation').removeClass('active'); 9821 } 9822 }, .5) 9823 9824 transitionCaption(tl, false, true) 9825 9826 9827 9828 }) 9829 } 9830 }, 9831 { 9832 name: 'media-center-to-image', 9833 from: { 9834 custom: ({ 9835 trigger 9836 }) => { 9837 return trigger.classList && trigger.classList.contains('sc-link'); 9838 }, 9839 }, 9840 to: { 9841 namespace: ['project-half-image', 'project-gallery-horizontal', 'project-no-image', 'project-gallery-vertical', 'project-video', 'project-creative'] 9842 }, 9843 leave() { 9844 9845 return new Promise(function (resolve, reject) { 9846 9847 let tl = gsap.timeline({ 9848 onComplete: () => { 9849 resolve() 9850 } 9851 }) 9852 9853 getMediaToCenter() 9854 9855 $('div.showcase-carousel').length ? outAnimShowcaseCarousel(tl) : $('div.showcase-fullscreen-carousel').length ? fullscreenCarouselOut(tl) : $('div.showcase-fullscreen-slideshow').length ? fullscreenSlideshowOut(tl) : $('div.showcase-minimal-list').length ? minimalListOut(tl) : $('div.showcase-fullscreen-wall').length ? fullscreenWallOut(tl) : $('div.showcase-list').length ? showcaseListOut(tl) : $('div.showcase-3d-titles').length ? showcase3dTitlesOut(tl) : null; 9856 9857 }) 9858 }, 9859 beforeEnter() { 9860 9861 return new Promise(function (resolve, reject) { 9862 9863 let tl = gsap.timeline({ 9864 onComplete: () => { 9865 resolve() 9866 document.querySelector('.project-trans-overlay') ? document.querySelector('.project-trans-overlay').remove() : null; 9867 } 9868 }) 9869 9870 let next = $('.project-page-header').css('backgroundColor'), 9871 current = $('.sfc-overlay').css('backgroundColor') 9872 9873 projectBackground(current, next, tl) 9874 9875 animateMedia(tl, false, false, true) 9876 9877 $('div.showcase-fullscreen-carousel').length ? fullscreenCarouselIn(tl) : null; 9878 9879 }) 9880 9881 } 9882 }, { 9883 name: 'media-center-to-full-image', 9884 from: { 9885 custom: ({ 9886 trigger 9887 }) => { 9888 return trigger.classList && trigger.classList.contains('sc-link'); 9889 }, 9890 }, 9891 to: { 9892 namespace: ['project-fullscreen-image', 'project-tall'] 9893 }, 9894 leave() { 9895 9896 return new Promise(function (resolve, reject) { 9897 9898 let tl = gsap.timeline({ 9899 delay: 1, 9900 onComplete: () => { 9901 resolve() 9902 } 9903 }) 9904 9905 getMediaToCenter(); 9906 9907 $('div.showcase-carousel').length ? outAnimShowcaseCarousel(tl) : $('div.showcase-fullscreen-carousel').length ? fullscreenCarouselOut(tl) : $('div.showcase-fullscreen-slideshow').length ? fullscreenSlideshowOut(tl) : $('div.showcase-minimal-list').length ? minimalListOut(tl) : $('div.showcase-fullscreen-wall').length ? fullscreenWallOut(tl) : $('div.showcase-list').length ? showcaseListOut(tl) : $('div.showcase-3d-titles').length ? showcase3dTitlesOut(tl) : null; 9908 9909 9910 }) 9911 }, 9912 beforeEnter() { 9913 9914 return new Promise(function (resolve, reject) { 9915 9916 let tl = gsap.timeline({ 9917 onComplete: () => { 9918 resolve() 9919 } 9920 }) 9921 9922 animateMedia(tl, true) 9923 9924 $('div.showcase-fullscreen-carousel').length ? fullscreenCarouselIn(tl) : null; 9925 9926 }) 9927 9928 } 9929 }, 9930 9931// }, { 9932// name: 'project-to-fs-project', 9933// from: { 9934// custom: ({ 9935// trigger 9936// }) => { 9937// return trigger.classList && trigger.classList.contains('next-project-link'); 9938// }, 9939// }, 9940// to: { 9941// namespace: ['project-tall', 'project-fullscreen-image'] 9942// }, 9943// leave() { 9944// 9945// return new Promise(function (resolve, reject) { 9946// 9947// transitions.addClass('running') 9948// 9949// let tl = gsap.timeline({ 9950// 9951// onComplete: () => { 9952// resolve(); 9953// 9954// } 9955// }), 9956// sc = $(document).innerHeight() - $('#footer').outerHeight() - $(window).outerHeight(), 9957// image = $('.nayla-next-project').find('.next-project-image'); 9958// 9959// 9960//// 9961//// tl.to(window, {
9962//// scrollTo: sc, 9963//// duration: 1 9964//// }); 9965//// 9966// 9967// 9968// tl.to(image, { 9969// width: '100%', 9970// height: '100%', 9971// delay: .5, 9972// maxHeight: '100%', 9973// duration: 1.4, 9974// ease: 'expo.inOut' 9975// }) 9976// 9977// tl.to('.next-project-year, .next-project-category', { 9978// opacity: 0 9979// }) 9980// 9981// }) 9982// 9983// }, 9984// beforeEnter() { 9985// 9986// return new Promise(function (resolve, reject) { 9987// 9988// let tl = gsap.timeline({ 9989// onStart: () => { 9990// resolve(); 9991// transitions.removeClass('running') 9992// }, 9993// onComplete: () => { 9994// gsap.set(transitions, { 9995// clearProps: 'all' 9996// }) 9997// } 9998// 9999// }), 10000// overlay = $('.menu-overlay'); 10001// 10002// }) 10003// } 10004// 10005// }, { 10006// name: 'project-to-horizontal-gallery', 10007// from: { 10008// custom: ({ 10009// trigger 10010// }) => { 10011// return trigger.classList && trigger.classList.contains('next-project-link'); 10012// }, 10013// }, 10014// to: { 10015// namespace: ['project-gallery-horizontal'] 10016// }, 10017// leave() { 10018// 10019// return new Promise(function (resolve, reject) { 10020// 10021// transitions.addClass('running') 10022// 10023// let tl = gsap.timeline({ 10024// 10025// onComplete: () => { 10026// resolve(); 10027// 10028// } 10029// }), 10030// sc = $(document).innerHeight() - $('#footer').outerHeight() - $(window).outerHeight(), 10031// image = $('.nayla-next-project').find('.next-project-image'); 10032// 10033// image.addClass('trans-image'); 10034// 10035// tl.to(window, { 10036// scrollTo: sc, 10037// duration: 1 10038// }); 10039// 10040// tl.to('.next-project-title', { 10041// opacity: 0 10042// }, 0) 10043// 10044// }) 10045// 10046// }, 10047// beforeEnter() { 10048// 10049// return new Promise(function (resolve, reject) { 10050// 10051// let tl = gsap.timeline({ 10052// onComplete: () => { 10053// resolve(); 10054// } 10055// 10056// }), 10057// overlay = $('.menu-overlay'); 10058// 10059// 10060// 10061// tl.to('.trans-image', { 10062// clipPath: 'inset(0% 0% 100% 0%)', 10063// duration: 1.4, 10064// ease: 'expo.inOut' 10065// }, 0) 10066// 10067// 10068// }) 10069// } 10070// 10071// }, { 10072 ] 10073 }) 10074 10075 10076 if (history.scrollRestoration) { 10077 history.scrollRestoration = "manual"; 10078 } 10079 ScrollTrigger.clearScrollMemory('manual'); 10080 10081 barba.hooks.before((data) => { 10082 10083 $('html').addClass('loading'); 10084 disableScroll(); 10085 10086 $('#mouseCursor').removeClass('hover-size hover-text hover-icon') 10087 10088 10089 }); 10090 10091 10092 barba.hooks.enter((data) => { 10093 10094 var response = data.next.html.replace(/(<\/?)body( .+?)?>/gi, '$1notbody$2>', data.next.html), 10095 bodyClasses = $(response).filter('notbody').attr('class'), 10096 bodyStyles = $(response).filter('notbody').attr('style'), 10097 headerClasses = $(response).filter('notbody').find('#header').attr('class'), 10098 headerInner = $(response).filter('notbody').find('#header').html(); 10099 10100 10101 10102 if ($('body').hasClass('smooth-scroll')) { 10103 10104 let aliothSmoother = ScrollSmoother.get(); 10105 aliothSmoother.scrollTo(0, false); 10106 window.scrollTo(0, 0); 10107 10108 } else { 10109 10110 window.scrollTo(0, 0); 10111 } 10112 10113 if (siteHeader.hasClass('menu-open')) { 10114 10115 setTimeout(function () { 10116 siteHeader.attr('class', headerClasses) 10117 10118 }, 1000) 10119 10120 } else { 10121 siteHeader.attr('class', headerClasses) 10122 } 10123 10124 10125 // $('body').attr('style', bodyStyles) 10126 $('body').attr('class', bodyClasses); 10127 10128 let Alltrigger = ScrollTrigger.getAll() 10129 10130 for (let i = 0; i < Alltrigger.length; i++) { 10131 Alltrigger[i].kill(true) 10132 } 10133 10134 gsap.set(siteHeader, { 10135 clearProps: 'all' 10136 }) 10137 10138 }); 10139 10140 barba.hooks.after((data) => { 10141 10142 $('html').removeClass('loading') 10143 enableScroll(); 10144 10145 10146 10147 naylaTextAnims() 10148 naylaGeneralAnims($('main .has-anim')); 10149 10150 naylaListAnimations(); 10151 naylaImageAnims() 10152 naylaParallaxImages(); 10153 10154 initShowcases(); 10155 initPageElements(); 10156 naylaSections(); 10157 initPages(); 10158 naylaVideo($('#primary').find('.nayla-video')); 10159 10160 ScrollTrigger.refresh(true); 10161 naylaMouseCursor(false); 10162 10163 10164 // var vids = document.querySelectorAll("video"); 10165 // 10166 // vids.forEach(vid => { 10167 //
10168 // var playPromise = vid.play(); 10169 // 10170 // if (playPromise !== undefined) { 10171 // playPromise.then(_ => {}).catch(error => {}); 10172 // }; 10173 // }); 10174 10175 setTimeout(function () { 10176 10177 let allInstances = ScrollTrigger.getAll(); 10178 10179 let fixedHeader = ScrollTrigger.getById('fixed_header'); 10180 10181 allInstances.forEach(function (st) { 10182 10183 10184 10185 10186 if ((st.pin != null) && (st.start <= 0)) { 10187 10188 let fixedStart = 'top+=' + st.end + ' top'; 10189 10190 ScrollTrigger.create({ 10191 trigger: 'body', 10192 pin: siteHeader, 10193 start: 'top top', 10194 end: fixedStart, 10195 id: 'header_pin' 10196 }) 10197 } 10198 10199 }) 10200 10201 ScrollTrigger.refresh(true); 10202 10203 10204 10205 }, 50) 10206 10207 10208 10209 10210 10211 }); 10212 10213 10214 10215 10216 10217}(jQuery));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.