(function () { var w = window, d = document, root = d.documentElement; if (w.__zrArm || !('IntersectionObserver' in w) || !('MutationObserver' in w) || !Element.prototype.animate || typeof root.getAnimations !== 'function') return; root.classList.add('zr-js'); var SEL = '[data-reveal],[data-reveal-words]'; var SEQ = '[data-seq-autoplay]'; var MOTION = '.zv-au,[data-seq],.zl-hero'; var canSeq = typeof root.getAnimations === 'function'; var runs = new WeakMap(); var autos = new WeakSet(); var autoOff = new Map(); var EASE = 'cubic-bezier(0.16,1,0.3,1)'; var DUR = 500; var mq = w.matchMedia('(prefers-reduced-motion: reduce)'); var calm = mq.matches; var waiting = new Set(); var held = new Map(); var bands = new Map(); var watched = new Map(); var seen = new WeakSet(); var entrances = new Set(); var motionNodes = new Map(); var printing = false; // CSS owns the frames; this observer owns whether a scene may spend work. // No attributes are written to server-rendered Aurora surfaces. function syncMotion(el) { if (!canSeq) return; var visible = motionNodes.get(el); var run = visible && !d.hidden && !calm && !printing; var ambient = el.matches('.zv-au'); var live = el.matches('.zl-hero'); if (ambient && el.matches(':hover,:focus-within')) run = false; var state = el.getAttribute('data-seq'); // Pseudo-element animations are included only with subtree enabled. var animations = el.getAnimations({ subtree: true }); for (var i = 0; i < animations.length; i++) { var a = animations[i], name = a.animationName; if (typeof name !== 'string') continue; var aurora = name.indexOf('zu-au-') === 0; var signal = live && name === 'zl-dot'; if (aurora && a.effect && a.effect.target !== el) continue; if (!aurora && !signal && (!state || !finite(a))) continue; if (run && (aurora || signal || state === 'play')) a.play(); else a.pause(); } } var motionView = new IntersectionObserver(function (entries) { for (var i = 0; i < entries.length; i++) { var e = entries[i]; if (!e.target.isConnected || !motionNodes.has(e.target)) continue; motionNodes.set(e.target, e.isIntersecting); syncMotion(e.target); } }); function observeMotion(el) { if (motionNodes.has(el)) return; motionNodes.set(el, false); motionView.observe(el); syncMotion(el); } function dropMotion(el) { if (el.isConnected) return; motionNodes.delete(el); motionView.unobserve(el); } function syncAllMotion() { motionNodes.forEach(function (_, el) { syncMotion(el); }); } function pointerMotion(ev) { var el = ev.target && ev.target.closest ? ev.target.closest('.zv-au') : null; while (el) { syncMotion(el); el = el.parentElement && el.parentElement.closest('.zv-au'); } } // A scene's entrance must never conceal a keyboard destination. Focus // selects the complete server frame, even before its autoplay threshold. function focusSequence(ev) { if (ev.target && ev.target.closest && ev.target.closest('.zr-seq__control')) return; var el = ev.target && ev.target.closest ? ev.target.closest('[data-seq]') : null; if (!el || el.getAttribute('data-seq') === 'done') return; var off = autoOff.get(el); if (off) { autoOff.delete(el); off(); } runs.set(el, (runs.get(el) || 0) + 1); el.setAttribute('data-seq', 'done'); } d.addEventListener('pointerover', pointerMotion); d.addEventListener('pointerout', pointerMotion); d.addEventListener('focusin', pointerMotion); d.addEventListener('focusin', focusSequence); d.addEventListener('focusout', pointerMotion); function fold() { return w.innerHeight || root.clientHeight; } function ms(el, name) { var v = parseFloat(el.getAttribute(name)); return v > 0 ? v : 0; } function call(fn, arg) { try { fn(arg); } catch (e) {} } function rise(el, dy, delay) { var a = el.animate([{ offset: 0, opacity: 0.001, translate: '0 ' + dy + 'px' }], { duration: DUR, easing: EASE, delay: delay, fill: 'backwards' }); entrances.add(a); a.finished.then(function () { entrances.delete(a); }, function () { entrances.delete(a); }); } function hold(el) { if (held.has(el)) return; var parts = el.hasAttribute('data-reveal-words') || ms(el, 'data-reveal-stagger') > 0; var still = parts ? { opacity: 0.001 } : { opacity: 0.001, translate: '0 10px' }; held.set(el, el.animate([still, still], { duration: 0, fill: 'forwards' })); } function enter(el) { var delay = ms(el, 'data-reveal-delay'), i; if (el.hasAttribute('data-reveal-words')) { var words = el.querySelectorAll('.zr-w'); for (i = 0; i < words.length; i++) rise(words[i], 6, delay + Math.min(i, 10) * 24); return; } var step = ms(el, 'data-reveal-stagger'); if (step > 0) { var kids = el.children; for (i = 0; i < kids.length; i++) rise(kids[i], 10, delay + Math.min(i, 6) * Math.min(step, 60)); return; } rise(el, 10, delay); } function release(el, play) { var h = held.get(el); if (!h) return; held.delete(el); h.cancel(); if (play && !calm) enter(el); } function idle(el) { if (!waiting.has(el) && !bands.has(el)) near.unobserve(el); if (!held.has(el) && !watched.has(el)) view.unobserve(el); } function settle(el, play) { waiting.delete(el); release(el, play); idle(el); } var near = new IntersectionObserver(function (entries) { var h = fold(); for (var i = 0; i < entries.length; i++) { var e = entries[i], el = e.target, r = e.boundingClientRect; var below = e.isIntersecting && r.top >= h; var subs = bands.get(el); if (subs) subs.forEach(function (fn) { call(fn, below); }); if (!waiting.has(el)) continue; if (below) { hold(el); view.observe(el); } else if (e.isIntersecting || r.bottom <= 0) settle(el, false); else { release(el, false); idle(el); } } }, { rootMargin: '0px 0px 50% 0px' }); var view = new IntersectionObserver(function (entries) { for (var i = 0; i < entries.length; i++) { var e = entries[i], el = e.target; if (!e.isIntersecting) continue; if (held.has(el)) settle(el, true); var subs = watched.get(el); if (!subs) continue; var vh = e.rootBounds ? e.rootBounds.height : fold(); subs.forEach(function (sub) { if (e.intersectionRatio < sub.ratio && e.intersectionRect.height < vh * sub.ratio) return; subs.delete(sub); call(sub.fn); }); if (!subs.size) { watched.delete(el); idle(el); } } }, { threshold: [0, 0.06, 0.12, 0.2, 0.3, 0.45, 0.6] }); function watch(el, fn, ratio) { var sub = { fn: fn, ratio: ratio > 0 ? ratio : 0.12 }; var subs = watched.get(el); if (!subs) { subs = new Set(); watched.set(el, subs); } subs.add(sub); view.unobserve(el); view.observe(el); return function () { var s = watched.get(el); if (s) { s.delete(sub); if (!s.size) watched.delete(el); } idle(el); }; } function band(el, fn) { var subs = bands.get(el); if (!subs) { subs = new Set(); bands.set(el, subs); } subs.add(fn); near.unobserve(el); near.observe(el); return function () { var s = bands.get(el); if (s) { s.delete(fn); if (!s.size) bands.delete(el); } idle(el); }; } function arm(el) { if (seen.has(el)) return; seen.add(el); if (calm) return; waiting.add(el); near.observe(el); } function drop(el) { if (el.isConnected || !waiting.has(el)) return; settle(el, false); } function scan(node, sel, fn) { if (node.nodeType !== 1) return; if (node.matches(sel)) fn(node); if (node.firstElementChild) { var list = node.querySelectorAll(sel); for (var i = 0; i < list.length; i++) fn(list[i]); } } function finite(a) { var t = a.effect && a.effect.getTiming(); return !t || t.iterations !== Infinity; } function play(el) { if (!canSeq) return; var token = (runs.get(el) || 0) + 1; runs.set(el, token); if (calm || printing) { el.setAttribute('data-seq', 'done'); return; } if (el.getAttribute('data-seq') !== 'ready') { el.setAttribute('data-seq', 'done'); void el.offsetWidth; } el.setAttribute('data-seq', 'play'); var parts = el.getAnimations({ subtree: true }).filter(finite); syncMotion(el); Promise.all(parts.map(function (a) { return a.finished.catch(function () {}); })).then(function () { if (runs.get(el) === token) el.setAttribute('data-seq', 'done'); }); } function auto(el) { if (autos.has(el) || !canSeq) return; autos.add(el); w.requestAnimationFrame(function () { if (!el.isConnected || calm || runs.has(el)) return; var r = el.getBoundingClientRect(), h = fold(); var shown = Math.min(r.bottom, h) - Math.max(r.top, 0); if (shown > 0) { // Enough of it on screen to watch: it plays from this frame. if (shown / Math.max(1, Math.min(r.height, h)) >= 0.3) { play(el); return; } // A sliver above the fold: the sliver shows the first frame, and the // performance starts when 30% of it is on screen. el.setAttribute('data-seq', 'ready'); autoOff.set(el, watch(el, function () { autoOff.delete(el); if (!runs.has(el) && el.getAttribute('data-seq') === 'ready') play(el); }, 0.3)); return; } var offBand = band(el, function (below) { if (!runs.has(el)) el.setAttribute('data-seq', below ? 'ready' : 'done'); }); // Only from the held first frame: an object that was painted finished // (reached by a jump, streamed in on screen) stays finished. var offWatch = watch(el, function () { autoOff.delete(el); offBand(); if (!runs.has(el) && el.getAttribute('data-seq') === 'ready') play(el); }, 0.3); autoOff.set(el, function () { offBand(); offWatch(); }); }); } function unauto(el) { var off = autoOff.get(el); if (!off || el.isConnected) return; autoOff.delete(el); off(); } var mo = new MutationObserver(function (records) { for (var i = 0; i < records.length; i++) { var rec = records[i], j; if (rec.type === 'attributes') { if (rec.attributeName === 'data-state') { // A voice-state change may create a new signal while the room stays // open. Its visibility belongs to the registered hero, not the dot. var room = rec.target.closest('.zl-hero'); if (room && motionNodes.has(room)) syncMotion(room); } else syncMotion(rec.target); continue; } for (j = 0; j < rec.removedNodes.length; j++) { scan(rec.removedNodes[j], SEL, drop); scan(rec.removedNodes[j], SEQ, unauto); scan(rec.removedNodes[j], MOTION, dropMotion); } for (j = 0; j < rec.addedNodes.length; j++) { var n = rec.addedNodes[j]; if (!n.isConnected) continue; scan(n, SEL, arm); scan(n, SEQ, auto); scan(n, MOTION, observeMotion); } } }); mo.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-seq', 'data-open', 'data-state'] }); scan(root, SEL, arm); scan(root, SEQ, auto); scan(root, MOTION, observeMotion); function settleAll() { var list = []; waiting.forEach(function (el) { list.push(el); }); for (var i = 0; i < list.length; i++) settle(list[i], false); entrances.forEach(function (a) { a.cancel(); }); entrances.clear(); } if (mq.addEventListener) mq.addEventListener('change', function () { calm = mq.matches; if (calm) { settleAll(); motionNodes.forEach(function (_, el) { if (el.hasAttribute('data-seq')) { runs.set(el, (runs.get(el) || 0) + 1); el.setAttribute('data-seq', 'done'); } }); } syncAllMotion(); }); d.addEventListener('visibilitychange', function () { if (d.hidden) settleAll(); syncAllMotion(); }); w.addEventListener('beforeprint', function () { printing = true; settleAll(); syncAllMotion(); }); w.addEventListener('afterprint', function () { printing = false; syncAllMotion(); }); // An in-page jump onto an autoplay Sequence that has not played ("Watch // the day ↓"): it waits on its first frame and plays on arrival, even if // the page had painted it finished (it lay outside the band). d.addEventListener('click', function (ev) { if (calm || !canSeq || ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return; var a = ev.target && ev.target.closest ? ev.target.closest('a[href^="#"]') : null; if (!a) return; var id; try { id = decodeURIComponent(a.getAttribute('href').slice(1)); } catch (e) { return; } var t = id ? d.getElementById(id) : null; var s = t ? (t.matches(SEQ) ? t : t.querySelector(SEQ)) : null; if (!s || runs.has(s)) return; var off = autoOff.get(s); if (off) { autoOff.delete(s); off(); } autos.add(s); s.setAttribute('data-seq', 'ready'); autoOff.set(s, watch(s, function () { autoOff.delete(s); if (!runs.has(s)) play(s); }, 0.3)); }, true); w.__zrArm = { watch: watch, band: band, play: play }; })();

Request a review