@hua-labs/motion-core 2.2.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 +119 -41
- package/dist/index.js +8 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +8 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -9
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,24 +1,20 @@
|
|
|
1
1
|
# @hua-labs/motion-core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A collection of 35+ React animation hooks built on a ref-based engine. Direct DOM manipulation for consistent performance with zero external dependencies. All hooks are TypeScript-native and SSR-compatible.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@hua-labs/motion-core)
|
|
6
|
-
[](https://www.npmjs.com/package/@hua-labs/motion-core)
|
|
7
7
|
[](https://github.com/HUA-Labs/HUA-Labs-public/blob/main/LICENSE)
|
|
8
8
|
[](https://www.typescriptlang.org/)
|
|
9
9
|
[](https://reactjs.org/)
|
|
10
10
|
|
|
11
|
-
## Overview
|
|
12
|
-
|
|
13
|
-
A collection of 25+ React animation hooks built on a ref-based engine. Direct DOM manipulation for consistent performance with zero external dependencies. All hooks are TypeScript-native and SSR-compatible.
|
|
14
|
-
|
|
15
11
|
## Features
|
|
16
12
|
|
|
17
|
-
- **
|
|
18
|
-
- **Zero dependencies
|
|
19
|
-
- **Ref-based
|
|
20
|
-
- **SSR compatible
|
|
21
|
-
- **
|
|
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**
|
|
22
18
|
|
|
23
19
|
## Installation
|
|
24
20
|
|
|
@@ -26,7 +22,7 @@ A collection of 25+ React animation hooks built on a ref-based engine. Direct DO
|
|
|
26
22
|
pnpm add @hua-labs/motion-core
|
|
27
23
|
```
|
|
28
24
|
|
|
29
|
-
Peer dependencies:
|
|
25
|
+
> Peer dependencies: react >=19.0.0, react-dom >=19.0.0
|
|
30
26
|
|
|
31
27
|
## Quick Start
|
|
32
28
|
|
|
@@ -44,43 +40,125 @@ function Hero() {
|
|
|
44
40
|
</div>
|
|
45
41
|
);
|
|
46
42
|
}
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## API Overview
|
|
50
|
-
|
|
51
|
-
All hooks return a consistent `BaseMotionReturn` interface:
|
|
52
43
|
|
|
53
|
-
|
|
54
|
-
|----------|------|-------------|
|
|
55
|
-
| `ref` | `RefObject<T>` | Attach to target element |
|
|
56
|
-
| `style` | `CSSProperties` | Apply to element |
|
|
57
|
-
| `isVisible` | `boolean` | Visibility state |
|
|
58
|
-
| `isAnimating` | `boolean` | Animation in progress |
|
|
59
|
-
| `start/stop/reset/pause/resume` | `() => void` | Playback controls |
|
|
60
|
-
|
|
61
|
-
**Available hooks by category:**
|
|
44
|
+
```
|
|
62
45
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
|
66
|
-
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
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 | |
|
|
70
153
|
|
|
71
154
|
## Documentation
|
|
72
155
|
|
|
73
|
-
|
|
74
|
-
- [Documentation Site](https://docs.hua-labs.com)
|
|
156
|
+
[Full Documentation](https://docs.hua-labs.com)
|
|
75
157
|
|
|
76
158
|
## Related Packages
|
|
77
159
|
|
|
78
|
-
- [`@hua-labs/hua`](https://www.npmjs.com/package/@hua-labs/hua)
|
|
79
|
-
|
|
80
|
-
## Requirements
|
|
81
|
-
|
|
82
|
-
React >= 19.0.0 · React DOM >= 19.0.0 · TypeScript >= 5.9
|
|
160
|
+
- [`@hua-labs/hua`](https://www.npmjs.com/package/@hua-labs/hua)
|
|
83
161
|
|
|
84
162
|
## License
|
|
85
163
|
|
|
86
|
-
MIT — [HUA Labs](https://
|
|
164
|
+
MIT — [HUA Labs](https://hua-labs.com)
|
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
|
* 기본 이징 함수
|