@hua-labs/motion-core 2.1.0 → 2.2.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/README.md +164 -92
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +23 -20
- package/dist/.tsbuildinfo +0 -1
package/README.md
CHANGED
|
@@ -1,92 +1,164 @@
|
|
|
1
|
-
# @hua-labs/motion-core
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
[](https://www.npmjs.com/package/@hua-labs/motion-core)
|
|
6
|
+
[](https://www.npmjs.com/package/@hua-labs/motion-core)
|
|
7
|
+
[](https://github.com/HUA-Labs/HUA-Labs-public/blob/main/LICENSE)
|
|
8
|
+
[](https://www.typescriptlang.org/)
|
|
9
|
+
[](https://reactjs.org/)
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- **35+ animation hooks — Fade, slide, scale, scroll, interactions, gestures**
|
|
14
|
+
- **Zero dependencies — Pure JavaScript motion engine**
|
|
15
|
+
- **Ref-based — Direct DOM manipulation for consistent performance**
|
|
16
|
+
- **SSR compatible — Works with Next.js, Remix, and SSR frameworks**
|
|
17
|
+
- **Fully tested — Comprehensive test coverage**
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
pnpm add @hua-labs/motion-core
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
> Peer dependencies: react >=19.0.0, react-dom >=19.0.0
|
|
26
|
+
|
|
27
|
+
## Quick Start
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { useFadeIn, useSlideUp } from '@hua-labs/motion-core';
|
|
31
|
+
|
|
32
|
+
function Hero() {
|
|
33
|
+
const fadeIn = useFadeIn({ duration: 800 });
|
|
34
|
+
const slideUp = useSlideUp({ delay: 200 });
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<div>
|
|
38
|
+
<h1 ref={fadeIn.ref} style={fadeIn.style}>Welcome</h1>
|
|
39
|
+
<p ref={slideUp.ref} style={slideUp.style}>Animated content</p>
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## API
|
|
47
|
+
|
|
48
|
+
| Export | Type | Description |
|
|
49
|
+
|--------|------|-------------|
|
|
50
|
+
| `MotionEngine` | component | |
|
|
51
|
+
| `motionEngine` | function | |
|
|
52
|
+
| `type MotionFrame` | function | |
|
|
53
|
+
| `type MotionOptions` | function | |
|
|
54
|
+
| `type Motion` | function | |
|
|
55
|
+
| `TransitionEffects` | component | |
|
|
56
|
+
| `transitionEffects` | function | |
|
|
57
|
+
| `type TransitionType` | function | |
|
|
58
|
+
| `type TransitionOptions` | function | |
|
|
59
|
+
| `PerformanceOptimizer` | component | |
|
|
60
|
+
| `performanceOptimizer` | function | |
|
|
61
|
+
| `type PerformanceOptimizerMetrics` | function | |
|
|
62
|
+
| `type OptimizationConfig` | function | |
|
|
63
|
+
| `useSimplePageMotion` | hook | |
|
|
64
|
+
| `usePageMotions` | hook | |
|
|
65
|
+
| `useSmartMotion` | hook | |
|
|
66
|
+
| `useUnifiedMotion` | hook | |
|
|
67
|
+
| `useFadeIn` | hook | Fade-in animation hook |
|
|
68
|
+
| `useSlideUp` | hook | Slide-up animation hook |
|
|
69
|
+
| `useSlideLeft` | hook | Slide-left animation hook |
|
|
70
|
+
| `useSlideRight` | hook | Slide-right animation hook |
|
|
71
|
+
| `useScaleIn` | hook | Scale-in animation hook |
|
|
72
|
+
| `useBounceIn` | hook | Bounce-in animation hook |
|
|
73
|
+
| `usePulse` | hook | |
|
|
74
|
+
| `useSpringMotion` | hook | |
|
|
75
|
+
| `useGradient` | hook | |
|
|
76
|
+
| `useHoverMotion` | hook | Hover interaction animation |
|
|
77
|
+
| `useClickToggle` | hook | |
|
|
78
|
+
| `useFocusToggle` | hook | |
|
|
79
|
+
| `useScrollReveal` | hook | Scroll-triggered reveal animation |
|
|
80
|
+
| `useScrollProgress` | hook | |
|
|
81
|
+
| `useMotionState` | hook | |
|
|
82
|
+
| `useRepeat` | hook | |
|
|
83
|
+
| `useToggleMotion` | hook | |
|
|
84
|
+
| `useSlideDown` | hook | |
|
|
85
|
+
| `useInView` | hook | |
|
|
86
|
+
| `useMouse` | hook | |
|
|
87
|
+
| `useReducedMotion` | hook | |
|
|
88
|
+
| `useWindowSize` | hook | |
|
|
89
|
+
| `useGesture` | hook | |
|
|
90
|
+
| `useGestureMotion` | hook | |
|
|
91
|
+
| `linear` | function | |
|
|
92
|
+
| `easeIn` | function | |
|
|
93
|
+
| `easeOut` | function | |
|
|
94
|
+
| `easeInOut` | function | |
|
|
95
|
+
| `easeInQuad` | function | |
|
|
96
|
+
| `easeOutQuad` | function | |
|
|
97
|
+
| `easeInOutQuad` | function | |
|
|
98
|
+
| `type EasingFunction` | function | |
|
|
99
|
+
| `type EasingType` | function | |
|
|
100
|
+
| `getEasing` | function | |
|
|
101
|
+
| `applyEasing` | function | |
|
|
102
|
+
| `safeApplyEasing` | function | |
|
|
103
|
+
| `isValidEasing` | function | |
|
|
104
|
+
| `getAvailableEasings` | function | |
|
|
105
|
+
| `isEasingFunction` | function | |
|
|
106
|
+
| `easingPresets` | function | |
|
|
107
|
+
| `getPresetEasing` | function | |
|
|
108
|
+
| `UseUnifiedMotionOptions` | type | |
|
|
109
|
+
| `PageType` | type | |
|
|
110
|
+
| `MotionType` | type | |
|
|
111
|
+
| `EntranceType` | type | |
|
|
112
|
+
| `PageMotionElement` | type | |
|
|
113
|
+
| `PageMotionsConfig` | type | |
|
|
114
|
+
| `MotionState` | type | |
|
|
115
|
+
| `PageMotionRef` | type | |
|
|
116
|
+
| `BaseMotionOptions` | type | |
|
|
117
|
+
| `BaseMotionReturn` | type | |
|
|
118
|
+
| `MotionElement` | type | |
|
|
119
|
+
| `MotionPreset` | type | |
|
|
120
|
+
| `PresetConfig` | type | |
|
|
121
|
+
| `SpringConfig` | type | |
|
|
122
|
+
| `GestureConfig` | type | |
|
|
123
|
+
| `OrchestrationConfig` | type | |
|
|
124
|
+
| `FadeInOptions` | type | |
|
|
125
|
+
| `SlideOptions` | type | |
|
|
126
|
+
| `ScaleOptions` | type | |
|
|
127
|
+
| `BounceOptions` | type | |
|
|
128
|
+
| `PulseOptions` | type | |
|
|
129
|
+
| `SpringOptions` | type | |
|
|
130
|
+
| `GestureOptions` | type | |
|
|
131
|
+
| `ScrollRevealOptions` | type | |
|
|
132
|
+
| `ScrollRevealMotionType` | type | |
|
|
133
|
+
| `GradientOptions` | type | |
|
|
134
|
+
| `ToggleMotionOptions` | type | |
|
|
135
|
+
| `RepeatOptions` | type | |
|
|
136
|
+
| `HoverMotionOptions` | type | |
|
|
137
|
+
| `InteractionReturn` | type | |
|
|
138
|
+
| `InViewOptions` | type | |
|
|
139
|
+
| `InViewReturn` | type | |
|
|
140
|
+
| `MouseOptions` | type | |
|
|
141
|
+
| `MouseReturn` | type | |
|
|
142
|
+
| `ReducedMotionReturn` | type | |
|
|
143
|
+
| `WindowSizeOptions` | type | |
|
|
144
|
+
| `WindowSizeReturn` | type | |
|
|
145
|
+
| `PerformanceMetrics` | type | |
|
|
146
|
+
| `MotionConfig` | type | |
|
|
147
|
+
| `MotionDirection` | type | |
|
|
148
|
+
| `MotionEasing` | type | |
|
|
149
|
+
| `MotionTrigger` | type | |
|
|
150
|
+
| `MotionCallback` | type | |
|
|
151
|
+
| `MotionProgressCallback` | type | |
|
|
152
|
+
| `MotionStateCallback` | type | |
|
|
153
|
+
|
|
154
|
+
## Documentation
|
|
155
|
+
|
|
156
|
+
[Full Documentation](https://docs.hua-labs.com)
|
|
157
|
+
|
|
158
|
+
## Related Packages
|
|
159
|
+
|
|
160
|
+
- [`@hua-labs/hua`](https://www.npmjs.com/package/@hua-labs/hua)
|
|
161
|
+
|
|
162
|
+
## License
|
|
163
|
+
|
|
164
|
+
MIT — [HUA Labs](https://hua-labs.com)
|
package/dist/index.d.mts
CHANGED
|
@@ -680,7 +680,7 @@ declare function useSmartMotion<T extends HTMLElement = HTMLDivElement>(options?
|
|
|
680
680
|
interface UseUnifiedMotionOptions extends Omit<BaseMotionOptions, 'autoStart'> {
|
|
681
681
|
/** Motion type to use */
|
|
682
682
|
type: EntranceType;
|
|
683
|
-
/** Auto start animation @default
|
|
683
|
+
/** Auto start animation @default true */
|
|
684
684
|
autoStart?: boolean;
|
|
685
685
|
/** Slide distance (px) for slide types @default 50 */
|
|
686
686
|
distance?: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -680,7 +680,7 @@ declare function useSmartMotion<T extends HTMLElement = HTMLDivElement>(options?
|
|
|
680
680
|
interface UseUnifiedMotionOptions extends Omit<BaseMotionOptions, 'autoStart'> {
|
|
681
681
|
/** Motion type to use */
|
|
682
682
|
type: EntranceType;
|
|
683
|
-
/** Auto start animation @default
|
|
683
|
+
/** Auto start animation @default true */
|
|
684
684
|
autoStart?: boolean;
|
|
685
685
|
/** Slide distance (px) for slide types @default 50 */
|
|
686
686
|
distance?: number;
|
package/dist/index.js
CHANGED
|
@@ -467,7 +467,14 @@ var TransitionEffects = class _TransitionEffects {
|
|
|
467
467
|
*/
|
|
468
468
|
enableGPUAcceleration(element) {
|
|
469
469
|
element.style.willChange = "transform, opacity";
|
|
470
|
-
element.style.transform
|
|
470
|
+
const currentTransform = element.style.transform;
|
|
471
|
+
if (currentTransform && currentTransform !== "none" && currentTransform !== "") {
|
|
472
|
+
if (!currentTransform.includes("translateZ")) {
|
|
473
|
+
element.style.transform = `${currentTransform} translateZ(0)`;
|
|
474
|
+
}
|
|
475
|
+
} else {
|
|
476
|
+
element.style.transform = "translateZ(0)";
|
|
477
|
+
}
|
|
471
478
|
}
|
|
472
479
|
/**
|
|
473
480
|
* 기본 이징 함수
|
|
@@ -1664,7 +1671,7 @@ function useUnifiedMotion(options) {
|
|
|
1664
1671
|
const {
|
|
1665
1672
|
type,
|
|
1666
1673
|
duration = 600,
|
|
1667
|
-
autoStart =
|
|
1674
|
+
autoStart = true,
|
|
1668
1675
|
delay = 0,
|
|
1669
1676
|
easing: easing2,
|
|
1670
1677
|
threshold = 0.1,
|