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.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* motionary/components — shared base for the `<usa-*>` custom elements.
|
|
6
6
|
*
|
|
7
7
|
* Everything here is lazy: nothing touches `window`, `document`,
|
|
8
8
|
* `HTMLElement` or `matchMedia` at import time, so the components can be
|
|
@@ -391,7 +391,7 @@ function deprecate(key, message) {
|
|
|
391
391
|
return;
|
|
392
392
|
warned.add(key);
|
|
393
393
|
if (typeof console !== 'undefined')
|
|
394
|
-
console.warn(`[
|
|
394
|
+
console.warn(`[motionary] ${message}`);
|
|
395
395
|
}
|
|
396
396
|
/**
|
|
397
397
|
* The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and
|
|
@@ -428,7 +428,7 @@ const COMPONENT_CATEGORIES = {
|
|
|
428
428
|
};
|
|
429
429
|
|
|
430
430
|
/**
|
|
431
|
-
*
|
|
431
|
+
* motionary/components/perf — performance toolkit (4.5).
|
|
432
432
|
*
|
|
433
433
|
* - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).
|
|
434
434
|
* - Animation budget: `setAnimationBudget(n)` caps concurrent component
|
|
@@ -437,7 +437,7 @@ const COMPONENT_CATEGORIES = {
|
|
|
437
437
|
* down (`low`, then a tighter budget) while the device struggles, restoring
|
|
438
438
|
* it when frames recover.
|
|
439
439
|
* - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by
|
|
440
|
-
* `
|
|
440
|
+
* `motionary/components/lite`, the build without inlined CSS.
|
|
441
441
|
*/
|
|
442
442
|
/**
|
|
443
443
|
* Watch frame rate and animation count; while the device struggles, set
|
|
@@ -869,7 +869,7 @@ function defineScrolly(tag = 'usa-scrolly') {
|
|
|
869
869
|
}
|
|
870
870
|
|
|
871
871
|
/**
|
|
872
|
-
*
|
|
872
|
+
* motionary/components/reveal — entrance & scroll reveal components.
|
|
873
873
|
* `<usa-reveal>`, `<usa-stagger>`, `<usa-scroll-progress>`, `<usa-scrolly>`.
|
|
874
874
|
*/
|
|
875
875
|
/** Register every component of this category under its default tag. */
|
|
@@ -1000,7 +1000,7 @@ function defineTypewriter(tag = 'usa-typewriter') {
|
|
|
1000
1000
|
var css$12 = "";
|
|
1001
1001
|
|
|
1002
1002
|
/**
|
|
1003
|
-
*
|
|
1003
|
+
* motionary/components/tokens — motion design tokens (4.2).
|
|
1004
1004
|
*
|
|
1005
1005
|
* One source of truth for durations, easings and springs: as CSS custom
|
|
1006
1006
|
* properties (`--usa-duration-fast`, `--usa-easing-emphasized`,
|
|
@@ -1008,7 +1008,7 @@ var css$12 = "";
|
|
|
1008
1008
|
* from Figma Tokens (Tokens Studio) or Style Dictionary exports.
|
|
1009
1009
|
*
|
|
1010
1010
|
* ```ts
|
|
1011
|
-
* import { applyMotionTokens, importMotionTokens, motionToken } from '
|
|
1011
|
+
* import { applyMotionTokens, importMotionTokens, motionToken } from 'motionary/components/tokens';
|
|
1012
1012
|
* applyMotionTokens(importMotionTokens(await (await fetch('/tokens.json')).json()));
|
|
1013
1013
|
* el.animate(frames, { duration: motionToken('duration', 'slow'), easing: motionToken('easing', 'emphasized') });
|
|
1014
1014
|
* ```
|
|
@@ -2266,7 +2266,7 @@ function defineScrollHighlight(tag = 'usa-scroll-highlight') {
|
|
|
2266
2266
|
}
|
|
2267
2267
|
|
|
2268
2268
|
/**
|
|
2269
|
-
*
|
|
2269
|
+
* motionary/components/text — text effects.
|
|
2270
2270
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
2271
2271
|
* `<usa-shimmer-text>`, `<usa-text-rotate>`.
|
|
2272
2272
|
*/
|
|
@@ -2683,7 +2683,7 @@ function defineToggle(tag = 'usa-toggle') {
|
|
|
2683
2683
|
}
|
|
2684
2684
|
|
|
2685
2685
|
/**
|
|
2686
|
-
*
|
|
2686
|
+
* motionary/components/interaction — micro-interactions.
|
|
2687
2687
|
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
2688
2688
|
* `<usa-press>`, `<usa-toggle>`.
|
|
2689
2689
|
*/
|
|
@@ -3113,7 +3113,7 @@ function defineCheck(tag = 'usa-check') {
|
|
|
3113
3113
|
}
|
|
3114
3114
|
|
|
3115
3115
|
/**
|
|
3116
|
-
*
|
|
3116
|
+
* motionary/components/feedback — loading & feedback.
|
|
3117
3117
|
* `<usa-spinner>`, `<usa-skeleton>`, `<usa-progress>`, `<usa-toaster>` +
|
|
3118
3118
|
* `toast()`, `<usa-check>`.
|
|
3119
3119
|
*/
|
|
@@ -3782,7 +3782,7 @@ function fluentPreset(options = {}) {
|
|
|
3782
3782
|
}
|
|
3783
3783
|
|
|
3784
3784
|
/**
|
|
3785
|
-
*
|
|
3785
|
+
* motionary/components/background — backgrounds & decoration.
|
|
3786
3786
|
* `<usa-aurora>`, `<usa-particles>`, `<usa-grain>`, `<usa-marquee>`,
|
|
3787
3787
|
* `<usa-acrylic>`.
|
|
3788
3788
|
*/
|
|
@@ -4206,7 +4206,7 @@ async function flip(targets, mutate, options = {}) {
|
|
|
4206
4206
|
}
|
|
4207
4207
|
|
|
4208
4208
|
/**
|
|
4209
|
-
*
|
|
4209
|
+
* motionary/components/transitions — view & layout transitions.
|
|
4210
4210
|
* `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
|
|
4211
4211
|
* and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
|
|
4212
4212
|
* `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
|
|
@@ -4844,7 +4844,7 @@ function defineOverscroll(tag = 'usa-overscroll') {
|
|
|
4844
4844
|
}
|
|
4845
4845
|
|
|
4846
4846
|
/**
|
|
4847
|
-
*
|
|
4847
|
+
* motionary/components/physics — spring & bounce physics (v2.3).
|
|
4848
4848
|
* `<usa-spring>` (bounce-in, pop, drop, jelly, rubber-band), `<usa-draggable>`
|
|
4849
4849
|
* (spring-back, inertia, snap) and `<usa-overscroll>` (elastic edges), plus
|
|
4850
4850
|
* the spring core: `spring()`, `springEasing()`, `createSpring()`,
|
|
@@ -5392,7 +5392,7 @@ function defineCarousel3d(tag = 'usa-carousel-3d') {
|
|
|
5392
5392
|
}
|
|
5393
5393
|
|
|
5394
5394
|
/**
|
|
5395
|
-
*
|
|
5395
|
+
* motionary/components/cards — card effects (v2.4).
|
|
5396
5396
|
* `<usa-card effect="flip | holo | glass | border-glow | conic-border | lift |
|
|
5397
5397
|
* spotlight | sheen | parallax-layers | expand">` (combinable),
|
|
5398
5398
|
* `<usa-card-stack>` (swipeable deck), `<usa-sticky-stack>` (stacking on
|
|
@@ -6349,7 +6349,7 @@ function defineCheckbox(tag = 'usa-checkbox') {
|
|
|
6349
6349
|
}
|
|
6350
6350
|
|
|
6351
6351
|
/**
|
|
6352
|
-
*
|
|
6352
|
+
* motionary/components/click — click & tap effects (v2.5).
|
|
6353
6353
|
* `<usa-click>` (ripple, burst, confetti, squish, press-spring, shake),
|
|
6354
6354
|
* `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
|
|
6355
6355
|
* shape morph; submit → loading → success), `<usa-icon-morph>`,
|
|
@@ -7372,7 +7372,7 @@ function defineAvatarStack(tag = 'usa-avatar-stack') {
|
|
|
7372
7372
|
}
|
|
7373
7373
|
|
|
7374
7374
|
/**
|
|
7375
|
-
*
|
|
7375
|
+
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
7376
7376
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
7377
7377
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
7378
7378
|
* `<usa-tooltip>`, `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
@@ -8169,7 +8169,7 @@ function themeTransition(apply, options = {}) {
|
|
|
8169
8169
|
}
|
|
8170
8170
|
|
|
8171
8171
|
/**
|
|
8172
|
-
*
|
|
8172
|
+
* motionary/components/page — page & app-wide effects (v2.7).
|
|
8173
8173
|
* Page transitions (`pageTransition()`, `enableMpaTransitions()`,
|
|
8174
8174
|
* `themeTransition()`), `<usa-cursor>`, `smoothScroll()` / `scrollToTarget()`,
|
|
8175
8175
|
* `<usa-fullpage>`, `<usa-loading-bar>` + `loadingBar`, `<usa-back-to-top>`,
|
|
@@ -8274,7 +8274,7 @@ function defineTimeline(tag = 'usa-timeline') {
|
|
|
8274
8274
|
}
|
|
8275
8275
|
|
|
8276
8276
|
/**
|
|
8277
|
-
*
|
|
8277
|
+
* motionary/components/timeline — choreography (v3.1).
|
|
8278
8278
|
* `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs
|
|
8279
8279
|
* WAAPI animations on one playhead; `<usa-timeline>` builds one from
|
|
8280
8280
|
* `data-tl` children.
|
|
@@ -8646,7 +8646,7 @@ function definePinchZoom(tag = 'usa-pinch-zoom') {
|
|
|
8646
8646
|
}
|
|
8647
8647
|
|
|
8648
8648
|
/**
|
|
8649
|
-
*
|
|
8649
|
+
* motionary/components/gesture — unified gestures (v3.2).
|
|
8650
8650
|
* `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
|
|
8651
8651
|
* with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
|
|
8652
8652
|
* and `<usa-pinch-zoom>` are built on it.
|
|
@@ -8987,7 +8987,7 @@ function defineAnimIcon(tag = 'usa-anim-icon') {
|
|
|
8987
8987
|
}
|
|
8988
8988
|
|
|
8989
8989
|
/**
|
|
8990
|
-
*
|
|
8990
|
+
* motionary/components/svg — SVG animation (v3.3).
|
|
8991
8991
|
* `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
|
|
8992
8992
|
* (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
|
|
8993
8993
|
* `interpolatePath()`, `morphTo()`, `drawLines()`.
|
|
@@ -9425,7 +9425,7 @@ function definePostFx(tag = 'usa-post-fx') {
|
|
|
9425
9425
|
}
|
|
9426
9426
|
|
|
9427
9427
|
/**
|
|
9428
|
-
*
|
|
9428
|
+
* motionary/components/webgl — lightweight canvas / WebGL (v3.4).
|
|
9429
9429
|
* `<usa-shader>` (shader backgrounds), `<usa-distort>` (hover image
|
|
9430
9430
|
* distortion), `<usa-liquid>` (ripple images) on a tiny single-quad runner
|
|
9431
9431
|
* (`glQuad()`), with graceful fallbacks when WebGL is unavailable.
|
|
@@ -9663,7 +9663,7 @@ function defineDepth(tag = 'usa-depth') {
|
|
|
9663
9663
|
}
|
|
9664
9664
|
|
|
9665
9665
|
/**
|
|
9666
|
-
*
|
|
9666
|
+
* motionary/components/depth — 3D (v3.5).
|
|
9667
9667
|
* `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
|
|
9668
9668
|
* pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
|
|
9669
9669
|
* carousel is `<usa-carousel-3d>` in `components/cards`.
|
|
@@ -9908,7 +9908,7 @@ function defineMasonry(tag = 'usa-masonry') {
|
|
|
9908
9908
|
}
|
|
9909
9909
|
|
|
9910
9910
|
/**
|
|
9911
|
-
*
|
|
9911
|
+
* motionary/components/layout — layout animation (v3.6).
|
|
9912
9912
|
* `autoAnimate()` / `<usa-auto-animate>` (list & grid reflow),
|
|
9913
9913
|
* `<usa-masonry>`, and `sharedTransition()` for shared-element transitions
|
|
9914
9914
|
* (View Transitions API with a FLIP fallback).
|
|
@@ -10088,7 +10088,7 @@ function definePack(tag = 'usa-pack') {
|
|
|
10088
10088
|
}
|
|
10089
10089
|
|
|
10090
10090
|
/**
|
|
10091
|
-
*
|
|
10091
|
+
* motionary/components/packs — effect packs (v3.9).
|
|
10092
10092
|
* Ready-made motion for e-commerce, portfolio, dashboard, game UI and
|
|
10093
10093
|
* landing pages: mark elements with `data-role` and apply a pack with
|
|
10094
10094
|
* `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
|
|
@@ -10113,11 +10113,11 @@ const registry = new Map();
|
|
|
10113
10113
|
/** Register an effect (throws on a duplicate name unless `override`). Returns an unregister function. */
|
|
10114
10114
|
function registerEffect(def, opts = {}) {
|
|
10115
10115
|
if (!/^[a-z][a-z0-9-]*$/.test(def.name))
|
|
10116
|
-
throw new Error(`[
|
|
10116
|
+
throw new Error(`[motionary] invalid effect name "${def.name}"`);
|
|
10117
10117
|
if (!EFFECT_KINDS.includes(def.kind))
|
|
10118
|
-
throw new Error(`[
|
|
10118
|
+
throw new Error(`[motionary] unknown effect kind "${def.kind}"`);
|
|
10119
10119
|
if (registry.has(def.name) && !opts.override)
|
|
10120
|
-
throw new Error(`[
|
|
10120
|
+
throw new Error(`[motionary] effect "${def.name}" is already registered`);
|
|
10121
10121
|
registry.set(def.name, def);
|
|
10122
10122
|
return () => {
|
|
10123
10123
|
if (registry.get(def.name) === def)
|
|
@@ -10157,7 +10157,7 @@ function context(event) {
|
|
|
10157
10157
|
async function playEffect(el, name, options = {}, event) {
|
|
10158
10158
|
const def = registry.get(name);
|
|
10159
10159
|
if (!def)
|
|
10160
|
-
throw new Error(`[
|
|
10160
|
+
throw new Error(`[motionary] unknown effect "${name}" — registered: ${Array.from(registry.keys()).join(', ')}`);
|
|
10161
10161
|
const ctx = context(event);
|
|
10162
10162
|
if (ctx.reduced && (def.reduced ?? (SKIP_BY_DEFAULT.includes(def.kind) ? 'skip' : 'run')) === 'skip')
|
|
10163
10163
|
return;
|
|
@@ -10176,7 +10176,7 @@ function bindEffect(el, name, options = {}) {
|
|
|
10176
10176
|
const { trigger = 'click', once, ...opts } = options;
|
|
10177
10177
|
const def = registry.get(name);
|
|
10178
10178
|
if (!def)
|
|
10179
|
-
throw new Error(`[
|
|
10179
|
+
throw new Error(`[motionary] unknown effect "${name}"`);
|
|
10180
10180
|
const offs = [];
|
|
10181
10181
|
let current = null;
|
|
10182
10182
|
const fire = (e) => {
|
|
@@ -10350,12 +10350,12 @@ const click = [
|
|
|
10350
10350
|
const BUILTIN_EFFECTS = [...enter, ...attention, ...click];
|
|
10351
10351
|
|
|
10352
10352
|
/**
|
|
10353
|
-
*
|
|
10353
|
+
* motionary/components/fx — unified plugin-style effects (5.0).
|
|
10354
10354
|
* `registerEffect({ name, kind, run })`, `playEffect(el, name)`,
|
|
10355
10355
|
* `bindEffect(el, name, { trigger })`, `<usa-fx effect trigger>`. Built-ins:
|
|
10356
10356
|
* every timeline preset (`enter`), `pulse` · `pop` · `jelly` · `wiggle` ·
|
|
10357
10357
|
* `heartbeat` · `bounce` · `flash` · `tada` · `shake` (attention),
|
|
10358
|
-
* `burst` · `confetti` · `ripple` (click). More packs: `
|
|
10358
|
+
* `burst` · `confetti` · `ripple` (click). More packs: `motionary/components/effects`.
|
|
10359
10359
|
*/
|
|
10360
10360
|
/** Register the built-in effects (idempotent; `defineFxComponents()` calls it). */
|
|
10361
10361
|
function registerBuiltinEffects() {
|
|
@@ -10397,12 +10397,12 @@ function baselineReport() {
|
|
|
10397
10397
|
function warnBaseline() {
|
|
10398
10398
|
const missing = baselineReport().filter((f) => f.required && !f.supported).map((f) => f.id);
|
|
10399
10399
|
if (missing.length)
|
|
10400
|
-
deprecate('baseline', `this browser lacks ${missing.join(', ')};
|
|
10400
|
+
deprecate('baseline', `this browser lacks ${missing.join(', ')}; motionary 5.0 requires them (modern-browser baseline, see docs/upgrading-5.md).`);
|
|
10401
10401
|
return missing;
|
|
10402
10402
|
}
|
|
10403
10403
|
|
|
10404
10404
|
/**
|
|
10405
|
-
*
|
|
10405
|
+
* motionary/components/a11y — accessibility toolkit (4.4).
|
|
10406
10406
|
*
|
|
10407
10407
|
* - Motion-sensitivity levels: `setMotionSensitivity('full' | 'gentle' | 'minimal' | 'static')`.
|
|
10408
10408
|
* - Static alternatives: what every component shows when motion is off, and
|
|
@@ -10413,7 +10413,7 @@ function warnBaseline() {
|
|
|
10413
10413
|
* over every `<usa-*>` element — usable in your own tests too.
|
|
10414
10414
|
*
|
|
10415
10415
|
* ```ts
|
|
10416
|
-
* import { setMotionSensitivity, announce, auditMotionA11y } from '
|
|
10416
|
+
* import { setMotionSensitivity, announce, auditMotionA11y } from 'motionary/components/a11y';
|
|
10417
10417
|
* setMotionSensitivity('gentle', true); // no spins / zooms / parallax, remembered
|
|
10418
10418
|
* announce('3 items added to cart'); // polite live region
|
|
10419
10419
|
* expect(auditMotionA11y(document.body).errors).toEqual([]);
|
|
@@ -10621,7 +10621,7 @@ function auditMotionA11y(root) {
|
|
|
10621
10621
|
const ALL_TAGS = Object.values(COMPONENT_CATEGORIES).flat();
|
|
10622
10622
|
|
|
10623
10623
|
/**
|
|
10624
|
-
*
|
|
10624
|
+
* motionary/components/bridge — native shell bridges (4.7).
|
|
10625
10625
|
*
|
|
10626
10626
|
* Keeps the web UI in sync with the host app's system settings when it runs
|
|
10627
10627
|
* inside **WinUI 3 / WPF (WebView2)**, **.NET MAUI** (WebView / HybridWebView)
|
|
@@ -10764,7 +10764,7 @@ function connectNativeShell(options = {}) {
|
|
|
10764
10764
|
}
|
|
10765
10765
|
|
|
10766
10766
|
/**
|
|
10767
|
-
*
|
|
10767
|
+
* motionary/components
|
|
10768
10768
|
*
|
|
10769
10769
|
* Framework-agnostic, dependency-free animated UI components built on
|
|
10770
10770
|
* Custom Elements + CSS + the Web Animations API. They run in any browser
|
|
@@ -10772,10 +10772,10 @@ function connectNativeShell(options = {}) {
|
|
|
10772
10772
|
* (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.
|
|
10773
10773
|
*
|
|
10774
10774
|
* ```js
|
|
10775
|
-
* import { defineComponents } from '
|
|
10775
|
+
* import { defineComponents } from 'motionary/components';
|
|
10776
10776
|
* defineComponents(); // registers every <usa-*> element
|
|
10777
10777
|
* // or only what you use (tree-shakable):
|
|
10778
|
-
* import { defineTypewriter } from '
|
|
10778
|
+
* import { defineTypewriter } from 'motionary/components/text';
|
|
10779
10779
|
* ```
|
|
10780
10780
|
*
|
|
10781
10781
|
* Importing has no side effects and is SSR-safe; nothing is registered
|
|
@@ -10815,13 +10815,13 @@ function defineComponents(categories) {
|
|
|
10815
10815
|
}
|
|
10816
10816
|
|
|
10817
10817
|
/**
|
|
10818
|
-
*
|
|
10818
|
+
* motionary/components/lite — every component and helper **without
|
|
10819
10819
|
* inlined CSS** (4.5): each category's stylesheet (`dist/components/<cat>.css`)
|
|
10820
10820
|
* is loaded on demand the first time one of its elements connects.
|
|
10821
|
-
* Same API as `
|
|
10821
|
+
* Same API as `motionary/components`; ~15 KB gzip smaller.
|
|
10822
10822
|
*
|
|
10823
10823
|
* ```ts
|
|
10824
|
-
* import { defineComponents } from '
|
|
10824
|
+
* import { defineComponents } from 'motionary/components/lite';
|
|
10825
10825
|
* defineComponents(); // CSS for <usa-card> loads when the first card mounts
|
|
10826
10826
|
* ```
|
|
10827
10827
|
* Override where the CSS comes from with `onDemandStyles(base)`.
|