1var IAS2024 = (function () { 2 'use strict'; 3 4 function IAS2024() { 5 // enforces new 6 if (!(this instanceof IAS2024)) { 7 var a = new IAS2024(); 8 return a; 9 } 10 } 11 12 IAS2024.prototype.Init = function () { 13 var self = this; 14 15 // anti bot protection 16 if (lazySizesConfig.disabled) { 17 return; 18 } 19 20 21 22 hasWebP().then(function () { 23 $('body').addClass('webp-support'); 24 }, function () { 25 $('body').addClass('no-webp-support'); 26 }); 27 28 this.initLazyload(); 29 this.fadeInBubble(); 30 31 setTimeout(function () { 32 EventTracker.trackScroll(); 33 }, 1000); 34 35 36 if (!globalGetParams.screencap) { 37 38 // this.initMainMenu() 39 // this.initScrollPosition(); 40 this.initFloats(); 41 this.initNav(); 42 this.initControls(); 43 44 this.initIntroVideo(); 45 this.initButtonFadein(); 46 this.initIntroScroll(); 47 this.initGrowingLines(); 48 this.initPledgeText(); 49 this.initSectionStaticBg(); 50 51 this.initStatAnimations(); 52 this.initImageWallSliders(); 53 this.initVMSectionSlideshow(); 54 this.initOdometers(); 55 this.initVideos(); 56 this.initVideoAutoplay(); 57 this.initAwardsScroller(); 58 59 loadjs([ 60 '/plugins/threejs/three-r148.min.js?_=' + cacheId, 61 '/plugins/threejs/three-nebula.min.js?_=' + cacheId, 62 '/js-static/ias-interactive-2024/threejs.js?_=' + cacheId, 63 ], 'threejs', { 64 async: false, 65 success: function () { 66 // new ThreeJSBackground(); 67 } 68 }); 69 70 } else { 71 $('.ias-2024-awards-wall-wrapper').css('height', 'auto'); 72 $('.year-in-review-2024--awards-row').css('display', 'block'); 73 } 74 75 76 if (globalGetParams.dev) { 77 // load js "/plugins/gsapv3/GSDevTools.min.js", 78 loadjs([ 79 "/plugins/gsapv3/GSDevTools.min.js", 80 ], 'gsap-dev', { 81 success: function () { 82 // GSDevTools.create(); 83 } 84 }); 85 } 86 87 if ($('.show-codes-button').length) { 88 $('.show-codes-button:not(.copyversion)').click(function (event) { 89 $('.image-code').toggleClass('hidden'); 90 }); 91 $('.mag-image-lazyload__abs').each(function (index, el) { 92 // console.log( $(el).find('img').attr('data-src') ); 93 if ($(el).find('source').length > 0) { 94 var src = $(el).find('source').attr('data-srcset'); 95 if (!src) { 96 return; 97 } 98 // most are _XX9999.jpg 99 var parts = src.match(/[-_](([0-9]+[a-zA-Z]+|[a-zA-Z]+[0-9]+)[0-9a-zA-Z]*)(-(inet|1))?(-r)?(_en)?.jpg/); 100 if (parts === null) { 101 // Some are DJI_0242 102 parts = src.match(/[-_]([A-Z]+_[0-9]+).jpg/); 103 } 104 if (parts && parts.length > 0) { 105 var code = parts[1]; 106 $(el).append('<div class="image-code hidden">' + code + '</div>') 107 } 108 } 109 }); 110 loadjs(['/plugins/bootstrap/js/bootstrap.bundle.min.js?_=' + cacheId], 'bootstrapjs', { async: false }); 111 loadjs.ready('bootstrapjs', function () { 112 $('.image-code').tooltip({ 113 html: true, 114 title: '<span class="icon-zoom-in"></span> VIEW FULL SCREEN', 115 placement: 'bottom', 116 }); 117 }); 118 119 // load up photoswipe 120 loadjs('/plugins/photoswipe/photoswipe.min.js?_=' + new Date().getTime()); 121 loadjs('/plugins/photoswipe/photoswipe-ui-default.min.js?_=' + new Date().getTime()); 122 123 loadjs(['css!/plugins/photoswipe/photoswipe.css?_=' + cacheId, 'css!/plugins/photoswipe/default-skin/default-skin.css?_=' + cacheId]); 124 125 $('.pswp__container').html('<div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div>'); 126 127 $(document).on('click', '.image-code', function (e) { 128 e.stopPropagation(); 129 e.stopImmediatePropagation(); 130 e.preventDefault(); 131 132 var $imageItem = $(this).closest('.mag-image-lazyload__abs'); 133 var src = $imageItem.find('img')[0].currentSrc.replace(/@w=[0-9]*/, ''); 134 // if(src[0] != "/") {
135 // src = "/" + src; 136 // } 137 // photoswipe zoom in 138 // console.log('src',src); 139 if (src) { 140 // var url = new URL(window.location.href); 141 // url.pathname = src; 142 var pswpElement = document.querySelectorAll('.pswp')[0]; 143 // build items array 144 var items = [ 145 { 146 // src: unescape(url.toString()), 147 src: src, 148 w: 0, 149 h: 0, 150 }, 151 ]; 152 153 // define options (if needed) 154 var options = { 155 index: 0, 156 shareEl: false, 157 history: false 158 }; 159 var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 160 161 // dynamicly set W & H 162 gallery.listen('gettingData', function (index, item) { 163 if (item.w < 1 || item.h < 1) { 164 var img = new Image(); 165 img.onload = function () { 166 item.w = this.width; 167 item.h = this.height; 168 gallery.updateSize(true); 169 }; 170 img.src = item.src; 171 } 172 }); 173 174 gallery.init(); 175 } 176 }); 177 178 } 179 180 if (globalGetParams.id) { 181 window.scrollTo(0, $("#" + globalGetParams.id).offset().top - 100); 182 } 183 184 // on mouse wheel move 185 window.addEventListener('wheel', function (event) { 186 if (self.lastScrollAnimation) { 187 self.lastScrollAnimation.pause(); 188 } 189 }, { passive: false }); 190 } 191 192 193 IAS2024.prototype.resizeAnimations = function () { 194 var resizeEvent = new CustomEvent('resize'); 195 // Dispatch the event 196 window.dispatchEvent(resizeEvent); 197 } 198 199 IAS2024.prototype.initFloats = function () { 200 var self = this; 201 202 $('.ias-2024--float-bottom').each(function () { 203 var $el = $(this); 204 var yOffset = 50; 205 var xOffset = 0; 206 var offset = 100; 207 var duration = 0.5; 208 var delay = 0; 209 var triggerElement = this; 210 211 if (typeof $el.data('trigger') != "undefined") { 212 triggerElement = $el.data('trigger'); 213 } 214 if (typeof $el.data('yoffset') != "undefined") { 215 yOffset = $el.data('yoffset'); 216 } 217 if (typeof $el.data('xoffset') != "undefined") { 218 xOffset = $el.data('xoffset'); 219 } 220 if (typeof $el.data('offset') != "undefined") { 221 offset = $el.data('offset'); 222 } 223 if (typeof $el.data('duration') != "undefined") { 224 duration = $el.data('duration'); 225 } 226 if (typeof $el.data('delay') != "undefined") { 227 delay = $el.data('delay'); 228 } 229 230 gsap.from(this, { 231 duration: duration, 232 delay: delay, 233 y: yOffset, 234 x: xOffset, 235 autoAlpha: 0, 236 ease: Power4.easeOut, 237 scrollTrigger: { 238 trigger: this, 239 toggleActions: "play pause resume reverse", 240 start: "+=" + offset + " bottom", 241 } 242 }); 243 // new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 244 // .setTween(tween) 245 // .setClassToggle(this, 'visible') 246 // // .addIndicators() // add indicators (requires plugin) 247 // .addTo(self.controller); 248 }); 249 250 $('.ias-2024--text-scale').each(function () { 251 var $el = $(this); 252 var duration = 0.5;
253 var delay = 0; 254 var offset = 100; 255 var triggerElement = this; 256 257 if (typeof $el.data('trigger') != "undefined") { 258 triggerElement = $el.data('trigger'); 259 } 260 if (typeof $el.data('duration') != "undefined") { 261 duration = $el.data('duration'); 262 } 263 if (typeof $el.data('offset') != "undefined") { 264 offset = $el.data('offset'); 265 } 266 if (typeof $el.data('delay') != "undefined") { 267 delay = $el.data('delay'); 268 } 269 270 gsap.from(this.querySelector('.ias-2024--text-scale--inner'), { 271 duration: duration, 272 delay: delay, 273 scale: 3, 274 autoAlpha: 0, 275 ease: Power4.easeOut, 276 scrollTrigger: { 277 trigger: this, 278 toggleActions: "play pause resume reverse", 279 start: "+=" + offset + " bottom", 280 } 281 }); 282 // new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 283 // .setTween(tween) 284 // .setClassToggle(this, 'visible') 285 // // .addIndicators() // add indicators (requires plugin) 286 // .addTo(self.controller); 287 }); 288 289 $('.ias-2024--scale-in').each(function () { 290 gsap.from(this.querySelector('img'), 291 { 292 scale: 2, 293 duration: 2, 294 ease: "Power4.easeOut", 295 scrollTrigger: { 296 trigger: this, 297 toggleActions: "play pause resume reverse", 298 } 299 }); 300 gsap.from(this, 301 { 302 scale: 0.8, 303 duration: 2, 304 autoAlpha: 0, 305 y: 20, 306 ease: "Power4.easeOut", 307 scrollTrigger: { 308 trigger: this, 309 toggleActions: "play pause resume reverse", 310 } 311 }); 312 }); 313 314 } 315 316 317 318 IAS2024.prototype.initMainMenu = function () { 319 var self = this; 320 var anchors = []; 321 var lastHashId = ""; 322 self.startAnchorLoad = new Date().getTime(); 323 gsap.registerPlugin(ScrollTrigger); 324 325 $('.ny-2024--menuitem, .ny-2024--primary-menu-logo').each(function (index) { 326 var $link = $(this).find('a'); 327 if ($(this)[0].tagName == "A") { 328 $link = $(this); 329 } 330 var id = $link.attr('href').replace('#', ''); 331 var $el = $('#' + id); 332 if ($el.length == 0) { 333 return; 334 } 335 var triggerElement = $el[0]; 336 anchors.push(id); 337 338 self.activeShareImageIndex = 0; 339 340 ScrollTrigger.create({ 341 trigger: triggerElement, 342 start: "top center", 343 end: "bottom center", 344 onEnter: function () { 345 var id = $el.attr('id'); 346 var $parent = $('.ny-2024--menuitem [href="#' + id + '"]').parent(); 347 if ($parent.hasClass('ny-2024--menuitem')) { 348 $('.ny-2024--menuitem__active').removeClass('ny-2024--menuitem__active'); 349 $parent.addClass('ny-2024--menuitem__active'); 350 $('.year-review-2021--mobile-menuitem-link[href="#' + id + '"]').addClass('ny-2024--menuitem__active'); 351 } 352 // clear the hash in the url 353 if (window.location.hash) { 354 window.history.replaceState({}, '', window.location.href.split('#')[0]); 355 } 356 }, 357 onLeaveBack: function () { 358 var id = $el.attr('id'); 359 var $parent = $('.ny-2024--menuitem [href="#' + id + '"]').parent() 360 var $prev = $parent.prev(); 361 $('.ny-2024--menuitem__active').removeClass('ny-2024--menuitem__active'); 362 if ($prev.length > 0 && $prev.hasClass('ny-2024--menuitem')) { 363 $prev.addClass('ny-2024--menuitem__active'); 364 $('.year-review-2021--mobile-menuitem-link[href="#' + id + '"]').parent().prev().find('a').addClass('ny-2024--menuitem__active'); 365 } 366 // clear the hash in the url 367 if (window.location.hash) { 368 window.history.replaceState({}, '', window.location.href.split('#')[0]); 369 } 370 } 371 }); 372 }); 373 // if(self.videoSelected()) { 374 // self.updateUrlHash(window.location.hash.replace("#", "")); 375 // } else if(lastHashId) { 376 // self.updateUrlHash(lastHashId); 377 // } 378 379 $('.year-review-2021--mobile-menuitem').click(function () { 380 $('.year-review-2021-mobile-menu').removeClass('year-review-2021-mobile-menu__visible'); 381 }); 382 383 $('.ny-2024--menuitem-link__mobile-overlay').click(function (event) { 384 if ($(window).width() > 992) { 385 return; 386 } 387 388 event.preventDefault(); 389 event.stopPropagation(); 390 391 trackEvent("Menu", "Opened"); 392 393 $('.year-review-2021-mobile-menu').toggleClass('year-review-2021-mobile-menu__visible'); 394 }); 395 396 $('.year-review-2021-mobile-menu--close').click(function () { 397 $('.year-review-2021-mobile-menu').removeClass('year-review-2021-mobile-menu__visible'); 398 }); 399 } 400 401 402 IAS2024.prototype.initScrollPosition = function () { 403 var self = this; 404 self.calculateSectionSize(); 405 var halfScreen = $(window).height() * 0.5; 406 $(window).resize(function () { 407 self.calculateSectionSize(); 408 halfScreen = $(window).height() * 0.5; 409 }); 410 411 $(window).scroll(function () { 412 var scrollTop = window.scrollY + halfScreen; 413 if(window.scrollY == 0) { 414 scrollTop = 0; 415 } 416 var activeSection = self.sections[self.sections.length - 1]; 417 var foundSection = false;
418 var acttiveSectionIndex = 0; 419 for (var index = 0; index < self.sections.length; index++) { 420 var section = self.sections[index]; 421 if (section.start <= scrollTop && scrollTop < section.end) { 422 foundSection = true; 423 activeSection = self.sections[index]; 424 acttiveSectionIndex = index; 425 break; 426 } 427 } 428 429 if (!foundSection) { 430 TweenMax.set('.ny-2024--primary-menu__progress', { scaleX: 0 }); 431 return; 432 } 433 434 // if window.pixelRatio is fractional, we need to scale the progress bar 435 var windowScaleFactor = 1; 436 if (window.devicePixelRatio != Math.round(window.devicePixelRatio)) { 437 windowScaleFactor = window.devicePixelRatio / Math.floor(window.devicePixelRatio); 438 } 439 440 var activeSectionProgress = (scrollTop - activeSection.start) / (activeSection.end - activeSection.start); 441 442 var totalProgress; 443 var totalProgressW = 0; 444 if (self.isMobile()) { 445 totalProgress = activeSectionProgress; 446 } else { 447 for (var index = 0; index < self.sections.length; index++) { 448 var section = self.sections[index]; 449 if (section.start < activeSection.start) { 450 totalProgressW += section.width; 451 } 452 } 453 454 totalProgressW += activeSectionProgress * activeSection.width * windowScaleFactor; 455 totalProgress = totalProgressW / ($('.ny-2024--primary-menu').width() * windowScaleFactor); 456 } 457 458 if(totalProgress > 1) { 459 totalProgress = 1; 460 } 461 462 TweenMax.set('.ny-2024--primary-menu__progress', { scaleX: totalProgress }); 463 }); 464 } 465 466 IAS2024.prototype.calculateSectionSize = function () { 467 var sections = []; 468 var start = $('.page-menu-start').offset().top; 469 var isMobile = this.isMobile(); 470 // if window.pixelRatio is fractional, we need to scale the progress bar 471 var windowScaleFactor = 1; 472 if (window.devicePixelRatio != Math.round(window.devicePixelRatio)) { 473 windowScaleFactor = window.devicePixelRatio / Math.floor(window.devicePixelRatio); 474 } 475 476 $('.ny-2024--menuitem').each(function (index) { 477 var $el = $(this); 478 // var margin = parseInt($el.css("paddingRight").replace('px', '')) * 2; 479 // if (isNaN(margin)) { 480 // margin = 0; 481 // } 482 // calcualte outerWidth 483 var width = this.offsetWidth * windowScaleFactor; 484 // length = $($el.find('a').attr('href')).offset().top; 485 var end = 0; 486 if ($el.next().length > 0 && $el.next().find('a').length > 0) { 487 end = $($el.next().find('a').attr('href')).offset().top; 488 } else { 489 end = $('.end-of-article').offset().top; 490 } 491 if (isMobile) { 492 width = $(window).width(); 493 } 494 sections.push({ 495 start: start, 496 end: end, 497 width: width, 498 }); 499 start = end; 500 }); 501 this.sections = sections; 502 } 503 504 505 506 507 IAS2024.prototype.fadeInBubble = function () { 508 setTimeout(function () { 509 $('.enlightenment-launcher-container').addClass('enlightenment-launcher-container__opened'); 510 TweenLite.from($('.enlightenment-launcher-container'), 0.75, { width: 24, ease: Power4.easeInOut }); 511 TweenLite.to($('.enlightenment-launcher-container'), 0.75, { opacity: 1, clearProps: 'width', ease: Power4.easeInOut }); 512 513 setTimeout(function () { 514 $('.enlightenment-launcher-container').removeClass('enlightenment-launcher-container__opened'); 515 }, 10000); 516 }, 10000); 517 518 var self = this; 519 520 $('.oca-form-button, .oca-start--button, .who-we-are-cta-button__oca').click(function (event) { 521 event.preventDefault(); 522 event.stopPropagation(); 523 524 var $modal = $('.modal-full-viewport__who-we-are-oca').first(); 525 $modal.addClass('visible'); 526 history.pushState({}, '', '#modal-open'); 527 self.disableBodyScroll(); 528 setTimeout(function () { 529 self.checkModalScroll(); 530 }, 500); 531
532 TweenMax.from($modal, 0.25, { autoAlpha: 0, ease: Power4.easeOut, clearProps: 'all' }); 533 TweenMax.from($modal.find('.who-we-are-oca__content-wrapper'), 0.75, { y: "100%", ease: Power4.easeOut }); 534 535 }); 536 } 537 538 IAS2024.prototype.initLazyload = function () { 539 //add simple support for background images: 540 document.addEventListener('lazybeforeunveil', function (e) { 541 var bg = e.target.getAttribute('data-bg'); 542 if (bg) { 543 e.target.style.backgroundImage = 'url(' + bg + ')'; 544 } 545 }); 546 setTimeout(() => { 547 $('[data-bg]').each(function () { 548 if ($(this).hasClass('lazyloaded')) { 549 var bg = this.getAttribute('data-bg'); 550 if (bg) { 551 this.style.backgroundImage = 'url(' + bg + ')'; 552 } 553 } 554 }); 555 }, 500); 556 557 $('slide [data-src]').each(function () { 558 var $el = $(this); 559 if (!$el.hasClass('lazyload')) { 560 $el.attr('data-srcset', $el.attr('data-src') + " 1x, " + $el.attr('data-src2x') + " 2x"); 561 $el.addClass('lazyload'); 562 } 563 }); 564 565 566 var self = this; 567 $(window).resize(function () { 568 self.updateCache(); 569 }); 570 571 $(document).ready(function () { 572 self.updateCache(); 573 }); 574 } 575 576 IAS2024.prototype.updateCache = function () { 577 window.IAS2024.cachedPageHeight = $(document).height(); 578 window.IAS2024.cachedWindowHeight = $(window).height(); 579 window.IAS2024.cachedOuterWindowWidth = $(window).outerWidth(); 580 window.IAS2024.cachedOuterWindowHeight = $(window).outerHeight(); 581 } 582 583 IAS2024.prototype.initNav = function () { 584 var self = this; 585 586 // new ScrollMagic.Scene({ triggerElement: ".year-review-2022--top-wrapper", triggerHook: "onLeave", reverse: true }) 587 // .setClassToggle('.year-review-2021-nav', 'year-review-2022-nav__visible') 588 // .addTo(self.controller); 589 590 $('.year-review-2021-nav__up').click(function () { 591 if (self.scrollToPrevInset()) { 592 return; 593 } 594 595 if (typeof self.activeStepIndex == "undefined") { 596 var index = 0; 597 } else { 598 var index = self.activeStepIndex - 1; 599 } 600 if (self.scrollToIndex > -1) { 601 index = self.scrollToIndex - 1; 602 } 603 604 var duration = $(this).data('duration'); 605 606 var $lastInset = self.getLastInsetFor(index); 607 if ($lastInset) { 608 self.scrollToElement($lastInset, duration); 609 } else { 610 self.lastScrollAnimation = gsap.to(window, { 611 duration: 2, 612 scrollTo: { 613 y: 0, 614 }, 615 }); 616 } 617 618 }); 619 620 $('.year-review-2021-nav__down, .ias-2024--bounce').click(function () { 621 if (self.scrollToNextInset()) { 622 return; 623 } 624 if (typeof self.activeStepIndex == "undefined") { 625 var index = 0; 626 } else { 627 var index = self.activeStepIndex + 1; 628 } 629 if (self.scrollToIndex > -1) { 630 index = self.scrollToIndex + 1; 631 } 632 }); 633 } 634 635 IAS2024.prototype.initControls = function () { 636 var self = this; 637 638 $('.navigation-step').each(function (index) { 639 var $el = $(this); 640 $el.attr('data-index', index); 641 }); 642 643 $(document).keydown(function (e) { 644 var arrow = { left: 37, up: 38, right: 39, down: 40 }; 645 646 switch (e.which) { 647 // case arrow.left: 648 // for (var index = 0; index < self.swipers.length; index++) { 649 // var swiper = self.swipers[index]; 650 // if(isInViewportVisible(swiper.$el)) { 651 // var index = swiper.$el.attr('data-swiper-index'); 652 // self.swipers[parseInt(index)].slidePrev(); 653 // } 654 // } 655 // break; 656 case arrow.up: 657 if (self.scrollToPrevInset()) { 658 e.preventDefault(); 659 e.stopPropagation(); 660 $('.year-review-2021-nav__up').addClass('year-review-2021-nav__up-pressed'); 661 setTimeout(function () { 662 $('.year-review-2021-nav__up').removeClass('year-review-2021-nav__up-pressed'); 663 }, 1100); 664 return; 665 } 666 break; 667 // case arrow.right: 668 // for (var index = 0; index < self.swipers.length; index++) { 669 // var swiper = self.swipers[index]; 670 // if(isInViewportVisible(swiper.$el)) { 671 // var index = swiper.$el.attr('data-swiper-index'); 672 // self.swipers[parseInt(index)].slideNext(); 673 // } 674 // } 675 // break; 676 case arrow.down: 677 if (self.scrollToNextInset()) { 678 e.preventDefault(); 679 e.stopPropagation(); 680 $('.year-review-2021-nav__down').addClass('year-review-2021-nav__down__pressed'); 681 setTimeout(function () { 682 $('.year-review-2021-nav__down').removeClass('year-review-2021-nav__down__pressed'); 683 }, 1100); 684 return; 685 } 686 break; 687 // case 32: 688 // for (var index in videojs.players) { 689 // if (Object.hasOwnProperty.call(videojs.players, index)) { 690 // var video = videojs.players[index]; 691 // var $el = $(video.el()); 692 // if(isInViewportVisible($el) && self.qualifiedAutoplay($el)) { 693 // var $wrapper = $el.closest('.show-on-the-road--playbutton-area'); 694 // var videoPlaying = $wrapper.hasClass('show-on-the-road-videoautoplay__inline');
695 // if(!videoPlaying) { 696 // $wrapper.click(); 697 // } else if(video.paused()) { 698 // video.play(); 699 // } else { 700 // video.pause(); 701 // } 702 703 // e.preventDefault(); 704 // e.stopPropagation(); 705 // } 706 // } 707 // } 708 // break; 709 } 710 }); 711 } 712 713 714 715 716 IAS2024.prototype.getLastInsetFor = function (index) { 717 var $container = $('.navigation-step[data-id=' + index + ']'); 718 if ($container.length == 0) { 719 return false; 720 } 721 return $container.last(); 722 } 723 724 IAS2024.prototype.getPrevInset = function () { 725 var self = this; 726 var $insets = $('.navigation-step'); 727 if ($insets.length == 0) { 728 return false; 729 } 730 731 var activeInsetIndex = -1; 732 var scrollTop = $(window).scrollTop(); 733 var windowHeight = $(window).height(); 734 var $activeInset; 735 736 $insets.each(function (index, inset) { 737 var $inset = $(inset); 738 var alignBottom = $inset.data('align-bottom'); 739 var offset = 200; 740 if ($inset.data("offset")) { 741 offset = parseInt($inset.data("offset")); 742 } 743 744 if($inset.closest('.who-we-are-iaas-grid-active').length > 0) { 745 return; 746 } 747 748 if (self.getScrollPosition($inset) + 100 < scrollTop) { 749 $activeInset = $inset; 750 activeInsetIndex = index; 751 } 752 }); 753 754 var $target; 755 756 // did not scroll past first inset, go to it 757 if (activeInsetIndex == -1) { 758 // $target = $($insets[0]); 759 return false; 760 } else if (activeInsetIndex == 0) { 761 $target = $('.navigation-step').first(); 762 } else if (activeInsetIndex - 1 < 0) { 763 return false; 764 } else { 765 $target = $($insets[activeInsetIndex]); 766 } 767 768 return $target; 769 } 770 771 IAS2024.prototype.scrollToPrevInset = function () { 772 var $target = this.getPrevInset(); 773 774 var duration = $target.data('duration'); 775 776 this.scrollToElement($target, duration); 777 778 window.history.replaceState({}, '', "#"); 779 780 return true; 781 } 782 783 IAS2024.prototype.getScrollPosition = function (el) { 784 var self = this; 785 if (self.lastScrollAnimation) { 786 self.lastScrollAnimation.pause(); 787 } 788 789 var id = el.attr('id'); 790 var alignBottom = el.data('align-bottom'); 791 var ease = Power4.easeInOut; 792 793 var topOffset = el.offset().top; 794 795 if (el.data('align-center')) { 796 topOffset = topOffset - $(window).height() / 2 + el.height() / 2; 797 } 798 799 var scrollingDown = topOffset - window.scrollY > 0; 800 801 var topSpace = 66; 802 var bottomAligner = 20; 803 if (typeof el.data("top") != "undefined") { 804 topSpace = parseInt(el.data("top")); 805 bottomAligner = parseInt(el.data("top")); 806 } 807 808 if (typeof el.data("ease") != "undefined") { 809 ease = Power4.easeOut; 810 } 811 812 if (typeof el.data("easein") != "undefined") { 813 ease = Power4.easeInOut; 814 } 815 816 817 if (alignBottom) { 818 return topOffset + bottomAligner - $(window).height(); 819 } 820 return topOffset - topSpace; 821 } 822 823 IAS2024.prototype.scrollToNextInset = function () { 824 825 var $target = this.getNextInset(); 826 827 var duration = $target.data('duration'); 828 this.scrollToElement($target, duration); 829 830 window.history.replaceState({}, '', "#"); 831 832 return true; 833 } 834 835 IAS2024.prototype.getNextInset = function () { 836 var self = this; 837 var $insets = $('.navigation-step'); 838 if ($insets.length == 0) { 839 return false;
840 } 841 var $activeInset; 842 var activeInsetIndex = 0; 843 var scrollTop = $(window).scrollTop(); 844 845 var windowHeight = $(window).height(); 846 847 848 $insets.each(function (index, inset) { 849 if ($activeInset) { 850 return; 851 } 852 var $inset = $(inset); 853 var offset = 100; 854 855 if($inset.closest('.who-we-are-iaas-grid-active').length > 0) { 856 return; 857 } 858 859 var alignBottom = $inset.data('align-bottom'); 860 if (typeof $inset.data('offset') != "undefined") { 861 offset = parseInt($inset.data('offset')); 862 } 863 864 if (self.getScrollPosition($inset) - offset > scrollTop) { 865 $activeInset = $inset; 866 activeInsetIndex = index; 867 } 868 }); 869 870 var $target; 871 872 // did not scroll past first inset, go to it 873 if (!$activeInset) { 874 if (window.scrollY > 2000) { 875 return; 876 } 877 $target = $($insets[0]); 878 } else { 879 $target = $activeInset; 880 } 881 882 return $target; 883 } 884 885 886 IAS2024.prototype.getScrollTopOffset = function (el) { 887 var alignBottom = el.data('align-bottom'); 888 889 var topSpace = 75; 890 var bottomAligner = 20; 891 if (typeof el.data("top") != "undefined") { 892 topSpace = parseInt(el.data("top")); 893 bottomAligner = 0; 894 } else if (alignBottom) { 895 topSpace = 20; 896 bottomAligner = 0; 897 898 if (typeof el.data("top") != "undefined") { 899 topSpace = parseInt(el.data("top")); 900 } 901 } 902 903 904 var topOffset = el.offset().top; 905 if (el.data('align-center')) { 906 topOffset = topOffset - $(window).height() / 2 + el.height() / 2; 907 } else if (alignBottom) { 908 topOffset = topOffset + topSpace + bottomAligner - $(window).height(); 909 } else { 910 topOffset = topOffset - topSpace; 911 } 912 913 return topOffset; 914 } 915 916 IAS2024.prototype.scrollToElement = function (el, duration) { 917 var self = this; 918 if (self.lastScrollAnimation) { 919 self.lastScrollAnimation.pause(); 920 } 921 922 var topOffset = self.getScrollTopOffset(el); 923 924 var dur = 2; 925 var ease = Power4.easeInOut; 926 927 if (typeof el.data("ease") != "undefined") { 928 ease = Power1.easeOut; 929 // ease = CustomEase.create("custom", "M0,0 C0,0 0.286,0.175 0.346,0.197 0.36,0.202 0.783,0.328 0.783,0.328 0.783,0.328 0.784,0.574 0.875,0.612 0.907,0.626 0.906,0.626 0.915,0.634 0.925,0.644 0.939,0.67 0.945,0.683 0.952,0.699 0.96,0.729 0.965,0.751 0.977,0.807 1,1 1,1 "); 930 } 931 932 if (typeof el.data("ease-curve") != "undefined") { 933 ease = el.data("ease-curve"); 934 } 935 if (typeof el.data("ease-curve-custom") != "undefined") { 936 ease = CustomEase.create("custom", el.data("ease-curve-custom")); 937 } 938 939 if (typeof el.data("easein") != "undefined") { 940 ease = Power4.easeInOut; 941 } 942 943 944 if (duration) { 945 dur = duration / 1000; 946 } 947 948 949 var scrollForward = topOffset - window.scrollY > 0; 950 951 if (scrollForward) { 952 var $prevInset; 953 var currentIndex = parseInt(el.attr('data-index')); 954 if (currentIndex > 0) { 955 $prevInset = $('.navigation-step[data-index="' + (currentIndex - 1) + '"]'); 956 } 957 958 959 if ($prevInset) { 960 var currentPosition = self.getScrollTopOffset($prevInset); 961 var totalScrollDistance = Math.abs(currentPosition - topOffset); 962 var remainingScrollDistance = Math.abs(topOffset - window.scrollY); 963 964 if(typeof el.data('dynamic-duration') == 'undefined') { 965 dur = dur * remainingScrollDistance / totalScrollDistance; 966 } 967 } 968 } else { 969 var $nextInset; 970 var currentIndex = parseInt(el.attr('data-index')); 971 if (currentIndex < $('.navigation-step').length - 1) { 972 $nextInset = $('.navigation-step[data-index="' + (currentIndex + 1) + '"]'); 973 } 974 975 976 if ($nextInset) { 977 var currentPosition = self.getScrollTopOffset($nextInset); 978 var totalScrollDistance = Math.abs(currentPosition - topOffset); 979 var remainingScrollDistance = Math.abs(topOffset - window.scrollY); 980 981 dur = dur * remainingScrollDistance / totalScrollDistance; 982 } 983 } 984 985 if (dur < 0.5) { 986 dur = 0.5; 987 } 988 989 990 console.log('dur',dur); 991 992 self.lastScrollAnimation = gsap.to(window, { 993 duration: dur, 994 scrollTo: { 995 y: topOffset, 996 }, 997 ease: ease, 998 }); 999 1000 } 1001 1002 1003 IAS2024.prototype.getPageHeight = function () { 1004 // called from ScrollMagic 1005 var self = window.IAS2024 || this;
1006 if (!self.cachedPageHeight) { 1007 self.cachedPageHeight = $(document).height(); 1008 } 1009 return self.cachedPageHeight; 1010 } 1011 1012 IAS2024.prototype.getWindowHeight = function () { 1013 // called from ScrollMagic 1014 var self = window.IAS2024 || this; 1015 if (!self.cachedWindowHeight) { 1016 self.cachedWindowHeight = $(window).height(); 1017 } 1018 return self.cachedWindowHeight; 1019 } 1020 1021 IAS2024.prototype.getWindowOuterWidth = function () { 1022 // called from ScrollMagic 1023 var self = window.IAS2024 || this; 1024 if (!self.cachedOuterWindowWidth) { 1025 self.cachedOuterWindowWidth = $(window).outerWidth(); 1026 } 1027 return self.cachedOuterWindowWidth; 1028 } 1029 1030 IAS2024.prototype.isMobile = function () { 1031 return $(window).width() < 767; 1032 } 1033 1034 IAS2024.prototype.isMobileAgent = function () { 1035 return isMobile.any; 1036 } 1037 1038 IAS2024.prototype.isChrome119OrLower = function () { 1039 var userAgent = navigator.userAgent; 1040 var chromeAgent = userAgent.indexOf("Chrome") > -1; 1041 1042 if (chromeAgent) { 1043 var chromeVersion = userAgent.match(/Chrome\/(\d+)/); 1044 if (chromeVersion && chromeVersion.length > 1) { 1045 var versionNumber = parseInt(chromeVersion[1], 10); 1046 return versionNumber <= 119; 1047 } 1048 } 1049 return false; 1050 } 1051 1052 IAS2024.prototype.isTablet = function () { 1053 return $(window).width() >= 768 && $(window).width() < 992; 1054 } 1055 1056 IAS2024.prototype.isAndroid = function () { 1057 var ua = navigator.userAgent.toLowerCase(); 1058 var isAndroid = ua.indexOf("android") > -1; 1059 return isAndroid; 1060 } 1061 1062 IAS2024.prototype.isIpod = function () { 1063 var ua = navigator.userAgent.toLowerCase(); 1064 var isIpod = ua.indexOf("iPod") > -1; 1065 return isIpod; 1066 } 1067 1068 IAS2024.prototype.initButtonFadein = function () { 1069 var self = this; 1070 $('.ias-2024-button-wrapper').each(function () { 1071 var timeline = gsap.timeline({ 1072 scrollTrigger: { 1073 trigger: this, 1074 start: 'bottom bottom+=5%', 1075 end: "100%", 1076 toggleActions: "play none resume reverse", 1077 }, 1078 }); 1079 timeline.fromTo(this.querySelector('.ias-2024-button-inner'), { 1080 scale: 0, 1081 },{ 1082 duration: 0.25, 1083 scale: 1, 1084 autoAlpha: 1, 1085 }); 1086 timeline.fromTo(this.querySelector('.ias-2024-button-outer-circle'), { 1087 scale: 0, 1088 },{ 1089 duration: 0.5, 1090 scale: 1.5, 1091 autoAlpha: 1, 1092 }, "<"); 1093 1094 timeline.fromTo(this.querySelector('.ias-2024-button-outer-circle'), { 1095 scale: 1.5, 1096 },{ 1097 duration: 0.5, 1098 scale: 0, 1099 }); 1100 timeline.from(this.querySelector('.ias-2024-button-inner'), { 1101 duration: 0.75, 1102 width: 50, 1103 height: 50, 1104 clearProps: 'width, height', 1105 }, "-=0.3"); 1106 timeline.from(this.querySelectorAll('.ias-2024-button-inner-text'), { 1107 duration: 0.25, 1108 autoAlpha: 0, 1109 }); 1110 }); 1111 } 1112 1113 IAS2024.prototype.initIntroVideo = function () { 1114 var self = this; 1115 videojs($('.ias-2024--top-video')[0], { controls: false, muted: true, loop: false }).ready(function () { 1116 var src = $(this.el_).data('src'); 1117 this.src(src); 1118 var player = this; 1119 var fallback = false; 1120 player.el().querySelector('video').addEventListener("error", (event) => { 1121 // already fallback 1122 if (fallback) { 1123 animationInited = true; 1124 self.initIntroAnimation(); 1125 $('.ias-2024-top-bg').addClass('ias-2024-top-bg--loaded'); 1126 return; 1127 } 1128 for (var i = 0; i < src.length; i++) { 1129 var source = src[i]; 1130 if (source.type == 'video/mp4; codecs="avc1"') { 1131 player.src([source]); 1132 player.play(); 1133 fallback = true; 1134 break; 1135 } 1136 } 1137 }) 1138 player.play(); 1139 player.one("timeupdate", function () { 1140 TweenMax.to(player.el_, 0.2, { autoAlpha: 1, ease: Power4.easeOut }); 1141 player.play(); 1142 }); 1143 1144 // player.on("error", function (event) { 1145 // animationInited = true; 1146 // self.initIntroAnimation(); 1147 // $('.ias-2024-top-bg').addClass('ias-2024-top-bg--loaded'); 1148 // }); 1149 1150 1151 var animationInited = false;
1152 player.on('timeupdate', function () { 1153 var timeLeft = player.duration() - player.currentTime(); 1154 if (timeLeft < 3 && !animationInited) { 1155 animationInited = true; 1156 self.initIntroAnimation(); 1157 $('.ias-2024-top-bg').addClass('ias-2024-top-bg--loaded'); 1158 } 1159 }); 1160 }); 1161 } 1162 1163 IAS2024.prototype.initIntroAnimation = function () { 1164 var splitSubtitle = new SplitText(".ias-2024-subtitle", {type: "words"}); 1165 1166 gsap.timeline() 1167 .fromTo(".ias-2024-four-decades", 1168 { scale: 10, opacity: 0 }, 1169 { scale: 1, opacity: 1, duration: 0.6, ease: "power4.out" } 1170 ) 1171 .fromTo(".ias-2024--top-video", 1172 { x: 0, y: 0 }, 1173 { x: 2, y: 2, duration: 0.05, yoyo: true, repeat: 2, ease: "sine.inOut" }, 1174 "-=0.2" 1175 ) 1176 .fromTo(".ias-2024-force-for-freedom", 1177 { scale: 10, opacity: 0 }, 1178 { scale: 1, opacity: 1, duration: 0.6, ease: "power4.out" } 1179 , "-=0.3") 1180 .fromTo(".ias-2024--top-video", 1181 { x: 0, y: 0 }, 1182 { x: 2, y: 2, duration: 0.1, yoyo: true, repeat: 3, ease: "sine.inOut" }, 1183 "-=0.2" 1184 ) 1185 .set('.ias-2024-subtitle', { 1186 autoAlpha: 1, 1187 }, "<") 1188 .from(splitSubtitle.words, { 1189 duration: 0.75, 1190 autoAlpha: 0, 1191 ease: Power4.easeOut, 1192 stagger: 0.1, 1193 }, "<") 1194 .fromTo('.ias-2024--bounce', 0.5, { 1195 y: 20, 1196 opacity: 0, 1197 }, { 1198 y: 0, 1199 autoAlpha: 1, 1200 ease: Power4.easeOut, 1201 stagger: 0.25, 1202 }, "<"); 1203 } 1204 1205 IAS2024.prototype.initIntroScroll = function () { 1206 gsap.fromTo('.ias-2024-first-images', { 1207 autoAlpha: 0, 1208 y: 50, 1209 }, { 1210 autoAlpha: 1, 1211 y: 0, 1212 scrollTrigger: { 1213 // trigger: '.ias-2024-top-inner', 1214 // start: "bottom center+=10%", 1215 trigger: '.ias-2024-first-images', 1216 start: "center bottom", 1217 } 1218 }) 1219 } 1220 1221 IAS2024.prototype.initGrowingLines = function () { 1222 var self = this; 1223 1224 $('.ias-2024-vertical-line').each(function () { 1225 gsap.from(this.querySelector('.ias-2024-grow-line'), { 1226 height: 0, 1227 scrollTrigger: { 1228 start: 'top bottom', 1229 end: 'top center', 1230 duration: 1, 1231 // scrub: true, 1232 trigger: this, 1233 toggleClass: 'ias-2024-grow-line__visible', 1234 toggleActions: "play none resume reverse", 1235 } 1236 }); 1237 1238 }); 1239 } 1240 1241 1242 IAS2024.prototype.initSectionStaticBg = function () { 1243 // $(window).resize(function () { 1244 // var horizontalLayout = true; 1245 // if($(window).width() * 0.7 > $(window).height()) { 1246 // horizontalLayout = false; 1247 // } 1248 // $('.ias-2023-section-bg').each(function () { 1249 // if(horizontalLayout) { 1250 // $(this).addClass('ias-2023-section-bg--horizontal'); 1251 // } else { 1252 // $(this).removeClass('ias-2023-section-bg--horizontal'); 1253 // } 1254 // }); 1255 // }); 1256 1257 var self = this; 1258 $('.ias-2024-section-bg').each(function () { 1259 gsap.timeline({ 1260 scrollTrigger: { 1261 trigger: this, 1262 start: 'top top', 1263 end: function () { 1264 return self.getWindowHeight() + "px"; 1265 }, 1266 scrub: true, 1267 pin: this.querySelector('.ias-2024-section-bg-image'), 1268 pinSpacing: false, 1269 invalidateOnRefresh: true, // invalidate on resize 1270 }, 1271 }); 1272 gsap.timeline({ 1273 scrollTrigger: { 1274 trigger: this, 1275 start: 'top bottom', 1276 end: "50%", 1277 scrub: true, 1278 ease: "Power4.easeIn", 1279 }, 1280 }).from(this, { 1281 autoAlpha: 0, 1282 }); 1283 }); 1284 1285 } 1286 1287 IAS2024.prototype.initPledgeText = function () { 1288 gsap.timeline({ 1289 scrollTrigger: { 1290 trigger: ".ias-2024-pledge-bg-trigger", 1291 start: "top top", 1292 end: "bottom bottom", 1293 endTrigger: ".ias-2024-pledge-wrapper", 1294 toggleActions: "play none resume reverse", 1295 scrub: true, 1296 pin: ".ias-2024-pledge-bg-wrapper", 1297 pinSpacing: false, 1298 }, 1299 }); 1300 1301 gsap.timeline({ 1302 scrollTrigger: { 1303 trigger: ".ias-2024-pledge-bg-wrapper", 1304 start: "top top", 1305 toggleActions: "play none resume reverse", 1306 }, 1307 }) 1308 .fromTo(".ias-2024-pledge-bg", { 1309 autoAlpha: 0, 1310 duration: 0.1, 1311 }, { 1312 autoAlpha: 1, 1313 }); 1314 1315 gsap.timeline({ 1316 scrollTrigger: { 1317 trigger: ".ias-2024-pledge-text-wrapper", 1318 start: "top top", 1319 endTrigger: '.ias-2024-pledge-wrapper', 1320 end: "bottom bottom", 1321 toggleActions: "play none resume reverse", 1322 scrub: true, 1323 pin: true, 1324 pinSpacing: false, 1325 }, 1326 }); 1327 1328 gsap.timeline({ 1329 scrollTrigger: { 1330 trigger: ".ias-2024-pledge-wrapper", 1331 start: "top bottom", 1332 // endTrigger: '.ias-2024-pledge-wrapper', 1333 end: "bottom top", 1334 toggleActions: "play none resume reverse", 1335 scrub: true, 1336 }, 1337 }) 1338 .fromTo(".ias-2024-pledge-text", { 1339 duration: 1, 1340 y: "100%", 1341 }, { 1342 y: "-100%", 1343 }, 0); 1344 } 1345 1346 IAS2024.prototype.initStatAnimations = function () { 1347 // Pin the planet 1348 gsap.timeline({ 1349 scrollTrigger: { 1350 trigger: ".ias-2024-large-stat--planet", 1351 start: "bottom bottom", 1352 end: "bottom bottom", 1353 endTrigger: ".ias-2024-large-stat-wrapper", 1354 scrub: true, 1355 pin: ".ias-2024-large-stat--planet", 1356 pinSpacing: false, 1357 } 1358 }); 1359 1360 var $sections = $('.ias-2024-large-stat-section'); 1361 1362 $sections.each(function (index, section) { 1363 var $section = $(section); 1364 1365 // fade in the next section 1366 if(index < $sections.length - 1) { 1367 // fade out the section 1368 var fadeTimeline = gsap.timeline({ 1369 scrollTrigger: { 1370 trigger: $section, 1371 start: "bottom bottom", 1372 toggleActions: "play pause resume reverse", 1373 }, 1374 }) 1375 .to($section.find('.ias-2024-large-stat--bg, .ias-2024-large-stat---bg-image'), {
1376 autoAlpha: 0, 1377 duration: 0.5, 1378 ease: "sine.inOut", 1379 }); 1380 1381 1382 // fadeTimeline.fromTo($($sections[index + 1]).find('.ias-2024-large-stat--flags--inner, .ias-2024-large-stat---bg-image'), { 1383 // autoAlpha: 0, 1384 // }, { 1385 // autoAlpha: 1, 1386 // duration: 0.5, 1387 // ease: "sine.inOut", 1388 // }); 1389 } 1390 1391 gsap.timeline({ 1392 scrollTrigger: { 1393 trigger: $section.find(".ias-2024-large-stat--bg"), 1394 start: "top top", 1395 end: "bottom bottom", 1396 scrub: true, 1397 pin: $section.find(".ias-2024-large-stat---bg-image"), 1398 pinSpacing: false, 1399 }, 1400 }); 1401 1402 gsap.timeline({ 1403 scrollTrigger: { 1404 trigger: $section.find(".ias-2024-large-stat--bg"), 1405 start: "top top", 1406 end: "bottom bottom", 1407 scrub: true, 1408 pin: $section.find(".ias-2024-large-stat--bg"), 1409 pinSpacing: false, 1410 }, 1411 }); 1412 1413 const timeline = gsap.timeline({ 1414 scrollTrigger: { 1415 trigger: $section.find(".ias-2024-large-stat--bg"), 1416 start: "top top", 1417 toggleActions: "play pause resume reverse", 1418 }, 1419 }); 1420 1421 // Scale and fade-in animation with a shorter duration 1422 timeline.fromTo($section.find(".ias-2024-large-stat--number"), { 1423 scale: 10, 1424 autoAlpha: 0, 1425 }, { 1426 scale: 1, 1427 autoAlpha: 1, 1428 ease: "sine.inOut", 1429 // duration: 20, 1430 duration: 0.5, 1431 }) 1432 .fromTo(".ias-2024-large-stat--planet--inner", 1433 { x: 0, y: 0 }, 1434 { x: 2, y: 2, duration: 0.1, yoyo: true, repeat: 5, ease: "sine.inOut" }, 1435 "-=0.2" 1436 ); 1437 1438 timeline.fromTo($section.find(".ias-2024-large-stat--text"), { 1439 y: 50, 1440 autoAlpha: 0, 1441 }, { 1442 y: 0, 1443 autoAlpha: 1, 1444 ease: "sine.inOut", 1445 duration: 0.25 1446 }, "<"); 1447 1448 1449 1450 const targetNumberElement = section.querySelector(".ias-2024-large-stat--flags .ias-2024-large-stat--number__counter"); 1451 1452 if(targetNumberElement != null) { 1453 const targetNumber = parseInt(targetNumberElement.textContent.replace(/,/g, ''), 10); // Read the number from the element and convert it to an integer 1454 let startNumber = 0; 1455 1456 // Helper function to format the number if needed 1457 function formatNumber(num) { 1458 return Math.floor(num); // You can format as needed here (e.g., add commas, round, etc.) 1459 } 1460 var timeline2 = gsap.timeline({ 1461 scrollTrigger: { 1462 trigger: $section.find(".ias-2024-large-stat--flags"), 1463 start: "top top", 1464 toggleActions: "play pause resume reverse", 1465 }, 1466 }).to({}, { 1467 duration: 3, 1468 onUpdate: () => { 1469 if (timeline2.reversed()) return; // If reversing, do not update the number 1470 1471 const progress = timeline2.progress(); 1472 const currentCount = gsap.utils.interpolate(startNumber, targetNumber, gsap.parseEase("expo.out")(progress)); 1473 targetNumberElement.textContent = formatNumber(currentCount); 1474 }, 1475 }); 1476 } 1477 }); 1478 1479 } 1480 1481 1482 IAS2024.prototype.initImageWallSliders = function (disableAnimation) { 1483 var self = this; 1484 const grids = document.querySelectorAll('.ias-2024-image-grid-wrapper'); 1485 grids.forEach(container => { 1486 const grid = container.querySelector('.ias-2024-image-grid'); 1487 const gridWrap = grid.querySelector('.ias-2024-image-grid-wrap'); 1488 const gridItems = grid.querySelectorAll('.ias-2024-image-grid__item'); 1489 const gridItemsInner = [...gridItems].map(item => item.querySelector('.ias-2024-image-__item-inner')); 1490 1491 // Define GSAP timeline with ScrollTrigger 1492 const timeline = gsap.timeline({ 1493 defaults: { ease: 'none' }, 1494 scrollTrigger: { 1495 trigger: gridWrap, 1496 start: 'top bottom+=5%', 1497 end: 'bottom top-=5%', 1498 scrub: true 1499 } 1500 }); 1501 1502 $(container).addClass('ias-2024-image-grid-wrapper--loaded'); 1503 1504 var animationType = grid.getAttribute("data-type"); 1505 1506 /** 1507 * The seed value used for generating random numbers. 1508 * @type {number} 1509 */ 1510 const seed = 1250; 1511 1512 function pseudoRandom(seed, index, low, high) { 1513 let x = Math.sin(seed + index) * 10000; 1514 return low + (x - Math.floor(x)) * (high - low); 1515 } 1516 1517 1518 switch (animationType) { 1519 case '1': 1520 // Set some CSS related style values 1521 grid.style.setProperty('--perspective', '1000px'); 1522 grid.style.setProperty('--grid-inner-scale', '1'); 1523 1524 timeline 1525 .set(gridWrap, { 1526 rotationY: 25, 1527 opacity: 0.4, 1528 }) 1529 .set(gridItems, { 1530 z: (index) => pseudoRandom(seed, index, -1000, 0), 1531 }) 1532 .fromTo(gridItems, 1533 { 1534 xPercent: (index) => pseudoRandom(seed, index, -600, -500), 1535 yPercent: 0, 1536 scale: 1, 1537 }, 1538 { 1539 xPercent: (index) => pseudoRandom(seed, index, 400, 600), 1540 yPercent: (index) => pseudoRandom(seed, index, 200, 300), 1541 } 1542 ); 1543 1544 break; 1545 1546 case '2': 1547 1548 // Set some CSS related style values 1549 grid.style.setProperty('--perspective', '1000px'); 1550 grid.style.setProperty('--grid-inner-scale', '1'); 1551 1552 timeline 1553 .set(gridWrap, { 1554 rotationY: -25, 1555 opacity: 0.4, 1556 }) 1557 .set(gridItems, { 1558 z: () => gsap.utils.random(-1600,200) 1559 }) 1560 .fromTo(gridItems, { 1561 xPercent: (index) => pseudoRandom(seed, index, 500, 1000), 1562 }, { 1563 xPercent: (index) => pseudoRandom(seed, index, -1000, -500), 1564 }, 0) 1565 1566 break; 1567 1568 1569 break; 1570 default: 1571 console.error('Unknown animation type.'); 1572 break; 1573 } 1574 1575 }); 1576 } 1577 1578 1579 IAS2024.prototype.initVMSectionSlideshow = function () { 1580 // $('.ias-2024-large-slide').each(function () { 1581 // gsap.from(this.querySelector('.ias-2024-large-slide-bg'), { 1582 // y: "-30%", 1583 // ease: 'none', 1584 // scrollTrigger: { 1585 // trigger: this, 1586 // start: 'top bottom', 1587 // end: 'bottom top', 1588 // scrub: true, 1589 // } 1590 // }); 1591 // }); 1592 } 1593 1594 IAS2024.prototype.initOdometers = function () { 1595 var self = this; 1596 1597 $('[data-odometer] counter').each(function () { 1598 var $odom = $(this).css('visibility', 'hidden'); 1599 $odom.attr('data-number', $odom.text()); 1600 $odom.text('1'); 1601 1602 // Initialize Odometer 1603 new Odometer({ 1604 el: this, 1605 format: $odom.closest('[data-odometer]').data('format'), 1606 }); 1607 1608 var $el = $(this); 1609 1610 // Create GSAP ScrollTrigger to replace ScrollMagic functionality 1611 gsap.to($el, { 1612 scrollTrigger: { 1613 trigger: $el, 1614 start: "top bottom-=50", // equivalent to triggerHook: 1 and offset: 50 1615 onEnter: function () { 1616 $el.css('visibility', 'visible'); 1617 $el.html($el.attr('data-number')); 1618 }, 1619 onLeaveBack: function () { 1620 // Equivalent to reverse: true behavior 1621 $el.text(''); 1622 }, 1623 }, 1624 }); 1625 }); 1626 } 1627 1628 IAS2024.prototype.initVideos = function () { 1629 var self = this; 1630 $('.year-end-2022--playbutton-area').click(function () { 1631 var $el = $(this); 1632 var videoElId = $el.find('.video-js').attr('id'); 1633 var video = videojs.players[videoElId]; 1634 1635 var scntvlink = $el.data('scntv'); 1636 if (scntvlink) { 1637 } 1638 1639 if (!video) { 1640 return; 1641 } 1642 1643 var videoId = $(this).data('videoid'); 1644 if (!video.controls()) { 1645 for (var player in videojs.players) { 1646 if (videojs.players.hasOwnProperty(player) && videojs.players[player] && $(videojs.players[player].el_).closest('.year-end-2022--playbutton-area').length > 0) { 1647 videojs.players[player].pause(); 1648 } 1649 } 1650 1651 video.controls(true); 1652 video.muted(false); 1653 video.currentTime(0); 1654 video.loop(false); 1655 video.poster($el.data('videoposter')); 1656 $el.addClass('year-end-2022-videoautoplay__inline'); 1657 EventTracker.trackVideo(video); 1658 video.one('timeupdate', function () { 1659 self.addCaptionsIfNeeded(video, videoId); 1660 }); 1661 video.play(); 1662 trackEvent("Video", "Play", videoId); 1663 } else if (video.paused()) { 1664 trackEvent("Video", "Play", videoId); 1665 } 1666 }); 1667 } 1668 1669 1670 IAS2024.prototype.initVideoAutoplay = function () { 1671 var self = this; 1672 _.each($('.year-end-2022--playbutton-area'), function (el, index) { 1673 var $el = $(el); 1674 1675 var videoId = $el.data('videoid'); 1676 1677 var options = jQuery.extend({}, videoOptions); 1678 options.preload = "none"; 1679 options.controls = false;
1680 options.autoplay = false; 1681 options.sources = $el.data('videosrc'); 1682 options.loop = true; 1683 var videos = $el.find('.video-js'); 1684 if (videos.length == 0) { 1685 return; 1686 } 1687 var video = videos[0]; 1688 videojs(videos[0], options).ready(function () { 1689 var tween; 1690 1691 var player = this; 1692 1693 gsap.timeline({ 1694 scrollTrigger: { 1695 trigger: $el, 1696 start: 'top bottom', 1697 end: "bottom top", 1698 onEnter: function (progress, direction, isActive) { 1699 if (!video.muted) { 1700 return; 1701 } 1702 window.history && history.replaceState(null, null, ' '); 1703 player.one('play', function () { 1704 tween && tween.pause(); 1705 tween = gsap.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 1, ease: Power4.easeOut }); 1706 }); 1707 if (!$el.hasClass('year-end-2022-videoautoplay__inline')) { 1708 var vid = player.el().querySelector('video'); 1709 if (vid.currentTime < 3 && $(window).width() < 768) { 1710 player.src(player.currentSources()); 1711 } 1712 vid.controls = false; 1713 player.play(); 1714 } 1715 trackEvent("Video", "Visible", videoId); 1716 }, 1717 onEnterBack: function (progress, direction, isActive) { 1718 if (!video.muted) { 1719 return; 1720 } 1721 player.one('play', function () { 1722 tween && tween.pause(); 1723 tween = gsap.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 1, ease: Power4.easeOut }); 1724 }); 1725 if (!$el.hasClass('year-end-2022-videoautoplay__inline')) { 1726 var vid = player.el().querySelector('video'); 1727 if (vid.currentTime < 3 && $(window).width() < 768) { 1728 player.src(player.currentSources()); 1729 } 1730 vid.controls = false; 1731 player.play(); 1732 } 1733 trackEvent("Video", "Visible", videoId); 1734 }, 1735 onLeave: function (progress, direction, isActive) { 1736 // video started playing by user interaction 1737 if (!video.muted) { 1738 return; 1739 } 1740 tween && tween.pause(); 1741 tween = TweenMax.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 0, ease: Power4.easeOut }); 1742 video.pause(); 1743 }, 1744 onLeaveBack: function (progress, direction, isActive) { 1745 // video started playing by user interaction 1746 if (!video.muted) { 1747 return; 1748 } 1749 if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 1750 tween && tween.pause(); 1751 tween = TweenMax.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 0, ease: Power4.easeOut }); 1752 video.pause(); 1753 } 1754 } 1755 }, 1756 }); 1757 }); 1758 1759 }); 1760 } 1761 1762 1763 IAS2024.prototype.initAwardsScroller = function () { 1764 let sections = gsap.utils.toArray(".ias-2024--awards-item"); 1765 1766 var rtl = $('html').attr('dir') == 'rtl'; 1767 1768 gsap.timeline({ 1769 scrollTrigger: { 1770 trigger: ".ias-2024-awards-wall-wrapper", 1771 start: "top top", 1772 endTrigger: ".ias-2024-awards-wall-wrapper", 1773 end: "bottom bottom",
1774 pin: '.ias-2024-awards-wall-container', 1775 anticipatePin: true, 1776 pinSpacing: false, 1777 scrub: true, 1778 } 1779 }).to('.ias-2024-awards-wall', { 1780 x: "-30%", 1781 }); 1782 1783 1784 gsap.to(sections, { 1785 xPercent: rtl ? 100 * (sections.length - 1) : -100 * (sections.length - 1), 1786 ease: "none", 1787 scrollTrigger: { 1788 trigger: ".ias-2024--awards-row", 1789 pin: true, 1790 pinSpacing: false, 1791 scrub: 1, 1792 snap: 1 / (sections.length - 1), 1793 // base vertical scrolling on how wide the container is so it feels more natural. 1794 // end: "+=3500", 1795 end: "100%", 1796 } 1797 }); 1798 1799 } 1800 1801 1802 // Helper function that lets you dynamically figure out a grid's rows/columns as well as further refine those with "odd" or "even" ones 1803 // https://greensock.com/forums/topic/34808-how-can-i-animate-the-odd-and-even-columns-rows-of-a-grid-with-gsapto/?do=findComment&comment=174346 1804 const getGrid = selector => { 1805 let elements = gsap.utils.toArray(selector), 1806 bounds, 1807 getSubset = (axis, dimension, alternating, merge) => { 1808 let a = [], 1809 subsets = {}, 1810 onlyEven = alternating === "even", 1811 p; 1812 bounds.forEach((b, i) => { 1813 let position = Math.round(b[axis] + b[dimension] / 2), 1814 subset = subsets[position]; 1815 subset || (subsets[position] = subset = []); 1816 subset.push(elements[i]); 1817 }); 1818 for (p in subsets) { 1819 a.push(subsets[p]); 1820 } 1821 if (onlyEven || alternating === "odd") { 1822 a = a.filter((el, i) => !(i % 2) === onlyEven); 1823 } 1824 if (merge) { 1825 let a2 = []; 1826 a.forEach(subset => a2.push(...subset)); 1827 return a2; 1828 } 1829 return a; 1830 }; 1831 elements.refresh = () => bounds = elements.map(el => el.getBoundingClientRect()); 1832 elements.columns = (alternating, merge) => getSubset("left", "width", alternating, merge); 1833 elements.rows = (alternating, merge) => getSubset("top", "height", alternating, merge); 1834 elements.refresh(); 1835 1836 return elements; 1837 } 1838 1839 var hasWebP = (function () { 1840 // some small (2x1 px) test images for each feature 1841 var images = { 1842 basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==", 1843 lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=" 1844 }; 1845 1846 return function (feature) { 1847 var deferred = $.Deferred(); 1848 1849 $("<img>").on("load", function () { 1850 // the images should have these dimensions 1851 if (this.width === 2 && this.height === 1) { 1852 deferred.resolve(); 1853 } else { 1854 deferred.reject(); 1855 } 1856 }).on("error", function () { 1857 deferred.reject(); 1858 }).attr("src", images[feature || "basic"]); 1859 1860 return deferred.promise(); 1861 } 1862 })(); 1863 1864 1865 return IAS2024; 1866}())();
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.