motionary 6.7.0 → 6.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/bin/usa-codemod-7.mjs +91 -0
- package/dist/chunks/{base-DchG4q_S.js → base-D5MHqeDd.js} +2 -2
- package/dist/chunks/{base-DchG4q_S.js.map → base-D5MHqeDd.js.map} +1 -1
- package/dist/chunks/{core-DVyTlo9Q.js → core-DyJu5r5a.js} +2 -2
- package/dist/chunks/{core-DVyTlo9Q.js.map → core-DyJu5r5a.js.map} +1 -1
- package/dist/chunks/{core-D2vF8kZb.js → core-ZGo4hOEk.js} +2 -2
- package/dist/chunks/{core-D2vF8kZb.js.map → core-ZGo4hOEk.js.map} +1 -1
- package/dist/chunks/{fx-DUMVKSvg.js → fx-DlGRMJ-Z.js} +2 -2
- package/dist/chunks/{fx-DUMVKSvg.js.map → fx-DlGRMJ-Z.js.map} +1 -1
- package/dist/chunks/{gpu-BBRLgEzM.cjs → gpu-C2D4T9Q-.cjs} +9 -2
- package/dist/chunks/gpu-C2D4T9Q-.cjs.map +1 -0
- package/dist/chunks/{gpu-CsP2ZB3x.js → gpu-DPhMkJq6.js} +10 -4
- package/dist/chunks/gpu-DPhMkJq6.js.map +1 -0
- package/dist/chunks/player-DH3TIz-t.js +516 -0
- package/dist/chunks/player-DH3TIz-t.js.map +1 -0
- package/dist/chunks/player-PS6_FzNw.cjs +525 -0
- package/dist/chunks/player-PS6_FzNw.cjs.map +1 -0
- package/dist/chunks/{registry-D23neB4M.js → registry-CTLWeg-J.js} +2 -2
- package/dist/chunks/{registry-D23neB4M.js.map → registry-CTLWeg-J.js.map} +1 -1
- package/dist/chunks/{spring-BhoT09Qb.js → spring-B-9MZOrW.js} +2 -2
- package/dist/chunks/{spring-BhoT09Qb.js.map → spring-B-9MZOrW.js.map} +1 -1
- package/dist/chunks/{variants-C_hv_s23.js → variants-CoZn3k_5.js} +2 -2
- package/dist/chunks/{variants-C_hv_s23.js.map → variants-CoZn3k_5.js.map} +1 -1
- package/dist/components/a11y.js +2 -2
- package/dist/components/angular.js +7 -7
- package/dist/components/background.js +2 -2
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.js +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +3 -3
- package/dist/components/effects.cjs +13 -522
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +7 -515
- package/dist/components/effects.js.map +1 -1
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.cjs +8 -2
- package/dist/components/fx-3d.cjs.map +1 -1
- package/dist/components/fx-3d.d.cts +3 -1
- package/dist/components/fx-3d.d.ts +3 -1
- package/dist/components/fx-3d.js +9 -4
- package/dist/components/fx-3d.js.map +1 -1
- package/dist/components/fx-focus.cjs +125 -0
- package/dist/components/fx-focus.cjs.map +1 -0
- package/dist/components/fx-focus.d.cts +65 -0
- package/dist/components/fx-focus.d.ts +65 -0
- package/dist/components/fx-focus.js +122 -0
- package/dist/components/fx-focus.js.map +1 -0
- package/dist/components/fx-gpu.cjs +3 -2
- package/dist/components/fx-gpu.cjs.map +1 -1
- package/dist/components/fx-gpu.d.cts +3 -1
- package/dist/components/fx-gpu.d.ts +3 -1
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +8 -2
- package/dist/components/fx-light.cjs.map +1 -1
- package/dist/components/fx-light.d.cts +3 -1
- package/dist/components/fx-light.d.ts +3 -1
- package/dist/components/fx-light.js +9 -4
- package/dist/components/fx-light.js.map +1 -1
- package/dist/components/fx-morph.cjs +8 -2
- package/dist/components/fx-morph.cjs.map +1 -1
- package/dist/components/fx-morph.d.cts +3 -1
- package/dist/components/fx-morph.d.ts +3 -1
- package/dist/components/fx-morph.js +9 -4
- package/dist/components/fx-morph.js.map +1 -1
- package/dist/components/fx-physics.cjs +350 -0
- package/dist/components/fx-physics.cjs.map +1 -0
- package/dist/components/fx-physics.d.cts +94 -0
- package/dist/components/fx-physics.d.ts +94 -0
- package/dist/components/fx-physics.js +345 -0
- package/dist/components/fx-physics.js.map +1 -0
- package/dist/components/fx-text.cjs +8 -2
- package/dist/components/fx-text.cjs.map +1 -1
- package/dist/components/fx-text.d.cts +3 -1
- package/dist/components/fx-text.d.ts +3 -1
- package/dist/components/fx-text.js +9 -4
- package/dist/components/fx-text.js.map +1 -1
- package/dist/components/fx-transitions.cjs +8 -2
- package/dist/components/fx-transitions.cjs.map +1 -1
- package/dist/components/fx-transitions.d.cts +3 -1
- package/dist/components/fx-transitions.d.ts +3 -1
- package/dist/components/fx-transitions.js +10 -5
- package/dist/components/fx-transitions.js.map +1 -1
- package/dist/components/fx-weather.cjs +271 -0
- package/dist/components/fx-weather.cjs.map +1 -0
- package/dist/components/fx-weather.d.cts +72 -0
- package/dist/components/fx-weather.d.ts +72 -0
- package/dist/components/fx-weather.js +266 -0
- package/dist/components/fx-weather.js.map +1 -0
- package/dist/components/fx.js +5 -5
- package/dist/components/fx2.cjs +49 -10
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +181 -4
- package/dist/components/fx2.d.ts +181 -4
- package/dist/components/fx2.js +42 -22
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.cjs +1 -0
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.js +2 -1
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/layout.js +1 -1
- package/dist/components/lite.cjs +2 -0
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +2 -0
- package/dist/components/lite.js.map +1 -1
- package/dist/components/marketplace.cjs +82 -0
- package/dist/components/marketplace.cjs.map +1 -0
- package/dist/components/marketplace.d.cts +108 -0
- package/dist/components/marketplace.d.ts +108 -0
- package/dist/components/marketplace.js +77 -0
- package/dist/components/marketplace.js.map +1 -0
- package/dist/components/packs.js +1 -1
- package/dist/components/page.js +3 -3
- package/dist/components/perf.js +2 -2
- package/dist/components/physics.js +3 -3
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.js +7 -7
- package/dist/components/svelte.js +7 -7
- package/dist/components/svg.js +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.js +3 -3
- package/dist/components/transitions.js +1 -1
- package/dist/components/ui.cjs +1 -0
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.js +5 -4
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.js +7 -7
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.cjs +1189 -45
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +177 -2
- package/dist/components/widgets.d.ts +177 -2
- package/dist/components/widgets.js +1179 -48
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.js +9 -9
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +55 -0
- package/docs/deprecations.md +4 -0
- package/docs/upgrading-7.md +33 -0
- package/package.json +43 -2
- package/dist/chunks/gpu-BBRLgEzM.cjs.map +0 -1
- package/dist/chunks/gpu-CsP2ZB3x.js.map +0 -1
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var components_fx = require('./fx.cjs');
|
|
4
4
|
var shared = require('../chunks/shared-jkgRH-Hx.cjs');
|
|
5
|
-
var
|
|
5
|
+
var player = require('../chunks/player-PS6_FzNw.cjs');
|
|
6
6
|
var generative = require('../chunks/generative-BHIj-NU0.cjs');
|
|
7
7
|
var registry = require('../chunks/registry-DehBVRDV.cjs');
|
|
8
|
+
var base = require('../chunks/base-BaQV-2ha.cjs');
|
|
8
9
|
var components_tokens = require('./tokens.cjs');
|
|
9
|
-
|
|
10
|
+
require('../chunks/core-BGAyaY6L.cjs');
|
|
10
11
|
require('../chunks/fx-lBGVtQO1.cjs');
|
|
11
12
|
|
|
12
13
|
const CARD_FX = [
|
|
@@ -574,216 +575,6 @@ const PAGE_FX = [
|
|
|
574
575
|
},
|
|
575
576
|
];
|
|
576
577
|
|
|
577
|
-
/**
|
|
578
|
-
* 5.4 — `<usa-story template="…">` scroll-storytelling templates.
|
|
579
|
-
*
|
|
580
|
-
* - `pin` — a sticky `[data-stage]` while `[data-step]` sections scroll past; the
|
|
581
|
-
* step in view gets `data-active`, the stage gets `data-active-step="<index>"`.
|
|
582
|
-
* - `gallery` — a horizontal `[data-track]` slides sideways as you scroll down.
|
|
583
|
-
* - `zoom` — the `[data-stage]` zooms toward the viewer (`zoom="6"`) and fades.
|
|
584
|
-
* - `compare` — before / after (`[data-before]`, `[data-after]`) wipe driven by
|
|
585
|
-
* scroll, plus a draggable, keyboard-accessible handle (`role="slider"`).
|
|
586
|
-
* - `counter` — `[data-count="1234"]` numbers count up when they enter view.
|
|
587
|
-
* - `highlight` — paragraphs dim except the one crossing the viewport center.
|
|
588
|
-
*
|
|
589
|
-
* Every template sets `--usa-story-progress` (0–1) on the host and dispatches
|
|
590
|
-
* `usa-story-step` (`detail: { index }`). Reduced motion: no sliding / zooming
|
|
591
|
-
* (the gallery stacks vertically), counters show final values, the rest is
|
|
592
|
-
* class changes only.
|
|
593
|
-
*/
|
|
594
|
-
const STORY_TEMPLATES = ['pin', 'gallery', 'zoom', 'compare', 'counter', 'highlight'];
|
|
595
|
-
const CSS = `usa-story{display:block;position:relative}
|
|
596
|
-
usa-story[template=pin] [data-stage],usa-story[template=gallery] [data-sticky],usa-story[template=zoom] [data-stage],usa-story[template=compare] [data-sticky]{position:sticky;top:0}
|
|
597
|
-
usa-story[template=pin] [data-stage]{align-self:start}
|
|
598
|
-
usa-story[template=pin] [data-step]{min-height:80vh;opacity:.35;transition:opacity .3s}
|
|
599
|
-
usa-story[template=pin] [data-step][data-active]{opacity:1}
|
|
600
|
-
usa-story[template=gallery] [data-sticky]{height:100vh;overflow:hidden;display:flex;align-items:center}
|
|
601
|
-
usa-story[template=gallery] [data-track]{display:flex;gap:24px;will-change:transform}
|
|
602
|
-
usa-story[template=gallery][data-static] [data-sticky]{position:static;height:auto;overflow:visible}
|
|
603
|
-
usa-story[template=gallery][data-static] [data-track]{flex-direction:column;transform:none!important}
|
|
604
|
-
usa-story[template=zoom] [data-stage]{height:100vh;overflow:hidden;display:grid;place-items:center}
|
|
605
|
-
usa-story[template=compare] [data-sticky]{height:var(--usa-story-h,70vh);overflow:hidden}
|
|
606
|
-
usa-story[template=compare] [data-before],usa-story[template=compare] [data-after]{position:absolute;inset:0}
|
|
607
|
-
usa-story[template=compare] [data-after]{clip-path:inset(0 0 0 var(--usa-split,50%))}
|
|
608
|
-
usa-story [data-handle]{position:absolute;top:0;bottom:0;left:var(--usa-split,50%);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px #0003;cursor:ew-resize;touch-action:none}
|
|
609
|
-
usa-story [data-handle]:focus-visible{outline:3px solid #7c5cff;outline-offset:2px}
|
|
610
|
-
usa-story[template=highlight] p,usa-story[template=highlight] [data-step]{opacity:.3;transition:opacity .25s}
|
|
611
|
-
usa-story[template=highlight] [data-active]{opacity:1}`;
|
|
612
|
-
const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
|
|
613
|
-
/** Progress of `el` through the viewport: 0 when its top hits the viewport top, 1 when its bottom hits the viewport bottom. */
|
|
614
|
-
function storyProgress(el, vh = typeof innerHeight === 'number' ? innerHeight : 800) {
|
|
615
|
-
const r = el.getBoundingClientRect();
|
|
616
|
-
const span = r.height - vh;
|
|
617
|
-
return span > 0 ? clamp(-r.top / span) : clamp((vh - r.top) / (vh + r.height));
|
|
618
|
-
}
|
|
619
|
-
/** Format a counted value like the target (`1,234`, `12.5`, prefix / suffix kept). */
|
|
620
|
-
function formatCount(target, t) {
|
|
621
|
-
const m = target.match(/^(\D*)([\d,]*\.?\d+)(.*)$/);
|
|
622
|
-
if (!m)
|
|
623
|
-
return target;
|
|
624
|
-
const [, pre, num, post] = m;
|
|
625
|
-
const n = parseFloat(num.replace(/,/g, ''));
|
|
626
|
-
const dec = (num.split('.')[1] || '').length;
|
|
627
|
-
let s = (n * t).toFixed(dec);
|
|
628
|
-
if (num.includes(','))
|
|
629
|
-
s = Number(s).toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec });
|
|
630
|
-
return pre + s + post;
|
|
631
|
-
}
|
|
632
|
-
function defineStory(tag = 'usa-story') {
|
|
633
|
-
return base.defineElement(tag, (Base) => class UsaStory extends Base {
|
|
634
|
-
constructor() {
|
|
635
|
-
super(...arguments);
|
|
636
|
-
this.progress = 0;
|
|
637
|
-
this.step = -1;
|
|
638
|
-
this.frame = 0;
|
|
639
|
-
}
|
|
640
|
-
static get observedAttributes() {
|
|
641
|
-
return ['template', 'zoom'];
|
|
642
|
-
}
|
|
643
|
-
get template() {
|
|
644
|
-
const t = this.str('template', 'pin');
|
|
645
|
-
return STORY_TEMPLATES.includes(t) ? t : 'pin';
|
|
646
|
-
}
|
|
647
|
-
steps() {
|
|
648
|
-
const own = Array.from(this.querySelectorAll('[data-step]:not([data-stage])'));
|
|
649
|
-
return own.length || this.template !== 'highlight' ? own : Array.from(this.querySelectorAll('p'));
|
|
650
|
-
}
|
|
651
|
-
setStep(i) {
|
|
652
|
-
if (i === this.step)
|
|
653
|
-
return;
|
|
654
|
-
this.step = i;
|
|
655
|
-
this.steps().forEach((s, k) => s.toggleAttribute('data-active', k === i));
|
|
656
|
-
const stage = this.querySelector('[data-stage]');
|
|
657
|
-
if (stage)
|
|
658
|
-
stage.dataset.activeStep = String(i);
|
|
659
|
-
this.dispatchEvent(new CustomEvent('usa-story-step', { detail: { index: i }, bubbles: true }));
|
|
660
|
-
}
|
|
661
|
-
/** Recompute from the current scroll position (called on scroll / resize). */
|
|
662
|
-
update() {
|
|
663
|
-
this.frame = 0;
|
|
664
|
-
const p = (this.progress = storyProgress(this));
|
|
665
|
-
this.style.setProperty('--usa-story-progress', p.toFixed(4));
|
|
666
|
-
const t = this.template;
|
|
667
|
-
const vh = innerHeight || 800;
|
|
668
|
-
if (t === 'pin' || t === 'highlight') {
|
|
669
|
-
const mid = vh / 2;
|
|
670
|
-
let best = -1;
|
|
671
|
-
let bestD = Infinity;
|
|
672
|
-
this.steps().forEach((s, i) => {
|
|
673
|
-
const r = s.getBoundingClientRect();
|
|
674
|
-
const d = r.top <= mid && r.bottom >= mid ? 0 : Math.min(Math.abs(r.top - mid), Math.abs(r.bottom - mid));
|
|
675
|
-
if (d < bestD)
|
|
676
|
-
(bestD = d), (best = i);
|
|
677
|
-
});
|
|
678
|
-
this.setStep(best);
|
|
679
|
-
}
|
|
680
|
-
else if (t === 'gallery' && !this.reduced) {
|
|
681
|
-
const track = this.querySelector('[data-track]');
|
|
682
|
-
const box = this.querySelector('[data-sticky]');
|
|
683
|
-
if (track && box)
|
|
684
|
-
track.style.transform = `translateX(${(-p * Math.max(0, track.scrollWidth - box.clientWidth)).toFixed(1)}px)`;
|
|
685
|
-
}
|
|
686
|
-
else if (t === 'zoom' && !this.reduced) {
|
|
687
|
-
const inner = this.querySelector('[data-stage] > *');
|
|
688
|
-
if (inner) {
|
|
689
|
-
inner.style.transform = `scale(${(1 + p * (this.num('zoom', 6) - 1)).toFixed(3)})`;
|
|
690
|
-
inner.style.opacity = String(clamp(1.4 - p * 1.4).toFixed(3));
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
|
-
else if (t === 'compare' && !this.hasAttribute('data-dragged')) {
|
|
694
|
-
this.setSplit(p * 100);
|
|
695
|
-
}
|
|
696
|
-
else if (t === 'counter') {
|
|
697
|
-
this.querySelectorAll('[data-count]:not([data-counted])').forEach((el) => {
|
|
698
|
-
const r = el.getBoundingClientRect();
|
|
699
|
-
if (r.top < vh * 0.9 && r.bottom > 0)
|
|
700
|
-
this.count(el);
|
|
701
|
-
});
|
|
702
|
-
}
|
|
703
|
-
}
|
|
704
|
-
setSplit(pct) {
|
|
705
|
-
const v = clamp(pct, 0, 100);
|
|
706
|
-
this.style.setProperty('--usa-split', `${v.toFixed(2)}%`);
|
|
707
|
-
const h = this.querySelector('[data-handle]');
|
|
708
|
-
if (h)
|
|
709
|
-
h.setAttribute('aria-valuenow', String(Math.round(v)));
|
|
710
|
-
}
|
|
711
|
-
count(el) {
|
|
712
|
-
el.dataset.counted = '';
|
|
713
|
-
const target = el.dataset.count || el.textContent || '0';
|
|
714
|
-
el.setAttribute('aria-label', target);
|
|
715
|
-
if (this.reduced) {
|
|
716
|
-
el.textContent = target;
|
|
717
|
-
return;
|
|
718
|
-
}
|
|
719
|
-
const dur = Number(el.dataset.duration) || 1600;
|
|
720
|
-
const t0 = performance.now();
|
|
721
|
-
const tick = (now) => {
|
|
722
|
-
const k = clamp((now - t0) / dur);
|
|
723
|
-
el.textContent = formatCount(target, 1 - (1 - k) ** 3);
|
|
724
|
-
if (k < 1)
|
|
725
|
-
requestAnimationFrame(tick);
|
|
726
|
-
};
|
|
727
|
-
requestAnimationFrame(tick);
|
|
728
|
-
}
|
|
729
|
-
mount() {
|
|
730
|
-
this.toggleAttribute('data-static', this.reduced);
|
|
731
|
-
if (this.template === 'compare')
|
|
732
|
-
this.mountCompare();
|
|
733
|
-
const kick = () => {
|
|
734
|
-
if (!this.frame)
|
|
735
|
-
this.frame = requestAnimationFrame(() => this.update());
|
|
736
|
-
};
|
|
737
|
-
this.listen(window, 'scroll', kick, { passive: true });
|
|
738
|
-
this.listen(window, 'resize', kick);
|
|
739
|
-
this.onCleanup(() => cancelAnimationFrame(this.frame));
|
|
740
|
-
this.update();
|
|
741
|
-
}
|
|
742
|
-
mountCompare() {
|
|
743
|
-
const box = this.querySelector('[data-sticky]') || this;
|
|
744
|
-
let h = this.querySelector('[data-handle]');
|
|
745
|
-
if (!h) {
|
|
746
|
-
h = document.createElement('div');
|
|
747
|
-
h.setAttribute('data-handle', '');
|
|
748
|
-
box.appendChild(h);
|
|
749
|
-
this.onCleanup(() => h.remove());
|
|
750
|
-
}
|
|
751
|
-
h.tabIndex = 0;
|
|
752
|
-
h.setAttribute('role', 'slider');
|
|
753
|
-
h.setAttribute('aria-label', this.str('label', 'Before / after'));
|
|
754
|
-
h.setAttribute('aria-valuemin', '0');
|
|
755
|
-
h.setAttribute('aria-valuemax', '100');
|
|
756
|
-
const at = (e) => {
|
|
757
|
-
const r = box.getBoundingClientRect();
|
|
758
|
-
this.dataset.dragged = '';
|
|
759
|
-
this.setSplit(((e.clientX - r.left) / (r.width || 1)) * 100);
|
|
760
|
-
};
|
|
761
|
-
let drag = false;
|
|
762
|
-
this.listen(h, 'pointerdown', (e) => {
|
|
763
|
-
drag = true;
|
|
764
|
-
h.setPointerCapture?.(e.pointerId);
|
|
765
|
-
});
|
|
766
|
-
this.listen(h, 'pointermove', (e) => drag && at(e));
|
|
767
|
-
this.listen(h, 'pointerup', () => (drag = false));
|
|
768
|
-
this.listen(h, 'keydown', (e) => {
|
|
769
|
-
const cur = parseFloat(h.getAttribute('aria-valuenow') || '50');
|
|
770
|
-
const step = e.shiftKey ? 10 : 2;
|
|
771
|
-
const next = e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? cur - step : e.key === 'ArrowRight' || e.key === 'ArrowUp' ? cur + step : e.key === 'Home' ? 0 : e.key === 'End' ? 100 : null;
|
|
772
|
-
if (next == null)
|
|
773
|
-
return;
|
|
774
|
-
e.preventDefault();
|
|
775
|
-
this.dataset.dragged = '';
|
|
776
|
-
this.setSplit(next);
|
|
777
|
-
});
|
|
778
|
-
this.setSplit(50);
|
|
779
|
-
}
|
|
780
|
-
unmount() {
|
|
781
|
-
this.step = -1;
|
|
782
|
-
delete this.dataset.dragged;
|
|
783
|
-
}
|
|
784
|
-
}, { id: 'usa-story', text: CSS });
|
|
785
|
-
}
|
|
786
|
-
|
|
787
578
|
let actx = null;
|
|
788
579
|
let current = null;
|
|
789
580
|
const mediaSources = new WeakMap();
|
|
@@ -1831,306 +1622,6 @@ function defineTheme(tag = 'usa-theme') {
|
|
|
1831
1622
|
}, { id: 'usa-theme-el', text: 'usa-theme{display:block}' });
|
|
1832
1623
|
}
|
|
1833
1624
|
|
|
1834
|
-
/**
|
|
1835
|
-
* 5.9 — `<usa-player>`: plays JSON animations.
|
|
1836
|
-
*
|
|
1837
|
-
* Format `use-scroll-animate/animation` v1:
|
|
1838
|
-
*
|
|
1839
|
-
* ```json
|
|
1840
|
-
* { "format": "use-scroll-animate/animation", "version": 1, "name": "Hero",
|
|
1841
|
-
* "loop": false,
|
|
1842
|
-
* "tracks": [
|
|
1843
|
-
* { "target": "h1", "start": 0, "duration": 600, "preset": "fade-up" },
|
|
1844
|
-
* { "target": ".cta", "start": 500, "duration": 500, "keyframes": [{ "opacity": 0 }, { "opacity": 1 }], "easing": "ease-out" },
|
|
1845
|
-
* { "target": ".cta", "start": 1100, "effect": "jelly", "options": {} }
|
|
1846
|
-
* ] }
|
|
1847
|
-
* ```
|
|
1848
|
-
*
|
|
1849
|
-
* A track animates `target` (a selector inside the player; `:scope` for the
|
|
1850
|
-
* player itself) with a timeline preset, its own keyframes, or fires any
|
|
1851
|
-
* registered effect at `start`. Playground presets (format
|
|
1852
|
-
* `use-scroll-animate/playground`) are accepted too — their tracks map to the
|
|
1853
|
-
* player's children in order.
|
|
1854
|
-
*
|
|
1855
|
-
* Keyframe tracks are WAAPI animations driven by one clock, so the player can
|
|
1856
|
-
* play, pause, seek, change rate and be scrubbed by scroll
|
|
1857
|
-
* (`trigger="scroll"`). Reduced motion: jumps to the end state, effects skipped.
|
|
1858
|
-
*/
|
|
1859
|
-
const ANIMATION_FORMAT = 'use-scroll-animate/animation';
|
|
1860
|
-
function decodePlayground(state) {
|
|
1861
|
-
try {
|
|
1862
|
-
const b64 = state.replace(/-/g, '+').replace(/_/g, '/');
|
|
1863
|
-
const json = decodeURIComponent(escape(atob(b64)));
|
|
1864
|
-
const t = (JSON.parse(json).t || []);
|
|
1865
|
-
return t.map(([preset, start, duration, label], i) => ({ target: `:scope > :nth-child(${i + 1})`, preset, start, duration, label }));
|
|
1866
|
-
}
|
|
1867
|
-
catch {
|
|
1868
|
-
return [];
|
|
1869
|
-
}
|
|
1870
|
-
}
|
|
1871
|
-
/** Validate / normalise an animation (object or JSON text). Throws on anything unusable. */
|
|
1872
|
-
function normalizeAnimation(input) {
|
|
1873
|
-
const d = typeof input === 'string' ? JSON.parse(input) : input;
|
|
1874
|
-
if (!d || typeof d !== 'object')
|
|
1875
|
-
throw new Error('[motionary] animation: expected an object');
|
|
1876
|
-
let tracks;
|
|
1877
|
-
if (d.format === 'use-scroll-animate/playground')
|
|
1878
|
-
tracks = decodePlayground(String(d.state || ''));
|
|
1879
|
-
else if (Array.isArray(d.tracks))
|
|
1880
|
-
tracks = d.tracks;
|
|
1881
|
-
else
|
|
1882
|
-
throw new Error('[motionary] animation: missing "tracks"');
|
|
1883
|
-
if (d.format && d.format !== ANIMATION_FORMAT && d.format !== 'use-scroll-animate/playground')
|
|
1884
|
-
throw new Error(`[motionary] animation: unknown format "${d.format}"`);
|
|
1885
|
-
if (d.version && d.version > 1 && d.format === ANIMATION_FORMAT)
|
|
1886
|
-
throw new Error(`[motionary] animation: version ${d.version} needs a newer motionary`);
|
|
1887
|
-
const out = tracks
|
|
1888
|
-
.filter((t) => t && (t.effect || t.preset || Array.isArray(t.keyframes)))
|
|
1889
|
-
.map((t) => ({ ...t, target: t.target || ':scope', start: Math.max(0, Number(t.start) || 0), duration: t.effect ? 0 : Math.max(1, Number(t.duration) || 600) }));
|
|
1890
|
-
const end = out.reduce((m, t) => Math.max(m, t.start + t.duration), 0);
|
|
1891
|
-
return { tracks: out, duration: Math.max(end, Number(d.duration) || 0), loop: !!d.loop, name: String(d.name || 'animation') };
|
|
1892
|
-
}
|
|
1893
|
-
const pick = (root, sel) => {
|
|
1894
|
-
if (sel === ':scope')
|
|
1895
|
-
return [root];
|
|
1896
|
-
try {
|
|
1897
|
-
return Array.from(root.querySelectorAll(sel));
|
|
1898
|
-
}
|
|
1899
|
-
catch {
|
|
1900
|
-
return [];
|
|
1901
|
-
}
|
|
1902
|
-
};
|
|
1903
|
-
/** Bind an animation to `root` and return its controller (paused at 0 unless `autoplay`). */
|
|
1904
|
-
function createPlayer(root, animation, o = {}) {
|
|
1905
|
-
const a = normalizeAnimation(animation);
|
|
1906
|
-
const loop = o.loop ?? a.loop;
|
|
1907
|
-
const anims = [];
|
|
1908
|
-
const effects = [];
|
|
1909
|
-
for (const t of a.tracks) {
|
|
1910
|
-
const els = pick(root, t.target);
|
|
1911
|
-
if (t.effect)
|
|
1912
|
-
effects.push({ els, t, fired: false });
|
|
1913
|
-
else {
|
|
1914
|
-
const kf = t.keyframes || core.TIMELINE_PRESETS[t.preset] || core.TIMELINE_PRESETS.fade;
|
|
1915
|
-
for (const el of els) {
|
|
1916
|
-
if (typeof el.animate !== 'function')
|
|
1917
|
-
continue;
|
|
1918
|
-
const an = el.animate(kf, { duration: t.duration, delay: t.start, easing: t.easing || 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'both' });
|
|
1919
|
-
an.pause();
|
|
1920
|
-
an.currentTime = 0;
|
|
1921
|
-
anims.push(an);
|
|
1922
|
-
}
|
|
1923
|
-
}
|
|
1924
|
-
}
|
|
1925
|
-
let time = 0;
|
|
1926
|
-
let playing = false;
|
|
1927
|
-
let raf = 0;
|
|
1928
|
-
let last = 0;
|
|
1929
|
-
let resolve;
|
|
1930
|
-
let finished = new Promise((r) => (resolve = r));
|
|
1931
|
-
const set = (ms) => {
|
|
1932
|
-
time = Math.min(a.duration, Math.max(0, ms));
|
|
1933
|
-
for (const an of anims)
|
|
1934
|
-
an.currentTime = time;
|
|
1935
|
-
};
|
|
1936
|
-
const fireDue = () => {
|
|
1937
|
-
if (base.prefersReducedMotion())
|
|
1938
|
-
return;
|
|
1939
|
-
for (const e of effects)
|
|
1940
|
-
if (!e.fired && time >= e.t.start) {
|
|
1941
|
-
e.fired = true;
|
|
1942
|
-
for (const el of e.els)
|
|
1943
|
-
registry.playEffect(el, e.t.effect, e.t.options || {}).catch(() => undefined);
|
|
1944
|
-
}
|
|
1945
|
-
};
|
|
1946
|
-
const done = () => {
|
|
1947
|
-
resolve();
|
|
1948
|
-
o.onFinish?.();
|
|
1949
|
-
finished = new Promise((r) => (resolve = r));
|
|
1950
|
-
};
|
|
1951
|
-
const frame = (now) => {
|
|
1952
|
-
raf = 0;
|
|
1953
|
-
if (!playing)
|
|
1954
|
-
return;
|
|
1955
|
-
set(time + (now - last) * player.rate);
|
|
1956
|
-
last = now;
|
|
1957
|
-
fireDue();
|
|
1958
|
-
if (time >= a.duration) {
|
|
1959
|
-
if (loop) {
|
|
1960
|
-
effects.forEach((e) => (e.fired = false));
|
|
1961
|
-
set(0);
|
|
1962
|
-
}
|
|
1963
|
-
else {
|
|
1964
|
-
playing = false;
|
|
1965
|
-
done();
|
|
1966
|
-
return;
|
|
1967
|
-
}
|
|
1968
|
-
}
|
|
1969
|
-
raf = requestAnimationFrame(frame);
|
|
1970
|
-
};
|
|
1971
|
-
const player = {
|
|
1972
|
-
get duration() {
|
|
1973
|
-
return a.duration;
|
|
1974
|
-
},
|
|
1975
|
-
get currentTime() {
|
|
1976
|
-
return time;
|
|
1977
|
-
},
|
|
1978
|
-
get playing() {
|
|
1979
|
-
return playing;
|
|
1980
|
-
},
|
|
1981
|
-
rate: o.rate ?? 1,
|
|
1982
|
-
get finished() {
|
|
1983
|
-
return finished;
|
|
1984
|
-
},
|
|
1985
|
-
play() {
|
|
1986
|
-
if (base.prefersReducedMotion()) {
|
|
1987
|
-
set(a.duration);
|
|
1988
|
-
effects.forEach((e) => (e.fired = true));
|
|
1989
|
-
done();
|
|
1990
|
-
return;
|
|
1991
|
-
}
|
|
1992
|
-
if (playing)
|
|
1993
|
-
return;
|
|
1994
|
-
if (time >= a.duration) {
|
|
1995
|
-
effects.forEach((e) => (e.fired = false));
|
|
1996
|
-
set(0);
|
|
1997
|
-
}
|
|
1998
|
-
playing = true;
|
|
1999
|
-
last = performance.now();
|
|
2000
|
-
fireDue();
|
|
2001
|
-
raf = requestAnimationFrame(frame);
|
|
2002
|
-
},
|
|
2003
|
-
pause() {
|
|
2004
|
-
playing = false;
|
|
2005
|
-
cancelAnimationFrame(raf);
|
|
2006
|
-
raf = 0;
|
|
2007
|
-
},
|
|
2008
|
-
seek(ms) {
|
|
2009
|
-
set(ms);
|
|
2010
|
-
effects.forEach((e) => (e.fired = e.t.start < time));
|
|
2011
|
-
},
|
|
2012
|
-
destroy() {
|
|
2013
|
-
player.pause();
|
|
2014
|
-
anims.forEach((an) => an.cancel());
|
|
2015
|
-
},
|
|
2016
|
-
};
|
|
2017
|
-
if (o.autoplay)
|
|
2018
|
-
player.play();
|
|
2019
|
-
return player;
|
|
2020
|
-
}
|
|
2021
|
-
/**
|
|
2022
|
-
* `<usa-player src="hero.json" | <script type="application/json"> child
|
|
2023
|
-
* trigger="load | view | scroll | click | manual" loop rate controls>`.
|
|
2024
|
-
* Emits `usa-player-ready` and `usa-player-finish`; sets `data-error` when the
|
|
2025
|
-
* animation cannot be loaded.
|
|
2026
|
-
*/
|
|
2027
|
-
function definePlayer(tag = 'usa-player') {
|
|
2028
|
-
return base.defineElement(tag, (Base) => class UsaPlayer extends Base {
|
|
2029
|
-
constructor() {
|
|
2030
|
-
super(...arguments);
|
|
2031
|
-
this.player = null;
|
|
2032
|
-
this.json = null;
|
|
2033
|
-
}
|
|
2034
|
-
static get observedAttributes() {
|
|
2035
|
-
return ['src', 'trigger', 'loop', 'rate'];
|
|
2036
|
-
}
|
|
2037
|
-
load(animation) {
|
|
2038
|
-
this.json = animation;
|
|
2039
|
-
this.start();
|
|
2040
|
-
}
|
|
2041
|
-
play() {
|
|
2042
|
-
this.player?.play();
|
|
2043
|
-
}
|
|
2044
|
-
pause() {
|
|
2045
|
-
this.player?.pause();
|
|
2046
|
-
}
|
|
2047
|
-
seek(ms) {
|
|
2048
|
-
this.player?.seek(ms);
|
|
2049
|
-
}
|
|
2050
|
-
start() {
|
|
2051
|
-
this.player?.destroy();
|
|
2052
|
-
this.player = null;
|
|
2053
|
-
if (!this.json)
|
|
2054
|
-
return;
|
|
2055
|
-
try {
|
|
2056
|
-
this.player = createPlayer(this, this.json, {
|
|
2057
|
-
loop: this.hasAttribute('loop') ? true : undefined,
|
|
2058
|
-
rate: this.num('rate', 1),
|
|
2059
|
-
onFinish: () => this.dispatchEvent(new CustomEvent('usa-player-finish', { bubbles: true })),
|
|
2060
|
-
});
|
|
2061
|
-
this.removeAttribute('data-error');
|
|
2062
|
-
}
|
|
2063
|
-
catch (err) {
|
|
2064
|
-
this.setAttribute('data-error', String(err.message || err));
|
|
2065
|
-
return;
|
|
2066
|
-
}
|
|
2067
|
-
const p = this.player;
|
|
2068
|
-
this.dispatchEvent(new CustomEvent('usa-player-ready', { detail: { duration: p.duration }, bubbles: true }));
|
|
2069
|
-
const trig = this.str('trigger', 'view');
|
|
2070
|
-
if (trig === 'load')
|
|
2071
|
-
p.play();
|
|
2072
|
-
else if (trig === 'view')
|
|
2073
|
-
this.inView((v) => v && p.play(), { threshold: 0.25 });
|
|
2074
|
-
else if (trig === 'click')
|
|
2075
|
-
this.listen(this, 'click', () => (p.playing ? p.pause() : p.play()));
|
|
2076
|
-
else if (trig === 'scroll') {
|
|
2077
|
-
let f = 0;
|
|
2078
|
-
const upd = () => {
|
|
2079
|
-
f = 0;
|
|
2080
|
-
p.seek(storyProgress(this) * p.duration);
|
|
2081
|
-
};
|
|
2082
|
-
const kick = () => void (f || (f = requestAnimationFrame(upd)));
|
|
2083
|
-
this.listen(window, 'scroll', kick, { passive: true });
|
|
2084
|
-
this.listen(window, 'resize', kick);
|
|
2085
|
-
this.onCleanup(() => cancelAnimationFrame(f));
|
|
2086
|
-
upd();
|
|
2087
|
-
}
|
|
2088
|
-
if (this.flag('controls'))
|
|
2089
|
-
this.mountControls(p);
|
|
2090
|
-
}
|
|
2091
|
-
mountControls(p) {
|
|
2092
|
-
const b = document.createElement('button');
|
|
2093
|
-
b.type = 'button';
|
|
2094
|
-
b.setAttribute('data-player-toggle', '');
|
|
2095
|
-
b.textContent = '▶︎ / ❚❚';
|
|
2096
|
-
b.setAttribute('aria-label', 'Play / pause animation');
|
|
2097
|
-
this.listen(b, 'click', (e) => {
|
|
2098
|
-
e.stopPropagation();
|
|
2099
|
-
if (p.playing)
|
|
2100
|
-
p.pause();
|
|
2101
|
-
else
|
|
2102
|
-
p.play();
|
|
2103
|
-
b.setAttribute('aria-pressed', String(p.playing));
|
|
2104
|
-
});
|
|
2105
|
-
this.append(b);
|
|
2106
|
-
this.onCleanup(() => b.remove());
|
|
2107
|
-
}
|
|
2108
|
-
changed(name) {
|
|
2109
|
-
if (name === 'src')
|
|
2110
|
-
this.json = null;
|
|
2111
|
-
super.changed(name);
|
|
2112
|
-
}
|
|
2113
|
-
mount() {
|
|
2114
|
-
this.onCleanup(() => {
|
|
2115
|
-
this.player?.destroy();
|
|
2116
|
-
this.player = null;
|
|
2117
|
-
});
|
|
2118
|
-
const inline = this.querySelector('script[type="application/json"]');
|
|
2119
|
-
const src = this.str('src');
|
|
2120
|
-
if (inline && !this.json)
|
|
2121
|
-
this.json = inline.textContent || '';
|
|
2122
|
-
if (src && !this.json) {
|
|
2123
|
-
fetch(src)
|
|
2124
|
-
.then((r) => (r.ok ? r.text() : Promise.reject(new Error(`HTTP ${r.status}`))))
|
|
2125
|
-
.then((t) => this.isConnected && this.load(t))
|
|
2126
|
-
.catch((err) => this.setAttribute('data-error', String(err.message || err)));
|
|
2127
|
-
return;
|
|
2128
|
-
}
|
|
2129
|
-
this.start();
|
|
2130
|
-
}
|
|
2131
|
-
}, { id: 'usa-player', text: 'usa-player{display:block;position:relative}usa-player>script{display:none}usa-player [data-player-toggle]{position:absolute;right:8px;bottom:8px}' });
|
|
2132
|
-
}
|
|
2133
|
-
|
|
2134
1625
|
/**
|
|
2135
1626
|
* motionary/components/effects — the 5.x effect packs, all
|
|
2136
1627
|
* registered through `registerEffect()` (5.0) and playable with
|
|
@@ -2185,11 +1676,11 @@ function registerMicroEffects() {
|
|
|
2185
1676
|
}
|
|
2186
1677
|
/** Define the 5.x elements of this entry (`<usa-story>`, …) under their default tags. */
|
|
2187
1678
|
function defineEffectElements() {
|
|
2188
|
-
defineStory();
|
|
1679
|
+
player.defineStory();
|
|
2189
1680
|
defineAudio();
|
|
2190
1681
|
defineGestureFx();
|
|
2191
1682
|
defineTheme();
|
|
2192
|
-
definePlayer();
|
|
1683
|
+
player.definePlayer();
|
|
2193
1684
|
}
|
|
2194
1685
|
/** Register the built-ins and every pack (idempotent). */
|
|
2195
1686
|
function registerAllEffects() {
|
|
@@ -2199,11 +1690,18 @@ function registerAllEffects() {
|
|
|
2199
1690
|
}
|
|
2200
1691
|
|
|
2201
1692
|
exports.fxLayer = shared.fxLayer;
|
|
1693
|
+
exports.ANIMATION_FORMAT = player.ANIMATION_FORMAT;
|
|
1694
|
+
exports.STORY_TEMPLATES = player.STORY_TEMPLATES;
|
|
1695
|
+
exports.createPlayer = player.createPlayer;
|
|
1696
|
+
exports.definePlayer = player.definePlayer;
|
|
1697
|
+
exports.defineStory = player.defineStory;
|
|
1698
|
+
exports.formatCount = player.formatCount;
|
|
1699
|
+
exports.normalizeAnimation = player.normalizeAnimation;
|
|
1700
|
+
exports.storyProgress = player.storyProgress;
|
|
2202
1701
|
exports.GENERATIVE_FX = generative.GENERATIVE_FX;
|
|
2203
1702
|
exports.canvasBackground = generative.canvasBackground;
|
|
2204
1703
|
exports.hexRgb = generative.hexRgb;
|
|
2205
1704
|
exports.noise2 = generative.noise2;
|
|
2206
|
-
exports.ANIMATION_FORMAT = ANIMATION_FORMAT;
|
|
2207
1705
|
exports.AUDIO_FX = AUDIO_FX;
|
|
2208
1706
|
exports.CARD_FX = CARD_FX;
|
|
2209
1707
|
exports.CLICK_FX = CLICK_FX;
|
|
@@ -2213,7 +1711,6 @@ exports.GESTURES = GESTURES;
|
|
|
2213
1711
|
exports.MICRO_FX = MICRO_FX;
|
|
2214
1712
|
exports.PAGE_FX = PAGE_FX;
|
|
2215
1713
|
exports.PHYSICS_FX = PHYSICS_FX;
|
|
2216
|
-
exports.STORY_TEMPLATES = STORY_TEMPLATES;
|
|
2217
1714
|
exports.THEMES = THEMES;
|
|
2218
1715
|
exports.THEME_FX = THEME_FX;
|
|
2219
1716
|
exports.THEME_NAMES = THEME_NAMES;
|
|
@@ -2225,19 +1722,14 @@ exports.bindGesture = bindGesture;
|
|
|
2225
1722
|
exports.bounceKeyframes = bounceKeyframes;
|
|
2226
1723
|
exports.bumpCount = bumpCount;
|
|
2227
1724
|
exports.createBeatDetector = createBeatDetector;
|
|
2228
|
-
exports.createPlayer = createPlayer;
|
|
2229
1725
|
exports.defineAudio = defineAudio;
|
|
2230
1726
|
exports.defineEffectElements = defineEffectElements;
|
|
2231
1727
|
exports.defineGestureFx = defineGestureFx;
|
|
2232
|
-
exports.definePlayer = definePlayer;
|
|
2233
|
-
exports.defineStory = defineStory;
|
|
2234
1728
|
exports.defineTheme = defineTheme;
|
|
2235
1729
|
exports.disableAudio = disableAudio;
|
|
2236
1730
|
exports.enableAudio = enableAudio;
|
|
2237
1731
|
exports.flingVelocity = flingVelocity;
|
|
2238
|
-
exports.formatCount = formatCount;
|
|
2239
1732
|
exports.getAudio = getAudio;
|
|
2240
|
-
exports.normalizeAnimation = normalizeAnimation;
|
|
2241
1733
|
exports.onBeat = onBeat;
|
|
2242
1734
|
exports.playThemeEffect = playThemeEffect;
|
|
2243
1735
|
exports.registerAllEffects = registerAllEffects;
|
|
@@ -2250,7 +1742,6 @@ exports.registerPageEffects = registerPageEffects;
|
|
|
2250
1742
|
exports.registerPhysicsEffects = registerPhysicsEffects;
|
|
2251
1743
|
exports.solveSpring = solveSpring;
|
|
2252
1744
|
exports.springKeyframes = springKeyframes;
|
|
2253
|
-
exports.storyProgress = storyProgress;
|
|
2254
1745
|
exports.swapLabel = swapLabel;
|
|
2255
1746
|
exports.themeCss = themeCss;
|
|
2256
1747
|
exports.themePreset = themePreset;
|