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