use-scroll-animate 6.0.1 → 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 +31 -0
- package/README.md +157 -373
- package/README_ja.md +171 -145
- package/README_zh.md +169 -167
- 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-qpECfEkb.cjs → core-B5T0dhFH.cjs} +14 -210
- 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-mV_TPgG_.js → core-D7cVumUu.js} +11 -203
- 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-BYBVJVeP.js +226 -0
- package/dist/chunks/presets-BYBVJVeP.js.map +1 -0
- package/dist/chunks/presets-CUHys3sK.cjs +233 -0
- 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-CLc3j58T.cjs → stagger-CCFyhzSw.cjs} +3 -3
- package/dist/chunks/stagger-CCFyhzSw.cjs.map +1 -0
- package/dist/chunks/{stagger-BFAhKknX.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 +45 -41
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +45 -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 +6 -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 +6 -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 -3
- package/dist/element.cjs.map +1 -1
- package/dist/element.d.cts +19 -5
- package/dist/element.d.ts +19 -5
- package/dist/element.js +4 -3
- package/dist/element.js.map +1 -1
- package/dist/element.umd.js +1 -1
- package/dist/element.umd.js.map +1 -1
- package/dist/index.cjs +28 -25
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +40 -15
- package/dist/index.d.ts +40 -15
- package/dist/index.js +11 -10
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +5 -5
- package/dist/index.umd.js.map +1 -1
- package/dist/presets/extended.cjs +243 -0
- package/dist/presets/extended.cjs.map +1 -0
- package/dist/presets/extended.d.cts +37 -0
- package/dist/presets/extended.d.ts +37 -0
- package/dist/presets/extended.js +239 -0
- package/dist/presets/extended.js.map +1 -0
- package/dist/presets-extended.umd.js +2 -0
- package/dist/presets-extended.umd.js.map +1 -0
- package/dist/react.cjs +4 -3
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +19 -5
- package/dist/react.d.ts +19 -5
- package/dist/react.js +4 -3
- package/dist/react.js.map +1 -1
- package/dist/solid.cjs +5 -4
- package/dist/solid.cjs.map +1 -1
- package/dist/solid.d.cts +20 -6
- package/dist/solid.d.ts +20 -6
- package/dist/solid.js +5 -4
- package/dist/solid.js.map +1 -1
- package/dist/svelte.cjs +5 -4
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +20 -6
- package/dist/svelte.d.ts +20 -6
- package/dist/svelte.js +5 -4
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +4 -3
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +19 -5
- package/dist/vue.d.ts +19 -5
- package/dist/vue.js +4 -3
- package/dist/vue.js.map +1 -1
- package/docs/API.md +17 -12
- package/docs/ROADMAP.md +12 -11
- 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 +310 -0
- package/docs/windows-apps.md +8 -8
- package/package.json +40 -26
- package/dist/chunks/base-B5i8qQPR.cjs.map +0 -1
- package/dist/chunks/base-C3Sw9sAO.js.map +0 -1
- package/dist/chunks/core-mV_TPgG_.js.map +0 -1
- package/dist/chunks/core-qpECfEkb.cjs.map +0 -1
- package/dist/chunks/stagger-BFAhKknX.js.map +0 -1
- package/dist/chunks/stagger-CLc3j58T.cjs.map +0 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* motionary - Core Type Definitions
|
|
3
3
|
* A lightweight, high-performance scroll animation library
|
|
4
4
|
*/
|
|
5
|
-
/**
|
|
6
|
-
type
|
|
5
|
+
/** The 33 core presets (always available in `PRESETS`). */
|
|
6
|
+
type CorePreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
|
|
7
|
+
/**
|
|
8
|
+
* Every built-in preset name: the core set plus the 6.1 extended set, which is
|
|
9
|
+
* available once `motionary/presets/extended` is loaded (or after
|
|
10
|
+
* `registerPresets(EXTENDED_PRESETS)`).
|
|
11
|
+
*/
|
|
12
|
+
type AnimationPreset = CorePreset | ExtendedPreset;
|
|
7
13
|
/**
|
|
8
14
|
* How `onProgress` / `progressVar` progress is measured.
|
|
9
15
|
* - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
|
|
@@ -22,17 +28,27 @@ type ProgressMode = 'ratio' | 'scroll';
|
|
|
22
28
|
* since those only mean something for a time-based animation.
|
|
23
29
|
*/
|
|
24
30
|
type ScrollEngine = 'auto' | 'js' | 'css';
|
|
31
|
+
/** The 6.1 extended presets (`motionary/presets/extended`). */
|
|
32
|
+
type ExtendedPreset = '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' | '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' | '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' | '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' | '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' | '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' | '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' | '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' | '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' | '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' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | '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';
|
|
25
33
|
/** Easing function types */
|
|
26
34
|
type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
|
|
27
35
|
/** Keyframe definition for custom animations */
|
|
28
36
|
interface AnimationKeyframe {
|
|
29
37
|
[property: string]: string | number;
|
|
30
38
|
}
|
|
39
|
+
/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
|
|
40
|
+
interface AnimationFrame extends AnimationKeyframe {
|
|
41
|
+
offset: number;
|
|
42
|
+
}
|
|
31
43
|
/** Custom animation definition */
|
|
32
44
|
interface CustomAnimation {
|
|
33
45
|
from: AnimationKeyframe;
|
|
34
46
|
to: AnimationKeyframe;
|
|
47
|
+
/** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
|
|
48
|
+
frames?: AnimationFrame[];
|
|
35
49
|
}
|
|
50
|
+
/** The keyframes of a preset (`PRESETS[name]`). */
|
|
51
|
+
type PresetKeyframes = CustomAnimation;
|
|
36
52
|
/** Per-element animation options */
|
|
37
53
|
interface AnimateOptions {
|
|
38
54
|
/** Animation preset name, array of presets, or custom animation object */
|
|
@@ -173,7 +189,7 @@ interface ScrollAnimateInstance {
|
|
|
173
189
|
}
|
|
174
190
|
|
|
175
191
|
/**
|
|
176
|
-
*
|
|
192
|
+
* motionary - Core Implementation
|
|
177
193
|
* Uses IntersectionObserver + Web Animations API for zero-dependency,
|
|
178
194
|
* high-performance scroll-triggered animations.
|
|
179
195
|
*/
|
|
@@ -193,7 +209,7 @@ declare function getScrollProgress(el: Element, root?: Element | null): number;
|
|
|
193
209
|
declare function createScrollAnimate(userConfig?: ScrollAnimateConfig): ScrollAnimateInstance;
|
|
194
210
|
|
|
195
211
|
/**
|
|
196
|
-
*
|
|
212
|
+
* motionary - Staggered children
|
|
197
213
|
* Reveal a container's children one after another when the container scrolls
|
|
198
214
|
* into view, optionally also animating children that are added later.
|
|
199
215
|
*/
|
|
@@ -324,7 +340,7 @@ declare function resolvePosition(pos: TimelinePosition | undefined, end: number,
|
|
|
324
340
|
declare function timeline(options?: TimelineOptions): Timeline;
|
|
325
341
|
|
|
326
342
|
/**
|
|
327
|
-
*
|
|
343
|
+
* motionary - parallax() helper
|
|
328
344
|
*
|
|
329
345
|
* Moves elements at a different speed than the page while they cross the
|
|
330
346
|
* viewport. Built on the same scroll progress as `progressVar` (0 when the
|
|
@@ -365,15 +381,24 @@ interface ParallaxHelperOptions {
|
|
|
365
381
|
declare function parallax(target: string | Element | NodeList | Element[], options?: ParallaxHelperOptions): () => void;
|
|
366
382
|
|
|
367
383
|
/**
|
|
368
|
-
*
|
|
384
|
+
* motionary - Animation Presets
|
|
369
385
|
* Defines keyframes for all built-in animation presets
|
|
370
386
|
*/
|
|
371
387
|
|
|
372
|
-
type KeyframeMap =
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
388
|
+
type KeyframeMap = PresetKeyframes;
|
|
389
|
+
/**
|
|
390
|
+
* Every registered preset: the 33 core presets, plus the 6.1 extended set once
|
|
391
|
+
* `motionary/presets/extended` is loaded, plus your own.
|
|
392
|
+
*/
|
|
393
|
+
declare const PRESETS: Record<CorePreset, KeyframeMap> & Partial<Record<ExtendedPreset, KeyframeMap>>;
|
|
394
|
+
/**
|
|
395
|
+
* Add (or replace) presets by name: `registerPresets({ 'my-pop': { from, to, frames? } })`.
|
|
396
|
+
* They work everywhere a preset name does (`animation`, `exit`, `data-sa-animation`,
|
|
397
|
+
* `<scroll-animate>`, `<usa-reveal effect>`).
|
|
398
|
+
*/
|
|
399
|
+
declare function registerPresets(presets: Record<string, PresetKeyframes>): void;
|
|
400
|
+
/** The same keyframes played backwards (exit animations). */
|
|
401
|
+
declare function reversePreset(p: KeyframeMap): KeyframeMap;
|
|
377
402
|
declare function resolvePreset(animation: AnimationPreset | AnimationPreset[] | CustomAnimation): KeyframeMap;
|
|
378
403
|
/** Easing to CSS cubic-bezier mapping */
|
|
379
404
|
declare const EASING_MAP: Record<string, string>;
|
|
@@ -385,7 +410,7 @@ declare function resolveEasing(easing: EasingType): string;
|
|
|
385
410
|
*
|
|
386
411
|
* @example
|
|
387
412
|
* ```js
|
|
388
|
-
* import ScrollAnimate from '
|
|
413
|
+
* import ScrollAnimate from 'motionary';
|
|
389
414
|
*
|
|
390
415
|
* // Auto-initialize all elements with data-sa attribute
|
|
391
416
|
* ScrollAnimate.init();
|
|
@@ -396,5 +421,5 @@ declare function resolveEasing(easing: EasingType): string;
|
|
|
396
421
|
*/
|
|
397
422
|
declare const ScrollAnimate: ScrollAnimateInstance;
|
|
398
423
|
|
|
399
|
-
export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, resolveEasing, resolvePosition, resolvePreset, staggerChildren, supportsNativeScrub, supportsScrollTimeline, timeline };
|
|
400
|
-
export type { AnimateOptions, AnimatedElement, AnimationKeyframe, AnimationPreset, CustomAnimation, EasingType, ParallaxHelperOptions, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubHandle, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
|
|
424
|
+
export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, registerPresets, resolveEasing, resolvePosition, resolvePreset, reversePreset, staggerChildren, supportsNativeScrub, supportsScrollTimeline, timeline };
|
|
425
|
+
export type { AnimateOptions, AnimatedElement, AnimationFrame, AnimationKeyframe, AnimationPreset, CorePreset, CustomAnimation, EasingType, ExtendedPreset, ParallaxHelperOptions, PresetKeyframes, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubHandle, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* motionary - Core Type Definitions
|
|
3
3
|
* A lightweight, high-performance scroll animation library
|
|
4
4
|
*/
|
|
5
|
-
/**
|
|
6
|
-
type
|
|
5
|
+
/** The 33 core presets (always available in `PRESETS`). */
|
|
6
|
+
type CorePreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
|
|
7
|
+
/**
|
|
8
|
+
* Every built-in preset name: the core set plus the 6.1 extended set, which is
|
|
9
|
+
* available once `motionary/presets/extended` is loaded (or after
|
|
10
|
+
* `registerPresets(EXTENDED_PRESETS)`).
|
|
11
|
+
*/
|
|
12
|
+
type AnimationPreset = CorePreset | ExtendedPreset;
|
|
7
13
|
/**
|
|
8
14
|
* How `onProgress` / `progressVar` progress is measured.
|
|
9
15
|
* - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
|
|
@@ -22,17 +28,27 @@ type ProgressMode = 'ratio' | 'scroll';
|
|
|
22
28
|
* since those only mean something for a time-based animation.
|
|
23
29
|
*/
|
|
24
30
|
type ScrollEngine = 'auto' | 'js' | 'css';
|
|
31
|
+
/** The 6.1 extended presets (`motionary/presets/extended`). */
|
|
32
|
+
type ExtendedPreset = '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' | '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' | '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' | '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' | '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' | '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' | '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' | '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' | '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' | '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' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | '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';
|
|
25
33
|
/** Easing function types */
|
|
26
34
|
type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
|
|
27
35
|
/** Keyframe definition for custom animations */
|
|
28
36
|
interface AnimationKeyframe {
|
|
29
37
|
[property: string]: string | number;
|
|
30
38
|
}
|
|
39
|
+
/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
|
|
40
|
+
interface AnimationFrame extends AnimationKeyframe {
|
|
41
|
+
offset: number;
|
|
42
|
+
}
|
|
31
43
|
/** Custom animation definition */
|
|
32
44
|
interface CustomAnimation {
|
|
33
45
|
from: AnimationKeyframe;
|
|
34
46
|
to: AnimationKeyframe;
|
|
47
|
+
/** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
|
|
48
|
+
frames?: AnimationFrame[];
|
|
35
49
|
}
|
|
50
|
+
/** The keyframes of a preset (`PRESETS[name]`). */
|
|
51
|
+
type PresetKeyframes = CustomAnimation;
|
|
36
52
|
/** Per-element animation options */
|
|
37
53
|
interface AnimateOptions {
|
|
38
54
|
/** Animation preset name, array of presets, or custom animation object */
|
|
@@ -173,7 +189,7 @@ interface ScrollAnimateInstance {
|
|
|
173
189
|
}
|
|
174
190
|
|
|
175
191
|
/**
|
|
176
|
-
*
|
|
192
|
+
* motionary - Core Implementation
|
|
177
193
|
* Uses IntersectionObserver + Web Animations API for zero-dependency,
|
|
178
194
|
* high-performance scroll-triggered animations.
|
|
179
195
|
*/
|
|
@@ -193,7 +209,7 @@ declare function getScrollProgress(el: Element, root?: Element | null): number;
|
|
|
193
209
|
declare function createScrollAnimate(userConfig?: ScrollAnimateConfig): ScrollAnimateInstance;
|
|
194
210
|
|
|
195
211
|
/**
|
|
196
|
-
*
|
|
212
|
+
* motionary - Staggered children
|
|
197
213
|
* Reveal a container's children one after another when the container scrolls
|
|
198
214
|
* into view, optionally also animating children that are added later.
|
|
199
215
|
*/
|
|
@@ -324,7 +340,7 @@ declare function resolvePosition(pos: TimelinePosition | undefined, end: number,
|
|
|
324
340
|
declare function timeline(options?: TimelineOptions): Timeline;
|
|
325
341
|
|
|
326
342
|
/**
|
|
327
|
-
*
|
|
343
|
+
* motionary - parallax() helper
|
|
328
344
|
*
|
|
329
345
|
* Moves elements at a different speed than the page while they cross the
|
|
330
346
|
* viewport. Built on the same scroll progress as `progressVar` (0 when the
|
|
@@ -365,15 +381,24 @@ interface ParallaxHelperOptions {
|
|
|
365
381
|
declare function parallax(target: string | Element | NodeList | Element[], options?: ParallaxHelperOptions): () => void;
|
|
366
382
|
|
|
367
383
|
/**
|
|
368
|
-
*
|
|
384
|
+
* motionary - Animation Presets
|
|
369
385
|
* Defines keyframes for all built-in animation presets
|
|
370
386
|
*/
|
|
371
387
|
|
|
372
|
-
type KeyframeMap =
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
388
|
+
type KeyframeMap = PresetKeyframes;
|
|
389
|
+
/**
|
|
390
|
+
* Every registered preset: the 33 core presets, plus the 6.1 extended set once
|
|
391
|
+
* `motionary/presets/extended` is loaded, plus your own.
|
|
392
|
+
*/
|
|
393
|
+
declare const PRESETS: Record<CorePreset, KeyframeMap> & Partial<Record<ExtendedPreset, KeyframeMap>>;
|
|
394
|
+
/**
|
|
395
|
+
* Add (or replace) presets by name: `registerPresets({ 'my-pop': { from, to, frames? } })`.
|
|
396
|
+
* They work everywhere a preset name does (`animation`, `exit`, `data-sa-animation`,
|
|
397
|
+
* `<scroll-animate>`, `<usa-reveal effect>`).
|
|
398
|
+
*/
|
|
399
|
+
declare function registerPresets(presets: Record<string, PresetKeyframes>): void;
|
|
400
|
+
/** The same keyframes played backwards (exit animations). */
|
|
401
|
+
declare function reversePreset(p: KeyframeMap): KeyframeMap;
|
|
377
402
|
declare function resolvePreset(animation: AnimationPreset | AnimationPreset[] | CustomAnimation): KeyframeMap;
|
|
378
403
|
/** Easing to CSS cubic-bezier mapping */
|
|
379
404
|
declare const EASING_MAP: Record<string, string>;
|
|
@@ -385,7 +410,7 @@ declare function resolveEasing(easing: EasingType): string;
|
|
|
385
410
|
*
|
|
386
411
|
* @example
|
|
387
412
|
* ```js
|
|
388
|
-
* import ScrollAnimate from '
|
|
413
|
+
* import ScrollAnimate from 'motionary';
|
|
389
414
|
*
|
|
390
415
|
* // Auto-initialize all elements with data-sa attribute
|
|
391
416
|
* ScrollAnimate.init();
|
|
@@ -396,5 +421,5 @@ declare function resolveEasing(easing: EasingType): string;
|
|
|
396
421
|
*/
|
|
397
422
|
declare const ScrollAnimate: ScrollAnimateInstance;
|
|
398
423
|
|
|
399
|
-
export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, resolveEasing, resolvePosition, resolvePreset, staggerChildren, supportsNativeScrub, supportsScrollTimeline, timeline };
|
|
400
|
-
export type { AnimateOptions, AnimatedElement, AnimationKeyframe, AnimationPreset, CustomAnimation, EasingType, ParallaxHelperOptions, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubHandle, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
|
|
424
|
+
export { EASING_MAP, PRESETS, TIMELINE_PRESETS, createScrollAnimate, ScrollAnimate as default, getScrollProgress, parallax, registerPresets, resolveEasing, resolvePosition, resolvePreset, reversePreset, staggerChildren, supportsNativeScrub, supportsScrollTimeline, timeline };
|
|
425
|
+
export type { AnimateOptions, AnimatedElement, AnimationFrame, AnimationKeyframe, AnimationPreset, CorePreset, CustomAnimation, EasingType, ExtendedPreset, ParallaxHelperOptions, PresetKeyframes, ProgressMode, ScrollAnimateConfig, ScrollAnimateInstance, ScrollEngine, ScrubHandle, ScrubOptions, StaggerOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions };
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { b as resolveTargets, h as hasDOM, s as supportsObserver, g as getScrollProgress, d as prefersReducedMotion, c as createScrollAnimate } from './chunks/core-
|
|
2
|
-
export {
|
|
3
|
-
export { s as staggerChildren } from './chunks/stagger-
|
|
4
|
-
export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-
|
|
5
|
-
|
|
1
|
+
import { b as resolveTargets, h as hasDOM, s as supportsObserver, g as getScrollProgress, d as prefersReducedMotion, c as createScrollAnimate } from './chunks/core-D7cVumUu.js';
|
|
2
|
+
export { e as supportsScrollTimeline } from './chunks/core-D7cVumUu.js';
|
|
3
|
+
export { s as staggerChildren } from './chunks/stagger-DtMKo2SK.js';
|
|
4
|
+
export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-CUGCsMsJ.js';
|
|
5
|
+
export { E as EASING_MAP, P as PRESETS, c as registerPresets, a as resolveEasing, r as resolvePreset, b as reversePreset } from './chunks/presets-BYBVJVeP.js';
|
|
6
|
+
import './chunks/base-Yno7N2eC.js';
|
|
6
7
|
import './components/tokens.js';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
|
-
*
|
|
10
|
+
* motionary - parallax() helper
|
|
10
11
|
*
|
|
11
12
|
* Moves elements at a different speed than the page while they cross the
|
|
12
13
|
* viewport. Built on the same scroll progress as `progressVar` (0 when the
|
|
@@ -98,16 +99,16 @@ function parallax(target, options = {}) {
|
|
|
98
99
|
}
|
|
99
100
|
|
|
100
101
|
/**
|
|
101
|
-
*
|
|
102
|
+
* motionary
|
|
102
103
|
*
|
|
103
104
|
* A lightweight, dependency-free scroll animation library for modern web
|
|
104
105
|
* applications. Built with TypeScript, powered by IntersectionObserver and
|
|
105
106
|
* the Web Animations API (or the native scroll-driven timeline). Safe to
|
|
106
107
|
* import during SSR. Framework integrations live in the subpath entries:
|
|
107
|
-
* `
|
|
108
|
+
* `motionary/react`, `/vue`, `/svelte`, `/solid`, `/element`.
|
|
108
109
|
*
|
|
109
110
|
* @license MIT
|
|
110
|
-
* @see https://github.com/HarrisonCN/
|
|
111
|
+
* @see https://github.com/HarrisonCN/motionary
|
|
111
112
|
*/
|
|
112
113
|
/**
|
|
113
114
|
* Default singleton instance of ScrollAnimate.
|
|
@@ -115,7 +116,7 @@ function parallax(target, options = {}) {
|
|
|
115
116
|
*
|
|
116
117
|
* @example
|
|
117
118
|
* ```js
|
|
118
|
-
* import ScrollAnimate from '
|
|
119
|
+
* import ScrollAnimate from 'motionary';
|
|
119
120
|
*
|
|
120
121
|
* // Auto-initialize all elements with data-sa attribute
|
|
121
122
|
* ScrollAnimate.init();
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/parallax.ts","../src/index.ts"],"sourcesContent":["/**\n *
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/parallax.ts","../src/index.ts"],"sourcesContent":["/**\n * motionary - parallax() helper\n *\n * Moves elements at a different speed than the page while they cross the\n * viewport. Built on the same scroll progress as `progressVar` (0 when the\n * element's top enters at the bottom, 1 when its bottom leaves at the top):\n * the progress is written to a CSS custom property (default `--sa-parallax`)\n * and the offset is applied with the individual `translate` property, so it\n * composes with entrance animations and other `transform`s.\n */\n\nimport { getScrollProgress, hasDOM, prefersReducedMotion, resolveTargets, supportsObserver } from './core';\n\nexport interface ParallaxHelperOptions {\n /**\n * Total distance the element shifts while it crosses the viewport, as a\n * fraction of the viewport size (`0.2` = 20vh on the y axis). Positive values\n * lag behind the scroll (background-like), negative values move ahead of it\n * (foreground-like). (default: `0.2`)\n */\n speed?: number;\n /** `'y'` (default) or `'x'` (horizontal drift, in `vw`) */\n axis?: 'x' | 'y';\n /** CSS custom property receiving the progress (default: `'--sa-parallax'`) */\n progressVar?: string;\n /** Scroll container (default: the viewport) */\n root?: Element | null;\n /**\n * Under `prefers-reduced-motion: reduce` no offset is applied (the progress\n * variable is still written). Set to `false` to move anyway. (default: `true`)\n */\n respectReducedMotion?: boolean;\n}\n\nconst PASSIVE: AddEventListenerOptions = { passive: true };\n\n/**\n * Apply a scroll parallax to `target` (selector, Element, NodeList or array).\n * Returns a function that stops it and removes the inline styles it set.\n * SSR-safe (no-op without a DOM / IntersectionObserver).\n *\n * @example\n * const stop = parallax('.hero-bg', { speed: 0.3 });\n * parallax('.badge', { speed: -0.15, axis: 'x' });\n */\nexport function parallax(\n target: string | Element | NodeList | Element[],\n options: ParallaxHelperOptions = {}\n): () => void {\n const els = resolveTargets(target);\n if (!els.length || !hasDOM() || !supportsObserver()) return () => undefined;\n const { speed = 0.2, axis = 'y', root = null, respectReducedMotion = true } = options;\n const name = options.progressVar ? (options.progressVar.startsWith('--') ? options.progressVar : `--${options.progressVar}`) : '--sa-parallax';\n const unit = axis === 'x' ? 'vw' : 'vh';\n const visible = new Set<Element>();\n let frame = 0;\n let listening = false;\n const scroller: EventTarget = root || window;\n\n const apply = (el: Element) => {\n const style = (el as HTMLElement).style;\n if (!style) return;\n const p = getScrollProgress(el, root);\n style.setProperty(name, String(+p.toFixed(4)));\n if (respectReducedMotion && prefersReducedMotion()) {\n style.removeProperty('translate');\n return;\n }\n const offset = `${+((p - 0.5) * speed * 100).toFixed(3)}${unit}`;\n style.setProperty('translate', axis === 'x' ? `${offset} 0px` : `0px ${offset}`);\n };\n\n const update = () => {\n frame = 0;\n visible.forEach(apply);\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n const listen = (on: boolean) => {\n if (on === listening) return;\n listening = on;\n const method = on ? 'addEventListener' : 'removeEventListener';\n scroller[method]('scroll', schedule, PASSIVE);\n window[method]('resize', schedule, PASSIVE);\n if (!on && frame) {\n cancelAnimationFrame(frame);\n frame = 0;\n }\n };\n\n const io = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) visible.add(entry.target);\n else visible.delete(entry.target);\n apply(entry.target); // report the edges even on fast scrolls\n });\n listen(visible.size > 0);\n },\n { threshold: 0, root }\n );\n els.forEach((el) => {\n apply(el); // no jump before the first observer callback\n io.observe(el);\n });\n\n return () => {\n io.disconnect();\n listen(false);\n visible.clear();\n els.forEach((el) => {\n const style = (el as HTMLElement).style;\n if (!style) return;\n style.removeProperty('translate');\n style.removeProperty(name);\n });\n };\n}\n","/**\n * motionary\n *\n * A lightweight, dependency-free scroll animation library for modern web\n * applications. Built with TypeScript, powered by IntersectionObserver and\n * the Web Animations API (or the native scroll-driven timeline). Safe to\n * import during SSR. Framework integrations live in the subpath entries:\n * `motionary/react`, `/vue`, `/svelte`, `/solid`, `/element`.\n *\n * @license MIT\n * @see https://github.com/HarrisonCN/motionary\n */\n\nexport { createScrollAnimate, getScrollProgress, supportsScrollTimeline } from './core';\nexport { staggerChildren } from './stagger';\nexport { timeline, resolvePosition, TIMELINE_PRESETS, supportsNativeScrub } from './components/timeline/core';\nexport { parallax } from './parallax';\nexport { PRESETS, registerPresets, reversePreset, resolvePreset, resolveEasing, EASING_MAP } from './presets';\nexport type {\n AnimationPreset,\n CorePreset,\n ExtendedPreset,\n PresetKeyframes,\n AnimationFrame,\n EasingType,\n AnimationKeyframe,\n CustomAnimation,\n ProgressMode,\n ScrollEngine,\n AnimateOptions,\n ScrollAnimateConfig,\n AnimatedElement,\n ScrollAnimateInstance,\n} from './types';\nexport type { StaggerOptions } from './stagger';\nexport type { ParallaxHelperOptions } from './parallax';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions, ScrubHandle } from './components/timeline/core';\n\n// Default export: a ready-to-use singleton instance\nimport { createScrollAnimate } from './core';\n\n/**\n * Default singleton instance of ScrollAnimate.\n * Ready to use out of the box with sensible defaults.\n *\n * @example\n * ```js\n * import ScrollAnimate from 'motionary';\n *\n * // Auto-initialize all elements with data-sa attribute\n * ScrollAnimate.init();\n *\n * // Or manually observe elements\n * ScrollAnimate.observe('.my-element', { animation: 'fade-in-up' });\n * ```\n */\nconst ScrollAnimate = /* @__PURE__ */ createScrollAnimate();\nexport default ScrollAnimate;\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;AASG;AAyBH,MAAM,OAAO,GAA4B,EAAE,OAAO,EAAE,IAAI,EAAE;AAE1D;;;;;;;;AAQG;SACa,QAAQ,CACtB,MAA+C,EAC/C,UAAiC,EAAE,EAAA;AAEnC,IAAA,MAAM,GAAG,GAAG,cAAc,CAAC,MAAM,CAAC;IAClC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE;AAAE,QAAA,OAAO,MAAM,SAAS;AAC3E,IAAA,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,OAAO;AACrF,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,WAAW,GAAG,CAAA,EAAA,EAAK,OAAO,CAAC,WAAW,EAAE,IAAI,eAAe;AAC9I,IAAA,MAAM,IAAI,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,GAAG,IAAI;AACvC,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,EAAW;IAClC,IAAI,KAAK,GAAG,CAAC;IACb,IAAI,SAAS,GAAG,KAAK;AACrB,IAAA,MAAM,QAAQ,GAAgB,IAAI,IAAI,MAAM;AAE5C,IAAA,MAAM,KAAK,GAAG,CAAC,EAAW,KAAI;AAC5B,QAAA,MAAM,KAAK,GAAI,EAAkB,CAAC,KAAK;AACvC,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,MAAM,CAAC,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC;AACrC,QAAA,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,QAAA,IAAI,oBAAoB,IAAI,oBAAoB,EAAE,EAAE;AAClD,YAAA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;YACjC;QACF;QACA,MAAM,MAAM,GAAG,CAAA,EAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,GAAG,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAA,CAAE;QAChE,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,IAAI,KAAK,GAAG,GAAG,CAAA,EAAG,MAAM,MAAM,GAAG,CAAA,IAAA,EAAO,MAAM,CAAA,CAAE,CAAC;AAClF,IAAA,CAAC;IAED,MAAM,MAAM,GAAG,MAAK;QAClB,KAAK,GAAG,CAAC;AACT,QAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC;AACxB,IAAA,CAAC;IACD,MAAM,QAAQ,GAAG,MAAK;AACpB,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC;AACnD,IAAA,CAAC;AACD,IAAA,MAAM,MAAM,GAAG,CAAC,EAAW,KAAI;QAC7B,IAAI,EAAE,KAAK,SAAS;YAAE;QACtB,SAAS,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,EAAE,GAAG,kBAAkB,GAAG,qBAAqB;QAC9D,QAAQ,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;QAC7C,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;AAC3C,QAAA,IAAI,CAAC,EAAE,IAAI,KAAK,EAAE;YAChB,oBAAoB,CAAC,KAAK,CAAC;YAC3B,KAAK,GAAG,CAAC;QACX;AACF,IAAA,CAAC;IAED,MAAM,EAAE,GAAG,IAAI,oBAAoB,CACjC,CAAC,OAAO,KAAI;AACV,QAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YACxB,IAAI,KAAK,CAAC,cAAc;AAAE,gBAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;;AAC9C,gBAAA,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;AACjC,YAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AACtB,QAAA,CAAC,CAAC;AACF,QAAA,MAAM,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC;IAC1B,CAAC,EACD,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,CACvB;AACD,IAAA,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;AACjB,QAAA,KAAK,CAAC,EAAE,CAAC,CAAC;AACV,QAAA,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;AAChB,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAK;QACV,EAAE,CAAC,UAAU,EAAE;QACf,MAAM,CAAC,KAAK,CAAC;QACb,OAAO,CAAC,KAAK,EAAE;AACf,QAAA,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;AACjB,YAAA,MAAM,KAAK,GAAI,EAAkB,CAAC,KAAK;AACvC,YAAA,IAAI,CAAC,KAAK;gBAAE;AACZ,YAAA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;AACjC,YAAA,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;AAC5B,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC;AACH;;ACtHA;;;;;;;;;;;AAWG;AA8BH;;;;;;;;;;;;;;AAcG;AACH,MAAM,aAAa,mBAAmB,mBAAmB;;;;"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ScrollAnimate={})}(this,function(e){"use strict";const t={"fade-in":{from:{opacity:0},to:{opacity:1}},"fade-in-up":{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-down":{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-left":{from:{opacity:0,transform:"translateX(-40px)"},to:{opacity:1,transform:"translateX(0px)"}},"fade-in-right":{from:{opacity:0,transform:"translateX(40px)"},to:{opacity:1,transform:"translateX(0px)"}},"zoom-in":{from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}},"zoom-out":{from:{opacity:0,transform:"scale(1.2)"},to:{opacity:1,transform:"scale(1)"}},"flip-x":{from:{opacity:0,transform:"rotateX(-90deg)"},to:{opacity:1,transform:"rotateX(0deg)"}},"flip-y":{from:{opacity:0,transform:"rotateY(-90deg)"},to:{opacity:1,transform:"rotateY(0deg)"}},"slide-up":{from:{transform:"translateY(100%)"},to:{transform:"translateY(0px)"}},"slide-down":{from:{transform:"translateY(-100%)"},to:{transform:"translateY(0px)"}},"slide-left":{from:{transform:"translateX(-100%)"},to:{transform:"translateX(0px)"}},"slide-right":{from:{transform:"translateX(100%)"},to:{transform:"translateX(0px)"}},bounce:{from:{opacity:0,transform:"translateY(-60px)"},to:{opacity:1,transform:"translateY(0px)"}},"rotate-in":{from:{opacity:0,transform:"rotate(-180deg) scale(0.5)"},to:{opacity:1,transform:"rotate(0deg) scale(1)"}},"blur-in":{from:{opacity:0,filter:"blur(12px)"},to:{opacity:1,filter:"blur(0px)"}},"skew-in":{from:{opacity:0,transform:"skewX(20deg) translateX(30px)"},to:{opacity:1,transform:"skewX(0deg) translateX(0px)"}},"scale-x":{from:{transform:"scaleX(0)"},to:{transform:"scaleX(1)"}},"scale-y":{from:{transform:"scaleY(0)"},to:{transform:"scaleY(1)"}},shimmer:{from:{opacity:.5,filter:"brightness(1)"},to:{opacity:1,filter:"brightness(1.5)"}},pulse:{from:{transform:"scale(1)"},to:{transform:"scale(1.05)"}},swing:{from:{transform:"rotate(-10deg)"},to:{transform:"rotate(10deg)"}},"scale-up":{from:{opacity:0,transform:"scale(0.5)"},to:{opacity:1,transform:"scale(1)"}},"blur-in-up":{from:{opacity:0,filter:"blur(12px)",transform:"translateY(40px)"},to:{opacity:1,filter:"blur(0px)",transform:"translateY(0px)"}},"flip-up":{from:{opacity:0,transform:"perspective(800px) rotateX(60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"flip-down":{from:{opacity:0,transform:"perspective(800px) rotateX(-60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"rotate-left":{from:{opacity:0,transform:"rotate(-15deg) translateX(-40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"rotate-right":{from:{opacity:0,transform:"rotate(15deg) translateX(40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"clip-up":{from:{clipPath:"inset(100% 0% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-down":{from:{clipPath:"inset(0% 0% 100% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-left":{from:{clipPath:"inset(0% 0% 0% 100%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-right":{from:{clipPath:"inset(0% 100% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-circle":{from:{clipPath:"circle(0% at 50% 50%)"},to:{clipPath:"circle(75% at 50% 50%)"}}};function n(e){if("string"==typeof e)return t[e.trim()]??t["fade-in-up"];if(Array.isArray(e)){const n={from:{},to:{}};return e.forEach(e=>{const r=t[e.trim()];r&&(Object.entries(r.from).forEach(([e,t])=>{"transform"===e&&n.from[e]?n.from[e]=`${n.from[e]} ${t}`:n.from[e]=t}),Object.entries(r.to).forEach(([e,t])=>{"transform"===e&&n.to[e]?n.to[e]=`${n.to[e]} ${t}`:n.to[e]=t}))}),n}return e}const r={linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)","soft-spring":"cubic-bezier(0.175, 0.885, 0.32, 1.275)","heavy-bounce":"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function o(e){return"string"==typeof e?r[e]??e:Array.isArray(e)?`cubic-bezier(${e.join(", ")})`:"function"==typeof e?"linear":"ease"}const a={defaultAnimation:"fade-in-up",defaultDuration:600,defaultDelay:0,defaultEasing:"ease",defaultThreshold:.1,defaultRootMargin:"0px",defaultRepeat:!1,defaultOnce:!0,defaultOffset:0,hiddenClass:"sa-hidden",visibleClass:"sa-visible",useClassNames:!1,disabled:!1,root:null,autoUnregister:!0,defaultEngine:"auto"},s=()=>{},i=()=>"undefined"!=typeof window&&"undefined"!=typeof document,c=()=>i()&&"undefined"!=typeof IntersectionObserver;let l,f;function u(){return!!i()&&(void 0===l&&(l="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!l&&l.matches)}function d(){return void 0===f&&(f=i()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),f}function m(e){if(void 0===e||""===e.trim())return;const t=parseFloat(e);return Number.isFinite(t)?t:void 0}const p=["entry 0%","entry 100%"];function g(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function h(e,t){return y(function(e){const t={},n=e("animation");n&&(t.animation=n.includes(",")?n.split(",").map(e=>e.trim()):n.trim()),t.duration=m(e("duration")),t.delay=m(e("delay"));const r=e("easing");if(r){const e=r.trim();if(e.startsWith("["))try{t.easing=JSON.parse(e)}catch{}else t.easing=e}const o=e("threshold");o&&(t.threshold=o.includes(",")?o.split(",").map(parseFloat).filter(Number.isFinite):m(o));const a=e("root-margin");a&&(t.rootMargin=a);const s=e("repeat");void 0!==s&&(t.repeat="false"!==s);const i=e("once");void 0!==i&&(t.once="false"!==i),t.offset=m(e("offset")),t.stagger=m(e("stagger"));const c=e("progress-var");void 0!==c&&(t.progressVar=g(c));const l=e("engine")?.trim();"auto"!==l&&"js"!==l&&"css"!==l||(t.engine=l);const f=e("view-range");if(f){const[e,n]=f.split(",").map(e=>e.trim());e&&n&&(t.viewRange=[e,n])}const u=e("exit");if(void 0!==u){const e=u.trim();t.exit=""===e||"true"===e||"false"!==e&&(e.includes(",")?e.split(",").map(e=>e.trim()):e)}const d=e("progress");return d&&(t.progressMode="scroll"===d.trim()?"scroll":"ratio"),Object.keys(t).forEach(e=>void 0===t[e]&&delete t[e]),t}(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),t)}function y(e,t){let n=e.engine??t.defaultEngine;"auto"===n&&(void 0!==e.duration||void 0!==e.delay||void 0!==e.offset||(e.stagger??0)>0)&&(n="js");const r=e.exit??!1,o=e.repeat??(!!r||t.defaultRepeat),a=e.threshold??t.defaultThreshold;return{animation:e.animation??t.defaultAnimation,duration:e.duration??t.defaultDuration,delay:e.delay??t.defaultDelay,easing:e.easing??t.defaultEasing,threshold:Array.isArray(a)&&0===a.length?t.defaultThreshold:a,rootMargin:e.rootMargin??t.defaultRootMargin,repeat:o,once:e.once??(!o&&t.defaultOnce),offset:e.offset??t.defaultOffset,stagger:e.stagger??0,onStart:e.onStart??s,onComplete:e.onComplete??s,onEnter:e.onEnter??s,onLeave:e.onLeave??s,onProgress:e.onProgress??s,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?g(e.progressVar):"",engine:n,viewRange:e.viewRange??p,exit:r}}function b(e){return e&&i()?"string"==typeof e?Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.isArray(e)||e instanceof NodeList?Array.from(e).filter(e=>e instanceof Element):[]:[]}function v(e,t){if(!i())return 0;const n=e.getBoundingClientRect();let r=0,o=window.innerHeight||document.documentElement.clientHeight||0;if(t){const e=t.getBoundingClientRect();r=e.top,o=e.height}const a=o+n.height;if(a<=0)return 0;const s=(r+o-n.top)/a;return s<0?0:s>1?1:s}const w=new WeakMap,x=new WeakMap,E=new WeakMap;function S(e){const t=x.get(e);t&&(x.delete(e),t.cancel());const n=w.get(e);n&&(w.delete(e),n.onfinish=null,n.cancel());const r=E.get(e);void 0!==r&&(clearTimeout(r),E.delete(e))}function M(e,t){const n=e.style;n&&Object.keys(t).forEach(e=>{n[e]=String(t[e])})}const C=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let A,O;function P(e,t){if("function"!=typeof t)return{keyframes:[e.from,e.to],easing:o(t)};const n=function(e){const t=[];for(let n=0;n<=30;n++){const r=e(n/30);t.push(Number.isFinite(r)?+r.toFixed(4):n/30)}return t}(t);if(void 0===A&&(A="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),A)return{keyframes:[e.from,e.to],easing:`linear(${n.join(", ")})`};const r=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:n.map((t,n)=>{const o={offset:n/30};return r.forEach(n=>{o[n]=function(e,t,n){if("number"==typeof e&&"number"==typeof t)return e+(t-e)*n;const r=String(e),o=String(t),a=[],s=[],i=r.replace(C,(e,t,n)=>(a.push([parseFloat(t),n]),"#"));if(i!==o.replace(C,(e,t,n)=>(s.push([parseFloat(t),n]),"#"))||a.length!==s.length)return n<.5?e:t;let c=0,l=!0;const f=i.replace(/#/g,()=>{const[e,t]=a[c],[r,o]=s[c++];t!==o&&0!==e&&0!==r&&t&&o&&(l=!1);const i=t||o;return`${+(e+(r-e)*n).toFixed(4)}${i}`});return l?f:n<.5?e:t}(e.from[n],e.to[n],t)}),o}),easing:"linear"}}function $(e,t){if(S(e),t.useClassNames)e.classList.remove(t.hiddenClass),e.classList.add(t.visibleClass);else{const t=e.style;t&&(t.opacity="")}}function k(e){return!!e.disabled||u()}function T(e,t,r,o=0,a){const{duration:s,delay:i,stagger:c,onStart:l,onComplete:f}=t,u=Math.max(0,i+o*c);if(S(e),k(r))return $(e,r),l(e),void f(e);if(r.useClassNames)return u>0&&(e.style.animationDelay=`${u}ms`),e.classList.remove(r.hiddenClass),e.classList.add(r.visibleClass),l(e),a?.add(e),void E.set(e,setTimeout(()=>{E.delete(e),a?.delete(e),f(e)},s+u));const d=n(t.animation);if(!("opacity"in d.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return M(e,d.to),l(e),void f(e);const m=P(d,t.easing),p={duration:s,delay:u,easing:m.easing,fill:"both"};let g;try{g=e.animate(m.keyframes,p)}catch{g=e.animate(m.keyframes,{...p,easing:"ease"})}w.set(e,g),l(e),g.onfinish=()=>{if(w.get(e)===g){w.delete(e);try{g.commitStyles()}catch{M(e,d.to)}g.cancel()}f(e)}}function X(e,t){if(S(e),t.useClassNames)e.classList.add(t.hiddenClass),e.classList.remove(t.visibleClass);else{const t=e.style;t&&(t.opacity="0")}}function j(e,t={}){const n={...a,...t};k(n)||X(e,n)}function z(){if(!O){O=[];for(let e=0;e<=100;e++)O.push(e/100)}return O}const N={passive:!0};function L(e={}){let t={...a,...e};const r=new Map;let o=new WeakSet;const l=new Set;let f=0,u=null;const m=new Set,p=new Set,g=new Set,C=new Map;function A(e,t,n){let r=C.get(e);r||C.set(e,r=new Map);let o=r.get(t);return o||r.set(t,o=n()),o}function O(e,n){const o=r.get(e);o&&(o.observer.unobserve(e),o.progressObserver?.unobserve(e),r.delete(e),V(e),"css"!==o.engine?n&&!o.animated&&$(e,t):n?(g.delete(e),$(e,t)):!1===e.isConnected&&g.delete(e))}function j(){r.forEach((e,t)=>{!1===t.isConnected&&O(t,!1)})}function L(e,t,n){const r=t.options;if(r.onProgress(e,n),r.progressVar){const t=e.style;t&&t.setProperty(r.progressVar,String(+n.toFixed(4)))}}function F(){f=0,l.forEach(e=>{const n=r.get(e);n&&L(e,n,v(e,t.root))})}const Y=()=>f||(f=requestAnimationFrame(F));function R(e){if(e===!!u)return;const n=e?"addEventListener":"removeEventListener",r=u||t.root||window;r[n]("scroll",Y,N),window[n]("resize",Y,N),u=e?r:null,!e&&f&&(cancelAnimationFrame(f),f=0)}function V(e){l.delete(e)&&!l.size&&R(!1)}function I(e){e.forEach(e=>{const n=e.target,o=r.get(n);o&&(e.isIntersecting?(l.add(n),R(!0)):V(n),L(n,o,v(n,t.root)))})}function W(e){const a=new Map;e.forEach(e=>{const s=e.target,i=r.get(s);if(!i)return;const c=i.options;if(!1!==s.isConnected)if("css"!==i.engine)if(e.isIntersecting){if(c.onEnter(s),i.animated&&!c.repeat)return;let e=0;if(c.stagger>0){const t=s.parentElement;e=a.get(t)??0,a.set(t,e+1)}T(s,c,t,e,p),i.animated=!0,c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),O(s,!1)))}else c.onLeave(s),c.repeat&&i.animated&&(k(t)||(c.exit?function(e,t,r){if(r.useClassNames||"function"!=typeof e.animate)return void X(e,r);S(e);const o=n(!0===t.exit?t.animation:t.exit),a=P({from:o.to,to:o.from},t.easing),s={duration:t.duration,easing:a.easing,fill:"forwards"};let i;try{i=e.animate(a.keyframes,s)}catch{i=e.animate(a.keyframes,{...s,easing:"ease"})}w.set(e,i)}(s,c,t):X(s,t)),i.animated=!1);else e.isIntersecting?(c.onEnter(s),i.animated||(i.animated=!0,c.onStart(s)),c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),O(s,!1)))):(c.onLeave(s),c.repeat&&(i.animated=!1));else O(s,!1)})}function q(e){e.forEach(e=>{const t=r.get(e.target);t&&L(e.target,t,e.intersectionRatio)})}function D(e){const n=function(e,t){if(!t)return e;const n=(e||"0px").trim().split(/\s+/),r=n[0],o=n[1]??r,a=n[2]??r,s=n[3]??o,i=/^(-?\d*\.?\d+)(px)?$/.exec(a);return`${r} ${o} ${(i?parseFloat(i[1]):0)-t}px ${s}`}(e.rootMargin,e.offset),r=e.threshold,o=t.root;return A(o,`m|${n}|${String(r)}`,()=>new IntersectionObserver(W,{threshold:r,rootMargin:n,root:o}))}function H(e,n,r){var o;n.observer=D(n.options),r&&n.observer.observe(e),n.progressObserver=(o=n.options).onProgress!==s||o.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?A(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(I,{threshold:0,rootMargin:e.rootMargin,root:n})):A(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(q,{threshold:z(),rootMargin:e.rootMargin,root:n}))}(n.options):void 0,n.progressObserver?.observe(e)}function U(e,a){if(r.has(e)||o.has(e))return;if(!c())return void $(e,t);const s={element:e,options:a,animated:!1,engine:"js"};(function(e){return"js"!==e.engine&&!t.useClassNames&&!k(t)&&d()})(a)&&(S(e),function(e,t,r){if("function"!=typeof e.animate)return null;const o=n(t.animation),a=P(o,t.easing);let s;try{const n=new globalThis.ViewTimeline({subject:e,axis:"block"}),r={fill:"both",easing:a.easing,timeline:n,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{s=e.animate(a.keyframes,r)}catch{s=e.animate(a.keyframes,{...r,easing:"linear"})}}catch{return null}if(w.set(e,s),t.exit){const r=n(!0===t.exit?t.animation:t.exit),o=P({from:r.to,to:r.from},t.easing);try{const t=new globalThis.ViewTimeline({subject:e,axis:"block"}),n={fill:"forwards",easing:o.easing,timeline:t,rangeStart:"exit 0%",rangeEnd:"exit 100%"};x.set(e,e.animate(o.keyframes,n))}catch{}}const i=t.repeat||!t.once;return s.onfinish=()=>{if(!i&&w.get(e)===s){w.delete(e);try{s.commitStyles()}catch{M(e,o.to)}s.cancel(),r?.()}t.onComplete(e)},s}(e,a,()=>g.delete(e))&&(s.engine="css",g.add(e))),"js"!==s.engine||k(t)||X(e,t),r.set(e,s),H(e,s,!0)}function _(e){r.has(e)||U(e,h(e,t))}const B={observe(e,n={}){j();const r=y(n,t);b(e).forEach(e=>U(e,r))},unobserve(e){b(e).forEach(e=>{o.delete(e),O(e,!0)})},init(e){const t=e??(i()?document:null);t&&(j(),t.querySelectorAll("[data-sa]").forEach(_))},watch(e){const t=e??(i()?document:null);if(!t||"undefined"==typeof MutationObserver)return s;B.init(t);const n=e=>{e.hasAttribute("data-sa")&&_(e),e.querySelectorAll("[data-sa]").forEach(_)},r=new MutationObserver(e=>{let t=!1;e.forEach(e=>{if("attributes"===e.type){const t=e.target;return void(!1!==t.isConnected&&n(t))}e.addedNodes.forEach(e=>{e instanceof Element&&!1!==e.isConnected&&n(e)}),e.removedNodes.length&&(t=!0)}),t&&j()});return r.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),m.add(r),()=>{r.disconnect(),m.delete(r)}},destroy(){m.forEach(e=>e.disconnect()),m.clear(),p.forEach(e=>{const t=E.get(e);void 0!==t&&(clearTimeout(t),E.delete(e))}),p.clear(),r.forEach((e,n)=>{e.animated||"css"===e.engine||$(n,t)}),g.forEach(e=>{w.has(e)&&$(e,t)}),g.clear(),C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),r.clear(),l.clear(),R(!1),o=new WeakSet},refresh(){C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),l.clear(),R(!1),j(),c()&&r.forEach((e,t)=>{H(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const r=y(n,t);b(e).forEach(e=>T(e,r,t,0,p))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return B}let F=null;const Y={low:.6,normal:1,high:1.25},R="normal";function V(){return"function"==typeof matchMedia&&!!matchMedia("(prefers-reduced-motion: reduce)").matches}function I(e,t){if(t)for(const[n,r]of Object.entries(t))"offset"!==n&&"easing"!==n&&"composite"!==n&&null!=r&&(e.style[n]=String(r))}const W=new Map;let q=1,D=0,H=null;const U={frames:0,callbacks:0,peak:0,last:0},_=new Set;function B(e){D=0;const t=U.last&&e>U.last?e-U.last:16.7;U.last=e,U.frames++;const n=Array.from(W.values());W.clear(),U.callbacks+=n.length,U.peak=Math.max(U.peak,n.length);let r=null;for(const t of n)try{t(e)}catch(e){r??(r=e)}if(_.forEach(n=>n(e,t)),_.size&&G(),r)throw r}function G(){const e="function"==typeof requestAnimationFrame?requestAnimationFrame:null;D&&H===e||(H=e,D=e?e(B):setTimeout(()=>B(Z()),16))}const J=e=>{const t=q++;return W.set(t,e),G(),t},Z=()=>"undefined"!=typeof performance?performance.now():Date.now(),K=e=>{W.delete(e)},Q=(e,t,n)=>Math.min(n,Math.max(t,e));let ee={duration:{...(te={duration:{instant:0,fast:150,normal:300,slow:600,slower:900,slowest:1400},easing:{linear:"linear",standard:"cubic-bezier(0.2, 0, 0, 1)",emphasized:"cubic-bezier(0.22, 1, 0.36, 1)",decelerate:"cubic-bezier(0, 0, 0, 1)",accelerate:"cubic-bezier(0.3, 0, 1, 1)",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},spring:{gentle:{stiffness:120,damping:14,mass:1},snappy:{stiffness:300,damping:30,mass:1},bouncy:{stiffness:260,damping:12,mass:1},wobbly:{stiffness:180,damping:8,mass:1},stiff:{stiffness:500,damping:40,mass:1}}}).duration},easing:{...te.easing},spring:Object.fromEntries(Object.entries(te.spring).map(([e,t])=>[e,{...t}]))};var te;function ne(e){if("number"==typeof e&&isFinite(e))return e;if("object"==typeof e&&e&&"value"in e&&"unit"in e)return ne(`${e.value}${e.unit}`);const t=/^\s*(-?\d*\.?\d+)\s*(ms|s)?\s*$/.exec(String(e??""));return t?"s"===t[2]?1e3*Number(t[1]):Number(t[1]):void 0}function re(e,t){return"number"==typeof e?e:"string"==typeof e?ee.duration[e]??ne(e)??t:t}function oe(e,t){return e?ee.easing[e]??e:t}function ae(e="view"){const t=globalThis;return"function"==typeof t["scroll"===e?"ScrollTimeline":"ViewTimeline"]&&"function"==typeof t.Element?.prototype?.animate}const se=(e,t)=>Object.assign(e,{native:t}),ie={fade:[{opacity:0},{opacity:1}],"fade-up":[{opacity:0,transform:"translateY(24px)"},{opacity:1,transform:"none"}],"fade-down":[{opacity:0,transform:"translateY(-24px)"},{opacity:1,transform:"none"}],"fade-left":[{opacity:0,transform:"translateX(24px)"},{opacity:1,transform:"none"}],"fade-right":[{opacity:0,transform:"translateX(-24px)"},{opacity:1,transform:"none"}],scale:[{opacity:0,transform:"scale(0.85)"},{opacity:1,transform:"none"}],blur:[{opacity:0,filter:"blur(12px)"},{opacity:1,filter:"blur(0)"}],rotate:[{opacity:0,transform:"rotate(-12deg) scale(0.9)"},{opacity:1,transform:"none"}],"clip-up":[{clipPath:"inset(100% 0 0 0)"},{clipPath:"inset(0 0 0 0)"}],"clip-right":[{clipPath:"inset(0 100% 0 0)"},{clipPath:"inset(0 0 0 0)"}]};function ce(e,t,n,r={}){if(void 0===e||""===e||">"===e)return t;if("number"==typeof e)return Math.max(0,e);const o=String(e).trim();if(/^-?\d+(\.\d+)?$/.test(o))return Math.max(0,Number(o));const a=/^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(o);if(!a)return t;const s="<"===a[1]?n:">"!==a[1]&&a[1]?r[a[1]]??t:t,i=a[2]?("-"===a[2]?-1:1)*Number(a[3]):0;return Math.max(0,s+i)}const le={passive:!0};
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ScrollAnimate={})}(this,function(e){"use strict";const t=(e=>{const t=globalThis,n=Symbol.for("use-scroll-animate.presets");return t[n]=Object.assign(t[n]||{},e)})({"fade-in":{from:{opacity:0},to:{opacity:1}},"fade-in-up":{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-down":{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-left":{from:{opacity:0,transform:"translateX(-40px)"},to:{opacity:1,transform:"translateX(0px)"}},"fade-in-right":{from:{opacity:0,transform:"translateX(40px)"},to:{opacity:1,transform:"translateX(0px)"}},"zoom-in":{from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}},"zoom-out":{from:{opacity:0,transform:"scale(1.2)"},to:{opacity:1,transform:"scale(1)"}},"flip-x":{from:{opacity:0,transform:"rotateX(-90deg)"},to:{opacity:1,transform:"rotateX(0deg)"}},"flip-y":{from:{opacity:0,transform:"rotateY(-90deg)"},to:{opacity:1,transform:"rotateY(0deg)"}},"slide-up":{from:{transform:"translateY(100%)"},to:{transform:"translateY(0px)"}},"slide-down":{from:{transform:"translateY(-100%)"},to:{transform:"translateY(0px)"}},"slide-left":{from:{transform:"translateX(-100%)"},to:{transform:"translateX(0px)"}},"slide-right":{from:{transform:"translateX(100%)"},to:{transform:"translateX(0px)"}},bounce:{from:{opacity:0,transform:"translateY(-60px)"},to:{opacity:1,transform:"translateY(0px)"}},"rotate-in":{from:{opacity:0,transform:"rotate(-180deg) scale(0.5)"},to:{opacity:1,transform:"rotate(0deg) scale(1)"}},"blur-in":{from:{opacity:0,filter:"blur(12px)"},to:{opacity:1,filter:"blur(0px)"}},"skew-in":{from:{opacity:0,transform:"skewX(20deg) translateX(30px)"},to:{opacity:1,transform:"skewX(0deg) translateX(0px)"}},"scale-x":{from:{transform:"scaleX(0)"},to:{transform:"scaleX(1)"}},"scale-y":{from:{transform:"scaleY(0)"},to:{transform:"scaleY(1)"}},shimmer:{from:{opacity:.5,filter:"brightness(1)"},to:{opacity:1,filter:"brightness(1.5)"}},pulse:{from:{transform:"scale(1)"},to:{transform:"scale(1.05)"}},swing:{from:{transform:"rotate(-10deg)"},to:{transform:"rotate(10deg)"}},"scale-up":{from:{opacity:0,transform:"scale(0.5)"},to:{opacity:1,transform:"scale(1)"}},"blur-in-up":{from:{opacity:0,filter:"blur(12px)",transform:"translateY(40px)"},to:{opacity:1,filter:"blur(0px)",transform:"translateY(0px)"}},"flip-up":{from:{opacity:0,transform:"perspective(800px) rotateX(60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"flip-down":{from:{opacity:0,transform:"perspective(800px) rotateX(-60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"rotate-left":{from:{opacity:0,transform:"rotate(-15deg) translateX(-40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"rotate-right":{from:{opacity:0,transform:"rotate(15deg) translateX(40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"clip-up":{from:{clipPath:"inset(100% 0% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-down":{from:{clipPath:"inset(0% 0% 100% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-left":{from:{clipPath:"inset(0% 0% 0% 100%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-right":{from:{clipPath:"inset(0% 100% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-circle":{from:{clipPath:"circle(0% at 50% 50%)"},to:{clipPath:"circle(75% at 50% 50%)"}}});function n(e){return{from:e.to,to:e.from,frames:e.frames&&e.frames.map(e=>({...e,offset:1-e.offset})).reverse()}}const r=e=>t[e.trim()];function o(e){if("string"==typeof e)return r(e)??t["fade-in-up"];if(Array.isArray(e)){const t={from:{},to:{}};return e.forEach(e=>{const n=r(e);n&&(Object.entries(n.from).forEach(([e,n])=>{"transform"===e&&t.from[e]?t.from[e]=`${t.from[e]} ${n}`:t.from[e]=n}),Object.entries(n.to).forEach(([e,n])=>{"transform"===e&&t.to[e]?t.to[e]=`${t.to[e]} ${n}`:t.to[e]=n}))}),t}return e}const a={linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)","soft-spring":"cubic-bezier(0.175, 0.885, 0.32, 1.275)","heavy-bounce":"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function s(e){return"string"==typeof e?a[e]??e:Array.isArray(e)?`cubic-bezier(${e.join(", ")})`:"function"==typeof e?"linear":"ease"}const i={defaultAnimation:"fade-in-up",defaultDuration:600,defaultDelay:0,defaultEasing:"ease",defaultThreshold:.1,defaultRootMargin:"0px",defaultRepeat:!1,defaultOnce:!0,defaultOffset:0,hiddenClass:"sa-hidden",visibleClass:"sa-visible",useClassNames:!1,disabled:!1,root:null,autoUnregister:!0,defaultEngine:"auto"},c=()=>{},l=()=>"undefined"!=typeof window&&"undefined"!=typeof document,f=()=>l()&&"undefined"!=typeof IntersectionObserver;let u,d;function m(){return!!l()&&(void 0===u&&(u="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!u&&u.matches)}function p(){return void 0===d&&(d=l()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),d}function g(e){if(void 0===e||""===e.trim())return;const t=parseFloat(e);return Number.isFinite(t)?t:void 0}const h=["entry 0%","entry 100%"];function y(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function b(e,t){return v(function(e){const t={},n=e("animation");n&&(t.animation=n.includes(",")?n.split(",").map(e=>e.trim()):n.trim()),t.duration=g(e("duration")),t.delay=g(e("delay"));const r=e("easing");if(r){const e=r.trim();if(e.startsWith("["))try{t.easing=JSON.parse(e)}catch{}else t.easing=e}const o=e("threshold");o&&(t.threshold=o.includes(",")?o.split(",").map(parseFloat).filter(Number.isFinite):g(o));const a=e("root-margin");a&&(t.rootMargin=a);const s=e("repeat");void 0!==s&&(t.repeat="false"!==s);const i=e("once");void 0!==i&&(t.once="false"!==i),t.offset=g(e("offset")),t.stagger=g(e("stagger"));const c=e("progress-var");void 0!==c&&(t.progressVar=y(c));const l=e("engine")?.trim();"auto"!==l&&"js"!==l&&"css"!==l||(t.engine=l);const f=e("view-range");if(f){const[e,n]=f.split(",").map(e=>e.trim());e&&n&&(t.viewRange=[e,n])}const u=e("exit");if(void 0!==u){const e=u.trim();t.exit=""===e||"true"===e||"false"!==e&&(e.includes(",")?e.split(",").map(e=>e.trim()):e)}const d=e("progress");return d&&(t.progressMode="scroll"===d.trim()?"scroll":"ratio"),Object.keys(t).forEach(e=>void 0===t[e]&&delete t[e]),t}(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),t)}function v(e,t){let n=e.engine??t.defaultEngine;"auto"===n&&(void 0!==e.duration||void 0!==e.delay||void 0!==e.offset||(e.stagger??0)>0)&&(n="js");const r=e.exit??!1,o=e.repeat??(!!r||t.defaultRepeat),a=e.threshold??t.defaultThreshold;return{animation:e.animation??t.defaultAnimation,duration:e.duration??t.defaultDuration,delay:e.delay??t.defaultDelay,easing:e.easing??t.defaultEasing,threshold:Array.isArray(a)&&0===a.length?t.defaultThreshold:a,rootMargin:e.rootMargin??t.defaultRootMargin,repeat:o,once:e.once??(!o&&t.defaultOnce),offset:e.offset??t.defaultOffset,stagger:e.stagger??0,onStart:e.onStart??c,onComplete:e.onComplete??c,onEnter:e.onEnter??c,onLeave:e.onLeave??c,onProgress:e.onProgress??c,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?y(e.progressVar):"",engine:n,viewRange:e.viewRange??h,exit:r}}function w(e){return e&&l()?"string"==typeof e?Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.isArray(e)||e instanceof NodeList?Array.from(e).filter(e=>e instanceof Element):[]:[]}function x(e,t){if(!l())return 0;const n=e.getBoundingClientRect();let r=0,o=window.innerHeight||document.documentElement.clientHeight||0;if(t){const e=t.getBoundingClientRect();r=e.top,o=e.height}const a=o+n.height;if(a<=0)return 0;const s=(r+o-n.top)/a;return s<0?0:s>1?1:s}const E=new WeakMap,S=new WeakMap,M=new WeakMap;function C(e){const t=S.get(e);t&&(S.delete(e),t.cancel());const n=E.get(e);n&&(E.delete(e),n.onfinish=null,n.cancel());const r=M.get(e);void 0!==r&&(clearTimeout(r),M.delete(e))}function O(e,t){const n=e.style;n&&Object.keys(t).forEach(e=>{n[e]=String(t[e])})}const P=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let A,$;function k(){return void 0===A&&(A="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),A}function T(e,t){const n=[e.from,...e.frames||[],e.to];if("function"!=typeof t)return{keyframes:n,easing:s(t)};const r=function(e){const t=[];for(let n=0;n<=30;n++){const r=e(n/30);t.push(Number.isFinite(r)?+r.toFixed(4):n/30)}return t}(t);if(k()||e.frames)return{keyframes:n,easing:k()?`linear(${r.join(", ")})`:"ease"};const o=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:r.map((t,n)=>{const r={offset:n/30};return o.forEach(n=>{r[n]=function(e,t,n){if("number"==typeof e&&"number"==typeof t)return e+(t-e)*n;const r=String(e),o=String(t),a=[],s=[],i=r.replace(P,(e,t,n)=>(a.push([parseFloat(t),n]),"#"));if(i!==o.replace(P,(e,t,n)=>(s.push([parseFloat(t),n]),"#"))||a.length!==s.length)return n<.5?e:t;let c=0,l=!0;const f=i.replace(/#/g,()=>{const[e,t]=a[c],[r,o]=s[c++];t!==o&&0!==e&&0!==r&&t&&o&&(l=!1);const i=t||o;return`${+(e+(r-e)*n).toFixed(4)}${i}`});return l?f:n<.5?e:t}(e.from[n],e.to[n],t)}),r}),easing:"linear"}}function j(e,t){if(C(e),t.useClassNames)e.classList.remove(t.hiddenClass),e.classList.add(t.visibleClass);else{const t=e.style;t&&(t.opacity="")}}function X(e){return!!e.disabled||m()}function z(e,t,n,r=0,a){const{duration:s,delay:i,stagger:c,onStart:l,onComplete:f}=t,u=Math.max(0,i+r*c);if(C(e),X(n))return j(e,n),l(e),void f(e);if(n.useClassNames)return u>0&&(e.style.animationDelay=`${u}ms`),e.classList.remove(n.hiddenClass),e.classList.add(n.visibleClass),l(e),a?.add(e),void M.set(e,setTimeout(()=>{M.delete(e),a?.delete(e),f(e)},s+u));const d=o(t.animation);if(!("opacity"in d.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return O(e,d.to),l(e),void f(e);const m=T(d,t.easing),p={duration:s,delay:u,easing:m.easing,fill:"both"};let g;try{g=e.animate(m.keyframes,p)}catch{g=e.animate(m.keyframes,{...p,easing:"ease"})}E.set(e,g),l(e),g.onfinish=()=>{if(E.get(e)===g){E.delete(e);try{g.commitStyles()}catch{O(e,d.to)}g.cancel()}f(e)}}function N(e,t){if(C(e),t.useClassNames)e.classList.add(t.hiddenClass),e.classList.remove(t.visibleClass);else{const t=e.style;t&&(t.opacity="0")}}function L(e,t={}){const n={...i,...t};X(n)||N(e,n)}function F(){if(!$){$=[];for(let e=0;e<=100;e++)$.push(e/100)}return $}const Y={passive:!0};function R(e={}){let t={...i,...e};const r=new Map;let a=new WeakSet;const s=new Set;let u=0,d=null;const m=new Set,g=new Set,h=new Set,y=new Map;function P(e,t,n){let r=y.get(e);r||y.set(e,r=new Map);let o=r.get(t);return o||r.set(t,o=n()),o}function A(e,n){const o=r.get(e);o&&(o.observer.unobserve(e),o.progressObserver?.unobserve(e),r.delete(e),I(e),"css"!==o.engine?n&&!o.animated&&j(e,t):n?(h.delete(e),j(e,t)):!1===e.isConnected&&h.delete(e))}function $(){r.forEach((e,t)=>{!1===t.isConnected&&A(t,!1)})}function k(e,t,n){const r=t.options;if(r.onProgress(e,n),r.progressVar){const t=e.style;t&&t.setProperty(r.progressVar,String(+n.toFixed(4)))}}function L(){u=0,s.forEach(e=>{const n=r.get(e);n&&k(e,n,x(e,t.root))})}const R=()=>u||(u=requestAnimationFrame(L));function V(e){if(e===!!d)return;const n=e?"addEventListener":"removeEventListener",r=d||t.root||window;r[n]("scroll",R,Y),window[n]("resize",R,Y),d=e?r:null,!e&&u&&(cancelAnimationFrame(u),u=0)}function I(e){s.delete(e)&&!s.size&&V(!1)}function W(e){e.forEach(e=>{const n=e.target,o=r.get(n);o&&(e.isIntersecting?(s.add(n),V(!0)):I(n),k(n,o,x(n,t.root)))})}function q(e){const s=new Map;e.forEach(e=>{const i=e.target,c=r.get(i);if(!c)return;const l=c.options;if(!1!==i.isConnected)if("css"!==c.engine)if(e.isIntersecting){if(l.onEnter(i),c.animated&&!l.repeat)return;let e=0;if(l.stagger>0){const t=i.parentElement;e=s.get(t)??0,s.set(t,e+1)}z(i,l,t,e,g),c.animated=!0,l.once&&!l.repeat&&(c.observer.unobserve(i),t.autoUnregister&&!c.progressObserver&&(a.add(i),A(i,!1)))}else l.onLeave(i),l.repeat&&c.animated&&(X(t)||(l.exit?function(e,t,r){if(r.useClassNames||"function"!=typeof e.animate)return void N(e,r);C(e);const a=T(n(o(!0===t.exit?t.animation:t.exit)),t.easing),s={duration:t.duration,easing:a.easing,fill:"forwards"};let i;try{i=e.animate(a.keyframes,s)}catch{i=e.animate(a.keyframes,{...s,easing:"ease"})}E.set(e,i)}(i,l,t):N(i,t)),c.animated=!1);else e.isIntersecting?(l.onEnter(i),c.animated||(c.animated=!0,l.onStart(i)),l.once&&!l.repeat&&(c.observer.unobserve(i),t.autoUnregister&&!c.progressObserver&&(a.add(i),A(i,!1)))):(l.onLeave(i),l.repeat&&(c.animated=!1));else A(i,!1)})}function D(e){e.forEach(e=>{const t=r.get(e.target);t&&k(e.target,t,e.intersectionRatio)})}function H(e){const n=function(e,t){if(!t)return e;const n=(e||"0px").trim().split(/\s+/),r=n[0],o=n[1]??r,a=n[2]??r,s=n[3]??o,i=/^(-?\d*\.?\d+)(px)?$/.exec(a);return`${r} ${o} ${(i?parseFloat(i[1]):0)-t}px ${s}`}(e.rootMargin,e.offset),r=e.threshold,o=t.root;return P(o,`m|${n}|${String(r)}`,()=>new IntersectionObserver(q,{threshold:r,rootMargin:n,root:o}))}function U(e,n,r){var o;n.observer=H(n.options),r&&n.observer.observe(e),n.progressObserver=(o=n.options).onProgress!==c||o.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?P(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(W,{threshold:0,rootMargin:e.rootMargin,root:n})):P(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(D,{threshold:F(),rootMargin:e.rootMargin,root:n}))}(n.options):void 0,n.progressObserver?.observe(e)}function _(e,s){if(r.has(e)||a.has(e))return;if(!f())return void j(e,t);const i={element:e,options:s,animated:!1,engine:"js"};(function(e){return"js"!==e.engine&&!t.useClassNames&&!X(t)&&p()})(s)&&(C(e),function(e,t,r){if("function"!=typeof e.animate)return null;const a=o(t.animation),s=T(a,t.easing);let i;try{const n=new globalThis.ViewTimeline({subject:e,axis:"block"}),r={fill:"both",easing:s.easing,timeline:n,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{i=e.animate(s.keyframes,r)}catch{i=e.animate(s.keyframes,{...r,easing:"linear"})}}catch{return null}if(E.set(e,i),t.exit){const r=T(n(o(!0===t.exit?t.animation:t.exit)),t.easing);try{const t=new globalThis.ViewTimeline({subject:e,axis:"block"}),n={fill:"forwards",easing:r.easing,timeline:t,rangeStart:"exit 0%",rangeEnd:"exit 100%"};S.set(e,e.animate(r.keyframes,n))}catch{}}const c=t.repeat||!t.once;return i.onfinish=()=>{if(!c&&E.get(e)===i){E.delete(e);try{i.commitStyles()}catch{O(e,a.to)}i.cancel(),r?.()}t.onComplete(e)},i}(e,s,()=>h.delete(e))&&(i.engine="css",h.add(e))),"js"!==i.engine||X(t)||N(e,t),r.set(e,i),U(e,i,!0)}function B(e){r.has(e)||_(e,b(e,t))}const G={observe(e,n={}){$();const r=v(n,t);w(e).forEach(e=>_(e,r))},unobserve(e){w(e).forEach(e=>{a.delete(e),A(e,!0)})},init(e){const t=e??(l()?document:null);t&&($(),t.querySelectorAll("[data-sa]").forEach(B))},watch(e){const t=e??(l()?document:null);if(!t||"undefined"==typeof MutationObserver)return c;G.init(t);const n=e=>{e.hasAttribute("data-sa")&&B(e),e.querySelectorAll("[data-sa]").forEach(B)},r=new MutationObserver(e=>{let t=!1;e.forEach(e=>{if("attributes"===e.type){const t=e.target;return void(!1!==t.isConnected&&n(t))}e.addedNodes.forEach(e=>{e instanceof Element&&!1!==e.isConnected&&n(e)}),e.removedNodes.length&&(t=!0)}),t&&$()});return r.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),m.add(r),()=>{r.disconnect(),m.delete(r)}},destroy(){m.forEach(e=>e.disconnect()),m.clear(),g.forEach(e=>{const t=M.get(e);void 0!==t&&(clearTimeout(t),M.delete(e))}),g.clear(),r.forEach((e,n)=>{e.animated||"css"===e.engine||j(n,t)}),h.forEach(e=>{E.has(e)&&j(e,t)}),h.clear(),y.forEach(e=>e.forEach(e=>e.disconnect())),y.clear(),r.clear(),s.clear(),V(!1),a=new WeakSet},refresh(){y.forEach(e=>e.forEach(e=>e.disconnect())),y.clear(),s.clear(),V(!1),$(),f()&&r.forEach((e,t)=>{U(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const r=v(n,t);w(e).forEach(e=>z(e,r,t,0,g))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return G}let V=null;const I={low:.6,normal:1,high:1.25},W="normal";function q(){return"function"==typeof matchMedia&&!!matchMedia("(prefers-reduced-motion: reduce)").matches}function D(e,t){if(t)for(const[n,r]of Object.entries(t))"offset"!==n&&"easing"!==n&&"composite"!==n&&null!=r&&(e.style[n]=String(r))}const H=new Map;let U=1,_=0,B=null;const G={frames:0,callbacks:0,peak:0,last:0},J=new Set;function Z(e){_=0;const t=G.last&&e>G.last?e-G.last:16.7;G.last=e,G.frames++;const n=Array.from(H.values());H.clear(),G.callbacks+=n.length,G.peak=Math.max(G.peak,n.length);let r=null;for(const t of n)try{t(e)}catch(e){r??(r=e)}if(J.forEach(n=>n(e,t)),J.size&&K(),r)throw r}function K(){const e="function"==typeof requestAnimationFrame?requestAnimationFrame:null;_&&B===e||(B=e,_=e?e(Z):setTimeout(()=>Z(ee()),16))}const Q=e=>{const t=U++;return H.set(t,e),K(),t},ee=()=>"undefined"!=typeof performance?performance.now():Date.now(),te=e=>{H.delete(e)},ne=(e,t,n)=>Math.min(n,Math.max(t,e));let re={duration:{...(oe={duration:{instant:0,fast:150,normal:300,slow:600,slower:900,slowest:1400},easing:{linear:"linear",standard:"cubic-bezier(0.2, 0, 0, 1)",emphasized:"cubic-bezier(0.22, 1, 0.36, 1)",decelerate:"cubic-bezier(0, 0, 0, 1)",accelerate:"cubic-bezier(0.3, 0, 1, 1)",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},spring:{gentle:{stiffness:120,damping:14,mass:1},snappy:{stiffness:300,damping:30,mass:1},bouncy:{stiffness:260,damping:12,mass:1},wobbly:{stiffness:180,damping:8,mass:1},stiff:{stiffness:500,damping:40,mass:1}}}).duration},easing:{...oe.easing},spring:Object.fromEntries(Object.entries(oe.spring).map(([e,t])=>[e,{...t}]))};var oe;function ae(e){if("number"==typeof e&&isFinite(e))return e;if("object"==typeof e&&e&&"value"in e&&"unit"in e)return ae(`${e.value}${e.unit}`);const t=/^\s*(-?\d*\.?\d+)\s*(ms|s)?\s*$/.exec(String(e??""));return t?"s"===t[2]?1e3*Number(t[1]):Number(t[1]):void 0}function se(e,t){return"number"==typeof e?e:"string"==typeof e?re.duration[e]??ae(e)??t:t}function ie(e,t){return e?re.easing[e]??e:t}function ce(e="view"){const t=globalThis;return"function"==typeof t["scroll"===e?"ScrollTimeline":"ViewTimeline"]&&"function"==typeof t.Element?.prototype?.animate}const le=(e,t)=>Object.assign(e,{native:t}),fe={fade:[{opacity:0},{opacity:1}],"fade-up":[{opacity:0,transform:"translateY(24px)"},{opacity:1,transform:"none"}],"fade-down":[{opacity:0,transform:"translateY(-24px)"},{opacity:1,transform:"none"}],"fade-left":[{opacity:0,transform:"translateX(24px)"},{opacity:1,transform:"none"}],"fade-right":[{opacity:0,transform:"translateX(-24px)"},{opacity:1,transform:"none"}],scale:[{opacity:0,transform:"scale(0.85)"},{opacity:1,transform:"none"}],blur:[{opacity:0,filter:"blur(12px)"},{opacity:1,filter:"blur(0)"}],rotate:[{opacity:0,transform:"rotate(-12deg) scale(0.9)"},{opacity:1,transform:"none"}],"clip-up":[{clipPath:"inset(100% 0 0 0)"},{clipPath:"inset(0 0 0 0)"}],"clip-right":[{clipPath:"inset(0 100% 0 0)"},{clipPath:"inset(0 0 0 0)"}]};function ue(e,t,n,r={}){if(void 0===e||""===e||">"===e)return t;if("number"==typeof e)return Math.max(0,e);const o=String(e).trim();if(/^-?\d+(\.\d+)?$/.test(o))return Math.max(0,Number(o));const a=/^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(o);if(!a)return t;const s="<"===a[1]?n:">"!==a[1]&&a[1]?r[a[1]]??t:t,i=a[2]?("-"===a[2]?-1:1)*Number(a[3]):0;return Math.max(0,s+i)}const de={passive:!0};
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
3
|
+
* motionary
|
|
4
4
|
*
|
|
5
5
|
* A lightweight, dependency-free scroll animation library for modern web
|
|
6
6
|
* applications. Built with TypeScript, powered by IntersectionObserver and
|
|
7
7
|
* the Web Animations API (or the native scroll-driven timeline). Safe to
|
|
8
8
|
* import during SSR. Framework integrations live in the subpath entries:
|
|
9
|
-
* `
|
|
9
|
+
* `motionary/react`, `/vue`, `/svelte`, `/solid`, `/element`.
|
|
10
10
|
*
|
|
11
11
|
* @license MIT
|
|
12
|
-
* @see https://github.com/HarrisonCN/
|
|
12
|
+
* @see https://github.com/HarrisonCN/motionary
|
|
13
13
|
*/
|
|
14
|
-
const
|
|
14
|
+
const me=R();e.EASING_MAP=a,e.PRESETS=t,e.TIMELINE_PRESETS=fe,e.createScrollAnimate=R,e.default=me,e.getScrollProgress=x,e.parallax=function(e,t={}){const n=w(e);if(!n.length||!l()||!f())return()=>{};const{speed:r=.2,axis:o="y",root:a=null,respectReducedMotion:s=!0}=t,i=t.progressVar?t.progressVar.startsWith("--")?t.progressVar:`--${t.progressVar}`:"--sa-parallax",c="x"===o?"vw":"vh",u=new Set;let d=0,p=!1;const g=a||window,h=e=>{const t=e.style;if(!t)return;const n=x(e,a);if(t.setProperty(i,String(+n.toFixed(4))),s&&m())return void t.removeProperty("translate");const l=`${+((n-.5)*r*100).toFixed(3)}${c}`;t.setProperty("translate","x"===o?`${l} 0px`:`0px ${l}`)},y=()=>{d=0,u.forEach(h)},b=()=>{d||(d=requestAnimationFrame(y))},v=e=>{if(e===p)return;p=e;const t=e?"addEventListener":"removeEventListener";g[t]("scroll",b,de),window[t]("resize",b,de),!e&&d&&(cancelAnimationFrame(d),d=0)},E=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?u.add(e.target):u.delete(e.target),h(e.target)}),v(u.size>0)},{threshold:0,root:a});return n.forEach(e=>{h(e),E.observe(e)}),()=>{E.disconnect(),v(!1),u.clear(),n.forEach(e=>{const t=e.style;t&&(t.removeProperty("translate"),t.removeProperty(i))})}},e.registerPresets=function(e){Object.assign(t,e)},e.resolveEasing=s,e.resolvePosition=ue,e.resolvePreset=o,e.reversePreset=n,e.staggerChildren=function(e,t={},n){if(!e||!l()||!f())return()=>{};const r=n||V||(V=R()),{stagger:o=80,delay:a=0,threshold:s=.1,rootMargin:c="0px",observeChildren:u=!1,...d}=t;let m=Array.from(e.children),p=!1;const g=[];m.forEach(e=>L(e));const h=new IntersectionObserver(t=>{!p&&t.some(e=>e.isIntersecting)&&(p=!0,h.disconnect(),m.forEach((t,n)=>{t.parentNode===e&&r.animate(t,{...d,delay:a+n*o})}),m=[])},{threshold:s,rootMargin:c});let y;return h.observe(e),u&&"undefined"!=typeof MutationObserver&&(y=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&t.parentNode===e&&(p?(g.push(t),r.observe(t,{...d,delay:a,stagger:o,threshold:s,rootMargin:c})):(L(t),m.push(t)))}),t.removedNodes.forEach(e=>{if(!(e instanceof Element))return;m=m.filter(t=>t!==e);const t=g.indexOf(e);t>=0&&(g.splice(t,1),r.unobserve(e))})})}),y.observe(e,{childList:!0})),()=>{h.disconnect(),y?.disconnect(),p||(p=!0,m.forEach(e=>function(e,t={}){j(e,{...i,...t})}(e)),m=[]),g.forEach(e=>r.unobserve(e)),g.length=0}},e.supportsNativeScrub=ce,e.supportsScrollTimeline=p,e.timeline=function(e={}){const t={duration:600,easing:"cubic-bezier(0.22, 1, 0.36, 1)",stagger:0,...e.defaults},n=[],r=[],o={};let a,s=0,i=0,c=0,l=0,f=1,u=!1;const d=()=>Math.max(s,...r.map(e=>e.at),0),m=(t,o)=>{(()=>{if(!u){u=!0;for(const e of n)"function"==typeof e.el.animate?(e.anim=e.el.animate(e.frames,{duration:e.duration,delay:e.start,easing:e.easing,fill:"both"}),e.anim.pause?.()):e.anim=null}})(),c=ne(t,0,d());for(const e of n)e.anim?e.anim.currentTime=c:D(e.el,e.frames[c>=e.start?e.frames.length-1:0]);for(const e of r)(o<e.at&&c>=e.at||o>e.at&&c<=e.at)&&e.fn();e.onUpdate?.(d()?c/d():1)},p=()=>{l&&te(l),l=0},g=t=>{p(),a?.(),f=t;const n=f>0?d():0,r=I[W];if(q()||0===r||!d())return m(n,c),e.onComplete?.(),Promise.resolve();const o=(e.speed??1)/r;return new Promise(t=>{a=()=>{a=void 0,t()};let r=ee();const s=()=>{const t=ee(),i=c+(t-r)*o*f;if(r=t,m(i,c),f>0&&c>=n||f<0&&c<=0)return l=0,e.onComplete?.(),void a?.();l=Q(s)};l=Q(s)})},h={get duration(){return d()},get labels(){return{...o}},get time(){return c},to(e,r,a={}){const c="string"==typeof r?fe[r]||fe.fade:r,l=ue(a.at,s,i,o),f=se(a.duration??t.duration,600),d=a.stagger??t.stagger;let m=l;return(e=>"string"==typeof e?"undefined"==typeof document?[]:Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.from(e))(e).forEach((e,r)=>{const o=l+r*d;n.push({el:e,frames:c,start:o,duration:f,easing:ie(a.easing??t.easing,"cubic-bezier(0.22, 1, 0.36, 1)")}),m=Math.max(m,o+f)}),i=l,s=Math.max(s,m),u=!1,n.forEach(e=>e.anim?.cancel?.()),h},label:(e,t)=>(o[e]=ue(t,s,i,o),h),call:(e,t)=>(r.push({fn:e,at:ue(t,s,i,o)}),h),play:e=>(void 0!==e?m(ue(e,0,0,o),c):c>=d()&&m(0,-1),g(1)),reverse:()=>g(-1),pause:()=>(p(),h),seek:e=>(p(),m(ue(e,0,0,o),c),h),progress:e=>(void 0!==e&&h.seek(ne(e,0,1)*d()),d()?c/d():0),scrub(t,o={}){if(p(),q()||"undefined"==typeof window)return m(d(),c),le(()=>{},!1);const a=o.source??"view",s=o.axis??"block";if(!(!!o.smooth||!!o.offset||r.length>0||!!e.onUpdate||"js"===o.engine)&&d()>0&&ce(a)&&n.every(e=>"function"==typeof e.el.animate)){const e=globalThis,r="scroll"===a?new e.ScrollTimeline({source:t,axis:s}):new e.ViewTimeline({subject:t,axis:s}),o=d();n.forEach(e=>e.anim?.cancel?.()),u=!1;const i=e=>`${(e/o*100).toFixed(3)}%`,l=n.map(e=>{const t="view"===a?{rangeStart:`cover ${i(e.start)}`,rangeEnd:`cover ${i(e.start+e.duration)}`}:{},n={easing:e.easing,fill:"both",timeline:r,...t};return"scroll"===a&&Object.assign(n,{duration:"auto",rangeStart:i(e.start),rangeEnd:i(e.start+e.duration)}),e.el.animate(e.frames,n)});return le(()=>{l.forEach(e=>e.cancel()),m(c,c)},!0)}let i=0,l=c;const f="scroll"===a?t:null,g=()=>{i=0;const e=(()=>{const e="x"===s||"inline"===s;if(f){const t=e?f.scrollWidth-f.clientWidth:f.scrollHeight-f.clientHeight;return ne((e?f.scrollLeft:f.scrollTop)/(t||1),0,1)}const n=t.getBoundingClientRect(),r=(e?window.innerWidth:window.innerHeight)||1,a=e?n.left:n.top,i=e?n.width:n.height;return ne((r+(o.offset??0)-a)/(r+i||1),0,1)})()*d(),n=ne(o.smooth??0,0,.95);l=n?l+(e-l)*(1-n):e,m(l,c),n&&Math.abs(e-l)>.5&&(i=Q(g))},h=()=>{i||(i=Q(g))},y=f||window;return y.addEventListener("scroll",h,{passive:!0}),window.addEventListener("resize",h,{passive:!0}),g(),le(()=>{y.removeEventListener("scroll",h),window.removeEventListener("resize",h),i&&te(i)},!1)},cancel(){p(),a?.(),n.forEach(e=>e.anim?.cancel?.()),u=!1}};return h},Object.defineProperty(e,"__esModule",{value:!0})});
|
|
15
15
|
//# sourceMappingURL=index.umd.js.map
|