1var NY2024 = (function () { 2 'use strict'; 3 4 function NY2024() { 5 // enforces new 6 if (!(this instanceof NY2024)) { 7 var a = new NY2024(); 8 return a; 9 } 10 } 11 12 NY2024.prototype.Init = function () { 13 var self = this; 14 // self.controller = new ScrollMagic.Controller(); 15 16 // anti bot protection 17 if (lazySizesConfig.disabled) { 18 return; 19 } 20 21 22 23 hasWebP().then(function () { 24 $('body').addClass('webp-support'); 25 }, function () { 26 $('body').addClass('no-webp-support'); 27 }); 28 29 this.initLazyload(); 30 // this.fadeInBubble(); 31 32 setTimeout(function () { 33 EventTracker.trackScroll(); 34 }, 1000); 35 36 37 this.initIntro(); 38 this.initSongDownload(); 39 if (!globalGetParams.screencap) { 40 if (!self.isMobile()) { 41 // loadjs([ 42 // '/plugins/threejs/three.min.js?_=' + cacheId, 43 // '/js-static/new-years-2024/threejs.js?_=' + cacheId, 44 // ], 'threejs', { 45 // async: false, 46 // success: function () { 47 // new ThreeJSIntro(); 48 // } 49 // }); 50 } 51 52 if(self.isMobile() || self.isMobileAgent()) { 53 // clean up mobile to fix performance 54 $('.year-in-review-2024--svg').each(function (index, element) { 55 var $el = $(element); 56 $el.find('[clip-path]').removeAttr('clip-path'); 57 $el.find('clipPath').remove(); 58 }); 59 } 60 61 Splitting(); 62 this.initMainMenu() 63 this.initScrollPosition(); 64 this.prepareMobileCaptions(); 65 this.initFloats(); 66 this.initNav(); 67 this.initGobig(); 68 this.initControls(); 69 this.initOdometers(); 70 this.initSliderImages(); 71 this.initVideosVersionB(); 72 this.initVideosModal('.ias-2023-video__modal'); 73 this.initVideoAutoplay();; 74 this.initGrowingLines(); 75 this.initYearScroll(); 76 this.init4dSticky(); 77 this.initLandlordSticky(); 78 this.initSectionSeparators(); 79 this.initButtonFadein(); 80 this.initTvAnimation(); 81 this.initTvParticles(); 82 this.initSectionSwipes(); 83 this.initParallax(); 84 this.lineSplitAnimation(); 85 this.stickyVideoAutoplay(); 86 this.initIdealCalifornia(); 87 this.initMutedAutoplayVidoes(); 88 this.initAwardsScroller(); 89 this.initAOFadeImages(); 90 this.initEndSection(); 91 if(!this.isMobile() && !this.isMobileAgent()) { 92 this.initImageWallSliders(); 93 } 94 this.initBuildingInsets(); 95 } else { 96 gsap.set('.year-in-review-2024-button-inner', {opacity: 1}); 97 $('.year-in-review-2024--countdown--number').hide(); 98 $('.year-in-review-2024--countdown--number__hidden').show().removeClass('year-in-review-2024--countdown--number__hidden'); 99 100 $('.year-in-review-2024--earth-lights-out').remove(); 101 $('.year-in-review-2024--svg').addClass('year-in-review-2024--svg__screencap'); 102 $('.year-in-review-2024--gobig-pre-line2').addClass('year-in-review-2024--gobig-pre-line2__screencap'); 103 104 $('.year-in-review-2024--gobig-pre-text-wrapper__second-line').addClass('year-in-review-2024--gobig-pre-text-wrapper__second-line__screncap'); 105 106 $('.year-in-review-2024--landlord-stat, .year-in-review-2024--4d-stat').addClass('year-in-review-2024--landlord-stat__screencap'); 107 108 $('.year-in-review-2024--video-autoplay').each(function (index, wrapper) { 109 videojs(wrapper.querySelector('.video-js'), { controls: false, muted: true, loop: false, preload: "metadata" }).ready(function () { 110 var videoSource = JSON.parse(wrapper.querySelector('.video-js').getAttribute('data-videosrc')); 111 var player = this; 112 this.src(videoSource); 113 player.muted(true); 114 gsap.to(wrapper.querySelector('.year-in-review-2024--v
114ideoautoplay'), { 115 autoAlpha: 1, 116 duration: 0.25, 117 }); 118 119 // fast forward to the end after duration is known 120 player.on('loadedmetadata', function () { 121 player.currentTime(player.duration()); 122 }); 123 124 }); 125 }); 126 127 $('.show-codes-button, .year-review-2021-nav').remove(); 128 129 $('.new-years-2024-awards-wall-wrapper').css('height', 'auto'); 130 $('.year-in-review-2024--awards-row').css('display', 'block'); 131 132 document.querySelectorAll('.year-in-review-2024--bigger[data-innerhtml]').forEach(function (element) { 133 element.innerHTML = element.dataset.innerhtml; 134 }); 135 $('.year-in-review-2024-tv-intro').css('margin-top', "0"); 136 // this.initImageWallSliders(true); 137 } 138 139 if (globalGetParams.dev) { 140 // load js "/plugins/gsapv3/GSDevTools.min.js", 141 loadjs([ 142 "/plugins/gsapv3/GSDevTools.min.js", 143 ], 'gsap-dev', { 144 success: function () { 145 GSDevTools.create(); 146 } 147 }); 148 } 149 150 if ($('.show-codes-button').length) { 151 $('.show-codes-button:not(.copyversion)').click(function (event) { 152 $('.image-code').toggleClass('hidden'); 153 }); 154 $('.mag-image-lazyload__abs').each(function (index, el) { 155 // console.log( $(el).find('img').attr('data-src') ); 156 if ($(el).find('source').length > 0) { 157 var src = $(el).find('source').attr('data-srcset'); 158 if (!src) { 159 return; 160 } 161 // most are _XX9999.jpg 162 var parts = src.match(/[-_](([0-9]+[a-zA-Z]+|[a-zA-Z]+[0-9]+)[0-9a-zA-Z]*)(-(inet|1))?(-r)?(_en)?.jpg/); 163 if (parts === null) { 164 // Some are DJI_0242 165 parts = src.match(/[-_]([A-Z]+_[0-9]+).jpg/); 166 } 167 if (parts && parts.length > 0) { 168 var code = parts[1]; 169 $(el).append('<div class="image-code hidden">' + code + '</div>') 170 } 171 } 172 }); 173 loadjs(['/plugins/bootstrap/js/bootstrap.bundle.min.js?_=' + cacheId], 'bootstrapjs', { async: false }); 174 loadjs.ready('bootstrapjs', function () { 175 $('.image-code').tooltip({ 176 html: true, 177 title: '<span class="icon-zoom-in"></span> VIEW FULL SCREEN', 178 placement: 'bottom', 179 }); 180 }); 181 182 // load up photoswipe 183 loadjs('/plugins/photoswipe/photoswipe.min.js?_=' + new Date().getTime()); 184 loadjs('/plugins/photoswipe/photoswipe-ui-default.min.js?_=' + new Date().getTime()); 185 186 loadjs(['css!/plugins/photoswipe/photoswipe.css?_=' + cacheId, 'css!/plugins/photoswipe/default-skin/default-skin.css?_=' + cacheId]); 187 188 $('.pswp__container').html('<div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div>'); 189 190 $(document).on('click', '.image-code', function (e) { 191 e.stopPropagation(); 192 e.stopImmediatePropagation(); 193 e.preventDefault(); 194 195 var $imageItem = $(this).closest('.mag-image-lazyload__abs'); 196 var src = $imageItem.find('img')[0].currentSrc.replace(/@w=[0-9]*/, ''); 197 // if(src[0] != "/") { 198 // src = "/" + src; 199 // } 200 // photoswipe zoom in 201 // console.log('src',src); 202 if (src) { 203 // var url = new URL(window.location.href); 204 // url.pathname = src; 205 var pswpElement = document.querySelectorAll('.pswp')[0]; 206 // build items array 207 var items = [ 208 { 209 // src: unescape(url.toString()), 210 src: src, 211 w: 0, 212 h: 0, 213 }, 214 ]; 215 216 // define options (if needed) 217 var options = { 218 index: 0, 219 shareEl: false, 220 history: false 221 }; 222 var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 223 224 // dynamicly set W & H 225 gallery.listen('gettingData', function (index, item) { 226 if (item.w < 1 || item.h < 1) { 227 var img = new Image(); 228 img.onload = function () { 229 item.w = this.width; 230 item.h = this.height; 231 gallery.updateSize(true); 232 }; 233 img.src = item.src; 234 } 235 }); 236 237 gallery.init(); 238 } 239 }); 240 241 } 242 243 244 245 if (globalGetParams.id) { 246 window.scrollTo(0, $("#" + globalGetParams.id).offset().top - 100); 247 } 248 249 if (window.devicePixelRatio != Math.round(window.devicePixelRatio)) { 250 $('body').addClass('ias-2023-zoom'); 251 } 252 253 // on mouse wheel move 254 window.addEventListener('wheel', function (event) { 255 if (self.lastScrollAnimation) { 256 self.lastScrollAnimation.pause(); 257 } 258 }, { passive: false }); 259 } 260 261 262 NY2024.prototype.resizeAnimations = function () { 263 var resizeEvent = new CustomEvent('resize'); 264 // Dispatch the event 265 window.dispatchEvent(resizeEvent); 266 } 267 268 NY2024.prototype.initMainMenu = function () { 269 var self = this; 270 var anchors = []; 271 var lastHashId = ""; 272 self.startAnchorLoad = new Date().getTime(); 273 gsap.registerPlugin(ScrollTrigger); 274 275 $('.ny-2024--menuitem, .ny-2024--primary-menu-logo').each(function (index) { 276 var $link = $(this).find('a'); 277 if ($(this)[0].tagName == "A") { 278 $link = $(this); 279 } 280 var id = $link.attr('href').replace('#', ''); 281 var $el = $('#' + id); 282 if ($el.length == 0) { 283 return; 284 } 285 var triggerElement = $el[0]; 286 anchors.push(id); 287 288 self.activeShareImageIndex = 0; 289 290 ScrollTrigger.create({ 291 trigger: triggerElement, 292 start: "top center", 293 end: "bottom center", 294 onEnter: function () { 295 var id = $el.attr('id'); 296 var $parent = $('.ny-2024--menuitem [href="#' + id + '"]').parent(); 297 if ($parent.hasClass('ny-2024--menuitem')) { 298 $('.ny-2024--menuitem__active').removeClass('ny-2024--menuitem__active'); 299 $parent.addClass('ny-2024--menuitem__active'); 300 $('.year-review-2021--mobile-menuitem-link[href="#' + id + '"]').addClass('ny-2024--menuitem__active'); 301 } 302 }, 303 onLeaveBack: function () { 304 var id = $el.attr('id'); 305 var $parent = $('.ny-2024--menuitem [href="#' + id + '"]').parent() 306 var $prev = $parent.prev(); 307 $('.ny-2024--menuitem__active').removeClass('ny-2024--menuitem__active'); 308 if ($prev.length > 0 && $prev.hasClass('ny-2024--menuitem')) { 309 $prev.addClass('ny-2024--menuitem__active'); 310 $('.year-review-2021--mobile-menuitem-link[href="#' + id + '"]').parent().prev().find('a').addClass('ny-2024--menuitem__active'); 311 } 312 } 313 }); 314 }); 315 // if(self.videoSelected()) { 316 // self.updateUrlHash(window.location.hash.replace("#", "")); 317 // } else if(lastHashId) { 318 // self.updateUrlHash(lastHashId); 319 // } 320 321 $('.year-review-2021--mobile-menuitem').click(function () { 322 $('.year-review-2021-mobile-menu').removeClass('year-review-2021-mobile-menu__visible'); 323 }); 324 325 $('.ny-2024--menuitem-link__mobile-overlay').click(function (event) { 326 if ($(window).width() > 992) { 327 return; 328 } 329 330 event.preventDefault(); 331 event.stopPropagation(); 332 333 trackEvent("Menu", "Opened"); 334 335 $('.year-review-2021-mobile-menu').toggleClass('year-review-2021-mobile-menu__visible'); 336 }); 337 338 $('.year-review-2021-mobile-menu--close').click(function () { 339 $('.year-review-2021-mobile-menu').removeClass('year-review-2021-mobile-menu__visible'); 340 }); 341 } 342 343 344 NY2024.prototype.initTvParticles = function () { 345 var self = this; 346 loadjs([ 347 "/plugins/particles-js/particles.min.js?" + cacheId, 348 ], 'particles-js', { 349 success: function () { 350 ScrollTrigger.create({ 351 trigger: '.year-in-review-2024-tv-particles-js', 352 start: "top top", 353 endTrigger: ".year-in-review-2024-awards-image-wrapper", 354 end: "bottom bottom", 355 pin: '.year-in-review-2024-tv-particles-js', 356 pinSpacing: false, 357 toggleActions: "play none resume reset", 358 }); 359 360 ScrollTrigger.create({ 361 trigger: '.year-in-review-2024-tv-particles-js', 362 start: "top top", 363 endTrigger: ".year-in-review-2024-awards-image-wrapper", 364 end: "bottom top", 365 toggleActions: "play none resume reset", 366 onEnter: function () { 367 self.initParticlesJS(); 368 }, 369 onLeave: function () { 370 console.log('onLeave'); 371 if (pJSDom && pJSDom[0] && pJSDom[0].pJS) { 372 pJSDom[0].pJS.fn.vendors.destroypJS(); 373 window.pJSDom = window.pJSDom || []; 374 } 375 }, 376 onEnterBack: function () { 377 console.log('onEnterBack'); 378 self.initParticlesJS(); 379 }, 380 onLeaveBack: function () { 381 console.log('onLeaveBack'); 382 if (pJSDom && pJSDom[0] && pJSDom[0].pJS) { 383 pJSDom[0].pJS.fn.vendors.destroypJS(); 384 window.pJSDom = window.pJSDom || []; 385 } 386 }, 387 }); 388 } 389 }); 390 } 391 392 NY2024.prototype.initParticlesJS = function () { 393 particlesJS('particles-js', 394 { 395 "particles": { 396 "number": { 397 "value": 100, 398 "density": { 399 "enable": true, 400 "value_area": 500 401 } 402 }, 403 "color": { 404 "value": "#16d7f5" 405 }, 406 "shape": { 407 "type": "circle", 408 "stroke": { 409 "width": 0, 410 "color": "#16d7f5" 411 }, 412 "polygon": { 413 "nb_sides": 5 414 }, 415 }, 416 "opacity": { 417 "value": 0.5, 418 "random": false, 419 "anim": { 420 "enable": false, 421 "speed": 1, 422 "opacity_min": 0.1, 423 "sync": false 424 } 425 }, 426 "size": { 427 "value": 3, 428 "random": true, 429 "anim": { 430 "enable": false, 431 "speed": 40, 432 "size_min": 0.1, 433 "sync": false 434 } 435 }, 436 "line_linked": { 437 "enable": true, 438 "distance": 150, 439 "color": "#16d7f5", 440 "opacity": 0.4, 441 "width": 1 442 }, 443 "move": { 444 "enable": true, 445 "speed": 1, 446 "direction": "none", 447 "random": false, 448 "straight": false, 449 "out_mode": "out", 450 "attract": { 451 "enable": false, 452 "rotateX": 600, 453 "rotateY": 1200 454 } 455 } 456 }, 457 "interactivity": { 458 "detect_on": "canvas", 459 "events": { 460 "onhover": { 461 "enable": true, 462 "mode": "bubble" 463 }, 464 "onclick": { 465 "enable": false, 466 "mode": "push" 467 }, 468 "resize": true 469 }, 470 "modes": { 471 "grab": { 472 "distance": 400, 473 "line_linked": { 474 "opacity": 1 475 } 476 }, 477 "bubble": { 478 "distance": 150, 479 "size": 3.2, 480 "duration": 2, 481 "opacity": 8, 482 "speed": 3 483 }, 484 "repulse": { 485 "distance": 200 486 }, 487 "push": { 488 "particles_nb": 4 489 }, 490 "remove": { 491 "particles_nb": 2 492 } 493 } 494 }, 495 "retina_detect": true, 496 } 497 ); 498 } 499 500 NY2024.prototype.initScrollPosition = function () { 501 var self = this; 502 self.calculateSectionSize(); 503 var halfScreen = $(window).height() * 0.5; 504 $(window).resize(function () { 505 self.calculateSectionSize(); 506 halfScreen = $(window).height() * 0.5; 507 }); 508 509 $(window).scroll(function () { 510 var scrollTop = window.scrollY + halfScreen; 511 var activeSection = self.sections[self.sections.length - 1]; 512 var foundSection = false;
513 for (var index = 0; index < self.sections.length; index++) { 514 var section = self.sections[index]; 515 if (section.start <= scrollTop && scrollTop < section.end) { 516 foundSection = true; 517 activeSection = self.sections[index]; 518 break; 519 } 520 } 521 522 if (!foundSection) { 523 TweenMax.set('.ny-2024--primary-menu__progress', { scaleX: 0 }); 524 return; 525 } 526 527 // if window.pixelRatio is fractional, we need to scale the progress bar 528 var windowScaleFactor = 1; 529 if (window.devicePixelRatio != Math.round(window.devicePixelRatio)) { 530 windowScaleFactor = window.devicePixelRatio / Math.floor(window.devicePixelRatio); 531 } 532 533 var activeSectionProgress = (scrollTop - activeSection.start) / (activeSection.end - activeSection.start); 534 var totalProgress; 535 var totalProgressW = 0; 536 if (self.isMobile()) { 537 totalProgress = activeSectionProgress; 538 } else { 539 for (var index = 0; index < self.sections.length; index++) { 540 var section = self.sections[index]; 541 if (section.start < activeSection.start) { 542 totalProgressW += section.width; 543 } 544 } 545 546 totalProgressW += activeSectionProgress * activeSection.width * windowScaleFactor; 547 totalProgress = totalProgressW / ($('.ny-2024--primary-menu').width() * windowScaleFactor); 548 } 549 550 if(totalProgress > 1) { 551 totalProgress = 1; 552 } 553 554 TweenMax.set('.ny-2024--primary-menu__progress', { scaleX: totalProgress }); 555 }); 556 } 557 558 NY2024.prototype.calculateSectionSize = function () { 559 var sections = []; 560 var start = $('.ny-2024-top-wrapper').offset().top; 561 var isMobile = this.isMobile(); 562 // if window.pixelRatio is fractional, we need to scale the progress bar 563 var windowScaleFactor = 1; 564 if (window.devicePixelRatio != Math.round(window.devicePixelRatio)) { 565 windowScaleFactor = window.devicePixelRatio / Math.floor(window.devicePixelRatio); 566 } 567 568 $('.ny-2024--menuitem').each(function (index) { 569 var $el = $(this); 570 // var margin = parseInt($el.css("paddingRight").replace('px', '')) * 2; 571 // if (isNaN(margin)) { 572 // margin = 0; 573 // } 574 // calcualte outerWidth 575 var width = this.offsetWidth * windowScaleFactor; 576 // length = $($el.find('a').attr('href')).offset().top; 577 var end = 0; 578 if ($el.next().length > 0 && $el.next().find('a').length > 0) { 579 end = $($el.next().find('a').attr('href')).offset().top; 580 } else { 581 end = $('.end-of-article').offset().top; 582 } 583 if (isMobile) { 584 width = $(window).width(); 585 } 586 sections.push({ 587 start: start, 588 end: end, 589 width: width, 590 }); 591 start = end; 592 }); 593 this.sections = sections; 594 } 595 596 597 598 599 600 NY2024.prototype.prepareMobileCaptions = function () { 601 $('.inline-slideshow-slide-container').each(function () { 602 var $el = $(this); 603 var $items = $el.find('slide > .text-item, .overlay-item > .floater-texter'); 604 for (var index = 0; index < $items.length; index++) { 605 var $item = $($items[index]); 606 var newElement = document.createElement("DIV"); 607 newElement.classList.add('inline-slideshow-slide--mobile-caption'); 608 newElement.innerHTML = $item.html(); 609 if ($item.hasClass('text-item')) { 610 newElement.classList.add('inline-slideshow-slide--mobile-caption__text-item'); 611 } 612 if ($item.hasClass('floater-texter')) { 613 newElement.classList.add('inline-slideshow-slide--mobile-caption__floater'); 614 } 615 $el.append(newElement); 616 } 617 }); 618 } 619 620 621 NY2024.prototype.initSliderImages = function () { 622 var self = this; 623 var height = $(window).height() * 2; 624 $('.year-end-2022--staywell-images, .year-end-2024--carousel-images').each(function () { 625 var $row = $(this); 626 627 var tl = gsap.timeline({ 628 scrollTrigger: { 629 trigger: this, 630 start: 'top bottom', 631 end: function () { 632 return self.getWindowHeight() + "px"; 633 }, 634 scrub: true, 635 invalidateOnRefresh: true, // invalidate on resize 636 }, 637 }); 638 tl.fromTo(this, { 639 x: $row.data('start-x'), 640 }, { 641 x: $row.data('end-x'), 642 }); 643 }); 644 } 645 646 647 NY2024.prototype.initMutedAutoplayVidoes = function () { 648 var self = this; 649 650 $('.year-in-review-2024--autoplay-video-block').each(function () { 651 var $el = $(this); 652 var videoSrc = $el.find('video').data('videosrc'); 653 videojs($el.find('video')[0], { controls: false, muted: true, loop: false }).ready(function () { 654 this.src(videoSrc); 655 this.pause(); 656 var player = this; 657 658 ScrollTrigger.create({ 659 trigger: $el[0], 660 start: "center bottom", 661 end: "bottom top", 662 toggleActions: "play none reverse none", 663 onEnter: function (progress, direction, isActive) {
664 var vid = player.el().querySelector('video'); 665 vid.muted = true; 666 vid.controls = false; 667 player.play(); 668 }, 669 onEnterBack: function (progress, direction, isActive) { 670 player.play(); 671 }, 672 onLeave: function (progress, direction, isActive) { 673 player.pause(); 674 }, 675 onLeaveBack: function (progress, direction, isActive) { 676 player.pause(); 677 } 678 }); 679 680 $el.find('.year-in-review-2024--autoplay-video-replay').click(function () { 681 player.currentTime(0); 682 player.play(); 683 }); 684 }); 685 }); 686 } 687 688 689 NY2024.prototype.initAwardsScroller = function () { 690 let sections = gsap.utils.toArray(".year-in-review-2024--awards-item"); 691 692 var rtl = $('html').attr('dir') == 'rtl'; 693 694 gsap.timeline({ 695 scrollTrigger: { 696 trigger: ".new-years-2024-awards-wall-wrapper", 697 start: "top top", 698 endTrigger: ".new-years-2024-awards-wall-wrapper", 699 end: "bottom bottom", 700 pin: '.new-years-2024-awards-wall-container', 701 anticipatePin: true, 702 pinSpacing: false, 703 scrub: true, 704 } 705 }).to('.new-years-2024-awards-wall', { 706 x: "-30%", 707 }); 708 709 710 gsap.to(sections, { 711 xPercent: rtl ? 100 * (sections.length - 1) : -100 * (sections.length - 1), 712 ease: "none", 713 scrollTrigger: { 714 trigger: ".year-in-review-2024--awards-row", 715 pin: true, 716 pinSpacing: false, 717 scrub: 1, 718 snap: 1 / (sections.length - 1), 719 // base vertical scrolling on how wide the container is so it feels more natural. 720 // end: "+=3500", 721 end: "100%", 722 } 723 }); 724 725 } 726 727 NY2024.prototype.initEndSection = function () { 728 $('.year-in-review-2024--text-gradient').each(function (index, element) { 729 var tl = gsap.timeline({ 730 scrollTrigger: { 731 trigger: element, 732 start: "top bottom", 733 end: function () { 734 return "+=" + Math.abs($(window).height() * 0.5) + "px"; 735 }, 736 scrub: true, 737 } 738 }); 739 740 tl.fromTo(element, 1, 741 { 742 css: { 743 '--gradient-progress': "-100%", 744 '--gradient-progress-2': "0%", 745 } 746 }, 747 { 748 css: { 749 '--gradient-progress': "100%", 750 '--gradient-progress-2': "100%", 751 } 752 } 753 ); 754 }); 755 756 $('.year-in-review-2024--wis-search-bar').each(function (index, element) { 757 var tl = gsap.timeline({ 758 scrollTrigger: { 759 trigger: element, 760 start: "top bottom", 761 toggleActions: "play none resume reset", 762 }, 763 }); 764 tl.from(element, { 765 duration: 0.5, 766 autoAlpha: 0, 767 }); 768 769 var typewritter = element.querySelector('.year-in-review-2024--text-typewritter'); 770 771 var elementWidth = element.offsetWidth; 772 tl.fromTo(element, { 773 width: function () { 774 if (element.offsetWidth > elementWidth) { 775 elementWidth = element.offsetWidth; 776 } 777 return elementWidth; 778 }, 779 }, { 780 width: function () { 781 if (element.offsetWidth > elementWidth) { 782 elementWidth = element.offsetWidth; 783 } 784 return elementWidth; 785 }, 786 duration: 1.5, 787 ease: "none" 788 }, "-=0.25"); 789 tl.from(typewritter, { 790 text: { 791 value: "", 792 }, 793 duration: 1.5, 794 ease: "none" 795 }, "<"); 796 }); 797 798 // curious animation 799 var curioustext = new SplitText('.year-in-review-2024--curious', { type: "chars" }); 800 var curiousTl = gsap.timeline({ 801 scrollTrigger: { 802 trigger: '.year-in-review-2024--curious', 803 start: "top bottom", 804 toggleActions: "play none resume reverse", 805 } 806 }); 807 curiousTl.fromTo( 808 curioustext.chars, 809 { 810 y: 100, 811 opacity: 0 812 }, 813 { 814 y: 0, 815 opacity: 1, 816 stagger: 0.05, 817 duration: 2, 818 ease: 'power4.out', 819 } 820 ); 821 curiousTl.to('.year-in-review-2024--curious', { 822 duration: 0, 823 onComplete: function () { 824 $('.year-in-review-2024--curious').addClass('year-in-review-2024--glowing-curious'); 825 }, 826 onReverseComplete: function () { 827 $('.year-in-review-2024--curious').removeClass('year-in-review-2024--glowing-curious'); 828 } 829 }, "-=1"); 830 curiousTl.from('.year-in-review-2024--curious__abs', { 831 autoAlpha: 0, 832 }) 833 834 835 // fade in image from .year-2024--decide-flare from the left and slowly stop 836 var decideTl = gsap.timeline({ 837 scrollTrigger: { 838 trigger: '.year-2024--decide-flare', 839 start: "center bottom", 840 toggleActions: "play none resume reverse", 841 }, 842 }); 843 decideTl.fromTo('.year-2024--decide-flare', { 844 x: "-50%", 845 autoAlpha: 0, 846 // filter: 'brightness(1.5)', 847 }, { 848 // filter: 'brightness(1)', 849 x: "0%", 850 duration: 2, 851 autoAlpha: 1, 852 ease: 'power4.out', 853 }); 854 decideTl.fromTo('.year-2024--decide-flare', { 855 // filter: 'brightness(5)', 856 filter: 'saturate(3.4) brightness(2)', 857 }, { 858 // filter: 'brightness(1)', 859 filter: 'saturate(1) brightness(1)', 860 duration: 1.5, 861 }, "-=1.5"); 862 863 var forYourselfText = new SplitText('.year-in-reivew-for-yourself', { type: "chars" }); 864 decideTl.fromTo( 865 forYourselfText.chars, 866 { 867 opacity: 0 868 }, 869 { 870 opacity: 1, 871 stagger: { 872 amount: 0.75, 873 }, 874 ease: 'power4.out', 875 }, "-=1.5" 876 ); 877 878 } 879 880 NY2024.prototype.initTvAnimation = function () { 881 882 var self = this; 883 videojs($('.year-in-review-2024--network-video')[0], { controls: false, muted: true, loop: false }).ready(function () { 884 var src = $(this.el_).data('src'); 885 this.src(src); 886 var player = this;
887 player.el().querySelector('video').addEventListener("error", (event) => { 888 for (var i = 0; i < src.length; i++) { 889 var source = src[i]; 890 if (source.type == 'video/mp4; codecs="avc1"') { 891 console.log('source', source); 892 player.src([source]); 893 player.play(); 894 break; 895 } 896 } 897 }); 898 899 gsap.timeline({ 900 scrollTrigger: { 901 trigger: '.year-in-review-2024-tv-intro', 902 start: 'top top', 903 // end: "220%", 904 end: "bottom bottom", 905 endTrigger: ".year-in-review-2024-tv-container", 906 scrub: true, 907 pin: true, 908 onEnter: function () { 909 player.play(); 910 }, 911 }, 912 }); 913 914 var timeline = gsap.timeline({ 915 scrollTrigger: { 916 trigger: '.year-in-review-2024-tv-trigger', 917 start: 'top top', 918 endTrigger: '.year-in-review-2024-tv-container', 919 end: "bottom bottom", 920 pinSpacing: false, 921 scrub: true, 922 }, 923 }); 924 925 926 var scale = Math.max( 927 window.NY2024.cachedOuterWindowWidth / $('.year-in-review-2024--network-video-wrapper').width(), 928 window.NY2024.cachedOuterWindowHeight / ($('.year-in-review-2024--network-video-wrapper').width() / 16 * 9), 929 ); 930 931 timeline.fromTo('.year-in-review-2024--network-video-wrapper', { 932 scale: scale, 933 }, { 934 scale: 1, 935 }); 936 timeline.fromTo('.year-in-review-2024-tv-container .year-review-2024-tv-info', { 937 autoAlpha: 0, 938 y: 50, 939 }, { 940 duration: 0.2, 941 autoAlpha: 1, 942 y: 0, 943 }, "-=0.1"); 944 945 }); 946 } 947 948 949 NY2024.prototype.fadeInBubble = function () { 950 TweenLite.from($('.enlightenment-launcher-container'), 0.75, { width: 24, ease: Power4.easeInOut }); 951 TweenLite.to($('.enlightenment-launcher-container'), 0.75, { opacity: 1, clearProps: 'width', ease: Power4.easeInOut }); 952 953 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--ideal-churches', triggerHook: 0.5, reverse: false }) 954 .on("start", function (event) { 955 $('.enlightenment-launcher-container').addClass('enlightenment-launcher-container__opened'); 956 957 setTimeout(function () { 958 $('.enlightenment-launcher-container').removeClass('enlightenment-launcher-container__opened'); 959 }, 10000); 960 }) 961 .addTo(this.controller); 962 } 963 964 NY2024.prototype.initLazyload = function () { 965 //add simple support for background images: 966 document.addEventListener('lazybeforeunveil', function (e) { 967 var bg = e.target.getAttribute('data-bg'); 968 if (bg) { 969 e.target.style.backgroundImage = 'url(' + bg + ')'; 970 } 971 }); 972 setTimeout(() => { 973 $('[data-bg]').each(function () { 974 if ($(this).hasClass('lazyloaded')) { 975 var bg = this.getAttribute('data-bg'); 976 if (bg) { 977 this.style.backgroundImage = 'url(' + bg + ')'; 978 } 979 } 980 }); 981 }, 500); 982 983 $('slide [data-src]').each(function () { 984 var $el = $(this); 985 if (!$el.hasClass('lazyload')) { 986 $el.attr('data-srcset', $el.attr('data-src') + " 1x, " + $el.attr('data-src2x') + " 2x"); 987 $el.addClass('lazyload'); 988 } 989 }); 990 991 992 var self = this; 993 $(window).resize(function () { 994 self.updateCache(); 995 }); 996 997 $(document).ready(function () { 998 self.updateCache(); 999 }); 1000 } 1001 1002 NY2024.prototype.updateCache = function () { 1003 window.NY2024.cachedPageHeight = $(document).height(); 1004 window.NY2024.cachedWindowHeight = $(window).height(); 1005 window.NY2024.cachedOuterWindowWidth = $(window).outerWidth(); 1006 window.NY2024.cachedOuterWindowHeight = $(window).outerHeight(); 1007 } 1008 1009 NY2024.prototype.initNav = function () { 1010 var self = this; 1011 1012 // new ScrollMagic.Scene({ triggerElement: ".year-review-2022--top-wrapper", triggerHook: "onLeave", reverse: true }) 1013 // .setClassToggle('.year-review-2021-nav', 'year-review-2022-nav__visible') 1014 // .addTo(self.controller); 1015 1016 $('.year-review-2021-nav__up').click(function () { 1017 if (self.scrollToPrevInset()) { 1018 return; 1019 } 1020 1021 if (typeof self.activeStepIndex == "undefined") { 1022 var index = 0; 1023 } else { 1024 var index = self.activeStepIndex - 1; 1025 } 1026 if (self.scrollToIndex > -1) { 1027 index = self.scrollToIndex - 1; 1028 } 1029 1030 var duration = $(this).data('duration'); 1031 1032 var $lastInset = self.getLastInsetFor(index); 1033 if ($lastInset) { 1034 self.scrollToElement($lastInset, duration); 1035 } else { 1036 self.lastScrollAnimation = gsap.to(window, { 1037 duration: 2, 1038 scrollTo: { 1039 y: 0, 1040 }, 1041 }); 1042 } 1043 1044 }); 1045 1046 $('.year-review-2021-nav__down, .year-2024--bounce').click(function () { 1047 if (self.scrollToNextInset()) { 1048 return; 1049 } 1050 if (typeof self.activeStepIndex == "undefined") { 1051 var index = 0; 1052 } else { 1053 var index = self.activeStepIndex + 1; 1054 } 1055 if (self.scrollToIndex > -1) { 1056 index = self.scrollToIndex + 1; 1057 } 1058 }); 1059 } 1060 1061 NY2024.prototype.initControls = function () { 1062 var self = this; 1063 1064 $('.year-review-2024-step').each(function (index) { 1065 var $el = $(this); 1066 $el.attr('data-index', index); 1067 }); 1068 1069 $(document).keydown(function (e) {
1070 var arrow = { left: 37, up: 38, right: 39, down: 40 }; 1071 1072 switch (e.which) { 1073 // case arrow.left: 1074 // for (var index = 0; index < self.swipers.length; index++) { 1075 // var swiper = self.swipers[index]; 1076 // if(isInViewportVisible(swiper.$el)) { 1077 // var index = swiper.$el.attr('data-swiper-index'); 1078 // self.swipers[parseInt(index)].slidePrev(); 1079 // } 1080 // } 1081 // break; 1082 case arrow.up: 1083 if (self.scrollToPrevInset()) { 1084 e.preventDefault(); 1085 e.stopPropagation(); 1086 $('.year-review-2021-nav__up').addClass('year-review-2021-nav__up-pressed'); 1087 setTimeout(function () { 1088 $('.year-review-2021-nav__up').removeClass('year-review-2021-nav__up-pressed'); 1089 }, 1100); 1090 return; 1091 } 1092 break; 1093 // case arrow.right: 1094 // for (var index = 0; index < self.swipers.length; index++) { 1095 // var swiper = self.swipers[index]; 1096 // if(isInViewportVisible(swiper.$el)) { 1097 // var index = swiper.$el.attr('data-swiper-index'); 1098 // self.swipers[parseInt(index)].slideNext(); 1099 // } 1100 // } 1101 // break; 1102 case arrow.down: 1103 if (self.scrollToNextInset()) { 1104 e.preventDefault(); 1105 e.stopPropagation(); 1106 $('.year-review-2021-nav__down').addClass('year-review-2021-nav__down__pressed'); 1107 setTimeout(function () { 1108 $('.year-review-2021-nav__down').removeClass('year-review-2021-nav__down__pressed'); 1109 }, 1100); 1110 return; 1111 } 1112 break; 1113 // case 32: 1114 // for (var index in videojs.players) { 1115 // if (Object.hasOwnProperty.call(videojs.players, index)) { 1116 // var video = videojs.players[index]; 1117 // var $el = $(video.el()); 1118 // if(isInViewportVisible($el) && self.qualifiedAutoplay($el)) { 1119 // var $wrapper = $el.closest('.show-on-the-road--playbutton-area'); 1120 // var videoPlaying = $wrapper.hasClass('show-on-the-road-videoautoplay__inline'); 1121 // if(!videoPlaying) { 1122 // $wrapper.click(); 1123 // } else if(video.paused()) { 1124 // video.play(); 1125 // } else { 1126 // video.pause(); 1127 // } 1128 1129 // e.preventDefault(); 1130 // e.stopPropagation(); 1131 // } 1132 // } 1133 // } 1134 // break; 1135 } 1136 }); 1137 } 1138 1139 1140 1141 NY2024.prototype.initGrowingLines = function () { 1142 var self = this; 1143 1144 $('.year-in-review-2024-glow-line').each(function () { 1145 gsap.from(this, { 1146 height: 0, 1147 scrollTrigger: { 1148 start: 'top bottom', 1149 end: 'bottom top', 1150 duration: 1, 1151 // scrub: true, 1152 trigger: this, 1153 toggleClass: 'year-in-review-2024-glow-line__visible', 1154 toggleActions: "play none resume reverse", 1155 } 1156 }); 1157 1158 }); 1159 } 1160 1161 NY2024.prototype.initTvTitleScroller = function () { 1162 gsap.timeline({ 1163 scrollTrigger: { 1164 trigger: '.ias-2023-medium--tv-pin', 1165 pin: true, 1166 start: 'top top', 1167 end: "bottom bottom", 1168 endTrigger: '.ias-2023-tv-title-scroller', 1169 // scrub: true, 1170 pinSpacing: false, 1171 }, 1172 }); 1173 1174 var timeline = gsap.timeline({ 1175 scrollTrigger: { 1176 trigger: '.ias-2023-tv-title-scroller', 1177 start: 'top top', 1178 end: 'bottom bottom', 1179 scrub: true, 1180 // onEnter, onLeave, onEnterBack, and onLeaveBack, 1181 toggleActions: "play none reverse none", 1182 }, 1183 }); 1184 1185 $('.ias-2023-medium--tv-title').each(function (index, title) { 1186 if (index > 0) { 1187 timeline.to($('.ias-2023-medium--tv-title')[index - 1], { 1188 autoAlpha: 0, 1189 rotateX: 90, 1190 duration: 0.1, 1191 }, "+=0.3"); 1192 1193 timeline.from(title, { 1194 autoAlpha: 0, 1195 rotateX: -90, 1196 duration: 0.1, 1197 }); 1198 } 1199 }); 1200 1201 var bgTimeline = gsap.timeline({ 1202 scrollTrigger: { 1203 trigger: '.ias-2023-tv-title-scroller', 1204 start: 'bottom top', 1205 // end: 'bottom bottom', 1206 endTrigger: '.ias-2023-tv-extender', 1207 end: 'bottom center', 1208 scrub: true, 1209 // onEnter, onLeave, onEnterBack, and onLeaveBack, 1210 // toggleActions: "play none reverse none", 1211 }, 1212 }); 1213 bgTimeline.from('.ias-2023-medium--tv-pin-bg__dark', { 1214 autoAlpha: 0, 1215 }); 1216 } 1217 1218 NY2024.prototype.getLastInsetFor = function (index) { 1219 var $container = $('.year-review-2024-step[data-id=' + index + ']'); 1220 if ($container.length == 0) { 1221 return false;
1222 } 1223 return $container.last(); 1224 } 1225 1226 NY2024.prototype.getPrevInset = function () { 1227 var self = this; 1228 var $insets = $('.year-review-2024-step'); 1229 if ($insets.length == 0) { 1230 return false; 1231 } 1232 1233 var activeInsetIndex = -1; 1234 var scrollTop = $(window).scrollTop(); 1235 var windowHeight = $(window).height(); 1236 var $activeInset; 1237 1238 $insets.each(function (index, inset) { 1239 var $inset = $(inset); 1240 var alignBottom = $inset.data('align-bottom'); 1241 var offset = 200; 1242 if ($inset.data("offset")) { 1243 offset = parseInt($inset.data("offset")); 1244 } 1245 1246 if (self.getScrollPosition($inset) + 100 < scrollTop) { 1247 $activeInset = $inset; 1248 activeInsetIndex = index; 1249 } 1250 }); 1251 1252 var $target; 1253 1254 // did not scroll past first inset, go to it 1255 if (activeInsetIndex == -1) { 1256 // $target = $($insets[0]); 1257 return false; 1258 } else if (activeInsetIndex == 0) { 1259 $target = $('.year-review-2024-step').first(); 1260 } else if (activeInsetIndex - 1 < 0) { 1261 return false; 1262 } else { 1263 $target = $($insets[activeInsetIndex]); 1264 } 1265 1266 return $target; 1267 } 1268 1269 NY2024.prototype.scrollToPrevInset = function () { 1270 var $target = this.getPrevInset(); 1271 1272 var duration = $target.data('duration'); 1273 1274 this.scrollToElement($target, duration); 1275 1276 window.history.replaceState({}, '', "#"); 1277 1278 return true; 1279 } 1280 1281 NY2024.prototype.getScrollPosition = function (el) { 1282 var self = this; 1283 if (self.lastScrollAnimation) { 1284 self.lastScrollAnimation.pause(); 1285 } 1286 1287 var id = el.attr('id'); 1288 var alignBottom = el.data('align-bottom'); 1289 var ease = Power4.easeInOut; 1290 1291 var topOffset = el.offset().top; 1292 1293 if (el.data('align-center')) { 1294 topOffset = topOffset - $(window).height() / 2 + el.height() / 2; 1295 } 1296 1297 var scrollingDown = topOffset - window.scrollY > 0; 1298 1299 var topSpace = 66; 1300 var bottomAligner = 20; 1301 if (typeof el.data("top") != "undefined") { 1302 topSpace = parseInt(el.data("top")); 1303 bottomAligner = parseInt(el.data("top")); 1304 } 1305 1306 if (typeof el.data("ease") != "undefined") { 1307 ease = Power4.easeOut; 1308 } 1309 1310 if (typeof el.data("easein") != "undefined") { 1311 ease = Power4.easeInOut; 1312 } 1313 1314 1315 if (alignBottom) { 1316 return topOffset + bottomAligner - $(window).height(); 1317 } 1318 return topOffset - topSpace; 1319 } 1320 1321 NY2024.prototype.scrollToNextInset = function () { 1322 1323 var $target = this.getNextInset(); 1324 1325 var duration = $target.data('duration'); 1326 this.scrollToElement($target, duration); 1327 1328 window.history.replaceState({}, '', "#"); 1329 1330 return true; 1331 } 1332 1333 NY2024.prototype.getNextInset = function () { 1334 var self = this; 1335 var $insets = $('.year-review-2024-step'); 1336 if ($insets.length == 0) { 1337 return false; 1338 } 1339 var $activeInset; 1340 var activeInsetIndex = 0; 1341 var scrollTop = $(window).scrollTop(); 1342 1343 var windowHeight = $(window).height(); 1344 1345 1346 $insets.each(function (index, inset) { 1347 if ($activeInset) { 1348 return; 1349 } 1350 var $inset = $(inset); 1351 var offset = 100; 1352 1353 var alignBottom = $inset.data('align-bottom'); 1354 if (typeof $inset.data('offset') != "undefined") { 1355 offset = parseInt($inset.data('offset')); 1356 } 1357 1358 if (self.getScrollPosition($inset) - offset > scrollTop) { 1359 $activeInset = $inset; 1360 activeInsetIndex = index; 1361 } 1362 }); 1363 1364 var $target; 1365 1366 // did not scroll past first inset, go to it 1367 if (!$activeInset) { 1368 if (window.scrollY > 2000) { 1369 return; 1370 } 1371 $target = $($insets[0]); 1372 } else { 1373 $target = $activeInset; 1374 } 1375 1376 return $target; 1377 } 1378 1379 1380 NY2024.prototype.initVideoAutoplay = function () { 1381 var self = this; 1382 _.each($('.year-end-2022--playbutton-area'), function (el, index) { 1383 var $el = $(el); 1384 1385 var videoId = $el.data('videoid'); 1386 1387 var options = jQuery.extend({}, videoOptions); 1388 options.preload = "none"; 1389 options.controls = false;
1390 options.autoplay = false; 1391 options.sources = $el.data('videosrc'); 1392 options.loop = true; 1393 var videos = $el.find('.video-js'); 1394 if (videos.length == 0) { 1395 return; 1396 } 1397 var video = videos[0]; 1398 videojs(videos[0], options).ready(function () { 1399 var tween; 1400 1401 var player = this; 1402 1403 gsap.timeline({ 1404 scrollTrigger: { 1405 trigger: $el, 1406 start: 'top bottom', 1407 end: "bottom top", 1408 onEnter: function (progress, direction, isActive) { 1409 if (!video.muted) { 1410 return; 1411 } 1412 window.history && history.replaceState(null, null, ' '); 1413 player.one('play', function () { 1414 tween && tween.pause(); 1415 tween = gsap.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 1, ease: Power4.easeOut }); 1416 }); 1417 if (!$el.hasClass('year-end-2022-videoautoplay__inline')) { 1418 var vid = player.el().querySelector('video'); 1419 if (vid.currentTime < 3 && $(window).width() < 768) { 1420 player.src(player.currentSources()); 1421 } 1422 vid.controls = false; 1423 player.play(); 1424 } 1425 trackEvent("Video", "Visible", videoId); 1426 }, 1427 onEnterBack: function (progress, direction, isActive) { 1428 if (!video.muted) { 1429 return; 1430 } 1431 player.one('play', function () { 1432 tween && tween.pause(); 1433 tween = gsap.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 1, ease: Power4.easeOut }); 1434 }); 1435 if (!$el.hasClass('year-end-2022-videoautoplay__inline')) { 1436 var vid = player.el().querySelector('video'); 1437 if (vid.currentTime < 3 && $(window).width() < 768) { 1438 player.src(player.currentSources()); 1439 } 1440 vid.controls = false; 1441 player.play(); 1442 } 1443 trackEvent("Video", "Visible", videoId); 1444 }, 1445 onLeave: function (progress, direction, isActive) { 1446 // video started playing by user interaction 1447 if (!video.muted) { 1448 return; 1449 } 1450 tween && tween.pause(); 1451 tween = TweenMax.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 0, ease: Power4.easeOut }); 1452 video.pause(); 1453 }, 1454 onLeaveBack: function (progress, direction, isActive) { 1455 // video started playing by user interaction 1456 if (!video.muted) { 1457 return; 1458 } 1459 if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 1460 tween && tween.pause(); 1461 tween = TweenMax.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 0, ease: Power4.easeOut }); 1462 video.pause(); 1463 } 1464 } 1465 }, 1466 }); 1467 }); 1468 1469 }); 1470 } 1471 1472 NY2024.prototype.initImageWallSliders = function (disableAnimation) { 1473 var self = this; 1474 const grids = document.querySelectorAll('.year-in-review-2024-image-grid-wrapper'); 1475 grids.forEach(container => { 1476 const grid = container.querySelector('.year-in-review-2024-image-grid'); 1477 const gridWrap = grid.querySelector('.year-in-review-2024-image-grid-wrap'); 1478 const gridItems = grid.querySelectorAll('.year-in-review-2024-image-grid__item'); 1479 const gridItemsInner = [...gridItems].map(item => item.querySelector('.year-in-review-2024-image-grid__item-inner')); 1480 1481 var start = 'top bottom+=5%'; 1482 // start = 'top center'; 1483 1484 // Define GSAP timeline with ScrollTrigger 1485 const timeline = gsap.timeline({ 1486 defaults: { ease: 'none' }, 1487 scrollTrigger: { 1488 trigger: gridWrap, 1489 start: start, 1490 end: 'bottom top-=40%', 1491 scrub: true, 1492 }, 1493 }); 1494 1495 $(container).addClass('year-in-review-2024-image-grid-wrapper--loaded'); 1496 1497 var animationType = grid.getAttribute("data-type"); 1498 1499 const zIndexArray = []; 1500 1501 /** 1502 * The seed value used for generating random numbers. 1503 * @type {number} 1504 */ 1505 const seed = 1250; 1506 1507 function pseudoRandom(seed, index, low, high) { 1508 let x = Math.sin(seed + index) * 10000; 1509 return low + (x - Math.floor(x)) * (high - low); 1510 } 1511 1512 switch (animationType) { 1513 case '1': 1514 1515 // Set some CSS related style values 1516 grid.style.setProperty('--perspective', '1000px'); 1517 grid.style.setProperty('--grid-inner-scale', '1'); 1518 1519 timeline 1520 .set(gridWrap, { 1521 rotationY: 25, 1522 opacity: 0.4, 1523 }) 1524 .set(gridItems, { 1525 z: (index) => pseudoRandom(seed, index, -1600, 200), 1526 }) 1527 .fromTo(gridItems, { 1528 xPercent: (index) => pseudoRandom(seed, index, -1000, -500), 1529 }, { 1530 xPercent: (index) => pseudoRandom(seed, index, 500, 1000), 1531 }, 0) 1532 // .fromTo(gridItemsInner, { 1533 // scale: 2 1534 // }, { 1535 // scale: .5 1536 // }, 0) 1537 1538 break; 1539 1540 case '2': 1541 1542 // Set some CSS related style values 1543 grid.style.setProperty('--perspective', '1000px'); 1544 grid.style.setProperty('--grid-inner-scale', '1'); 1545 1546 timeline 1547 .set(gridWrap, { 1548 rotationY: -25, 1549 opacity: 0.4, 1550 }) 1551 .set(gridItems, { 1552 z: () => gsap.utils.random(-1600,200) 1553 }) 1554 .fromTo(gridItems, { 1555 xPercent: (index) => pseudoRandom(seed, index, 500, 1000), 1556 }, { 1557 xPercent: (index) => pseudoRandom(seed, index, -1000, -500), 1558 }, 0) 1559 // .fromTo(gridItemsInner, { 1560 // scale: 2 1561 // }, { 1562 // scale: .5 1563 // }, 0) 1564 1565 break; 1566 1567 1568 1569 1570 case '3': 1571 // return; 1572 // Set some CSS related style values 1573 grid.style.setProperty('--grid-width', '105%'); 1574 grid.style.setProperty('--grid-columns', '8'); 1575 grid.style.setProperty('--perspective', '1500px'); 1576 grid.style.setProperty('--grid-inner-scale', '1'); 1577 1578 timeline 1579 .set(gridItems, { 1580 transformOrigin: '50% 0%', 1581 z: (index) => { 1582 const zIndex = gsap.utils.random(-5000, -2000); 1583 zIndexArray[index] = zIndex; 1584 return zIndex; 1585 }, 1586 rotationX: () => gsap.utils.random(-65, -25), 1587 // filter: 'brightness(0%)' 1588 })
1589 .to(gridItems, { 1590 xPercent: (index, target) => { 1591 const row = Math.floor(index / 8); 1592 const column = index % 8 - 2; 1593 const centerX = 1.5 * (column - 1.5); 1594 const centerY = 1.5 * (row - 1.5); 1595 const zIndex = zIndexArray[index]; 1596 return centerX * zIndex * -0.03; 1597 }, 1598 yPercent: (index, target) => { 1599 const row = Math.floor(index / 6); 1600 const column = index % 6; 1601 const centerX = 1.5 * (column - 1.5); 1602 const centerY = 1.5 * (row - 1.5); 1603 const zIndex = zIndexArray[index]; 1604 return centerY * zIndex * -0.05; 1605 }, 1606 rotationX: 0, 1607 // ease: CustomEase.create("custom", "M0,0 C0.106,0 0.655,0.054 0.655,0.054 0.655,0.054 0.671,0.232 0.671,0.232 0.671,0.232 1,0.593 1,1 "), 1608 // filter: 'brightness(200%)' 1609 }, 0) 1610 .to(gridWrap, { 1611 z: 4500, 1612 // z: 5500, 1613 // autoAlpha: 0, 1614 }, 0); 1615 1616 // timeline.fromTo(gridItemsInner, { 1617 // scale: 2 1618 // }, { 1619 // scale: 0.5 1620 // }, 0); 1621 break; 1622 default: 1623 console.error('Unknown animation type.'); 1624 break; 1625 } 1626 1627 }); 1628 } 1629 1630 NY2024.prototype.initModalVideo = function ($modal, options, videoId) { 1631 $modal.find('.modal-player__model').clone().prependTo($modal.find('.modal-video-wrapper')).removeClass('d-none').removeClass('modal-player__model'); 1632 var videoEl = $('[data-videosrc][data-videoid="' + videoId + '"]'); 1633 var self = this; 1634 videojs($modal.find('.video-js')[0], options).ready(function () { 1635 if (VideoPlayerHotkeys) { 1636 VideoPlayerHotkeys.player = this; 1637 } 1638 EventTracker.trackVideo(this); 1639 this.on('play', function () { 1640 $('.modal-video-wrapper-up-next-wrapper').addClass('d-none'); 1641 }); 1642 this.play(); 1643 self.videoPlayers = self.videoPlayers || []; 1644 self.videoPlayers.push(this); 1645 1646 var player = this; 1647 1648 // temp 1649 self.addCaptionsIfNeeded(player, videoId); 1650 // end of temp 1651 1652 this.on("ended", function () { 1653 $('.modal-full-viewport .close').click(); 1654 // player.poster(''); 1655 // var currentVideo = $('.modal-full-viewport .swiper-slide__modal-video[data-id="' + self.currentVideoId + '"]'); 1656 // var $next = currentVideo.next(); 1657 // if ($next.length == 0) { 1658 // $next = $('.swiper-slide__modal-video').first(); 1659 // } 1660 // $('.modal-video-wrapper-up-next-wrapper').removeClass('d-none'); 1661 // $('.modal-video-wrapper-up-next-wrapper .modal-video-wrapper-up-next--title').html($next.find('.swiper-slide__modal-video--title').html()); 1662 // $('.modal-video-wrapper-up-next-wrapper img').attr('srcset', $next.find('source').attr('srcset')); 1663 // $('.modal-video-wrapper-up-next-wrapper img').attr('data-srcset', $next.find('source').attr('data-srcset')); 1664 // $('.modal-video-wrapper-up-next-wrapper img').addClass('lazyload'); 1665 1666 // self.setUpNext($next); 1667 }); 1668 }); 1669 1670 } 1671 1672 NY2024.prototype.initVideosVersionB = function () { 1673 var self = this; 1674 $('.year-end-2022--playbutton-area').click(function () { 1675 var $el = $(this); 1676 var videoElId = $el.find('.video-js').attr('id'); 1677 var video = videojs.players[videoElId]; 1678 1679 var scntvlink = $el.data('scntv'); 1680 if (scntvlink) { 1681 // $('.modal-scntv-video').clone().removeClass("d-none").prependTo($(this)).addClass('modal-scntv-video--inited'); 1682 // var src = $('.modal-scntv-video--inited iframe').attr('data-src').replace(/YOUTUBE_ID/g, $el.data('youtube')); 1683 // $('.modal-scntv-video--inited').removeClass('d-none'); 1684 // var src = $('.modal-scntv-video--inited iframe').data('src').replace("URL", scntvlink); 1685 // $('.modal-scntv-video--inited iframe').attr('src', src); 1686 // return; 1687 } 1688 1689 if (!video) { 1690 return; 1691 } 1692 1693 var videoId = $(this).data('videoid'); 1694 if (!video.controls()) { 1695 for (var player in videojs.players) { 1696 if (videojs.players.hasOwnProperty(player) && videojs.players[player] && $(videojs.players[player].el_).closest('.year-end-2022--playbutton-area').length > 0) { 1697 videojs.players[player].pause(); 1698 } 1699 } 1700 1701 video.controls(true); 1702 video.muted(false); 1703 video.currentTime(0); 1704 video.loop(false); 1705 video.poster($el.data('videoposter')); 1706 $el.addClass('year-end-2022-videoautoplay__inline'); 1707 EventTracker.trackVideo(video); 1708 video.one('timeupdate', function () { 1709 self.addCaptionsIfNeeded(video, videoId); 1710 }); 1711 video.play(); 1712 trackEvent("Video", "Play", videoId); 1713 } else if (video.paused()) { 1714 trackEvent("Video", "Play", videoId); 1715 } 1716 }); 1717 } 1718 1719 NY2024.prototype.initVideosModal = function (selector) { 1720 var self = this; 1721 1722 $('.year-review-2022--back').click(function () { 1723 $('.modal-full-viewport .close').click(); 1724 }); 1725 1726 $(selector).click(function () { 1727 var $modal = $('.modal-full-viewport').first(); 1728 $modal.addClass('visible'); 1729 1730 for (var player in videojs.players) { 1731 if (videojs.players.hasOwnProperty(player) && videojs.players[player]) { 1732 try { 1733 videojs.players[player].pause(); 1734 } catch (error) { 1735 } 1736 if ($(videojs.players[player].el_).closest('.modal-full-viewport').length > 0) { 1737 videojs.players[player].dispose(); 1738 } 1739 } 1740 } 1741 1742 var videoId = $(this).data('videoid'); 1743 self.currentVideoId = videoId; 1744
1745 TweenMax.from($modal, 0.75, { scale: 0.9, autoAlpha: 0, ease: Power4.easeOut, clearProps: 'all' }); 1746 1747 // self.initModalCarousel(); 1748 1749 if ($(this).attr('id')) { 1750 window.history.replaceState({}, '', '#' + $(this).attr('id')); 1751 trackEvent("Video", "Play", $(this).attr('id')); 1752 } 1753 1754 var $el = $(this); 1755 1756 var showyoutube = false; 1757 var scntvlink = $el.data('scntv'); 1758 1759 if ($el.data('youtube')) { 1760 showyoutube = true; 1761 } 1762 1763 $('.modal-youtube-embed--inited').remove(); 1764 1765 if (scntvlink) { 1766 $modal.find('.modal-scntv-video').clone().removeClass("d-none").prependTo($modal.find('.modal-video-wrapper')).addClass('modal-scntv-video--inited'); 1767 var src = $('.modal-scntv-video--inited iframe').attr('data-src').replace(/YOUTUBE_ID/g, $el.data('youtube')); 1768 $('.modal-scntv-video--inited').removeClass('d-none'); 1769 var src = $('.modal-scntv-video--inited iframe').data('src').replace("URL", scntvlink); 1770 $('.modal-scntv-video--inited iframe').attr('src', src); 1771 return; 1772 } else if (showyoutube) { 1773 $modal.find('.modal-youtube-embed').clone().prependTo($modal.find('.modal-video-wrapper')).addClass('modal-youtube-embed--inited'); 1774 var src = $('.modal-youtube-embed--inited iframe').attr('data-src').replace(/YOUTUBE_ID/g, $el.data('youtube')); 1775 $('.modal-youtube-embed--inited').removeClass('d-none'); 1776 $('.modal-youtube-embed--inited iframe').attr('src', src); 1777 return; 1778 } 1779 // https://www.youtube.com/watch?v=FiW5kejelns 1780 1781 $('.year-review-2022--primary-menu-bg, .banner-wrapper, .external-links').hide(); 1782 // $('.year-review-2021-nav').removeClass('year-review-2022-nav__visible'); 1783 1784 1785 var options = jQuery.extend({}, videoOptions); 1786 options.controls = true; 1787 options.poster = $(this).data('videoposter'); 1788 options.sources = $(this).data('videosrc'); 1789 1790 self.initModalVideo($modal, options, videoId); 1791 1792 // var url = new URL(window.location.href); 1793 // url.search = "?shareanchor=" + $(this).attr('id'); 1794 // url.hash = ""; 1795 // var link = url.href; 1796 // var title = $('[href="#'+$(this).attr('id')+'"]').first().text().trim(); 1797 // self.updateSharingButtons(title, link) 1798 }); 1799 1800 1801 window.onpopstate = function (event) { 1802 if ($('.modal-full-viewport').hasClass('visible')) { 1803 history.replaceState({}, ''); 1804 event.preventDefault(); 1805 event.stopPropagation(); 1806 $('.modal-full-viewport .close').click(); 1807 } 1808 } 1809 1810 $('.modal-video-wrapper-up-next--button__cancel').click(function () { 1811 $('.modal-video-wrapper-up-next-wrapper').addClass('d-none'); 1812 self.upNextInterval && clearInterval(self.upNextInterval); 1813 }); 1814 1815 $('.modal-video-wrapper-up-next--button__play').click(function () { 1816 var currentVideo = $('.modal-full-viewport .swiper-slide__modal-video[data-id="' + self.currentVideoId + '"]'); 1817 var $next = currentVideo.next(); 1818 if ($next.length == 0) { 1819 $next = $('.swiper-slide__modal-video').first(); 1820 } 1821 $next.click(); 1822 self.upNextInterval && clearInterval(self.upNextInterval); 1823 }); 1824 1825 $('.modal-full-viewport .close, .modal-full-viewport .year-review-2021--back__underlined').click(function () { 1826 $('.show-codes-button').removeClass('d-none'); 1827 TweenMax.to($('.modal-full-viewport'), 0.75, { 1828 scale: 0.9, autoAlpha: 0, clearProps: 'all', ease: Power4.easeOut, onComplete: function () { 1829 $('.modal-full-viewport').removeClass('visible'); 1830 } 1831 }); 1832 $('.modal-video-wrapper-up-next--button__cancel').click(); 1833 window.history.replaceState({}, '', ''); 1834 if (window.videojs) { 1835 for (var player in videojs.players) { 1836 if (videojs.players[player] && $(videojs.players[player].el_).closest('.modal-full-viewport').length > 0) { 1837 if (videojs.players.hasOwnProperty(player) && videojs.players[player]) { 1838 try { 1839 videojs.players[player].pause(); 1840 } catch (error) { 1841 } 1842 videojs.players[player].dispose(); 1843 } 1844 } 1845 } 1846 } 1847 _.each(self.videoPlayers, function (player) { 1848 if (player && videojs.players[player] && $(videojs.players[player].el_).closest('.modal-full-viewport').length > 0) {
1849 player.dispose(); 1850 } 1851 }); 1852 self.videoPlayers = []; 1853 $('.modal-youtube-embed--inited').remove(); 1854 $('.modal-scntv-video--inited').remove(); 1855 VideoPlayerHotkeys.player = null; 1856 $('.year-review-2022--primary-menu-bg, .banner-wrapper, .external-links').show(); 1857 // $('.year-review-2021-nav').addClass('year-review-2022-nav__visible'); 1858 1859 _.each($('.year-end-2022--playbutton-area'), function (el, index) { 1860 var $el = $(el); 1861 if (isFullyVisible($el) && $el.find('video').muted) { 1862 $el.find('video')[0].play(); 1863 } 1864 }); 1865 1866 history.replaceState(null, null, "#"); 1867 }); 1868 } 1869 1870 NY2024.prototype.initModalVideo = function ($modal, options, videoId) { 1871 $modal.find('.modal-player__model').clone().prependTo($modal.find('.modal-video-wrapper')).removeClass('d-none').removeClass('modal-player__model'); 1872 var videoEl = $('[data-videosrc][data-videoid="' + videoId + '"]'); 1873 var self = this; 1874 videojs($modal.find('.video-js')[0], options).ready(function () { 1875 if (VideoPlayerHotkeys) { 1876 VideoPlayerHotkeys.player = this; 1877 } 1878 EventTracker.trackVideo(this); 1879 this.on('play', function () { 1880 $('.modal-video-wrapper-up-next-wrapper').addClass('d-none'); 1881 }); 1882 this.play(); 1883 self.videoPlayers = self.videoPlayers || []; 1884 self.videoPlayers.push(this); 1885 1886 var player = this; 1887 1888 1889 this.on("ended", function () { 1890 $('.modal-full-viewport .close').click(); 1891 // player.poster(''); 1892 // var currentVideo = $('.modal-full-viewport .swiper-slide__modal-video[data-id="' + self.currentVideoId + '"]'); 1893 // var $next = currentVideo.next(); 1894 // if ($next.length == 0) { 1895 // $next = $('.swiper-slide__modal-video').first(); 1896 // } 1897 // $('.modal-video-wrapper-up-next-wrapper').removeClass('d-none'); 1898 // $('.modal-video-wrapper-up-next-wrapper .modal-video-wrapper-up-next--title').html($next.find('.swiper-slide__modal-video--title').html()); 1899 // $('.modal-video-wrapper-up-next-wrapper img').attr('srcset', $next.find('source').attr('srcset')); 1900 // $('.modal-video-wrapper-up-next-wrapper img').attr('data-srcset', $next.find('source').attr('data-srcset')); 1901 // $('.modal-video-wrapper-up-next-wrapper img').addClass('lazyload'); 1902 // self.setUpNext($next); 1903 }); 1904 }); 1905 } 1906 1907 NY2024.prototype.addCaptionsIfNeeded = function (player, videoId) { 1908 if (videoId == "church-of-scientology-in-los-angeles-you-have-seen-us-video") { 1909 // if(globalLang == "he") { 1910 // player.addRemoteTextTrack({src: "https://d1en0cs4s0ez90.cloudfront.net/hls/scientology/subtitles/church-of-scientology-in-los-angeles-you-have-seen-us-video_he.vtt", label: "עברית", default: true}, false); 1911 // } 1912 } 1913 1914 } 1915 1916 NY2024.prototype.initIntro = function () { 1917 var tl = gsap.timeline({ 1918 id: "initIntro", 1919 onComplete: () => { 1920 this.initIntroTitles(); 1921 }, 1922 }); 1923 1924 tl.from('.year-in-review-2024--hero-text__text-wrapper, .year-in-review-2024--hero-text__span', { 1925 autoAlpha: 0, 1926 duration: 0.75, 1927 scale: 3, 1928 ease: Power4.easeOut, 1929 stagger: 0.1, 1930 }); 1931 1932 tl.from('.year-in-review-2024--hero-subtext span', { 1933 autoAlpha: 0, 1934 duration: 0.75, 1935 y: 20, 1936 ease: Power4.easeOut, 1937 stagger: 0.1, 1938 }, "-=0.5"); 1939 1940 tl.from('.year-2024--bounce', { 1941 autoAlpha: 0, 1942 duration: 0.75, 1943 y: 50, 1944 ease: Power4.easeOut, 1945 }, "-=0.5"); 1946
1947 tl.from('.year-in-review-2024--hero-city-middle', { 1948 autoAlpha: 0, 1949 y: 20, 1950 }, "-=0.5"); 1951 1952 tl.from('.year-in-review-2024--hero-city-fireworks', { 1953 autoAlpha: 0, 1954 duration: 0.5, 1955 y: 25, 1956 ease: 'linear', 1957 }, "-=0.1"); 1958 tl.to('.year-in-review-2024--hero-city-fireworks', { 1959 duration: 1, 1960 ease: 'linear', 1961 // filter: 'brightness(1.5)', 1962 filter: 'saturate(3.5)' 1963 }, "<"); 1964 tl.to('.year-in-review-2024--hero-city-fireworks', { 1965 duration: 1, 1966 ease: 'power4.out', 1967 // filter: 'brightness(1)', 1968 filter: 'saturate(1)' 1969 }); 1970 } 1971 1972 NY2024.prototype.initSongDownload = function () { 1973 var lastTimeToggle = 0; 1974 var toggleSongBar = function(event){ 1975 var now = new Date().getTime(); 1976 if(now - lastTimeToggle < 1000) { 1977 return; 1978 } 1979 lastTimeToggle = now; 1980 // forceLoad = true; 1981 var info = $(event.target).closest('.superbowl2022-download-song-bar').find('.superbowl2022-download-song-info'); 1982 info.toggleClass('hidden'); 1983 } 1984 1985 var songBarRows = document.querySelectorAll('.superbowl2022-download-song-bar-row'); 1986 songBarRows.forEach(function(element) { 1987 element.addEventListener('click', toggleSongBar); 1988 element.addEventListener('touchstart', toggleSongBar); 1989 }); 1990 1991 $(document).on('form-success', function(event, form, data){ 1992 $(form).addClass('form__success'); 1993 }); 1994 } 1995 1996 NY2024.prototype.initIntroTitles = function () { 1997 $('.year-in-review-2024--intro-titles > div').each(function (index, el) { 1998 1999 gsap.from(el.querySelector('span'), { 2000 scrollTrigger: { 2001 trigger: el, 2002 start: 'top bottom-=100', 2003 toggleActions: "play none resume reverse", 2004 }, 2005 2006 autoAlpha: 0, 2007 duration: 0.75, 2008 scale: 5, 2009 y: 20, 2010 ease: Power4.easeOut, 2011 }); 2012 }); 2013 } 2014 2015 NY2024.prototype.stickyVideoAutoplay = function () { 2016 $('.year-in-review-2024--video-autoplay').each(function (index, wrapper) { 2017 ScrollTrigger.create({ 2018 trigger: wrapper.querySelector('.year-in-review-2024--video-autoplay-element'), 2019 start: 'top top', 2020 end: 'bottom top', 2021 scrub: true, 2022 pin: wrapper.querySelector('.year-in-review-2024--video-autoplay-element'), 2023 pinSpacing: false, 2024 }); 2025 2026 gsap.to(wrapper.querySelector('.year-in-review-2024--intro-video-dim'), { 2027 scrollTrigger: { 2028 trigger: wrapper.querySelector('.year-in-review-2024--video-autoplay-element'), 2029 start: 'top top', 2030 toggleActions: "play none resume reverse", 2031 }, 2032 autoAlpha: 0.7, 2033 duration: 0.5, 2034 ease: Power4.easeOut, 2035 }); 2036 2037 var videoSource = JSON.parse(wrapper.querySelector('.video-js').getAttribute('data-videosrc')); 2038 2039 videojs(wrapper.querySelector('.video-js'), { controls: false, muted: true, loop: false }).ready(function () { 2040 var player = this; 2041 this.src(videoSource); 2042 player.muted(true); 2043 2044 player.on('timeupdate', function () { 2045 gsap.to(wrapper.querySelector('.year-in-review-2024--videoautoplay'), { 2046 autoAlpha: 1, 2047 duration: 0.25, 2048 }); 2049 }); 2050 2051 ScrollTrigger.create({ 2052 trigger: wrapper.querySelector('.year-in-review-2024--video-autoplay--fade-trigger'), 2053 start: 'center center', 2054 onToggle: (self) => { 2055 var shouldPlay = self.direction == 1 || player.currentTime() < 0.5; 2056 if (self.isActive && shouldPlay) { 2057 player.play(); 2058 } 2059 }, 2060 }); 2061 }); 2062 2063 }); 2064 } 2065 2066 NY2024.prototype.initAOFadeImages = function () { 2067 // fade in on scroll in 2068 $('.year-in-review-2024-org-logo').each(function (index, el) { 2069 var tl = gsap.timeline({ 2070 scrollTrigger: { 2071 trigger: el, 2072 start: 'bottom bottom', 2073 toggleActions: "play none resume reverse", 2074 }, 2075 }); 2076 tl.from(el.querySelector('.year-in-review-2024-org-logo__streaks'), { 2077 autoAlpha: 0, 2078 y: 50, 2079 duration: 0.5, 2080 }); 2081 tl.from(el.querySelector('.year-in-review-2024-org-logo-image'), {
2082 autoAlpha: 0, 2083 duration: 0.5, 2084 y: 50, 2085 }, "-=0.25"); 2086 }); 2087 2088 $('.year-in-review-2024--ao-row').each(function (index, el) { 2089 var tl = gsap.timeline({ 2090 scrollTrigger: { 2091 trigger: el, 2092 start: 'center bottom', 2093 toggleActions: "play none resume reverse", 2094 }, 2095 }); 2096 // tl.from(el.querySelector('.year-in-review-2024-org-logo__streaks'), { 2097 // autoAlpha: 0, 2098 // y: 50, 2099 // }); 2100 // tl.from(el.querySelector('.year-in-review-2024-org-logo-image'), { 2101 // autoAlpha: 0, 2102 // }); 2103 tl.from(el.querySelector('.year-in-review-2024--ao-image-wrapper, .year-in-review-2024--ao-image-medium'), { 2104 autoAlpha: 0, 2105 duration: 0.5, 2106 scale: 1.1, 2107 ease: Power4.easeOut, 2108 }, "+=0.4"); 2109 tl.fromTo(el.querySelector('.year-in-review-2024--ao-image__left'), { 2110 x: "-10%", 2111 autoAlpha: 0, 2112 }, { 2113 x: "0%", 2114 autoAlpha: 1, 2115 duration: 0.5, 2116 ease: "power3.out", 2117 }, "-=0.25"); 2118 tl.fromTo(el.querySelector('.year-in-review-2024--ao-image__right'), { 2119 x: "10%", 2120 autoAlpha: 0, 2121 }, { 2122 x: "0%", 2123 autoAlpha: 1, 2124 duration: 0.5, 2125 ease: "power3.out", 2126 }, "-=0.25"); 2127 }); 2128 } 2129 2130 NY2024.prototype.initIdealCalifornia = function () { 2131 var tl = gsap.timeline({ 2132 id: "initIdealCalifornia", 2133 scrollTrigger: { 2134 trigger: '.year-in-review-2024--california', 2135 start: 'center+=20% bottom', 2136 toggleActions: "play none resume reverse", 2137 }, 2138 }); 2139 2140 tl.from('.year-in-review-2024--california-image', { 2141 autoAlpha: 0, 2142 duration: 0.25, 2143 }); 2144 tl.to('.year-in-review-2024--california-image', { 2145 filter: 'saturate(1.5)', 2146 duration: 0.25, 2147 ease: 'linear', 2148 }, "-=0.1"); 2149 tl.to('.year-in-review-2024--california-image', { 2150 filter: 'saturate(1)', 2151 duration: 0.25, 2152 ease: 'Powet4.easeOut', 2153 }); 2154 2155 tl.from('.year-in-review-2024-ca--all-ideal-text, .year-in-review-2024-ca--name', { 2156 autoAlpha: 0, 2157 scale: 5, 2158 duration: 0.5, 2159 ease: Power4.easeOut, 2160 }, "-=0.25"); 2161 2162 tl.to('.year-in-review-2024--california-wrapper', { 2163 delay: 0.5, 2164 x: 5, 2165 y: 5, 2166 yoyo: true, 2167 repeat: 5, 2168 duration: 0.05, 2169 }, "<-0.25"); 2170 2171 2172 tl.from('.year-in-review-2024-ca--done', { 2173 autoAlpha: 0, 2174 scale: 5, 2175 duration: 0.5, 2176 ease: Power4.easeOut, 2177 }, "+=0.1"); 2178 tl.to('.year-in-review-2024--california-wrapper', { 2179 delay: 0.5, 2180 x: 5, 2181 y: 5, 2182 yoyo: true, 2183 repeat: 5, 2184 duration: 0.05, 2185 }, "<-0.25"); 2186 2187 } 2188 2189 NY2024.prototype.initGobig = function () { 2190 var self = this; 2191 2192 2193 if(!this.isMobileAgent()) { 2194 var lightOutEl = document.querySelector('.year-in-review-2024--earth-lights-out'); 2195 videojs(lightOutEl, { controls: false, muted: true, loop: false }).ready(function () { 2196 var videoSource = JSON.parse(lightOutEl.getAttribute('data-videosrc')); 2197 var player = this; 2198 this.src(videoSource); 2199 player.muted(true); 2200 2201 ScrollTrigger.create({ 2202 trigger: lightOutEl, 2203 start: 'top top', 2204 onEnter: (self) => { 2205 var shouldPlay = self.direction == 1 || player.currentTime() < 0.5; 2206 if (shouldPlay) { 2207 player.play(); 2208 } 2209 }, 2210 }); 2211 }); 2212 } else { 2213 gsap.set('.year-in-review-2024--earth-lights-out', { 2214 autoAlpha: 0, 2215 }); 2216 $('image[data-href-mobile]').each(function (index, el) { 2217 $(el).attr('href', $(el).data('href-mobile')); 2218 }); 2219 } 2220 2221 this.adjustTextPosition(); 2222 $(window).resize(this.adjustTextPosition) 2223 2224 $('.year-in-review-2024--gobig-container').each(function (index, el) { 2225 function updateTextPosition() { 2226 const text1 = el.querySelector('.year-in-review-2024--go__overlay'); 2227 const text2 = el.querySelector('.year-in-review-2024--bigger'); 2228 2229 const text1BBox = text1.getBBox(); 2230 2231 var offset = parseInt(text2.getAttribute("data-offset")); 2232 if(self.isMobile() && text2.getAttribute("data-offset-mobile")) { 2233 offset = parseInt(text2.getAttribute("data-offset-mobile")); 2234 } else if(self.isTablet() && text2.getAttribute("data-offset-tablet")) { 2235 offset = parseInt(text2.getAttribute("data-offset-tablet")); 2236 } 2237 2238 // Calculate the new y position for text2 2239 // Adding 100 to the y position of the bottom of text1's bounding box 2240 const newY = text1BBox.y + text1BBox.height + offset; 2241 2242 // Update text2 position 2243 text2.setAttribute('y', newY); 2244 } 2245 2246 $(window).resize(updateTextPosition); 2247 updateTextPosition(); 2248 2249 el.querySelectorAll('.year-in-review-2024--bigger[data-innerhtml]').forEach(function (el) { 2250 // replace tag with tspan 2251 var innerHTML = el.getAttribute('data-innerhtml'); 2252 2253 // Replace the opening <span> tag 2254 innerHTML = innerHTML.replace("<span", "<tspan"); 2255 2256 // Replace the closing </span> tag 2257 innerHTML = innerHTML.replace("</span>", "</tspan>"); 2258 2259 el.innerHTML = innerHTML; 2260 }); 2261 2262 2263 var endScrollTrigger = "bottom bottom"; 2264 if (el.querySelector('.year-in-review-2024--gobig-inner').getAttribute('data-swipe-animation')) { 2265 endScrollTrigger = function () { 2266 var gobinInner = el.querySelector('.year-in-review-2024--gobig-inner'); 2267 var height = gobinInner.offsetHeight * 2; 2268 height += window.innerHeight; 2269 return "+=" + height + "px"; 2270 } 2271 } 2272 2273 ScrollTrigger.create({ 2274 trigger: el, 2275 start: 'top top', 2276 // end: 'bottom bottom', // Adjust as needed 2277 end: endScrollTrigger, 2278 scrub: true, 2279 pin: el.querySelector('.year-in-review-2024--gobig-inner'), 2280 pinSpacing: false, 2281 }); 2282 2283 var split1 = new SplitText(el.querySelectorAll('.year-in-review-2024--gobig-pre-line1, .year-in-review-2024--gobig-pre-line2'), { 2284 type: "words" 2285 }); 2286 // var split2 = new SplitText(el.querySelector('.year-in-review-2024--gobig-pre-line2'), { 2287 // type: "words" 2288 // }); 2289 2290 var tl = gsap.timeline({ 2291 scrollTrigger: { 2292 trigger: el, 2293 start: 'top+=5% top', // Adjust these values as needed 2294 end: 'bottom bottom', 2295 scrub: true, 2296 }, 2297 }); 2298 2299 // console.log('split1.words',split1.words);
2300 // console.log('split2.words',split2.words); 2301 2302 tl.from(split1.words, { 2303 autoAlpha: 0, 2304 ease: Power4.easeOut, 2305 stagger: { 2306 amount: 1.25, 2307 } 2308 }, "<") 2309 // .from(split2.words, { 2310 // autoAlpha: 0, 2311 // ease: Power4.easeOut, 2312 // stagger: { 2313 // amount: 0.75, 2314 // } 2315 // }, "-=0.25"); 2316 2317 2318 tl.to(el.querySelectorAll('.year-in-review-2024--gobig-pre-text-wrapper__first-line'), { autoAlpha: 0, duration: 0.5 }) 2319 .fromTo(el.querySelectorAll('.year-in-review-2024--gobig-pre-text-wrapper__second-line'), { autoAlpha: 0, scale: 0.5 }, { 2320 autoAlpha: 1, scale: function () { 2321 if (window.innerWidth < 992) { 2322 return 1.1; 2323 } 2324 return 2; 2325 }, duration: 4, 2326 }, "-=0.1").addLabel("secondLine"); 2327 2328 var goSelector = '.year-in-review-2024--go'; 2329 var overlayAnimation = { scale: 20, transformOrigin: "center", duration: 1 }; 2330 if(self.isMobileAgent()) { 2331 goSelector = '.year-in-review-2024--go, .year-in-review-2024--go__overlay'; 2332 overlayAnimation.autoAlpha = 0; 2333 } 2334 // for delay 2335 tl.to(el.querySelectorAll('.year-in-review-2024--gobig-pre-text-wrapper__second-line'), { autoAlpha: 1, duration: 3 }, "<"); 2336 tl.to(el.querySelectorAll('.year-in-review-2024--gobig-pre-text-wrapper__second-line'), { autoAlpha: 0, duration: 0.15 }, "-=0.15") 2337 .from(el.querySelectorAll(goSelector), overlayAnimation, "-=0.3") 2338 .from(el.querySelectorAll('.year-in-review-2024--go__masked'), { autoAlpha: 0, duration: 0.1 }, "<") 2339 .to(el.querySelectorAll('.year-in-review-2024--go-rect'), { autoAlpha: 0, duration: 0.25 }, "<"); 2340 2341 if(!self.isMobileAgent()) { 2342 tl.from(el.querySelectorAll('.year-in-review-2024--go__overlay'), { autoAlpha: 0, duration: 0.1 }, "-=0.1"); 2343 } 2344 2345 if(self.isMobileAgent()) { 2346 tl.to(el.querySelectorAll('.year-in-review-2024--go-rect-bg'), { autoAlpha: 0, duration: 0.1 }, "<"); 2347 } 2348 2349 2350 tl.from(el.querySelectorAll('.year-in-review-2024--bigger'), { scale: 10, transformOrigin: "center", autoAlpha: 0, duration: 0.25 }, "-=0.1"); 2351 2352 var biggerText = el.querySelector('.bigger-text'); 2353 if (biggerText) { 2354 var halfWidth = biggerText.getBBox().width / 2; 2355 tl.from(el.querySelectorAll('.year-in-review-2024--bigger'), { x: halfWidth, duration: 0.25 }, "+=0.25"); 2356 tl.from(biggerText, { autoAlpha: 0, duration: 0.25 }, "<"); 2357 } 2358 2359 tl.from(el.querySelectorAll('.year-in-review-2024--gobig-bg'), { 2360 autoAlpha: 0, duration: 0.1, onComplete: () => { 2361 var tl = gsap.timeline(); 2362 tl.fromTo(el.querySelectorAll('.year-in-review-2024--go-with-bg, .year-in-review-2024--gobig-bg-inner'), { 2363 x: 0, 2364 y: 0, 2365 }, { 2366 x: 5, 2367 y: 5, 2368 yoyo: true, 2369 repeat: 5, 2370 duration: 0.1, 2371 ease: 'power1.inOut', 2372 }); 2373 tl.fromTo(el.querySelectorAll('.year-in-review-2024--go-with-bg, .year-in-review-2024--gobig-bg-inner'), { 2374 x: 0, 2375 y: 0, 2376 }, { 2377 x: 2, 2378 y: 2, 2379 yoyo: true, 2380 repeat: 2, 2381 duration: 0.1, 2382 ease: 'power1.inOut', 2383 }); 2384 } 2385 }, "-=0.5"); 2386 2387 if(el.querySelectorAll('.year-in-review-2024--earth-lights-out').length > 0) { 2388 tl.to(el.querySelectorAll('.year-in-review-2024--earth-lights-out'), { autoAlpha: 0, duration: 0.2 }, "secondLine") 2389 } 2390 2391 if(el.querySelector('.year-in-review-2024--go-rect-bg2') && !self.isChrome119OrLower()) { 2392 tl.fromTo(el.querySelector('.year-in-review-2024--go-rect-bg2'), 2393 { 2394 rotate: self.isMobileAgent() ? "0deg" : "-8deg", 2395 transformOrigin: "center", 2396 }, { 2397 duration: 8, 2398 rotate: "20deg", 2399 scale: 2, 2400 }, 0); 2401 tl.fromTo(el.querySelector('#clip-text2'), 2402 { 2403 scale: 1, 2404 rotate: self.isMobileAgent() ? "0deg" : "8deg", 2405 transformOrigin: "center", 2406 }, { 2407 scale: 0.5, 2408 duration: 8, 2409 rotate: "-20deg", 2410 }, 0); 2411 } 2412 2413 if(el.querySelector('.year-in-review-2024--go-rect-bg3') && !self.isChrome119OrLower()) { 2414 tl.fromTo(el.querySelector('.year-in-review-2024--go-rect-bg3'), 2415 { 2416 rotate: self.isMobileAgent() ? "0deg" : "-15deg", 2417 transformOrigin: "center", 2418 scale: function(){ 2419 return calculateScale(el.querySelector('.year-in-review-2024--go-rect-bg3'), -15); 2420 }, 2421 }, { 2422 duration: 6, 2423 rotate: "-4deg", 2424 scale: 2, 2425 }, 0); 2426 tl.fromTo(el.querySelector('#clip-text3'), 2427 { 2428 scale: 1, 2429 rotate: "15deg", 2430 transformOrigin: "center", 2431 }, { 2432 scale: 0.5, 2433 duration: 6, 2434 rotate: "4deg", 2435 }, 0); 2436 } 2437 2438 console.log('tl',tl); 2439 2440 2441 // .to(el.querySelectorAll('.year-in-review-2024--bigger, .year-in-review-2024--go'), { fill: "#000" }, "-=0.1"); 2442 }); 2443 2444 /** 2445 * Calculates the minimum scale factor needed for an HTML element to cover its original area after being rotated. 2446 * It determines the element's original width and height, computes the dimensions of the bounding box post-rotation, 2447 * and then calculates the scale factor based on the larger dimension change to ensure full coverage. 2448 * 2449 * @param {HTMLElement} element - The element to be scaled. 2450 * @param {number} rotationAngle - The angle of rotation in degrees (positive for clockwise, negative for counter-clockwise). 2451 * @returns {number} The required scale factor to maintain coverage after rotation. 2452 */ 2453 function calculateScale(element, rotationAngle) { 2454 // Get the original dimensions of the element 2455 const rect = element.getBoundingClientRect(); 2456 const width = rect.width; 2457 const height = rect.height; 2458 2459 // Convert the rotation angle from degrees to radians 2460 const theta = rotationAngle * Math.PI / 180; 2461 2462 // Calculate the dimensions of the bounding box 2463 const widthBbox = Math.abs(height * Math.sin(theta)) + Math.abs(width * Math.cos(theta)); 2464 const heightBbox = Math.abs(height * Math.cos(theta)) + Math.abs(width * Math.sin(theta)); 2465 2466 // Calculate the scale factor 2467 const scaleX = widthBbox / width; 2468 const scaleY = heightBbox / height; 2469 2470 // Use the larger scale factor to ensure coverage 2471 return Math.max(scaleX, scaleY); 2472 } 2473 2474 } 2475 2476 NY2024.prototype.initBuildingInsets = function () {
2477 $('.year-2024-ideal-orgs-mosaic-container').each(function (containerIndex, container) { 2478 var tl = gsap.timeline({ 2479 scrollTrigger: { 2480 trigger: container, 2481 start: 'top center', 2482 // end: 'bottom bottom', 2483 toggleActions: "play none resume reverse", 2484 }, 2485 }).from($(container).find('.year-in-review-2024-ideal-org-inset'), { 2486 autoAlpha: 0, 2487 scale: 0.2, 2488 duration: 0.5, 2489 ease: Power4.easeOut, 2490 stagger: { 2491 amount: 0.5, 2492 }, 2493 }) 2494 }); 2495 2496 2497 } 2498 2499 NY2024.prototype.initYearScroll = function () { 2500 var tl = gsap.timeline({ 2501 id: "initYearScroll", 2502 scrollTrigger: { 2503 trigger: '.year-in-review-2024--countdown-wrapper', 2504 start: 'top top', 2505 end: 'bottom bottom', 2506 pin: true, 2507 pinSpacing: false, 2508 scrub: true, 2509 toggleActions: "play none resume reverse", 2510 }, 2511 }); 2512 2513 var elements = $('.year-in-review-2024--countdown--number'); 2514 gsap.set(elements, { display: 'none' }); 2515 $('.year-in-review-2024--countdown').hide(); 2516 2517 elements.each(function (index, el) { 2518 2519 if (index == 0) { 2520 tl.add(() => { 2521 $('.year-in-review-2024--countdown').addClass('year-in-review-2024--countdown--switching-number__active'); 2522 gsap.set('.year-in-review-2024--countdown', { display: 'block' }); 2523 gsap.set(el, { display: 'inline-block' }); 2524 }) 2525 } else { 2526 tl.add(() => { 2527 $(el).find('.year-in-review-2024--countdown--switching-number').addClass('year-in-review-2024--countdown--switching-number__active'); 2528 gsap.set(el, { display: 'inline-block' }); 2529 }) 2530 } 2531 2532 if (index > 0) { 2533 tl.to( 2534 elements[index - 1], 2535 { 2536 autoAlpha: 1, 2537 duration: 0.5, 2538 onStart: function () { 2539 // On start of the animation, set the display of the target elements to 'none' 2540 gsap.set(this.targets(), { display: 'none' }); 2541 }, 2542 }, 2543 "<" // Indicates the position of this animation in the timeline (relative to the previous one) 2544 ); 2545 } 2546 if (index + 1 < elements.length) { 2547 tl.to( 2548 elements[index + 1], 2549 { 2550 autoAlpha: 1, 2551 duration: 0.5, 2552 onReverseComplete: function () { 2553 // On start of the animation, set the display of the target elements to 'none' 2554 gsap.set(this.targets(), { display: 'none' }); 2555 $(this.targets()).find('.year-in-review-2024--countdown--switching-number').removeClass('year-in-review-2024--countdown--switching-number__active'); 2556 } 2557 }, 2558 "<" // Indicates the position of this animation in the timeline (relative to the previous one) 2559 ); 2560 } 2561 }); 2562 } 2563 2564 NY2024.prototype.adjustTextPosition = function () { 2565 var textElements = document.querySelectorAll('text[data-y-mobile][data-y-tablet][data-y-desktop]'); 2566 2567 textElements.forEach(function (el) { 2568 var yValue; 2569 2570 if (window.innerWidth < 768) { // Mobile viewport 2571 yValue = el.getAttribute('data-y-mobile'); 2572 } else if (window.innerWidth >= 768 && window.innerWidth < 1024) { // Tablet viewport 2573 yValue = el.getAttribute('data-y-tablet'); 2574 } else { // Desktop viewport 2575 yValue = el.getAttribute('data-y-desktop'); 2576 } 2577 2578 el.setAttribute('y', yValue); 2579 }); 2580 } 2581 2582 NY2024.prototype.lineSplitAnimation = function () { 2583 2584 $('.year-review-2024--line-split').each(function (index, element) { 2585 var split = new SplitText(element, { 2586 type: "lines", 2587 }); 2588 var tl = gsap.timeline({ 2589 scrollTrigger: { 2590 trigger: element, 2591 start: 'center-=50% center', 2592 toggleActions: "play none resume reverse", 2593 }, 2594 }); 2595 // fade odd number lines from left
2596 split.lines.forEach(function (line, index) { 2597 if (index % 2 == 0) { 2598 tl.from(line, { x: -100, autoAlpha: 0, duration: 0.3 }, "<"); 2599 } else { 2600 tl.from(line, { x: 100, autoAlpha: 0, duration: 0.3 }, "-=0.25"); 2601 } 2602 }); 2603 }); 2604 2605 } 2606 2607 NY2024.prototype.init4dSticky = function () { 2608 var tl = gsap.timeline({ 2609 id: "init4dSticky", 2610 scrollTrigger: { 2611 trigger: '.year-in-review-2024--4d-stats-sticky', 2612 start: 'top top', 2613 end: 'bottom bottom', 2614 pin: true, 2615 pinSpacing: false, 2616 scrub: true, 2617 }, 2618 }); 2619 2620 var stats = $('.year-in-review-2024--4d-stat'); 2621 tl.to(stats[0], { 2622 duration: 0.5, 2623 autoAlpha: 1, 2624 }); 2625 stats.each(function (index, element) { 2626 if(index > 0) { 2627 tl.from(element, { 2628 autoAlpha: 0, 2629 scale: 3, 2630 duration: 0.5, 2631 ease: Power4.easeOut, 2632 }); 2633 tl.to(element.previousElementSibling, { 2634 autoAlpha: 0, 2635 duration: 0.5, 2636 ease: Power4.easeOut, 2637 }, "<"); 2638 } 2639 }); 2640 } 2641 2642 NY2024.prototype.initLandlordSticky = function () { 2643 var tl = gsap.timeline({ 2644 scrollTrigger: { 2645 trigger: '.year-in-review-2024--landlord-stats-extender', 2646 start: 'top top', 2647 end: 'bottom bottom', 2648 pin: true, 2649 pinSpacing: false, 2650 scrub: true, 2651 }, 2652 }); 2653 2654 var stats = $('.year-in-review-2024--landlord-stat'); 2655 tl.to(stats[0], { 2656 duration: 0.5, 2657 autoAlpha: 1, 2658 }); 2659 stats.each(function (index, element) { 2660 if(index > 0) { 2661 tl.from(element, { 2662 autoAlpha: 0, 2663 scale: 3, 2664 duration: 0.5, 2665 ease: Power4.easeOut, 2666 }); 2667 tl.to(element.previousElementSibling, { 2668 autoAlpha: 0, 2669 duration: 0.5, 2670 ease: Power4.easeOut, 2671 }, "<"); 2672 } 2673 }); 2674 } 2675 2676 NY2024.prototype.initSectionSeparators = function () { 2677 var self = this; 2678 $('.year-in-review-2024--section').each(function (index, element) { 2679 var tl = gsap.timeline({ 2680 scrollTrigger: { 2681 trigger: element, 2682 start: 'top center', 2683 end: 'bottom top', 2684 scrub: true, 2685 toggleActions: "play none resume reverse", 2686 }, 2687 }); 2688 tl.fromTo(element.querySelector('.year-in-review-2024--section-title__bg'), { 2689 y: self.isMobileAgent() ? "-5%" : "10%", 2690 }, { 2691 y: "-10%", 2692 }); 2693 2694 2695 tl.fromTo(element.querySelector('.year-in-review-2024--section-title'), { 2696 x: 0, 2697 }, { 2698 x: 0, 2699 onStart: function () { 2700 element.querySelector('.year-in-review-2024--section-title').classList.add('year-in-review-2024--countdown--switching-number__active'); 2701 }, 2702 onReverseComplete: function () { 2703 console.log('onReverseComplete!!'); 2704 element.querySelector('.year-in-review-2024--section-title').classList.remove('year-in-review-2024--countdown--switching-number__active'); 2705 }, 2706 duration: 0.25, 2707 }, "-=0.4"); 2708 }); 2709 } 2710 2711 NY2024.prototype.initButtonFadein = function () { 2712 var self = this; 2713 $('.year-in-review-2024-button-wrapper').each(function () { 2714 var timeline = gsap.timeline({ 2715 scrollTrigger: { 2716 trigger: this, 2717 start: 'bottom bottom+=5%', 2718 end: "100%", 2719 toggleActions: "play none resume reverse", 2720 }, 2721 }); 2722 timeline.fromTo(this.querySelector('.year-in-review-2024-button-inner'), { 2723 scale: 0, 2724 }, { 2725 duration: 0.25, 2726 scale: 1, 2727 autoAlpha: 1, 2728 }); 2729 timeline.fromTo(this.querySelector('.year-in-review-2024-button-outer-circle'), { 2730 scale: 0, 2731 }, { 2732 duration: 0.5, 2733 scale: 1.5, 2734 autoAlpha: 1, 2735 }, "<"); 2736 2737 timeline.fromTo(this.querySelector('.year-in-review-2024-button-outer-circle'), { 2738 scale: 1.5, 2739 }, { 2740 duration: 0.5, 2741 scale: 0, 2742 }); 2743 timeline.from(this.querySelector('.year-in-review-2024-button-inner'), { 2744 duration: 0.75, 2745 width: 50, 2746 height: 50, 2747 clearProps: 'width, height', 2748 }, "-=0.3"); 2749 timeline.from(this.querySelectorAll('.year-in-review-2024-button-inner-text'), {
2750 duration: 0.25, 2751 autoAlpha: 0, 2752 }); 2753 }); 2754 2755 } 2756 2757 NY2024.prototype.initSectionSwipes = function () { 2758 $('.year-in-review-swipe-section').each(function (index, element) { 2759 ScrollTrigger.create({ 2760 trigger: element, 2761 start: 'bottom bottom', 2762 end: function () { 2763 return "bottom+=" + window.innerHeight + "px top"; 2764 }, 2765 toggleActions: "play none resume reverse", 2766 pin: true, 2767 pinSpacing: false, 2768 }); 2769 2770 var tl = gsap.timeline({ 2771 scrollTrigger: { 2772 trigger: element, 2773 start: 'bottom bottom', 2774 end: 'bottom top', 2775 scrub: true, 2776 toggleActions: "play none resume reverse", 2777 }, 2778 }); 2779 tl.from(element, { 2780 clipPath: 'inset(100% 0 0 0)' 2781 }); 2782 }); 2783 } 2784 2785 NY2024.prototype.initParallax = function () { 2786 _.each($('.year-review-2024--parallax'), function (element, index) { 2787 var offset = element.getAttribute('data-parallax-offset'); 2788 2789 // var scale = Math.abs(offset) / element.clientHeight + 1; 2790 // gsap.set(element.querySelector('img'), { scale: scale }); 2791 2792 gsap.from(element.querySelector('img'), { 2793 scrollTrigger: { 2794 trigger: element, 2795 scrub: true, 2796 start: "top bottom", 2797 end: "bottom top", 2798 }, 2799 y: offset, 2800 ease: 'none' 2801 }); 2802 }); 2803 2804 _.each($('.year-review-2024--bg-parallax'), function (element, index) { 2805 var offset = element.getAttribute('data-parallax-offset'); 2806 2807 gsap.to(element, { 2808 scrollTrigger: { 2809 trigger: element, 2810 scrub: true, 2811 start: "top top", 2812 end: "bottom top", 2813 }, 2814 y: offset, 2815 ease: 'none' 2816 }); 2817 }); 2818 } 2819
2820 NY2024.prototype.initBackground2 = function () { 2821 const leftBubbles = document.querySelectorAll('.year-review-2024--bubble.year-review-2024--bubble__left'); 2822 const rightBubbles = document.querySelectorAll('.year-review-2024--bubble.year-review-2024--bubble__right'); 2823 2824 2825 // Function to generate a random path 2826 const generatePath = (startX, startY) => { 2827 return [ 2828 { x: startX, y: startY }, 2829 { x: (window.innerWidth / 2) * Math.random(), y: window.innerHeight * Math.random() }, 2830 { x: window.innerWidth - startX, y: window.innerHeight * Math.random() } 2831 ]; 2832 }; 2833 2834 const randomizeBubbleAppearance = (bubble) => { 2835 const size = 10 + Math.random() * 40; // Random size between 10px and 50px 2836 const opacity = 0.3 + Math.random() * 0.7; // Random opacity between 0.3 and 1 2837 2838 gsap.set(bubble, { 2839 width: size, 2840 height: size, 2841 opacity: opacity 2842 }); 2843 }; 2844 2845 leftBubbles.forEach(bubble => { 2846 const startY = window.innerHeight * Math.random(); 2847 const startX = window.innerWidth * Math.random(); 2848 randomizeBubbleAppearance(bubble); 2849 gsap.set(bubble, { x: startX, y: startY }); 2850 gsap.to(bubble, { 2851 duration: 120 + Math.random() * 30, // random duration 2852 ease: "linear", 2853 motionPath: { 2854 path: generatePath(startX, startY), 2855 curviness: 1.5 2856 }, 2857 repeat: -1, 2858 yoyo: true 2859 }); 2860 }); 2861 2862 rightBubbles.forEach(bubble => { 2863 const startY = window.innerHeight * Math.random(); 2864 const startX = window.innerWidth - (window.innerWidth * Math.random()); 2865 randomizeBubbleAppearance(bubble); 2866 gsap.set(bubble, { x: startX, y: startY }); 2867 gsap.to(bubble, { 2868 duration: 120 + Math.random() * 30, // random duration 2869 ease: "linear", 2870 motionPath: { 2871 path: generatePath(startX, startY), 2872 curviness: 1.5 2873 }, 2874 repeat: -1, 2875 yoyo: true 2876 }); 2877 }); 2878 } 2879 2880 2881 NY2024.prototype.initModalCarousel = function () { 2882 $('.swiper-container__modal-videos').each(function () { 2883 var $el = $(this); 2884 if ($el.hasClass('swiper-container-initialized')) { 2885 return; 2886 } 2887 new Swiper($el[0], { 2888 paginationClickable: true, 2889 spaceBetween: 20, 2890 roundLengths: true, 2891 simulateTouch: false, 2892 slidesPerView: 'auto', 2893 breakpoints: { 2894 768: { 2895 slidesOffsetBefore: 70, 2896 slidesOffsetAfter: 70, 2897 } 2898 }, 2899 navigation: { 2900 nextEl: $el.find('.slide-right-arrow')[0], 2901 prevEl: $el.find('.slide-left-arrow')[0], 2902 }, 2903 }); 2904 }); 2905 2906 var self = this; 2907 2908 } 2909 2910 2911 NY2024.prototype.initAnchors = function () { 2912 $('.year-review-2021--menuitem-subitem a').click(function () { 2913 var href = $(this).attr('href'); 2914 if (href && $(href).hasClass('year-end-2022--playbutton-area')) { 2915 $(href).click(); 2916 } 2917 }); 2918 } 2919 2920 NY2024.prototype.getScrollTopOffset = function (el) { 2921 var alignBottom = el.data('align-bottom'); 2922 2923 var topSpace = 75; 2924 var bottomAligner = 20; 2925 if (typeof el.data("top") != "undefined") { 2926 topSpace = parseInt(el.data("top")); 2927 bottomAligner = 0; 2928 } else if (alignBottom) { 2929 topSpace = 20; 2930 bottomAligner = 0; 2931 2932 if (typeof el.data("top") != "undefined") { 2933 topSpace = parseInt(el.data("top")); 2934 } 2935 } 2936 2937 2938 var topOffset = el.offset().top; 2939 if (el.data('align-center')) { 2940 topOffset = topOffset - $(window).height() / 2 + el.height() / 2; 2941 } else if (alignBottom) { 2942 topOffset = topOffset + topSpace + bottomAligner - $(window).height(); 2943 } else { 2944 topOffset = topOffset - topSpace; 2945 } 2946 2947 return topOffset; 2948 } 2949 2950 NY2024.prototype.scrollToElement = function (el, duration) { 2951 var self = this; 2952 if (self.lastScrollAnimation) { 2953 self.lastScrollAnimation.pause(); 2954 } 2955 2956 var topOffset = self.getScrollTopOffset(el); 2957 2958 var dur = 2; 2959 var ease = Power4.easeInOut; 2960 2961 if (typeof el.data("ease") != "undefined") { 2962 ease = Power1.easeOut; 2963 // 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 "); 2964 } 2965 2966 if (typeof el.data("ease-curve") != "undefined") { 2967 ease = el.data("ease-curve"); 2968 } 2969 if (typeof el.data("ease-curve-custom") != "undefined") { 2970 ease = CustomEase.create("custom", el.data("ease-curve-custom")); 2971 } 2972 2973 if (typeof el.data("easein") != "undefined") { 2974 ease = Power4.easeInOut; 2975 } 2976 2977 2978 if (duration) { 2979 dur = duration / 1000; 2980 } 2981 2982 2983 var scrollForward = topOffset - window.scrollY > 0; 2984 2985 if (scrollForward) { 2986 var $prevInset; 2987 var currentIndex = parseInt(el.attr('data-index')); 2988 if (currentIndex > 0) { 2989 $prevInset = $('.year-review-2024-step[data-index="' + (currentIndex - 1) + '"]'); 2990 } 2991 2992 2993 if ($prevInset) { 2994 var currentPosition = self.getScrollTopOffset($prevInset); 2995 var totalScrollDistance = Math.abs(currentPosition - topOffset); 2996 var remainingScrollDistance = Math.abs(topOffset - window.scrollY); 2997 2998 dur = dur * remainingScrollDistance / totalScrollDistance; 2999 } 3000 } else { 3001 var $nextInset; 3002 var currentIndex = parseInt(el.attr('data-index')); 3003 if (currentIndex < $('.year-review-2024-step').length - 1) { 3004 $nextInset = $('.year-review-2024-step[data-index="' + (currentIndex + 1) + '"]'); 3005 } 3006 3007 3008 if ($nextInset) { 3009 var currentPosition = self.getScrollTopOffset($nextInset); 3010 var totalScrollDistance = Math.abs(currentPosition - topOffset); 3011 var remainingScrollDistance = Math.abs(topOffset - window.scrollY); 3012 3013 dur = dur * remainingScrollDistance / totalScrollDistance; 3014 } 3015 } 3016 3017 if (dur < 0.5) { 3018 dur = 0.5; 3019 } 3020 3021 3022 self.lastScrollAnimation = gsap.to(window, { 3023 duration: dur, 3024 scrollTo: { 3025 y: topOffset, 3026 }, 3027 ease: ease, 3028 }); 3029 3030 } 3031 3032 NY2024.prototype.initFloats = function () { 3033 var self = this; 3034 3035 $('.year-in-review-2024--float-bottom').each(function () { 3036 var $el = $(this); 3037 var yOffset = 50; 3038 var xOffset = 0; 3039 var offset = 100; 3040 var duration = 0.5;
3041 var delay = 0; 3042 var triggerElement = this; 3043 3044 if (typeof $el.data('trigger') != "undefined") { 3045 triggerElement = $el.data('trigger'); 3046 } 3047 if (typeof $el.data('yoffset') != "undefined") { 3048 yOffset = $el.data('yoffset'); 3049 } 3050 if (typeof $el.data('xoffset') != "undefined") { 3051 xOffset = $el.data('xoffset'); 3052 } 3053 if (typeof $el.data('offset') != "undefined") { 3054 offset = $el.data('offset'); 3055 } 3056 if (typeof $el.data('duration') != "undefined") { 3057 duration = $el.data('duration'); 3058 } 3059 if (typeof $el.data('delay') != "undefined") { 3060 delay = $el.data('delay'); 3061 } 3062 3063 gsap.from(this, { 3064 duration: duration, 3065 delay: delay, 3066 y: yOffset, 3067 x: xOffset, 3068 autoAlpha: 0, 3069 ease: Power4.easeOut, 3070 scrollTrigger: { 3071 trigger: this, 3072 toggleActions: "play pause resume reverse", 3073 start: "+=" + offset + "px bottom", 3074 } 3075 }); 3076 // new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 3077 // .setTween(tween) 3078 // .setClassToggle(this, 'visible') 3079 // // .addIndicators() // add indicators (requires plugin) 3080 // .addTo(self.controller); 3081 }); 3082 3083 $('.year-2024--text-scale').each(function () { 3084 var $el = $(this); 3085 var duration = 0.5; 3086 var delay = 0; 3087 var offset = 100; 3088 var triggerElement = this; 3089 3090 if (typeof $el.data('trigger') != "undefined") { 3091 triggerElement = $el.data('trigger'); 3092 } 3093 if (typeof $el.data('duration') != "undefined") { 3094 duration = $el.data('duration'); 3095 } 3096 if (typeof $el.data('offset') != "undefined") { 3097 offset = $el.data('offset'); 3098 } 3099 if (typeof $el.data('delay') != "undefined") { 3100 delay = $el.data('delay'); 3101 } 3102 3103 gsap.from(this.querySelector('.year-2024--text-scale--inner'), { 3104 duration: duration, 3105 delay: delay, 3106 scale: 5, 3107 autoAlpha: 0, 3108 ease: Power4.easeOut, 3109 scrollTrigger: { 3110 trigger: this, 3111 toggleActions: "play pause resume reverse", 3112 start: "+=" + offset + " bottom", 3113 } 3114 }); 3115 // new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 3116 // .setTween(tween) 3117 // .setClassToggle(this, 'visible') 3118 // // .addIndicators() // add indicators (requires plugin) 3119 // .addTo(self.controller); 3120 }); 3121 3122 $('.year-in-review-2024--scale-in').each(function () { 3123 gsap.from(this.querySelector('img'), 3124 { 3125 scale: 2, 3126 duration: 2, 3127 ease: "Power4.easeOut", 3128 scrollTrigger: { 3129 trigger: this, 3130 toggleActions: "play pause resume reverse", 3131 } 3132 }); 3133 gsap.from(this, 3134 { 3135 scale: 0.8, 3136 duration: 2, 3137 autoAlpha: 0, 3138 y: 20, 3139 ease: "Power4.easeOut", 3140 scrollTrigger: { 3141 trigger: this, 3142 toggleActions: "play pause resume reverse", 3143 } 3144 }); 3145 }); 3146 3147 } 3148 3149 3150 NY2024.prototype.initOdometers = function () { 3151 var self = this; 3152 3153 $('[data-odometer] counter').each(function () { 3154 var $odom = $(this).css('visibility', 'hidden'); 3155 $odom.attr('data-number', $odom.text()); 3156 $odom.text('1'); 3157 new Odometer({ 3158 el: this, 3159 format: $odom.closest('[data-odometer]').data('format'), 3160 }); 3161 3162 var $el = $(this); 3163 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: true, offset: 50, duration: 1 }) 3164 .on("start", function (event) { 3165 $el.css('visibility', 'visible'); 3166 if (event.state == "BEFORE") { 3167 $el.text(''); 3168 } else { 3169 $el.html($el.attr('data-number')); 3170 } 3171 }) 3172 // .setTween(tween) 3173 // .addIndicators() // add indicators (requires plugin) 3174 .addTo(self.controller); 3175 }); 3176 } 3177 3178 3179 3180 NY2024.prototype.getPageHeight = function () { 3181 // called from ScrollMagic 3182 var self = window.NY2024 || this;
3183 if (!self.cachedPageHeight) { 3184 self.cachedPageHeight = $(document).height(); 3185 } 3186 return self.cachedPageHeight; 3187 } 3188 3189 NY2024.prototype.getWindowHeight = function () { 3190 // called from ScrollMagic 3191 var self = window.NY2024 || this; 3192 if (!self.cachedWindowHeight) { 3193 self.cachedWindowHeight = $(window).height(); 3194 } 3195 return self.cachedWindowHeight; 3196 } 3197 3198 NY2024.prototype.getWindowOuterWidth = function () { 3199 // called from ScrollMagic 3200 var self = window.NY2024 || this; 3201 if (!self.cachedOuterWindowWidth) { 3202 self.cachedOuterWindowWidth = $(window).outerWidth(); 3203 } 3204 return self.cachedOuterWindowWidth; 3205 } 3206 3207 NY2024.prototype.isMobile = function () { 3208 return $(window).width() < 767; 3209 } 3210 3211 NY2024.prototype.isMobileAgent = function () { 3212 return isMobile.any; 3213 } 3214 3215 NY2024.prototype.isChrome119OrLower = function () { 3216 var userAgent = navigator.userAgent; 3217 var chromeAgent = userAgent.indexOf("Chrome") > -1; 3218 3219 if (chromeAgent) { 3220 var chromeVersion = userAgent.match(/Chrome\/(\d+)/); 3221 if (chromeVersion && chromeVersion.length > 1) { 3222 var versionNumber = parseInt(chromeVersion[1], 10); 3223 return versionNumber <= 119; 3224 } 3225 } 3226 return false; 3227 } 3228 3229 NY2024.prototype.isTablet = function () { 3230 return $(window).width() >= 768 && $(window).width() < 992; 3231 } 3232 3233 NY2024.prototype.isAndroid = function () { 3234 var ua = navigator.userAgent.toLowerCase(); 3235 var isAndroid = ua.indexOf("android") > -1; 3236 return isAndroid; 3237 } 3238 3239 NY2024.prototype.isIpod = function () { 3240 var ua = navigator.userAgent.toLowerCase(); 3241 var isIpod = ua.indexOf("iPod") > -1; 3242 return isIpod; 3243 } 3244 3245 var hasWebP = (function () { 3246 // some small (2x1 px) test images for each feature 3247 var images = { 3248 basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==", 3249 lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=" 3250 }; 3251 3252 return function (feature) { 3253 var deferred = $.Deferred(); 3254 3255 $("<img>").on("load", function () { 3256 // the images should have these dimensions 3257 if (this.width === 2 && this.height === 1) { 3258 deferred.resolve(); 3259 } else { 3260 deferred.reject(); 3261 } 3262 }).on("error", function () { 3263 deferred.reject(); 3264 }).attr("src", images[feature || "basic"]); 3265 3266 return deferred.promise(); 3267 } 3268 })(); 3269 3270 // Helper function that lets you dynamically figure out a grid's rows/columns as well as further refine those with "odd" or "even" ones 3271 // 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 3272 const getGrid = selector => { 3273 let elements = gsap.utils.toArray(selector), 3274 bounds, 3275 getSubset = (axis, dimension, alternating, merge) => { 3276 let a = [], 3277 subsets = {}, 3278 onlyEven = alternating === "even", 3279 p; 3280 bounds.forEach((b, i) => { 3281 let position = Math.round(b[axis] + b[dimension] / 2), 3282 subset = subsets[position]; 3283 subset || (subsets[position] = subset = []); 3284 subset.push(elements[i]); 3285 }); 3286 for (p in subsets) { 3287 a.push(subsets[p]); 3288 } 3289 if (onlyEven || alternating === "odd") { 3290 a = a.filter((el, i) => !(i % 2) === onlyEven); 3291 } 3292 if (merge) { 3293 let a2 = []; 3294 a.forEach(subset => a2.push(...subset)); 3295 return a2; 3296 } 3297 return a; 3298 }; 3299 elements.refresh = () => bounds = elements.map(el => el.getBoundingClientRect()); 3300 elements.columns = (alternating, merge) => getSubset("left", "width", alternating, merge); 3301 elements.rows = (alternating, merge) => getSubset("top", "height", alternating, merge); 3302 elements.refresh(); 3303 3304 return elements; 3305 } 3306 3307 3308 3309 return NY2024; 3310}())();
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.