@ssgoi/core 2.5.5 → 2.5.6
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/dist/animator/animate/css-runner.d.ts +17 -0
- package/dist/animator/animate/css-runner.d.ts.map +1 -0
- package/dist/animator/animate/index.d.ts +42 -0
- package/dist/animator/animate/index.d.ts.map +1 -0
- package/dist/animator/animate/tick-runner.d.ts +16 -0
- package/dist/animator/animate/tick-runner.d.ts.map +1 -0
- package/dist/animator/animate/types.d.ts +31 -0
- package/dist/animator/animate/types.d.ts.map +1 -0
- package/dist/animator/animation-scheduler.d.ts +4 -17
- package/dist/animator/animation-scheduler.d.ts.map +1 -1
- package/dist/animator/index.d.ts +32 -32
- package/dist/animator/index.d.ts.map +1 -1
- package/dist/animator/spring-core.d.ts +63 -0
- package/dist/animator/spring-core.d.ts.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.js +588 -631
- package/dist/ssgoi-transition/create-ssgoi-transition-context.d.ts.map +1 -1
- package/dist/ssgoi-transition/create-swipe-detector.d.ts +1 -0
- package/dist/ssgoi-transition/create-swipe-detector.d.ts.map +1 -1
- package/dist/transition/create-transition-callback.d.ts +2 -2
- package/dist/transition/create-transition-callback.d.ts.map +1 -1
- package/dist/transition/transition-strategy.d.ts +16 -16
- package/dist/transition/transition-strategy.d.ts.map +1 -1
- package/dist/transition/transition.d.ts +2 -18
- package/dist/transition/transition.d.ts.map +1 -1
- package/dist/types.cjs +1 -1
- package/dist/types.d.ts +74 -34
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +21 -6
- package/dist/view-transitions/drill.d.ts.map +1 -1
- package/dist/view-transitions/hero.d.ts.map +1 -1
- package/dist/view-transitions/index.cjs +9 -9
- package/dist/view-transitions/index.js +271 -257
- package/package.json +1 -1
- package/dist/animator/animate.d.ts +0 -35
- package/dist/animator/animate.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-ssgoi-transition-context.d.ts","sourceRoot":"","sources":["../../src/lib/ssgoi-transition/create-ssgoi-transition-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAuB,MAAM,UAAU,CAAC;AAW/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH;;;;;;;;;;;GAWG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,GACnB,YAAY,
|
|
1
|
+
{"version":3,"file":"create-ssgoi-transition-context.d.ts","sourceRoot":"","sources":["../../src/lib/ssgoi-transition/create-ssgoi-transition-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAuB,MAAM,UAAU,CAAC;AAW/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH;;;;;;;;;;;GAWG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,GACnB,YAAY,CAqJd"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-swipe-detector.d.ts","sourceRoot":"","sources":["../../src/lib/ssgoi-transition/create-swipe-detector.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO
|
|
1
|
+
{"version":3,"file":"create-swipe-detector.d.ts","sourceRoot":"","sources":["../../src/lib/ssgoi-transition/create-swipe-detector.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO;;;;;EAuFnD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Transition, TransitionCallback } from '../types';
|
|
2
2
|
import { StrategyContext, TransitionStrategy } from './transition-strategy';
|
|
3
|
-
export declare function createTransitionCallback
|
|
3
|
+
export declare function createTransitionCallback(getTransition: () => Transition<undefined>, options?: {
|
|
4
4
|
onCleanupEnd?: () => void;
|
|
5
|
-
strategy?: (context: StrategyContext
|
|
5
|
+
strategy?: (context: StrategyContext) => TransitionStrategy;
|
|
6
6
|
}): TransitionCallback;
|
|
7
7
|
//# sourceMappingURL=create-transition-callback.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-transition-callback.d.ts","sourceRoot":"","sources":["../../src/lib/transition/create-transition-callback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EAExB,MAAM,uBAAuB,CAAC;AAE/B,wBAAgB,wBAAwB,
|
|
1
|
+
{"version":3,"file":"create-transition-callback.d.ts","sourceRoot":"","sources":["../../src/lib/transition/create-transition-callback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EAExB,MAAM,uBAAuB,CAAC;AAE/B,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,MAAM,UAAU,CAAC,SAAS,CAAC,EAC1C,OAAO,CAAC,EAAE;IACR,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,kBAAkB,CAAC;CAC7D,GACA,kBAAkB,CAqOpB"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { TransitionConfig, AnimationController } from '../types';
|
|
2
2
|
export declare const TRANSITION_STRATEGY: unique symbol;
|
|
3
|
-
export interface StrategyContext
|
|
3
|
+
export interface StrategyContext {
|
|
4
4
|
currentAnimation: {
|
|
5
|
-
controller: AnimationController
|
|
5
|
+
controller: AnimationController;
|
|
6
6
|
direction: "in" | "out";
|
|
7
7
|
} | null;
|
|
8
8
|
}
|
|
9
|
-
export interface AnimationSetup
|
|
10
|
-
config?: TransitionConfig
|
|
9
|
+
export interface AnimationSetup {
|
|
10
|
+
config?: TransitionConfig;
|
|
11
11
|
state: {
|
|
12
|
-
position:
|
|
13
|
-
velocity:
|
|
12
|
+
position: number;
|
|
13
|
+
velocity: number;
|
|
14
14
|
};
|
|
15
|
-
from:
|
|
16
|
-
to:
|
|
15
|
+
from: number;
|
|
16
|
+
to: number;
|
|
17
17
|
direction: "forward" | "backward";
|
|
18
18
|
}
|
|
19
|
-
export interface TransitionConfigs
|
|
20
|
-
in?: Promise<TransitionConfig
|
|
21
|
-
out?: Promise<TransitionConfig
|
|
19
|
+
export interface TransitionConfigs {
|
|
20
|
+
in?: Promise<TransitionConfig>;
|
|
21
|
+
out?: Promise<TransitionConfig>;
|
|
22
22
|
}
|
|
23
|
-
export interface TransitionStrategy
|
|
24
|
-
runIn: (configs: TransitionConfigs
|
|
25
|
-
runOut: (configs: TransitionConfigs
|
|
23
|
+
export interface TransitionStrategy {
|
|
24
|
+
runIn: (configs: TransitionConfigs) => Promise<AnimationSetup>;
|
|
25
|
+
runOut: (configs: TransitionConfigs) => Promise<AnimationSetup>;
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
28
|
* Creates a transition callback that can be used with framework-specific implementations
|
|
@@ -55,10 +55,10 @@ export interface TransitionStrategy<TAnimationValue = number> {
|
|
|
55
55
|
* - Inner function (entrance callback): Returns cleanup callback (exit)
|
|
56
56
|
* - Cleanup callback: Handles exit transitions
|
|
57
57
|
*/
|
|
58
|
-
export declare const createDefaultStrategy:
|
|
58
|
+
export declare const createDefaultStrategy: (context: StrategyContext) => TransitionStrategy;
|
|
59
59
|
/**
|
|
60
60
|
* Page transition strategy - Always starts fresh without checking current animations
|
|
61
61
|
* This is used for page-level transitions where each transition should be independent
|
|
62
62
|
*/
|
|
63
|
-
export declare const createPageTransitionStrategy:
|
|
63
|
+
export declare const createPageTransitionStrategy: () => TransitionStrategy;
|
|
64
64
|
//# sourceMappingURL=transition-strategy.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transition-strategy.d.ts","sourceRoot":"","sources":["../../src/lib/transition/transition-strategy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,mBAAmB,eAAoC,CAAC;AAErE,MAAM,WAAW,eAAe
|
|
1
|
+
{"version":3,"file":"transition-strategy.d.ts","sourceRoot":"","sources":["../../src/lib/transition/transition-strategy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,mBAAmB,eAAoC,CAAC;AAErE,MAAM,WAAW,eAAe;IAG9B,gBAAgB,EAAE;QAChB,UAAU,EAAE,mBAAmB,CAAC;QAChC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;KACzB,GAAG,IAAI,CAAC;CACV;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/D,MAAM,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;CACjE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,eAAO,MAAM,qBAAqB,GAChC,SAAS,eAAe,KACvB,kBA8KF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,QAAO,kBAwF/C,CAAC"}
|
|
@@ -22,26 +22,10 @@ export declare function generateAutoKey(): TransitionKey;
|
|
|
22
22
|
* 4. `tick` - Called on each animation frame with progress value (1 → 0)
|
|
23
23
|
* 5. `onEnd` - Called when animation completes and element is removed
|
|
24
24
|
*
|
|
25
|
-
* The `key` parameter is crucial for transition management - it uniquely identifies
|
|
26
|
-
* each transition instance, allowing the system to track, cleanup, and prevent
|
|
27
|
-
* conflicts between multiple transitions on the same element.
|
|
28
|
-
*
|
|
29
|
-
* @param {object} options - Configuration object
|
|
30
|
-
* @param {TransitionKey} options.key - Unique identifier for this transition instance.
|
|
31
|
-
* Can be string or symbol. Used to manage and cleanup
|
|
32
|
-
* transitions internally.
|
|
33
|
-
* @param {Function} options.in - Configuration for entrance animation.
|
|
34
|
-
* Returns TransitionConfig with lifecycle hooks.
|
|
35
|
-
* @param {Function} options.out - Configuration for exit animation.
|
|
36
|
-
* Returns TransitionConfig with lifecycle hooks.
|
|
37
|
-
*
|
|
38
|
-
* @template TAnimationValue - The type of value being animated (number | object)
|
|
39
|
-
*
|
|
40
25
|
* @returns {TransitionCallback} A callback function to be used as a ref
|
|
41
26
|
*
|
|
42
27
|
* @example
|
|
43
28
|
* ```tsx
|
|
44
|
-
* // Simple fade transition
|
|
45
29
|
* <div ref={transition({
|
|
46
30
|
* key: 'hero-fade',
|
|
47
31
|
* in: (element) => ({
|
|
@@ -54,7 +38,7 @@ export declare function generateAutoKey(): TransitionKey;
|
|
|
54
38
|
* })} />
|
|
55
39
|
* ```
|
|
56
40
|
*/
|
|
57
|
-
export declare function transition
|
|
58
|
-
[TRANSITION_STRATEGY]?: (context: StrategyContext
|
|
41
|
+
export declare function transition(options: TransitionOptions<undefined> & {
|
|
42
|
+
[TRANSITION_STRATEGY]?: (context: StrategyContext) => TransitionStrategy;
|
|
59
43
|
}): TransitionCallback;
|
|
60
44
|
//# sourceMappingURL=transition.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../src/lib/transition/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAEV,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../src/lib/transition/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAEV,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA2D9C,wBAAgB,eAAe,IAAI,aAAa,CAU/C;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAAG;IACtC,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,kBAAkB,CAAC;CAC1E,GACA,kBAAkB,CAmBpB"}
|
package/dist/types.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function e(i){return("tick"in i||"css"in i)&&!("springs"in i)}function s(i){return"springs"in i}function n(i){return"css"in i&&typeof i.css=="function"}function t(i){return"tick"in i&&typeof i.tick=="function"}function r(i){if(n(i)&&t(i))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}exports.isCssAnimation=n;exports.isMultiSpring=s;exports.isSingleSpring=e;exports.isTickAnimation=t;exports.validateAnimationMode=r;
|
package/dist/types.d.ts
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
export type TransitionKey = string | symbol;
|
|
2
2
|
export type SpringConfig = {
|
|
3
|
-
stiffness
|
|
4
|
-
damping
|
|
3
|
+
stiffness: number;
|
|
4
|
+
damping: number;
|
|
5
5
|
};
|
|
6
|
+
/**
|
|
7
|
+
* CSS style object type
|
|
8
|
+
*/
|
|
9
|
+
export type StyleObject = Record<string, number | string>;
|
|
6
10
|
/**
|
|
7
11
|
* Schedule strategy for multi-spring animations
|
|
8
12
|
* - overlap: All springs start immediately (parallel execution)
|
|
@@ -20,21 +24,43 @@ export type BaseTransitionConfig = {
|
|
|
20
24
|
onEnd?: () => void;
|
|
21
25
|
};
|
|
22
26
|
/**
|
|
23
|
-
* Single spring configuration
|
|
27
|
+
* Single spring configuration
|
|
24
28
|
* Used for simple transitions with a single animation value
|
|
29
|
+
*
|
|
30
|
+
* Supports two animation modes:
|
|
31
|
+
* - tick: RAF-based animation with callback on each frame
|
|
32
|
+
* - css: Web Animation API with CSS string generation
|
|
25
33
|
*/
|
|
26
|
-
export type SingleSpringConfig
|
|
34
|
+
export type SingleSpringConfig = BaseTransitionConfig & {
|
|
27
35
|
spring?: SpringConfig;
|
|
28
|
-
from?:
|
|
29
|
-
to?:
|
|
30
|
-
tick?: (progress:
|
|
36
|
+
from?: number;
|
|
37
|
+
to?: number;
|
|
38
|
+
tick?: (progress: number) => void;
|
|
39
|
+
/**
|
|
40
|
+
* Style generator for Web Animation API mode
|
|
41
|
+
*
|
|
42
|
+
* When provided, the animation uses Web Animation API instead of RAF.
|
|
43
|
+
* Spring physics are pre-computed and converted to keyframes.
|
|
44
|
+
*
|
|
45
|
+
* @param progress - Current progress value (0 to 1)
|
|
46
|
+
* @returns Style object for Web Animation API
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```ts
|
|
50
|
+
* css: (progress) => ({
|
|
51
|
+
* opacity: progress,
|
|
52
|
+
* transform: `translateY(${(1 - progress) * 20}px)`,
|
|
53
|
+
* })
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
css?: (progress: number) => StyleObject;
|
|
31
57
|
};
|
|
32
58
|
/**
|
|
33
59
|
* Individual spring item in a multi-spring animation
|
|
34
60
|
*/
|
|
35
|
-
export type SpringItem
|
|
36
|
-
from?:
|
|
37
|
-
to?:
|
|
61
|
+
export type SpringItem = {
|
|
62
|
+
from?: number;
|
|
63
|
+
to?: number;
|
|
38
64
|
spring?: SpringConfig;
|
|
39
65
|
/**
|
|
40
66
|
* Frame callback - called on each animation frame with progress value
|
|
@@ -67,7 +93,7 @@ export type SpringItem<TAnimationValue = number> = {
|
|
|
67
93
|
* element.style.height = height * progress // WRITE only
|
|
68
94
|
* }
|
|
69
95
|
*/
|
|
70
|
-
tick: (progress:
|
|
96
|
+
tick: (progress: number) => void;
|
|
71
97
|
onStart?: () => void;
|
|
72
98
|
onComplete?: () => void;
|
|
73
99
|
/**
|
|
@@ -77,11 +103,11 @@ export type SpringItem<TAnimationValue = number> = {
|
|
|
77
103
|
offset?: number;
|
|
78
104
|
};
|
|
79
105
|
/**
|
|
80
|
-
* Multi-spring configuration
|
|
106
|
+
* Multi-spring configuration
|
|
81
107
|
* Used for complex transitions with multiple coordinated animations
|
|
82
108
|
*/
|
|
83
|
-
export type MultiSpringConfig
|
|
84
|
-
springs: SpringItem
|
|
109
|
+
export type MultiSpringConfig = BaseTransitionConfig & {
|
|
110
|
+
springs: SpringItem[];
|
|
85
111
|
schedule?: ScheduleType;
|
|
86
112
|
onProgress?: (completed: number, total: number) => void;
|
|
87
113
|
};
|
|
@@ -89,22 +115,39 @@ export type MultiSpringConfig<TAnimationValue = number> = BaseTransitionConfig &
|
|
|
89
115
|
* Transition configuration - supports both single and multi-spring animations
|
|
90
116
|
* Uses Union Type for type safety and backward compatibility
|
|
91
117
|
*/
|
|
92
|
-
export type TransitionConfig
|
|
118
|
+
export type TransitionConfig = SingleSpringConfig | MultiSpringConfig;
|
|
93
119
|
/**
|
|
94
120
|
* Type guard to check if config is single spring
|
|
95
121
|
*/
|
|
96
|
-
export declare function isSingleSpring
|
|
122
|
+
export declare function isSingleSpring(config: TransitionConfig): config is SingleSpringConfig;
|
|
97
123
|
/**
|
|
98
124
|
* Type guard to check if config is multi-spring
|
|
99
125
|
*/
|
|
100
|
-
export declare function isMultiSpring
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
126
|
+
export declare function isMultiSpring(config: TransitionConfig): config is MultiSpringConfig;
|
|
127
|
+
/**
|
|
128
|
+
* Type guard to check if config uses CSS mode (Web Animation API)
|
|
129
|
+
*/
|
|
130
|
+
export declare function isCssAnimation(config: SingleSpringConfig): config is SingleSpringConfig & {
|
|
131
|
+
css: (progress: number) => string;
|
|
132
|
+
};
|
|
133
|
+
/**
|
|
134
|
+
* Type guard to check if config uses tick mode (RAF-based)
|
|
135
|
+
*/
|
|
136
|
+
export declare function isTickAnimation(config: SingleSpringConfig): config is SingleSpringConfig & {
|
|
137
|
+
tick: (progress: number) => void;
|
|
138
|
+
};
|
|
139
|
+
/**
|
|
140
|
+
* Validate that config doesn't have both tick and css defined
|
|
141
|
+
* @throws Error if both tick and css are defined
|
|
142
|
+
*/
|
|
143
|
+
export declare function validateAnimationMode(config: SingleSpringConfig): void;
|
|
144
|
+
export type GetTransitionConfig<TContext = undefined> = TContext extends undefined ? (node: HTMLElement) => TransitionConfig | Promise<TransitionConfig> : (node: HTMLElement, context: TContext) => TransitionConfig | Promise<TransitionConfig>;
|
|
145
|
+
export type Transition<TContext = undefined> = {
|
|
146
|
+
in?: GetTransitionConfig<TContext>;
|
|
147
|
+
out?: GetTransitionConfig<TContext>;
|
|
105
148
|
key?: TransitionKey;
|
|
106
149
|
};
|
|
107
|
-
export type TransitionOptions<TContext = undefined
|
|
150
|
+
export type TransitionOptions<TContext = undefined> = Transition<TContext> & {
|
|
108
151
|
key?: TransitionKey;
|
|
109
152
|
ref?: object;
|
|
110
153
|
};
|
|
@@ -200,18 +243,17 @@ export type WaitScheduleEntry = {
|
|
|
200
243
|
* Different return types for single vs multi-spring animations
|
|
201
244
|
* @internal
|
|
202
245
|
*/
|
|
203
|
-
export type AnimationState
|
|
246
|
+
export type AnimationState = SingleAnimationState | MultiAnimationState;
|
|
204
247
|
/**
|
|
205
248
|
* Single spring animation state
|
|
206
|
-
* Supports both number and object animations
|
|
207
249
|
* @internal
|
|
208
250
|
*/
|
|
209
|
-
export type SingleAnimationState
|
|
251
|
+
export type SingleAnimationState = {
|
|
210
252
|
type: "single";
|
|
211
|
-
position:
|
|
212
|
-
velocity:
|
|
213
|
-
from:
|
|
214
|
-
to:
|
|
253
|
+
position: number;
|
|
254
|
+
velocity: number;
|
|
255
|
+
from: number;
|
|
256
|
+
to: number;
|
|
215
257
|
};
|
|
216
258
|
/**
|
|
217
259
|
* Multi-spring animation state
|
|
@@ -229,13 +271,11 @@ export type MultiAnimationState = {
|
|
|
229
271
|
* Implemented by both Animator (single spring) and AnimationScheduler (multi-spring)
|
|
230
272
|
* @internal
|
|
231
273
|
*/
|
|
232
|
-
export interface AnimationController
|
|
274
|
+
export interface AnimationController {
|
|
233
275
|
forward(): void;
|
|
234
276
|
backward(): void;
|
|
235
277
|
stop(): void;
|
|
236
|
-
reverse(
|
|
237
|
-
|
|
238
|
-
}): void;
|
|
239
|
-
getCurrentState(): AnimationState<T>;
|
|
278
|
+
reverse(): void;
|
|
279
|
+
getCurrentState(): AnimationState;
|
|
240
280
|
}
|
|
241
281
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"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"}
|
package/dist/types.js
CHANGED
|
@@ -1,10 +1,25 @@
|
|
|
1
|
-
function n
|
|
2
|
-
return "tick" in
|
|
1
|
+
function r(n) {
|
|
2
|
+
return ("tick" in n || "css" in n) && !("springs" in n);
|
|
3
3
|
}
|
|
4
|
-
function
|
|
5
|
-
return "springs" in
|
|
4
|
+
function e(n) {
|
|
5
|
+
return "springs" in n;
|
|
6
|
+
}
|
|
7
|
+
function i(n) {
|
|
8
|
+
return "css" in n && typeof n.css == "function";
|
|
9
|
+
}
|
|
10
|
+
function t(n) {
|
|
11
|
+
return "tick" in n && typeof n.tick == "function";
|
|
12
|
+
}
|
|
13
|
+
function s(n) {
|
|
14
|
+
if (i(n) && t(n))
|
|
15
|
+
throw new Error(
|
|
16
|
+
"SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other."
|
|
17
|
+
);
|
|
6
18
|
}
|
|
7
19
|
export {
|
|
8
|
-
|
|
9
|
-
|
|
20
|
+
i as isCssAnimation,
|
|
21
|
+
e as isMultiSpring,
|
|
22
|
+
r as isSingleSpring,
|
|
23
|
+
t as isTickAnimation,
|
|
24
|
+
s as validateAnimationMode
|
|
10
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drill.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/drill.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"drill.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/drill.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAe,MAAM,UAAU,CAAC;AAa3E,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB,KAAG,eAkHlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/hero.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI9D,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB,KAAG,
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/hero.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI9D,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB,KAAG,eA4KhD,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../jaemin-BG8HRXG1.cjs"),Y=t=>new Promise(n=>setTimeout(n,t));function V(t,n=0){const i=Math.pow(10,n);return Math.round(t*i)/i}const q={stiffness:80,damping:25},G={stiffness:75,damping:25},j=300,K=10,Z="horizontal",J="#000000",Q=(t={})=>{const{inSpring:n=G,outSpring:i=q,transitionDelay:d=j,blindCount:l=K,direction:r=Z,staggerDelay:c=100,blindColor:e=J}=t;let o,s=null;const a=(p,g,u="left")=>{window.getComputedStyle(p).position==="static"&&(p.style.position="relative");const h=document.createElement("div");h.className="blind-container",h.style.cssText=`
|
|
2
2
|
position: absolute;
|
|
3
3
|
top: 0;
|
|
4
4
|
left: 0;
|
|
@@ -7,29 +7,29 @@
|
|
|
7
7
|
pointer-events: none;
|
|
8
8
|
z-index: 9999;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
`;const f=[];for(let $=0;$<
|
|
10
|
+
`;const f=[];for(let $=0;$<l;$++){const x=document.createElement("div");if(r==="horizontal"){const w=100/l,C=`calc(${w}% + 1px)`;x.style.cssText=`
|
|
11
11
|
position: absolute;
|
|
12
|
-
top: ${
|
|
12
|
+
top: ${w*$}%;
|
|
13
13
|
left: 0;
|
|
14
14
|
width: 100%;
|
|
15
|
-
height: ${
|
|
15
|
+
height: ${C};
|
|
16
16
|
background: ${e};
|
|
17
17
|
transform: scaleX(${g==="hidden"?0:1});
|
|
18
18
|
transform-origin: ${u} center;
|
|
19
19
|
will-change: transform;
|
|
20
|
-
`}else{const
|
|
20
|
+
`}else{const w=100/l,C=`calc(${w}% + 1px)`;x.style.cssText=`
|
|
21
21
|
position: absolute;
|
|
22
22
|
top: 0;
|
|
23
|
-
left: ${
|
|
24
|
-
width: ${
|
|
23
|
+
left: ${w*$}%;
|
|
24
|
+
width: ${C};
|
|
25
25
|
height: 100%;
|
|
26
26
|
background: ${e};
|
|
27
27
|
transform: scaleY(${g==="hidden"?0:1});
|
|
28
28
|
transform-origin: ${u==="left"?"top":"bottom"} center;
|
|
29
29
|
will-change: transform;
|
|
30
|
-
`}f.push(
|
|
30
|
+
`}f.push(x),h.appendChild(x)}return p.appendChild(h),{container:h,blinds:f}};return{out:()=>{let p=null;return o=new Promise(u=>{s=u}),{springs:Array.from({length:l},(u,y)=>({from:0,to:1,spring:i,offset:y*c,tick:h=>{if(!p)return;const f=p.blinds[y];f&&(r==="horizontal"?f.style.transform=`scaleX(${h})`:f.style.transform=`scaleY(${h})`)}})),schedule:"chain",prepare:u=>{m.prepareOutgoing(u),u.style.zIndex="1000",p=a(u,"hidden","left")},onStart:()=>{},onEnd:()=>{s&&s()}}},in:()=>{let p=null;return{springs:Array.from({length:l},(u,y)=>({from:1,to:0,spring:n,offset:y*c,tick:h=>{if(!p)return;const f=p.blinds[y];f&&(r==="horizontal"?f.style.transform=`scaleX(${h})`:f.style.transform=`scaleY(${h})`)}})),schedule:"chain",prepare:u=>{u.style.position="relative",u.style.zIndex="0",p=a(u,"closed","right")},onStart:()=>{},wait:async()=>{o&&await o,await Y(d)},onEnd:()=>{p&&p.container&&p.container.remove()}}}}},R={stiffness:150,damping:20},tt={stiffness:100,damping:20},nt=(t={})=>{var r,c;const{opacity:n=!1,direction:i="enter"}=t,d=i==="enter"?R:tt,l={stiffness:((r=t.spring)==null?void 0:r.stiffness)??d.stiffness,damping:((c=t.spring)==null?void 0:c.damping)??d.damping};return i==="enter"?{in:e=>({spring:l,prepare:()=>{e.style.willChange=n?"transform, opacity":"transform",e.style.backfaceVisibility="hidden",e.style.contain="layout paint"},css:o=>{const s={transform:`translate3d(${(1-o)*100}%, 0, 0)`};return n&&(s.opacity=o),s},onEnd:()=>{e.style.willChange="auto",e.style.backfaceVisibility="",e.style.contain=""}}),out:(e,o)=>({spring:l,prepare:s=>{m.prepareOutgoing(s,o),s.style.zIndex="-1",s.style.willChange=n?"transform, opacity":"transform",s.style.backfaceVisibility="hidden",s.style.contain="layout paint",s.style.pointerEvents="none"},css:s=>{const a={transform:`translate3d(${-(1-s)*20}%, 0, 0)`};return n&&(a.opacity=s),a}})}:{in:e=>({spring:l,prepare:()=>{e.style.willChange=n?"transform, opacity":"transform",e.style.backfaceVisibility="hidden",e.style.contain="layout paint"},css:o=>{const s={transform:`translate3d(${-(1-o)*20}%, 0, 0)`};return n&&(s.opacity=o),s},onEnd:()=>{e.style.willChange="auto",e.style.backfaceVisibility="",e.style.contain=""}}),out:(e,o)=>({spring:l,prepare:s=>{m.prepareOutgoing(s,o),s.style.zIndex="100",s.style.willChange=n?"transform, opacity":"transform",s.style.backfaceVisibility="hidden",s.style.contain="layout paint",s.style.pointerEvents="none"},css:s=>{const a={transform:`translate3d(${(1-s)*100}%, 0, 0)`};return n&&(a.opacity=s),a}})}},et={stiffness:65,damping:16},it={stiffness:65,damping:14},st=0,rt=(t={})=>{const{inSpring:n=it,outSpring:i=et,transitionDelay:d=st}=t;let l,r=null;return{in:c=>({spring:n,prepare:e=>{e.style.opacity="0",e.style.willChange="opacity"},wait:async()=>{l&&(await l,await Y(d))},tick:e=>{const o=V(e,2);c.style.opacity=o.toString()},onEnd:()=>{c.style.willChange="auto"}}),out:(c,e)=>(l=new Promise(o=>{r=o}),{spring:i,tick:o=>{c.style.opacity=o.toString()},prepare:()=>{m.prepareOutgoing(c,e),c.style.willChange="opacity"},onEnd:()=>{r&&r(),c.style.willChange="auto"}})}},lt={stiffness:5,damping:3.5},at=.8,ot="white",b={start:0,end:.45},E={start:.85,end:1},A={start:.2,end:.9},ct=t=>{var l;const n=(t==null?void 0:t.spring)??lt,i=(t==null?void 0:t.scale)??at,d=((l=t==null?void 0:t.border)==null?void 0:l.color)??ot;return{out:async(r,c)=>{const e=_(c),o=m.getRect(document.body,c.positionedParent),s=ht(d,{...e,top:o.top});let a=1,p=-e.top;return{spring:n,prepare:()=>{m.prepareOutgoing(r),P(r,e),I(r,e),pt(r,e);for(const g of s)c.positionedParent.appendChild(g)},onEnd:()=>{r.style.clipPath="",r.style.transformOrigin="",setTimeout(()=>{for(const g of s)c.positionedParent.removeChild(g)},1e3)},tick:g=>{const u=1-g;if(b.start<=u&&u<=b.end){const f=L(u,b.start,b.end);a=1-(1-i)*f}if(E.start<=u&&u<=E.end){const f=L(u,E.start,E.end);a=i+(1-i)*f}if(A.start<=u&&u<=A.end){const f=L(u,A.start,A.end);p=-e.top-e.height*f}r.style.transform=`translateY(${p}px) scale(${a})`;const y=(e.width-e.width*a)/2,h=(e.height-e.height*a)/2;dt(s,y,h)}}},in:async(r,c)=>{const e=_(c);let o=i,s=-e.top+e.height;return{spring:n,prepare:()=>{P(r,e),I(r,e),r.style.transform=`translateY(${-e.top+e.height}px) scale(${i})`},onEnd:()=>{r.style.clipPath="",r.style.transformOrigin="",r.style.transform=""},tick:a=>{if(b.start<=a&&a<=b.end){const p=L(a,b.start,b.end);o=1-(1-i)*p}if(E.start<=a&&a<=E.end){const p=L(a,E.start,E.end);o=i+(1-i)*p}if(A.start<=a&&a<=A.end){const p=L(a,A.start,A.end);s=-e.top+e.height*(1-p)}r.style.transform=`translateY(${s}px) scale(${o})`}}}}};function dt(t,n,i){const d=n*.7,l=i*.7;t.topLeft.style.transform=`translate(${d}px, ${l}px)`,t.topRight.style.transform=`translate(${-d}px, ${l}px)`,t.bottomLeft.style.transform=`translate(${d}px, ${-l}px)`,t.bottomRight.style.transform=`translate(${-d}px, ${-l}px)`}function ht(t="white",n){const l=document.createElement("div");l.style.position="fixed",l.style.pointerEvents="none",l.style.zIndex="9999",l.style.top=`${n.top-1}px`,l.style.left=`${n.left-1}px`,l.style.width="15px",l.style.height="15px";const r=document.createElement("div");r.style.position="absolute",r.style.width="15px",r.style.height="1px",r.style.backgroundColor=t,r.style.top="0",r.style.left="0";const c=document.createElement("div");c.style.position="absolute",c.style.width="1px",c.style.height="15px",c.style.backgroundColor=t,c.style.top="0",c.style.left="0",l.appendChild(r),l.appendChild(c);const e=document.createElement("div");e.style.position="fixed",e.style.pointerEvents="none",e.style.zIndex="9999",e.style.top=`${n.top-1}px`,e.style.left=`${n.left+n.width-15+1}px`,e.style.width="15px",e.style.height="15px";const o=document.createElement("div");o.style.position="absolute",o.style.width="15px",o.style.height="1px",o.style.backgroundColor=t,o.style.top="0",o.style.right="0";const s=document.createElement("div");s.style.position="absolute",s.style.width="1px",s.style.height="15px",s.style.backgroundColor=t,s.style.top="0",s.style.right="0",e.appendChild(o),e.appendChild(s);const a=document.createElement("div");a.style.position="fixed",a.style.pointerEvents="none",a.style.zIndex="9999",a.style.top=`${n.top+n.height-15+1}px`,a.style.left=`${n.left-1}px`,a.style.width="15px",a.style.height="15px";const p=document.createElement("div");p.style.position="absolute",p.style.width="15px",p.style.height="1px",p.style.backgroundColor=t,p.style.bottom="0",p.style.left="0";const g=document.createElement("div");g.style.position="absolute",g.style.width="1px",g.style.height="15px",g.style.backgroundColor=t,g.style.bottom="0",g.style.left="0",a.appendChild(p),a.appendChild(g);const u=document.createElement("div");u.style.position="fixed",u.style.pointerEvents="none",u.style.zIndex="9999",u.style.top=`${n.top+n.height-15+1}px`,u.style.left=`${n.left+n.width-15+1}px`,u.style.width="15px",u.style.height="15px";const y=document.createElement("div");y.style.position="absolute",y.style.width="15px",y.style.height="1px",y.style.backgroundColor=t,y.style.bottom="0",y.style.right="0";const h=document.createElement("div");return h.style.position="absolute",h.style.width="1px",h.style.height="15px",h.style.backgroundColor=t,h.style.bottom="0",h.style.right="0",u.appendChild(y),u.appendChild(h),{topLeft:l,topRight:e,bottomLeft:a,bottomRight:u,*[Symbol.iterator](){yield l,yield e,yield a,yield u}}}function _(t){const n=m.getRect(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:n.width,height:window.innerHeight-n.top}}function P(t,n){const i=n.left+n.width/2,d=n.top+n.height/2;t.style.transformOrigin=`${i}px ${d}px`}function I(t,n){t.style.clipPath=`polygon(
|
|
31
31
|
${n.left}px ${n.top}px,
|
|
32
32
|
${n.left+n.width}px ${n.top}px,
|
|
33
33
|
${n.left+n.width}px ${n.top+n.height}px,
|
|
34
34
|
${n.left}px ${n.top+n.height}px
|
|
35
|
-
)`}function pt(t,n){t.style.transform=`translateY(${-n.top}px)`}function L(t,n,i){return t<=n?0:t>=i?1:(t-n)/(i-n)}function yt(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}const ut=(t={})=>{var c,e;const n={stiffness:((c=t.spring)==null?void 0:c.stiffness)??300,damping:((e=t.spring)==null?void 0:e.damping)??30},i=t.timeout??300,d=t.maxDistance??700;let r=null,s=null;return{in:async(a,l)=>{const o=a,p=Array.from(o.querySelectorAll("[data-hero-key]"));if(p.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(y=>{r?y(!0):(s=y,setTimeout(()=>{s=null,y(!1)},i))})||!r)return r=null,{spring:n,tick:()=>{}};const u=p.map(y=>{const h=y.getAttribute("data-hero-key");if(!h)return null;const f=yt(r,h);if(!f)return null;const $=y,w=b.getRect(r,f),x=b.getRect(o,$),S=w.left-x.left-l.scrollOffset.x,U=w.top-x.top-l.scrollOffset.y,W=w.width/x.width,X=w.height/x.height,z=$.style.transform,B=$.style.position,M=$.style.transformOrigin,H=$.style.zIndex,N=$.style.willChange;return{toEl:$,dx:S,dy:U,dw:W,dh:X,originalTransform:z,originalPosition:B,originalTransformOrigin:M,originalZIndex:H,originalWillChange:N}}).filter(y=>y!==null&&Math.abs(y.dy)<=d);return r=null,u.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{u.forEach(({toEl:y})=>{y.style.position="relative",y.style.transformOrigin="top left",y.style.zIndex="1000",y.style.willChange="transform"})},tick:y=>{u.forEach(({toEl:h,dx:f,dy:$,dw:w,dh:x})=>{h.style.transform=`translate(${(1-y)*f}px,${(1-y)*$}px) scale(${y+(1-y)*w}, ${y+(1-y)*x})`})},onEnd:()=>{u.forEach(({toEl:y,originalTransform:h,originalPosition:f,originalTransformOrigin:$,originalZIndex:w,originalWillChange:x})=>{y.style.transform=h,y.style.position=f,y.style.transformOrigin=$,y.style.zIndex=w,y.style.willChange=x})}}},out:async a=>({onStart:()=>{r=a,s&&(s(!0),s=null)},prepare:l=>{b.prepareOutgoing(l),l.style.opacity="0"}})}};function gt({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},r){const s=n.left-t.left+(n.width-t.width)/2-d.x,c=n.top-t.top+(n.height-t.height)/2-d.y,e=n.width/t.width,a=n.height/t.height,l=Math.max(e,a),o=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return r.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=o*h,$=p*h,w=g*h,x=u*h;r.style.clipPath=`inset(${f}% ${$}% ${w}% ${x}%)`,r.style.transform=`translate(${s*h}px, ${c*h}px) scale(${1+(l-1)*h})`}}function ft({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},r){const s=n.left-t.left+(n.width-t.width)/2+d.x,c=n.top-t.top+(n.height-t.height)/2+d.y,e=n.width/t.width,a=n.height/t.height,l=Math.min(e,a),o=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return r.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=o*h,$=p*h,w=g*h,x=u*h;r.style.clipPath=`inset(${f}% ${$}% ${w}% ${x}%)`,r.style.transform=`translate(${s*h-d.x}px, ${c*h-d.y}px) scale(${1+(l-1)*h})`}}function $t(t,n,i){const d=t.querySelector("[data-instagram-detail-key]"),r=n.querySelector("[data-instagram-detail-key]");if(t.querySelectorAll("[data-instagram-detail-key]").length>1||n.querySelectorAll("[data-instagram-detail-key]").length>1)return null;let s=null,c=null,e=!1;if(!d&&r){c=r;const o=c.getAttribute("data-instagram-detail-key");if(!o)return null;s=t.querySelector(`[data-instagram-gallery-key="${o}"]`),s&&(e=!0)}else if(d&&!r){c=d;const o=c.getAttribute("data-instagram-detail-key");if(!o)return null;s=n.querySelector(`[data-instagram-gallery-key="${o}"]`),s&&(e=!1)}if(!s||!c)return null;const a=b.getRect(e?t:n,s),l=b.getRect(e?n:t,c);return e?{isEnterMode:!0,inAnimation:gt({detailRect:l,galleryRect:a,pageRect:n.getBoundingClientRect(),scrollOffset:i},n)}:{isEnterMode:!1,outAnimation:ft({detailRect:l,galleryRect:a,pageRect:t.getBoundingClientRect(),scrollOffset:i},t)}}const xt=(t={})=>{var c,e;const n={stiffness:((c=t.spring)==null?void 0:c.stiffness)??150,damping:((e=t.spring)==null?void 0:e.damping)??20},i=t.timeout??300;let d=null,r=null,s=null;return{in:async(a,{scrollOffset:l})=>{const o=a;return!await new Promise(g=>{d?g(!0):(r=g,setTimeout(()=>{r=null,g(!1)},i))})||!d?(d=null,{spring:n,tick:()=>{}}):(s=$t(d,o,l),s?(d=null,{spring:n,tick:g=>{s!=null&&s.inAnimation&&s.inAnimation(g)}}):{spring:n,tick:()=>{}})},out:async a=>({spring:n,onStart:()=>{d=a,r&&(r(!0),r=null)},prepare:l=>{b.prepareOutgoing(l),s!=null&&s.isEnterMode||(l.style.zIndex="-1")},tick:l=>{s!=null&&s.outAnimation&&s.outAnimation(l)}})}};function wt({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},r){const s=n.left-t.left+(n.width-t.width)/2-d.x,c=n.top-t.top+(n.height-t.height)/2-d.y,e=n.width/t.width,a=n.height/t.height,l=Math.max(e,a),o=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return r.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=o*h,$=p*h,w=g*h,x=u*h;r.style.clipPath=`inset(${f}% ${$}% ${w}% ${x}%)`,r.style.transform=`translate(${s*h}px, ${c*h}px) scale(${1+(l-1)*h})`}}function bt({galleryRect:t,detailRect:n,scrollOffset:i},d){const r=n.left-t.left+(n.width-t.width)/2+i.x,s=n.top-t.top+(n.height-t.height)/2+i.y,c=n.width/t.width,e=n.height/t.height,a=Math.max(c,e);return l=>{d.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const o=1-l;d.style.transform=`translate(${r*o-i.x}px, ${s*o-i.y}px) scale(${1+(a-1)*o})`,d.style.opacity=`${1-o}`}}function mt({galleryRect:t,detailRect:n,scrollOffset:i},d){const r=n.left-t.left+(n.width-t.width)/2-i.x,s=n.top-t.top+(n.height-t.height)/2-i.y,c=n.width/t.width,e=n.height/t.height,a=Math.max(c,e);return l=>{const o=1-l,p=l;d.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,d.style.transform=`translate(${r*o}px, ${s*o}px) scale(${1+(a-1)*o})`,d.style.opacity=`${p}`}}function Et({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},r){const s=n.left-t.left+(n.width-t.width)/2+d.x,c=n.top-t.top+(n.height-t.height)/2+d.y,e=n.width/t.width,a=n.height/t.height,l=Math.min(e,a),o=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return r.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=o*h,$=p*h,w=g*h,x=u*h;r.style.clipPath=`inset(${f}% ${$}% ${w}% ${x}%)`,r.style.transform=`translate(${s*h-d.x}px, ${c*h-d.y}px) scale(${1+(l-1)*h})`}}function At(t,n,i){const d=t.querySelector("[data-pinterest-detail-key]"),r=n.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||n.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let s=null,c=null,e=!1;if(!d&&r){c=r;const o=c.getAttribute("data-pinterest-detail-key");if(!o)return null;s=t.querySelector(`[data-pinterest-gallery-key="${o}"]`),s&&(e=!0)}else if(d&&!r){c=d;const o=c.getAttribute("data-pinterest-detail-key");if(!o)return null;s=n.querySelector(`[data-pinterest-gallery-key="${o}"]`),s&&(e=!1)}if(!s||!c)return null;const a=b.getRect(e?t:n,s),l=b.getRect(e?n:t,c);return e?{inAnimation:wt({detailRect:l,galleryRect:a,pageRect:n.getBoundingClientRect(),scrollOffset:i},n),outAnimation:bt({galleryRect:a,detailRect:l,scrollOffset:i},t)}:{inAnimation:mt({galleryRect:a,detailRect:l,scrollOffset:i},n),outAnimation:Et({detailRect:l,galleryRect:a,pageRect:t.getBoundingClientRect(),scrollOffset:i},t)}}const Lt=(t={})=>{var c,e;const n={stiffness:((c=t.spring)==null?void 0:c.stiffness)??30,damping:((e=t.spring)==null?void 0:e.damping)??10},i=t.timeout??300;let d=null,r=null,s=null;return{in:async(a,{scrollOffset:l})=>{const o=a;return!await new Promise(g=>{d?g(!0):(r=g,setTimeout(()=>{r=null,g(!1)},i))})||!d?(d=null,{spring:n,tick:()=>{}}):(s=At(d,o,l),s?(d=null,{spring:n,tick:g=>{s&&s.inAnimation(g)}}):{spring:n,tick:()=>{}})},out:async a=>({spring:n,onStart:()=>{d=a,r&&(r(!0),r=null)},prepare:l=>{b.prepareOutgoing(l),l.style.zIndex="-1"},tick:l=>{s&&s.outAnimation(l)}})}},I={stiffness:5,damping:4},St=(t={})=>{var a,l;const n=t.direction??"up",i={stiffness:((a=t.spring)==null?void 0:a.stiffness)??I.stiffness,damping:((l=t.spring)==null?void 0:l.damping)??I.damping},d=n==="up";let r=null,s=null,c=null;const e=()=>{if(r===null||s===null)return null;const o=Math.min(r,s),p=window.innerHeight;return Math.max(o,p)};return{in:o=>(s=o.offsetHeight,r!==null&&(c=e()),{spring:i,prepare:()=>{o.style.willChange="transform"},tick:p=>{if(c===null&&(c=e(),c===null))return;const g=d?(1-p)*c:(1-p)*-c;o.style.transform=`translateY(${g}px)`},onEnd:()=>{o.style.willChange="auto"}}),out:o=>({spring:i,onStart:()=>{r=o.offsetHeight,s!==null&&(c=e())},tick:p=>{if(c===null&&(c=e(),c===null))return;const g=d?(1-p)*-c:(1-p)*c;o.style.transform=`translateY(${g}px)`},prepare:p=>{b.prepareOutgoing(p),p.style.zIndex=d?"-1":"1",p.style.willChange="transform"}})}},D={stiffness:15,damping:7},Ct=(t={})=>{var r,s;const n=t.direction??"left",i={stiffness:((r=t.spring)==null?void 0:r.stiffness)??D.stiffness,damping:((s=t.spring)==null?void 0:s.damping)??D.damping},d=n==="left";return{in:c=>({spring:i,prepare:()=>{c.style.willChange="transform"},tick:e=>{const a=d?(1-e)*100:(1-e)*-100;c.style.transform=`translateX(${a}%)`},onEnd:()=>{c.style.willChange="auto"}}),out:(c,e)=>({spring:i,tick:a=>{const l=d?(1-a)*-100:(1-a)*100;c.style.transform=`translateX(${l}%)`},prepare:a=>{b.prepareOutgoing(a,e),a.style.zIndex=d?"-1":"1",a.style.willChange="transform"}})}},O={stiffness:17,damping:6},T=20,k=800,Tt=()=>{let t,n=null;return{in:i=>({spring:O,prepare:d=>{d.style.willChange="transform",d.style.transform=`perspective(${k}px) rotateY(${T}deg) translateX(-100%)`},wait:async()=>{t&&await t},tick:d=>{const r=(1-d)*T,s=-(1-d)*100;i.style.transform=`perspective(${k}px) rotateY(${r}deg) translateX(${s}%)`},onEnd:()=>{i.style.transform="",i.style.willChange="auto"}}),out:(i,d)=>(t=new Promise(r=>{n=r}),{spring:O,prepare:r=>{b.prepareOutgoing(r,d),r.style.willChange="transform"},tick:r=>{const s=1-r,c=s*T,e=s*100;i.style.transform=`perspective(${k}px) rotateY(${-c}deg) translateX(${e}%)`},onEnd:()=>{n&&n(),i.style.transform=""}})}},kt={stiffness:1,damping:1},vt={stiffness:20,damping:25},Pt="#000000",_t="circle",F="CURTAIN_REVEAL_OVERLAY_ID",It={position:"fixed",inset:"0",width:"100vw",height:"100%",zIndex:"9999",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"},Dt={position:"relative",display:"inline-block",height:"5.5rem",overflow:"hidden"},Ot={display:"flex",height:"100%",willChange:"transform",transition:"transform 0.3s ease"},Ft={display:"inline-flex",alignItems:"center",justifyContent:"center",whiteSpace:"nowrap",fontSize:"5.5rem",fontWeight:"900",letterSpacing:"0.02em",color:"#FFFFFF"},Yt=.4,C=.5,Ut=.2;function Wt(t,n){switch(t){case"circle":return`circle(${n*100}% at 50% 50%)`;case"square":return`inset(${(1-n)*50}% round ${10*n}%)`;case"triangle":{const i=n*100;return`polygon(50% ${50-i}%, ${50-i}% ${50+i}%, ${50+i}% ${50+i}%)`}}}const Xt=t=>t.reduce((n,i)=>n+i,0),zt=(t={})=>{const{background:n=Pt,texts:i=[],shape:d=_t,inSpring:r=vt,outSpring:s=kt,textStyle:c={}}=t;return{out:(e,a)=>{const l=e.style.opacity;return{spring:s,from:1,to:0,prepare:o=>{b.prepareOutgoing(o,a),o.style.opacity="1"},tick:o=>{const p=Math.max(0,o-Yt);e.style.opacity=String(p)},onEnd:()=>{e.style.opacity=l}}},in:e=>{let a=null,l=null,o=null;const p=document.body.style.overflow,g=document.getElementById(F);let u=[];const y=()=>{a=document.createElement("div"),a.id=F,Object.assign(a.style,It,{background:n}),document.body.appendChild(a),l=document.createElement("div"),Object.assign(l.style,Dt),a.appendChild(l),o=document.createElement("div"),Object.assign(o.style,Ot),l.appendChild(o),i.forEach(h=>{const f=document.createElement("div");f.textContent=h,Object.assign(f.style,Ft,c),o.appendChild(f)}),u=Array.from(o.children).map(h=>h.getBoundingClientRect().width)};return{spring:r,from:0,to:1,prepare:()=>{document.body.style.overflow="hidden",e.style.opacity="1",g==null||g.remove(),y(),a&&l&&(a.style.clipPath="none",l.style.transform="scale(1)")},tick:h=>{if(!(!a||!l||!o)){if(h<=C&&i.length>0){const f=h/C,$=Math.min(Math.floor(f*i.length),i.length-1),w=u[$]??0,x=Xt(u.slice(0,$));l.style.width=`${w}px`,o.style.transform=`translateX(-${x}px)`}if(h>C){const $=1-Math.max(0,Math.min(1,(h-C)/Ut));a.style.clipPath=Wt(d,$),l.style.transform=`scale(${$})`}}},onEnd:()=>{a==null||a.remove(),a=l=o=null,document.body.style.overflow=p}}}}};exports.jaemin=b.jaemin;exports.blind=Q;exports.curtainReveal=zt;exports.drill=nt;exports.fade=rt;exports.film=ct;exports.hero=ut;exports.instagram=xt;exports.pinterest=Lt;exports.scroll=St;exports.slide=Ct;exports.strip=Tt;
|
|
35
|
+
)`}function pt(t,n){t.style.transform=`translateY(${-n.top}px)`}function L(t,n,i){return t<=n?0:t>=i?1:(t-n)/(i-n)}function yt(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}const ut=(t={})=>{var c,e;const n={stiffness:((c=t.spring)==null?void 0:c.stiffness)??300,damping:((e=t.spring)==null?void 0:e.damping)??30},i=t.timeout??300,d=t.maxDistance??700;let l=null,r=null;return{in:async(o,s)=>{const a=o,p=Array.from(a.querySelectorAll("[data-hero-key]"));if(p.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(y=>{l?y(!0):(r=y,setTimeout(()=>{r=null,y(!1)},i))})||!l)return l=null,{spring:n,tick:()=>{}};const u=p.map(y=>{const h=y.getAttribute("data-hero-key");if(!h)return null;const f=yt(l,h);if(!f)return null;const $=y,x=m.getRect(l,f),w=m.getRect(a,$),C=x.left-w.left-s.scrollOffset.x,U=x.top-w.top-s.scrollOffset.y,W=x.width/w.width,X=x.height/w.height,z=$.style.transform,B=$.style.position,M=$.style.transformOrigin,H=$.style.zIndex,N=$.style.willChange;return{toEl:$,dx:C,dy:U,dw:W,dh:X,originalTransform:z,originalPosition:B,originalTransformOrigin:M,originalZIndex:H,originalWillChange:N}}).filter(y=>y!==null&&Math.abs(y.dy)<=d);return l=null,u.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{u.forEach(({toEl:y})=>{y.style.position="relative",y.style.transformOrigin="top left",y.style.zIndex="1000",y.style.willChange="transform"})},tick:y=>{u.forEach(({toEl:h,dx:f,dy:$,dw:x,dh:w})=>{h.style.transform=`translate(${(1-y)*f}px,${(1-y)*$}px) scale(${y+(1-y)*x}, ${y+(1-y)*w})`})},onEnd:()=>{u.forEach(({toEl:y,originalTransform:h,originalPosition:f,originalTransformOrigin:$,originalZIndex:x,originalWillChange:w})=>{y.style.transform=h,y.style.position=f,y.style.transformOrigin=$,y.style.zIndex=x,y.style.willChange=w})}}},out:async o=>({onStart:()=>{l=o,r&&(r(!0),r=null)},tick:()=>{},prepare:s=>{m.prepareOutgoing(s),s.style.opacity="0"}})}};function gt({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},l){const r=n.left-t.left+(n.width-t.width)/2-d.x,c=n.top-t.top+(n.height-t.height)/2-d.y,e=n.width/t.width,o=n.height/t.height,s=Math.max(e,o),a=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=a*h,$=p*h,x=g*h,w=u*h;l.style.clipPath=`inset(${f}% ${$}% ${x}% ${w}%)`,l.style.transform=`translate(${r*h}px, ${c*h}px) scale(${1+(s-1)*h})`}}function ft({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},l){const r=n.left-t.left+(n.width-t.width)/2+d.x,c=n.top-t.top+(n.height-t.height)/2+d.y,e=n.width/t.width,o=n.height/t.height,s=Math.min(e,o),a=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=a*h,$=p*h,x=g*h,w=u*h;l.style.clipPath=`inset(${f}% ${$}% ${x}% ${w}%)`,l.style.transform=`translate(${r*h-d.x}px, ${c*h-d.y}px) scale(${1+(s-1)*h})`}}function $t(t,n,i){const d=t.querySelector("[data-instagram-detail-key]"),l=n.querySelector("[data-instagram-detail-key]");if(t.querySelectorAll("[data-instagram-detail-key]").length>1||n.querySelectorAll("[data-instagram-detail-key]").length>1)return null;let r=null,c=null,e=!1;if(!d&&l){c=l;const a=c.getAttribute("data-instagram-detail-key");if(!a)return null;r=t.querySelector(`[data-instagram-gallery-key="${a}"]`),r&&(e=!0)}else if(d&&!l){c=d;const a=c.getAttribute("data-instagram-detail-key");if(!a)return null;r=n.querySelector(`[data-instagram-gallery-key="${a}"]`),r&&(e=!1)}if(!r||!c)return null;const o=m.getRect(e?t:n,r),s=m.getRect(e?n:t,c);return e?{isEnterMode:!0,inAnimation:gt({detailRect:s,galleryRect:o,pageRect:n.getBoundingClientRect(),scrollOffset:i},n)}:{isEnterMode:!1,outAnimation:ft({detailRect:s,galleryRect:o,pageRect:t.getBoundingClientRect(),scrollOffset:i},t)}}const wt=(t={})=>{var c,e;const n={stiffness:((c=t.spring)==null?void 0:c.stiffness)??150,damping:((e=t.spring)==null?void 0:e.damping)??20},i=t.timeout??300;let d=null,l=null,r=null;return{in:async(o,{scrollOffset:s})=>{const a=o;return!await new Promise(g=>{d?g(!0):(l=g,setTimeout(()=>{l=null,g(!1)},i))})||!d?(d=null,{spring:n,tick:()=>{}}):(r=$t(d,a,s),r?(d=null,{spring:n,tick:g=>{r!=null&&r.inAnimation&&r.inAnimation(g)}}):{spring:n,tick:()=>{}})},out:async o=>({spring:n,onStart:()=>{d=o,l&&(l(!0),l=null)},prepare:s=>{m.prepareOutgoing(s),r!=null&&r.isEnterMode||(s.style.zIndex="-1")},tick:s=>{r!=null&&r.outAnimation&&r.outAnimation(s)}})}};function xt({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},l){const r=n.left-t.left+(n.width-t.width)/2-d.x,c=n.top-t.top+(n.height-t.height)/2-d.y,e=n.width/t.width,o=n.height/t.height,s=Math.max(e,o),a=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=a*h,$=p*h,x=g*h,w=u*h;l.style.clipPath=`inset(${f}% ${$}% ${x}% ${w}%)`,l.style.transform=`translate(${r*h}px, ${c*h}px) scale(${1+(s-1)*h})`}}function mt({galleryRect:t,detailRect:n,scrollOffset:i},d){const l=n.left-t.left+(n.width-t.width)/2+i.x,r=n.top-t.top+(n.height-t.height)/2+i.y,c=n.width/t.width,e=n.height/t.height,o=Math.max(c,e);return s=>{d.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const a=1-s;d.style.transform=`translate(${l*a-i.x}px, ${r*a-i.y}px) scale(${1+(o-1)*a})`,d.style.opacity=`${1-a}`}}function bt({galleryRect:t,detailRect:n,scrollOffset:i},d){const l=n.left-t.left+(n.width-t.width)/2-i.x,r=n.top-t.top+(n.height-t.height)/2-i.y,c=n.width/t.width,e=n.height/t.height,o=Math.max(c,e);return s=>{const a=1-s,p=s;d.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,d.style.transform=`translate(${l*a}px, ${r*a}px) scale(${1+(o-1)*a})`,d.style.opacity=`${p}`}}function Et({detailRect:t,galleryRect:n,pageRect:i,scrollOffset:d},l){const r=n.left-t.left+(n.width-t.width)/2+d.x,c=n.top-t.top+(n.height-t.height)/2+d.y,e=n.width/t.width,o=n.height/t.height,s=Math.min(e,o),a=t.top/i.height*100,p=(i.width-(t.left+t.width))/i.width*100,g=(i.height-(t.top+t.height))/i.height*100,u=t.left/i.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,y=>{const h=1-y,f=a*h,$=p*h,x=g*h,w=u*h;l.style.clipPath=`inset(${f}% ${$}% ${x}% ${w}%)`,l.style.transform=`translate(${r*h-d.x}px, ${c*h-d.y}px) scale(${1+(s-1)*h})`}}function At(t,n,i){const d=t.querySelector("[data-pinterest-detail-key]"),l=n.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||n.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let r=null,c=null,e=!1;if(!d&&l){c=l;const a=c.getAttribute("data-pinterest-detail-key");if(!a)return null;r=t.querySelector(`[data-pinterest-gallery-key="${a}"]`),r&&(e=!0)}else if(d&&!l){c=d;const a=c.getAttribute("data-pinterest-detail-key");if(!a)return null;r=n.querySelector(`[data-pinterest-gallery-key="${a}"]`),r&&(e=!1)}if(!r||!c)return null;const o=m.getRect(e?t:n,r),s=m.getRect(e?n:t,c);return e?{inAnimation:xt({detailRect:s,galleryRect:o,pageRect:n.getBoundingClientRect(),scrollOffset:i},n),outAnimation:mt({galleryRect:o,detailRect:s,scrollOffset:i},t)}:{inAnimation:bt({galleryRect:o,detailRect:s,scrollOffset:i},n),outAnimation:Et({detailRect:s,galleryRect:o,pageRect:t.getBoundingClientRect(),scrollOffset:i},t)}}const Lt=(t={})=>{var c,e;const n={stiffness:((c=t.spring)==null?void 0:c.stiffness)??30,damping:((e=t.spring)==null?void 0:e.damping)??10},i=t.timeout??300;let d=null,l=null,r=null;return{in:async(o,{scrollOffset:s})=>{const a=o;return!await new Promise(g=>{d?g(!0):(l=g,setTimeout(()=>{l=null,g(!1)},i))})||!d?(d=null,{spring:n,tick:()=>{}}):(r=At(d,a,s),r?(d=null,{spring:n,tick:g=>{r&&r.inAnimation(g)}}):{spring:n,tick:()=>{}})},out:async o=>({spring:n,onStart:()=>{d=o,l&&(l(!0),l=null)},prepare:s=>{m.prepareOutgoing(s),s.style.zIndex="-1"},tick:s=>{r&&r.outAnimation(s)}})}},D={stiffness:5,damping:4},Ct=(t={})=>{var o,s;const n=t.direction??"up",i={stiffness:((o=t.spring)==null?void 0:o.stiffness)??D.stiffness,damping:((s=t.spring)==null?void 0:s.damping)??D.damping},d=n==="up";let l=null,r=null,c=null;const e=()=>{if(l===null||r===null)return null;const a=Math.min(l,r),p=window.innerHeight;return Math.max(a,p)};return{in:a=>(r=a.offsetHeight,l!==null&&(c=e()),{spring:i,prepare:()=>{a.style.willChange="transform"},tick:p=>{if(c===null&&(c=e(),c===null))return;const g=d?(1-p)*c:(1-p)*-c;a.style.transform=`translateY(${g}px)`},onEnd:()=>{a.style.willChange="auto"}}),out:a=>({spring:i,onStart:()=>{l=a.offsetHeight,r!==null&&(c=e())},tick:p=>{if(c===null&&(c=e(),c===null))return;const g=d?(1-p)*-c:(1-p)*c;a.style.transform=`translateY(${g}px)`},prepare:p=>{m.prepareOutgoing(p),p.style.zIndex=d?"-1":"1",p.style.willChange="transform"}})}},v={stiffness:15,damping:7},Tt=(t={})=>{var l,r;const n=t.direction??"left",i={stiffness:((l=t.spring)==null?void 0:l.stiffness)??v.stiffness,damping:((r=t.spring)==null?void 0:r.damping)??v.damping},d=n==="left";return{in:c=>({spring:i,prepare:()=>{c.style.willChange="transform"},tick:e=>{const o=d?(1-e)*100:(1-e)*-100;c.style.transform=`translateX(${o}%)`},onEnd:()=>{c.style.willChange="auto"}}),out:(c,e)=>({spring:i,tick:o=>{const s=d?(1-o)*-100:(1-o)*100;c.style.transform=`translateX(${s}%)`},prepare:o=>{m.prepareOutgoing(o,e),o.style.zIndex=d?"-1":"1",o.style.willChange="transform"}})}},O={stiffness:17,damping:6},S=20,k=800,St=()=>{let t,n=null;return{in:i=>({spring:O,prepare:d=>{d.style.willChange="transform",d.style.transform=`perspective(${k}px) rotateY(${S}deg) translateX(-100%)`},wait:async()=>{t&&await t},tick:d=>{const l=(1-d)*S,r=-(1-d)*100;i.style.transform=`perspective(${k}px) rotateY(${l}deg) translateX(${r}%)`},onEnd:()=>{i.style.transform="",i.style.willChange="auto"}}),out:(i,d)=>(t=new Promise(l=>{n=l}),{spring:O,prepare:l=>{m.prepareOutgoing(l,d),l.style.willChange="transform"},tick:l=>{const r=1-l,c=r*S,e=r*100;i.style.transform=`perspective(${k}px) rotateY(${-c}deg) translateX(${e}%)`},onEnd:()=>{n&&n(),i.style.transform=""}})}},kt={stiffness:1,damping:1},_t={stiffness:20,damping:25},Pt="#000000",It="circle",F="CURTAIN_REVEAL_OVERLAY_ID",Dt={position:"fixed",inset:"0",width:"100vw",height:"100%",zIndex:"9999",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"},vt={position:"relative",display:"inline-block",height:"5.5rem",overflow:"hidden"},Ot={display:"flex",height:"100%",willChange:"transform",transition:"transform 0.3s ease"},Ft={display:"inline-flex",alignItems:"center",justifyContent:"center",whiteSpace:"nowrap",fontSize:"5.5rem",fontWeight:"900",letterSpacing:"0.02em",color:"#FFFFFF"},Yt=.4,T=.5,Ut=.2;function Wt(t,n){switch(t){case"circle":return`circle(${n*100}% at 50% 50%)`;case"square":return`inset(${(1-n)*50}% round ${10*n}%)`;case"triangle":{const i=n*100;return`polygon(50% ${50-i}%, ${50-i}% ${50+i}%, ${50+i}% ${50+i}%)`}}}const Xt=t=>t.reduce((n,i)=>n+i,0),zt=(t={})=>{const{background:n=Pt,texts:i=[],shape:d=It,inSpring:l=_t,outSpring:r=kt,textStyle:c={}}=t;return{out:(e,o)=>{const s=e.style.opacity;return{spring:r,from:1,to:0,prepare:a=>{m.prepareOutgoing(a,o),a.style.opacity="1"},tick:a=>{const p=Math.max(0,a-Yt);e.style.opacity=String(p)},onEnd:()=>{e.style.opacity=s}}},in:e=>{let o=null,s=null,a=null;const p=document.body.style.overflow,g=document.getElementById(F);let u=[];const y=()=>{o=document.createElement("div"),o.id=F,Object.assign(o.style,Dt,{background:n}),document.body.appendChild(o),s=document.createElement("div"),Object.assign(s.style,vt),o.appendChild(s),a=document.createElement("div"),Object.assign(a.style,Ot),s.appendChild(a),i.forEach(h=>{const f=document.createElement("div");f.textContent=h,Object.assign(f.style,Ft,c),a.appendChild(f)}),u=Array.from(a.children).map(h=>h.getBoundingClientRect().width)};return{spring:l,from:0,to:1,prepare:()=>{document.body.style.overflow="hidden",e.style.opacity="1",g==null||g.remove(),y(),o&&s&&(o.style.clipPath="none",s.style.transform="scale(1)")},tick:h=>{if(!(!o||!s||!a)){if(h<=T&&i.length>0){const f=h/T,$=Math.min(Math.floor(f*i.length),i.length-1),x=u[$]??0,w=Xt(u.slice(0,$));s.style.width=`${x}px`,a.style.transform=`translateX(-${w}px)`}if(h>T){const $=1-Math.max(0,Math.min(1,(h-T)/Ut));o.style.clipPath=Wt(d,$),s.style.transform=`scale(${$})`}}},onEnd:()=>{o==null||o.remove(),o=s=a=null,document.body.style.overflow=p}}}}};exports.jaemin=m.jaemin;exports.blind=Q;exports.curtainReveal=zt;exports.drill=nt;exports.fade=rt;exports.film=ct;exports.hero=ut;exports.instagram=wt;exports.pinterest=Lt;exports.scroll=Ct;exports.slide=Tt;exports.strip=St;
|