1var YearReview2021 = (function () { 2 'use strict'; 3 4 var videos = {}; 5 var yearBounceEase = "M0,0 C0,0 0.03961,0.01383 0.06044,0.02525 0.07224,0.03172 0.08174,0.03797 0.08908,0.04884 0.11565,0.08812 0.13201,0.11932 0.1553,0.16553 0.17338,0.20138 0.18471,0.22343 0.19617,0.26127 0.22147,0.34475 0.23406,0.39597 0.25182,0.4841 0.28976,0.6723 0.30237,0.79391 0.33842,0.96685 0.34202,0.98412 0.34874,0.99872 0.36147,1.01005 0.44387,1.0834 0.51583,1.13969 0.60902,1.20774 0.62607,1.22019 0.64205,1.2239 0.66256,1.22993 0.67849,1.23462 0.69237,1.23935 0.70707,1.2366 0.73171,1.23199 0.75634,1.22523 0.77703,1.20851 0.86083,1.14083 1,1 1,1 "; 6 var superEaseIN = "M0,0,C0,0,0.668,0,0.84,0.036,1.076,0.085,0.922,1,1,1"; 7 8 function YearReview2021() { 9 // enforces new 10 if (!(this instanceof YearReview2021)) { 11 return new YearReview2021(); 12 } 13 } 14 15 YearReview2021.prototype.Init = function () { 16 var self = this; 17 self.scenes = []; 18 self.controller = new ScrollMagic.Controller(); 19 20 self.initVideos(); 21 self.initAnchors(); 22 23 hasWebP().then(function() { 24 $('body').addClass('webp-support'); 25 }, function() { 26 $('body').addClass('no-webp-support'); 27 }); 28 29 self.initSharing(); 30 self.initControls(); 31 32 if(!globalGetParams.screencap) { 33 if(!self.isAndroid() && !self.isIpod()) { 34 self.initBgParallax(); 35 self.initLRHQuoteAnimation(); 36 self.initFloats(); 37 self.initParallax(); 38 self.initPosterSlideshow(); 39 self.initRevealAnimation(); 40 self.initSliderImages(); 41 self.initCastleParallax(); 42 self.initWebsiteFrame();
43 self.initBackgroundParallax(); 44 self.initEndTitles(); 45 } else { 46 $('.year-review-2021--very-busy-title').addClass('year-review-2021--very-busy-title__very-visible'); 47 $('.decade-2020-animatable').removeClass('decade-2020-animatable'); 48 $('body').addClass("page-year-in-review-2020__android"); 49 $('.year-review-2021-title--gradient').addClass("year-review-2021-title--gradient__disabled"); 50 $('.year-review-2021-vertical-line--inner').addClass('visible'); 51 $('.year-review-2021--top-wrapper-bg-person--wrapper').addClass('year-review-2021--top-wrapper-bg-person--wrapper__static') 52 $('.year-end-2021--everywhere-reveal').addClass('year-end-2021--everywhere-reveal__no-animation'); 53 } 54 55 self.initOrgSwipe(); 56 self.initGlobeVideo(); 57 self.initZoomText(); 58 self.initGrowingLines(); 59 self.initOdometers(); 60 self.initTopAnimation(); 61 self.initLazyload(); 62 } else { 63 $('.year-review-2021--very-busy-title').addClass('year-review-2021--very-busy-title__very-visible'); 64 $('.decade-2020-animatable').removeClass('decade-2020-animatable'); 65 $('body').addClass("page-year-in-review-2020__android"); 66 $('.year-review-2021-title--gradient').addClass("year-review-2021-title--gradient__disabled"); 67 $('.year-review-2021-vertical-line--inner').addClass('visible'); 68 $('.year-review-2021--top-wrapper-bg-person--wrapper').addClass('year-review-2021--top-wrapper-bg-person--wrapper__static') 69 $('.year-end-2021--everywhere-reveal').addClass('year-end-2021--everywhere-reveal__no-animation'); 70 } 71 self.init2020Reveal(); 72 self.initMainMenu(); 73 self.initNav(); 74 75 if(globalGetParams.shareanchor) { 76 self.updateUrlHash(globalGetParams.shareanchor); 77 window.scrollTo(0, $("#" + globalGetParams.shareanchor).offset().top - 100 ); 78 if($("#" + globalGetParams.shareanchor).hasClass('year-end-2021--playbutton-area')) { 79 $(window.location.hash).click(); 80 } 81 } 82 83 self.initLinkTracking(); 84 85 $(window).resize(function(){ 86 self.updateCache(); 87 }); 88 89 $(document).ready(function(){ 90 self.updateCache(); 91 }); 92 } 93 94 YearReview2021.prototype.updateCache = function () { 95 window.YearReview2021.cachedPageHeight = $(document).height(); 96 window.YearReview2021.cachedWindowHeight = $(window).height(); 97 window.YearReview2021.cachedOuterWindowWidth = $(window).outerWidth(); 98 window.YearReview2021.cachedOuterWindowHeight = $(window).outerHeight(); 99 } 100 101 YearReview2021.prototype.initMainMenu = function () { 102 var self = this; 103 var anchors = []; 104 var lastHashId = ""; 105 self.startAnchorLoad = new Date().getTime(); 106 $('.year-review-2021--menuitem, .year-review-2021--menuitem-subitem, .year-review-2021--primary-menu-logo').each(function (index) { 107 var $link = $(this).find('a'); 108 if($(this)[0].tagName == "A") { 109 $link = $(this); 110 } 111 var id = $link.attr('href').replace('#', ''); 112 var $el = $('#' + id); 113 if($el.length == 0) { 114 return; 115 } 116 var triggerElement = $el[0]; 117 anchors.push(id); 118 119 self.activeShareImageIndex = 0; 120 121 $(window).scroll(function(){ 122 // special case for beginning 123 if(self.activeShareImageIndex != 0 && $(window).scrollTop() < 700 && !self.videoSelected()) { 124 self.updateUrlHash(anchors[0]); 125 } 126 }) 127 128 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 0.5, reverse: true, duration: 0 }) 129 .on("start", function (event) { 130 var id = $el.attr('id'); 131 var $parent = $('.year-review-2021--menuitem [href="#' + id + '"]').parent(); 132 if($parent.hasClass('year-review-2021--menuitem')) { 133 $('.year-review-2021--menuitem').removeClass('year-review-2021--menuitem__active'); 134 $parent.addClass('year-review-2021--menuitem__active'); 135 self.updateMobileMenu(); 136 } 137 138 if(!self.videoSelected()) { 139 self.updateUrlHash(id); 140 lastHashId = id; 141 } 142 }) 143 144 .on("leave", function (event) { 145 if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 146 var id = $el.attr('id'); 147 var $parent = $('.year-review-2021--menuitem [href="#' + id + '"]').parent() 148 var $prev = $parent.prev(); 149 if($prev.length > 0 && $prev.hasClass('year-review-2021--menuitem')) { 150 $('.year-review-2021--menuitem').removeClass('year-review-2021--menuitem__active'); 151 $prev.addClass('year-review-2021--menuitem__active'); 152 self.updateMobileMenu(); 153 } 154 155 if(!self.videoSelected() && index > 0) { 156 self.updateUrlHash(anchors[index-1]); 157 return; 158 } 159 } 160 if(!self.videoSelected()) { 161 self.updateUrlHash(id); 162 } 163 }) 164 // .addIndicators() // add indicators (requires plugin) 165 .addTo(self.controller); 166 }); 167 if(self.videoSelected()) { 168 self.updateUrlHash(window.location.hash.replace("#", "")); 169 } else if(lastHashId) { 170 self.updateUrlHash(lastHashId); 171 } 172 } 173 174 YearReview2021.prototype.updateMobileMenu = function () { 175 if(!this.isMobile()) { 176 return; 177 } 178 179 // adjust scroll bar position to the selected series 180 var $row = $('.year-review-2021--primary-menu-wrapper'); 181 var $active = $row.find('div.year-review-2021--menuitem__active'); 182 if($row.length > 0 && $active.length > 0) { 183 184 var width = $(window).width(); 185 var left = $active.offset().left + $row.scrollLeft(); 186 187 if($('html').attr('dir') == 'rtl') { 188 var diff = $row[0].scrollWidth + $row.children('.series-selector--show.series-selector--item').last().offset().left; 189 TweenMax.to(window, 3, { 190 scrollTo: { 191 y: $('.year-review-2021-title__large').offset().top - 300, 192 }, 193 ease: Power4.easeInOut, 194 }); 195 // $row.scrollLeft($row[0].scrollWidth+left-diff); 196 } else { 197 TweenMax.to($row, 1, { 198 scrollTo: { 199 x: left - (width - $active.width()) * 0.5, 200 }, 201 ease: Power4.easeInOut, 202 }); 203 // $row.scrollLeft(left - (width - $active.width()) * 0.5); 204 } 205 206 } 207 } 208 209 YearReview2021.prototype.updateUrlHash = function (id) { 210 var anchor = '#' + id; 211 var self = this; 212 history.replaceState(null, null, window.location.pathname + anchor); 213 var $activeShareImage = $('.addthis_button_more--year-2020-images-column [data-anchor="'+anchor+'"]'); 214 var index = $activeShareImage.index(); 215 if(index > -1) { 216 var width = $('.addthis_button_more--year-2020-images-column').width(); 217 var height = width; 218 var additional = 0; 219 220 // for mobile use second element 221 if(!width) { 222 width = $('.at-share__mobile .addthis_button_more--year-2020-images-column').last().width(); 223 height = width / 2 + 12; 224 var mobileHeight = $('.at-share__mobile').height(); 225 if(height < mobileHeight) { 226 additional = (mobileHeight - height) / 2; 227 } 228 } 229 self.activeShareImageIndex = index; 230 TweenMax.set(".addthis_button_more--year-2020-images-column", {y: index * -(height + 8) + additional }) 231 } 232 var menuItem = $('.year-review-2021--primary-menu [href="'+ anchor +'"]'); 233 var title = menuItem.text().trim(); 234 var url = new URL(window.location.href); 235 url.search = "?shareanchor=" + id; 236 url.hash = ""; 237 var link = url.href; 238 this.updateSharingButtons(title, link); 239 } 240 241 YearReview2021.prototype.updateSharingButtons = function (title, link) { 242 $('[data-url]').each(function (index, element) { 243 var $el = $(element); 244 $el.attr('data-title', title); 245 $el.attr('data-url', link); 246 }); 247 this.initShareButtons(); 248 } 249 250 YearReview2021.prototype.videoSelected = function () { 251 var self = this; 252 // disable jumping url hash onload 253 if(new Date().getTime() - self.startAnchorLoad < 3000) { 254 return true; 255 } 256 return window.location.hash != "" && $(window.location.hash).hasClass('year-end-2021--playbutton-area') && 257 $('.modal-full-viewport__2021-year-in-review.visible').length > 0; 258 } 259 260 YearReview2021.prototype.initSharing = function () { 261 var self = this; 262 if (!loadjs.isDefined('addthis')) { 263 loadjs(['//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5a2dd2feddc1f53b'], 'addthis', function() { 264 self.initShareButtons(); 265 }); 266 } else { 267 self.initShareButtons(); 268 } 269 } 270 271 YearReview2021.prototype.initShareButtons = function () { 272 window.addthis && addthis.share({ 273 container_selector: '.at4-share__custom.at4-share', 274 button_selector: '.at4-share__custom.at4-share .at-share-btn', 275 }); 276 window.addthis && addthis.share({ 277 container_selector: '.at4-share__custom.at-share-dock', 278 button_selector: '.at4-share__custom.at-share-dock .at-share-btn', 279 }); 280 window.addthis && addthis.share({ 281 container_selector: '.addthis-video-toolbox', 282 button_selector: '.addthis-video-toolbox .decade-2020-share-button', 283 }); 284 } 285 286 YearReview2021.prototype.initAnchors = function () { 287 if(window.location.hash && $(window.location.hash).hasClass('year-end-2021--playbutton-area')) { 288 $(window.location.hash).click(); 289 } 290 291 $('.year-review-2021--menuitem-subitem a').click(function(){ 292 var href = $(this).attr('href'); 293 if(href && $(href).hasClass('year-end-2021--playbutton-area')) { 294 $(href).click(); 295 } 296 }); 297 } 298 299 YearReview2021.prototype.init2020Reveal = function () { 300 var tl = new TimelineMax(); 301 tl.staggerFromTo(".year-review-2021--year-20", 1, { autoAlpha: 0, scale: 5 }, { autoAlpha: 1, scale: 1, ease: Power4.easeOut }, 0.5 ); 302 tl.fromTo(".year-review-2021--year-subtitle", 0.5, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "-=0.3") 303 tl.fromTo(".year-review-2021--bounce", 0.5, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "-=0.3") 304 305 $('.year-review-2021--bounce').click(function(){ 306 TweenMax.to(window, 3, { 307 scrollTo: { 308 y: $('.year-review-2021-title__large').offset().top - 300, 309 }, 310 ease: Power4.easeInOut, 311 }); 312 }); 313 314 // var self = this; 315 // new ScrollMagic.Scene({ triggerElement: ".year-review-2021--primary-menu-bg", triggerHook: "onLeave", reverse: true, offset: 0, duration: 0 }) 316 // .setClassToggle('.year-review-2021--primary-menu-bg', 'year-review-2021--primary-menu-bg__fixed') 317 // // .addIndicators() // add indicators (requires plugin) 318 // .addTo(self.controller); 319 } 320 321 YearReview2021.prototype.initBgParallax = function () { 322 var self = this; 323 324 var browser = bowser.getParser(window.navigator.userAgent); 325 // only chrome 326 if(!browser.satisfies( 327 { 328 desktop: { 329 chrome: ">1" 330 } 331 }, 332 ) || browser.is("mobile")){ 333 return 334 } 335 336 // var bgTween = TweenMax.to(".year-review-2021-background", 1, { backgroundPosition: "0% -" + Math.round(this.getPageHeight() * 0.05 * 0.5) + "px" }); 337 var bgTween = TweenMax.to(".year-review-2021-background", 1, { backgroundPosition: "0% -" + Math.round(this.getPageHeight()) + "px" }); 338 new ScrollMagic.Scene({ triggerElement: ".year-review-2021--top-wrapper", triggerHook: "onLeave", reverse: true, duration: self.getPageHeight }) 339 .setTween(bgTween) 340 // .addIndicators() // add indicators (requires plugin) 341 .addTo(self.controller); 342 } 343 344 YearReview2021.prototype.getPageHeight = function () { 345 // called from ScrollMagic 346 var self = window.YearReview2021;
347 if(!self.cachedPageHeight) { 348 self.cachedPageHeight = $(document).height(); 349 } 350 return self.cachedPageHeight; 351 } 352 353 YearReview2021.prototype.getWindowHeight = function () { 354 // called from ScrollMagic 355 var self = window.YearReview2021; 356 if(!self.cachedWindowHeight) { 357 self.cachedWindowHeight = $(window).height(); 358 } 359 return self.cachedWindowHeight; 360 } 361 362 YearReview2021.prototype.getWindowOuterWidth = function () { 363 // called from ScrollMagic 364 var self = window.YearReview2021; 365 if(!self.cachedOuterWindowWidth) { 366 self.cachedOuterWindowWidth = $(window).outerWidth(); 367 } 368 return self.cachedOuterWindowWidth; 369 } 370 371 YearReview2021.prototype.getWindowOuterHeight = function () { 372 // called from ScrollMagic 373 var self = window.YearReview2021; 374 if(!self.cachedOuterWindowHeight) { 375 self.cachedOuterWindowHeight = $(window).outerHeight(); 376 } 377 return self.cachedOuterWindowHeight; 378 } 379 380 YearReview2021.prototype.initLinkTracking = function () { 381 $('a').click(function(event) { 382 trackEvent("Link", "Clicked", $(this).attr('href')); 383 }); 384 setTimeout(function(){ 385 EventTracker.trackScroll(); 386 }, 1000); 387 } 388 389 390 YearReview2021.prototype.initPlayer = function () { 391 if ($('.decade-2020--top-wrapper .video-js').length == 0) { 392 return 393 } 394 var ua = navigator.userAgent.toLowerCase(); 395 var isAndroid = ua.indexOf("android") > -1; 396 397 var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1; 398 var options = { 399 nativeControlsForTouch: !is_safari, 400 autoplay: true, 401 controls: true, 402 html5: { 403 nativeAudioTracks: is_safari, 404 nativeVideoTracks: is_safari, 405 hls: { 406 withCredentials: false, 407 overrideNative: !is_safari, 408 }, 409 }, 410 }; 411 412 413 if (isAndroid) { 414 options = { 415 nativeControlsForTouch: false, 416 autoplay: true, 417 controls: true, 418 html5: { 419 nativeAudioTracks: false, 420 nativeVideoTracks: false, 421 hls: { 422 withCredentials: true, 423 overrideNative: true, 424 }, 425 }, 426 }; 427 } 428 429 if (window.location.hash != "") { 430 options.autoplay = false; 431 } 432 433 videojs($('.decade-2020--top-wrapper .video-js')[0], options).ready(function () { 434 EventTracker.trackVideo(this); 435 this.src([{ 436 "src": $('.decade-2020--top-wrapper .video-js').data("videosrc"), 437 "type": "application/x-mpegURL", 438 withCredentials: false, 439 }]); 440 if (options.autoplay) { 441 this.play(); 442 } 443 }); 444 } 445 446 YearReview2021.prototype.initNav = function () { 447 var self = this; 448 $('.year-review-2021-nav__up').click(function () { 449 window.history.replaceState( {} , '', "#"); 450 if (self.prevInset()) { 451 return; 452 } 453 454 if (typeof self.activeStepIndex == "undefined") { 455 var index = 0; 456 } else { 457 var index = self.activeStepIndex - 1; 458 } 459 if (self.scrollToIndex > -1) { 460 index = self.scrollToIndex - 1; 461 } 462 463 var $lastInset = self.getLastInsetFor(index); 464 if ($lastInset) { 465 self.scrollToElement($lastInset); 466 } else { 467 self.jumpToOrg(index); 468 } 469 470 }); 471 472 $('.year-review-2021-nav__down').click(function () { 473 window.history.replaceState( {} , '', "#"); 474 if (self.nextInset()) { 475 return; 476 } 477 if (typeof self.activeStepIndex == "undefined") { 478 var index = 0; 479 } else { 480 var index = self.activeStepIndex + 1; 481 } 482 if (self.scrollToIndex > -1) { 483 index = self.scrollToIndex + 1; 484 } 485 self.jumpToOrg(index); 486 }); 487 } 488 489 490 YearReview2021.prototype.getLastInsetFor = function (index) { 491 var $container = $('.year-review-2021-step[data-id=' + index + ']'); 492 if ($container.length == 0) { 493 return false;
494 } 495 return $container.last(); 496 } 497 498 YearReview2021.prototype.prevInset = function () { 499 var self = this; 500 var $insets = $('.year-review-2021-step:not(.d-none)'); 501 if ($insets.length == 0) { 502 return false; 503 } 504 var $activeInset; 505 var activeInsetIndex = -1; 506 var scrollTop = $(window).scrollTop(); 507 508 $insets.each(function (index, inset) { 509 var $inset = $(inset); 510 if ($inset.offset().top + 200 < scrollTop) { 511 $activeInset = $inset; 512 activeInsetIndex = index; 513 } 514 }); 515 516 var $target; 517 518 // did not scroll past first inset, go to it 519 if (activeInsetIndex == -1) { 520 // $target = $($insets[0]); 521 return false; 522 } else if (activeInsetIndex == 0) { 523 $target = $('.year-review-2021-step').first(); 524 } else if (activeInsetIndex - 1 < 0) { 525 return false; 526 } else { 527 $target = $($insets[activeInsetIndex]); 528 } 529 530 self.scrollToElement($target); 531 532 return true; 533 } 534 535 YearReview2021.prototype.nextInset = function () { 536 var self = this; 537 var $insets = $('.year-review-2021-step:not(.d-none)'); 538 if ($insets.length == 0) { 539 return false; 540 } 541 var $activeInset; 542 var activeInsetIndex = 0; 543 var scrollTop = $(window).scrollTop(); 544 545 $insets.each(function (index, inset) { 546 var $inset = $(inset); 547 if ($inset.offset().top - 200 < scrollTop) { 548 $activeInset = $inset; 549 activeInsetIndex = index; 550 } 551 }); 552 553 var $target; 554 555 // did not scroll past first inset, go to it 556 if (!$activeInset) { 557 $target = $($insets[0]); 558 } else if (activeInsetIndex + 1 >= $insets.length) { 559 return false; 560 } else { 561 $target = $($insets[activeInsetIndex + 1]); 562 } 563 564 self.scrollToElement($target); 565 566 return true; 567 } 568 569 570 YearReview2021.prototype.scrollToElement = function (el) { 571 var self = this; 572 if (self.lastScrollAnimation) { 573 self.lastScrollAnimation.pause(); 574 } 575 576 console.log('offset', el.offset().top); 577 578 self.lastScrollAnimation = TweenMax.to(window, 2, { 579 scrollTo: { 580 y: el.offset().top - 66, 581 }, 582 ease: Power4.easeInOut, 583 }); 584 } 585 586 587 YearReview2021.prototype.initRevealAnimation = function () { 588 var self = this; 589 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--everywhere-reveal', triggerHook: 'onLeave', reverse: true, duration: "220%" }) 590 .setPin('.year-end-2021--everywhere-reveal', { 591 pushFollowers: false, 592 }) 593 // .addIndicators() // add indicators (requires plugin) 594 .addTo(self.controller); 595 596 // Background 597 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--everywhere-reveal-bg', triggerHook: 'onLeave', reverse: true, duration: "500%" }) 598 .setPin('.year-end-2021--everywhere-reveal-bg', { 599 pushFollowers: false, 600 }) 601 // .addIndicators() // add indicators (requires plugin) 602 .addTo(self.controller); 603 604 var tl = new TimelineMax(); 605 606 var earthScale = 0.3; 607 var endEarthScale = 1.2; 608 if(self.isMobile()) { 609 earthScale = 0.7; 610 endEarthScale = 1.8; 611 } 612 613 tl.fromTo('.year-end-2021--everywhere-reveal-content', 0.3, { scale: 0.3 }, { scale: 450, x: "-300%", ease: CustomEase.create("custom", superEaseIN) }, '0'); 614 tl.fromTo('.year-end-2021--everywhere-earth-bg', 0.3, { scale: earthScale }, { scale: endEarthScale }, '0'); 615 tl.fromTo('.year-end-2021--everywhere-reveal-bg', 0.3, { scale: 1 }, { scale: 1.1 }, '0'); 616 617 tl.to('.year-end-2021--everywhere-reveal-glow', 0.1, { autoAlpha: 0 }, '0.2' ); 618 tl.fromTo('.year-end-2021--everywhere-bg', 0.2, { autoAlpha: 0 }, { autoAlpha: 1 }, '0.1' ); 619 620 tl.to('.year-end-2021--everywhere-reveal', 0.3, { autoAlpha: 0 }, '0.3' ); 621 622 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--everywhere-reveal', triggerHook: 'onLeave', reverse: true, duration: "200%" }) 623 .setTween(tl) 624 // .on("progress", function (event) { 625 // console.log('event.progress', event.progress); 626 // }) 627 .addTo(self.controller); 628 629 var fadeIn = TweenMax.from(".year-end-2021--everywhere-counter", 0.25, { autoAlpha: 0, y: 100 }); 630 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--everywhere-reveal-trigger', triggerHook: 'onEnter', reverse: true, duration: 0, offset: 200 }) 631 .setTween(fadeIn) 632 // .setClassToggle('.year-end-2021--everywhere-counter', 'year-end-2021--everywhere-counter__fixed') 633 .on("start", function (event) { 634 if(event.state == "BEFORE") { 635 $('.year-end-2021--everywhere-counter-primary').removeClass('year-end-2021--everywhere-counter__fixed'); 636 } else { 637 $('.year-end-2021--everywhere-counter-primary').addClass('year-end-2021--everywhere-counter__fixed'); 638 } 639 }) 640 // .on("progress", function (event) { 641 // console.log('event.progress', event.progress); 642 // }) 643 .addTo(self.controller); 644 645 // new Odometer({ 646 // el: $('.year-end-2021--everywhere-counter-number counter')[0], 647 // format: $('.year-end-2021--everywhere-counter-number').data('format') || 'd', 648 // }); 649 650 var maxOdomoterNumber = parseInt($('.year-end-2021--everywhere-counter-number').data('number')); 651 652 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--everywhere-reveal-trigger2', triggerHook: 1, reverse: true, duration: 0, offset: 20 }) 653 .on("start", function (event) { 654 if(event.state == "BEFORE") { 655 $('.year-end-2021--everywhere-counter-primary').addClass('year-end-2021--everywhere-counter__fixed'); 656 } else { 657 $('.year-end-2021--everywhere-counter-primary').removeClass('year-end-2021--everywhere-counter__fixed'); 658 } 659 }) 660 .addTo(self.controller); 661 var language = $('html').attr('lang'); 662 var countDownFormat = $('.end-2021--everywhere-counter-number').first().data('format') || "dd,ddd,ddd"; 663 if(language==("de-DE") || language==("da-DK") || language==("el-GR") || language==("it-IT") || language==("nl-NL")) { 664 var countDownFormat = $('.end-2021--everywhere-counter-number').first().data('format') || "dd.ddd.ddd"; 665 } 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")) { 666 var countDownFormat = $('.end-2021--everywhere-counter-number').first().data('format') || "dd ddd ddd"; 667 } 668 669 var odometerDuration = "250%"; 670 if(self.isMobile()) { 671 odometerDuration = "100%"; 672 } 673 674 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--everywhere-churches-trigger', triggerHook: 'onEnter', reverse: true, duration: odometerDuration }) 675 .on("start", function (event) { 676 $('.year-end-2021--everywhere-counter-number counter').css('visibility', 'visible'); 677 if(event.state == "BEFORE") { 678 $('.year-end-2021--everywhere-counter-number counter').html("0"); 679 } else { 680 $('.year-end-2021--everywhere-counter-number counter').html(maxOdomoterNumber); 681 } 682 }) 683 .on("progress", function (event) {
684 var current = Math.ceil(maxOdomoterNumber * event.progress).toString(); 685 var numberIndex = current.length - 1; 686 var counterNumber = ""; 687 for (var index = countDownFormat.length - 1; index >= 0 && numberIndex >= 0; index--) { 688 var character = countDownFormat[index]; 689 if(character == "d") { 690 counterNumber = current[numberIndex] + counterNumber; 691 numberIndex -- ; 692 } else { 693 counterNumber = character + counterNumber; 694 } 695 } 696 $('.year-end-2021--everywhere-counter-number counter').html(counterNumber); 697 }) 698 .addTo(self.controller); 699 } 700 701 YearReview2021.prototype.initOdometers = function () { 702 var self = this; 703 704 $('[data-odomerter] counter').each(function () { 705 var $odom = $(this).css('visibility', 'hidden'); 706 $odom.attr('data-number', $odom.text()); 707 $odom.text('1'); 708 new Odometer({ 709 el: this, 710 format: $odom.closest('[data-odomerter]').data('format') || 'd', 711 }); 712 713 var $el = $(this); 714 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: true, offset: 50, duration: 1 }) 715 .on("start", function (event) { 716 $el.css('visibility', 'visible'); 717 if(event.state == "BEFORE") { 718 $el.text(''); 719 } else { 720 $el.html($el.attr('data-number')); 721 } 722 }) 723 // .setTween(tween) 724 // .addIndicators() // add indicators (requires plugin) 725 .addTo(self.controller); 726 }); 727 728 $('.year-review-2021--spread-a-smile-stat counter').each(function () { 729 var $el = $(this); 730 var maxNumber = parseInt($el.text().replace(new RegExp(",", 'g'), "")); 731 var currentNumber = maxNumber - 1000; 732 733 var counter = new window.countUp.CountUp(this, maxNumber, { 734   startVal: currentNumber, 735  duration: 300, 736 separator: $el.closest(".year-review-2021--spread-a-smile-stat").data("separator"), 737 }); 738 739 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: false, offset: 100, duration: 1 }) 740 .on("start", function (e) { 741 counter.start(); 742 $el.css('visibility', 'visible'); 743 }) 744 // .addIndicators() // add indicators (requires plugin) 745 .addTo(self.controller); 746 }); 747 } 748 749 YearReview2021.prototype.initWebsiteFrame = function () { 750 var self = this; 751 new ScrollMagic.Scene({ triggerElement: ".year-end-2021--website", triggerHook: "onEnter", reverse: true, offset: 200, duration: 0 }) 752 .setClassToggle('.year-end-2021--website', 'year-end-2021--website__draw') 753 // .addIndicators() // add indicators (requires plugin) 754 .addTo(self.controller); 755 756 } 757 758 YearReview2021.prototype.initCastleParallax = function () { 759 var self = this; 760 if (self.isMobile()) { 761 return; 762 } 763 var self = this; 764 var bgTween = TweenMax.to(".year-review-2021--vm-castle--bg", 1, { backgroundPosition: "50% -200px" }); 765 new ScrollMagic.Scene({ triggerElement: ".year-review-2021--vm-castle", triggerHook: "onLeave", reverse: true, duration: "100%" }) 766 .setTween(bgTween) 767 // .addIndicators() // add indicators (requires plugin) 768 .addTo(self.controller); 769 } 770
771 YearReview2021.prototype.initBackgroundParallax = function () { 772 var self = this; 773 $('.year-review-2021--bg-parallax').each(function () { 774 var bgTween = TweenMax.to(this, 1, { y: -200 }); 775 // var bgTween = TweenMax.to(this, 1, { y: -200 }); 776 new ScrollMagic.Scene({ triggerElement: this, triggerHook: "onEnter", reverse: true, duration: "300%" }) 777 .setTween(bgTween) 778 // .addIndicators() // add indicators (requires plugin) 779 .addTo(self.controller); 780 }); 781 } 782 783 YearReview2021.prototype.initTopAnimation = function () { 784 var self = this; 785 786 if(self.topBgScenes) { 787 for (var index = 0; index < self.topBgScenes.length; index++) { 788 var scene = self.topBgScenes[index]; 789 scene.progress(0) 790 scene.destroy(); 791 } 792 } else { 793 $(window).resize(function(){ 794 self.initTopAnimation(); 795 }); 796 } 797 console.log('initTopAnimation'); 798 self.topBgScenes = []; 799 800 var bgTween = TweenMax.to(".year-review-2021--top-wrapper-bg-person", 1, { y: -1 * self.getWindowHeight() * 0.5 }); 801 self.topBgScenes.push( 802 new ScrollMagic.Scene({ triggerElement: ".year-review-2021--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 803 .setTween(bgTween) 804 .addTo(self.controller) 805 ); 806 807 808 809 var element = document.querySelector('.year-review-2021-title--gradient'); 810 var tween = TweenMax.fromTo(element, 1, 811 { 812 css: { 813 '--gradient-progress': "-100%", 814 '--gradient-progress-2': "0%", 815 } 816 }, 817 { 818 css: { 819 '--gradient-progress': "90%", 820 '--gradient-progress-2': "200%", 821 } 822 } 823 ); 824 self.topBgScenes.push( 825 new ScrollMagic.Scene({ triggerElement: element, triggerHook: "onEnter", reverse: true, duration: "100%" }) 826 .setTween(tween) 827 // .addIndicators() // add indicators (requires plugin) 828 .addTo(self.controller) 829 );; 830 831 832 if(!self.topPinInited){ 833 var h1Tween = TweenMax.to(".year-review-2021-title-h1-wrapper", 1, { y: -300 }); 834 self.topBgScenes.push( 835 new ScrollMagic.Scene({ triggerElement: ".year-review-2021--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 836 .setTween(h1Tween) 837 // .addIndicators() // add indicators (requires plugin) 838 .addTo(self.controller) 839 ); 840 841 new ScrollMagic.Scene({ 842 triggerElement: ".year-review-2021--top-wrapper-bg-person-trigger", 843 triggerHook: 'onLeave', 844 duration: "150%", 845 }) 846 .setPin(".year-review-2021-title-h1-wrapper", { 847 pushFollowers: false, 848 }) 849 // .addIndicators() // add indicators (requires plugin) 850 .addTo(self.controller); 851 852 var tlRideWave = new TimelineMax(); 853 tlRideWave.staggerFrom(".year-review-2021--rode-a-wave", 0.8, { y: 100, autoAlpha: 0 }, "0.3"); 854 tlRideWave.from(".year-review-2021--rode-a-wave-image", 0.5, { y: 100, autoAlpha: 0 }, "-=0.1"); 855 new ScrollMagic.Scene({ triggerElement: '.year-review-2021-top-fadeout-trigger', triggerHook: "onCenter", offset: 200, reverse: true, duration: 200 }) 856 .setTween(tlRideWave) 857 .on("destroy", function (event) { 858 tlRideWave.progress(0); 859 }) 860 // .addIndicators() // add indicators (requires plugin) 861 .addTo(self.controller); 862 863 self.topPinInited = true; 864 } 865 866 } 867 868 YearReview2021.prototype.initLRHQuoteAnimation = function () { 869 var self = this; 870 871 var tl = new TimelineMax(); 872 tl.fromTo($('.year-review-2021--flare__top'), 2, { x: "100%", autoAlpha: 0 }, { x: "-100%", autoAlpha: 1 }); 873 tl.fromTo($('.year-end-2021--ounce-quote'), 2, { scale: 0.5, autoAlpha: 0 }, { scale: 1, autoAlpha: 1 }, "0.2"); 874 tl.fromTo($('.year-review-2021--flare__bottom'), 2, { x: "-100%", autoAlpha: 0 }, { x: "0%", autoAlpha: 1 }, "0.3"); 875 tl.fromTo($('.year-end-2021--ounce-author'), 2, { autoAlpha: 0 }, { autoAlpha: 1 }, "-=0.2"); 876 877 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--ounce-quote', triggerHook: 1, reverse: true, offset: 100, duration: 0 }) 878 .setTween(tl) 879 // .setClassToggle('.decade-2020-large-title__years', 'visible') 880 // .addIndicators() // add indicators (requires plugin) 881 .addTo(self.controller); 882 } 883 884 YearReview2021.prototype.initGrowingLines = function () { 885 var self = this; 886 887 $('.year-review-2021-vertical-line--inner').each(function () { 888 var $el = $(this); 889 var tween = TweenMax.from(this, 0.7, { scaleY: 0 }); 890 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: true, offset: 80, duration: 0 }) 891 .setTween(tween) 892 .setClassToggle(this, 'visible') 893 // .addIndicators() // add indicators (requires plugin) 894 .addTo(self.controller); 895 }); 896 } 897 898 899 YearReview2021.prototype.initLazyload = function () { 900 //add simple support for background images: 901 document.addEventListener('lazybeforeunveil', function(e){ 902 var bg = e.target.getAttribute('data-bg'); 903 if(bg){ 904 e.target.style.backgroundImage = 'url(' + bg + ')'; 905 } 906 }); 907 } 908 909 YearReview2021.prototype.initParallax = function () { 910 var self = this; 911 912 _.each($('.year-end-2021---parallax'), function (element, index) { 913 var offset = element.getAttribute('data-parallax-offset'); 914 915 if (self.isMobile() && element.getAttribute('data-parallax-offset-mobile')) { 916 offset = element.getAttribute('data-parallax-offset-mobile'); 917 } 918 919 var startOffset = 0; 920 if(element.getAttribute("data-start-offset")) { 921 startOffset = parseInt(element.getAttribute("data-start-offset")); 922 } 923 924 if(element.getAttribute("data-start-offset-mobile") && self.isMobile()) { 925 startOffset = parseInt(element.getAttribute("data-start-offset-mobile")); 926 } 927 928 var tween = TweenMax.to(element.querySelector('img'), 0.5, { y: offset }); 929 new ScrollMagic.Scene({ triggerElement: element, triggerHook: 0.5, offset: startOffset, reverse: true, duration: self.getWindowHeight }) 930 .setTween(tween) 931 // .addIndicators() // add indicators (requires plugin) 932 .addTo(self.controller); 933 }); 934 } 935 936 YearReview2021.prototype.initOrgSwipe = function () { 937 // get all slides 938 var slides = document.querySelectorAll(".year-end-2021--fogging-every-where"); 939 940 var self = this; 941 942 if(self.isMobile() || self.isAndroid() || self.isIpod()) { 943 $('body').addClass('year-in-review-2020__org-reveal-disabled') 944 return; 945 } 946 self.updateCache(); 947 948 new ScrollMagic.Scene({ 949 triggerElement: ".year-end-2021--fogging-every-where-container__pin", 950 triggerHook: 'onLeave', 951 duration: (slides.length - 1) * 100 + "%", 952 })
953 .setPin(".year-end-2021--fogging-every-where-container__pin", { 954 pushFollowers: true, 955 }) 956 // .addIndicators() // add indicators (requires plugin) 957 .addTo(self.controller) 958 959 $('.year-end-2021--fogging-every-where-container__filler').remove(); 960 961 // create scene for every slide 962 for (var i=1; i<slides.length; i++) { 963 var tween = function(){ 964 var $slide = $(slides[i]); 965 var progress = {value : 0}; 966 return TweenMax.fromTo(progress, 1, { 967 value: 0 968 },{ 969 value: 1, 970 onUpdate: function(){ 971 var top = self.calcClipProgress(self.cachedOuterWindowHeight, 0, progress.value); 972 $slide.css("clip", "rect("+top+"px,"+self.getWindowOuterWidth()+"px," + self.getWindowOuterHeight() + "px,0px)") 973 } 974 }); 975 }(); 976 977 new ScrollMagic.Scene({ 978 triggerElement: ".year-end-2021--fogging-every-where-container__pin", 979 triggerHook: 'onLeave', 980 duration: "100%", 981 offset: (i-1) * self.cachedOuterWindowHeight, 982 }) 983 .setTween(tween) 984 // .addIndicators() // add indicators (requires plugin) 985 .addTo(self.controller) 986 } 987 } 988 989 YearReview2021.prototype.calcClipProgress = function (start, end, progress) { 990 return start * (1-progress) + end * progress; 991 } 992 993 YearReview2021.prototype.initZoomText = function () { 994 var self = this; 995 $('.year-end-2021--zoomedin').each(function () { 996 var tween = TweenMax.from($(this).find('span'), 0.75, { autoAlpha: 0, scale: 3, ease: Power4.easeOut }); 997 var triggerElement = this; 998 999 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 'onEnter', offset: 200, reverse: true, duration: 0 }) 1000 .setTween(tween) 1001 .setClassToggle(this, 'visible') 1002 .addTo(self.controller); 1003 }); 1004 } 1005 YearReview2021.prototype.initFloats = function () { 1006 var self = this; 1007 1008 $('.year-end-2021--float-bottom').each(function () { 1009 var $el = $(this); 1010 var yOffset = 50; 1011 var xOffset = 0; 1012 var offset = 100; 1013 var duration = 0.5; 1014 var delay = 0; 1015 var triggerElement = this; 1016 1017 if (typeof $el.data('trigger') != "undefined") { 1018 triggerElement = $el.data('trigger'); 1019 } 1020 if (typeof $el.data('yoffset') != "undefined") { 1021 yOffset = $el.data('yoffset'); 1022 } 1023 if (typeof $el.data('xoffset') != "undefined") { 1024 xOffset = $el.data('xoffset'); 1025 } 1026 if (typeof $el.data('offset') != "undefined") { 1027 offset = $el.data('offset'); 1028 } 1029 if (typeof $el.data('duration') != "undefined") { 1030 duration = $el.data('duration'); 1031 } 1032 if (typeof $el.data('delay') != "undefined") { 1033 delay = $el.data('delay'); 1034 } 1035 1036 var tween = TweenMax.from(this, duration, { delay: delay, y: yOffset, x: xOffset, autoAlpha: 0, ease: Power4.easeOut }); 1037 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 1038 .setTween(tween) 1039 .setClassToggle(this, 'visible') 1040 // .addIndicators() // add indicators (requires plugin) 1041 .addTo(self.controller); 1042 }); 1043 1044 $('.year-end-2021--scroll-fade').each(function () { 1045 var $el = $(this); 1046 var yOffset = 50; 1047 var xOffset = 0; 1048 var offset = 100; 1049 var duration = 0.5; 1050 var triggerElement = this; 1051 1052 if (typeof $el.data('trigger') != "undefined") { 1053 triggerElement = $el.data('trigger'); 1054 } 1055 if (typeof $el.data('yoffset') != "undefined") { 1056 yOffset = $el.data('yoffset'); 1057 } 1058 if (typeof $el.data('xoffset') != "undefined") { 1059 xOffset = $el.data('xoffset'); 1060 } 1061 if (typeof $el.data('offset') != "undefined") { 1062 offset = $el.data('offset'); 1063 } 1064 if (typeof $el.data('duration') != "undefined") { 1065 duration = $el.data('duration'); 1066 } 1067 1068 1069 var tween = TweenMax.from($el.find('.year-end-2021--scroll-fade--inner'), 1, { y: 0, x: xOffset, autoAlpha: 0, ease: Power4.easeOut }); 1070 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: "50%" }) 1071 .setTween(tween) 1072 // .setClassToggle(this, 'visible') 1073 // .addIndicators() // add indicators (requires plugin) 1074 // .on("progress", function (event) { 1075 // // VERY busy 1076 // if(event.progress > 0.2 && $veryBusyText.length > 0) { 1077 // TweenMax.to($veryBusyText, 0.8, {fontSize: "80px", ease: CustomEase.create("custom", yearBounceEase)} ); 1078 // } 1079 // }) 1080 .addTo(self.controller); 1081 1082 var tween2 = TweenMax.to(this, 1, { y: yOffset, x: xOffset, autoAlpha: 0, ease: Power4.easeOut }); 1083 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 0.5, reverse: true, offset: offset, duration: "30%" }) 1084 .setTween(tween2) 1085 // .addIndicators() // add indicators (requires plugin) 1086 .addTo(self.controller); 1087 }); 1088 1089 var $vebyBusyEl = $('.year-review-2021--very-busy-title'); 1090 var $veryBusyText = $vebyBusyEl.find('span'); 1091 1092 var fontSize = "80px"; 1093 if(self.isMobile()) { 1094 fontSize = "40px"; 1095 } 1096 var veryTween = TweenMax.to($veryBusyText, 0.8, {fontSize: fontSize, autoAlpha: 1, ease: CustomEase.create("custom", yearBounceEase)} ); 1097 new ScrollMagic.Scene({ triggerElement: $vebyBusyEl[0], triggerHook: 'onCenter', reverse: true, offset: 0, duration: 0 }) 1098 .setTween(veryTween) 1099 .addTo(self.controller); 1100 1101 1102 var tween = TweenMax.from($vebyBusyEl, 1, { autoAlpha: 0, ease: Power4.easeOut }); 1103 new ScrollMagic.Scene({ triggerElement: $vebyBusyEl[0], triggerHook: 'onCenter', reverse: true, offset: 0, duration: "50%" }) 1104 .setTween(tween) 1105 .addTo(self.controller); 1106 1107 $('.decade-2020-scalable-bounce').each(function () { 1108 var $el = $(this); 1109 var scale = 1.5; 1110 var offset = 100; 1111 var duration = 0.5; 1112 1113 if (typeof $el.data('scale') != "undefined") { 1114 scale = $el.data('scale'); 1115 } 1116 if (typeof $el.data('offset') != "undefined") { 1117 offset = $el.data('offset'); 1118 } 1119 if (typeof $el.data('duration') != "undefined") { 1120 duration = $el.data('duration'); 1121 } 1122 1123 var tween = TweenMax.from($el.find('.inner'), duration, { scale: scale, autoAlpha: 0, ease: Bounce.easeOut }); 1124 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 1125 .setTween(tween) 1126 .setClassToggle(this, 'visible') 1127 // .addIndicators() // add indicators (requires plugin) 1128 .addTo(self.controller); 1129 }); 1130 1131 $('.decade-2020-scalable').each(function () { 1132 var $el = $(this); 1133 var scale = 1.5; 1134 var offset = 100; 1135 var duration = 0.5; 1136 var triggerElement = this; 1137 1138 if (typeof $el.data('trigger') != "undefined") { 1139 triggerElement = $el.data('trigger'); 1140 } 1141 if (typeof $el.data('scale') != "undefined") { 1142 scale = $el.data('scale'); 1143 } 1144 if (typeof $el.data('offset') != "undefined") { 1145 offset = $el.data('offset'); 1146 } 1147 if (typeof $el.data('duration') != "undefined") { 1148 duration = $el.data('duration'); 1149 } 1150 1151 var tween = TweenMax.from($el.find('.inner'), duration, { scale: scale, autoAlpha: 0, ease: Power4.easeOut }); 1152 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 1153 .setTween(tween) 1154 .setClassToggle(this, 'visible') 1155 // .addIndicators() // add indicators (requires plugin) 1156 .addTo(self.controller); 1157 }); 1158 1159 } 1160 1161 YearReview2021.prototype.isMobile = function () { 1162 return $(window).width() < 767; 1163 } 1164 1165 YearReview2021.prototype.isAndroid = function () { 1166 var ua = navigator.userAgent.toLowerCase(); 1167 var isAndroid = ua.indexOf("android") > -1; 1168 return isAndroid; 1169 } 1170 1171 YearReview2021.prototype.isIpod = function () { 1172 var ua = navigator.userAgent.toLowerCase(); 1173 var isIpod = ua.indexOf("iPod") > -1; 1174 return isIpod; 1175 } 1176 1177 1178 1179 YearReview2021.prototype.initPosterSlideshow = function () { 1180 var self = this; 1181 new ScrollMagic.Scene({ triggerElement: '.year-end-2021--poster-autoplay', triggerHook: 'onEnter', reverse: true, offset: 100, duration: 1 }) 1182 .on("start", function (event) { 1183 if(event.state == "BEFORE") { 1184 self.stopPosterSlideshow(); 1185 } else { 1186 self.startPosterSlideshow(); 1187 } 1188 }) 1189 // .addIndicators() // add indicators (requires plugin) 1190 .addTo(self.controller); 1191 } 1192 1193 YearReview2021.prototype.startPosterSlideshow = function () { 1194 this.stopPosterSlideshow(); 1195 this.posterSlideshowInterval = setInterval(function(){ 1196 var $active = $('.year-end-2021--poster-autoplay-image__active'); 1197 if($active.length > 0) { 1198 1199 } else { 1200 $active = $('.year-end-2021--poster-autoplay-image').first(); 1201 } 1202 1203 $active = $active.next(); 1204 $('.year-end-2021--poster-autoplay-image__active').removeClass('year-end-2021--poster-autoplay-image__active').addClass('d-none'); 1205 $active.addClass('year-end-2021--poster-autoplay-image__active').removeClass('d-none');; 1206 }, 1000); 1207 } 1208 1209 YearReview2021.prototype.stopPosterSlideshow = function () { 1210 if(this.posterSlideshowInterval) { 1211 clearInterval(this.posterSlideshowInterval); 1212 } 1213 } 1214 1215 YearReview2021.prototype.insetAutoplay = function (index) { 1216 var self = this; 1217 1218 var $container = $('.decade-2020-opening--church-container[data-id=' + index + ']'); 1219 var $insets = $container.find('.decade-2020-opening--insets'); 1220 if ($insets.length == 0) { 1221 return 0; 1222 } 1223 var totalInsetTime = 5000; 1224 var insetTime = 3000; 1225 1226 self.insetTimers = []; 1227 $insets.each(function (index, inset) { 1228 var $inset = $(inset); 1229 self.insetTimers.push(setTimeout(function () { 1230 self.lastScrollAnimation = TweenMax.to(window, 2, { 1231 scrollTo: { 1232 y: $inset.offset().top - 66, 1233 }, 1234 ease: Power4.easeInOut, 1235 }); 1236 }, insetTime + index * totalInsetTime)); 1237 }); 1238 1239 return (0.5 + $insets.length) * totalInsetTime; 1240 } 1241 1242 YearReview2021.prototype.stopOrgAutoPlay = function (index) { 1243 var self = this; 1244 1245 if (self.insetTimers) {
1246 self.insetTimers.forEach(function (timer) { 1247 clearTimeout(timer); 1248 }); 1249 } 1250 1251 if (self.autoplayInterval) { 1252 clearInterval(self.autoplayInterval); 1253 self.autoplayInterval = null; 1254 } 1255 $('.decade-2020--churches-nav__up, .decade-2020--churches-nav__down').removeClass('decade-2020--churches-nav_disabled'); 1256 $('.decade-2020--churches-nav__play').removeClass('decade-2020--churches-nav__autoplaying'); 1257 } 1258 1259 YearReview2021.prototype.jumpToOrg = function (index) { 1260 var self = this; 1261 var $container = $(".year-review-2021-step[data-id=" + (index+1) + "]"); 1262 1263 if ($container.length == 0) { 1264 return; 1265 } 1266 1267 if (self.lastScrollAnimation) { 1268 self.lastScrollAnimation.pause(); 1269 } 1270 1271 var duration = 1; 1272 if (this.autoplayInterval != null) { 1273 duration = 3; 1274 } 1275 1276 self.lastScrollAnimation = TweenMax.to(window, duration, { 1277 scrollTo: { 1278 y: $container.offset().top - 66, 1279 }, 1280 ease: Power4.easeInOut, 1281 onComplete: function () { 1282 if (index >= 0) { 1283 self.activeStepIndex = index; 1284 } 1285 self.scrollToIndex = -1; 1286 } 1287 }); 1288 1289 self.scrollToIndex = index; 1290 this.lastScrollTs = new Date().getTime(); 1291 } 1292 1293 1294 YearReview2021.prototype.videoBG = function () { 1295 var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);; 1296 return iOS == false; 1297 } 1298 1299 YearReview2021.prototype.initSliderImages = function () { 1300 var self = this; 1301 var height = $(window).height() * 2; 1302 $('.year-end-2021--staywell-images').each(function () { 1303 var $row = $(this); 1304 var tween = TweenMax.fromTo(this, 0.7, { x: $row.data('start-x') }, { x: $row.data('end-x') }); 1305 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 'onEnter', reverse: true, duration: height }) 1306 .setTween(tween) 1307 // .addIndicators() // add indicators (requires plugin) 1308 .addTo(self.controller); 1309 }); 1310 1311 $('.year-review-2021--artists').each(function () { 1312 var offsetX = -300; 1313 if($(this).data('reverse')) { 1314 offsetX *= -1; 1315 } 1316 var tween = TweenMax.to(this, 1, { x: offsetX }); 1317 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 'onEnter', reverse: true, duration: "200%" }) 1318 .setTween(tween) 1319 .addTo(self.controller); 1320 }); 1321 } 1322 1323 YearReview2021.prototype.initOrgVideo = function (el) { 1324 var self = this; 1325 1326 var $el = $(el); 1327 if ($el.find('.decade-2020-opening--video.decade-2020-opening--video__inited').length > 0) { 1328 return; 1329 } 1330 1331 var videoWrapper = el.querySelector('.decade-2020-opening--video'); 1332 videoWrapper.classList.add("decade-2020-opening--video__inited"); 1333 1334 // Poster fallback 1335 if (!self.videoBG()) { 1336 videoWrapper.classList.add("decade-2020-opening--video-bg-only"); 1337 videoWrapper.setAttribute("style", "background-image: url('" + $el.data('opening-image-background') + "')"); 1338 $el.append(videoWrapper); 1339 return; 1340 } 1341 1342 var videoEl = document.createElement('video'); 1343 videoEl.setAttribute('muted', 'true'); 1344 $(videoWrapper).append(videoEl); 1345 1346 $el.append(videoWrapper); 1347 var src = $el.data('opening-video'); 1348 videojs(videoEl, { controls: false, muted: true }).ready(function () { 1349 this.src([ 1350 { src: src + '.webm', type: 'video/webm; codecs="vp9"' }, 1351 { src: src + '-h265.mp4', type: 'video/mp4; codecs="hvc1"' }, 1352 { src: src + '.mp4', type: 'video/mp4; codecs="avc1"' } 1353 ]); 1354 this.pause(); 1355 videos[src] = this; 1356 }); 1357 } 1358 1359 YearReview2021.prototype.initVideos = function () { 1360 var videoPlayer; 1361 var self = this; 1362 1363 $('.year-review-2021--back').click(function(){ 1364 $('.modal-full-viewport .close').click(); 1365 }); 1366 1367 $('.year-end-2021--playbutton-area').click(function(){ 1368 var $modal = $('.modal-full-viewport').first() 1369 $modal.addClass('visible'); 1370
1371 TweenMax.from($modal, 0.75, {scale: 0.9, autoAlpha: 0, ease: Power4.easeOut}); 1372 1373 var options = jQuery.extend({}, videoOptions); 1374 options.controls = true; 1375 options.poster = $(this).data('videoposter'); 1376 options.sources = $(this).data('videosrc'); 1377 1378 if($(this).attr('id')) { 1379 window.history.replaceState( {} , '', '#' + $(this).attr('id') ); 1380 trackEvent("Video", "Play", $(this).attr('id')); 1381 } 1382 1383 var $el = $(this); 1384 1385 var showyoutube = false; 1386 if($el.data('youtube')) { 1387 // ad 1388 if($el.data("youtube") == "FiW5kejelns" && globalLang == "en") { 1389 showyoutube = true; 1390 } else { 1391 showyoutube = true; 1392 } 1393 } 1394 1395 $('.modal-youtube-embed--inited').remove(); 1396 1397 if(showyoutube) { 1398 $modal.find('.modal-youtube-embed').clone().prependTo($modal.find('.modal-video-wrapper')).addClass('modal-youtube-embed--inited'); 1399 var src = $('.modal-youtube-embed--inited iframe').attr('data-src').replace(/YOUTUBE_ID/g, $el.data('youtube')); 1400 $('.modal-youtube-embed--inited').removeClass('d-none'); 1401 $('.modal-youtube-embed--inited iframe').attr('src', src); 1402 return; 1403 } 1404 // https://www.youtube.com/watch?v=FiW5kejelns 1405 1406 $modal.find('.modal-player').clone().prependTo($modal.find('.modal-video-wrapper')); 1407 1408 $('.year-review-2021-nav').hide(); 1409 1410 videojs($modal.find('.video-js')[0], options).ready(function(){ 1411 if(VideoPlayerHotkeys) { 1412 VideoPlayerHotkeys.player = this; 1413 } 1414 EventTracker.trackVideo(this); 1415 this.play(); 1416 self.videoPlayers = self.videoPlayers || []; 1417 self.videoPlayers.push(this); 1418 }); 1419 1420 var url = new URL(window.location.href); 1421 url.search = "?shareanchor=" + $(this).attr('id'); 1422 url.hash = ""; 1423 var link = url.href; 1424 var title = $('[href="#'+$(this).attr('id')+'"]').first().text().trim(); 1425 self.updateSharingButtons(title, link) 1426 }); 1427 1428 window.onpopstate = function(event) { 1429 if($('.modal-full-viewport').hasClass('visible')) { 1430 history.replaceState({}, ''); 1431 event.preventDefault(); 1432 event.stopPropagation(); 1433 $('.modal-full-viewport .close').click(); 1434 } 1435 } 1436 1437 $('.modal-full-viewport .close').click(function () { 1438 $('.show-codes-button').removeClass('d-none'); 1439 TweenMax.to($('.modal-full-viewport'), 0.75, {scale: 0.9, autoAlpha: 0, clearProps:'all', ease: Power4.easeOut, onComplete: function(){ 1440 $('.modal-full-viewport').removeClass('visible'); 1441 }}); 1442 // window.history.replaceState( {} , '', '#'); 1443 _.each(self.videoPlayers, function (player) { 1444 player.dispose(); 1445 }); 1446 self.videoPlayers = []; 1447 $('.modal-youtube-embed--inited').remove(); 1448 VideoPlayerHotkeys.player = null; 1449 $('.year-review-2021-nav').show(); 1450 }); 1451 1452 if (self.videoBG()) { 1453 $('.year-review-2021--bg-video__loop').each(function () { 1454 var options = jQuery.extend({}, videoOptions); 1455 options.controls = false; 1456 options.muted = true; 1457 options.loop = true; 1458 options.autoplay = false; 1459 options.poster = $(this).attr('poster'); 1460 options.sources = $(this).data('src'); 1461 1462 var player = videojs(this, options); 1463 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 'onEnter', reverse: false, duration: 0 }) 1464 .on("start", function () { 1465 player.play(); 1466 }) 1467 // .addIndicators() // add indicators (requires plugin) 1468 .addTo(self.controller); 1469 }); 1470 } else { 1471 $('.year-review-2021--bg-video__loop').each(function () { 1472 $(this).css('background', 'url(' + $(this).attr('poster') + ')') 1473 }); 1474 } 1475 } 1476 1477 YearReview2021.prototype.initControls = function () { 1478 var self = this; 1479 1480 $(document).keydown(function (e) {
1481 var arrow = { left: 37, up: 38, right: 39, down: 40 }; 1482 1483 switch (e.which) { 1484 case arrow.left: 1485 for (var index = 0; index < self.swipers.length; index++) { 1486 var swiper = self.swipers[index]; 1487 if(isInViewportVisible(swiper.$el)) { 1488 var index = swiper.$el.attr('data-swiper-index'); 1489 self.swipers[parseInt(index)].slidePrev(); 1490 } 1491 } 1492 break; 1493 case arrow.up: 1494 if (self.prevInset()) { 1495 e.preventDefault(); 1496 e.stopPropagation(); 1497 $('.year-review-2021-nav__up').addClass('year-review-2021-nav__up-pressed'); 1498 setTimeout(function() { 1499 $('.year-review-2021-nav__up').removeClass('year-review-2021-nav__up-pressed'); 1500 }, 1100); 1501 return; 1502 } 1503 break; 1504 case arrow.right: 1505 for (var index = 0; index < self.swipers.length; index++) { 1506 var swiper = self.swipers[index]; 1507 if(isInViewportVisible(swiper.$el)) { 1508 var index = swiper.$el.attr('data-swiper-index'); 1509 self.swipers[parseInt(index)].slideNext(); 1510 } 1511 } 1512 break; 1513 case arrow.down: 1514 if (self.nextInset()) { 1515 e.preventDefault(); 1516 e.stopPropagation(); 1517 $('.year-review-2021-nav__down').addClass('year-review-2021-nav__down__pressed'); 1518 setTimeout(function() { 1519 $('.year-review-2021-nav__down').removeClass('year-review-2021-nav__down__pressed'); 1520 }, 1100); 1521 return; 1522 } 1523 break; 1524 } 1525 }); 1526 } 1527 1528 YearReview2021.prototype.initGlobeVideo = function (el) { 1529 var self = this; 1530 1531 var $el = $('.year-review-2021--globe-video'); 1532 1533 var src = $el.data('src'); 1534 videojs($el[0], { controls: false, muted: true }).ready(function () { 1535 this.src(src); 1536 this.pause(); 1537 var video = this; 1538 1539 // this.on('ended', function(){ 1540 // TweenMax.to($el[0], 1, { autoAlpha: 0 }); 1541 // }); 1542 1543 new ScrollMagic.Scene({ triggerElement: '.year-review-2021--globe-video-spacer', triggerHook: 1, reverse: true, offset: 500, duration: 1 }) 1544 .on("start", function (event) { 1545 video.currentTime(0); 1546 if(event.state == "BEFORE") { 1547 video.pause(); 1548 TweenMax.to($el, 0.2, { autoAlpha: 0 }); 1549 } else { 1550 TweenMax.fromTo($el, 3, { autoAlpha: 0 }, { autoAlpha: 1 }); 1551 video.play(); 1552 } 1553 }) 1554 // .addIndicators() // add indicators (requires plugin) 1555 .addTo(self.controller); 1556 1557 1558 new ScrollMagic.Scene({ triggerElement: '.year-review-2021--globe-video-spacer', triggerHook: 'onEnter', reverse: true, offset: 0, duration: 0 }) 1559 .setClassToggle('.year-review-2021--globe-video','year-review-2021--globe-video__fixed') 1560 // .addIndicators() // add indicators (requires plugin) 1561 .addTo(self.controller); 1562 1563 new ScrollMagic.Scene({ triggerElement: '.year-review-2021--globe-video-spacer', triggerHook: 'onEnter', reverse: true, offset: 0, duration: function(){ 1564 return self.getWindowHeight() * 3; 1565 } }) 1566 // .setClassToggle('.year-review-2021--globe-video','year-review-2021--globe-video__abs') 1567 .setPin('.year-review-2021--globe-video', { pushFollowers: false }) 1568 // .addIndicators() // add indicators (requires plugin) 1569 .addTo(self.controller); 1570 1571 }); 1572 1573 } 1574 1575 YearReview2021.prototype.initEndTitles = function () { 1576 var self = this; 1577 1578 var fadeDuration = $(window).outerHeight() * 0.2; 1579 var height = $(window).outerHeight() * 0.5; 1580 var scaleOffset = height; 1581 1582 // var isMac = /(Mac)/i.test(navigator.platform); 1583 // if(!isMac || true) { 1584 // $('.year-review-2021-end-title').addClass('year-review-2021-end-title__higher'); 1585 // $('.year-review-2021-end-steps').addClass('d-none'); 1586 // $('.year-review-2021-end-steps__higher').removeClass('d-none'); 1587 // } 1588 1589 var items = $('.year-review-2021-title-wrapper'); 1590 1591 // var pinOffset = ($(window).height() - height) / 2; 1592 var pinOffset = 0 1593 1594 var total = 0; 1595 1596 if($(window).outerWidth() < 600) { 1597 $('.year-review-2021-title-end__spacer').hide(); 1598 return; 1599 } 1600 1601 _.each(items, function (trigger, index) { 1602 // 1603 var el = trigger.querySelector(".year-review-2021-end-title"); 1604 1605 var first = index == 0; 1606 var lastItem = index + 1 == items.length; 1607 1608 var pinDuration = height; 1609 1610 if(lastItem) { 1611 pinDuration = "120%"; 1612 } 1613 1614 1615 self.scenes.push( 1616 new ScrollMagic.Scene({ triggerElement: trigger, triggerHook: 0, reverse: true, offset: -pinOffset, duration: pinDuration })
1617 .setPin(trigger, { pushFollowers: false }) 1618 .addTo(self.controller) 1619 ); 1620 1621 total += height + fadeDuration; 1622 1623 if(!el) { 1624 return; 1625 } 1626 1627 var tweenMove; 1628 1629 if(first == true) { 1630 // tweenMove = TweenMax.fromTo(el, 1, { y: 0 }, { y: -100 }); 1631 // tweenMove = TweenMax.fromTo(el, 1, { y: -100 }, { y: 0 }); 1632 tweenMove = TweenMax.fromTo(el, 1, { y: -100 }, { y: -100 + fadeDuration/2 }); 1633 } else if (lastItem == false) { 1634 // tweenMove = TweenMax.fromTo(el, 1, { y: 30 }, { y: -100 }); 1635 // tweenMove = TweenMax.fromTo(el, 1, { y: -100 }, { y: 0 }); 1636 tweenMove = TweenMax.fromTo(el, 1, { y: -100 }, { y: -100 + fadeDuration/2 }); 1637 } else { 1638 tweenMove = TweenMax.fromTo(el, 1, { y: 100 }, { y: 0 }); 1639 } 1640 1641 self.scenes.push( 1642 // new ScrollMagic.Scene({ triggerElement: trigger, triggerHook: 0.5, reverse: true, offset: 0, duration: height }) 1643 new ScrollMagic.Scene({ triggerElement: trigger, triggerHook: 0.5, reverse: true, offset: 0, duration: height }) 1644 .setTween(tweenMove) 1645 .addTo(self.controller) 1646 ); 1647 1648 var tweenZoomIn = TweenMax.fromTo($(el).find('.year-review-2021--end-title__bold'), 1, { scale: 5, autoAlpha: 0 }, { scale: 1, autoAlpha: 1 }); 1649 self.scenes.push( 1650 new ScrollMagic.Scene({ triggerElement: trigger, triggerHook: "onEnter", reverse: true, offset: scaleOffset, duration: fadeDuration }) 1651 .setTween(tweenZoomIn) 1652 .addTo(self.controller) 1653 ); 1654 1655 if (first == false) { 1656 var tween1 = TweenMax.from(el, 1, { autoAlpha: 0 }); 1657 self.scenes.push( 1658 new ScrollMagic.Scene({ triggerElement: trigger, triggerHook: 0.5, reverse: true, offset: 0, duration: fadeDuration }) 1659 .setTween(tween1) 1660 .on("destroy", function (event) { 1661 TweenMax.set(el, { autoAlpha: 1 }); 1662 }) 1663 .addTo(self.controller) 1664 ); 1665 } 1666 1667 if (lastItem == false) { 1668 var tweenFadeOut = TweenMax.to(el, 1, { autoAlpha: 0 }); 1669 self.scenes.push( 1670 new ScrollMagic.Scene({ triggerElement: trigger, triggerHook: 0.5, reverse: true, offset: height - fadeDuration, duration: fadeDuration }) 1671 .setTween(tweenFadeOut) 1672 .on("destroy", function (event) { 1673 TweenMax.set(el, { autoAlpha: 1 }); 1674 }) 1675 .addTo(self.controller) 1676 ); 1677 } 1678 }); 1679 1680 // Pin background 1681 // var bgSelector = '.year-review-2021-end-background'; 1682 1683 var fadeIn2021 = new TimelineMax(); 1684 fadeIn2021.from('.year-review-2021-end-screen-flare', 0.3, { 1685 scale: 0.8, 1686 autoAlpha: 0, 1687 ease: CustomEase.create("custom", yearBounceEase), 1688 }); 1689 fadeIn2021.from('.year-review-2021-end-screen-0', 0.3, { 1690 scale: 0.8, 1691 autoAlpha: 0, 1692 ease: CustomEase.create("custom", yearBounceEase), 1693 }); 1694 1695 fadeIn2021.fromTo($('.year-review-2021-end-title__we-can .year-review-2021-end-title__we-can-top'), 1, { autoAlpha: 0 }, { autoAlpha: 1 }); 1696 fadeIn2021.fromTo($('.year-review-2021-end-title__we-can .year-review-2021--end-title__bold'), 1, { scale: 5, autoAlpha: 0 }, { scale: 1, autoAlpha: 1 }); 1697 // fadeIn2021.fromTo($('.year-review-2021-end-title__we-can .year-review-2021--end-title__bold'), 1, { scale: 5 }, { scale: 1 }); 1698 // var tweenZoomIn = TweenMax.fromTo($(el).find('.year-review-2021--end-title__bold'), 1, { scale: 5, autoAlpha: 0 }, { scale: 1, autoAlpha: 1 }); 1699 // self.scenes.push( 1700 // new ScrollMagic.Scene({ triggerElement: trigger, triggerHook: "onEnter", reverse: true, offset: scaleOffset, duration: fadeDuration }) 1701 // .setTween(tweenZoomIn) 1702 // .addTo(self.controller) 1703 // ); 1704 1705 new ScrollMagic.Scene({ triggerElement: ".year-review-2021-title-wrapper--image", triggerHook: "onLeave", reverse: true, offset: 0, duration: "100%" }) 1706 .setTween(fadeIn2021) 1707 .addTo(self.controller); 1708 1709 1710 } 1711 1712 var hasWebP = (function() { 1713 // some small (2x1 px) test images for each feature 1714 var images = { 1715 basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56
1715QAAAAA==", 1716 lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=" 1717 }; 1718 1719 return function(feature) { 1720 var deferred = $.Deferred(); 1721 1722 $("<img>").on("load", function() { 1723 // the images should have these dimensions 1724 if(this.width === 2 && this.height === 1) { 1725 deferred.resolve(); 1726 } else { 1727 deferred.reject(); 1728 } 1729 }).on("error", function() { 1730 deferred.reject(); 1731 }).attr("src", images[feature || "basic"]); 1732 1733 return deferred.promise(); 1734 } 1735 })(); 1736 1737 1738 1739 return YearReview2021; 1740}())();
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.