1gsap.registerPlugin(ScrollTrigger); 2 3let scroll; 4const transitionOffset = 360; 5 6initPageTransitions(); 7 8// Animation - Page Loader 9function initLoaderShort() { 10 11 var tl = gsap.timeline(); 12 13 14 tl.set(".loading-screen", { 15 opacity: 0, 16 }, 0); 17 18 tl.call(function() { 19 $('.loading-container').removeClass('loading-active'); 20 }); 21 22 tl.call(function() { 23 pageTransitionOut(); 24 scroll.start(); 25 }, null, 0); 26} 27 28// Animation - Page Loader 29function initLoader() { 30 31 var tl = gsap.timeline(); 32 33 tl.call(function() { 34 scroll.stop(); 35 }, null, 0); 36 37 tl.set("html", { 38 cursor: "wait" 39 }); 40 41 tl.to(".loading-screen .overlay-logo", { 42 duration: 1, 43 scaleX: 0, 44 ease: "Expo.easeInOut" 45 }); 46 47 tl.to(".loading-screen .count-up", { 48 duration: 1, 49 innerText: 100, 50 snap: { 51 innerText: 1 52 }, 53 ease: "Expo.easeInOut" 54 }, "<"); 55 56 tl.to(".loading-screen .loading-logo svg", { 57 scale: 0.8, 58 ease: "Power3.easeInOut", 59 duration: 0.8, 60 delay: 0.25, 61 opacity: 0 62 }); 63 64 tl.to(".loading-screen .counter > *", { 65 yPercent: -100, 66 ease: "Power3.easeInOut", 67 duration: 0.8, 68 }, "<"); 69 70 tl.to(".loading-screen", { 71 opacity: 0, 72 duration: 1.2, 73 ease: "Power3.easeInOut" 74 }, "<"); 75 76 tl.call(function() { 77 $('.loading-container').removeClass('loading-active'); 78 }); 79 80 tl.set("html", { 81 cursor: "auto", 82 }); 83 84 tl.call(function() { 85 pageTransitionOut(); 86 scroll.start(); 87 }, null, 1.4); 88} 89 90// Animation - Page Leave 91function pageTransitionIn() { 92 var tl = gsap.timeline(); 93 94 tl.call(function() { 95 scroll.stop(); 96 }, null, 0); 97 98 tl.to(".loading-screen", { 99 opacity: 1, 100 duration: 0.35, 101 ease: "Power1.easeIn" 102 }); 103 104 tl.to(".loading-screen", { 105 opacity: 0, 106 duration: 1.2, 107 delay: 0.2, 108 ease: "Power2.easeOut", 109 }); 110} 111 112// Animation - Page Enter 113function pageTransitionOut() { 114 var tl = gsap.timeline(); 115 116 tl.call(function() { 117 scroll.start(); 118 }, null, 0); 119 120 if(document.querySelector('.animate-border-bottom')) { 121 tl.from(".animate-border-bottom", { 122 scaleX: 0, 123 duration: 1.5, 124 ease: Expo.easeOut, 125 clearProps: "all" 126 }, "0.25"); 127 } 128 129 if(document.querySelector('.locations-grid > .col, .default-header .col-row, .animate-slide-in')) { 130 tl.from(".locations-grid > .col, .default-header .col-row, .animate-slide-in", { 131 opacity: 0, 132 y: "2em", 133 duration: 1.5, 134 ease: "Expo.easeOut", 135 delay: 0, 136 stagger: 0.05, 137 clearProps: "all" 138 }, "0.25"); 139 } 140 141} 142 143let historyStack = []; // Array to keep track of page history 144function initPageTransitions() { 145 146 // Reset scroll on page next 147 history.scrollRestoration = "manual"; 148
149 barba.hooks.afterEnter(() => { 150 window.scrollTo(0, 0); 151 ScrollTrigger.refresh(); 152 }); 153 154 barba.hooks.leave(() => { 155 initBasicFunctions(); 156 }); 157 158 // Functions Before 159 function initResetDataBefore() { 160 $('[data-navigation-status]').attr('data-navigation-status', 'not-active'); 161 } 162 163 // Functions After 164 function initResetDataAfter() { 165 $('[data-navigation-status]').attr('data-navigation-status', 'not-active'); 166 $('[data-scrolling-direction]').attr('data-scrolling-direction', 'down'); 167 $('[data-scrolling-started]').attr('data-scrolling-started', 'false'); 168 } 169 170 barba.init({ 171 sync: true, 172 debug: false, 173 timeout:7000, 174 transitions: [{ 175 name: 'self', 176 async leave(data) { 177 pageTransitionIn(data.current); 178 initResetDataBefore(); 179 await delay(transitionOffset); 180 initResetDataAfter(); 181 scroll.destroy(); 182 data.current.container.remove(); 183 }, 184 async enter(data) { 185 pageTransitionOut(data.next); 186 }, 187 async beforeEnter(data) { 188 ScrollTrigger.getAll().forEach(t => t.kill()); 189 initSmoothScroll(data.next.container); 190 initScript(); 191 }, 192 },{ 193 name: 'default', 194 once(data) { 195 initSmoothScroll(data.next.container); 196 initScript(); 197 initLoader(); 198 }, 199 async leave(data) { 200 pageTransitionIn(data.current); 201 initResetDataBefore(); 202 await delay(transitionOffset); 203 initResetDataAfter(); 204 scroll.destroy(); 205 data.current.container.remove(); 206 }, 207 async enter(data) { 208 pageTransitionOut(data.next); 209 }, 210 async beforeEnter(data) { 211 ScrollTrigger.getAll().forEach(t => t.kill()); 212 initSmoothScroll(data.next.container); 213 initScript(); 214 }, 215 }] 216 }); 217 218 function initSmoothScroll(container) { 219 initLenis(); 220 ScrollTrigger.refresh(); 221 } 222} 223 224function initLenis() { 225 226 // Lenis: https://github.com/studio-freight/lenis 227 scroll = new Lenis({ 228 // duration: 1, 229 lerp: 0.165, 230 wheelMultiplier: 1.25, 231 prevent: (element) => { 232 if (element.closest('.cleanslate > [id]')) return true; 233 return false; 234 } 235 }); 236 237 scroll.on('scroll', ScrollTrigger.update); 238 239 gsap.ticker.add((time)=>{ 240 scroll.raf(time * 1000); 241 }); 242 243 gsap.ticker.lagSmoothing(0); 244} 245 246// Don't touch 247function delay(n) { 248 n = n || 2000; 249 return new Promise((done) => { 250 setTimeout(() => { 251 done(); 252 }, n); 253 }); 254} 255 256/** 257 * Fire all scripts on page load 258 */ 259 260function initScript() { 261 initFrank(); 262 initCookieViews(); 263 initFlickitySlider(); 264 initCheckWindowHeight(); 265 initBasicFunctions(); 266 initBasicFunctionsBefore(); 267 initLazyLoad(); 268 initScrollTriggerPlayVideoInview(); 269 initLenisCheckScrollUpDown(); 270 initScrollToAnchorLenis(); 271 initBearlyDigitalContactForm(); 272 initVimeoLightbox(); 273 initPlayVideoHover(); 274 initMarqueeScrollV2(); 275 initStickyImageCursor(); 276 initScrollTriggerParallaxScroll(); 277 initScrolltriggerAnimations(); 278} 279 280/** 281 * Frank 282 */ 283function initFrank() { 284 285 $('[data-widget-action="open"]').on('click', function () { 286 var location = $(this).attr('data-widget-action-location'); 287 FrankApp.initializeWidget(location, true); 288 }); 289 290 barba.hooks.leave(() => { 291 FrankApp.closeWidget(); 292 }); 293} 294 295 296/** 297 * Guestplan 298 */ 299function initGuestplan() { 300 // https://docs.guestplan.com/#/nl/widget 301 $('[data-widget-action]').on('click', function () { 302 var $this = $(this); 303 var action = $this.attr('data-widget-gp-action'); 304 var location = $this.attr('data-widget-action-location'); 305 306 if (action === 'open') { 307 if (location) { 308 _gstpln.openBookingWidget({ accountId: parseInt(location, 10) }); 309 } else { 310 _gstpln.openWidget(); 311 } 312 } else if (action === 'close') { 313 _gstpln.closeWidget(); 314 } 315 }); 316 317 // $("[data-widget-gp-action]").click(function () { 318 // var dataWidgetAttr = $(this).attr("data-widget-gp-action"); 319 // if (dataWidgetAttr === "open") { 320 // _gstpln.openWidget(); 321 // } else if (dataWidgetAttr === "close") { 322 // _gstpln.closeWidget(); 323 // } 324 // }); 325 326 // Automatically open widget on specific pages 327 // $("[data-widget-gp-page]").each(function () { 328 // _gstpln.openWidget(); 329 // }); 330 331 332 // NOTE DENNIS: Turn back on to load it when the page opens 333 334 // (function() { 335 // const iv = setInterval(() => { 336 // // 1) Is there at least one [data-widget-gp-page] element? 337 // // 2) Does window._gstpln.openWidget exist (using optional chaining)? 338 // if ( 339 // document.querySelector('[data-widget-gp-page]') && 340 // window._gstpln?.openWidget 341 // ) { 342 // clearInterval(iv); 343 // setTimeout(() => { 344 // window._gstpln.openWidget(); 345 // }, 500); 346 // } 347 // }, 200); 348 // })(); 349 350 barba.hooks.leave(() => { 351 _gstpln.closeWidget(); 352 }); 353} 354 355/** 356 * Window Inner Height Check 357 */ 358function initCheckWindowHeight() {
359 // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ 360 let vh = window.innerHeight * 0.01; 361 document.documentElement.style.setProperty('--vh', `${vh}px`); 362} 363 364/** 365* Cookie Views 366*/ 367function initCookieViews() { 368 // Set cookie for theme 369 if (Cookies.get("site-theme") == "dark") { 370 $('[data-theme-site]').attr('data-theme-site', 'dark'); 371 } 372} 373 374/** 375 * Basic Functions 376 */ 377function initBasicFunctions() { 378 379 // Toggle Navigation 380 $('[data-navigation-toggle="toggle"]').click(function(){ 381 if ($('[data-navigation-status]').attr('data-navigation-status') == 'not-active') { 382 $('[data-navigation-status]').attr('data-navigation-status', 'active'); 383 scroll.stop(); 384 } else { 385 $('[data-navigation-status]').attr('data-navigation-status', 'not-active'); 386 scroll.start(); 387 } 388 }); 389 390 // Close Navigation 391 $('[data-navigation-toggle="close"]').click(function(){ 392 $('[data-navigation-status]').attr('data-navigation-status', 'not-active'); 393 scroll.start(); 394 }); 395 396 // Key ESC - Close Navigation 397 $(document).keydown(function(e){ 398 if(e.keyCode == 27) { 399 if ($('[data-navigation-status]').attr('data-navigation-status') == 'active') { 400 $('[data-navigation-status]').attr('data-navigation-status', 'not-active'); 401 scroll.start(); 402 } 403 } 404 }); 405 406 // Toggle Dark/Light Theme 407 $('[data-theme-site-control="toggle"]').click(function(){ 408 if ($('[data-theme-site]').attr('data-theme-site') == 'light') { 409 $('[data-theme-site]').attr('data-theme-site', 'dark'); 410 Cookies.set("site-theme", "dark", { expires: 365 }); 411 } else { 412 $('[data-theme-site]').attr('data-theme-site', 'light'); 413 Cookies.set("site-theme", "light", { expires: 365 }); 414 } 415 }); 416 417 window.addEventListener('ft-widget-ordered', function(e) { 418 FT.widgets.get().close(); // close the widget 419 window.location.href = '/bevestiging-reservering/'; // redirect to thank you page 420 }); 421} 422 423 /** 424 * Basic Functions 425 */ 426function initBasicFunctionsBefore() { 427 // Calculate width of Title H1 428 $('.locations-single-header').each(function(){ 429 var scalingTitle = $(this).find('.scaling-title'); 430 var scalingTitleWidth = scalingTitle.innerWidth(); 431 var scalingContainerWidth = $(this).find('figure').innerWidth(); 432 var scalingFactor = (scalingContainerWidth / scalingTitleWidth) / 5.25; 433 scalingTitle.css('--scaling-factor', ' ' + scalingFactor); 434 }); 435 436 // Slideshow Header 437 $('[data-slideshow-status="active"]').each(function(){ 438 var slideShowSlideIndex = 2; 439 var slideshow = $(this); 440 slideshow.find('[data-slideshow-slide-status="active"]').css('z-index', 2); 441 function nextSlideshowSlide() { 442 443 function nextSlideshowSlideSwitch() { 444 slideShowSlideIndex = slideShowSlideIndex + 1; // Add z-index each switch 445 446 // Check if next or if first 447 if(slideshow.find('[data-slideshow-slide-status="active"]').next().length > 0) { 448 slideshow.find('[data-slideshow-slide-status="active"]').attr('data-slideshow-slide-status', 'not-active').next().attr('data-slideshow-slide-status', 'active').css('z-index', slideShowSlideIndex); 449 } 450 else { 451 slideshow.find('[data-slideshow-slide-status]').attr('data-slideshow-slide-status', 'not-active'); 452 slideshow.find('[data-slideshow-slide-status]').first().attr('data-slideshow-slide-status', 'active').css('z-index', slideShowSlideIndex); 453 } 454 455 // Animation Fade 456 gsap.from(slideshow.find('[data-slideshow-slide-status="active"]'), { 457 opacity: 0, 458 duration: 1, 459 ease: "Power1.easeInOut", 460 delay: 0.1, 461 clearProps: "opacity" 462 }); 463 } 464 465 // Animation Zoom (not on first play) 466 gsap.from(slideshow.find('[data-slideshow-slide-status="active"]'), { 467 scale: 1.1, 468 duration: 4.5, 469 ease: "linear" 470 }); 471 472 // Repeat 473 setTimeout(function() { 474 nextSlideshowSlideSwitch(); 475 nextSlideshowSlide(); 476 }, 4000); 477 } 478 479 // First call 480 nextSlideshowSlide(); 481 }); 482 483 484 // Accordion 485 // Found via https://codepen.io/michelgefuni/pen/wGEVjM 486 $('[data-accordion-toggle]').click(function(){ 487 $('.bottom').not($(this).parent().find('.bottom')).slideUp(400, "swing"); 488 if ($(this).parent().attr('data-accordion-status') == 'active') { 489 $(this).parent().attr('data-accordion-status', 'not-active').siblings().attr('data-accordion-status', 'not-active'); 490 } 491 else { 492 $(this).parent().siblings().attr('data-accordion-status', 'not-active'); 493 $(this).parent().attr('data-accordion-status', 'active'); 494 } 495 $(this).parent().find('.bottom').slideToggle(400, "swing").delay(400).queue(function(next){ 496 next(); 497 scroll.destroy(); 498 initLenis(); 499 ScrollTrigger.refresh(); 500 }); 501 }); 502 503 // Filter 504 // $('[data-filter]').each(function(){ 505 // var filterGroup = $(this); 506 // filterGroup.find('[data-filter-btn]').click(function(){ 507 // var filterName = $(this).data('filter-name'); 508 // if ($(this).attr('data-filter-status') == 'not-active') { 509 // if (filterName === 'all') { 510 // filterGroup.find('[data-filter-name]').attr('data-filter-status', 'active'); 511 // filterGroup.find('[data-filter-btn]').attr('data-filter-status', 'not-active'); 512 // filterGroup.find('[data-filter-name="all"]').attr('data-filter-status', 'active').siblings().attr('data-filter-status', 'not-active'); 513 // } else { 514 // filterGroup.find('[data-filter-name]').attr('data-filter-status', 'not-active'); 515 // filterGroup.find('[data-filter-name="' + filterName + '"]').attr('data-filter-status', 'active'); 516 // } 517 518 // scroll.destroy(); 519 // initLenis(); 520 // ScrollTrigger.refresh(); 521 522 // if(filterGroup.attr('data-filter') == 'list') { 523 524 // gsap.to(filterGroup.find('.row'), { 525 // autoAlpha: 0, 526 // duration: 0.2, 527 // clearProps: "all" 528 // }); 529 530 // gsap.set(filterGroup.find('.col[data-filter-status="active"]'), { 531 // display: "block", 532 // overwrite: true, 533 // delay: 0.2 534 // }); 535 536 // gsap.fromTo(filterGroup.find('.col[data-filter-status="active"]'), { 537 // yPercent: 100, 538 // }, { 539 // yPercent: 0, 540 // duration: 1.5, 541 // delay: 0.21, 542 // ease: "Expo.easeOut", 543 // stagger: 0.05, 544 // }); 545 546 // gsap.fromTo(filterGroup.find('.col[data-filter-status="active"]'), { 547 // autoAlpha: 0, 548 // }, { 549 // autoAlpha: 1, 550 // duration: 0.4, 551 // delay: 0.21, 552 // ease: "none", 553 // stagger: 0.05, 554 // }); 555 556 // gsap.set(filterGroup.find('.col[data-filter-status="not-active"]'), { 557 // display: "none", 558 // overwrite: true, 559 // delay: 0.2 560 // }); 561 // } 562 // } 563 // }); 564 // if ($(location).attr('search')) { 565 // var urlSearch = $(location).attr('search'); 566 // var filterNameFromURL = urlSearch.substring(urlSearch.indexOf('=') + 1); 567 // filterGroup.find('[data-filter-name]').attr('data-filter-status', 'not-active'); 568 // filterGroup.find('[data-filter-name="' + filterNameFromURL + '"]').attr('data-filter-status', 'active'); 569 // } 570 // }); 571 572 // Filter 573 $('[data-filter]').each(function() { 574 var filterGroup = $(this); 575 var activeFilterName = 'all'; 576 var toggleStatus = 'not-active'; 577 578 // Main filter button click handler 579 filterGroup.find('[data-filter-btn]').click(function() { 580 activeFilterName = $(this).data('filter-name'); 581 582 if ($(this).attr('data-filter-status') === 'not-active') { 583 // Deactivate all filter buttons, then activate the clicked button 584 filterGroup.find('[data-filter-btn]').attr('data-filter-status', 'not-active'); 585 $(this).attr('data-filter-status', 'active'); 586 587 // Set all list items to 'active' (visibility determined in applyCombinedFilter) 588 filterGroup.find('[data-filter-name]:not([data-filter-btn])').attr('data-filter-status', 'active'); 589 590 applyCombinedFilter(filterGroup, activeFilterName, toggleStatus); 591 } 592 }); 593 594 // Toggle button click handler 595 filterGroup.find('[data-filter-toggle]').click(function() { 596 toggleStatus = toggleStatus === 'active' ? 'not-active' : 'active'; 597 $(this).attr('data-filter-status', toggleStatus); 598 applyCombinedFilter(filterGroup, activeFilterName, toggleStatus); 599 }); 600 601 if ($(location).attr('search')) { 602 var urlSearch = $(location).attr('search'); 603 var filterNameFromURL = urlSearch.substring(urlSearch.indexOf('=') + 1); 604 filterGroup.find('[data-filter-name]').attr('data-filter-status', 'not-active'); 605 filterGroup.find('[data-filter-name="' + filterNameFromURL + '"]').attr('data-filter-status', 'active'); 606 gsap.set(filterGroup.find('.col[data-filter-status="active"]'), { display: "block", overwrite: true }); 607 gsap.set(filterGroup.find('.col[data-filter-status="not-active"]'), { display: "none", overwrite: true}); 608 } 609 }); 610 611 // Function to apply combined filter based on both filter name and toggle status 612 function applyCombinedFilter(filterGroup, filterName, toggleStatus) { 613 filterGroup.find('[data-filter-name]:not([data-filter-btn])').each(function() { 614 var item = $(this); 615 var itemFilterName = item.attr('data-filter-name'); 616 var itemToggleValue = item.attr('data-filter-toggle'); 617 var matchesFilterName = (filterName === 'all' || itemFilterName === filterName); 618 var matchesToggleStatus = !(toggleStatus === 'active' && itemToggleValue === 'true'); 619 620 item.attr('data-filter-status', matchesFilterName && matchesToggleStatus ? 'active' : 'not-active'); 621 }); 622 623 applyAnimations(filterGroup); 624 } 625 626 // GSAP animations based on filter statuses 627 function applyAnimations(filterGroup) { 628 if (filterGroup.attr('data-filter') === 'list') { 629 gsap.to(filterGroup.find('.row'), { autoAlpha: 0, duration: 0.2, clearProps: "all", onComplete: filterResetScripts }); 630 631 gsap.set(filterGroup.find('.col[data-filter-status="active"]'), { display: "block", overwrite: true, delay: 0.2 }); 632 gsap.set(filterGroup.find('.col[data-filter-status="not-active"]'), { display: "none", overwrite: true, delay: 0.2 }); 633 634 var firstTenItems = filterGroup.find('.col[data-filter-status="active"]').slice(0, 8); 635 gsap.fromTo(firstTenItems, { yPercent: 50, autoAlpha: 0 }, { 636 yPercent: 0, autoAlpha: 1, duration: 1.5, delay: 0.21, ease: "Expo.easeOut", stagger: 0.05 637 }); 638 } 639 } 640 641 function filterResetScripts() { 642 scroll.destroy(); 643 initLenis(); 644 ScrollTrigger.refresh(); 645 } 646 647 // Countdown
648 const countdownElements = document.querySelectorAll(".countdown-timer"); 649 const isDutch = document.documentElement.lang === "nl"; // Check if the language is set to Dutch 650 651 countdownElements.forEach((countdownElement) => { 652 const targetDate = new Date(countdownElement.getAttribute("data-target-date")); 653 const displayElement = countdownElement.querySelector(".countdown-display"); 654 655 const updateCountdown = () => { 656 const now = new Date(); 657 const timeDifference = targetDate - now; 658 659 if (timeDifference <= 0) { 660 displayElement.textContent = "00:00:00"; 661 clearInterval(intervalId); 662 return; 663 } 664 665 const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); 666 const hours = Math.floor((timeDifference / (1000 * 60 * 60)) % 24); 667 const minutes = Math.floor((timeDifference / (1000 * 60)) % 60); 668 const seconds = Math.floor((timeDifference / 1000) % 60); 669 670 // Dynamic label based on language and whether there's 1 day or more 671 let dayLabel; 672 if (days === 1) { 673 dayLabel = isDutch ? "Dag" : "Day"; 674 } else { 675 dayLabel = isDutch ? "Dagen" : "Days"; 676 } 677 678 // Conditional formatting based on the presence of days 679 if (days > 0) { 680 displayElement.textContent = 681 `${days} ${dayLabel} & ${String(hours).padStart(2, '0')}
681:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; 682 } else { 683 displayElement.textContent = 684 `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; 685 } 686 }; 687 688 const intervalId = setInterval(updateCountdown, 1000); 689 updateCountdown(); 690 }); 691} 692 693/** 694 * Lazy Load 695 */ 696function initLazyLoad() { 697 // https://github.com/verlok/vanilla-lazyload 698 var lazyLoadInstance = new LazyLoad({ 699 container: document.querySelector('[data-scroll-container]'), 700 elements_selector: ".lazy", 701 }); 702} 703 704 705/** 706 * Play Video Inview 707 */ 708function initScrollTriggerPlayVideoInview() { 709 710 let allVideoDivs = gsap.utils.toArray('.playpauze'); 711 712 allVideoDivs.forEach((videoDiv, i) => { 713 714 let videoElem = videoDiv.querySelector('video') 715 716 ScrollTrigger.create({ 717 trigger: videoElem, 718 start: '0% 120%', 719 end: '100% -20%', 720 onEnter: () => videoElem.play(), 721 onEnterBack: () => videoElem.play(), 722 onLeave: () => videoElem.pause(), 723 onLeaveBack: () => videoElem.pause(), 724 }); 725 }); 726} 727 728 729/** 730 * Lenis - Check Scroll up or Down 731 */ 732 733function initLenisCheckScrollUpDown() { 734 735 var lastScrollTop = 0 736 var threshold = 50; 737 var thresholdTop = 50; 738 739 function startCheckScroll() { 740 scroll.on('scroll', (e) => { 741 var nowScrollTop = e.targetScroll; 742 743 if (Math.abs(lastScrollTop - nowScrollTop) >= threshold) { 744 745 // Check Scroll Direction 746 if (nowScrollTop > lastScrollTop) { 747 $("[data-scrolling-direction]").attr('data-scrolling-direction', 'down'); 748 } else { 749 $("[data-scrolling-direction]").attr('data-scrolling-direction', 'up'); 750 } 751 lastScrollTop = nowScrollTop; 752 753 // Check if Scroll Started 754 if (nowScrollTop > thresholdTop) { 755 $("[data-scrolling-started]").attr('data-scrolling-started', 'true'); 756 } else { 757 $("[data-scrolling-started]").attr('data-scrolling-started', 'false'); 758 } 759 } 760 }); 761 } 762 startCheckScroll(); 763 764 // Reset instance 765 barba.hooks.after(() => { 766 startCheckScroll(); 767 }); 768} 769 770 771/** 772 * Lenis - ScrollTo Anchor Links 773 */ 774function initScrollToAnchorLenis() { 775 var offsetScroll = $('.nav .nav-primary').innerHeight(); 776 $("[data-anchor-target]").click(function() { 777 778 /* Close navigation */ 779 $('[data-navigation-status]').attr('data-navigation-status', 'not-active'); 780 scroll.start(); 781 782 offsetScroll = $('.nav .nav-primary').innerHeight(); 783 let targetScrollToAnchorLenis = $(this).attr('data-anchor-target'); 784 scroll.scrollTo(targetScrollToAnchorLenis,{ 785 duration: 1, 786 easing: (x) => (x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2), 787 offset: offsetScroll * -2 788 }); 789 }); 790 791 if($(location).attr('search')) { 792 var scrollTargetLink = $(location).attr('search'); 793 var scrollTargetLinkShort = scrollTargetLink.substring(scrollTargetLink.indexOf("=")+1); 794 if (window.location.href.indexOf(scrollTargetLink) > -1) { 795 setTimeout(function() { 796 scroll.scrollTo('#' + scrollTargetLinkShort ,{ 797 duration: 1, 798 easing: (x) => (x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2), 799 offset: offsetScroll * -2, 800 force: true, 801 }); 802 }, 50); 803 } 804 } 805} 806 807/** 808* Plugin Custom Contact Form Bearly Digital 809*/ 810function initBearlyDigitalContactForm() { 811 812 window.bearly.loadforms(); 813 814} 815 816 817/** 818* Flickity Slider 819*/ 820function initFlickitySlider() { 821 822 // Source 823 // https://flickity.metafizzy.co/ 824 825 // Slider type: Quote 826 827 $('[data-flickity-slider-type="quote"]').each(function (index) { 828 829 var sliderIndexID = 'flickity-slider-type-quote-id-' + index; 830 $(this).attr('id', sliderIndexID); 831 832 var sliderThis = $(this); 833 834 var flickitySliderGroup = document.querySelector('#' + sliderIndexID + ' .flickity-carousel'); 835 var flickitySlider = sliderThis.find('.flickity-carousel').flickity({ 836 // options 837 watchCSS: true, 838 contain: true, 839 wrapAround: false, 840 dragThreshold: 10,
841 prevNextButtons: false, 842 pageDots: false, 843 cellAlign: 'left', 844 selectedAttraction: 0.015, 845 friction: 0.25, 846 percentPosition: true, 847 resize: true, 848 freeScroll: false, 849 on: { 850 change: function () { 851 updatePagination(); 852 } 853 } 854 }); 855 856 // Flickity instance 857 var flkty = flickitySlider.data('flickity'); 858 859 // previous 860 var prevButton = sliderThis.find('[data-flickity-control="prev"]').on('click', function () { 861 flickitySlider.flickity('previous'); 862 }); 863 // next 864 var nextButton = sliderThis.find('[data-flickity-control="next"]').on('click', function () { 865 flickitySlider.flickity('next'); 866 }); 867 // Get the amount of columns variable and use to calc last slide 868 var inviewColumns = window.getComputedStyle(flickitySliderGroup).getPropertyValue('--columns'); 869 870 function updatePagination() { 871 // enable/disable previous/next buttons 872 if (!flkty.cells[flkty.selectedIndex - 1]) { 873 prevButton.attr('disabled', 'disabled'); 874 nextButton.removeAttr('disabled'); // <-- remove disabled from the next 875 } else if (!flkty.cells[flkty.selectedIndex + parseInt(inviewColumns)]) { 876 nextButton.attr('disabled', 'disabled'); 877 prevButton.removeAttr('disabled'); //<-- remove disabled from the prev 878 } else { 879 prevButton.removeAttr('disabled'); 880 nextButton.removeAttr('disabled'); 881 } 882 } 883 884 flickitySlider.flickity('next'); 885 }); 886 887 $('[data-flickity-slider-type="cards"]').each(function (index) { 888 889 var sliderIndexID = 'flickity-slider-type-cards-id-' + index; 890 $(this).attr('id', sliderIndexID); 891 892 var sliderThis = $(this); 893 894 var flickitySliderGroup = document.querySelector('#' + sliderIndexID + ' .flickity-carousel'); 895 var flickitySlider = sliderThis.find('.flickity-carousel').flickity({ 896 // options 897 watchCSS: true, 898 contain: true, 899 wrapAround: false, 900 dragThreshold: 10, 901 prevNextButtons: false, 902 pageDots: false, 903 cellAlign: 'left', 904 selectedAttraction: 0.015, 905 friction: 0.25, 906 percentPosition: true, 907 freeScroll: false, 908 on: { 909 'dragStart': () => { 910 flickitySlider.css("pointer-events", "none"); 911 }, 912 'dragEnd': () => { 913 flickitySlider.css("pointer-events", "auto"); 914 }, 915 change: function () { 916 updatePagination(); 917 } 918 } 919 }); 920 921 // Flickity instance 922 var flkty = flickitySlider.data('flickity'); 923 924 // previous 925 var prevButton = sliderThis.find('[data-flickity-control="prev"]').on('click', function () { 926 flickitySlider.flickity('previous'); 927 }); 928 // next 929 var nextButton = sliderThis.find('[data-flickity-control="next"]').on('click', function () { 930 flickitySlider.flickity('next'); 931 }); 932 // Get the amount of columns variable and use to calc last slide 933 var inviewColumns = window.getComputedStyle(flickitySliderGroup).getPropertyValue('--columns'); 934 935 function updatePagination() { 936 // enable/disable previous/next buttons 937 if (!flkty.cells[flkty.selectedIndex - 1]) { 938 prevButton.attr('disabled', 'disabled'); 939 nextButton.removeAttr('disabled'); // <-- remove disabled from the next 940 } else if (!flkty.cells[flkty.selectedIndex + parseInt(inviewColumns)]) { 941 nextButton.attr('disabled', 'disabled'); 942 prevButton.removeAttr('disabled'); //<-- remove disabled from the prev 943 } else { 944 prevButton.removeAttr('disabled'); 945 nextButton.removeAttr('disabled'); 946 } 947 } 948 }); 949} 950 951/** 952* Vimeo Lightbox Embed 953*/ 954function initVimeoLightbox() { 955 956 $('[data-vimeo-lightbox-target]').each(function(index){ 957 958 var vimeoLightbox = $(this); 959 var vimeoLightboxOpenButton = $('[data-vimeo-lightbox-control
959="open"]'); 960 var vimeoLightboxCloseButton = $('[data-vimeo-lightbox-control="close"]'); 961 962 var videoIndexID = 'vimeo-lightbox-index-' + index; 963 $(this).attr('id', videoIndexID); 964 965 var iframe = $(this).attr('id'); 966 967 // New Lightbox 968 vimeoLightboxOpenButton.click(function(){ 969 970 var vimeoLightboxVideoID = $(this).data('vimeo-lightbox-id'); 971 var vimeoLightboxPlaceholder = $(this).data('vimeo-lightbox-placeholder'); 972 var vimeoLightboxRatio = $(this).data('vimeo-lightbox-ratio'); 973 var vimeoLightboxContent = '<div class="overlay vimeo-append-content"><iframe src="https://player.vimeo.com/video/' + vimeoLightboxVideoID + '?api=1&background=1&autoplay=0&muted=1&playsinline=1" width="640" height="360" frameborder="0" webkit-playsinline playsinline allow="autoplay;"></iframe><img class="overlay vimeo-overlay-placeholder" src="' + vimeoLightboxPlaceholder + '" /></div>'; 974 975 // Add or Replace Lightbox (Check if is new or current video) 976 if(vimeoLightbox.attr('data-vimeo-lightbox-current-id') == vimeoLightboxVideoID) { 977 // Nothing 978 } else { 979 vimeoLightbox.find('.vimeo-append-content').remove(); 980 vimeoLightbox.find('.single-vimeo-lightbox').append(vimeoLightboxContent); 981 } 982 983 vimeoLightbox.find('.single-vimeo-lightbox').css('--aspect-ratio',' ' + vimeoLightboxRatio); 984 vimeoLightbox.attr('data-vimeo-status-activated', 'true'); 985 scroll.stop(); 986 987 // Check Landscape vs Portrait 988 if(parseFloat(vimeoLightboxRatio) > 100) { 989 vimeoLightbox.attr('data-vimeo-lightbox-orientation', 'portrait'); 990 } else { 991 vimeoLightbox.attr('data-vimeo-lightbox-orientation', 'landscape'); 992 } 993 994 // Calculate Max. Height 995 var vimeoLightboxHeight = vimeoLightbox.find('.single-vimeo-calculate').innerHeight(); 996 var vimeoLightboxWidth = vimeoLightbox.find('.single-vimeo-calculate').innerWidth(); 997 var vimeoLightboxRatioNoPercent = parseInt(vimeoLightboxRatio) / 100; 998 vimeoLightbox.find('.single-vimeo-calculate-wrap').css('width',' ' + (100 / ((vimeoLightboxWidth * vimeoLightboxRatioNoPercent) / vimeoLightboxHeight)) + '%'); 999 1000 $(window).resize(function() { 1001 if(vimeoLightbox.attr('data-vimeo-status-activated') == 'true') { 1002 vimeoLightboxHeight = vimeoLightbox.find('.single-vimeo-calculate').innerHeight(); 1003 vimeoLightboxWidth = vimeoLightbox.find('.single-vimeo-calculate').innerWidth(); 1004 vimeoLightbox.find('.single-vimeo-calculate-wrap').css('width',' ' + (100 / ((vimeoLightboxWidth * vimeoLightboxRatioNoPercent) / vimeoLightboxHeight)) + '%'); 1005 } 1006 }); 1007 1008 // New Vimeo Player 1009 var player = new Vimeo.Player(iframe); 1010 1011 // Play Function 1012 function vimeoLightboxPlay() { 1013 vimeoLightbox.attr('data-vimeo-status-play', 'true'); 1014 if (vimeoLightbox.attr('data-vimeo-status-muted') == 'false') { 1015 player.setVolume(1); 1016 } else { 1017 player.setVolume(0); 1018 } 1019 player.play(); 1020 } 1021 1022 // Close Function 1023 function vimeoLightboxClose() { 1024 1025 // Update Current Video ID 1026 vimeoLightbox.attr('data-vimeo-lightbox-current-id', vimeoLightboxVideoID); 1027 1028 player.setVolume(0); 1029 scroll.start(); 1030 vimeoLightbox.attr('data-vimeo-status-activated', 'remove'); 1031 setTimeout(function(){ 1032 vimeoLightbox.attr('data-vimeo-status-activated', 'false'); 1033 vimeoLightbox.attr('data-vimeo-status-loaded', 'false'); 1034 vimeoLightbox.attr('data-vimeo-status-play', 'false'); 1035 player.unload(); 1036 }, 600); 1037 } 1038 1039 // Check Touchscreen 1040 function isTouchScreendevice() { 1041 return 'ontouchstart' in window || navigator.maxTouchPoints; 1042 }; 1043 if(isTouchScreendevice()){ 1044 // No autoplay on touch screen devices 1045 } else { 1046 vimeoLightboxPlay(); 1047 } 1048 1049 // Play
1050 vimeoLightbox.find('[data-vimeo-control="play"]').off().click(function(){ 1051 vimeoLightboxPlay(); 1052 }); 1053 1054 // Pause 1055 vimeoLightbox.find('[data-vimeo-control="pause"]').off().click(function(){ 1056 vimeoLightbox.attr('data-vimeo-status-play', 'false'); 1057 player.pause(); 1058 }); 1059 1060 // Loaded 1061 player.on('play', function() { 1062 vimeoLightbox.attr('data-vimeo-status-loaded', 'true'); 1063 }); 1064 1065 // Close Mouse Click 1066 vimeoLightboxCloseButton.off().click(function(){ 1067 vimeoLightboxClose(); 1068 }); 1069 1070 // Close Esc Key 1071 $(document).keydown(function(e){ 1072 if(e.keyCode == 27) { 1073 vimeoLightboxClose(); 1074 } 1075 }); 1076 1077 // Mute 1078 vimeoLightbox.find('[data-vimeo-control="mute"]').off().click(function(){ 1079 if (vimeoLightbox.attr('data-vimeo-status-muted') == 'false') { 1080 player.setVolume(0); 1081 vimeoLightbox.attr('data-vimeo-status-muted', 'true'); 1082 } else { 1083 player.setVolume(1); 1084 vimeoLightbox.attr('data-vimeo-status-muted', 'false'); 1085 } 1086 }); 1087 1088 // Convert number into seconds & hrs 1089 // https://stackoverflow.com/questions/11792726/turn-seconds-into-hms-format-using-jquery 1090 function secondsTimeSpanToHMS(s) { 1091 var h = Math.floor(s / 3600); //Get whole hours 1092 s -= h * 3600; 1093 var m = Math.floor(s / 60); //Get remaining minutes 1094 s -= m * 60; 1095 return (m) + ":" + (s < 10 ? '0' + s : s); //zero padding on minutes and seconds 1096 } 1097 1098 // Progress Time 1099 var vimeoTime = vimeoLightbox.find('.vimeo-duration .time'); 1100 player.on('timeupdate', function(data) { 1101 vimeoTime.text(secondsTimeSpanToHMS(Math.trunc(data.seconds))); 1102 }); 1103 1104 // Duration 1105 var vimeoDuration = vimeoLightbox.find('.vimeo-duration .duration'); 1106 player.getDuration().then(function(duration) { 1107 vimeoDuration.text(secondsTimeSpanToHMS(duration)); 1108 }).catch(function(error) { 1109 // an error occurred 1110 }); 1111 1112 // Ended 1113 var onEnd = function(data) { 1114 vimeoLightboxClose(); 1115 }; 1116 1117 player.on('ended', onEnd); 1118 }); 1119 }); 1120} 1121 1122/** 1123* Play Video on Hover 1124*/ 1125function initPlayVideoHover() { 1126 1127 $('[data-thumb-video-on-hover="true"]').each(function () { 1128 let videoOnHoverTrue = $(this).find('video'); 1129 $(this).on('mouseenter', function() { 1130 $(this).attr('data-thumb-video-status', 'active'); 1131 videoOnHoverTrue.trigger('play'); 1132 }); 1133 $(this).on('mouseleave', function() { 1134 $(this).attr('data-thumb-video-status', 'not-active'); 1135 videoOnHoverTrue.trigger('pause'); 1136 }); 1137 }); 1138} 1139 1140/** 1141* Marquee on Scroll Direction 1142*/ 1143function initMarqueeScrollV2() { 1144 1145 $('[data-marquee-target]').each(function(){ 1146 1147 let marquee = $(this); 1148 1149 let marqueeItemsWidth = marquee.find(".marquee-content").width(); 1150 let marqueeSpeed = marquee.attr('data-marquee-speed') * (marqueeItemsWidth / $(window).width()); 1151 1152 // Duplicate .marquee-content 1153 if (marquee.attr('data-marquee-duplicate')) { 1154 var marqueeDuplicateAmount = marquee.attr('data-marquee-duplicate'); 1155 // Custom function to clone / append 1156 for (var i = 0; i < marqueeDuplicateAmount; i++) { 1157 var clonedMarqueeContent = marquee.find(".marquee-content").first().clone(); 1158 marquee.find(".marquee-scroll").append(clonedMarqueeContent); 1159 } 1160 } 1161 1162 // Speed up Marquee on Tablet & Mobile 1163 if($(window).width() <= 540){ 1164 marqueeSpeed = marqueeSpeed * 0.25; 1165 } else if($(window).width() <= 1024){ 1166 marqueeSpeed = marqueeSpeed * 0.5; 1167 } 1168 1169 let marqueeDirection; 1170 if(marquee.attr('data-marquee-direction') == 'right') { 1171 marqueeDirection = -1; 1172 } else { 1173 marqueeDirection = 1; 1174 } 1175 1176 let marqueeContent = gsap.to(marquee.find('.marquee-content'), {xPercent: -100, repeat: -1, duration: marqueeSpeed, ease: "linear", paused: true}).totalProgress(0.5); 1177 1178 gsap.set(marquee.find(".marquee-content"), {xPercent: 50}); 1179 1180 ScrollTrigger.create({ 1181 trigger: marquee, 1182 start: "top bottom", 1183 end: "bottom top", 1184 onUpdate(self) { 1185 if (self.direction !== marqueeDirection) { 1186 marqueeDirection *= -1; 1187 if(marquee.attr('data-marquee-direction') == 'right') { 1188 gsap.to([marqueeContent], { timeScale: (marqueeDirection * -1), overwrite: true }); 1189 } else { 1190 gsap.to([marqueeContent], { timeScale: marqueeDirection, overwrite: true }); 1191 } 1192 } 1193 self.direction === -1 ? marquee.attr('data-marquee-status', 'normal') : marquee.attr('data-marquee-status', 'inverted'); 1194 }, 1195 onEnter: () => marqueeContent.play(), 1196 onEnterBack: () => marqueeContent.play(), 1197 onLeave: () => marqueeContent.pause(), 1198 onLeaveBack: () => marqueeContent.pause() 1199 }); 1200 1201 // Extra speed on scroll 1202 marquee.each(function () { 1203 1204 let triggerElement = $(this); 1205 let targetElement = $(this).find('.marquee-scroll'); 1206 let marqueeScrollSpeed = $(this).attr('data-marquee-scroll-speed'); 1207 1208 let tl = gsap.timeline({ 1209 scrollTrigger: { 1210 trigger: $(this), 1211 start: "0% 100%", 1212 end: "100% 0%", 1213 scrub: 0 1214 } 1215 }); 1216 1217 if(triggerElement.attr('data-marquee-direction') == 'left') { 1218 tl.fromTo(targetElement, { 1219 x: marqueeScrollSpeed + "vw", 1220 }, { 1221 x: marqueeScrollSpeed * -1 + "vw", 1222 ease: "none" 1223 }); 1224 } 1225 1226 if(triggerElement.attr('data-marquee-direction') == 'right') { 1227 tl.fromTo(targetElement, { 1228 x: marqueeScrollSpeed * -1 + "vw", 1229 }, { 1230 x: marqueeScrollSpeed + "vw", 1231 ease: "none" 1232 }); 1233 } 1234 }); 1235 }); 1236} 1237 1238/** 1239* Sticky Image Cursor 1240*/
1241function initStickyImageCursor() { 1242 1243 // Sticky Cursor with delay 1244 // https://greensock.com/forums/topic/21161-animated-mouse-cursor/ 1245 1246 var posXImage = 0 1247 var posYImage = 0 1248 var mouseX = 0 1249 var mouseY = 0 1250 1251 if(document.querySelector(".sticky-image-cursor")) { 1252 gsap.to({}, 0.0083333333, { 1253 repeat: -1, 1254 onRepeat: function() { 1255 1256 if(document.querySelector(".sticky-image-cursor")) { 1257 posXImage += ((mouseX / 4) - posXImage) / 6; 1258 posYImage += (mouseY - posYImage) / 6; 1259 1260 var xOffset = mouseX * 2 / $(window).width() - 1; 1261 var yOffset = mouseY * 2 / $(window).height() - 1; 1262 1263 gsap.set($(".sticky-image-cursor"), { 1264 css: { 1265 left: posXImage, 1266 top: posYImage 1267 } 1268 }); 1269 gsap.set($(".sticky-image-cursor .sticky-image-cursor-inner"), { 1270 css: { 1271 rotateX: yOffset * 20, 1272 rotateY: xOffset * 20 * -1 1273 } 1274 }); 1275 } 1276 } 1277 }); 1278 } 1279 1280 $(document).on("mousemove", function(e) { 1281 mouseX = e.clientX; 1282 mouseY = e.clientY; 1283 }); 1284 1285 // Product Cursor 1286 $('[data-sticky-image-cursor-group]').on('mouseenter', function() { 1287 $('.sticky-image-cursor').addClass('active'); 1288 if($(this).attr('data-sticky-image-cursor-group') == 'agenda') { 1289 $('.sticky-image-cursor').addClass('agenda'); 1290 } else { 1291 $('.sticky-image-cursor').removeClass('agenda'); 1292 } 1293 }); 1294 $('[data-sticky-image-cursor-group]').on('mouseleave', function() { 1295 $('.sticky-image-cursor').removeClass('active'); 1296 }); 1297 1298 $('[data-sticky-image-cursor-group] li').on('mouseenter mouseleave', function() { 1299 var index = $(this).index(); 1300 $(".sticky-image-cursor ul").each(function() { 1301 $(this).find('.transition-out').removeClass("transition-out"); 1302 $(this).find('.active').addClass("transition-out"); 1303 $("li",this).eq(index).siblings().removeClass("active"); 1304 $("li",this).eq(index).addClass("active"); 1305 }); 1306 }); 1307} 1308 1309/** 1310* GSAP Scrolltrigger Parallax Scroll 1311*/ 1312function initScrollTriggerParallaxScroll() { 1313 ScrollTrigger.matchMedia({ 1314 "(min-width: 1024px)": function() { 1315 if (document.querySelector('[data-parallax-target]')) { 1316 $('[data-parallax-strength]').each(function () { 1317 let tl; 1318 let $this = $(this); 1319 let targetElement = $this.find('[data-parallax-target]'); 1320 let triggerElement = $this; 1321 let triggerElementID = $this.attr('data-parallax-trigger'); 1322 let targetElementParallax = ($this.attr('data-parallax-strength') * 20); 1323 let heightElementParallax = ($this.attr('data-parallax-height') * 20); 1324 1325 $this.css("--parallax-strength", " " + targetElementParallax + "%"); 1326 $this.css("--parallax-height", " " + heightElementParallax + "%"); 1327 1328 // Check if data-parallax-trigger attribute is defined and not empty 1329 if (triggerElementID && $(triggerElementID).length !== 0) { 1330 triggerElement = $(triggerElementID); 1331 } 1332 1333 // Ensure targetElement exists 1334 if (targetElement.length === 0) { 1335 console.warn('targetElement not found for', this); 1336 return; // Skip this iteration if targetElement doesn't exist 1337 } 1338 1339 // Ensure triggerElement exists 1340 if (triggerElement.length === 0) { 1341 console.warn('triggerElement not found for', this); 1342 return; // Skip this iteration if triggerElement doesn't exist 1343 } 1344 1345 // Use DOM elements for GSAP (not jQuery objects) 1346 tl = gsap.timeline({ 1347 scrollTrigger: { 1348 trigger: triggerElement[0], 1349 start: "0% 100%", 1350 end: "100% 0%", 1351 scrub: true, 1352 markers: false 1353 } 1354 }); 1355 1356 tl.set(targetElement[0], { 1357 rotate: 0.001, 1358 }); 1359 1360 tl.fromTo(targetElement[0], { 1361 yPercent: (targetElementParallax * -0.5) 1362 }, { 1363 yPercent: (targetElementParallax * 0.5), 1364 ease: "none" 1365 }); 1366 }); 1367 } 1368 } 1369 }); 1370 } 1371 1372/** 1373* Scrolltrigger Animations Desktop + Mobile 1374*/ 1375function initScrolltriggerAnimations() { 1376 1377 // Script to work with Lottie & Scrolltrigger 1378 function LottieScrollTrigger(vars) { 1379 let playhead = {frame: 0}, 1380 target = gsap.utils.toArray(vars.target)[0], 1381 speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"}, 1382 st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000"}, 1383 animation = lottie.loadAnimation({ 1384 container: target, 1385 renderer: vars.renderer || "svg", 1386 loop: false, 1387 autoplay: false, 1388 path: vars.path 1389 }); 1390 for (let p in vars) { // let users override the ScrollTrigger defaults 1391 st[p] = vars[p]; 1392 } 1393 animation.addEventListener("DOMLoaded", function() { 1394 gsap.to(playhead, { 1395 duration: vars.duration || 0.5, 1396 delay: vars.delay || 0, 1397 frame: animation.totalFrames - 1, 1398 ease: vars.ease || "none", 1399 onUpdate: () => animation.goToAndStop(playhead.frame, true), 1400 scrollTrigger: st 1401 }); 1402 // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes 1403 ScrollTrigger.sort(); 1404 ScrollTrigger.refresh(); 1405 }); 1406 return animation; 1407 } 1408 1409 if(document.querySelector('.lottie-draw-text')) { 1410 $(".lottie-draw-text").each(function (index) { 1411 1412 var triggerElement = $(this); 1413 var targetElement = $(this).find(".lottie-window"); 1414 var lottieJsonPath = $(this).find('[data-lottie-json]').attr('data-lottie-json'); 1415 1416 LottieScrollTrigger({ 1417 trigger: triggerElement, 1418 target: targetElement, 1419 path: lottieJsonPath,
1420 pin: false, 1421 start: "0% 100%", 1422 end: "50% 50%", 1423 scrub: true, 1424 markers: false, 1425 }); 1426 }); 1427 } 1428 1429 if(document.querySelector('.reveal-layer-animation')) { 1430 // Scrolltrigger Animation : Reveal Layer Animation 1431 $('.section:has(.reveal-layer-animation)').each(function () { 1432 let triggerElement = $(this); 1433 let targetElement = $(this).find('.reveal-layer-animation'); 1434 let targetElementScale = $(this).find('.styled-image, .styled-video'); 1435 1436 let tl = gsap.timeline({ 1437 scrollTrigger: { 1438 trigger: triggerElement, 1439 start: "0% 100%", 1440 end: "100% 0%", 1441 scrub: false, 1442 toggleActions: "play none none none" 1443 } 1444 }); 1445 1446 tl.fromTo(targetElementScale, { 1447 scale: 1.4 1448 }, { 1449 scale: 1, 1450 ease: "Expo.easeOut", 1451 duration: 2, 1452 stagger: 0.1 1453 }, "<"); 1454 }); 1455 } 1456 1457 ScrollTrigger.matchMedia({ 1458 "(min-width: 1024px)": function() { 1459 1460 if(document.querySelector(".block-gallery-angle")) { 1461 1462 // Scrolltrigger Animation : Block Gallery Angle 1463 $(".block-gallery-angle").each(function () { 1464 let triggerElement = $(this); 1465 let targetElement = $(this).find('.col:nth-child(1)'); 1466 let targetElement2 = $(this).find('.col:nth-child(3)'); 1467 1468 let tl = gsap.timeline({ 1469 scrollTrigger: { 1470 trigger: triggerElement, 1471 start: () => "0% " + (triggerElement[0].getBoundingClientRect().top / $(window).height()) * 100 + '%', 1472 end: "100% 0%", 1473 scrub: 0 1474 } 1475 }); 1476 1477 tl.fromTo(targetElement, { 1478 rotation: -6, 1479 xPercent: 2 1480 }, { 1481 rotation: -15, 1482 xPercent: -30, 1483 ease: "none" 1484 }); 1485 1486 tl.fromTo(targetElement2, { 1487 rotation: 6, 1488 xPercent: -2 1489 }, { 1490 rotation: 15, 1491 xPercent: 30, 1492 ease: "none" 1493 }, '<'); 1494 }); 1495 } 1496 } 1497 }); 1498}
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.