1var Year2021 = (function () { 2 'use strict'; 3 4 function Year2021() { 5 // enforces new 6 if (!(this instanceof Year2021)) { 7 var a = new Year2021(); 8 return a; 9 } 10 } 11 12 Year2021.prototype.Init = function () { 13 var self = this; 14 self.controller = new ScrollMagic.Controller(); 15 self.resizeEvents = []; 16 self.resizeScenes = []; 17 18 19 if(!globalGetParams.tr) { 20 // Reveal.mount(); 21 } else { 22 // $(".year-review-2022-text-intro-canvas-wrapper").hide(); 23 24 var pinZoomOutTween = TweenMax.to('.year-review-2022-text-intro-canvas', 0.2, { scale: 0.2, autoAlpha: 0 }); 25 new ScrollMagic.Scene({ triggerElement: '.reveal-tunnel-earth', triggerHook: 'onEnter', reverse: true, duration: "50%"}) 26 .setTween(pinZoomOutTween) 27 .addTo(this.controller); 28 29 30 31 $('.reveal-tunnel-endframe').css('opacity', '1'); 32 $('.reveal-tunnel-title').css('opacity', '1').css('color', '#ffffff'); 33 $('.year-review-2022-staywell-psa__fallback').removeClass('d-none'); 34 } 35 36 hasWebP().then(function() { 37 $('body').addClass('webp-support'); 38 }, function() { 39 $('body').addClass('no-webp-support'); 40 }); 41 42 this.initLazyload(); 43 44 if(!globalGetParams.screencap) { 45 this.initOdometers(); 46 if(!self.isAndroid() && !self.isIpod()) { 47 // this.initBgParallax(); 48 this.initParallax(); 49 // this.initAOScaleDown(); 50 this.initSliderImages(); 51 this.initNav(); 52 this.initControls(); 53 } 54 this.initScrollPosition(); 55 this.initMainMenu(); 56 if(!self.isIpod()) { 57 this.initVideoAutoplay(); 58 } 59 this.init2021Reveal(); 60 this.initVideosModal('.year-end-2022-video-watch-all, .year-end-2022-video__modal'); 61 this.initLineGlow(); 62 this.initGrowingLines(); 63 this.initFloats(); 64 this.initSourceBriefingRow(); 65 this.initPreRiseText(); 66 this.initEndTitles(); 67 } else { 68 TweenMax.set(".year-review-2022-title-time-to", { autoAlpha: 1, scale: 1, ease: Power4.easeOut } ); 69 TweenMax.set(".year-review-2022-title.year-review-2022-title-h1", { autoAlpha: 1, y: 0, ease: Power4.easeOut }); 70 TweenMax.set(".year-review-2022-watch-superbowl", { autoAlpha: 1, y: 0, ease: Power4.easeOut }); 71 TweenMax.set(".year-review-2022-title-first-step", { autoAlpha: 1, y: 0, ease: Power4.easeOut }); 72 // TweenMax.set(".year-review-2022--bounce", 0.5, { autoAlpha: 1, y: 0, ease: Power4.easeOut }); 73 $('.year-in-review-2022-glow-line').addClass('year-in-review-2022-glow-line__visible'); 74 75 $('.year-review-2021-glow-line').each(function (index, element) { 76 $(element).addClass('year-review-2021-glow-line__visible'); 77 }); 78 79 _.each($('.year-end-2023-videoautoplay'), function (element, index) { 80 var $el = $(element) 81 if($el.data('poster')) { 82 $el.attr('poster', $el.data('poster')); 83 TweenMax.set($el, {autoAlpha: 1}); 84 TweenMax.to( $el.closest('.year-end-2023-intro-new-year--wrapper').find('.show-on-the-road-intro-video-dim'), 1, {opacity: 0.7}); 85 TweenMax.to( $el.closest('.year-end-2023-intro-march13--wrapper').find('.show-on-the-road-intro-video-dim'), 1, {opacity: 0.7}); 86 } 87 }); 88 89 90 _.each($('.year-review-2023-source-briefing-row'), function (element, index) { 91 var $el = $(element); 92 var direction = parseInt($el.data("direction")); 93 var offset = parseInt($el.data("person-offset")); 94 95 // var xOffset = $el.offset().left - $el.parent().offset().left; 96 var xOffset = $el.find('.year-review-2023-source-briefing-item__person').position().left - offset; 97 98 if(self.isMobile()) { 99 if($el.find('.year-review-2023-source-briefing-item__person').width() + $el.find('.year-review-2023-source-briefing-item__person').offset().left > self.getWindowOuterWidth()) { 100 xOffset = $el.offset().left + $el.find('.year-review-2023-source-briefing-item__person').position().left; 101 } 102 } 103 104 TweenMax.set(element, {x: -xOffset}); 105 }); 106 } 107 this.initTopAnimation(globalGetParams.screencap); 108 109 $(window).resize(function(){ 110 self.updateCache(); 111 }); 112 113 $(document).ready(function(){ 114 self.updateCache(); 115 }); 116 117 $(window).resize(function () { 118 self.resizeDynamicScenes(); 119 }); 120 121 if(globalGetParams.id) { 122 window.scrollTo(0, $("#" + globalGetParams.id).offset().top - 200 ); 123 } 124 125 // important this is here 126 this.initVideos(); 127 128 setTimeout(function(){ 129 EventTracker.trackScroll(); 130 }, 1000); 131 132 // 133 134 if($('.show-codes-button').length > 0) { 135 $('.show-codes-button').click(function(event) { 136 $('.image-code').toggleClass('hidden'); 137 }); 138 $('.mag-image-lazyload__abs').each(function(index, el) { 139 // console.log( $(el).find('img').attr('data-src') ); 140 if($(el).find('source').length > 0) { 141 var src = $(el).find('source').attr('data-srcset'); 142 if(!src) { 143 return; 144 } 145 if($(el).find('.image-code').length > 0) { 146 return; 147 } 148 // most are _XX9999.jpg 149 var parts = src.match(/[-_](([0-9]+[a-zA-Z]+|[a-zA-Z]+[0-9]+)[0-9a-zA-Z]*)(-(inet|1))?(-r)?(_en)?.jpg/); 150 if(parts===null) { 151 // Some are DJI_0242 152 parts = src.match(/[-_]([A-Z]+_[0-9]+).jpg/); 153 } 154 if(parts===null) { 155 // Some are job- 156 parts = src.match(/(job[-_][0-9]+)(-r)?(_en)?.jpg/); 157 } 158 if(parts && parts.length > 0) { 159 var code = parts[1]; 160 $(el).append('<div class="image-code hidden">'+code+'</div>') 161 } 162 163 var $altsContainer = $(el).closest('.subm-alts'); 164 if($altsContainer.length > 0) { 165 var alts = document.createElement("DIV"); 166 alts.classList.add("image-alts-wrapper") 167 alts.classList.add("hidden") 168 169 var alt = document.createElement("div"); 170 alt.innerHTML = "PROPOSED"; 171 alt.classList.add("image-alts-item", "image-alts-item__active"); 172 alt.setAttribute("data-value", "proposed"); 173 alts.append(alt); 174 175 var index = 1; 176 $altsContainer.find('.subm-alt-version').each(function () { 177 var alt = document.createElement("div"); 178 alt.innerHTML = "ALT " + index; 179 alt.classList.add("image-alts-item"); 180 alt.setAttribute("data-value", index); 181 index ++; 182 alts.append(alt); 183 });
184 $(el).append(alts) 185 } 186 187 } 188 }); 189 $('.image-alts-item').click(function(){ 190 var value = $(this).attr('data-value'); 191 var $altsContainer = $(this).closest('.subm-alts'); 192 $altsContainer.find('.subm-alt-version').each(function () { 193 $(this).removeClass('subm-alt-version__visible'); 194 }); 195 if(value == "proposed") { 196 $altsContainer.children().first().removeClass('subm-proposed-version__hidden'); 197 } else { 198 $altsContainer.children().first().addClass('subm-proposed-version__hidden'); 199 var id = parseInt(value); 200 $($altsContainer.children()[id]).addClass('subm-alt-version__visible'); 201 } 202 }); 203 204 loadjs(['/plugins/bootstrap/js/bootstrap.bundle.min.js?_='+cacheId], 'bootstrapjs', {async: false}); 205 loadjs.ready('bootstrapjs', function() { 206 $('.image-code').tooltip({ 207 html: true, 208 title: '<span class="icon-zoom-in"></span> VIEW FULL SCREEN', 209 placement: 'bottom', 210 }); 211 }); 212 213 // load up photoswipe 214 loadjs('/plugins/photoswipe/photoswipe.min.js?_=' + new Date().getTime()); 215 loadjs('/plugins/photoswipe/photoswipe-ui-default.min.js?_=' + new Date().getTime()); 216 217 loadjs(['css!/plugins/photoswipe/photoswipe.css?_=' + cacheId, 'css!/plugins/photoswipe/default-skin/default-skin.css?_=' + cacheId]); 218 219 $('.pswp__container').html('<div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div>'); 220 221 $(document).on('click', '.image-code', function(e){ 222 e.stopPropagation(); 223 e.stopImmediatePropagation(); 224 e.preventDefault(); 225 226 var $imageItem = $(this).closest('.mag-image-lazyload__abs'); 227 var src = $imageItem.find('img')[0].currentSrc.replace(/@w=[0-9]*/, ''); 228 // if(src[0] != "/") { 229 // src = "/" + src; 230 // } 231 // photoswipe zoom in 232 // console.log('src',src); 233 if(src) { 234 // var url = new URL(window.location.href); 235 // url.pathname = src; 236 var pswpElement = document.querySelectorAll('.pswp')[0]; 237 // build items array 238 var items = [ 239 { 240 // src: unescape(url.toString()), 241 src: src, 242 w: 0, 243 h: 0, 244 }, 245 ]; 246 247 // define options (if needed) 248 var options = { 249 index: 0, 250 shareEl: false, 251 history: false 252 }; 253 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); 254 255 // dynamicly set W & H 256 gallery.listen('gettingData', function (index, item) { 257 if (item.w < 1 || item.h < 1) { 258 var img = new Image(); 259 img.onload = function () { 260 item.w = this.width; 261 item.h = this.height; 262 gallery.updateSize(true); 263 }; 264 img.src = item.src; 265 } 266 }); 267 268 gallery.init(); 269 } 270 }); 271 272 } 273 } 274 275 Year2021.prototype.initSliderImages = function () { 276 var self = this; 277 $('.year-end-2021--carousel-images').each(function () { 278 var $row = $(this); 279 var startX = parseInt($row.data('start-x')); 280 var endX = parseInt($row.data('end-x')); 281 282 if(self.isMobile() && !self.isIphone()) { 283 this.scrollLeft = startX; 284 $row.addClass('year-end-2021--carousel-images__mobile'); 285 return; 286 } 287 288 var itemWidth = $row.children().first().width() + 18; 289 290 var rowWidth = $row.children().length * itemWidth; 291 292 var directionLeft = endX < startX 293 if(directionLeft) { 294 // var distance = startX - endX; 295 // if(rowWidth < $(window).width()) { 296 // endX = ($(window).width() - rowWidth) / 2; 297 // startX = endX + distance; 298 // } 299 } else { 300 var distance = endX - startX; 301 if(rowWidth < $(window).width()) { 302 endX = $(window).width() - ($(window).width() - rowWidth) / 2 - rowWidth; 303 startX = endX - distance; 304 } 305 } 306 307 // if(self.isMobile()) { 308 // if(directionLeft) { 309 // endX = (endX - startX) * 0.25; 310 // } else { 311 // endX = (startX - endX) * 0.25; 312 // } 313 // } 314 315 var element = this; 316 self.addResizeCallback(function(){ 317 var tween = TweenMax.fromTo(element, 0.7, { x: startX }, { x: endX, ease:Linear.easeNone }); 318 self.addResizeScene( 319 new ScrollMagic.Scene({ triggerElement: element, triggerHook: 'onEnter', reverse: true, duration: self.getWindowHeight() * 1.5 }) 320 .setTween(tween) 321 // .addIndicators() // add indicators (requires plugin) 322 .addTo(self.controller) 323 ); 324 }); 325 326 }); 327 } 328 329 330 Year2021.prototype.initMainMenu = function () { 331 var self = this; 332 var anchors = []; 333 var lastHashId = ""; 334 self.startAnchorLoad = new Date().getTime(); 335 $('.show-on-the-road--menuitem').each(function (index) { 336 var $link = $(this).find('a'); 337 if($(this)[0].tagName == "A") { 338 $link = $(this); 339 } 340 var id = $link.attr('href').replace('#', ''); 341 var $el = $('#' + id); 342 if($el.length == 0) { 343 return; 344 } 345 var triggerElement = $el[0]; 346 anchors.push(id); 347 348 self.activeShareImageIndex = 0; 349 350 // $(window).scroll(function(){ 351 // // special case for beginning 352 // if(self.activeShareImageIndex != 0 && $(window).scrollTop() < 700 && !self.videoSelected()) { 353 // self.updateUrlHash(anchors[0]); 354 // } 355 // }) 356 357 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 0.5, reverse: true, duration: 0 }) 358 .on("start", function (event) { 359 var id = $el.attr('id'); 360 var $parent = $('.show-on-the-road--menuitem [href="#' + id + '"]').parent(); 361 if($parent.hasClass('show-on-the-road--menuitem')) { 362 $('.show-on-the-road--menuitem__active').removeClass('show-on-the-road--menuitem__active'); 363 $parent.addClass('show-on-the-road--menuitem__active'); 364 $('.year-review-2021--mobile-menuitem-link[href="#' + id + '"]').addClass('show-on-the-road--menuitem__active'); 365 // self.updateMobileMenu(); 366 } 367 368 // if(!self.videoSelected()) { 369 // self.updateUrlHash(id); 370 // lastHashId = id; 371 // } 372 history.replaceState(null, null, window.location.pathname); 373 }) 374 375 .on("leave", function (event) { 376 if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 377 var id = $el.attr('id'); 378 var $parent = $('.show-on-the-road--menuitem [href="#' + id + '"]').parent() 379 var $prev = $parent.prev(); 380 $('.show-on-the-road--menuitem__active').removeClass('show-on-the-road--menuitem__active'); 381 if($prev.length > 0 && $prev.hasClass('show-on-the-road--menuitem')) { 382 $prev.addClass('show-on-the-road--menuitem__active'); 383 // self.updateMobileMenu(); 384 $('.year-review-2021--mobile-menuitem-link[href="#' + id + '"]').parent().prev().find('a').addClass('show-on-the-road--menuitem__active'); 385 } 386 // if(!self.videoSelected() && index > 0) { 387 // self.updateUrlHash(anchors[index-1]); 388 // return; 389 // } 390 } 391 392 history.replaceState(null, null, window.location.pathname); 393 394 // if(!self.videoSelected()) { 395 // self.updateUrlHash(id); 396 // } 397 }) 398 // .addIndicators() // add indicators (requires plugin) 399 .addTo(self.controller); 400 }); 401 // if(self.videoSelected()) { 402 // self.updateUrlHash(window.location.hash.replace("#", "")); 403 // } else if(lastHashId) { 404 // self.updateUrlHash(lastHashId); 405 // } 406 407 $('.year-review-2021--mobile-menuitem').click(function(){ 408 $('.year-review-2021-mobile-menu').removeClass('year-review-2021-mobile-menu__visible'); 409 }); 410 411 $('.show-on-the-road--menuitem-link__mobile-overlay').click(function(event){ 412 if($(window).width() > 992) { 413 return; 414 } 415 416 event.preventDefault(); 417 event.stopPropagation(); 418 419 trackEvent("Menu", "Opened"); 420 421 $('.year-review-2021-mobile-menu').toggleClass('year-review-2021-mobile-menu__visible'); 422 }); 423 424 $('.year-review-2021-mobile-menu--close').click(function(){ 425 $('.year-review-2021-mobile-menu').removeClass('year-review-2021-mobile-menu__visible'); 426 }); 427 } 428 429 430 Year2021.prototype.initLazyload = function () { 431 //add simple support for background images: 432 document.addEventListener('lazybeforeunveil', function(e){ 433 var bg = e.target.getAttribute('data-bg'); 434 if(bg){ 435 e.target.style.backgroundImage = 'url(' + bg + ')'; 436 } 437 }); 438 $('[data-bg]').each(function () { 439 if($(this).hasClass('lazyloaded')) { 440 var bg = this.getAttribute('data-bg'); 441 if(bg) { 442 this.style.backgroundImage = 'url(' + bg + ')'; 443 } 444 } 445 }); 446 } 447 448 Year2021.prototype.updateCache = function () { 449 window.Year2021.cachedPageHeight = $(document).height(); 450 window.Year2021.cachedWindowHeight = $(window).height(); 451 window.Year2021.cachedOuterWindowWidth = $(window).outerWidth(); 452 window.Year2021.cachedOuterWindowHeight = $(window).outerHeight(); 453 } 454 455 Year2021.prototype.addResizeCallback = function (callback) { 456 this.resizeEvents.push(callback); 457 callback(); 458 } 459 460 Year2021.prototype.addResizeScene = function (resizeScenes) { 461 this.resizeScenes.push(resizeScenes); 462 } 463 464 Year2021.prototype.resizeDynamicScenes = function () { 465 var self = this; 466 467 if(self.resizedFinished) { 468 clearTimeout(self.resizedFinished); 469 } 470 471 if(self.lastResizedWidth != $(window).width() || self.lastResizedHeight != $(window).height()) { 472 self.lastResizedWidth = $(window).width(); 473 self.lastResizedHeight = $(window).height() 474 } else { 475 return; 476 } 477 478 self.resizedFinished = setTimeout(function(){ 479 for (var index = 0; index < self.resizeScenes.length; index++) { 480 var scene = self.resizeScenes[index]; 481 scene.progress(0); 482 scene.destroy(true); 483 } 484 485 self.resizeScenes = []; 486 487 for (var index = 0; index < self.resizeEvents.length; index++) { 488 self.resizeEvents[index](); 489 } 490 }, 500); 491 } 492 493 Year2021.prototype.initVideoAutoplay = function () { 494 var self = this; 495 _.each($('.show-on-the-road--playbutton-area'), function (el, index) { 496 var $el = $(el); 497 498 var videoId = $el.data('videoid'); 499 500 var options = jQuery.extend({}, videoOptions); 501 options.preload = "none"; 502 options.controls = false;
503 options.autoplay = false; 504 options.sources = $el.data('videosrc'); 505 options.loop = true; 506 var videos = $el.find('.video-js'); 507 if (videos.length == 0) { 508 return; 509 } 510 var video = videos[0]; 511 videojs(videos[0], options).ready(function () { 512 var tween; 513 514 var player = this; 515 516 // first scroll 517 // new ScrollMagic.Scene({ triggerElement: $el[0], triggerHook: 0.5, reverse: true }) 518 // .on("start", function (event) { 519 // // video started playing by user interaction 520 // if (!video.muted) { 521 // return; 522 // } 523 // player.one('play', function () { 524 // tween && tween.pause(); 525 // tween = new TimelineMax(); 526 // tween.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 1, ease: Power4.easeOut }); 527 // tween.to($el.find('.mag-image-lazyload'), 0.25, {autoAlpha: 0}); 528 // }); 529 // if (!$el.hasClass('year-end-2022-videoautoplay__inline')) { 530 // var vid = player.el().querySelector('video'); 531 // if (vid.currentTime < 3 && $(window).width() < 768) { 532 // player.src(player.currentSources()); 533 // } 534 // vid.controls = false; 535 // player.play(); 536 // } 537 // trackEvent("Video", "Visible", videoId); 538 // }) 539 // .on("leave", function (event) { 540 // // video started playing by user interaction 541 // if (!video.muted) { 542 // return; 543 // } 544 // if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 545 // tween && tween.pause(); 546 // tween = new TimelineMax(); 547 // tween.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 0, ease: Power4.easeOut }); 548 // tween.to($el.find('.mag-image-lazyload'), 0.25, {autoAlpha: 1}); 549 // video.pause(); 550 // window.history && history.replaceState(null, null, ' '); 551 // } 552 // }) 553 // .addTo(self.controller); 554 555 // on scroll in or scroll out 556 new ScrollMagic.Scene({ triggerElement: $el[0], triggerHook: "onEnter", reverse: true, offset: 0, duration: self.getWindowHeight() * 2 }) 557 .on("start", function (event) { 558 // video started playing by user interaction 559 if($el.hasClass('show-on-the-road-videoautoplay__inline')) { 560 return; 561 } 562 if (!video.muted) { 563 return; 564 } 565 player.one('play', function () { 566 tween && tween.pause(); 567 tween = new TimelineMax(); 568 tween.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 1, ease: Power4.easeOut }); 569 tween.to($el.find('.mag-image-lazyload'), 0.25, {autoAlpha: 0}); 570 }); 571 video.controls = false; 572 if(!self.qualifiedAutoplay($el)) { 573 return; 574 } 575 player.src(options.sources); 576 player.play(); 577 trackEvent("Video", "Visible", videoId); 578 }) 579 .on("leave", function (event) { 580 // video started playing by user interaction 581 if($el.hasClass('show-on-the-road-videoautoplay__inline')) { 582 return; 583 } 584 if (!video.muted) { 585 return; 586 } 587 // if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 588 video.pause(); 589 window.history && history.replaceState(null, null, ' '); 590 tween && tween.pause(); 591 tween = new TimelineMax(); 592 tween.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 0, ease: Power4.easeOut }); 593 tween.to($el.find('.mag-image-lazyload'), 0.25, {autoAlpha: 1}); 594 // } 595 }) 596 .on("end", function (event) { 597 // video started playing by user interaction 598 if($el.hasClass('show-on-the-road-videoautoplay__inline')) { 599 return; 600 } 601 if (!video.muted) { 602 return; 603 } 604 // scroll back 605 if (event.state == "DURING" && event.scrollDirection == "REVERSE") { 606 player.one('play', function () { 607 tween && tween.pause(); 608 tween = new TimelineMax(); 609 tween.to($el.find('.year-end-2022-videoautoplay'), 0.5, { autoAlpha: 1, ease: Power4.easeOut }); 610 tween.to($el.find('.mag-image-lazyload'), 0.25, {autoAlpha: 0}); 611 }); 612 video.controls = false;
613 if(!self.qualifiedAutoplay($el)) { 614 return; 615 } 616 player.play(); 617 } 618 }) 619 // .addIndicators() // add indicators (requires plugin) 620 .addTo(self.controller); 621 }); 622 623 }); 624 } 625 626 Year2021.prototype.qualifiedAutoplay = function ($el) { 627 var $slide = $el.closest('.swiper-slide'); 628 if($slide.length == 0) { 629 return true; 630 } 631 return $slide.hasClass('swiper-slide-active'); 632 } 633 634 Year2021.prototype.initVideos = function (selector) { 635 var self = this; 636 $('.show-on-the-road--playbutton-area').click(function(){ 637 var $el = $(this); 638 var videoElId = $el.find('.video-js').attr('id'); 639 var video = videojs.players[videoElId]; 640 641 var scntvlink = $el.data('scntv'); 642 if(scntvlink) { 643 // $('.modal-scntv-video').clone().removeClass("d-none").prependTo($(this)).addClass('modal-scntv-video--inited'); 644 // var src = $('.modal-scntv-video--inited iframe').attr('data-src').replace(/YOUTUBE_ID/g, $el.data('youtube')); 645 // $('.modal-scntv-video--inited').removeClass('d-none'); 646 // var src = $('.modal-scntv-video--inited iframe').data('src').replace("URL", scntvlink); 647 // $('.modal-scntv-video--inited iframe').attr('src', src); 648 // return; 649 } 650 651 if(!video) { 652 return; 653 } 654 655 var videoId = $(this).data('videoid'); 656 if(!video.controls()) { 657 for (var player in videojs.players) { 658 if (videojs.players.hasOwnProperty(player) && videojs.players[player]) { 659 try { 660 videojs.players[player].pause(); 661 } catch (error) { 662 } 663 } 664 } 665 666 video.controls(true); 667 video.muted(false); 668 video.currentTime(0); 669 video.loop(false); 670 video.poster( $el.data('videoposter') ); 671 $el.addClass('show-on-the-road-videoautoplay__inline'); 672 EventTracker.trackVideo(video); 673 video.one('timeupdate', function(){ 674 // self.addCaptionsIfNeeded(video, videoId); 675 }); 676 video.play(); 677 trackEvent("Video", "Play", videoId); 678 } else if(video.paused()) { 679 trackEvent("Video", "Play", videoId); 680 } 681 }); 682 } 683 684 Year2021.prototype.initEndTitles = function () { 685 var self = this; 686 687 688 $('.year-review-2021-end-title-wrapper__scale').each(function (index, element) { 689 var $element = $(element); 690 var $el = $element.find('.year-review-2021-end-title'); 691 692 var tween = TweenMax.from($el, 1, {scale: 4, autoAlpha: 0, ease: Power4.easeOut}); 693 694 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.75, reverse: true, offset: 0, duration: 0 }) 695 .setTween(tween) 696 .addTo(self.controller); 697 }); 698 699 700 var tween = TweenMax.from($('.year-review-2021-end-title__rise .year-review-2021-end-title'), 1, {y: 100, autoAlpha: 0, ease: Power4.easeOut} ); 701 new ScrollMagic.Scene({ triggerElement: '.year-review-2021-end-title__rise', triggerHook: "onEnter", reverse: true, offset: 400, duration: 0 }) 702 .setTween(tween) 703 .addTo(self.controller); 704 705 706 $('.time-to-rise--bottom-wrapper-bg-item').each(function (index, element) { 707 var $element = $(element); 708 var bgTween = TweenMax.to($element, 1, { backgroundPosition: "0% " + Math.round(-self.getPageHeight() * 0.1) + "px" }); 709 new ScrollMagic.Scene({ triggerElement: element, triggerHook: "onEnter", reverse: true, duration: self.getPageHeight }) 710 .setTween(bgTween) 711 // .addIndicators() // add indicators (requires plugin) 712 .addTo(self.controller); 713 }); 714 715 // self.addResizeCallback(function(){ 716 717 // self.addResizeScene( 718 // new ScrollMagic.Scene({ 719 // triggerElement: '.year-review-2023-end-container__pin', 720 // triggerHook: 'onLeave', 721 // duration: '50%', 722 // })
723 // .setPin('.year-review-2023-end-container__giant', { 724 // pushFollowers: false, 725 // }) 726 // .addTo(self.controller) 727 // ); 728 729 // }); 730 731 732 } 733 734 735 Year2021.prototype.init2021Reveal = function () { 736 var tl = new TimelineMax(); 737 tl.staggerFromTo(".year-review-2022-title-time-to", 1.25, { autoAlpha: 0, scale: 7 }, { autoAlpha: 1, scale: 1, ease: Power4.easeOut } ); 738 tl.fromTo(".year-review-2022-title.year-review-2022-title-h1", 1, { autoAlpha: 0, y: 100 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "-=0.25") 739 tl.fromTo(".year-review-2022-watch-superbowl", 0.5, { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "-=0.1") 740 tl.fromTo(".year-review-2022-title-first-step", 0.5, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "-=0.3") 741 tl.fromTo(".year-review-2022--bounce", 0.5, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "+=0.5") 742 743 $('.year-review-2022--bounce').click(function(){ 744 TweenMax.to(window, 3, { 745 scrollTo: { 746 y: $('.year-review-2022-title__large').offset().top - 300, 747 }, 748 ease: Power4.easeInOut, 749 }); 750 }); 751 } 752 753 Year2021.prototype.initPreRiseText = function () { 754 var self = this; 755 756 757 758 self.addResizeCallback(function(){ 759 760 self.addResizeScene( 761 new ScrollMagic.Scene({ 762 triggerElement: '.year-2023-world-rise', 763 triggerHook: 'onLeave', 764 duration: '50%', 765 }) 766 .setPin('.year-2023-world-rise-container', { 767 pushFollowers: false, 768 }) 769 .addTo(self.controller) 770 ); 771 772 }); 773 774 775 776 var notHeldInited = false; 777 new ScrollMagic.Scene({ 778 triggerElement: '.year-2023-not-held--trigger', 779 triggerHook: 'onLeave', 780 duration: "150%", 781 }) 782 .setPin('.year-2023-not-held--video-wrapper', { 783 pushFollowers: false, 784 }) 785 .on("start", function (event) { 786 if(notHeldInited) { 787 document.querySelector('.year-2023-not-held--video video').currentTime = 0; 788 document.querySelector('.year-2023-not-held--video video').play(); 789 TweenMax.to('.year-2023-not-held--video', 0.5, {autoAlpha: 1, ease: Power4.easeOut}); 790 TweenMax.to('.year-2023-not-held--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0.4, ease: Power4.easeOut}); 791 return; 792 } 793 notHeldInited = true; 794 var src = "https://d1en0cs4s0ez90.cloudfront.net/hls/scientology/en/year-in-review-2023/rise-kid-falling-02"; 795 videojs($('.year-2023-not-held--video video')[0], { controls: false, loop: false }).ready(function () { 796 this.src([ 797 { src: src + '.webm', type: 'video/webm; codecs="vp9"' }, 798 { src: src + '-h265.mp4', type: 'video/mp4; codecs="hvc1"' }, 799 { src: src + '.mp4?1', type: 'video/mp4; codecs="avc1"' } 800 ]); 801 var player = this; 802 player.el().querySelector('video').addEventListener("error", (event) => { 803 player.src([ 804 { src: src + '.mp4?1', type: 'video/mp4; codecs="avc1"' } 805 ]); 806 player.play(); 807 }) 808 this.play(); 809 this.one("timeupdate", function(){ 810 TweenMax.to(this.el_, 0.5, {autoAlpha: 1, ease: Power4.easeOut}); 811 TweenMax.to('.year-2023-not-held--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0.4, ease: Power4.easeOut}); 812 this.play(); 813 }); 814 }); 815 }) 816 .on("leave", function (event) { 817 if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 818 TweenMax.to('.year-2023-not-held--video', 0.5, {autoAlpha: 0, ease: Power4.easeOut}); 819 TweenMax.to('.year-2023-not-held--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0, ease: Power4.easeOut}); 820 } 821 }) 822 .addTo(self.controller); 823 824 // 825 826 // var showDefeated = new TimelineMax(); 827 // showDefeated.to('.year-2023-not-held--video-wrapper', 0.25, {autoAlpha: 0}); 828 829 // new ScrollMagic.Scene({ 830 // triggerElement: '.year-2023-not-defeated--trigger', 831 // triggerHook: 'onLeave', 832 // duration: 0, 833 // }) 834 // .setTween(showDefeated) 835 // .addTo(self.controller); 836 837 var notDefeated = false;
838 new ScrollMagic.Scene({ 839 triggerElement: '.year-2023-not-defeated--trigger', 840 triggerHook: 'onLeave', 841 duration: "100%", 842 }) 843 .setPin('.year-2023-not-defeated--video-wrapper', { 844 pushFollowers: false, 845 }) 846 .on("start", function (event) { 847 if(notDefeated) { 848 document.querySelector('.year-2023-not-defeated--video video').currentTime = 0; 849 document.querySelector('.year-2023-not-defeated--video video').play(); 850 TweenMax.to('.year-2023-not-defeated--video', 0.5, {autoAlpha: 1, ease: Power4.easeOut}); 851 TweenMax.to('.year-2023-not-defeated--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0.4, ease: Power4.easeOut}); 852 return; 853 } 854 notDefeated = true; 855 var src = "https://d1en0cs4s0ez90.cloudfront.net/hls/scientology/en/year-in-review-2023/rise-umbrella-02"; 856 videojs($('.year-2023-not-defeated--video video')[0], { controls: false, muted: true, loop: false }).ready(function () { 857 this.src([ 858 { src: src + '.webm', type: 'video/webm; codecs="vp9"' }, 859 { src: src + '-h265.mp4', type: 'video/mp4; codecs="hvc1"' }, 860 { src: src + '.mp4?1', type: 'video/mp4; codecs="avc1"' } 861 ]); 862 var player = this; 863 player.el().querySelector('video').addEventListener("error", (event) => { 864 player.src([ 865 { src: src + '.mp4?1', type: 'video/mp4; codecs="avc1"' } 866 ]); 867 player.play(); 868 }) 869 this.play(); 870 this.one("timeupdate", function(){ 871 TweenMax.to(this.el_, 0.5, {autoAlpha: 1, ease: Power4.easeOut}); 872 TweenMax.to('.year-2023-not-defeated--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0.4, ease: Power4.easeOut}); 873 this.play(); 874 }); 875 }); 876 }) 877 .on("leave", function (event) { 878 if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 879 TweenMax.to('.year-2023-not-defeated--video', 0.5, {autoAlpha: 0, ease: Power4.easeOut}); 880 TweenMax.to('.year-2023-not-defeated--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0, ease: Power4.easeOut}); 881 } 882 }) 883 .addTo(self.controller); 884 // 885 886 // var showRise = new TimelineMax(); 887 // showRise.to('.year-2023-not-defeated--video-wrapper', 0.25, {autoAlpha: 0}); 888 889 // new ScrollMagic.Scene({ 890 // triggerElement: '.year-2023-can-rise--trigger', 891 // triggerHook: 'onLeave', 892 // duration: 0, 893 // }) 894 // .setTween(showRise) 895 // .addTo(self.controller); 896 897 var canRise = false; 898 new ScrollMagic.Scene({ 899 triggerElement: '.year-2023-can-rise--trigger', 900 triggerHook: 'onLeave', 901 duration: "25%", 902 }) 903 .setPin('.year-2023-can-rise--video-wrapper', { 904 pushFollowers: false, 905 }) 906 .on("start", function (event) { 907 if(canRise) { 908 document.querySelector('.year-2023-can-rise--video video').currentTime = 0; 909 document.querySelector('.year-2023-can-rise--video video').play(); 910 TweenMax.to('.year-2023-can-rise--video', 0.5, {autoAlpha: 1, ease: Power4.easeOut}); 911 TweenMax.to('.year-2023-can-rise--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0.4, ease: Power4.easeOut}); 912 return; 913 } 914 canRise = true; 915 var src = "https://d1en0cs4s0ez90.cloudfront.net/hls/scientology/en/year-in-review-2023/rise-rocks-02"; 916 videojs($('.year-2023-can-rise--video video')[0], { controls: false, muted: true, loop: false }).ready(function () { 917 this.src([ 918 { src: src + '.webm', type: 'video/webm; codecs="vp9"' }, 919 { src: src + '-h265.mp4', type: 'video/mp4; codecs="hvc1"' }, 920 { src: src + '.mp4?1', type: 'video/mp4; codecs="avc1"' } 921 ]); 922 var player = this;
923 player.el().querySelector('video').addEventListener("error", (event) => { 924 player.src([ 925 { src: src + '.mp4?1', type: 'video/mp4; codecs="avc1"' } 926 ]); 927 player.play(); 928 }) 929 this.play(); 930 this.one("timeupdate", function(){ 931 TweenMax.to(this.el_, 0.5, {autoAlpha: 1, ease: Power4.easeOut}); 932 TweenMax.to('.year-2023-can-rise--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0.4, ease: Power4.easeOut}); 933 this.play(); 934 }); 935 }); 936 }) 937 .on("leave", function (event) { 938 if (event.state == "BEFORE" && event.scrollDirection == "REVERSE") { 939 TweenMax.to('.year-2023-can-rise--video', 0.5, {autoAlpha: 0, ease: Power4.easeOut}); 940 TweenMax.to('.year-2023-can-rise--video .year-end-2023-videoautoplay--dim', 0.5, {autoAlpha: 0, ease: Power4.easeOut}); 941 } 942 }) 943 .addTo(self.controller); 944 } 945 946 Year2021.prototype.initNav = function () { 947 var self = this; 948 949 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper", triggerHook: "onLeave", reverse: true}) 950 .setClassToggle('.year-review-2021-nav', 'year-review-2022-nav__visible') 951 .addTo(self.controller); 952 953 $('.year-review-2021-nav__up').click(function () { 954 window.history.replaceState( {} , '', "#"); 955 if (self.prevInset()) { 956 return; 957 } 958 959 if (typeof self.activeStepIndex == "undefined") { 960 var index = 0; 961 } else { 962 var index = self.activeStepIndex - 1; 963 } 964 if (self.scrollToIndex > -1) { 965 index = self.scrollToIndex - 1; 966 } 967 968 var duration = $(this).data('duration'); 969 970 var $lastInset = self.getLastInsetFor(index); 971 if ($lastInset) { 972 self.scrollToElement($lastInset, duration); 973 } else { 974 // self.jumpToOrg(index); 975 self.lastScrollAnimation = TweenMax.to(window, 2, { 976 scrollTo: { 977 y: 0, 978 }, 979 }); 980 } 981 982 }); 983 984 $('.year-review-2021-nav__down, .show-on-road--bounce').click(function () { 985 window.history.replaceState( {} , '', "#"); 986 if (self.nextInset()) { 987 return; 988 } 989 if (typeof self.activeStepIndex == "undefined") { 990 var index = 0; 991 } else { 992 var index = self.activeStepIndex + 1; 993 } 994 if (self.scrollToIndex > -1) { 995 index = self.scrollToIndex + 1; 996 } 997 self.jumpToOrg(index); 998 }); 999 } 1000 1001 Year2021.prototype.getLastInsetFor = function (index) { 1002 var $container = $('.year-review-2021-step[data-id=' + index + ']'); 1003 if ($container.length == 0) { 1004 return false; 1005 } 1006 return $container.last(); 1007 } 1008 1009 Year2021.prototype.prevInset = function () { 1010 var self = this; 1011 var $insets = $('.year-review-2021-step'); 1012 if ($insets.length == 0) { 1013 return false; 1014 } 1015 1016 var activeInsetIndex = -1; 1017 var scrollTop = $(window).scrollTop(); 1018 var windowHeight = $(window).height(); 1019 var $activeInset; 1020 1021 $insets.each(function (index, inset) { 1022 var $inset = $(inset); 1023 var alignBottom = $inset.data('align-bottom'); 1024 var offset = 200; 1025 if($inset.data("offset")) { 1026 offset = parseInt($inset.data("offset")); 1027 } 1028 // if(alignBottom) { 1029 // if ($inset.offset().top + offset < scrollTop + windowHeight) { 1030 // $activeInset = $inset; 1031 // activeInsetIndex = index; 1032 // } 1033 // } 1034 // if ($inset.offset().top + offset < scrollTop) { 1035 // $activeInset = $inset; 1036 // activeInsetIndex = index; 1037 // } 1038 1039 if (self.getScrollPosition($inset) + 70 < scrollTop) { 1040 $activeInset = $inset; 1041 activeInsetIndex = index; 1042 } 1043 }); 1044 1045 console.log('$activeInset',$activeInset); 1046 1047 var $target; 1048 1049 // did not scroll past first inset, go to it 1050 if (activeInsetIndex == -1) { 1051 // $target = $($insets[0]); 1052 return false;
1053 } else if (activeInsetIndex == 0) { 1054 $target = $('.year-review-2021-step').first(); 1055 } else if (activeInsetIndex - 1 < 0) { 1056 return false; 1057 } else { 1058 $target = $($insets[activeInsetIndex]); 1059 } 1060 1061 var duration = $target.data('duration'); 1062 1063 self.scrollToElement($target, duration); 1064 1065 return true; 1066 } 1067 1068 Year2021.prototype.nextInset = function () { 1069 var self = this; 1070 var $insets = $('.year-review-2021-step'); 1071 if ($insets.length == 0) { 1072 return false; 1073 } 1074 var $activeInset; 1075 var activeInsetIndex = 0; 1076 var scrollTop = $(window).scrollTop(); 1077 1078 var windowHeight = $(window).height(); 1079 1080 1081 $insets.each(function (index, inset) { 1082 if($activeInset) { 1083 return; 1084 } 1085 var $inset = $(inset); 1086 var offset = 200; 1087 1088 var alignBottom = $inset.data('align-bottom'); 1089 if(typeof $inset.data('offset') != "undefined") { 1090 offset = parseInt($inset.data('offset')); 1091 } 1092 1093 if (self.getScrollPosition($inset) - 10 > scrollTop) { 1094 $activeInset = $inset; 1095 activeInsetIndex = index; 1096 } 1097 }); 1098 1099 var $target; 1100 1101 // did not scroll past first inset, go to it 1102 if (!$activeInset) { 1103 if(window.scrollY > 2000) { 1104 return; 1105 } 1106 $target = $($insets[0]); 1107 } else { 1108 $target = $activeInset; 1109 } 1110 1111 var duration = $target.data('duration'); 1112 self.scrollToElement($target, duration); 1113 1114 return true; 1115 } 1116 1117 Year2021.prototype.isQualifyedStopPoint = function (el) { 1118 var nextScrollY = this.getScrollPosition(el); 1119 console.log('window.scrollY + 10',window.scrollY + 10, nextScrollY); 1120 return window.scrollY + 10 < nextScrollY; 1121 } 1122 1123 Year2021.prototype.getScrollPosition = function (el) { 1124 var self = this; 1125 if (self.lastScrollAnimation) { 1126 self.lastScrollAnimation.pause(); 1127 } 1128 1129 var id = el.attr('id'); 1130 var alignBottom = el.data('align-bottom'); 1131 var ease = Power4.easeInOut; 1132 1133 var scrollingDown = el.offset().top - window.scrollY > 0; 1134 1135 var topSpace = 66; 1136 var bottomAligner = 20; 1137 if(typeof el.data("top") != "undefined") { 1138 topSpace = parseInt(el.data("top")); 1139 bottomAligner = parseInt(el.data("top")); 1140 } 1141 1142 if(typeof el.data("ease") != "undefined") { 1143 ease = Power4.easeOut; 1144 } 1145 1146 if(typeof el.data("easein") != "undefined") { 1147 ease = Power4.easeInOut; 1148 } 1149 1150 1151 if(alignBottom) { 1152 return el.offset().top + bottomAligner - $(window).height(); 1153 } 1154 return el.offset().top - topSpace; 1155 } 1156 1157 Year2021.prototype.initVideosModal = function (selector) { 1158 var self = this; 1159 1160 $('.year-review-2022--back').click(function(){ 1161 $('.modal-full-viewport .close').click(); 1162 }); 1163 1164 $('.year-review-2021--primary-menu-watch').click(function(){ 1165 $('[data-videoid="church-of-scientology-in-los-angeles-you-have-seen-us-video"]').click(); 1166 }); 1167 1168 $(selector).click(function(){ 1169 var $modal = $('.modal-full-viewport').first() 1170 $modal.addClass('visible'); 1171 1172 for (var player in videojs.players) { 1173 if (videojs.players.hasOwnProperty(player) && videojs.players[player]) { 1174 try { 1175 videojs.players[player].pause(); 1176 } catch (error) { 1177 } 1178 if($(videojs.players[player].el_).closest('.modal-full-viewport').length > 0) { 1179 videojs.players[player].dispose(); 1180 } 1181 } 1182 } 1183 1184 var videoId = $(this).data('videoid'); 1185 self.currentVideoId = videoId; 1186 1187 TweenMax.from($modal, 0.75, {scale: 0.9, autoAlpha: 0, ease: Power4.easeOut}); 1188 1189 if($(this).attr('id')) { 1190 window.history.replaceState( {} , '', '#' + $(this).attr('id') ); 1191 trackEvent("Video", "Play", $(this).attr('id')); 1192 } 1193 1194 var $el = $(this); 1195 1196 var showyoutube = false;
1197 var scntvlink = $el.data('scntv'); 1198 1199 if($el.data('youtube')) { 1200 showyoutube = true; 1201 } 1202 1203 $('.modal-youtube-embed--inited').remove(); 1204 1205 if(scntvlink) { 1206 $modal.find('.modal-scntv-video').clone().removeClass("d-none").prependTo($modal.find('.modal-video-wrapper')).addClass('modal-scntv-video--inited'); 1207 var src = $('.modal-scntv-video--inited iframe').attr('data-src').replace(/YOUTUBE_ID/g, $el.data('youtube')); 1208 $('.modal-scntv-video--inited').removeClass('d-none'); 1209 var src = $('.modal-scntv-video--inited iframe').data('src').replace("URL", scntvlink); 1210 $('.modal-scntv-video--inited iframe').attr('src', src); 1211 return; 1212 } else if(showyoutube) { 1213 $modal.find('.modal-youtube-embed').clone().prependTo($modal.find('.modal-video-wrapper')).addClass('modal-youtube-embed--inited'); 1214 var src = $('.modal-youtube-embed--inited iframe').attr('data-src').replace(/YOUTUBE_ID/g, $el.data('youtube')); 1215 $('.modal-youtube-embed--inited').removeClass('d-none'); 1216 $('.modal-youtube-embed--inited iframe').attr('src', src); 1217 return; 1218 } 1219 // https://www.youtube.com/watch?v=FiW5kejelns 1220 1221 $('.year-review-2022--primary-menu-bg, .banner-wrapper, .external-links').hide(); 1222 // $('.year-review-2021-nav').removeClass('year-review-2022-nav__visible'); 1223 1224 1225 var options = jQuery.extend({}, videoOptions); 1226 options.controls = true; 1227 options.poster = $(this).data('videoposter'); 1228 options.sources = $(this).data('videosrc'); 1229 1230 self.initModalVideo($modal, options, videoId); 1231 1232 // var url = new URL(window.location.href); 1233 // url.search = "?shareanchor=" + $(this).attr('id'); 1234 // url.hash = ""; 1235 // var link = url.href; 1236 // var title = $('[href="#'+$(this).attr('id')+'"]').first().text().trim(); 1237 // self.updateSharingButtons(title, link) 1238 }); 1239 1240 1241 window.onpopstate = function(event) { 1242 if($('.modal-full-viewport').hasClass('visible')) { 1243 history.replaceState({}, ''); 1244 event.preventDefault(); 1245 event.stopPropagation(); 1246 $('.modal-full-viewport .close').click(); 1247 } 1248 } 1249 1250 $('.modal-video-wrapper-up-next--button__cancel').click(function() { 1251 $('.modal-video-wrapper-up-next-wrapper').addClass('d-none'); 1252 self.upNextInterval && clearInterval(self.upNextInterval); 1253 }); 1254 1255 $('.modal-video-wrapper-up-next--button__play').click(function() { 1256 var currentVideo = $('.modal-full-viewport .swiper-slide__modal-video[data-id="'+self.currentVideoId+'"]'); 1257 var $next = currentVideo.next(); 1258 if($next.length == 0) { 1259 $next = $('.swiper-slide__modal-video').first(); 1260 } 1261 $next.click(); 1262 self.upNextInterval && clearInterval(self.upNextInterval); 1263 }); 1264 1265 $('.modal-full-viewport .close, .modal-full-viewport .year-review-2021--back__underlined').click(function () { 1266 $('.show-codes-button').removeClass('d-none'); 1267 TweenMax.to($('.modal-full-viewport'), 0.75, {scale: 0.9, autoAlpha: 0, clearProps:'all', ease: Power4.easeOut, onComplete: function(){ 1268 $('.modal-full-viewport').removeClass('visible'); 1269 }}); 1270 $('.modal-video-wrapper-up-next--button__cancel').click(); 1271 window.history.replaceState( {} , '', ''); 1272 if(window.videojs) { 1273 for (var player in videojs.players) { 1274 if (videojs.players.hasOwnProperty(player) && videojs.players[player]) { 1275 try { 1276 videojs.players[player].pause(); 1277 } catch (error) { 1278 } 1279 if($(videojs.players[player].el_).closest('.modal-full-viewport').length > 0) { 1280 videojs.players[player].dispose(); 1281 } 1282 } 1283 } 1284 } 1285 _.each(self.videoPlayers, function (player) {
1286 player && player.dispose(); 1287 }); 1288 self.videoPlayers = []; 1289 $('.modal-youtube-embed--inited').remove(); 1290 $('.modal-scntv-video--inited').remove(); 1291 VideoPlayerHotkeys.player = null; 1292 $('.year-review-2022--primary-menu-bg, .banner-wrapper, .external-links').show(); 1293 // $('.year-review-2021-nav').addClass('year-review-2022-nav__visible'); 1294 1295 _.each($('.year-end-2022--playbutton-area'), function (el, index) { 1296 var $el = $(el); 1297 if(isFullyVisible($el) && $el.find('video').muted) { 1298 $el.find('video')[0].play(); 1299 } 1300 }); 1301 1302 history.replaceState(null, null, "#"); 1303 }); 1304 1305 } 1306 1307 Year2021.prototype.initModalVideo = function ($modal, options, videoId) { 1308 $modal.find('.modal-player__model').clone().prependTo($modal.find('.modal-video-wrapper')).removeClass('d-none').removeClass('modal-player__model'); 1309 var videoEl = $('[data-videosrc][data-videoid="' + videoId + '"]'); 1310 var self = this; 1311 videojs($modal.find('.video-js')[0], options).ready(function () { 1312 if (VideoPlayerHotkeys) { 1313 VideoPlayerHotkeys.player = this; 1314 } 1315 EventTracker.trackVideo(this); 1316 this.on('play', function () { 1317 $('.modal-video-wrapper-up-next-wrapper').addClass('d-none'); 1318 }); 1319 this.play(); 1320 self.videoPlayers = self.videoPlayers || []; 1321 self.videoPlayers.push(this); 1322 1323 var player = this; 1324 1325 1326 this.on("ended", function () { 1327 $('.year-review-2022--back').click(); 1328 // player.poster(''); 1329 // var currentVideo = $('.modal-full-viewport .swiper-slide__modal-video[data-id="' + self.currentVideoId + '"]'); 1330 // var $next = currentVideo.next(); 1331 // if ($next.length == 0) { 1332 // $next = $('.swiper-slide__modal-video').first(); 1333 // } 1334 // $('.modal-video-wrapper-up-next-wrapper').removeClass('d-none'); 1335 // $('.modal-video-wrapper-up-next-wrapper .modal-video-wrapper-up-next--title').html($next.find('.swiper-slide__modal-video--title').html()); 1336 // $('.modal-video-wrapper-up-next-wrapper img').attr('srcset', $next.find('source').attr('srcset')); 1337 // $('.modal-video-wrapper-up-next-wrapper img').attr('data-srcset', $next.find('source').attr('data-srcset')); 1338 // $('.modal-video-wrapper-up-next-wrapper img').addClass('lazyload'); 1339 // self.setUpNext($next); 1340 }); 1341 }); 1342 } 1343 1344 Year2021.prototype.initControls = function () { 1345 var self = this; 1346 1347 $(document).keydown(function (e) { 1348 var arrow = { left: 37, up: 38, right: 39, down: 40 }; 1349 1350 switch (e.which) { 1351 case arrow.left: 1352 for (var index = 0; index < self.swipers.length; index++) { 1353 var swiper = self.swipers[index]; 1354 if(isInViewportVisible(swiper.$el)) { 1355 var index = swiper.$el.attr('data-swiper-index'); 1356 self.swipers[parseInt(index)].slidePrev(); 1357 } 1358 } 1359 break; 1360 case arrow.up: 1361 if (self.prevInset()) { 1362 e.preventDefault(); 1363 e.stopPropagation(); 1364 $('.year-review-2021-nav__up').addClass('year-review-2021-nav__up-pressed'); 1365 setTimeout(function() { 1366 $('.year-review-2021-nav__up').removeClass('year-review-2021-nav__up-pressed'); 1367 }, 1100); 1368 return; 1369 } 1370 break; 1371 case arrow.right: 1372 for (var index = 0; index < self.swipers.length; index++) { 1373 var swiper = self.swipers[index]; 1374 if(isInViewportVisible(swiper.$el)) { 1375 var index = swiper.$el.attr('data-swiper-index'); 1376 self.swipers[parseInt(index)].slideNext(); 1377 } 1378 } 1379 break; 1380 case arrow.down: 1381 if (self.nextInset()) { 1382 e.preventDefault(); 1383 e.stopPropagation(); 1384 $('.year-review-2021-nav__down').addClass('year-review-2021-nav__down__pressed'); 1385 setTimeout(function() { 1386 $('.year-review-2021-nav__down').removeClass('year-review-2021-nav__down__pressed'); 1387 }, 1100); 1388 return; 1389 } 1390 break; 1391 case 32: 1392 for (var index in videojs.players) { 1393 if (Object.hasOwnProperty.call(videojs.players, index)) { 1394 var video = videojs.players[index]; 1395 var $el = $(video.el()); 1396 if(isInViewportVisible($el) && self.qualifiedAutoplay($el)) { 1397 var $wrapper = $el.closest('.show-on-the-road--playbutton-area'); 1398 var videoPlaying = $wrapper.hasClass('show-on-the-road-videoautoplay__inline');
1399 if(!videoPlaying) { 1400 $wrapper.click(); 1401 } else if(video.paused()) { 1402 video.play(); 1403 } else { 1404 video.pause(); 1405 } 1406 1407 e.preventDefault(); 1408 e.stopPropagation(); 1409 } 1410 } 1411 } 1412 break; 1413 } 1414 }); 1415 } 1416 1417 1418 1419 Year2021.prototype.initAnchors = function () { 1420 if(window.location.hash && $(window.location.hash).hasClass('year-end-2022--playbutton-area')) { 1421 $(window.location.hash).click(); 1422 } 1423 1424 $('.year-review-2021--menuitem-subitem a').click(function(){ 1425 var href = $(this).attr('href'); 1426 if(href && $(href).hasClass('year-end-2022--playbutton-area')) { 1427 $(href).click(); 1428 } 1429 }); 1430 } 1431 1432 1433 Year2021.prototype.scrollToElement = function (el, duration) { 1434 var self = this; 1435 if (self.lastScrollAnimation) { 1436 self.lastScrollAnimation.pause(); 1437 } 1438 1439 var id = el.attr('id'); 1440 var alignBottom = el.data('align-bottom'); 1441 var dur = 2; 1442 var ease = Power4.easeInOut; 1443 1444 if(duration) { 1445 dur = duration / 1000; 1446 } 1447 1448 var scrollingDown = el.offset().top - window.scrollY > 0; 1449 1450 var topSpace = 66; 1451 var bottomAligner = 20; 1452 if(typeof el.data("top") != "undefined") { 1453 topSpace = parseInt(el.data("top")); 1454 bottomAligner = 0; 1455 } 1456 1457 if(typeof el.data("ease") != "undefined") { 1458 ease = Power4.easeOut; 1459 } 1460 1461 if(typeof el.data("easein") != "undefined") { 1462 ease = Power4.easeInOut; 1463 } 1464 1465 1466 if(id == "to-psas" && scrollingDown) { 1467 var startY = window.scrollY; 1468 var destination = el.offset().top - topSpace; 1469 var dist = destination - startY; 1470 var tl = new TimelineMax(); 1471 // tl.to(window, 0.75, { 1472 // scrollTo: { 1473 // y: startY + dist * 0.1 1474 // }, 1475 // ease:Linear.easeNone 1476 // }); 1477 tl.to(window, 10, { 1478 scrollTo: { 1479 y: startY + dist 1480 }, 1481 ease: Power4.easeOut 1482 }); 1483 self.lastScrollAnimation = tl; 1484 } else if(id == "to-digital" && scrollingDown) { 1485 var startY = window.scrollY; 1486 // align to bottom 1487 var destination = el.offset().top - topSpace - $(window).height(); 1488 var dist = destination - startY; 1489 1490 var tl = new TimelineMax(); 1491 tl.to(window, 1.5, { 1492 scrollTo: { 1493 y: startY + dist * 0.1 1494 }, 1495 ease:Linear.easeNone 1496 }); 1497 tl.to(window, 4, { 1498 scrollTo: { 1499 y: startY + dist 1500 }, 1501 ease:Linear.easeNone 1502 }); 1503 self.lastScrollAnimation = tl; 1504 } else if(alignBottom) { 1505 self.lastScrollAnimation = TweenMax.to(window, dur, { 1506 scrollTo: { 1507 y: el.offset().top + topSpace + bottomAligner - $(window).height(), 1508 }, 1509 ease: ease, 1510 }); 1511 } else { 1512 self.lastScrollAnimation = TweenMax.to(window, dur, { 1513 scrollTo: { 1514 y: el.offset().top - topSpace, 1515 }, 1516 ease: ease, 1517 }); 1518 } 1519 } 1520 1521 Year2021.prototype.initBgParallax = function () { 1522 var self = this; 1523 1524 var browser = bowser.getParser(window.navigator.userAgent); 1525 // only chrome 1526 if(!browser.satisfies( 1527 { 1528 desktop: { 1529 chrome: ">1" 1530 } 1531 }, 1532 ) || browser.is("mobile")){ 1533 return 1534 } 1535 1536 // var bgTween = TweenMax.to(".year-review-2022-background", 1, { backgroundPosition: "0% -" + Math.round(this.getPageHeight() * 0.05 * 0.5) + "px" }); 1537 var bgTween = TweenMax.to(".year-review-2022-background", 1, { backgroundPosition: "0% " + Math.round(this.getPageHeight() * 0.1) + "px" }); 1538 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper", triggerHook: "onLeave", reverse: true, duration: self.getPageHeight }) 1539 .setTween(bgTween) 1540 // .addIndicators() // add indicators (requires plugin) 1541 .addTo(self.controller); 1542 } 1543 1544 Year2021.prototype.initTopAnimation = function () { 1545 var self = this; 1546 var tl = new TimelineMax(); 1547 tl.staggerFromTo(".year-review-2021--year-20", 1, { autoAlpha: 0, scale: 5 }, { autoAlpha: 1, scale: 1, ease: Power4.easeOut }, 0.5 ); 1548 tl.fromTo(".year-review-2021--year-subtitle", 0.5, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "-=0.3") 1549 tl.fromTo(".show-on-road--bounce", 0.5, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, ease: Power4.easeOut }, "-=0.3") 1550 1551 self.addResizeCallback(function(){ 1552 var bgTween = TweenMax.to(".time-to-rise--top-wrapper-bg.time-to-rise--top-wrapper-bg__fixed", 1, { backgroundPosition: "50% -" + Math.round(self.getWindowHeight() * 0.2) + "px" }); 1553 self.addResizeScene( 1554 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1555 .setTween(bgTween) 1556 .addTo(self.controller) 1557 ); 1558 1559 1560 self.addResizeScene( 1561 new ScrollMagic.Scene({ triggerElement: ".year-review-2022-to-be-more-wrapper", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1562 .setClassToggle('.time-to-rise--top-wrapper-bg', 'time-to-rise--top-wrapper-bg__fixed') 1563 .addTo(self.controller) 1564 ); 1565 1566 var bgTween = TweenMax.to(".time-to-rise--top-wrapper-bg-item__rocks1", 1, { y: -1 * self.getWindowHeight() * 0.3 }); 1567 self.addResizeScene( 1568 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1569 .setTween(bgTween) 1570 .addTo(self.controller) 1571 ); 1572 1573 var bgTween2 = TweenMax.to(".time-to-rise--top-wrapper-bg-item__rocks2", 1, { y: -1 * self.getWindowHeight() * 0.2 }); 1574 self.addResizeScene( 1575 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1576 .setTween(bgTween2) 1577 .addTo(self.controller) 1578 ); 1579 1580 var bgTween3 = TweenMax.to(".time-to-rise--top-wrapper-bg-item__rocks3", 1, { y: -1 * self.getWindowHeight() * 0.1 }); 1581 self.addResizeScene( 1582 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1583 .setTween(bgTween3) 1584 .addTo(self.controller) 1585 ); 1586 }); 1587 } 1588 1589 Year2021.prototype.initTopAnimation2 = function (initFullAnimation) { 1590 var self = this; 1591 1592 if(self.initingTopAnimation) { 1593 return; 1594 } 1595 self.initingTopAnimation = true; 1596 1597 if(self.initedtop) { 1598 return; 1599 } 1600 self.initedtop=true; 1601 1602 1603 if(self.topBgScenes) { 1604 for (var index = 0; index < self.topBgScenes.length; index++) { 1605 var scene = self.topBgScenes[index]; 1606 scene.progress(0) 1607 scene.destroy(); 1608 } 1609 } else { 1610 $(window).resize(function(){ 1611 self.initTopAnimation(initFullAnimation); 1612 }); 1613 } 1614 self.topBgScenes = []; 1615 1616 1617 1618 // var bgTween = TweenMax.to(".time-to-rise--top-wrapper-bg.time-to-rise--top-wrapper-bg__fixed", 1, { y: -1 * self.getWindowHeight() * 0.2 }); 1619 var bgTween = TweenMax.to(".time-to-rise--top-wrapper-bg.time-to-rise--top-wrapper-bg__fixed", 1, { backgroundPosition: "50% -" + Math.round(this.getWindowHeight() * 0.2) + "px" }); 1620 self.topBgScenes.push( 1621 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1622 .setTween(bgTween) 1623 .addTo(self.controller) 1624 ); 1625 1626 1627 self.topBgScenes.push( 1628 new ScrollMagic.Scene({ triggerElement: ".year-review-2022-to-be-more-wrapper", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1629 .setClassToggle('.time-to-rise--top-wrapper-bg', 'time-to-rise--top-wrapper-bg__fixed') 1630 .addTo(self.controller) 1631 ); 1632 1633 var bgTween = TweenMax.to(".time-to-rise--top-wrapper-bg-item__rocks1", 1, { y: -1 * self.getWindowHeight() * 0.3 }); 1634 self.topBgScenes.push( 1635 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1636 .setTween(bgTween) 1637 .addTo(self.controller) 1638 ); 1639 1640 var bgTween2 = TweenMax.to(".time-to-rise--top-wrapper-bg-item__rocks2", 1, { y: -1 * self.getWindowHeight() * 0.2 }); 1641 self.topBgScenes.push( 1642 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1643 .setTween(bgTween2) 1644 .addTo(self.controller) 1645 ); 1646 1647 var bgTween3 = TweenMax.to(".time-to-rise--top-wrapper-bg-item__rocks3", 1, { y: -1 * self.getWindowHeight() * 0.1 }); 1648 self.topBgScenes.push( 1649 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1650 .setTween(bgTween3) 1651 .addTo(self.controller) 1652 ); 1653 1654 1655 if(this.isMobile()) { 1656 $('.year-review-2022-text-rotate').addClass('year-review-2022-text-rotate__block'); 1657 $('.year-review-2022-text-rotate--item').addClass('year-review-2022-text-rotate--item__static'); 1658 return; 1659 } else { 1660 1661 self.topBgScenes.push(new ScrollMagic.Scene({ triggerElement: '.reveal-tunnel-earth-end', triggerHook: 'onLeave', reverse: true, duration: "200%" })
1662 .setPin('.reveal-tunnel-earth', { 1663 pushFollowers: false, 1664 }) 1665 //.addIndicators() // add indicators (requires plugin) 1666 .addTo(self.controller) 1667 ); 1668 1669 var $wrappers = $(".year-review-2022-text-rotate-wrapper__first"); 1670 for (var wrapperIndex = 0; wrapperIndex < $wrappers.length; wrapperIndex++) { 1671 1672 var $wrapper = $($wrappers[wrapperIndex]); 1673 1674 var wrapperDuration = "100%"; 1675 1676 if(!self.topPinInited){ 1677 self.topBgScenes.push( 1678 new ScrollMagic.Scene({ 1679 triggerElement: $wrapper[0], 1680 triggerHook: 'onLeave', 1681 duration: wrapperDuration, 1682 }) 1683 .setPin($wrapper[0], { 1684 pushFollowers: false, 1685 }) 1686 .addTo(self.controller) 1687 ); 1688 } 1689 1690 var $items = $wrapper.find('.year-review-2022-text-rotate--item'); 1691 1692 for (var index = 0; index < $items.length; index++) { 1693 var $item = $items[index]; 1694 1695 var offset = $wrapper.height() / 3 * index; 1696 var duration = $wrapper.height() / 3 * 0.8; 1697 1698 1699 if(index == 0) { 1700 var tween = TweenMax.from($item, 1, { y: 50 }); 1701 var tween2 = TweenMax.from($item, 1, { autoAlpha: 0 }); 1702 1703 self.topBgScenes.push( 1704 new ScrollMagic.Scene({ triggerElement: $wrapper[0], triggerHook: "onLeave", reverse: true, offset: offset, duration: duration }) 1705 .setTween(tween) 1706 .addTo(self.controller) 1707 ); 1708 1709 self.topBgScenes.push( 1710 new ScrollMagic.Scene({ triggerElement: $wrapper[0], triggerHook: "onLeave", reverse: true, offset: offset, duration: duration / 2 }) 1711 .setTween(tween2) 1712 .addTo(self.controller) 1713 ); 1714 1715 } else if(index > 0 ) { 1716 var tween = TweenMax.from($item, 1, { y: 50, autoAlpha: 0 }); 1717 self.topBgScenes.push( 1718 new ScrollMagic.Scene({ triggerElement: $wrapper[0], triggerHook: "onLeave", reverse: true, offset: offset, duration: duration }) 1719 .setTween(tween) 1720 .addTo(self.controller) 1721 ); 1722 var tween2 = TweenMax.to($items[index - 1], 1, { y: -50, autoAlpha: 0 }, 0); 1723 self.topBgScenes.push( 1724 new ScrollMagic.Scene({ triggerElement: $wrapper[0], triggerHook: "onLeave", reverse: true, offset: offset-100, duration: duration }) 1725 .setTween(tween2) 1726 .addTo(self.controller) 1727 ); 1728 } 1729 1730 // var tl = new TimelineMax(); 1731 // tl.from($item, 1, { y: 150, autoAlpha: 0 }); 1732 1733 // if(index > 0 ) { 1734 // tl.to($items[index - 1], 1, { y: -50, autoAlpha: 0 }, 0); 1735 // } 1736 1737 // self.topBgScenes.push( 1738 // new ScrollMagic.Scene({ triggerElement: $wrapper[0], triggerHook: "onLeave", reverse: true, offset: offset, duration: duration }) 1739 // .setTween(tl) 1740 // .addTo(self.controller) 1741 // ); 1742 } 1743 } 1744 } 1745 1746 1747 1748 1749 if(!self.topPinInited){ 1750 var h1Tween = TweenMax.to(".year-review-2022-title-h1-wrapper", 1, { y: -50 }); 1751 self.topBgScenes.push( 1752 new ScrollMagic.Scene({ triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", triggerHook: "onLeave", reverse: true, duration: "100%" }) 1753 .setTween(h1Tween) 1754 // .addIndicators() // add indicators (requires plugin) 1755 .addTo(self.controller) 1756 ); 1757 1758 // new ScrollMagic.Scene({ 1759 // triggerElement: ".time-to-rise--top-wrapper-bg-person-trigger", 1760 // triggerHook: 'onLeave', 1761 // duration: "150%", 1762 // }) 1763 // .setPin(".year-review-2022-title-h1-wrapper", { 1764 // pushFollowers: false, 1765 // }) 1766 // // .addIndicators() // add indicators (requires plugin) 1767 // .addTo(self.controller); 1768 1769 // var tlRideWave = new TimelineMax(); 1770 // tlRideWave.staggerFrom(".year-review-2022--rode-a-wave", 0.8, { y: 100, autoAlpha: 0 }, "0.3"); 1771 // tlRideWave.from(".year-review-2022--rode-a-wave-image", 0.5, { y: 100, autoAlpha: 0 }, "-=0.1"); 1772 // new ScrollMagic.Scene({ triggerElement: '.year-review-2022-top-fadeout-trigger', triggerHook: "onCenter", offset: 200, reverse: true, duration: 200 }) 1773 // .setTween(tlRideWave) 1774 // .on("destroy", function (event) { 1775 // tlRideWave.progress(0); 1776 // }) 1777 // // .addIndicators() // add indicators (requires plugin) 1778 // .addTo(self.controller); 1779 1780 self.topPinInited = true; 1781 } 1782 1783 self.initingTopAnimation = false;
1784 } 1785 1786 1787 1788 Year2021.prototype.initFloats = function () { 1789 var self = this; 1790 1791 $('.year-review-2021-4d-button').each(function () { 1792 var triggerElement = this; 1793 1794 var tween = TweenMax.from(this, 1.5, { x: -50, autoAlpha: 0, ease: Power4.easeOut }); 1795 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, duration: 0 }) 1796 .setTween(tween) 1797 .addTo(self.controller); 1798 1799 var tweenBG = TweenMax.from(this.querySelector('.year-review-2021-4d-button_bg'), 1.5, { scaleX: 0, ease: Power4.easeOut }); 1800 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, duration: 0 }) 1801 .setTween(tweenBG) 1802 .addTo(self.controller); 1803 }); 1804 1805 $('.year-review-2021--float-bottom').each(function () { 1806 var $el = $(this); 1807 var yOffset = 50; 1808 var xOffset = 0; 1809 var offset = 100; 1810 var duration = 0.5; 1811 var delay = 0; 1812 var triggerElement = this; 1813 1814 if (typeof $el.data('trigger') != "undefined") { 1815 triggerElement = $el.data('trigger'); 1816 } 1817 if (typeof $el.data('yoffset') != "undefined") { 1818 yOffset = $el.data('yoffset'); 1819 } 1820 if (typeof $el.data('xoffset') != "undefined") { 1821 xOffset = $el.data('xoffset'); 1822 } 1823 if (typeof $el.data('offset') != "undefined") { 1824 offset = $el.data('offset'); 1825 } 1826 if (typeof $el.data('duration') != "undefined") { 1827 duration = $el.data('duration'); 1828 } 1829 if (typeof $el.data('delay') != "undefined") { 1830 delay = $el.data('delay'); 1831 } 1832 1833 var tween = TweenMax.from(this, duration, { delay: delay, y: yOffset, x: xOffset, autoAlpha: 0, ease: Power4.easeOut }); 1834 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 1835 .setTween(tween) 1836 .setClassToggle(this, 'visible') 1837 // .addIndicators() // add indicators (requires plugin) 1838 .addTo(self.controller); 1839 }); 1840 1841 $('.year-review-2022-tools-stars-wrapper').each(function () { 1842 var triggerElement = this; 1843 var offset = 100; 1844 1845 var tl = new TimelineMax(); 1846 tl.staggerFrom( $(this).find('.year-review-2022-tools-star'), 0.5, { scale: 10, autoAlpha: 0 }, 0.1); 1847 new ScrollMagic.Scene({ triggerElement: triggerElement, triggerHook: 1, reverse: true, offset: offset, duration: 0 }) 1848 .setTween(tl) 1849 .setClassToggle(this, 'visible') 1850 // .addIndicators() // add indicators (requires plugin) 1851 .addTo(self.controller); 1852 }); 1853 1854 var tlOrgProtection = new TimelineMax(); 1855 tlOrgProtection.from('.year-review-2022-org-protection-item-1', 0.5, {x: -25, y: 100, autoAlpha: 0}, 0); 1856 tlOrgProtection.from('.year-review-2022-org-protection-item-2', 0.5, {x: 25, y: -100, autoAlpha: 0}, 0); 1857 tlOrgProtection.from('.year-review-2022-org-protection-item-3', 0.5, {x: -25, y: 100, autoAlpha: 0}, 0); 1858 tlOrgProtection.from('.year-review-2022-org-protection-item-4', 0.5, {x: 25, y: -100, autoAlpha: 0}, 0); 1859 1860 new ScrollMagic.Scene({ triggerElement: '.year-review-2022-org-protection-row', triggerHook: 0.5, reverse: true, offset: 0, duration: 0 }) 1861 .setTween(tlOrgProtection) 1862 .addTo(self.controller); 1863 } 1864 1865 1866 Year2021.prototype.initGrowingLines = function () { 1867 var self = this; 1868 1869 $('.year-review-2022-vertical-line--inner').each(function () { 1870 var $el = $(this); 1871 var tween = TweenMax.from(this, 0.7, { scaleY: 0 }); 1872 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: true, offset: 80, duration: 0 }) 1873 .setTween(tween) 1874 .setClassToggle(this, 'visible') 1875 // .addIndicators() // add indicators (requires plugin) 1876 .addTo(self.controller); 1877 }); 1878 } 1879 1880 Year2021.prototype.initOdometers = function () { 1881 var self = this; 1882 1883 $('[data-odomerter] counter').each(function () { 1884 var $odom = $(this).css('visibility', 'hidden'); 1885 $odom.attr('data-number', $odom.text()); 1886 $odom.text('1'); 1887 new Odometer({ 1888 el: this, 1889 format: $odom.closest('[data-odomerter]').data('format') || 'd', 1890 }); 1891 1892 var $el = $(this); 1893 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: true, offset: 50, duration: 1 }) 1894 .on("start", function (event) { 1895 $el.css('visibility', 'visible'); 1896 if(event.state == "BEFORE") { 1897 $el.text(''); 1898 } else { 1899 $el.html($el.attr('data-number')); 1900 } 1901 }) 1902 // .setTween(tween) 1903 // .addIndicators() // add indicators (requires plugin) 1904 .addTo(self.controller); 1905 }); 1906 1907 $('.staywell-psa-number-of-views-counter counter').each(function () { 1908 var $el = $(this); 1909 var maxNumber = parseInt($el.text().replace(new RegExp(",", 'g'), "")); 1910 var currentNumber = maxNumber - 100000; 1911 1912 var counter = new window.countUp.CountUp(this, maxNumber, { 1913 ââstartVal: currentNumber, 1914 âduration: 100000, 1915 separator: $el.closest(".staywell-psa-number-of-views-counter").data("separator"), 1916 }); 1917 1918 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, reverse: false, offset: 100, duration: 1 }) 1919 .on("start", function (e) { 1920 counter.start(); 1921 $el.css('visibility', 'visible'); 1922 }) 1923 // .addIndicators() // add indicators (requires plugin) 1924 .addTo(self.controller); 1925 }); 1926 } 1927
1928 Year2021.prototype.initSourceBriefingRow = function () { 1929 var self = this; 1930 1931 _.each($('.year-review-2023-source-briefing-row'), function (element, index) { 1932 var $el = $(element); 1933 var direction = parseInt($el.data("direction")); 1934 var offset = parseInt($el.data("person-offset")); 1935 1936 self.addResizeCallback(function(){ 1937 TweenMax.set(element, {x: 0}); 1938 1939 var xOffset = $el.find('.year-review-2023-source-briefing-item__person').position().left - offset; 1940 1941 if(self.isMobile()) { 1942 xOffset = $el.offset().left + $el.find('.year-review-2023-source-briefing-item__person').position().left; 1943 var rowWidth = $el.children().last().position().left + $el.children().last().width(); 1944 var visibleRowWidth = $el.find('.year-review-2023-source-briefing-item__person').offset().left - xOffset + (rowWidth - $el.find('.year-review-2023-source-briefing-item__person').position().left); 1945 if(visibleRowWidth < self.getWindowOuterWidth()) { 1946 xOffset = xOffset - (self.getWindowOuterWidth() - visibleRowWidth); 1947 } else { 1948 xOffset -= 25; 1949 } 1950 } else if( self.getWindowOuterWidth() < 1200) { 1951 if($el.find('.year-review-2023-source-briefing-item__person').width() + $el.find('.year-review-2023-source-briefing-item__person').offset().left - xOffset > self.getWindowOuterWidth()) { 1952 xOffset = $el.find('.year-review-2023-source-briefing-item__person').position().left; 1953 } else if($el.find('.year-review-2023-source-briefing-item__person').offset().left - xOffset < 0 || 1954 $el.find('.year-review-2023-source-briefing-item__person').position().left + $el.find('.year-review-2023-source-briefing-item__person').width() - xOffset + $el.parent().width() 1955 ) { 1956 xOffset = $el.find('.year-review-2023-source-briefing-item__person').position().left; 1957 } 1958 } 1959 1960 var tween = TweenMax.fromTo(element, 1.5, {x: 0, autoAlpha: 0}, {x: -xOffset, autoAlpha: 1}) 1961 if(direction < 0) { 1962 tween = TweenMax.fromTo(element, 1.5, {x: -xOffset - 200, autoAlpha: 0}, {x: -xOffset, autoAlpha: 1}) 1963 } 1964 1965 self.addResizeScene( 1966 new ScrollMagic.Scene({ 1967 triggerElement: element, 1968 triggerHook: 'onEnter', 1969 offset: 100, 1970 }) 1971 .setTween(tween) 1972 .addTo(self.controller) 1973 ); 1974 }); 1975 }); 1976 } 1977 1978 Year2021.prototype.initAOScaleDown = function () { 1979 var self = this; 1980 $('.year-review-2022-ao-full').each(function () { 1981 var text = this.querySelector('.year-review-2022-cont-title'); 1982 var el = this.querySelector('.year-review-2022-ao-full-wrapper'); 1983 var scale = self.getWindowOuterWidth() / $('.container').width(); 1984 var tl = new TimelineMax(); 1985 tl.from(el, 0.7, { scale: scale }); 1986 tl.from(text, 0.7, { autoAlpha: 0 }, 0.5); 1987 new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.3, reverse: true, duration: "40%" }) 1988 .setTween(tl) 1989 .addTo(self.controller); 1990 }); 1991 } 1992 1993 1994 Year2021.prototype.initLineGlow = function () { 1995 var self = this; 1996 1997 $('.year-review-2021-glow-line').each(function () { 1998 // var $el = $(this); 1999 var tween = TweenMax.from(this, 0.7, { height: 0 }); 2000 new ScrollMagic.Scene({ triggerElement: this, triggerHook: "onEnter", reverse: true, offset: 100, duration: 0 }) 2001 .setTween(tween) 2002 .setClassToggle(this, 'year-review-2021-glow-line__visible') 2003 .addTo(self.controller); 2004 }); 2005 } 2006 2007 Year2021.prototype.initQuoteAnimation = function (el) { 2008 var self = this; 2009 2010 var tl = new TimelineMax(); 2011 tl.fromTo($('.year-review-2022--flare__top'), 2, { x: "100%", autoAlpha: 0 }, { x: "-100%", autoAlpha: 1 }); 2012 tl.fromTo($('.year-end-2022--ounce-quote'), 2, { scale: 0.5, autoAlpha: 0 }, { scale: 1, autoAlpha: 1 }, "0.2"); 2013 tl.fromTo($('.year-review-2022--flare__bottom'), 2, { x: "-100%", autoAlpha: 0 }, { x: "0%", autoAlpha: 1 }, "0.3"); 2014 tl.fromTo($('.year-end-2022--ounce-author'), 2, { autoAlpha: 0 }, { autoAlpha: 1 }, "-=0.2"); 2015 2016 new ScrollMagic.Scene({ triggerElement: '.year-review-2022-af-quote-bg', triggerHook: 1, reverse: true, offset: 100, duration: 0 }) 2017 .setTween(tl) 2018 // .setClassToggle('.decade-2020-large-title__years', 'visible') 2019 // .addIndicators() // add indicators (requires plugin) 2020 .addTo(self.controller); 2021 } 2022
2023 Year2021.prototype.initScnNWBackground = function () { 2024 var self = this; 2025 new ScrollMagic.Scene({ triggerElement: '.digital-matrix-trigger', triggerHook: 1.0, reverse: true }) 2026 .setClassToggle('.year-review-2022-network-section-bg', 'year-review-2022-network-section-bg__visible') 2027 // .addIndicators() // add indicators (requires plugin) 2028 .addTo(self.controller); 2029 2030 new ScrollMagic.Scene({ triggerElement: '.year-review-2022-network-section-bg-end', triggerHook: 0.5, reverse: true }) 2031 .setClassToggle('.year-review-2022-network-section-bg', 'year-review-2022-network-section-bg__hidden') 2032 // .addIndicators() // add indicators (requires plugin) 2033 .addTo(self.controller); 2034 2035 } 2036 2037 Year2021.prototype.initScrollPosition = function () { 2038 var self = this; 2039 self.calculateSectionSize(); 2040 var halfScreen = $(window).height() * 0.5; 2041 $(window).resize(function(){ 2042 self.calculateSectionSize(); 2043 halfScreen = $(window).height() * 0.5; 2044 }); 2045 2046 $(window).scroll(function(){ 2047 var scrollTop = window.scrollY + halfScreen; 2048 var activeSection = self.sections[ self.sections.length - 1 ]; 2049 var foundSection = false; 2050 for (var index = 0; index < self.sections.length; index++) { 2051 var section = self.sections[index]; 2052 if(section.start <= scrollTop && scrollTop < section.end) { 2053 foundSection = true; 2054 activeSection = self.sections[ index ]; 2055 break; 2056 } 2057 } 2058 2059 if(!foundSection) { 2060 TweenMax.set('.show-on-the-road--primary-menu__progress', {scaleX: 0}); 2061 return; 2062 } 2063 2064 var activeSectionProgress = (scrollTop - activeSection.start) / (activeSection.end - activeSection.start); 2065 var totalProgress; 2066 var totalProgressW = 0; 2067 if(self.isMobile()) { 2068 totalProgress = activeSectionProgress; 2069 } else { 2070 for (var index = 0; index < self.sections.length; index++) { 2071 var section = self.sections[index]; 2072 if(section.start < activeSection.start) { 2073 totalProgressW += section.width; 2074 } 2075 } 2076 2077 totalProgressW += activeSectionProgress * activeSection.width; 2078 totalProgress = totalProgressW / $('.show-on-the-road--primary-menu').width(); 2079 } 2080 if(totalProgress > 1) { 2081 totalProgress = 1; 2082 } 2083 2084 TweenMax.set('.show-on-the-road--primary-menu__progress', {scaleX: totalProgress}); 2085 }); 2086 } 2087 2088 Year2021.prototype.calculateSectionSize = function () { 2089 var sections = []; 2090 var start = 0; 2091 var isMobile = this.isMobile(); 2092 $('.show-on-the-road--menuitem').each(function (index) { 2093 var $el = $(this); 2094 var margin = parseInt($el.css("paddingRight").replace('px', '')) * 2; 2095 if(isNaN(margin)) { 2096 margin = 0; 2097 } 2098 var width = $el.width() + margin; 2099 // length = $($el.find('a').attr('href')).offset().top; 2100 var end = 0; 2101 if($el.next().length > 0 && $el.next().find('a').length > 0) { 2102 end = $($el.next().find('a').attr('href')).offset().top; 2103 } else { 2104 end = $('.end-of-article').offset().top; 2105 } 2106 if(isMobile) { 2107 width = $(window).width(); 2108 } 2109 if(start == 0) { 2110 start = $($el.find('a').attr('href')).offset().top; 2111 } 2112 sections.push({ 2113 start: start, 2114 end: end, 2115 width: width, 2116 }); 2117 start = end; 2118 }); 2119 this.sections = sections; 2120 } 2121 2122 2123 2124 Year2021.prototype.getPageHeight = function () { 2125 // called from ScrollMagic 2126 var self = window.Year2021 || this;
2127 if(!self.cachedPageHeight) { 2128 self.cachedPageHeight = $(document).height(); 2129 } 2130 return self.cachedPageHeight; 2131 } 2132 2133 Year2021.prototype.getWindowHeight = function () { 2134 // called from ScrollMagic 2135 var self = window.Year2021 || this; 2136 if(!self.cachedWindowHeight) { 2137 self.cachedWindowHeight = $(window).height(); 2138 } 2139 return self.cachedWindowHeight; 2140 } 2141 2142 Year2021.prototype.getWindowOuterWidth = function () { 2143 // called from ScrollMagic 2144 var self = window.Year2021 || this; 2145 if(!self.cachedOuterWindowWidth) { 2146 self.cachedOuterWindowWidth = $(window).outerWidth(); 2147 } 2148 return self.cachedOuterWindowWidth; 2149 } 2150 2151 Year2021.prototype.initParallax = function () { 2152 var self = this; 2153 2154 _.each($('.year-review-2022---parallax'), function (element, index) { 2155 var offset = element.getAttribute('data-parallax-offset'); 2156 var offsetFrom = element.getAttribute('data-parallax-offset-from'); 2157 2158 if (self.isMobile() && element.getAttribute('data-parallax-offset-mobile')) { 2159 offset = element.getAttribute('data-parallax-offset-mobile'); 2160 } 2161 2162 var startOffset = 0; 2163 if(element.getAttribute("data-start-offset")) { 2164 startOffset = parseInt(element.getAttribute("data-start-offset")); 2165 } 2166 2167 var duration = 1; 2168 if(element.getAttribute("data-duration")) { 2169 duration = parseInt(element.getAttribute("data-duration")); 2170 } 2171 2172 if(element.getAttribute("data-start-offset-mobile") && self.isMobile()) { 2173 startOffset = parseInt(element.getAttribute("data-start-offset-mobile")); 2174 } 2175 2176 var tween; 2177 2178 if(offsetFrom) { 2179 tween = TweenMax.fromTo(element, 0.5, { y: offsetFrom }, { y: offset }); 2180 } else { 2181 tween = TweenMax.to(element, 0.5, { y: offset }); 2182 } 2183 2184 2185 new ScrollMagic.Scene({ triggerElement: element, triggerHook: 1, offset: startOffset, reverse: true, duration: function(){ 2186 return duration * self.getWindowHeight(); 2187 } }) 2188 // new ScrollMagic.Scene({ triggerElement: element, triggerHook: 1, offset: startOffset, reverse: true, duration: "500%"}) 2189 .setTween(tween) 2190 // .addIndicators() // add indicators (requires plugin) 2191 .addTo(self.controller); 2192 }); 2193 2194 // _.each($('.year-review-2022---column-parallax'), function (element, index) { 2195 // var offset = element.getAttribute('data-parallax-offset'); 2196 2197 // if (self.isMobile() && element.getAttribute('data-parallax-offset-mobile')) { 2198 // offset = element.getAttribute('data-parallax-offset-mobile'); 2199 // } 2200 2201 // var startOffset = 0; 2202 // if(element.getAttribute("data-start-offset")) { 2203 // startOffset = parseInt(element.getAttribute("data-start-offset")); 2204 // } 2205 2206 // if(element.getAttribute("data-start-offset-mobile") && self.isMobile()) { 2207 // startOffset = parseInt(element.getAttribute("data-start-offset-mobile")); 2208 // } 2209 2210 // var tween = TweenMax.to(element.querySelector('img'), 0.5, { y: offset }); 2211 // new ScrollMagic.Scene({ triggerElement: element, triggerHook: 1, offset: startOffset, reverse: true, duration: self.getWindowHeight }) 2212 // .setTween(tween) 2213 // // .addIndicators() // add indicators (requires plugin) 2214 // .addTo(self.controller); 2215 // }); 2216 } 2217 2218 Year2021.prototype.isMobile = function () { 2219 return $(window).width() < 767; 2220 } 2221 2222 Year2021.prototype.isAndroid = function () { 2223 var ua = navigator.userAgent.toLowerCase(); 2224 var isAndroid = ua.indexOf("android") > -1; 2225 return isAndroid; 2226 } 2227 2228 Year2021.prototype.isIpod = function () { 2229 var ua = navigator.userAgent.toLowerCase(); 2230 var isIpod = ua.indexOf("iPod") > -1; 2231 return isIpod; 2232 } 2233 2234 Year2021.prototype.isIphone = function () { 2235 var ua = navigator.userAgent.toLowerCase(); 2236 var isIpod = ua.indexOf("iphone") > -1; 2237 return isIpod; 2238 } 2239 2240 var hasWebP = (function() { 2241 // some small (2x1 px) test images for each feature 2242 var images = { 2243 basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56
2243QAAAAA==", 2244 lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=" 2245 }; 2246 2247 return function(feature) { 2248 var deferred = $.Deferred(); 2249 2250 $("<img>").on("load", function() { 2251 // the images should have these dimensions 2252 if(this.width === 2 && this.height === 1) { 2253 deferred.resolve(); 2254 } else { 2255 deferred.reject(); 2256 } 2257 }).on("error", function() { 2258 deferred.reject(); 2259 }).attr("src", images[feature || "basic"]); 2260 2261 return deferred.promise(); 2262 } 2263 })(); 2264 2265 2266 2267 return Year2021; 2268}())(); 2269 2270 2271 2272// (function(){ 2273// // shim layer with setTimeout fallback 2274// window.requestAnimFrame = (function(){ 2275// return window.requestAnimationFrame || 2276// window.webkitRequestAnimationFrame || 2277// window.mozRequestAnimationFrame || 2278// window.ieRequestAnimationFrame || 2279// function( callback ){ 2280// window.setTimeout(callback, 1000 / 60); 2281// }; 2282// })(); 2283 2284// var fps = -1; 2285 2286// // setInterval(function() { 2287// // console.log('fps', fps); 2288// // }, 1000);; 2289 2290// var consqutiveLowFps = 0; 2291 2292// // var fpsElement = document.getElementById("fps"); 2293 2294// var then = Date.now() / 1000; // get time in seconds 2295// var render = function() { 2296// var now = Date.now() / 1000; // get time in seconds 2297 2298// // compute time since last frame 2299// var elapsedTime = now - then; 2300// then = now; 2301 2302// // compute fps 2303// fps = 1 / elapsedTime; 2304 2305// if(fps < 10 || true) { 2306// consqutiveLowFps ++; 2307// } else { 2308// consqutiveLowFps = 0; 2309// } 2310 2311// if(consqutiveLowFps > 10) { 2312// Reveal.destroy(); 2313// } 2314 2315// // fpsElement.innerText = fps.toFixed(2); 2316 2317// requestAnimFrame(render); 2318// }; 2319// render(); 2320// }()); 2321 2322
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.