@hua-labs/motion-core 2.4.0 → 2.4.2
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/LICENSE +21 -0
- package/README.md +113 -115
- package/dist/index.cjs +106 -47
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +36 -16
- package/dist/index.d.ts +36 -16
- package/dist/index.mjs +106 -48
- package/dist/index.mjs.map +1 -1
- package/dist/native.d.mts +2 -2
- package/dist/native.d.ts +2 -2
- package/dist/{springPhysics-DLyZ4nbx.d.mts → springPhysics-BZVRi9PQ.d.mts} +71 -18
- package/dist/{springPhysics-DLyZ4nbx.d.ts → springPhysics-BZVRi9PQ.d.ts} +71 -18
- package/package.json +6 -6
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-present HUA Labs
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @hua-labs/motion-core
|
|
2
2
|
|
|
3
|
-
A collection of
|
|
3
|
+
A collection of 60+ 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. React Native support via dedicated native hooks using the Animated API.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@hua-labs/motion-core)
|
|
6
6
|
[](https://www.npmjs.com/package/@hua-labs/motion-core)
|
|
@@ -10,13 +10,12 @@ A collection of 55+ React animation hooks built on a ref-based engine. Direct DO
|
|
|
10
10
|
|
|
11
11
|
## Features
|
|
12
12
|
|
|
13
|
-
- **
|
|
13
|
+
- **60+ animation hooks — Fade, slide, scale, scroll, interactions, gestures, orchestration**
|
|
14
14
|
- **Zero dependencies — Pure JavaScript motion engine**
|
|
15
15
|
- **Ref-based — Direct DOM manipulation for consistent performance**
|
|
16
16
|
- **SSR compatible — Works with Next.js, Remix, and SSR frameworks**
|
|
17
17
|
- **React Native — 10 native hooks via Animated API (separate entry point)**
|
|
18
18
|
- **Fully tested — Comprehensive test coverage**
|
|
19
|
-
- **Pro hooks included — 18 advanced hooks absorbed from @hua-labs/pro (auto-play, orchestration, game loop, and more)**
|
|
20
19
|
|
|
21
20
|
## Installation
|
|
22
21
|
|
|
@@ -29,7 +28,7 @@ pnpm add @hua-labs/motion-core
|
|
|
29
28
|
## Quick Start
|
|
30
29
|
|
|
31
30
|
```tsx
|
|
32
|
-
import { useFadeIn, useSlideUp } from
|
|
31
|
+
import { useFadeIn, useSlideUp } from '@hua-labs/motion-core';
|
|
33
32
|
|
|
34
33
|
function Hero() {
|
|
35
34
|
const fadeIn = useFadeIn({ duration: 800 });
|
|
@@ -37,18 +36,14 @@ function Hero() {
|
|
|
37
36
|
|
|
38
37
|
return (
|
|
39
38
|
<div>
|
|
40
|
-
<h1 ref={fadeIn.ref} style={fadeIn.style}>
|
|
41
|
-
|
|
42
|
-
</h1>
|
|
43
|
-
<p ref={slideUp.ref} style={slideUp.style}>
|
|
44
|
-
Animated content
|
|
45
|
-
</p>
|
|
39
|
+
<h1 ref={fadeIn.ref} style={fadeIn.style}>Welcome</h1>
|
|
40
|
+
<p ref={slideUp.ref} style={slideUp.style}>Animated content</p>
|
|
46
41
|
</div>
|
|
47
42
|
);
|
|
48
43
|
}
|
|
49
44
|
|
|
50
45
|
// React Native — import from /native
|
|
51
|
-
import { useFadeIn, useStagger } from
|
|
46
|
+
import { useFadeIn, useStagger } from '@hua-labs/motion-core/native';
|
|
52
47
|
|
|
53
48
|
function ListItem() {
|
|
54
49
|
const fadeIn = useFadeIn({ duration: 400 });
|
|
@@ -58,114 +53,117 @@ function ListItem() {
|
|
|
58
53
|
</Animated.View>
|
|
59
54
|
);
|
|
60
55
|
}
|
|
56
|
+
|
|
61
57
|
```
|
|
62
58
|
|
|
63
59
|
## API
|
|
64
60
|
|
|
65
|
-
| Export
|
|
66
|
-
|
|
67
|
-
| `MotionEngine`
|
|
68
|
-
| `motionEngine`
|
|
69
|
-
| `TransitionEffects`
|
|
70
|
-
| `transitionEffects`
|
|
71
|
-
| `useSimplePageMotion`
|
|
72
|
-
| `usePageMotions`
|
|
73
|
-
| `useSmartMotion`
|
|
74
|
-
| `useUnifiedMotion`
|
|
75
|
-
| `useFadeIn`
|
|
76
|
-
| `useSlideUp`
|
|
77
|
-
| `useSlideLeft`
|
|
78
|
-
| `useSlideRight`
|
|
79
|
-
| `useScaleIn`
|
|
80
|
-
| `useBounceIn`
|
|
81
|
-
| `usePulse`
|
|
82
|
-
| `useSpringMotion`
|
|
83
|
-
| `useGradient`
|
|
84
|
-
| `useHoverMotion`
|
|
85
|
-
| `useClickToggle`
|
|
86
|
-
| `useFocusToggle`
|
|
87
|
-
| `useScrollReveal`
|
|
88
|
-
| `useScrollProgress`
|
|
89
|
-
| `useMotionState`
|
|
90
|
-
| `useRepeat`
|
|
91
|
-
| `useToggleMotion`
|
|
92
|
-
| `useSlideDown`
|
|
93
|
-
| `useInView`
|
|
94
|
-
| `useMouse`
|
|
95
|
-
| `useReducedMotion`
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
145
|
-
| `
|
|
146
|
-
| `
|
|
147
|
-
| `
|
|
148
|
-
| `
|
|
149
|
-
| `
|
|
150
|
-
| `
|
|
151
|
-
| `
|
|
152
|
-
| `
|
|
153
|
-
| `
|
|
154
|
-
| `
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
61
|
+
| Export | Type | Description |
|
|
62
|
+
|--------|------|-------------|
|
|
63
|
+
| `MotionEngine` | class | Zero-dependency pure JavaScript motion engine class |
|
|
64
|
+
| `motionEngine` | variable | Singleton instance of MotionEngine |
|
|
65
|
+
| `TransitionEffects` | class | Transition effect system class (fade, slide, scale, etc.) |
|
|
66
|
+
| `transitionEffects` | variable | Singleton instance of TransitionEffects |
|
|
67
|
+
| `useSimplePageMotion` | hook | Simple fade+slide page entrance animation |
|
|
68
|
+
| `usePageMotions` | hook | Multi-element page entrance orchestration |
|
|
69
|
+
| `useSmartMotion` | hook | Adaptive motion based on device performance |
|
|
70
|
+
| `useUnifiedMotion` | hook | All-in-one motion hook with presets |
|
|
71
|
+
| `useFadeIn` | hook | Fade-in animation hook |
|
|
72
|
+
| `useSlideUp` | hook | Slide-up entrance animation |
|
|
73
|
+
| `useSlideLeft` | hook | Slide-left entrance animation |
|
|
74
|
+
| `useSlideRight` | hook | Slide-right entrance animation |
|
|
75
|
+
| `useScaleIn` | hook | Scale-in entrance animation |
|
|
76
|
+
| `useBounceIn` | hook | Bounce-in entrance animation |
|
|
77
|
+
| `usePulse` | hook | Repeating pulse animation |
|
|
78
|
+
| `useSpringMotion` | hook | Spring physics animation |
|
|
79
|
+
| `useGradient` | hook | Animated gradient background |
|
|
80
|
+
| `useHoverMotion` | hook | Hover interaction animation |
|
|
81
|
+
| `useClickToggle` | hook | Click-triggered toggle animation |
|
|
82
|
+
| `useFocusToggle` | hook | Focus-triggered toggle animation |
|
|
83
|
+
| `useScrollReveal` | hook | Scroll-triggered reveal animation |
|
|
84
|
+
| `useScrollProgress` | hook | Scroll position as 0-1 progress value |
|
|
85
|
+
| `useMotionState` | hook | Animation state tracking (idle, running, complete) |
|
|
86
|
+
| `useRepeat` | hook | Repeating animation with configurable count |
|
|
87
|
+
| `useToggleMotion` | hook | Toggle between two animation states |
|
|
88
|
+
| `useSlideDown` | hook | Slide-down entrance animation |
|
|
89
|
+
| `useInView` | hook | IntersectionObserver-based visibility detection |
|
|
90
|
+
| `useMouse` | hook | Mouse position tracking |
|
|
91
|
+
| `useReducedMotion` | hook | Detect prefers-reduced-motion setting |
|
|
92
|
+
| `useReducedMotionObject` | hook | Returns { prefersReducedMotion } object (extended form of useReducedMotion) |
|
|
93
|
+
| `useWindowSize` | hook | Responsive window size tracking |
|
|
94
|
+
| `useGesture` | hook | Multi-gesture handler (drag, swipe, pinch) |
|
|
95
|
+
| `useGestureMotion` | hook | Gesture-driven motion animation |
|
|
96
|
+
| `useButtonEffect` | hook | Ripple / press feedback effect for buttons |
|
|
97
|
+
| `useVisibilityToggle` | hook | Animate an element in/out based on a boolean visibility flag |
|
|
98
|
+
| `useScrollToggle` | hook | Toggle animation state based on scroll position threshold |
|
|
99
|
+
| `useCardList` | hook | Staggered entrance animation for a list of cards |
|
|
100
|
+
| `useLoadingSpinner` | hook | Continuous rotation animation for loading spinners |
|
|
101
|
+
| `useNavigation` | hook | Slide/fade animation for navigation transitions |
|
|
102
|
+
| `useSkeleton` | hook | Shimmer animation for skeleton loading placeholders |
|
|
103
|
+
| `useTypewriter` | hook | Typewriter character-by-character text reveal animation |
|
|
104
|
+
| `useCustomCursor` | hook | Custom cursor tracking and animation |
|
|
105
|
+
| `useMagneticCursor` | hook | Magnetic cursor attraction effect for interactive elements |
|
|
106
|
+
| `useSmoothScroll` | hook | Smooth programmatic scroll with easing |
|
|
107
|
+
| `useElementProgress` | hook | Track an element's scroll progress as a 0–1 value |
|
|
108
|
+
| `neutral` | variable | Built-in neutral motion profile (minimal, system-respecting) |
|
|
109
|
+
| `hua` | variable | Built-in hua motion profile (expressive, brand-aligned) |
|
|
110
|
+
| `resolveProfile` | function | Resolve a built-in profile name or MotionProfile object to a MotionProfile |
|
|
111
|
+
| `mergeProfileOverrides` | function | Deep-merge overrides into a base MotionProfile |
|
|
112
|
+
| `MotionProfileProvider` | component | React context provider that supplies a MotionProfile to the subtree |
|
|
113
|
+
| `useMotionProfile` | hook | Hook to read the current MotionProfile from context |
|
|
114
|
+
| `observeElement` | function | Shared IntersectionObserver helper — observe an element and invoke a callback on visibility change |
|
|
115
|
+
| `linear` | function | Linear easing (no acceleration) |
|
|
116
|
+
| `easeIn` | function | Ease-in curve (slow start) |
|
|
117
|
+
| `easeOut` | function | Ease-out curve (slow end) |
|
|
118
|
+
| `easeInOut` | function | Smooth ease-in-out curve |
|
|
119
|
+
| `getEasing` | function | Get easing function by name |
|
|
120
|
+
| `applyEasing` | function | Apply an easing function to a raw progress value (throws on invalid) |
|
|
121
|
+
| `safeApplyEasing` | function | Apply an easing function to a progress value, falling back to linear on error |
|
|
122
|
+
| `isValidEasing` | function | Check whether a string is a recognised EasingType name |
|
|
123
|
+
| `getAvailableEasings` | function | Return the list of all registered easing names |
|
|
124
|
+
| `isEasingFunction` | function | Type-guard that checks whether a value is a callable EasingFunction |
|
|
125
|
+
| `easingPresets` | variable | Map of named easing preset strings to EasingFunction objects |
|
|
126
|
+
| `getPresetEasing` | function | Look up an EasingFunction by preset name |
|
|
127
|
+
| `calculateSpring` | function | Pure function that computes spring position/velocity for a given time step |
|
|
128
|
+
| `useAutoFade` | hook | Auto-looping fade animation |
|
|
129
|
+
| `useAutoPlay` | hook | Auto-looping playback animation |
|
|
130
|
+
| `useAutoScale` | hook | Auto-looping scale animation |
|
|
131
|
+
| `useAutoSlide` | hook | Auto-looping slide animation |
|
|
132
|
+
| `useMotionOrchestra` | hook | Multi-mode orchestrator (sequential/parallel/stagger) with dynamic step registration |
|
|
133
|
+
| `useOrchestration` | hook | rAF-based timeline engine with seek, speed, reverse support |
|
|
134
|
+
| `useSequence` | hook | [DEPRECATED] Sequential motion chaining — use useOrchestration or useMotionOrchestra instead |
|
|
135
|
+
| `useLayoutMotion` | hook | Layout change animation with FLIP technique |
|
|
136
|
+
| `createLayoutTransition` | function | Factory function to create layout transition configs |
|
|
137
|
+
| `useKeyboardToggle` | hook | Keyboard shortcut-triggered toggle animation |
|
|
138
|
+
| `useScrollDirection` | hook | Detect scroll direction (up/down) for show/hide patterns |
|
|
139
|
+
| `useStickyToggle` | hook | Toggle animation based on sticky scroll threshold |
|
|
140
|
+
| `useInteractive` | hook | Combined hover/press/focus interaction state |
|
|
141
|
+
| `usePerformanceMonitor` | hook | FPS and frame timing monitor for motion performance |
|
|
142
|
+
| `useLanguageAwareMotion` | hook | Direction-aware motion that adapts to LTR/RTL languages |
|
|
143
|
+
| `useGameLoop` | hook | Fixed-timestep game loop with state management |
|
|
144
|
+
| `useMotion` | hook | Flexible single-element motion hook with from/to config |
|
|
145
|
+
| `useViewportToggle` | hook | IntersectionObserver-based viewport visibility toggle (renamed from pro useVisibilityToggle) |
|
|
146
|
+
| `useScrollPositionToggle` | hook | pageYOffset-based scroll position toggle (renamed from pro useScrollToggle) |
|
|
147
|
+
| `Motion` | component | React wrapper component that applies a motion hook to its child element via ref |
|
|
148
|
+
| `useCountUp` | hook | Animated counter that counts up to a target number |
|
|
149
|
+
| `useClipReveal` | hook | Clip-path reveal animation (wipe-in effect) |
|
|
150
|
+
| `useBlurIn` | hook | Blur-to-clear entrance animation |
|
|
151
|
+
| `useStagger` | hook | Orchestrate staggered entrance animations across a list of elements |
|
|
152
|
+
| `MOTION_PRESETS` | variable | Built-in preset configurations keyed by element role (hero, title, button, card, text, image) |
|
|
153
|
+
| `PAGE_MOTIONS` | variable | Page-level motion configs keyed by page type (home, dashboard, product, blog) |
|
|
154
|
+
| `mergeWithPreset` | function | Merge a MotionPreset with custom overrides |
|
|
155
|
+
| `getPagePreset` | function | Get PageMotionsConfig for a given PageType |
|
|
156
|
+
| `getMotionPreset` | function | Get a MotionPreset by element role string |
|
|
157
|
+
| `useFadeIn (native)` | hook | Native fade-in using Animated.timing |
|
|
158
|
+
| `useSlideUp (native)` | hook | Native slide-up using Animated.parallel |
|
|
159
|
+
| `useSlideDown (native)` | hook | Native slide-down using Animated.parallel |
|
|
160
|
+
| `useSlideLeft (native)` | hook | Native slide-left using Animated.parallel |
|
|
161
|
+
| `useSlideRight (native)` | hook | Native slide-right using Animated.parallel |
|
|
162
|
+
| `useScaleIn (native)` | hook | Native scale-in using Animated.parallel |
|
|
163
|
+
| `useBounceIn (native)` | hook | Native bounce-in using Animated.spring |
|
|
164
|
+
| `useSpringMotion (native)` | hook | Native generic spring animation with animateTo() |
|
|
165
|
+
| `usePulse (native)` | hook | Native looping pulse using Animated.loop |
|
|
166
|
+
| `useStagger (native)` | hook | Native staggered list animation using Animated.stagger |
|
|
169
167
|
|
|
170
168
|
## Documentation
|
|
171
169
|
|
package/dist/index.cjs
CHANGED
|
@@ -942,6 +942,10 @@ function useFadeIn(options = {}) {
|
|
|
942
942
|
setProgress(0);
|
|
943
943
|
onReset?.();
|
|
944
944
|
}, [stop, onReset]);
|
|
945
|
+
const pause = react.useCallback(() => {
|
|
946
|
+
}, []);
|
|
947
|
+
const resume = react.useCallback(() => {
|
|
948
|
+
}, []);
|
|
945
949
|
react.useEffect(() => {
|
|
946
950
|
if (!ref.current || !autoStart) return;
|
|
947
951
|
return observeElement(
|
|
@@ -958,14 +962,25 @@ function useFadeIn(options = {}) {
|
|
|
958
962
|
stop();
|
|
959
963
|
};
|
|
960
964
|
}, [stop]);
|
|
961
|
-
const style = react.useMemo(
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
965
|
+
const style = react.useMemo(
|
|
966
|
+
() => ({
|
|
967
|
+
opacity: isVisible ? targetOpacity : initialOpacity,
|
|
968
|
+
transition: `opacity ${duration}ms ${easing}`,
|
|
969
|
+
"--motion-delay": `${delay}ms`,
|
|
970
|
+
"--motion-duration": `${duration}ms`,
|
|
971
|
+
"--motion-easing": easing,
|
|
972
|
+
"--motion-progress": `${progress}`
|
|
973
|
+
}),
|
|
974
|
+
[
|
|
975
|
+
isVisible,
|
|
976
|
+
targetOpacity,
|
|
977
|
+
initialOpacity,
|
|
978
|
+
duration,
|
|
979
|
+
easing,
|
|
980
|
+
delay,
|
|
981
|
+
progress
|
|
982
|
+
]
|
|
983
|
+
);
|
|
969
984
|
return {
|
|
970
985
|
ref,
|
|
971
986
|
isVisible,
|
|
@@ -974,7 +989,9 @@ function useFadeIn(options = {}) {
|
|
|
974
989
|
progress,
|
|
975
990
|
start,
|
|
976
991
|
stop,
|
|
977
|
-
reset
|
|
992
|
+
reset,
|
|
993
|
+
pause,
|
|
994
|
+
resume
|
|
978
995
|
};
|
|
979
996
|
}
|
|
980
997
|
function useSlideUp(options = {}) {
|
|
@@ -1063,6 +1080,10 @@ function useSlideUp(options = {}) {
|
|
|
1063
1080
|
setProgress(0);
|
|
1064
1081
|
onReset?.();
|
|
1065
1082
|
}, [stop, onReset]);
|
|
1083
|
+
const pause = react.useCallback(() => {
|
|
1084
|
+
}, []);
|
|
1085
|
+
const resume = react.useCallback(() => {
|
|
1086
|
+
}, []);
|
|
1066
1087
|
react.useEffect(() => {
|
|
1067
1088
|
if (!ref.current || !autoStart) return;
|
|
1068
1089
|
return observeElement(
|
|
@@ -1079,21 +1100,37 @@ function useSlideUp(options = {}) {
|
|
|
1079
1100
|
stop();
|
|
1080
1101
|
};
|
|
1081
1102
|
}, [stop]);
|
|
1082
|
-
const initialTransform = react.useMemo(
|
|
1103
|
+
const initialTransform = react.useMemo(
|
|
1104
|
+
() => getInitialTransform2(),
|
|
1105
|
+
[getInitialTransform2]
|
|
1106
|
+
);
|
|
1083
1107
|
const finalTransform = react.useMemo(() => {
|
|
1084
1108
|
return direction === "left" || direction === "right" ? "translateX(0)" : "translateY(0)";
|
|
1085
1109
|
}, [direction]);
|
|
1086
|
-
const style = react.useMemo(
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1110
|
+
const style = react.useMemo(
|
|
1111
|
+
() => ({
|
|
1112
|
+
opacity: isVisible ? 1 : 0,
|
|
1113
|
+
transform: isVisible ? finalTransform : initialTransform,
|
|
1114
|
+
transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
|
|
1115
|
+
"--motion-delay": `${delay}ms`,
|
|
1116
|
+
"--motion-duration": `${duration}ms`,
|
|
1117
|
+
"--motion-easing": easing,
|
|
1118
|
+
"--motion-progress": `${progress}`,
|
|
1119
|
+
"--motion-direction": direction,
|
|
1120
|
+
"--motion-distance": `${distance}px`
|
|
1121
|
+
}),
|
|
1122
|
+
[
|
|
1123
|
+
isVisible,
|
|
1124
|
+
initialTransform,
|
|
1125
|
+
finalTransform,
|
|
1126
|
+
duration,
|
|
1127
|
+
easing,
|
|
1128
|
+
delay,
|
|
1129
|
+
progress,
|
|
1130
|
+
direction,
|
|
1131
|
+
distance
|
|
1132
|
+
]
|
|
1133
|
+
);
|
|
1097
1134
|
return {
|
|
1098
1135
|
ref,
|
|
1099
1136
|
isVisible,
|
|
@@ -1102,7 +1139,9 @@ function useSlideUp(options = {}) {
|
|
|
1102
1139
|
progress,
|
|
1103
1140
|
start,
|
|
1104
1141
|
stop,
|
|
1105
|
-
reset
|
|
1142
|
+
reset,
|
|
1143
|
+
pause,
|
|
1144
|
+
resume
|
|
1106
1145
|
};
|
|
1107
1146
|
}
|
|
1108
1147
|
|
|
@@ -1182,6 +1221,10 @@ function useScaleIn(options = {}) {
|
|
|
1182
1221
|
}
|
|
1183
1222
|
onReset?.();
|
|
1184
1223
|
}, [stop, initialScale, onReset]);
|
|
1224
|
+
const pause = react.useCallback(() => {
|
|
1225
|
+
}, []);
|
|
1226
|
+
const resume = react.useCallback(() => {
|
|
1227
|
+
}, []);
|
|
1185
1228
|
react.useEffect(() => {
|
|
1186
1229
|
if (!ref.current || !autoStart) return;
|
|
1187
1230
|
return observeElement(
|
|
@@ -1198,15 +1241,18 @@ function useScaleIn(options = {}) {
|
|
|
1198
1241
|
stop();
|
|
1199
1242
|
};
|
|
1200
1243
|
}, [stop]);
|
|
1201
|
-
const style = react.useMemo(
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1244
|
+
const style = react.useMemo(
|
|
1245
|
+
() => ({
|
|
1246
|
+
transform: `scale(${scale})`,
|
|
1247
|
+
opacity,
|
|
1248
|
+
transition: `all ${duration}ms ${easing}`,
|
|
1249
|
+
"--motion-delay": `${delay}ms`,
|
|
1250
|
+
"--motion-duration": `${duration}ms`,
|
|
1251
|
+
"--motion-easing": easing,
|
|
1252
|
+
"--motion-progress": `${progress}`
|
|
1253
|
+
}),
|
|
1254
|
+
[scale, opacity, duration, easing, delay, progress]
|
|
1255
|
+
);
|
|
1210
1256
|
return {
|
|
1211
1257
|
ref,
|
|
1212
1258
|
isVisible,
|
|
@@ -1215,7 +1261,9 @@ function useScaleIn(options = {}) {
|
|
|
1215
1261
|
progress,
|
|
1216
1262
|
start,
|
|
1217
1263
|
reset,
|
|
1218
|
-
stop
|
|
1264
|
+
stop,
|
|
1265
|
+
pause,
|
|
1266
|
+
resume
|
|
1219
1267
|
};
|
|
1220
1268
|
}
|
|
1221
1269
|
function useBounceIn(options = {}) {
|
|
@@ -1293,6 +1341,10 @@ function useBounceIn(options = {}) {
|
|
|
1293
1341
|
}
|
|
1294
1342
|
onReset?.();
|
|
1295
1343
|
}, [stop, onReset]);
|
|
1344
|
+
const pause = react.useCallback(() => {
|
|
1345
|
+
}, []);
|
|
1346
|
+
const resume = react.useCallback(() => {
|
|
1347
|
+
}, []);
|
|
1296
1348
|
react.useEffect(() => {
|
|
1297
1349
|
if (!ref.current || !autoStart) return;
|
|
1298
1350
|
return observeElement(
|
|
@@ -1309,15 +1361,18 @@ function useBounceIn(options = {}) {
|
|
|
1309
1361
|
stop();
|
|
1310
1362
|
};
|
|
1311
1363
|
}, [stop]);
|
|
1312
|
-
const style = react.useMemo(
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1364
|
+
const style = react.useMemo(
|
|
1365
|
+
() => ({
|
|
1366
|
+
transform: `scale(${scale})`,
|
|
1367
|
+
opacity,
|
|
1368
|
+
transition: `all ${duration}ms ${easing}`,
|
|
1369
|
+
"--motion-delay": `${delay}ms`,
|
|
1370
|
+
"--motion-duration": `${duration}ms`,
|
|
1371
|
+
"--motion-easing": easing,
|
|
1372
|
+
"--motion-progress": `${progress}`
|
|
1373
|
+
}),
|
|
1374
|
+
[scale, opacity, duration, easing, delay, progress]
|
|
1375
|
+
);
|
|
1321
1376
|
return {
|
|
1322
1377
|
ref,
|
|
1323
1378
|
isVisible,
|
|
@@ -1326,7 +1381,9 @@ function useBounceIn(options = {}) {
|
|
|
1326
1381
|
progress,
|
|
1327
1382
|
start,
|
|
1328
1383
|
reset,
|
|
1329
|
-
stop
|
|
1384
|
+
stop,
|
|
1385
|
+
pause,
|
|
1386
|
+
resume
|
|
1330
1387
|
};
|
|
1331
1388
|
}
|
|
1332
1389
|
function usePulse(options = {}) {
|
|
@@ -2590,9 +2647,11 @@ function useReducedMotion() {
|
|
|
2590
2647
|
mediaQuery.removeEventListener("change", handleChange);
|
|
2591
2648
|
};
|
|
2592
2649
|
}, []);
|
|
2593
|
-
return
|
|
2594
|
-
|
|
2595
|
-
|
|
2650
|
+
return prefersReducedMotion;
|
|
2651
|
+
}
|
|
2652
|
+
function useReducedMotionObject() {
|
|
2653
|
+
const prefersReducedMotion = useReducedMotion();
|
|
2654
|
+
return { prefersReducedMotion };
|
|
2596
2655
|
}
|
|
2597
2656
|
function useWindowSize(options = {}) {
|
|
2598
2657
|
const {
|
|
@@ -6016,8 +6075,7 @@ function useSequence(sequence, options = {}) {
|
|
|
6016
6075
|
isPlaying,
|
|
6017
6076
|
currentIndex,
|
|
6018
6077
|
totalMotions: sequence.length,
|
|
6019
|
-
ref: motions[0]?.ref
|
|
6020
|
-
})
|
|
6078
|
+
ref: motions[0]?.ref ?? { current: null }
|
|
6021
6079
|
// 첫 번째 모션의 ref 반환
|
|
6022
6080
|
};
|
|
6023
6081
|
}
|
|
@@ -7503,6 +7561,7 @@ exports.usePageMotions = usePageMotions;
|
|
|
7503
7561
|
exports.usePerformanceMonitor = usePerformanceMonitor;
|
|
7504
7562
|
exports.usePulse = usePulse;
|
|
7505
7563
|
exports.useReducedMotion = useReducedMotion;
|
|
7564
|
+
exports.useReducedMotionObject = useReducedMotionObject;
|
|
7506
7565
|
exports.useRepeat = useRepeat;
|
|
7507
7566
|
exports.useScaleIn = useScaleIn;
|
|
7508
7567
|
exports.useScrollDirection = useScrollDirection;
|