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/README_zh.md
CHANGED
|
@@ -1,248 +1,219 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
#
|
|
3
|
+
# Motionary
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**面向现代 Web 的滚动动画与动画 Web Components —— 214 个滚动预设、90 种效果、零依赖。**
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
[](https://github.com/HarrisonCN/use-scroll-animate)
|
|
9
|
-
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
_原名 **use-scroll-animate** —— API 与 `<usa-*>` 标签完全不变;旧 npm 包继续作为别名发布。_
|
|
10
8
|
|
|
11
|
-
[
|
|
12
|
-
|
|
13
|
-
**[✨ 在线效果商店:所有动画实时预览,代码一键复制](https://harrisoncn.github.io/use-scroll-animate/)**
|
|
14
|
-
|
|
15
|
-
</div>
|
|
16
|
-
|
|
17
|
-
## 为什么选择 `use-scroll-animate`?
|
|
18
|
-
|
|
19
|
-
在 2025 年,性能至关重要。传统的滚动动画库通常捆绑了沉重的依赖,依赖过时的滚动事件监听器,或者强制你使用特定的框架。
|
|
20
|
-
|
|
21
|
-
`use-scroll-animate` 的设计初衷截然不同:
|
|
22
|
-
- ⚡ **零依赖**:纯原生 JS/TypeScript 编写。
|
|
23
|
-
- 🚀 **高性能**:由 `IntersectionObserver` 和原生 `Web Animations API` 驱动。默认不监听滚动事件(可选的滚动进度模式仅在被追踪元素可见时使用一个 passive、rAF 节流的监听器),无布局抖动。
|
|
24
|
-
- 🪶 **极轻量**:Gzip 后核心约 4.8KB(含 `timeline`、`staggerChildren` 与 React/Vue 辅助在内全部约 6.1KB)。
|
|
25
|
-
- 🧩 **框架无关**:完美支持原生 JS、React、Vue、Svelte 等。内置一流的 React Hooks 和 Vue Composables。
|
|
26
|
-
- ♿ **无障碍**:原生支持 `prefers-reduced-motion`。
|
|
27
|
-
|
|
28
|
-
## 滚动预设 2.0(v6.1)🎞️
|
|
9
|
+
[](https://www.npmjs.com/package/motionary) [](https://github.com/HarrisonCN/motionary/actions/workflows/ci.yml) [](./LICENSE)
|
|
29
10
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
```js
|
|
33
|
-
import ScrollAnimate from 'use-scroll-animate';
|
|
34
|
-
import 'use-scroll-animate/presets/extended'; // 导入即注册扩展预设
|
|
11
|
+
[English](./README.md) | [简体中文](./README_zh.md) | [日本語](./README_ja.md)
|
|
35
12
|
|
|
36
|
-
|
|
37
|
-
ScrollAnimate.observe('.hero img', { animation: 'scrub-shrink', engine: 'css', viewRange: ['cover 0%', 'cover 100%'] });
|
|
38
|
-
```
|
|
13
|
+
**[🛍 动画商店](https://harrisoncn.github.io/motionary/showcase/)** · **[🧩 组件](https://harrisoncn.github.io/motionary/showcase/components.html)** · **[🎛 Playground](https://harrisoncn.github.io/motionary/showcase/playground.html)** · **[📜 滚动叙事](https://harrisoncn.github.io/motionary/showcase/story.html)**
|
|
39
14
|
|
|
40
|
-
|
|
15
|
+
<sub>动画商店可预览、调整并复制全部 <b>227</b> 个动画 —— 214 个滚动预设,以及卡片、点击、物理与整页效果 —— 支持桌面与手机尺寸。</sub>
|
|
41
16
|
|
|
42
|
-
|
|
43
|
-
|---|---:|---|
|
|
44
|
-
| 淡入 | 19 | `fade-in-up-sm` · `fade-in-down-sm` · `fade-in-left-sm` · `fade-in-right-sm` · `fade-in-up-lg` · `fade-in-down-lg` · `fade-in-left-lg` · `fade-in-right-lg` · `fade-in-up-left` · `fade-in-up-right` · `fade-in-down-left` · `fade-in-down-right` · `fade-in-scale` · `fade-in-half` |
|
|
45
|
-
| 缩放 | 23 | `zoom-in-up` · `zoom-in-down` · `zoom-in-left` · `zoom-in-right` · `zoom-out-up` · `zoom-out-down` · `zoom-out-left` · `zoom-out-right` · `zoom-in-big` · `zoom-out-big` · `zoom-bounce` · `zoom-in-rotate` · `scale-x-left` · `scale-x-right` · `scale-y-top` · `scale-y-bottom` · `stretch-x` · `stretch-y` |
|
|
46
|
-
| 3D 翻转 | 22 | `flip-x-reverse` · `flip-y-reverse` · `flip-y-full` · `flip-diagonal` · `flip-diagonal-reverse` · `flip-left` · `flip-right` · `unfold-down` · `unfold-up` · `door-open-left` · `door-open-right` · `fold-in` · `flip-x-bounce` · `flip-y-bounce` · `swing-in-top` · `swing-in-bottom` · `swing-in-left` · `swing-in-right` |
|
|
47
|
-
| 滑入 | 20 | `slide-up-spring` · `slide-down-spring` · `slide-left-spring` · `slide-right-spring` · `slide-up-sm` · `slide-down-sm` · `back-in-up` · `back-in-down` · `back-in-left` · `back-in-right` · `light-speed-in-left` · `light-speed-in-right` · `rise-in` · `sink-in` · `float-in-up` · `float-in-down` |
|
|
48
|
-
| 旋转与倾斜 | 20 | `roll-in-left` · `roll-in-right` · `spiral-in` · `spiral-in-reverse` · `spin-in` · `rotate-in-up-left` · `rotate-in-up-right` · `rotate-in-down-left` · `rotate-in-down-right` · `skew-in-left` · `skew-in-y` · `shear-in` · `shear-in-reverse` · `twist-in` · `tilt-in-left` · `tilt-in-right` |
|
|
49
|
-
| 模糊与遮罩 | 14 | `blur-in-down` · `blur-in-left` · `blur-in-right` · `blur-in-strong` · `blur-in-zoom` · `blur-in-scale` · `blur-in-x` · `mask-up` · `mask-down` · `mask-left` · `mask-right` · `blur-mask-up` |
|
|
50
|
-
| 裁剪揭示 | 22 | `clip-circle-top` · `clip-circle-bottom` · `clip-circle-left` · `clip-circle-right` · `clip-circle-corner` · `clip-ellipse` · `clip-diamond` · `clip-split-x` · `clip-split-y` · `clip-box` · `clip-pill` · `clip-blinds` · `clip-blinds-x` · `clip-diagonal` · `clip-diagonal-reverse` · `clip-slant-right` · `clip-slant-left` |
|
|
51
|
-
| 弹跳与弹性 | 17 | `bounce-in` · `bounce-in-up` · `bounce-in-down` · `bounce-in-left` · `bounce-in-right` · `elastic-in` · `elastic-in-x` · `rubber-in` · `jello-in` · `wobble-in` · `tada-in` · `heartbeat-in` · `drop-in` · `pop-in` · `squash-in` · `shake-in` · `swing-in` |
|
|
52
|
-
| 色彩与光影 | 14 | `brightness-in` · `darken-in` · `color-in` · `saturate-in` · `hue-in` · `sepia-in` · `invert-in` · `contrast-in` · `exposure-in` · `vintage-in` · `blur-bright-in` · `shadow-lift` · `neon-glow-in` · `glow-in` |
|
|
53
|
-
| 景深与透视 | 10 | `perspective-in-up` · `perspective-in-down` · `perspective-in-left` · `perspective-in-right` · `depth-push` · `depth-pull` · `depth-in-up` · `swoop-in-left` · `swoop-in-right` · `card-tilt-in` |
|
|
54
|
-
| 故障与特效 | 9 | `glitch-in` · `glitch-in-color` · `typewriter` · `typewriter-lines` · `hinge-in` · `flicker-in` · `scan-in` · `materialize` · `teleport-in` |
|
|
55
|
-
| 错峰列表 | 8 | `stagger-fade-up` · `stagger-pop` · `stagger-rise` · `stagger-slide` · `stagger-flip` · `stagger-blur` · `stagger-zoom` · `stagger-drop` |
|
|
56
|
-
| 随滚动 | 12 | `scrub-parallax-up` · `scrub-parallax-down` · `scrub-rotate` · `scrub-spin` · `scrub-scale` · `scrub-shrink` · `scrub-pan-left` · `scrub-pan-right` · `scrub-tilt` · `scrub-fade-through` · `scrub-blur-through` · `scrub-reveal-x` |
|
|
17
|
+
</div>
|
|
57
18
|
|
|
58
|
-
|
|
19
|
+
Motionary 在内容滚入视口时播放入场动画(IntersectionObserver + Web Animations,或浏览器原生滚动时间线),并提供 94 个动画自定义元素 —— 卡片、按钮、物理、页面转场、背景、WebGL 等 —— 可用于任何框架、纯 HTML 以及桌面 Web 视图应用(Electron、Tauri、WebView2)。全部遵循 `prefers-reduced-motion`。
|
|
59
20
|
|
|
60
|
-
|
|
21
|
+
## 安装
|
|
61
22
|
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
defineComponents(); // 或按分类:import { defineTextComponents } from 'use-scroll-animate/components/text'
|
|
23
|
+
```bash
|
|
24
|
+
npm i motionary
|
|
65
25
|
```
|
|
66
26
|
|
|
67
27
|
```html
|
|
68
|
-
<!--
|
|
69
|
-
<script src="https://unpkg.com/
|
|
70
|
-
<
|
|
71
|
-
<
|
|
28
|
+
<!-- CDN (no build) -->
|
|
29
|
+
<script src="https://unpkg.com/motionary@6/dist/index.umd.js"></script> <!-- window.ScrollAnimate -->
|
|
30
|
+
<script src="https://unpkg.com/motionary@6/dist/presets-extended.umd.js"></script> <!-- +181 presets -->
|
|
31
|
+
<script src="https://unpkg.com/motionary@6/dist/components.umd.js"></script> <!-- every <usa-*>, window.UsaComponents -->
|
|
72
32
|
```
|
|
73
33
|
|
|
74
|
-
|
|
75
|
-
|---|---|
|
|
76
|
-
| **入场与滚动**(`/components/reveal`) | `<usa-reveal>` 滚动揭示(12 种效果)· `<usa-stagger>` 错峰列表 · `<usa-scroll-progress>` 阅读进度条 · `<usa-scrolly>` 粘性滚动叙事 |
|
|
77
|
-
| **文字**(`/components/text`) | `<usa-typewriter>` 打字机 · `<usa-split-text>` 逐字揭示 · `<usa-scramble>` 乱码解码 · `<usa-counter>` 数字滚动 · `<usa-shimmer-text>` 流光文字 · `<usa-text-rotate>` 轮换词语 · `<usa-wave-text>` 波浪 · `<usa-glitch>` 故障 · `<usa-gradient-text>` 流动渐变 · `<usa-handwriting>` 手写 · `<usa-scroll-highlight>` 滚动高亮 |
|
|
78
|
-
| **交互反馈**(`/components/interaction`) | `<usa-ripple>` 水波纹 · `<usa-magnetic>` 磁吸按钮 · `<usa-tilt>` 3D 倾斜卡片 · `<usa-spotlight>` Fluent 光照高亮 · `<usa-press>` 按压反馈 · `<usa-toggle>` 切换开关 |
|
|
79
|
-
| **加载与反馈**(`/components/feedback`) | `<usa-spinner>`(WinUI 进度环、Windows 圆点等 6 种)· `<usa-skeleton>` 骨架屏 · `<usa-progress>` 进度条 · `<usa-toaster>` + `toast()` 通知 · `<usa-check>` 结果图标 |
|
|
80
|
-
| **背景与装饰**(`/components/background`) | `<usa-aurora>` 极光 · `<usa-particles>` 粒子 · `<usa-grain>` 胶片颗粒 · `<usa-marquee>` 无限跑马灯 · `<usa-acrylic>` 亚克力 / 云母材质 · `<usa-grid-glow>` 网格光晕 · `<usa-blobs>` 流体色块 · `<usa-water-ripple>` 水波 · `<usa-dot-network>` 点阵 · `fluentPreset()` Fluent 预设 |
|
|
81
|
-
| **过渡动画**(`/components/transitions`) | `<usa-dialog>` 弹窗 / 抽屉 / 底部面板 · `<usa-accordion>` 手风琴 · `<usa-view-switch>` 视图切换 · `viewTransition()` · `flip()` |
|
|
82
|
-
| **弹簧与物理**(`/components/physics`) | `<usa-spring>` 弹入 / 弹出 / 掉落 / 果冻 / 橡皮筋 · `<usa-draggable>` 拖拽回弹、惯性、吸附 · `<usa-overscroll>` 弹性越界 · `spring()` · `createSpring()` · 预设 gentle / wobbly / stiff / bouncy |
|
|
83
|
-
| **卡片效果**(`/components/cards`) | `<usa-card>` 翻转 · 全息 · 玻璃 · 边框光晕 · 流光边框 · 悬浮 · 聚光 · 扫光 · 视差分层 · 展开详情(可组合)· `<usa-card-stack>` 滑动卡堆 · `<usa-sticky-stack>` 滚动堆叠 · `<usa-carousel-3d>` 3D 轮播 |
|
|
84
|
-
| **点击与轻触**(`/components/click`) | `<usa-button>` 按钮点击形变(挤压拉伸 · 弹性圆角 · 液态粘滞 · 按压凹陷 · 形状变形 · 提交→加载→成功)· `<usa-icon-morph>` 图标变形 · `<usa-click>` 水波纹 / 迸发 / 彩带 / 抖动 · `<usa-like>` · `<usa-hold>` · `<usa-double-tap>` · `<usa-checkbox>` |
|
|
85
|
-
| **UI 组件与风格变体**(`/components/ui`) | `<usa-tabs>` 标签页 · `<usa-drawer>` 抽屉 · `<usa-bottom-sheet>` 底部面板 · `<usa-pull-refresh>` 下拉刷新 · `<usa-fab>` 悬浮按钮 · `<usa-navbar>` 自动隐藏导航栏 · `<usa-slider>` 滑块 · `<usa-rating>` 评分 · `<usa-tooltip>` · `<usa-popover>` · `<usa-badge>` · `<usa-avatar-stack>` · 所有组件均支持 `variant`(极简 / 霓虹 / 玻璃 / 粗野 / Fluent / Material) |
|
|
86
|
-
| **页面与全局效果**(`/components/page`) | `pageTransition()` 页面切换(淡入 · 滑动 · 圆形揭示 · 百叶窗 · 像素溶解,单页 + 多页)· `themeTransition()` 主题圆形切换 · `<usa-cursor>` 自定义光标 · `smoothScroll()` · `<usa-fullpage>` 整屏 · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` 雪花 / 星空 / 噪点 · `<usa-splash>` 启动屏 · `<usa-auto-skeleton>` 自动骨架屏 · `<usa-motion-switch>` 动效强度 |
|
|
87
|
-
| **时间线与编排** (`/components/timeline`) | `timeline()`(串联 · 重叠 · 标签 · 跳转 · 倒放 · 滚动擦洗)· `<usa-timeline>`(`data-tl` 步骤) |
|
|
88
|
-
| **手势** (`/components/gesture`) | `gesture()`(拖动 · 轻扫 · 捏合 · 长按 · 单击 · 双击 → 弹簧)· `<usa-swipeable>` · `<usa-pinch-zoom>` |
|
|
89
|
-
| **SVG 动画** (`/components/svg`) | `<usa-draw>`(线条描绘)· `<usa-morph>`(路径变形)· `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` · `interpolatePath()` |
|
|
90
|
-
| **Canvas 与 WebGL** (`/components/webgl`) | `<usa-shader>`(gradient · plasma · waves · aurora · snow · fireflies · stars · bokeh · rain · 自定义 GLSL)· `<usa-post-fx>`(后期处理)· `<usa-distort>` · `<usa-liquid>` · `glQuad()` —— 优雅降级 |
|
|
91
|
-
| **3D 与景深** (`/components/depth`) | `<usa-cube>` · `<usa-depth>`(指针 · 陀螺仪 · 滚动景深视差)· `deviceTilt()` ·(另见 cards 中的 `<usa-carousel-3d>`) |
|
|
92
|
-
| **布局动画** (`/components/layout`) | `<usa-auto-animate>` / `autoAnimate()`(列表与网格重排)· `<usa-masonry>`(瀑布流)· `sharedTransition()`(共享元素) |
|
|
93
|
-
| **效果包** (`/components/packs`) | `<usa-pack>` (`name="ecommerce \| portfolio \| dashboard \| game \| landing"`) · `applyPack()` · `flyToCart()` · `countUp()` |
|
|
94
|
-
| **特效插件 API** (`/components/fx`) | `<usa-fx>`(`effect` · `trigger`)· `registerEffect()` · `playEffect()` · `bindEffect()` · 内置:全部时间线入场、pulse · pop · jelly · wiggle · heartbeat · bounce · flash · tada · shake、burst · confetti · ripple |
|
|
95
|
-
| **特效包** (`/components/effects`) | `registerAllEffects()` · 卡片与点击 2.0 · 物理 · 全页特效 · `<usa-story>` 滚动叙事 · 生成式背景 · 声音响应(`<usa-audio>`)· 光标拖尾与手势(`<usa-gesture-fx>`)· 主题包(`<usa-theme>`)· 23 个微交互 · `<usa-player>` JSON 动画 |
|
|
96
|
-
|
|
97
|
-
完整包约 22 kB gzip(JS + CSS);单个分类 3.5–6.4 kB;单个组件约 2 kB。下方的滚动动画核心不受影响。
|
|
98
|
-
|
|
99
|
-
**在 Windows 软件中使用**:组件只是标准 Web 代码,Electron / Tauri 渲染进程中直接 `import` 即可;WinUI 3 / WPF / WinForms 用 WebView2 加载本地页面(`SetVirtualHostNameToFolderMapping`)并通过 `<script src="components.umd.js">` 引入。样式以 constructable stylesheet 注入,兼容严格 CSP;也可改为引入 `use-scroll-animate/components.css` 并调用 `configureComponents({ injectStyles: false })`。系统“动画效果”关闭时(`prefers-reduced-motion`)自动使用平静版本。
|
|
100
|
-
|
|
101
|
-
## 文档
|
|
102
|
-
|
|
103
|
-
- [预设一览](./docs/presets.md)(全部 214 个预设,英文)
|
|
104
|
-
- [API 参考](./docs/API.md)(英文)· [演示页](./demo/index.html)(每个预设都可点击,无需构建)
|
|
105
|
-
- 迁移指南:[从 AOS 迁移](./docs/migration-from-aos.md) · [从 GSAP ScrollTrigger 迁移](./docs/migration-from-gsap-scrolltrigger.md)
|
|
106
|
-
- [升级到 2.0](./docs/deprecations.md):`createReactHooks` / `createVueComposables` 只能从 `use-scroll-animate/react` / `/vue` 导入;`dist/index.mjs`、`dist/index.esm.js`、`dist/types/*` 与 `dist/*` 深层导入已移除;默认引擎改为 `'auto'`。CDN 地址 `dist/index.umd.js` 不变。详见 [CHANGELOG](./CHANGELOG.md) 的 MIGRATION 部分。
|
|
107
|
-
|
|
108
|
-
## 安装
|
|
109
|
-
|
|
110
|
-
```bash
|
|
111
|
-
npm install use-scroll-animate
|
|
112
|
-
```
|
|
34
|
+
jsDelivr 同样可用:`https://cdn.jsdelivr.net/npm/motionary@6/dist/…`。已有的 `use-scroll-animate` 安装与 `unpkg.com/use-scroll-animate@6` 链接继续可用。
|
|
113
35
|
|
|
114
|
-
##
|
|
36
|
+
## 30 秒上手
|
|
115
37
|
|
|
116
|
-
|
|
38
|
+
给元素加上 `data-sa`,用 `data-sa-animation` 选择预设(每个选项都有对应的 `data-sa-*` 属性),或使用 JS API:
|
|
117
39
|
|
|
118
40
|
```html
|
|
119
|
-
<!-- 1.
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
</div>
|
|
123
|
-
|
|
41
|
+
<!-- 1. HTML only: data attributes + one init() call -->
|
|
42
|
+
<h2 data-sa data-sa-animation="fade-in-up">Hello</h2>
|
|
43
|
+
<div data-sa data-sa-animation="bounce-in-up" data-sa-delay="150">Card</div>
|
|
124
44
|
<script type="module">
|
|
125
|
-
|
|
126
|
-
import
|
|
127
|
-
ScrollAnimate.init();
|
|
45
|
+
import ScrollAnimate from 'motionary';
|
|
46
|
+
import 'motionary/presets/extended'; // optional: +181 presets (bounce-in-up, clip-diamond, …)
|
|
47
|
+
ScrollAnimate.init(); // picks up every [data-sa]
|
|
128
48
|
</script>
|
|
129
49
|
```
|
|
130
50
|
|
|
131
|
-
## 原生滚动驱动引擎 `engine`(v1.6)
|
|
132
|
-
|
|
133
|
-
在支持 CSS 滚动驱动动画(`CSS.supports('animation-timeline: view()')`)的浏览器中,预设动画可以运行在浏览器原生的 **view timeline** 上:动画进度跟随滚动位置(在主线程之外),而不是由 IntersectionObserver 触发后按固定 `duration` 播放。
|
|
134
|
-
|
|
135
51
|
```js
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
- `'auto'`:**2.0 起的默认值**,支持时使用原生时间线,否则回退 JS;若元素自行设置了 `duration`、`delay`、`offset` 或 `stagger`,则使用 JS。`'css'`:支持时始终使用原生时间线。`'js'`:1.x 的行为(`defaultEngine: 'js'` 可全局恢复)。
|
|
141
|
-
- 原生引擎下 `duration`、`delay`、`threshold`、`offset`、`stagger` 不生效;动画区间由 `viewRange` 决定(默认 `['entry 0%', 'entry 100%']`),`easing` 仍然有效。HTML:`data-sa-engine`、`data-sa-view-range="entry 0%, cover 40%"`。
|
|
142
|
-
- `once`(默认)在动画完成后固定最终状态;`repeat: true` 时随滚动双向播放。回调、`onProgress`、`progressVar`、视差照常工作。
|
|
143
|
-
- 类名模式、`prefers-reduced-motion`、`animate()`、`timeline()`、`staggerChildren()` 始终使用 JS 引擎。另导出 `supportsScrollTimeline()`。
|
|
144
|
-
|
|
145
|
-
## v1.4.0 新特性 ✨
|
|
146
|
-
|
|
147
|
-
- **真实滚动进度 `progressMode: 'scroll'`**(可选):`onProgress` 默认返回元素的可见比例,对高于屏幕的元素永远到不了 1。开启后进度为:元素顶部到达视口底部时为 `0`,底部离开视口顶部时为 `1`。视差同样使用该进度。HTML 写法:`data-sa-progress="scroll"`;另导出辅助函数 `getScrollProgress(el, root?)`。
|
|
148
|
-
|
|
149
|
-
```js
|
|
150
|
-
ScrollAnimate.observe('.chapter', {
|
|
151
|
-
progressMode: 'scroll',
|
|
152
|
-
onProgress: (el, p) => el.style.setProperty('--progress', p),
|
|
153
|
-
});
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
- **动态子元素交错动画**:`staggerChildren()`(原生)与 `useScrollStagger()`(React,**现已支持 Vue**)新增 `observeChildren: true`。通过 `MutationObserver` 监听后续新增的子元素(无限列表、“加载更多”):显现前新增的会加入交错序列,显现后新增的在滚入视口时按批次交错播放。
|
|
157
|
-
|
|
158
|
-
```js
|
|
159
|
-
import { staggerChildren } from 'use-scroll-animate';
|
|
160
|
-
const stop = staggerChildren(document.querySelector('#feed'), { stagger: 60, observeChildren: true });
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
- **时间线 `timeline()`**:在同一播放头上串联多个元素的动画。默认每步在上一步结束后开始;`at` 可重叠(`'-=300'`)、延后(`'+=200'`)、与上一步同时(`'<'`)、对齐标签或绝对时间;支持播放、倒放、跳转与随滚动擦洗。(取代 4.0 中移除的 `sequence()`,见 [upgrading-4.md](./docs/upgrading-4.md)。)
|
|
52
|
+
// 2. JS API
|
|
53
|
+
import ScrollAnimate, { staggerChildren, parallax, timeline } from 'motionary';
|
|
164
54
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
.to('.hero .btn', 'scale', { stagger: 80 });
|
|
171
|
-
await tl.play(); // 全部完成后 resolve;或 tl.scrub(hero) 随滚动
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
- **新预设**:`scale-up`、`blur-in-up`、`flip-up`、`flip-down`、`rotate-left`、`rotate-right`,以及 clip-path 揭示 `clip-up`、`clip-down`、`clip-left`、`clip-right`、`clip-circle`。
|
|
175
|
-
- **更省内存**:`once` 元素动画触发后自动从注册表移除(仍需视差/`onProgress` 的除外),并记录在 `WeakSet` 中,`init()`/`observe()` 不会重复播放。如需旧行为可设置 `createScrollAnimate({ autoUnregister: false })`。
|
|
176
|
-
- **规范的 `exports` 字段**:2.0 起以 ESM 为主:`import` → `dist/*.js` + `*.d.ts`,`require` → `dist/*.cjs` + `*.d.cts`。
|
|
55
|
+
ScrollAnimate.observe('.card', { animation: 'zoom-in-up', duration: 800, easing: 'spring' });
|
|
56
|
+
staggerChildren(document.querySelector('.grid'), { animation: 'stagger-pop', stagger: 60 });
|
|
57
|
+
parallax('.hero-bg', { speed: 0.3 });
|
|
58
|
+
ScrollAnimate.observe('.logo', { animation: 'scrub-spin', engine: 'css', viewRange: ['cover 0%', 'cover 100%'] });
|
|
59
|
+
```
|
|
177
60
|
|
|
178
|
-
|
|
61
|
+
框架 —— 每个适配器都是独立入口,卸载时自动清理:
|
|
179
62
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
63
|
+
```jsx
|
|
64
|
+
// React
|
|
65
|
+
import React from 'react';
|
|
66
|
+
import { createReactHooks } from 'motionary/react';
|
|
67
|
+
const { useScrollAnimate } = createReactHooks(React);
|
|
184
68
|
|
|
185
|
-
|
|
69
|
+
export function Card() {
|
|
70
|
+
const ref = useScrollAnimate({ animation: 'fade-in-up' });
|
|
71
|
+
return <div ref={ref}>Hello</div>;
|
|
72
|
+
}
|
|
73
|
+
```
|
|
186
74
|
|
|
187
|
-
|
|
75
|
+
```vue
|
|
76
|
+
<!-- Vue 3 -->
|
|
77
|
+
<script setup>
|
|
78
|
+
import { ref, onMounted, onUnmounted } from 'vue';
|
|
79
|
+
import { createVueComposables } from 'motionary/vue';
|
|
80
|
+
const { useScrollAnimate } = createVueComposables({ ref, onMounted, onUnmounted });
|
|
81
|
+
const { animateRef } = useScrollAnimate({ animation: 'zoom-in' });
|
|
82
|
+
</script>
|
|
83
|
+
<template><div ref="animateRef">Hello</div></template>
|
|
84
|
+
```
|
|
188
85
|
|
|
189
86
|
```svelte
|
|
190
|
-
<!-- Svelte
|
|
191
|
-
<script>
|
|
192
|
-
|
|
193
|
-
|
|
87
|
+
<!-- Svelte 3–5 -->
|
|
88
|
+
<script>
|
|
89
|
+
import { scrollAnimate } from 'motionary/svelte';
|
|
90
|
+
</script>
|
|
91
|
+
<div use:scrollAnimate={{ animation: 'flip-up' }}>Hello</div>
|
|
194
92
|
```
|
|
195
93
|
|
|
196
|
-
```
|
|
197
|
-
// Solid
|
|
198
|
-
import { scrollAnimate
|
|
199
|
-
|
|
200
|
-
<div
|
|
94
|
+
```jsx
|
|
95
|
+
// Solid
|
|
96
|
+
import { scrollAnimate } from 'motionary/solid';
|
|
97
|
+
scrollAnimate; // keep the directive import (TypeScript)
|
|
98
|
+
export const Card = () => <div use:scrollAnimate={{ animation: 'blur-in-up' }}>Hello</div>;
|
|
201
99
|
```
|
|
202
100
|
|
|
101
|
+
```ts
|
|
102
|
+
// Angular (standalone) — the animated Web Components
|
|
103
|
+
import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
|
|
104
|
+
import { usaInitializer } from 'motionary/components/angular';
|
|
105
|
+
import 'motionary/presets/extended'; // lets <usa-reveal effect> use every preset name
|
|
106
|
+
// app.config.ts: providers: [{ provide: APP_INITIALIZER, multi: true, useFactory: usaInitializer() }]
|
|
107
|
+
@Component({ standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
108
|
+
template: `<usa-reveal effect="bounce-in-up"><h2>Hello</h2></usa-reveal>` })
|
|
109
|
+
export class Hero {}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
动画组件无需任何框架:
|
|
113
|
+
|
|
203
114
|
```html
|
|
204
|
-
<!-- Web Component:属性与 data-sa-* 相同(去掉前缀),并派发 sa:enter / sa:leave / sa:start / sa:complete / sa:progress 事件 -->
|
|
205
115
|
<script type="module">
|
|
206
|
-
import {
|
|
207
|
-
|
|
116
|
+
import { defineComponents } from 'motionary/components';
|
|
117
|
+
defineComponents(); // or lazyDefine() from 'motionary/components/lazy'
|
|
208
118
|
</script>
|
|
209
|
-
<
|
|
210
|
-
|
|
119
|
+
<usa-card effect="holo">…</usa-card>
|
|
120
|
+
<usa-button deform="gooey">Buy</usa-button>
|
|
121
|
+
<usa-fx effect="confetti" trigger="click"><button>Celebrate</button></usa-fx>
|
|
211
122
|
```
|
|
212
123
|
|
|
213
|
-
##
|
|
124
|
+
## 功能一览
|
|
214
125
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
126
|
+
| 领域 | 内容 |
|
|
127
|
+
|---|---|
|
|
128
|
+
| **滚动预设** | **214** 个入场预设(33 个核心 + 181 个位于 `motionary/presets/extended`),14 个系列:淡入、缩放、3D 翻转与开门、回弹滑入、clip-path 形状、模糊与遮罩、弹跳与弹性、色彩与光影、景深、故障 / 打字机、错峰列表与随滚动 `scrub-*`;另有 `timeline()` 与 10 个时间线预设 |
|
|
129
|
+
| **卡片、点击与按钮形变** | `<usa-card>` 含 10 种效果(翻转、全息、玻璃、边框光晕……),卡片堆叠与 3D 轮播;7 个点击组件、4 种按钮形变(squash · wobble · gooey · dent)与图标变形;12 个注册的卡片 / 点击效果(holo、book-open、shockwave、ink-splash、emoji-rain……) |
|
|
130
|
+
| **物理与弹跳** | `<usa-spring>`、`<usa-draggable>`(回弹 · 惯性 · 吸附)、`<usa-overscroll>`;`spring()` / `solveSpring()` 与 7 个弹簧预设;7 个物理效果(bounce-in、rubber-band、gravity-text、bell-swing……) |
|
|
131
|
+
| **页面转场** | `pageTransition()`、`viewTransition()`、`sharedTransition()`、`flip()`、多页(MPA)转场;7 个页面效果(curtain、iris、pixel-dissolve、blinds、velocity-skew……);`<usa-dialog>`、`<usa-view-switch>` |
|
|
132
|
+
| **生成式背景** | 6 种画布背景(flow-field、voronoi、mesh-gradient、starfield、metaballs、contours)+ 9 个背景元素(极光、粒子、胶片颗粒、流体色块、水波、亚克力 / 云母……) |
|
|
133
|
+
| **声音响应** | `<usa-audio>` + Web Audio 节拍检测(`createBeatDetector()`、`onBeat()`);3 种音频可视化(spectrum-bars、pulse-ring、wave-ring);任意效果都可随节拍触发 |
|
|
134
|
+
| **光标与手势** | 5 种光标效果(彗星 / 丝带 / 星光拖尾、磁性圆点、聚光灯)+ `<usa-cursor>`;甩动 · 旋转 · 长按触发效果(`<usa-gesture-fx>`);`<usa-swipeable>`、`<usa-pinch-zoom>` |
|
|
135
|
+
| **主题** | 5 套主题(neon · paper · glass · retro · brutalist),通过 `<usa-theme>` / `applyTheme()` 使用,各带一个标志性效果;动效令牌(`/components/tokens`) |
|
|
136
|
+
| **微交互** | 23 个现成的界面瞬间:copy-success、like-heart、add-to-cart、send-plane、upvote、trash-shake、input-shake、success-check、notify-badge…… |
|
|
137
|
+
| **`<usa-player>` 与滚动叙事** | `<usa-player>` 播放 JSON 动画(关键帧轨道、预设、效果;load / view / scroll / click 触发),可从 Playground 导出;`<usa-story>` 含 6 个滚动叙事模板 |
|
|
138
|
+
| **WebGL** | `<usa-shader>`、`<usa-distort>`、`<usa-liquid>`、`<usa-post-fx>` —— 5 个粒子预设、9 种后期效果(bloom、CRT、色散、故障……),带 CSS 降级与省电调速 |
|
|
219
139
|
|
|
220
|
-
|
|
140
|
+
90 种效果共用一个注册表(`registerEffect()` / `playEffect()` / `bindEffect()` / `<usa-fx>`,位于 `motionary/components/fx`);5.x 效果包位于 `motionary/components/effects`。
|
|
221
141
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
142
|
+
### 全部 94 个动画组件
|
|
143
|
+
|
|
144
|
+
可按分类导入(`motionary/components/cards`)、全部导入(`motionary/components`)、使用按需加载 CSS 的 `/components/lite`,或用 `lazyDefine()` 只加载页面上出现的标签。框架封装:`/components/react`、`/vue`、`/svelte`、`/solid`、`/angular`。
|
|
145
|
+
|
|
146
|
+
| 入口 | 元素 |
|
|
147
|
+
|---|---|
|
|
148
|
+
| **滚动揭示** (`/components/reveal`) | `<usa-reveal>` · `<usa-stagger>` · `<usa-scroll-progress>` · `<usa-scrolly>` |
|
|
149
|
+
| **文字** (`/components/text`) | `<usa-typewriter>` · `<usa-split-text>` · `<usa-scramble>` · `<usa-counter>` · `<usa-shimmer-text>` · `<usa-text-rotate>` · `<usa-wave-text>` · `<usa-glitch>` · `<usa-gradient-text>` · `<usa-handwriting>` · `<usa-scroll-highlight>` |
|
|
150
|
+
| **交互** (`/components/interaction`) | `<usa-ripple>` · `<usa-magnetic>` · `<usa-tilt>` · `<usa-spotlight>` · `<usa-press>` · `<usa-toggle>` |
|
|
151
|
+
| **反馈** (`/components/feedback`) | `<usa-spinner>` · `<usa-skeleton>` · `<usa-progress>` · `<usa-toaster>` · `<usa-check>` |
|
|
152
|
+
| **背景与装饰** (`/components/background`) | `<usa-aurora>` · `<usa-particles>` · `<usa-grain>` · `<usa-marquee>` · `<usa-acrylic>` · `<usa-grid-glow>` · `<usa-blobs>` · `<usa-water-ripple>` · `<usa-dot-network>` |
|
|
153
|
+
| **转场** (`/components/transitions`) | `<usa-dialog>` · `<usa-accordion>` · `<usa-view-switch>` |
|
|
154
|
+
| **弹簧与物理** (`/components/physics`) | `<usa-spring>` · `<usa-draggable>` · `<usa-overscroll>` |
|
|
155
|
+
| **卡片** (`/components/cards`) | `<usa-card>` · `<usa-card-stack>` · `<usa-sticky-stack>` · `<usa-carousel-3d>` |
|
|
156
|
+
| **点击与按钮** (`/components/click`) | `<usa-click>` · `<usa-button>` · `<usa-icon-morph>` · `<usa-like>` · `<usa-hold>` · `<usa-double-tap>` · `<usa-checkbox>` |
|
|
157
|
+
| **UI 组件** (`/components/ui`) | `<usa-tabs>` · `<usa-drawer>` · `<usa-bottom-sheet>` · `<usa-pull-refresh>` · `<usa-fab>` · `<usa-navbar>` · `<usa-slider>` · `<usa-rating>` · `<usa-tooltip>` · `<usa-popover>` · `<usa-badge>` · `<usa-avatar-stack>` |
|
|
158
|
+
| **整页** (`/components/page`) | `<usa-cursor>` · `<usa-fullpage>` · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` · `<usa-splash>` · `<usa-auto-skeleton>` · `<usa-motion-switch>` |
|
|
159
|
+
| **时间线** (`/components/timeline`) | `<usa-timeline>` |
|
|
160
|
+
| **手势** (`/components/gesture`) | `<usa-swipeable>` · `<usa-pinch-zoom>` |
|
|
161
|
+
| **SVG** (`/components/svg`) | `<usa-draw>` · `<usa-morph>` · `<usa-mask-reveal>` · `<usa-anim-icon>` |
|
|
162
|
+
| **WebGL** (`/components/webgl`) | `<usa-shader>` · `<usa-distort>` · `<usa-liquid>` · `<usa-post-fx>` |
|
|
163
|
+
| **3D 景深** (`/components/depth`) | `<usa-cube>` · `<usa-depth>` |
|
|
164
|
+
| **布局** (`/components/layout`) | `<usa-auto-animate>` · `<usa-masonry>` |
|
|
165
|
+
| **效果包** (`/components/packs`) | `<usa-pack>` |
|
|
166
|
+
| **效果注册表** (`/components/fx`) | `<usa-fx>` |
|
|
167
|
+
| **效果包** (`/components/effects`) | `<usa-player>` · `<usa-story>` · `<usa-audio>` · `<usa-theme>` · `<usa-gesture-fx>` |
|
|
168
|
+
|
|
169
|
+
## 无障碍与减少动态效果
|
|
170
|
+
|
|
171
|
+
- 开启 `prefers-reduced-motion: reduce` 时,滚动揭示会立即显示内容(无入场、视差或随滚动动画),组件退回平静状态(`staticAlternative()` / `adaptKeyframes()`)。
|
|
172
|
+
- `motionary/components/a11y`:`setMotionSensitivity()` 分级让用户关闭闪烁、循环或视差;`announce()` 实时播报区域;`auditMotionA11y()`;`baselineReport()`。`<usa-motion-switch>` 是现成的面向用户的动效开关。
|
|
173
|
+
- 详见 [docs/accessibility.md](./docs/accessibility.md)。
|
|
174
|
+
|
|
175
|
+
## 性能与体积
|
|
176
|
+
|
|
177
|
+
默认不监听 scroll 事件(IntersectionObserver),动画运行在合成层(`transform`、`opacity`、`filter`、`clip-path`),可选主线程之外的原生滚动时间线(`engine: 'css'`)。每个入口都可摇树,并在 CI 中强制 gzip 预算(`size-budget.json`)。6.1 实测(压缩 + gzip):
|
|
178
|
+
|
|
179
|
+
| 导入内容 | gzip |
|
|
180
|
+
|---|---:|
|
|
181
|
+
| `import ScrollAnimate from 'motionary'` (default instance) | 5.72 kB |
|
|
182
|
+
| Everything from the main entry | 8.69 kB |
|
|
183
|
+
| `dist/index.umd.js` (CDN) | 8.81 kB |
|
|
184
|
+
| `parallax()` alone | 1.22 kB |
|
|
185
|
+
| `motionary/presets/extended` (181 presets) | 4.69 kB |
|
|
186
|
+
| `motionary/components/reveal` | 4.10 kB |
|
|
187
|
+
| `motionary/components/effects` (8 effect packs) | 26.40 kB |
|
|
188
|
+
| `motionary/components/lite` (every component, CSS on demand) | 68.48 kB |
|
|
189
|
+
| `motionary/components` (every component + CSS) | 85.15 kB |
|
|
190
|
+
| `dist/components.umd.js` (CDN, everything) | 106.75 kB |
|
|
191
|
+
|
|
192
|
+
更多:[docs/performance.md](./docs/performance.md)。
|
|
193
|
+
|
|
194
|
+
## 浏览器支持
|
|
195
|
+
|
|
196
|
+
2023 年以来的常青浏览器:Chrome / Edge ≥ 111、Safari ≥ 16.4、Firefox ≥ 115、WebView2、Electron ≥ 24(Custom Elements、Web Animations、IntersectionObserver、ResizeObserver、可构造样式表)。View Transitions 与滚动驱动动画为渐进增强 —— 支持时使用,否则回退到 JS。在服务端(SSR)导入不会执行任何操作。可用 `baselineReport()` 检查浏览器。
|
|
197
|
+
|
|
198
|
+
## 文档
|
|
199
|
+
|
|
200
|
+
- [API 参考](./docs/API.md)(英文)—— 所有导出、选项与 `data-sa-*` 属性
|
|
201
|
+
- [预设一览](./docs/presets.md)(全部 214 个)
|
|
202
|
+
- [组件文档](./docs/components.md)(每个 `<usa-*>` 元素、属性与事件)
|
|
203
|
+
- [框架与 SSR](./docs/frameworks-ssr.md) · [Windows 应用](./docs/windows-apps.md) · [混合应用(MAUI、Flutter、Electron、Tauri)](./docs/hybrid-apps.md)
|
|
204
|
+
- [动效令牌](./docs/motion-tokens.md) · [从 AOS 迁移](./docs/migration-from-aos.md) · [从 GSAP ScrollTrigger 迁移](./docs/migration-from-gsap-scrolltrigger.md)
|
|
205
|
+
- [演示页](./demo/index.html)(每个预设都可点击,无需构建)
|
|
206
|
+
|
|
207
|
+
## 升级
|
|
227
208
|
|
|
228
|
-
- `
|
|
209
|
+
- 从 `use-scroll-animate`:`npm i motionary`,把导入路径与 CDN 链接中的 `use-scroll-animate` 换成 `motionary` 即可,其余不变(旧包名会继续同步发布)。
|
|
210
|
+
- [升级到 6.0](./docs/upgrading-6.md)(`npx usa-codemod-6`)· [升级到 5.0](./docs/upgrading-5.md)(`npx usa-codemod-5`)· [4.0](./docs/upgrading-4.md) · [3.0](./docs/upgrading-3.md) · [2.0](./docs/deprecations.md)
|
|
211
|
+
- [更新日志](./CHANGELOG.md)
|
|
229
212
|
|
|
230
|
-
##
|
|
213
|
+
## 路线图
|
|
231
214
|
|
|
232
|
-
|
|
233
|
-
|--------|------|---------|-------------|
|
|
234
|
-
| `animation` | `string` \| `string[]` | `'fade-in-up'` | 预设名称或预设数组 |
|
|
235
|
-
| `duration` | `number` | `600` | 动画持续时间 (ms) |
|
|
236
|
-
| `delay` | `number` | `0` | 动画延迟 (ms) |
|
|
237
|
-
| `once` | `boolean` | `true` | 是否只触发一次 |
|
|
238
|
-
| `offset` | `number` | `0` | 触发动画的视口偏移量 (px) |
|
|
239
|
-
| `parallax` | `object` | `{}` | 视差效果配置 |
|
|
240
|
-
| `stagger` | `number` | `0` | 同批次显现的兄弟元素之间的额外延迟 (ms) |
|
|
241
|
-
| `onProgress` | `(el, progress) => void` | – | 滚动进度回调 (0–1) |
|
|
242
|
-
| `progressMode` | `'ratio'` \| `'scroll'` | `'ratio'` | 进度计算方式:可见比例或真实滚动进度 |
|
|
243
|
-
| `engine` | `'auto'` \| `'js'` \| `'css'` | `'auto'` | 支持时使用原生滚动驱动时间线,否则回退 JS |
|
|
244
|
-
| `viewRange` | `[string, string]` | `['entry 0%', 'entry 100%']` | 仅原生引擎:入场动画的时间线区间 |
|
|
215
|
+
每个版本一个 PR,直至 7.0 —— 粒子与流体、文字特效、光影与材质、3D 场景、形变、转场、天气氛围、交互物理:[docs/ROADMAP.md](./docs/ROADMAP.md)。
|
|
245
216
|
|
|
246
|
-
##
|
|
217
|
+
## 贡献与许可证
|
|
247
218
|
|
|
248
|
-
|
|
219
|
+
欢迎提交 Issue 与 PR —— 参见 [CONTRIBUTING.md](./CONTRIBUTING.md)。MIT © HarrisonCN —— 参见 [LICENSE](./LICENSE)。
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* motionary/components — shared base for the `<usa-*>` custom elements.
|
|
5
5
|
*
|
|
6
6
|
* Everything here is lazy: nothing touches `window`, `document`,
|
|
7
7
|
* `HTMLElement` or `matchMedia` at import time, so the components can be
|
|
@@ -390,7 +390,7 @@ function deprecate(key, message) {
|
|
|
390
390
|
return;
|
|
391
391
|
warned.add(key);
|
|
392
392
|
if (typeof console !== 'undefined')
|
|
393
|
-
console.warn(`[
|
|
393
|
+
console.warn(`[motionary] ${message}`);
|
|
394
394
|
}
|
|
395
395
|
/**
|
|
396
396
|
* The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and
|
|
@@ -433,4 +433,4 @@ exports.setStyleLoader = setStyleLoader;
|
|
|
433
433
|
exports.shadowStyles = shadowStyles;
|
|
434
434
|
exports.srText = srText;
|
|
435
435
|
exports.withoutDeprecations = withoutDeprecations;
|
|
436
|
-
//# sourceMappingURL=base-
|
|
436
|
+
//# sourceMappingURL=base-BaQV-2ha.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-BaQV-2ha.cjs","sources":["../../src/components/base.ts"],"sourcesContent":["/**\n * motionary/components — shared base for the `<usa-*>` custom elements.\n *\n * Everything here is lazy: nothing touches `window`, `document`,\n * `HTMLElement` or `matchMedia` at import time, so the components can be\n * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload\n * scripts. Classes are created the first time a `define*()` function runs.\n */\n\nexport interface ComponentsConfig {\n /**\n * Inject each component's CSS when it is defined (default `true`). Uses a\n * constructable stylesheet (`document.adoptedStyleSheets`, which a strict\n * `style-src` CSP does not block) and falls back to a `<style>` tag. Set\n * to `false` when you load `motionary/components.css` yourself.\n */\n injectStyles?: boolean;\n /**\n * `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always\n * uses the reduced variants (e.g. a kiosk / battery-saver mode). 5.0: the\n * OS setting can no longer be ignored (`'no-preference'` was removed).\n */\n reducedMotion?: 'user' | 'reduce';\n /**\n * Global motion intensity (v2.7): `'low'` (shorter, calmer), `'normal'`\n * (default) or `'high'`. Scales every component animation's duration and\n * sets `--usa-motion` (0.6 / 1 / 1.25) on `<html>` for your own CSS. 5.0:\n * `'off'` was removed — use `motionSensitivity: 'minimal'`.\n */\n motionIntensity?: MotionIntensity;\n /**\n * Motion-sensitivity level (v4.4), finer than reduced motion:\n * `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —\n * translations and fades only, safe for vestibular disorders) ·\n * `'minimal'` (fades only; components use their reduced-motion variants) ·\n * `'static'` (no animation: every component shows its static alternative).\n * See `setMotionSensitivity()` in `motionary/components/a11y`.\n */\n motionSensitivity?: MotionSensitivity;\n}\n\nexport type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';\nexport const MOTION_SENSITIVITY_LEVELS: readonly MotionSensitivity[] = ['full', 'gentle', 'minimal', 'static'];\n\nexport type MotionIntensity = 'low' | 'normal' | 'high';\nexport const MOTION_SCALE: Record<MotionIntensity, number> = { low: 0.6, normal: 1, high: 1.25 };\n\nconst config: Required<ComponentsConfig> = { injectStyles: true, reducedMotion: 'user', motionIntensity: 'normal', motionSensitivity: 'full' };\n\n/** Change global component settings (call before `define*()` for `injectStyles`). */\nexport function configureComponents(options: ComponentsConfig): void {\n options = { ...options };\n // 5.0: removed values are ignored (see docs/upgrading-5.md)\n if (options.motionIntensity && !(options.motionIntensity in MOTION_SCALE)) delete options.motionIntensity;\n if (options.reducedMotion && options.reducedMotion !== 'reduce') options.reducedMotion = 'user';\n Object.assign(config, options);\n if (options.motionIntensity && typeof document !== 'undefined') {\n document.documentElement.style.setProperty('--usa-motion', String(MOTION_SCALE[options.motionIntensity] ?? 1));\n document.documentElement.setAttribute('data-usa-motion', options.motionIntensity);\n }\n if (options.motionSensitivity && typeof document !== 'undefined') {\n if (options.motionSensitivity === 'full') document.documentElement.removeAttribute('data-usa-sensitivity');\n else document.documentElement.setAttribute('data-usa-sensitivity', options.motionSensitivity);\n }\n}\n\n/** The current motion-sensitivity level (v4.4). */\nexport function getMotionSensitivity(): MotionSensitivity {\n return config.motionSensitivity;\n}\n\nconst VESTIBULAR = /rotate|scale|skew|perspective|matrix3d/;\n/**\n * Adapt keyframes to the sensitivity level: `gentle` drops transforms that\n * spin, zoom or skew (and 3D), `minimal` keeps opacity only, `static` keeps\n * just the final frame. `full` returns them unchanged.\n */\nexport function adaptKeyframes(frames: Keyframe[], level: MotionSensitivity = config.motionSensitivity): Keyframe[] {\n if (level === 'full' || !frames.length) return frames;\n if (level === 'static') return [frames[frames.length - 1]];\n return frames.map((f) => {\n const out: Keyframe = {};\n for (const [k, v] of Object.entries(f)) {\n if (k === 'offset' || k === 'easing' || k === 'composite') out[k] = v as any;\n else if (level === 'minimal') {\n if (k === 'opacity') out[k] = v as any;\n } else if (k === 'rotate' || k === 'scale' || (k === 'transform' && VESTIBULAR.test(String(v)))) continue;\n else out[k] = v as any;\n }\n return out;\n });\n}\n\nlet quiet = 0;\n/** Run `fn` without 4.9 deprecation warnings (library-internal calls). */\nexport function withoutDeprecations<T>(fn: () => T): T {\n quiet++;\n try {\n return fn();\n } finally {\n quiet--;\n }\n}\n\n/** The current global motion intensity. */\nexport function getMotionIntensity(): MotionIntensity {\n return config.motionIntensity;\n}\n\n/** Duration multiplier for the current intensity (1 when `normal`). */\nexport function motionScale(): number {\n return MOTION_SCALE[config.motionIntensity] ?? 1;\n}\n\nexport const canDefine = (): boolean => typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined';\n\n/** `true` when animations should be reduced (OS setting or `configureComponents`). */\nexport function prefersReducedMotion(): boolean {\n if (config.motionSensitivity === 'minimal' || config.motionSensitivity === 'static') return true;\n if (config.reducedMotion === 'reduce') return true;\n return typeof matchMedia === 'function' && !!matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nconst injected = new Set<string>();\n\n/** Add a component's stylesheet to the document once. */\nexport function adoptStyles(id: string, css: string): void {\n if (!config.injectStyles || !css || injected.has(id) || typeof document === 'undefined') return;\n injected.add(id);\n try {\n if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in document) {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n return;\n }\n } catch {\n /* fall through to <style> */\n }\n const style = document.createElement('style');\n style.setAttribute('data-usa', id);\n style.textContent = css;\n (document.head || document.documentElement).appendChild(style);\n}\n\n/** Attach `css` to a shadow root (constructable sheet where supported, else `<style>`). */\nexport function shadowStyles(root: ShadowRoot, css: string): void {\n try {\n if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in root) {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n root.adoptedStyleSheets = [sheet];\n return;\n }\n } catch {\n /* fall through */\n }\n const style = document.createElement('style');\n style.textContent = css;\n root.prepend(style);\n}\n\nexport type Cleanup = () => void;\n\n/**\n * Members shared by every `<usa-*>` element. Attribute helpers, a cleanup\n * bag that is emptied on disconnect, and motion helpers that degrade to the\n * final state without WAAPI or under reduced motion.\n */\nexport interface UsaElement extends HTMLElement {\n /** `true` while reduced motion applies to this element. */\n readonly reduced: boolean;\n}\n\nexport interface UsaBase extends UsaElement {\n mount(): void;\n changed(name: string): void;\n unmount(): void;\n str(name: string, fallback?: string): string;\n num(name: string, fallback: number): number;\n flag(name: string): boolean;\n setFlag(name: string, on: boolean): void;\n onCleanup(fn: Cleanup): void;\n listen<K extends keyof HTMLElementEventMap>(\n target: EventTarget,\n type: K | string,\n fn: (e: any) => void,\n options?: AddEventListenerOptions\n ): void;\n inView(cb: (visible: boolean, entry?: IntersectionObserverEntry) => void, init?: IntersectionObserverInit, target?: Element): void;\n motion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;\n emit(type: string, detail?: unknown): boolean;\n}\n\ntype BaseCtor = new () => UsaBase;\nlet baseClass: BaseCtor | null = null;\n\n/** The lazily created base class (needs `HTMLElement`). */\nexport function getBase(): BaseCtor {\n if (baseClass) return baseClass;\n class Base extends HTMLElement {\n private _cleanups: Cleanup[] = [];\n private _connected = false;\n\n get reduced(): boolean {\n return prefersReducedMotion();\n }\n\n connectedCallback(): void {\n if (this._connected) return;\n this._connected = true;\n styleLoader?.(this.localName);\n // Upgraded while the parser is still inside us (a <script> in <head>\n // defined the element): children/text are not there yet, so wait.\n if (typeof document !== 'undefined' && document.readyState === 'loading' && !this.nextSibling && !this.childNodes.length) {\n const go = () => {\n if (this._connected && this.isConnected) this.mount();\n };\n document.addEventListener('DOMContentLoaded', go, { once: true });\n this._cleanups.push(() => document.removeEventListener('DOMContentLoaded', go));\n return;\n }\n this.mount();\n }\n\n disconnectedCallback(): void {\n this._connected = false;\n this.teardown();\n }\n\n attributeChangedCallback(_name: string, oldValue: string | null, value: string | null): void {\n if (!this._connected || oldValue === value) return;\n this.changed(_name);\n }\n\n /** Re-mount on attribute change (override for finer updates). */\n changed(_name: string): void {\n this.teardown();\n this.mount();\n }\n\n private teardown(): void {\n this._cleanups.splice(0).reverse().forEach((fn) => fn());\n this.unmount();\n }\n\n mount(): void {}\n unmount(): void {}\n\n str(name: string, fallback = ''): string {\n const v = this.getAttribute(name);\n return v === null ? fallback : v;\n }\n\n num(name: string, fallback: number): number {\n const v = this.getAttribute(name);\n const n = v === null || v.trim() === '' ? NaN : Number(v);\n return Number.isFinite(n) ? n : fallback;\n }\n\n /** Boolean attribute: present and not `\"false\"`. */\n flag(name: string): boolean {\n const v = this.getAttribute(name);\n return v !== null && v !== 'false';\n }\n\n setFlag(name: string, on: boolean): void {\n if (on) this.setAttribute(name, '');\n else this.removeAttribute(name);\n }\n\n onCleanup(fn: Cleanup): void {\n this._cleanups.push(fn);\n }\n\n listen(target: EventTarget, type: string, fn: (e: any) => void, options?: AddEventListenerOptions): void {\n target.addEventListener(type, fn, options);\n this.onCleanup(() => target.removeEventListener(type, fn, options));\n }\n\n /** Calls `cb(true/false)` as the element enters / leaves the viewport. */\n inView(cb: (visible: boolean, entry?: IntersectionObserverEntry) => void, init?: IntersectionObserverInit, target: Element = this): void {\n if (typeof IntersectionObserver === 'undefined') {\n cb(true);\n return;\n }\n const io = new IntersectionObserver((entries) => {\n for (const e of entries) cb(e.isIntersecting, e);\n }, init);\n io.observe(target);\n this.onCleanup(() => io.disconnect());\n }\n\n /** `el.animate()` that returns `null` (and applies the last frame) without WAAPI. */\n motion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null {\n return animateWithMotion(el, keyframes, options);\n }\n\n emit(type: string, detail?: unknown): boolean {\n return this.dispatchEvent(new CustomEvent(`usa:${type}`, { detail, bubbles: true, cancelable: true }));\n }\n }\n baseClass = Base as unknown as BaseCtor;\n return baseClass;\n}\n\n/**\n * `el.animate()` with the library's motion rules (5.0, shared by elements and\n * registered effects): motion sensitivity (keyframes adapted, `static` →\n * final frame), intensity (duration scale) and the animation budget. Returns\n * `null` (final frame applied) when nothing should animate.\n */\nexport function animateWithMotion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null {\n if (typeof (el as HTMLElement).animate !== 'function' || config.motionSensitivity === 'static') {\n applyFrame(el as HTMLElement, keyframes[keyframes.length - 1]);\n return null;\n }\n keyframes = adaptKeyframes(keyframes);\n if (active >= maxActive) {\n applyFrame(el as HTMLElement, keyframes[keyframes.length - 1]);\n return null;\n }\n const k = motionScale();\n if (k !== 1 && k > 0 && typeof options.duration === 'number') options = { ...options, duration: options.duration * k, delay: (options.delay || 0) * k };\n const a = (el as HTMLElement).animate(keyframes, options);\n if (options.iterations !== Infinity) {\n active++;\n let done = false;\n const end = () => {\n if (!done) {\n done = true;\n active--;\n }\n };\n a?.finished?.then(end, end);\n }\n return a;\n}\n\n/** Write a keyframe's properties as inline styles (no-WAAPI fallback). */\nexport function applyFrame(el: HTMLElement, frame?: Keyframe): void {\n if (!frame) return;\n for (const [k, v] of Object.entries(frame)) {\n if (k === 'offset' || k === 'easing' || k === 'composite' || v == null) continue;\n (el.style as any)[k] = String(v);\n }\n}\n\n/**\n * Register `tag` with the class built by `make(Base)`. Returns the\n * constructor, the already registered one, or `undefined` without DOM.\n */\nexport function defineElement(\n tag: string,\n make: (Base: BaseCtor) => CustomElementConstructor,\n css?: { id: string; text: string }\n): CustomElementConstructor | undefined {\n if (!canDefine()) return undefined;\n adoptStyles('base', BASE_CSS);\n if (css) adoptStyles(css.id, css.text);\n const existing = customElements.get(tag);\n if (existing) return existing;\n const ctor = make(getBase());\n customElements.define(tag, ctor);\n return ctor;\n}\n\nconst BASE_CSS = '.usa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}';\n\n/** A visually hidden copy of `text` for screen readers (the animated copy is `aria-hidden`). */\nexport function srText(text: string): HTMLSpanElement {\n const s = document.createElement('span');\n s.className = 'usa-sr';\n s.textContent = text;\n return s;\n}\n\n// --- shared rAF scheduler (4.5) ----------------------------------------------\n// Every component loop goes through one requestAnimationFrame per frame\n// instead of one per element: callbacks are batched, run in order, and a\n// throwing callback no longer starves the others (the first error is rethrown).\nconst frameQueue = new Map<number, FrameRequestCallback>();\nlet frameSeq = 1;\nlet frameHandle: number | ReturnType<typeof setTimeout> | 0 = 0;\nlet frameVia: unknown = null;\nconst frameStats = { frames: 0, callbacks: 0, peak: 0, last: 0 };\nconst frameListeners = new Set<(t: number, dt: number) => void>();\n\nfunction flushFrame(t: number): void {\n frameHandle = 0;\n const dt = frameStats.last && t > frameStats.last ? t - frameStats.last : 16.7;\n frameStats.last = t;\n frameStats.frames++;\n const cbs = Array.from(frameQueue.values());\n frameQueue.clear();\n frameStats.callbacks += cbs.length;\n frameStats.peak = Math.max(frameStats.peak, cbs.length);\n let error: unknown = null;\n for (const cb of cbs) {\n try {\n cb(t);\n } catch (e) {\n error ??= e;\n }\n }\n frameListeners.forEach((fn) => fn(t, dt));\n if (frameListeners.size) requestFlush();\n if (error) throw error;\n}\n\nfunction requestFlush(): void {\n const native = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : null;\n // A stale handle from a replaced requestAnimationFrame (tests, iframes) is dropped.\n if (frameHandle && frameVia === native) return;\n frameVia = native;\n frameHandle = native ? native(flushFrame) : setTimeout(() => flushFrame(now()), 16);\n}\n\n/** requestAnimationFrame through the shared scheduler (timeout fallback in jsdom / hidden documents). */\nexport const raf = (cb: FrameRequestCallback): number => {\n const id = frameSeq++;\n frameQueue.set(id, cb);\n requestFlush();\n return id;\n};\n/** Monotonic time in ms (rAF callback timestamps differ between environments, so loops use this). */\nexport const now = (): number => (typeof performance !== 'undefined' ? performance.now() : Date.now());\nexport const caf = (id: number): void => {\n frameQueue.delete(id);\n};\n\n/** Run `fn(time, dt)` every frame on the shared scheduler until the returned function is called. */\nexport function onFrame(fn: (t: number, dt: number) => void): () => void {\n frameListeners.add(fn);\n requestFlush();\n return () => frameListeners.delete(fn);\n}\n\n/** Scheduler counters: frames flushed, callbacks run, peak callbacks in one frame, pending now. */\nexport function schedulerStats(): { frames: number; callbacks: number; peak: number; pending: number; loops: number } {\n return { frames: frameStats.frames, callbacks: frameStats.callbacks, peak: frameStats.peak, pending: frameQueue.size, loops: frameListeners.size };\n}\n\n// --- active animation budget (4.5) ---------------------------------------------\nlet active = 0;\nlet maxActive = Infinity;\n/** Number of component animations running right now. */\nexport const activeAnimations = (): number => active;\n/** Cap concurrent component animations; extra ones jump to their final frame (`Infinity` = no cap). */\nexport function setAnimationBudget(max: number): void {\n maxActive = max > 0 ? max : Infinity;\n}\n/** The current cap. */\nexport const animationBudget = (): number => maxActive;\n\n// --- on-demand styles (4.5) -----------------------------------------------------\nlet styleLoader: ((tag: string) => void) | null = null;\n/** Called with each element's tag the first time one connects (used by the `lite` build to load CSS on demand). */\nexport function setStyleLoader(fn: ((tag: string) => void) | null): void {\n styleLoader = fn;\n}\n\nexport const EASE_OUT = 'cubic-bezier(0.22, 1, 0.36, 1)';\nexport const EASE_SPRING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';\n/** Windows Fluent \"decelerate\" / \"point-to-point\" curves. */\nexport const FLUENT_DECELERATE = 'cubic-bezier(0.1, 0.9, 0.2, 1)';\n\nconst warned = new Set<string>();\n/** Log a deprecation once per key (console.warn). */\nexport function deprecate(key: string, message: string): void {\n if (warned.has(key)) return;\n warned.add(key);\n if (typeof console !== 'undefined') console.warn(`[motionary] ${message}`);\n}\n\n/**\n * The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and\n * `<usa-acrylic>` (3.0: `variant` only selects a style variant).\n */\nexport function kindOf(el: Element, valid: readonly string[] | Record<string, unknown>, fallback: string): string {\n const k = el.getAttribute('kind');\n return k && (Array.isArray(valid) ? valid.includes(k) : k in (valid as object)) ? k : fallback;\n}\n\nexport const clamp = (v: number, min: number, max: number): number => Math.min(max, Math.max(min, v));\n"],"names":[],"mappings":"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"}
|
|
@@ -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
|
|
@@ -401,4 +401,4 @@ function kindOf(el, valid, fallback) {
|
|
|
401
401
|
const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
|
|
402
402
|
|
|
403
403
|
export { shadowStyles as A, srText as B, EASE_SPRING as E, FLUENT_DECELERATE as F, MOTION_SCALE as M, MOTION_SENSITIVITY_LEVELS as a, activeAnimations as b, canDefine as c, adaptKeyframes as d, animateWithMotion as e, animationBudget as f, configureComponents as g, getMotionIntensity as h, getMotionSensitivity as i, setAnimationBudget as j, clamp as k, applyFrame as l, motionScale as m, now as n, onFrame as o, prefersReducedMotion as p, caf as q, raf as r, schedulerStats as s, setStyleLoader as t, adoptStyles as u, deprecate as v, withoutDeprecations as w, defineElement as x, EASE_OUT as y, kindOf as z };
|
|
404
|
-
//# sourceMappingURL=base-
|
|
404
|
+
//# sourceMappingURL=base-Yno7N2eC.js.map
|