use-scroll-animate 6.1.0 → 6.1.1
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 +11 -0
- package/README.md +157 -411
- package/README_ja.md +170 -175
- package/README_zh.md +169 -198
- package/dist/chunks/{base-B5i8qQPR.cjs → base-BaQV-2ha.cjs} +3 -3
- package/dist/chunks/base-BaQV-2ha.cjs.map +1 -0
- package/dist/chunks/{base-C3Sw9sAO.js → base-Yno7N2eC.js} +3 -3
- package/dist/chunks/base-Yno7N2eC.js.map +1 -0
- package/dist/chunks/{core-BYLtO0Po.cjs → core-B5T0dhFH.cjs} +3 -3
- package/dist/chunks/core-B5T0dhFH.cjs.map +1 -0
- package/dist/chunks/{core-BDcszY4L.cjs → core-BGAyaY6L.cjs} +2 -2
- package/dist/chunks/{core-BDcszY4L.cjs.map → core-BGAyaY6L.cjs.map} +1 -1
- package/dist/chunks/{core-BTf__I-8.js → core-BIOaYdgN.js} +2 -2
- package/dist/chunks/{core-BTf__I-8.js.map → core-BIOaYdgN.js.map} +1 -1
- package/dist/chunks/{core-DN3hHbHh.js → core-CUGCsMsJ.js} +2 -2
- package/dist/chunks/{core-DN3hHbHh.js.map → core-CUGCsMsJ.js.map} +1 -1
- package/dist/chunks/{core-BVQW34aX.js → core-D7cVumUu.js} +3 -3
- package/dist/chunks/core-D7cVumUu.js.map +1 -0
- package/dist/chunks/{core-BjOYKSrV.cjs → core-zq17EeCI.cjs} +2 -2
- package/dist/chunks/{core-BjOYKSrV.cjs.map → core-zq17EeCI.cjs.map} +1 -1
- package/dist/chunks/{fx-ChjxrMBo.js → fx-BqDeFywO.js} +2 -2
- package/dist/chunks/{fx-ChjxrMBo.js.map → fx-BqDeFywO.js.map} +1 -1
- package/dist/chunks/{fx-B8hk1Fby.cjs → fx-lBGVtQO1.cjs} +2 -2
- package/dist/chunks/{fx-B8hk1Fby.cjs.map → fx-lBGVtQO1.cjs.map} +1 -1
- package/dist/chunks/{presets-BJ09NeTo.js → presets-BYBVJVeP.js} +3 -3
- package/dist/chunks/presets-BYBVJVeP.js.map +1 -0
- package/dist/chunks/{presets-D2ksQNzJ.cjs → presets-CUHys3sK.cjs} +3 -3
- package/dist/chunks/presets-CUHys3sK.cjs.map +1 -0
- package/dist/chunks/{spring-CckMe3x0.js → spring-DfQO5USi.js} +2 -2
- package/dist/chunks/{spring-CckMe3x0.js.map → spring-DfQO5USi.js.map} +1 -1
- package/dist/chunks/{spring--oZh55tB.cjs → spring-Dgx187Vh.cjs} +2 -2
- package/dist/chunks/{spring--oZh55tB.cjs.map → spring-Dgx187Vh.cjs.map} +1 -1
- package/dist/chunks/{stagger-CvhYlKrF.cjs → stagger-CCFyhzSw.cjs} +3 -3
- package/dist/chunks/stagger-CCFyhzSw.cjs.map +1 -0
- package/dist/chunks/{stagger-Dh4V-OL0.js → stagger-DtMKo2SK.js} +3 -3
- package/dist/chunks/stagger-DtMKo2SK.js.map +1 -0
- package/dist/chunks/{variants-DxPmgrNX.cjs → variants-BhjyddG8.cjs} +2 -2
- package/dist/chunks/{variants-DxPmgrNX.cjs.map → variants-BhjyddG8.cjs.map} +1 -1
- package/dist/chunks/{variants-Bsevy6Xm.js → variants-VNscPeTD.js} +2 -2
- package/dist/chunks/{variants-Bsevy6Xm.js.map → variants-VNscPeTD.js.map} +1 -1
- package/dist/components/a11y.cjs +4 -4
- package/dist/components/a11y.cjs.map +1 -1
- package/dist/components/a11y.d.cts +2 -2
- package/dist/components/a11y.d.ts +2 -2
- package/dist/components/a11y.js +5 -5
- package/dist/components/a11y.js.map +1 -1
- package/dist/components/angular.cjs +8 -8
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +22 -22
- package/dist/components/angular.d.ts +22 -22
- package/dist/components/angular.js +8 -8
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.cjs +3 -3
- package/dist/components/background.cjs.map +1 -1
- package/dist/components/background.css +1 -1
- package/dist/components/background.d.cts +1 -1
- package/dist/components/background.d.ts +1 -1
- package/dist/components/background.js +3 -3
- package/dist/components/background.js.map +1 -1
- package/dist/components/bridge.cjs +2 -2
- package/dist/components/bridge.cjs.map +1 -1
- package/dist/components/bridge.d.cts +1 -1
- package/dist/components/bridge.d.ts +1 -1
- package/dist/components/bridge.js +2 -2
- package/dist/components/bridge.js.map +1 -1
- package/dist/components/cards.cjs +3 -3
- package/dist/components/cards.cjs.map +1 -1
- package/dist/components/cards.css +1 -1
- package/dist/components/cards.d.cts +1 -1
- package/dist/components/cards.d.ts +1 -1
- package/dist/components/cards.js +3 -3
- package/dist/components/cards.js.map +1 -1
- package/dist/components/click.cjs +4 -4
- package/dist/components/click.cjs.map +1 -1
- package/dist/components/click.css +1 -1
- package/dist/components/click.d.cts +1 -1
- package/dist/components/click.d.ts +1 -1
- package/dist/components/click.js +4 -4
- package/dist/components/click.js.map +1 -1
- package/dist/components/depth.cjs +4 -4
- package/dist/components/depth.cjs.map +1 -1
- package/dist/components/depth.css +1 -1
- package/dist/components/depth.d.cts +1 -1
- package/dist/components/depth.d.ts +1 -1
- package/dist/components/depth.js +4 -4
- package/dist/components/depth.js.map +1 -1
- package/dist/components/effects.cjs +13 -13
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.d.cts +2 -2
- package/dist/components/effects.d.ts +2 -2
- package/dist/components/effects.js +13 -13
- package/dist/components/effects.js.map +1 -1
- package/dist/components/feedback.cjs +2 -2
- package/dist/components/feedback.cjs.map +1 -1
- package/dist/components/feedback.css +1 -1
- package/dist/components/feedback.d.cts +1 -1
- package/dist/components/feedback.d.ts +1 -1
- package/dist/components/feedback.js +2 -2
- package/dist/components/feedback.js.map +1 -1
- package/dist/components/fx.cjs +10 -10
- package/dist/components/fx.cjs.map +1 -1
- package/dist/components/fx.css +1 -1
- package/dist/components/fx.d.cts +2 -2
- package/dist/components/fx.d.ts +2 -2
- package/dist/components/fx.js +10 -10
- package/dist/components/fx.js.map +1 -1
- package/dist/components/gesture.cjs +4 -4
- package/dist/components/gesture.cjs.map +1 -1
- package/dist/components/gesture.css +1 -1
- package/dist/components/gesture.d.cts +1 -1
- package/dist/components/gesture.d.ts +1 -1
- package/dist/components/gesture.js +5 -5
- package/dist/components/gesture.js.map +1 -1
- package/dist/components/interaction.cjs +2 -2
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.css +1 -1
- package/dist/components/interaction.d.cts +1 -1
- package/dist/components/interaction.d.ts +1 -1
- package/dist/components/interaction.js +2 -2
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/jsx.d.cts +2 -2
- package/dist/components/jsx.d.ts +2 -2
- package/dist/components/layout.cjs +2 -2
- package/dist/components/layout.cjs.map +1 -1
- package/dist/components/layout.css +1 -1
- package/dist/components/layout.d.cts +1 -1
- package/dist/components/layout.d.ts +1 -1
- package/dist/components/layout.js +2 -2
- package/dist/components/layout.js.map +1 -1
- package/dist/components/lazy.cjs +2 -2
- package/dist/components/lazy.cjs.map +1 -1
- package/dist/components/lazy.d.cts +2 -2
- package/dist/components/lazy.d.ts +2 -2
- package/dist/components/lazy.js +2 -2
- package/dist/components/lazy.js.map +1 -1
- package/dist/components/lite.cjs +41 -41
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +41 -41
- package/dist/components/lite.js.map +1 -1
- package/dist/components/packs.cjs +2 -2
- package/dist/components/packs.cjs.map +1 -1
- package/dist/components/packs.css +1 -1
- package/dist/components/packs.d.cts +1 -1
- package/dist/components/packs.d.ts +1 -1
- package/dist/components/packs.js +2 -2
- package/dist/components/packs.js.map +1 -1
- package/dist/components/page.cjs +3 -3
- package/dist/components/page.cjs.map +1 -1
- package/dist/components/page.css +1 -1
- package/dist/components/page.d.cts +1 -1
- package/dist/components/page.d.ts +1 -1
- package/dist/components/page.js +4 -4
- package/dist/components/page.js.map +1 -1
- package/dist/components/perf.cjs +3 -3
- package/dist/components/perf.cjs.map +1 -1
- package/dist/components/perf.d.cts +2 -2
- package/dist/components/perf.d.ts +2 -2
- package/dist/components/perf.js +4 -4
- package/dist/components/perf.js.map +1 -1
- package/dist/components/physics.cjs +3 -3
- package/dist/components/physics.cjs.map +1 -1
- package/dist/components/physics.css +1 -1
- package/dist/components/physics.d.cts +1 -1
- package/dist/components/physics.d.ts +1 -1
- package/dist/components/physics.js +4 -4
- package/dist/components/physics.js.map +1 -1
- package/dist/components/react.cjs +4 -4
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.js +4 -4
- package/dist/components/react.js.map +1 -1
- package/dist/components/reveal.cjs +2 -2
- package/dist/components/reveal.cjs.map +1 -1
- package/dist/components/reveal.css +1 -1
- package/dist/components/reveal.d.cts +1 -1
- package/dist/components/reveal.d.ts +1 -1
- package/dist/components/reveal.js +2 -2
- package/dist/components/reveal.js.map +1 -1
- package/dist/components/solid.cjs +9 -9
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +22 -22
- package/dist/components/solid.d.ts +22 -22
- package/dist/components/solid.js +9 -9
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +8 -8
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +22 -22
- package/dist/components/svelte.d.ts +22 -22
- package/dist/components/svelte.js +8 -8
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.cjs +2 -2
- package/dist/components/svg.cjs.map +1 -1
- package/dist/components/svg.css +1 -1
- package/dist/components/svg.d.cts +1 -1
- package/dist/components/svg.d.ts +1 -1
- package/dist/components/svg.js +2 -2
- package/dist/components/svg.js.map +1 -1
- package/dist/components/text.cjs +3 -3
- package/dist/components/text.cjs.map +1 -1
- package/dist/components/text.css +1 -1
- package/dist/components/text.d.cts +1 -1
- package/dist/components/text.d.ts +1 -1
- package/dist/components/text.js +3 -3
- package/dist/components/text.js.map +1 -1
- package/dist/components/timeline.cjs +3 -3
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.css +1 -1
- package/dist/components/timeline.d.cts +1 -1
- package/dist/components/timeline.d.ts +1 -1
- package/dist/components/timeline.js +4 -4
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/tokens.cjs +2 -2
- package/dist/components/tokens.cjs.map +1 -1
- package/dist/components/tokens.d.cts +2 -2
- package/dist/components/tokens.d.ts +2 -2
- package/dist/components/tokens.js +2 -2
- package/dist/components/tokens.js.map +1 -1
- package/dist/components/transitions.cjs +2 -2
- package/dist/components/transitions.cjs.map +1 -1
- package/dist/components/transitions.css +1 -1
- package/dist/components/transitions.d.cts +1 -1
- package/dist/components/transitions.d.ts +1 -1
- package/dist/components/transitions.js +2 -2
- package/dist/components/transitions.js.map +1 -1
- package/dist/components/ui.cjs +4 -4
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.css +1 -1
- package/dist/components/ui.d.cts +1 -1
- package/dist/components/ui.d.ts +1 -1
- package/dist/components/ui.js +5 -5
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.cjs +9 -9
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +23 -23
- package/dist/components/vue.d.ts +23 -23
- package/dist/components/vue.js +9 -9
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.cjs +2 -2
- package/dist/components/webgl.cjs.map +1 -1
- package/dist/components/webgl.css +1 -1
- package/dist/components/webgl.d.cts +1 -1
- package/dist/components/webgl.d.ts +1 -1
- package/dist/components/webgl.js +2 -2
- package/dist/components/webgl.js.map +1 -1
- package/dist/components.cjs +9 -9
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.d.cts +30 -30
- package/dist/components.d.ts +30 -30
- package/dist/components.js +11 -11
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +5 -5
- package/dist/components.umd.js.map +1 -1
- package/dist/element.cjs +4 -4
- package/dist/element.cjs.map +1 -1
- package/dist/element.d.cts +5 -5
- package/dist/element.d.ts +5 -5
- package/dist/element.js +4 -4
- package/dist/element.js.map +1 -1
- package/dist/element.umd.js.map +1 -1
- package/dist/index.cjs +10 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -9
- package/dist/index.d.ts +9 -9
- package/dist/index.js +11 -11
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/index.umd.js.map +1 -1
- package/dist/presets/extended.cjs +3 -3
- package/dist/presets/extended.cjs.map +1 -1
- package/dist/presets/extended.d.cts +3 -3
- package/dist/presets/extended.d.ts +3 -3
- package/dist/presets/extended.js +3 -3
- package/dist/presets/extended.js.map +1 -1
- package/dist/presets-extended.umd.js.map +1 -1
- package/dist/react.cjs +4 -4
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +5 -5
- package/dist/react.d.ts +5 -5
- package/dist/react.js +4 -4
- package/dist/react.js.map +1 -1
- package/dist/solid.cjs +5 -5
- package/dist/solid.cjs.map +1 -1
- package/dist/solid.d.cts +6 -6
- package/dist/solid.d.ts +6 -6
- package/dist/solid.js +5 -5
- package/dist/solid.js.map +1 -1
- package/dist/svelte.cjs +5 -5
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +6 -6
- package/dist/svelte.d.ts +6 -6
- package/dist/svelte.js +5 -5
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +4 -4
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +5 -5
- package/dist/vue.d.ts +5 -5
- package/dist/vue.js +4 -4
- package/dist/vue.js.map +1 -1
- package/docs/API.md +13 -13
- package/docs/ROADMAP.md +2 -2
- package/docs/accessibility.md +2 -2
- package/docs/components.md +33 -33
- package/docs/frameworks-ssr.md +12 -12
- package/docs/hybrid-apps.md +10 -10
- package/docs/migration-from-aos.md +5 -5
- package/docs/migration-from-gsap-scrolltrigger.md +3 -3
- package/docs/motion-tokens.css +1 -1
- package/docs/motion-tokens.md +2 -2
- package/docs/performance.md +6 -6
- package/docs/presets.md +5 -5
- package/docs/windows-apps.md +8 -8
- package/package.json +26 -25
- package/dist/chunks/base-B5i8qQPR.cjs.map +0 -1
- package/dist/chunks/base-C3Sw9sAO.js.map +0 -1
- package/dist/chunks/core-BVQW34aX.js.map +0 -1
- package/dist/chunks/core-BYLtO0Po.cjs.map +0 -1
- package/dist/chunks/presets-BJ09NeTo.js.map +0 -1
- package/dist/chunks/presets-D2ksQNzJ.cjs.map +0 -1
- package/dist/chunks/stagger-CvhYlKrF.cjs.map +0 -1
- package/dist/chunks/stagger-Dh4V-OL0.js.map +0 -1
package/dist/components/lite.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* motionary/components — shared base for the `<usa-*>` custom elements.
|
|
3
3
|
*
|
|
4
4
|
* Everything here is lazy: nothing touches `window`, `document`,
|
|
5
5
|
* `HTMLElement` or `matchMedia` at import time, so the components can be
|
|
@@ -388,7 +388,7 @@ function deprecate(key, message) {
|
|
|
388
388
|
return;
|
|
389
389
|
warned.add(key);
|
|
390
390
|
if (typeof console !== 'undefined')
|
|
391
|
-
console.warn(`[
|
|
391
|
+
console.warn(`[motionary] ${message}`);
|
|
392
392
|
}
|
|
393
393
|
/**
|
|
394
394
|
* The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and
|
|
@@ -425,7 +425,7 @@ const COMPONENT_CATEGORIES = {
|
|
|
425
425
|
};
|
|
426
426
|
|
|
427
427
|
/**
|
|
428
|
-
*
|
|
428
|
+
* motionary/components/perf — performance toolkit (4.5).
|
|
429
429
|
*
|
|
430
430
|
* - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).
|
|
431
431
|
* - Animation budget: `setAnimationBudget(n)` caps concurrent component
|
|
@@ -434,7 +434,7 @@ const COMPONENT_CATEGORIES = {
|
|
|
434
434
|
* down (`low`, then a tighter budget) while the device struggles, restoring
|
|
435
435
|
* it when frames recover.
|
|
436
436
|
* - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by
|
|
437
|
-
* `
|
|
437
|
+
* `motionary/components/lite`, the build without inlined CSS.
|
|
438
438
|
*/
|
|
439
439
|
/**
|
|
440
440
|
* Watch frame rate and animation count; while the device struggles, set
|
|
@@ -866,7 +866,7 @@ function defineScrolly(tag = 'usa-scrolly') {
|
|
|
866
866
|
}
|
|
867
867
|
|
|
868
868
|
/**
|
|
869
|
-
*
|
|
869
|
+
* motionary/components/reveal — entrance & scroll reveal components.
|
|
870
870
|
* `<usa-reveal>`, `<usa-stagger>`, `<usa-scroll-progress>`, `<usa-scrolly>`.
|
|
871
871
|
*/
|
|
872
872
|
/** Register every component of this category under its default tag. */
|
|
@@ -997,7 +997,7 @@ function defineTypewriter(tag = 'usa-typewriter') {
|
|
|
997
997
|
var css$12 = "";
|
|
998
998
|
|
|
999
999
|
/**
|
|
1000
|
-
*
|
|
1000
|
+
* motionary/components/tokens — motion design tokens (4.2).
|
|
1001
1001
|
*
|
|
1002
1002
|
* One source of truth for durations, easings and springs: as CSS custom
|
|
1003
1003
|
* properties (`--usa-duration-fast`, `--usa-easing-emphasized`,
|
|
@@ -1005,7 +1005,7 @@ var css$12 = "";
|
|
|
1005
1005
|
* from Figma Tokens (Tokens Studio) or Style Dictionary exports.
|
|
1006
1006
|
*
|
|
1007
1007
|
* ```ts
|
|
1008
|
-
* import { applyMotionTokens, importMotionTokens, motionToken } from '
|
|
1008
|
+
* import { applyMotionTokens, importMotionTokens, motionToken } from 'motionary/components/tokens';
|
|
1009
1009
|
* applyMotionTokens(importMotionTokens(await (await fetch('/tokens.json')).json()));
|
|
1010
1010
|
* el.animate(frames, { duration: motionToken('duration', 'slow'), easing: motionToken('easing', 'emphasized') });
|
|
1011
1011
|
* ```
|
|
@@ -2263,7 +2263,7 @@ function defineScrollHighlight(tag = 'usa-scroll-highlight') {
|
|
|
2263
2263
|
}
|
|
2264
2264
|
|
|
2265
2265
|
/**
|
|
2266
|
-
*
|
|
2266
|
+
* motionary/components/text — text effects.
|
|
2267
2267
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
2268
2268
|
* `<usa-shimmer-text>`, `<usa-text-rotate>`.
|
|
2269
2269
|
*/
|
|
@@ -2680,7 +2680,7 @@ function defineToggle(tag = 'usa-toggle') {
|
|
|
2680
2680
|
}
|
|
2681
2681
|
|
|
2682
2682
|
/**
|
|
2683
|
-
*
|
|
2683
|
+
* motionary/components/interaction — micro-interactions.
|
|
2684
2684
|
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
2685
2685
|
* `<usa-press>`, `<usa-toggle>`.
|
|
2686
2686
|
*/
|
|
@@ -3110,7 +3110,7 @@ function defineCheck(tag = 'usa-check') {
|
|
|
3110
3110
|
}
|
|
3111
3111
|
|
|
3112
3112
|
/**
|
|
3113
|
-
*
|
|
3113
|
+
* motionary/components/feedback — loading & feedback.
|
|
3114
3114
|
* `<usa-spinner>`, `<usa-skeleton>`, `<usa-progress>`, `<usa-toaster>` +
|
|
3115
3115
|
* `toast()`, `<usa-check>`.
|
|
3116
3116
|
*/
|
|
@@ -3779,7 +3779,7 @@ function fluentPreset(options = {}) {
|
|
|
3779
3779
|
}
|
|
3780
3780
|
|
|
3781
3781
|
/**
|
|
3782
|
-
*
|
|
3782
|
+
* motionary/components/background — backgrounds & decoration.
|
|
3783
3783
|
* `<usa-aurora>`, `<usa-particles>`, `<usa-grain>`, `<usa-marquee>`,
|
|
3784
3784
|
* `<usa-acrylic>`.
|
|
3785
3785
|
*/
|
|
@@ -4203,7 +4203,7 @@ async function flip(targets, mutate, options = {}) {
|
|
|
4203
4203
|
}
|
|
4204
4204
|
|
|
4205
4205
|
/**
|
|
4206
|
-
*
|
|
4206
|
+
* motionary/components/transitions — view & layout transitions.
|
|
4207
4207
|
* `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
|
|
4208
4208
|
* and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
|
|
4209
4209
|
* `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
|
|
@@ -4841,7 +4841,7 @@ function defineOverscroll(tag = 'usa-overscroll') {
|
|
|
4841
4841
|
}
|
|
4842
4842
|
|
|
4843
4843
|
/**
|
|
4844
|
-
*
|
|
4844
|
+
* motionary/components/physics — spring & bounce physics (v2.3).
|
|
4845
4845
|
* `<usa-spring>` (bounce-in, pop, drop, jelly, rubber-band), `<usa-draggable>`
|
|
4846
4846
|
* (spring-back, inertia, snap) and `<usa-overscroll>` (elastic edges), plus
|
|
4847
4847
|
* the spring core: `spring()`, `springEasing()`, `createSpring()`,
|
|
@@ -5389,7 +5389,7 @@ function defineCarousel3d(tag = 'usa-carousel-3d') {
|
|
|
5389
5389
|
}
|
|
5390
5390
|
|
|
5391
5391
|
/**
|
|
5392
|
-
*
|
|
5392
|
+
* motionary/components/cards — card effects (v2.4).
|
|
5393
5393
|
* `<usa-card effect="flip | holo | glass | border-glow | conic-border | lift |
|
|
5394
5394
|
* spotlight | sheen | parallax-layers | expand">` (combinable),
|
|
5395
5395
|
* `<usa-card-stack>` (swipeable deck), `<usa-sticky-stack>` (stacking on
|
|
@@ -6346,7 +6346,7 @@ function defineCheckbox(tag = 'usa-checkbox') {
|
|
|
6346
6346
|
}
|
|
6347
6347
|
|
|
6348
6348
|
/**
|
|
6349
|
-
*
|
|
6349
|
+
* motionary/components/click — click & tap effects (v2.5).
|
|
6350
6350
|
* `<usa-click>` (ripple, burst, confetti, squish, press-spring, shake),
|
|
6351
6351
|
* `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
|
|
6352
6352
|
* shape morph; submit → loading → success), `<usa-icon-morph>`,
|
|
@@ -7369,7 +7369,7 @@ function defineAvatarStack(tag = 'usa-avatar-stack') {
|
|
|
7369
7369
|
}
|
|
7370
7370
|
|
|
7371
7371
|
/**
|
|
7372
|
-
*
|
|
7372
|
+
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
7373
7373
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
7374
7374
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
7375
7375
|
* `<usa-tooltip>`, `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
@@ -8166,7 +8166,7 @@ function themeTransition(apply, options = {}) {
|
|
|
8166
8166
|
}
|
|
8167
8167
|
|
|
8168
8168
|
/**
|
|
8169
|
-
*
|
|
8169
|
+
* motionary/components/page — page & app-wide effects (v2.7).
|
|
8170
8170
|
* Page transitions (`pageTransition()`, `enableMpaTransitions()`,
|
|
8171
8171
|
* `themeTransition()`), `<usa-cursor>`, `smoothScroll()` / `scrollToTarget()`,
|
|
8172
8172
|
* `<usa-fullpage>`, `<usa-loading-bar>` + `loadingBar`, `<usa-back-to-top>`,
|
|
@@ -8271,7 +8271,7 @@ function defineTimeline(tag = 'usa-timeline') {
|
|
|
8271
8271
|
}
|
|
8272
8272
|
|
|
8273
8273
|
/**
|
|
8274
|
-
*
|
|
8274
|
+
* motionary/components/timeline — choreography (v3.1).
|
|
8275
8275
|
* `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs
|
|
8276
8276
|
* WAAPI animations on one playhead; `<usa-timeline>` builds one from
|
|
8277
8277
|
* `data-tl` children.
|
|
@@ -8643,7 +8643,7 @@ function definePinchZoom(tag = 'usa-pinch-zoom') {
|
|
|
8643
8643
|
}
|
|
8644
8644
|
|
|
8645
8645
|
/**
|
|
8646
|
-
*
|
|
8646
|
+
* motionary/components/gesture — unified gestures (v3.2).
|
|
8647
8647
|
* `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
|
|
8648
8648
|
* with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
|
|
8649
8649
|
* and `<usa-pinch-zoom>` are built on it.
|
|
@@ -8984,7 +8984,7 @@ function defineAnimIcon(tag = 'usa-anim-icon') {
|
|
|
8984
8984
|
}
|
|
8985
8985
|
|
|
8986
8986
|
/**
|
|
8987
|
-
*
|
|
8987
|
+
* motionary/components/svg — SVG animation (v3.3).
|
|
8988
8988
|
* `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
|
|
8989
8989
|
* (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
|
|
8990
8990
|
* `interpolatePath()`, `morphTo()`, `drawLines()`.
|
|
@@ -9422,7 +9422,7 @@ function definePostFx(tag = 'usa-post-fx') {
|
|
|
9422
9422
|
}
|
|
9423
9423
|
|
|
9424
9424
|
/**
|
|
9425
|
-
*
|
|
9425
|
+
* motionary/components/webgl — lightweight canvas / WebGL (v3.4).
|
|
9426
9426
|
* `<usa-shader>` (shader backgrounds), `<usa-distort>` (hover image
|
|
9427
9427
|
* distortion), `<usa-liquid>` (ripple images) on a tiny single-quad runner
|
|
9428
9428
|
* (`glQuad()`), with graceful fallbacks when WebGL is unavailable.
|
|
@@ -9660,7 +9660,7 @@ function defineDepth(tag = 'usa-depth') {
|
|
|
9660
9660
|
}
|
|
9661
9661
|
|
|
9662
9662
|
/**
|
|
9663
|
-
*
|
|
9663
|
+
* motionary/components/depth — 3D (v3.5).
|
|
9664
9664
|
* `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
|
|
9665
9665
|
* pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
|
|
9666
9666
|
* carousel is `<usa-carousel-3d>` in `components/cards`.
|
|
@@ -9905,7 +9905,7 @@ function defineMasonry(tag = 'usa-masonry') {
|
|
|
9905
9905
|
}
|
|
9906
9906
|
|
|
9907
9907
|
/**
|
|
9908
|
-
*
|
|
9908
|
+
* motionary/components/layout — layout animation (v3.6).
|
|
9909
9909
|
* `autoAnimate()` / `<usa-auto-animate>` (list & grid reflow),
|
|
9910
9910
|
* `<usa-masonry>`, and `sharedTransition()` for shared-element transitions
|
|
9911
9911
|
* (View Transitions API with a FLIP fallback).
|
|
@@ -10085,7 +10085,7 @@ function definePack(tag = 'usa-pack') {
|
|
|
10085
10085
|
}
|
|
10086
10086
|
|
|
10087
10087
|
/**
|
|
10088
|
-
*
|
|
10088
|
+
* motionary/components/packs — effect packs (v3.9).
|
|
10089
10089
|
* Ready-made motion for e-commerce, portfolio, dashboard, game UI and
|
|
10090
10090
|
* landing pages: mark elements with `data-role` and apply a pack with
|
|
10091
10091
|
* `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
|
|
@@ -10110,11 +10110,11 @@ const registry = new Map();
|
|
|
10110
10110
|
/** Register an effect (throws on a duplicate name unless `override`). Returns an unregister function. */
|
|
10111
10111
|
function registerEffect(def, opts = {}) {
|
|
10112
10112
|
if (!/^[a-z][a-z0-9-]*$/.test(def.name))
|
|
10113
|
-
throw new Error(`[
|
|
10113
|
+
throw new Error(`[motionary] invalid effect name "${def.name}"`);
|
|
10114
10114
|
if (!EFFECT_KINDS.includes(def.kind))
|
|
10115
|
-
throw new Error(`[
|
|
10115
|
+
throw new Error(`[motionary] unknown effect kind "${def.kind}"`);
|
|
10116
10116
|
if (registry.has(def.name) && !opts.override)
|
|
10117
|
-
throw new Error(`[
|
|
10117
|
+
throw new Error(`[motionary] effect "${def.name}" is already registered`);
|
|
10118
10118
|
registry.set(def.name, def);
|
|
10119
10119
|
return () => {
|
|
10120
10120
|
if (registry.get(def.name) === def)
|
|
@@ -10154,7 +10154,7 @@ function context(event) {
|
|
|
10154
10154
|
async function playEffect(el, name, options = {}, event) {
|
|
10155
10155
|
const def = registry.get(name);
|
|
10156
10156
|
if (!def)
|
|
10157
|
-
throw new Error(`[
|
|
10157
|
+
throw new Error(`[motionary] unknown effect "${name}" — registered: ${Array.from(registry.keys()).join(', ')}`);
|
|
10158
10158
|
const ctx = context(event);
|
|
10159
10159
|
if (ctx.reduced && (def.reduced ?? (SKIP_BY_DEFAULT.includes(def.kind) ? 'skip' : 'run')) === 'skip')
|
|
10160
10160
|
return;
|
|
@@ -10173,7 +10173,7 @@ function bindEffect(el, name, options = {}) {
|
|
|
10173
10173
|
const { trigger = 'click', once, ...opts } = options;
|
|
10174
10174
|
const def = registry.get(name);
|
|
10175
10175
|
if (!def)
|
|
10176
|
-
throw new Error(`[
|
|
10176
|
+
throw new Error(`[motionary] unknown effect "${name}"`);
|
|
10177
10177
|
const offs = [];
|
|
10178
10178
|
let current = null;
|
|
10179
10179
|
const fire = (e) => {
|
|
@@ -10347,12 +10347,12 @@ const click = [
|
|
|
10347
10347
|
const BUILTIN_EFFECTS = [...enter, ...attention, ...click];
|
|
10348
10348
|
|
|
10349
10349
|
/**
|
|
10350
|
-
*
|
|
10350
|
+
* motionary/components/fx — unified plugin-style effects (5.0).
|
|
10351
10351
|
* `registerEffect({ name, kind, run })`, `playEffect(el, name)`,
|
|
10352
10352
|
* `bindEffect(el, name, { trigger })`, `<usa-fx effect trigger>`. Built-ins:
|
|
10353
10353
|
* every timeline preset (`enter`), `pulse` · `pop` · `jelly` · `wiggle` ·
|
|
10354
10354
|
* `heartbeat` · `bounce` · `flash` · `tada` · `shake` (attention),
|
|
10355
|
-
* `burst` · `confetti` · `ripple` (click). More packs: `
|
|
10355
|
+
* `burst` · `confetti` · `ripple` (click). More packs: `motionary/components/effects`.
|
|
10356
10356
|
*/
|
|
10357
10357
|
/** Register the built-in effects (idempotent; `defineFxComponents()` calls it). */
|
|
10358
10358
|
function registerBuiltinEffects() {
|
|
@@ -10394,12 +10394,12 @@ function baselineReport() {
|
|
|
10394
10394
|
function warnBaseline() {
|
|
10395
10395
|
const missing = baselineReport().filter((f) => f.required && !f.supported).map((f) => f.id);
|
|
10396
10396
|
if (missing.length)
|
|
10397
|
-
deprecate('baseline', `this browser lacks ${missing.join(', ')};
|
|
10397
|
+
deprecate('baseline', `this browser lacks ${missing.join(', ')}; motionary 5.0 requires them (modern-browser baseline, see docs/upgrading-5.md).`);
|
|
10398
10398
|
return missing;
|
|
10399
10399
|
}
|
|
10400
10400
|
|
|
10401
10401
|
/**
|
|
10402
|
-
*
|
|
10402
|
+
* motionary/components/a11y — accessibility toolkit (4.4).
|
|
10403
10403
|
*
|
|
10404
10404
|
* - Motion-sensitivity levels: `setMotionSensitivity('full' | 'gentle' | 'minimal' | 'static')`.
|
|
10405
10405
|
* - Static alternatives: what every component shows when motion is off, and
|
|
@@ -10410,7 +10410,7 @@ function warnBaseline() {
|
|
|
10410
10410
|
* over every `<usa-*>` element — usable in your own tests too.
|
|
10411
10411
|
*
|
|
10412
10412
|
* ```ts
|
|
10413
|
-
* import { setMotionSensitivity, announce, auditMotionA11y } from '
|
|
10413
|
+
* import { setMotionSensitivity, announce, auditMotionA11y } from 'motionary/components/a11y';
|
|
10414
10414
|
* setMotionSensitivity('gentle', true); // no spins / zooms / parallax, remembered
|
|
10415
10415
|
* announce('3 items added to cart'); // polite live region
|
|
10416
10416
|
* expect(auditMotionA11y(document.body).errors).toEqual([]);
|
|
@@ -10618,7 +10618,7 @@ function auditMotionA11y(root) {
|
|
|
10618
10618
|
const ALL_TAGS = Object.values(COMPONENT_CATEGORIES).flat();
|
|
10619
10619
|
|
|
10620
10620
|
/**
|
|
10621
|
-
*
|
|
10621
|
+
* motionary/components/bridge — native shell bridges (4.7).
|
|
10622
10622
|
*
|
|
10623
10623
|
* Keeps the web UI in sync with the host app's system settings when it runs
|
|
10624
10624
|
* inside **WinUI 3 / WPF (WebView2)**, **.NET MAUI** (WebView / HybridWebView)
|
|
@@ -10761,7 +10761,7 @@ function connectNativeShell(options = {}) {
|
|
|
10761
10761
|
}
|
|
10762
10762
|
|
|
10763
10763
|
/**
|
|
10764
|
-
*
|
|
10764
|
+
* motionary/components
|
|
10765
10765
|
*
|
|
10766
10766
|
* Framework-agnostic, dependency-free animated UI components built on
|
|
10767
10767
|
* Custom Elements + CSS + the Web Animations API. They run in any browser
|
|
@@ -10769,10 +10769,10 @@ function connectNativeShell(options = {}) {
|
|
|
10769
10769
|
* (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.
|
|
10770
10770
|
*
|
|
10771
10771
|
* ```js
|
|
10772
|
-
* import { defineComponents } from '
|
|
10772
|
+
* import { defineComponents } from 'motionary/components';
|
|
10773
10773
|
* defineComponents(); // registers every <usa-*> element
|
|
10774
10774
|
* // or only what you use (tree-shakable):
|
|
10775
|
-
* import { defineTypewriter } from '
|
|
10775
|
+
* import { defineTypewriter } from 'motionary/components/text';
|
|
10776
10776
|
* ```
|
|
10777
10777
|
*
|
|
10778
10778
|
* Importing has no side effects and is SSR-safe; nothing is registered
|
|
@@ -10812,13 +10812,13 @@ function defineComponents(categories) {
|
|
|
10812
10812
|
}
|
|
10813
10813
|
|
|
10814
10814
|
/**
|
|
10815
|
-
*
|
|
10815
|
+
* motionary/components/lite — every component and helper **without
|
|
10816
10816
|
* inlined CSS** (4.5): each category's stylesheet (`dist/components/<cat>.css`)
|
|
10817
10817
|
* is loaded on demand the first time one of its elements connects.
|
|
10818
|
-
* Same API as `
|
|
10818
|
+
* Same API as `motionary/components`; ~15 KB gzip smaller.
|
|
10819
10819
|
*
|
|
10820
10820
|
* ```ts
|
|
10821
|
-
* import { defineComponents } from '
|
|
10821
|
+
* import { defineComponents } from 'motionary/components/lite';
|
|
10822
10822
|
* defineComponents(); // CSS for <usa-card> loads when the first card mounts
|
|
10823
10823
|
* ```
|
|
10824
10824
|
* Override where the CSS comes from with `onDemandStyles(base)`.
|