@ssgoi/core 2.5.4 → 2.5.5
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/ticker.d.ts +1 -0
- package/dist/animator/ticker.d.ts.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +136 -134
- package/dist/jaemin-BG8HRXG1.cjs +1 -0
- package/dist/{jaemin-BAi8PTrj.js → jaemin-BWkrXq0V.js} +21 -20
- package/dist/view-transitions/drill.d.ts.map +1 -1
- package/dist/view-transitions/index.cjs +11 -11
- package/dist/view-transitions/index.js +253 -253
- package/package.json +1 -1
- package/dist/jaemin-DL1-g_B5.cjs +0 -1
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { p as
|
|
2
|
-
import { a as
|
|
1
|
+
import { p as b, g as L } from "../jaemin-BWkrXq0V.js";
|
|
2
|
+
import { a as Vt } from "../jaemin-BWkrXq0V.js";
|
|
3
3
|
const U = (t) => new Promise((n) => setTimeout(n, t));
|
|
4
|
-
function
|
|
4
|
+
function q(t, n = 0) {
|
|
5
5
|
const i = Math.pow(10, n);
|
|
6
6
|
return Math.round(t * i) / i;
|
|
7
7
|
}
|
|
8
|
-
const
|
|
8
|
+
const G = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K = 300, Z = 10, J = "horizontal", Q = "#000000", vt = (t = {}) => {
|
|
9
9
|
const {
|
|
10
10
|
inSpring: n = j,
|
|
11
|
-
outSpring: i =
|
|
11
|
+
outSpring: i = G,
|
|
12
12
|
transitionDelay: d = K,
|
|
13
13
|
blindCount: r = Z,
|
|
14
14
|
direction: s = J,
|
|
15
|
-
staggerDelay:
|
|
15
|
+
staggerDelay: c = 100,
|
|
16
16
|
blindColor: e = Q
|
|
17
17
|
} = t;
|
|
18
|
-
let a,
|
|
19
|
-
const
|
|
18
|
+
let a, l = null;
|
|
19
|
+
const o = (p, g, u = "left") => {
|
|
20
20
|
window.getComputedStyle(p).position === "static" && (p.style.position = "relative");
|
|
21
|
-
const
|
|
22
|
-
|
|
21
|
+
const h = document.createElement("div");
|
|
22
|
+
h.className = "blind-container", h.style.cssText = `
|
|
23
23
|
position: absolute;
|
|
24
24
|
top: 0;
|
|
25
25
|
left: 0;
|
|
@@ -31,27 +31,27 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
31
31
|
`;
|
|
32
32
|
const f = [];
|
|
33
33
|
for (let $ = 0; $ < r; $++) {
|
|
34
|
-
const
|
|
34
|
+
const w = document.createElement("div");
|
|
35
35
|
if (s === "horizontal") {
|
|
36
|
-
const
|
|
37
|
-
|
|
36
|
+
const x = 100 / r, S = `calc(${x}% + 1px)`;
|
|
37
|
+
w.style.cssText = `
|
|
38
38
|
position: absolute;
|
|
39
|
-
top: ${
|
|
39
|
+
top: ${x * $}%;
|
|
40
40
|
left: 0;
|
|
41
41
|
width: 100%;
|
|
42
|
-
height: ${
|
|
42
|
+
height: ${S};
|
|
43
43
|
background: ${e};
|
|
44
44
|
transform: scaleX(${g === "hidden" ? 0 : 1});
|
|
45
45
|
transform-origin: ${u} center;
|
|
46
46
|
will-change: transform;
|
|
47
47
|
`;
|
|
48
48
|
} else {
|
|
49
|
-
const
|
|
50
|
-
|
|
49
|
+
const x = 100 / r, S = `calc(${x}% + 1px)`;
|
|
50
|
+
w.style.cssText = `
|
|
51
51
|
position: absolute;
|
|
52
52
|
top: 0;
|
|
53
|
-
left: ${
|
|
54
|
-
width: ${
|
|
53
|
+
left: ${x * $}%;
|
|
54
|
+
width: ${S};
|
|
55
55
|
height: 100%;
|
|
56
56
|
background: ${e};
|
|
57
57
|
transform: scaleY(${g === "hidden" ? 0 : 1});
|
|
@@ -59,35 +59,35 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
59
59
|
will-change: transform;
|
|
60
60
|
`;
|
|
61
61
|
}
|
|
62
|
-
f.push(
|
|
62
|
+
f.push(w), h.appendChild(w);
|
|
63
63
|
}
|
|
64
|
-
return p.appendChild(
|
|
64
|
+
return p.appendChild(h), { container: h, blinds: f };
|
|
65
65
|
};
|
|
66
66
|
return {
|
|
67
67
|
out: () => {
|
|
68
68
|
let p = null;
|
|
69
69
|
return a = new Promise((u) => {
|
|
70
|
-
|
|
70
|
+
l = u;
|
|
71
71
|
}), {
|
|
72
72
|
springs: Array.from({ length: r }, (u, y) => ({
|
|
73
73
|
from: 0,
|
|
74
74
|
to: 1,
|
|
75
75
|
spring: i,
|
|
76
|
-
offset: y *
|
|
77
|
-
tick: (
|
|
76
|
+
offset: y * c,
|
|
77
|
+
tick: (h) => {
|
|
78
78
|
if (!p) return;
|
|
79
79
|
const f = p.blinds[y];
|
|
80
|
-
f && (s === "horizontal" ? f.style.transform = `scaleX(${
|
|
80
|
+
f && (s === "horizontal" ? f.style.transform = `scaleX(${h})` : f.style.transform = `scaleY(${h})`);
|
|
81
81
|
}
|
|
82
82
|
})),
|
|
83
83
|
schedule: "chain",
|
|
84
84
|
prepare: (u) => {
|
|
85
|
-
|
|
85
|
+
b(u), u.style.zIndex = "1000", p = o(u, "hidden", "left");
|
|
86
86
|
},
|
|
87
87
|
onStart: () => {
|
|
88
88
|
},
|
|
89
89
|
onEnd: () => {
|
|
90
|
-
|
|
90
|
+
l && l();
|
|
91
91
|
}
|
|
92
92
|
};
|
|
93
93
|
},
|
|
@@ -98,16 +98,16 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
98
98
|
from: 1,
|
|
99
99
|
to: 0,
|
|
100
100
|
spring: n,
|
|
101
|
-
offset: y *
|
|
102
|
-
tick: (
|
|
101
|
+
offset: y * c,
|
|
102
|
+
tick: (h) => {
|
|
103
103
|
if (!p) return;
|
|
104
104
|
const f = p.blinds[y];
|
|
105
|
-
f && (s === "horizontal" ? f.style.transform = `scaleX(${
|
|
105
|
+
f && (s === "horizontal" ? f.style.transform = `scaleX(${h})` : f.style.transform = `scaleY(${h})`);
|
|
106
106
|
}
|
|
107
107
|
})),
|
|
108
108
|
schedule: "chain",
|
|
109
109
|
prepare: (u) => {
|
|
110
|
-
u.style.position = "relative", u.style.zIndex = "0", p =
|
|
110
|
+
u.style.position = "relative", u.style.zIndex = "0", p = o(u, "closed", "right");
|
|
111
111
|
},
|
|
112
112
|
onStart: () => {
|
|
113
113
|
},
|
|
@@ -126,54 +126,54 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
126
126
|
}, tt = {
|
|
127
127
|
stiffness: 100,
|
|
128
128
|
damping: 20
|
|
129
|
-
},
|
|
130
|
-
var s,
|
|
129
|
+
}, Dt = (t = {}) => {
|
|
130
|
+
var s, c;
|
|
131
131
|
const { opacity: n = !1, direction: i = "enter" } = t, d = i === "enter" ? R : tt, r = {
|
|
132
132
|
stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? d.stiffness,
|
|
133
|
-
damping: ((
|
|
133
|
+
damping: ((c = t.spring) == null ? void 0 : c.damping) ?? d.damping
|
|
134
134
|
};
|
|
135
135
|
return i === "enter" ? {
|
|
136
136
|
in: (e) => ({
|
|
137
137
|
spring: r,
|
|
138
138
|
prepare: () => {
|
|
139
|
-
e.style.willChange = n ? "transform, opacity" : "transform";
|
|
139
|
+
e.style.willChange = n ? "transform, opacity" : "transform", e.style.backfaceVisibility = "hidden", e.style.perspective = "1000px", e.style.transformStyle = "preserve-3d", e.style.contain = "layout paint";
|
|
140
140
|
},
|
|
141
141
|
tick: (a) => {
|
|
142
|
-
e.style.transform = `
|
|
142
|
+
e.style.transform = `translate3d(${(1 - a) * 100}%, 0, 0)`, n && (e.style.opacity = a.toString());
|
|
143
143
|
},
|
|
144
144
|
onEnd: () => {
|
|
145
|
-
e.style.willChange = "auto";
|
|
145
|
+
e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.perspective = "", e.style.transformStyle = "", e.style.contain = "";
|
|
146
146
|
}
|
|
147
147
|
}),
|
|
148
148
|
out: (e, a) => ({
|
|
149
149
|
spring: r,
|
|
150
|
-
prepare: (
|
|
151
|
-
|
|
150
|
+
prepare: (l) => {
|
|
151
|
+
b(l, a), l.style.zIndex = "-1", l.style.willChange = n ? "transform, opacity" : "transform", l.style.backfaceVisibility = "hidden", l.style.perspective = "1000px", l.style.transformStyle = "preserve-3d", l.style.contain = "layout paint", l.style.pointerEvents = "none";
|
|
152
152
|
},
|
|
153
|
-
tick: (
|
|
154
|
-
e.style.transform = `
|
|
153
|
+
tick: (l) => {
|
|
154
|
+
e.style.transform = `translate3d(${-(1 - l) * 20}%, 0, 0)`, n && (e.style.opacity = l.toString());
|
|
155
155
|
}
|
|
156
156
|
})
|
|
157
157
|
} : {
|
|
158
158
|
in: (e) => ({
|
|
159
159
|
spring: r,
|
|
160
160
|
prepare: () => {
|
|
161
|
-
e.style.willChange = n ? "transform, opacity" : "transform";
|
|
161
|
+
e.style.willChange = n ? "transform, opacity" : "transform", e.style.backfaceVisibility = "hidden", e.style.perspective = "1000px", e.style.transformStyle = "preserve-3d", e.style.contain = "layout paint";
|
|
162
162
|
},
|
|
163
163
|
tick: (a) => {
|
|
164
|
-
e.style.transform = `
|
|
164
|
+
e.style.transform = `translate3d(${-(1 - a) * 20}%, 0, 0)`, n && (e.style.opacity = a.toString());
|
|
165
165
|
},
|
|
166
166
|
onEnd: () => {
|
|
167
|
-
e.style.willChange = "auto";
|
|
167
|
+
e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.perspective = "", e.style.transformStyle = "", e.style.contain = "";
|
|
168
168
|
}
|
|
169
169
|
}),
|
|
170
170
|
out: (e, a) => ({
|
|
171
171
|
spring: r,
|
|
172
|
-
prepare: (
|
|
173
|
-
|
|
172
|
+
prepare: (l) => {
|
|
173
|
+
b(l, a), l.style.zIndex = "100", l.style.willChange = n ? "transform, opacity" : "transform", l.style.backfaceVisibility = "hidden", l.style.perspective = "1000px", l.style.transformStyle = "preserve-3d", l.style.contain = "layout paint", l.style.pointerEvents = "none";
|
|
174
174
|
},
|
|
175
|
-
tick: (
|
|
176
|
-
e.style.transform = `
|
|
175
|
+
tick: (l) => {
|
|
176
|
+
e.style.transform = `translate3d(${(1 - l) * 100}%, 0, 0)`, n && (e.style.opacity = l.toString());
|
|
177
177
|
}
|
|
178
178
|
})
|
|
179
179
|
};
|
|
@@ -185,7 +185,7 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
185
185
|
} = t;
|
|
186
186
|
let r, s = null;
|
|
187
187
|
return {
|
|
188
|
-
in: (
|
|
188
|
+
in: (c) => ({
|
|
189
189
|
spring: n,
|
|
190
190
|
prepare: (e) => {
|
|
191
191
|
e.style.opacity = "0", e.style.willChange = "opacity";
|
|
@@ -194,25 +194,25 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
194
194
|
r && (await r, await U(d));
|
|
195
195
|
},
|
|
196
196
|
tick: (e) => {
|
|
197
|
-
const a =
|
|
198
|
-
|
|
197
|
+
const a = q(e, 2);
|
|
198
|
+
c.style.opacity = a.toString();
|
|
199
199
|
},
|
|
200
200
|
onEnd: () => {
|
|
201
|
-
|
|
201
|
+
c.style.willChange = "auto";
|
|
202
202
|
}
|
|
203
203
|
}),
|
|
204
|
-
out: (
|
|
204
|
+
out: (c, e) => (r = new Promise((a) => {
|
|
205
205
|
s = a;
|
|
206
206
|
}), {
|
|
207
207
|
spring: i,
|
|
208
208
|
tick: (a) => {
|
|
209
|
-
|
|
209
|
+
c.style.opacity = a.toString();
|
|
210
210
|
},
|
|
211
211
|
prepare: () => {
|
|
212
|
-
|
|
212
|
+
b(c, e), c.style.willChange = "opacity";
|
|
213
213
|
},
|
|
214
214
|
onEnd: () => {
|
|
215
|
-
s && s(),
|
|
215
|
+
s && s(), c.style.willChange = "auto";
|
|
216
216
|
}
|
|
217
217
|
})
|
|
218
218
|
};
|
|
@@ -221,7 +221,7 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
221
221
|
// Lower stiffness for smoother motion
|
|
222
222
|
damping: 3.5
|
|
223
223
|
// Lower damping for more fluid movement
|
|
224
|
-
}, rt = 0.8, lt = "white",
|
|
224
|
+
}, rt = 0.8, lt = "white", m = {
|
|
225
225
|
start: 0,
|
|
226
226
|
end: 0.45
|
|
227
227
|
}, E = {
|
|
@@ -234,34 +234,34 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
234
234
|
var r;
|
|
235
235
|
const n = (t == null ? void 0 : t.spring) ?? st, i = (t == null ? void 0 : t.scale) ?? rt, d = ((r = t == null ? void 0 : t.border) == null ? void 0 : r.color) ?? lt;
|
|
236
236
|
return {
|
|
237
|
-
out: async (s,
|
|
238
|
-
const e = I(
|
|
237
|
+
out: async (s, c) => {
|
|
238
|
+
const e = I(c), a = L(document.body, c.positionedParent), l = ot(d, {
|
|
239
239
|
...e,
|
|
240
240
|
top: a.top
|
|
241
241
|
});
|
|
242
|
-
let
|
|
242
|
+
let o = 1, p = -e.top;
|
|
243
243
|
return {
|
|
244
244
|
spring: n,
|
|
245
245
|
prepare: () => {
|
|
246
|
-
|
|
247
|
-
for (const g of
|
|
248
|
-
|
|
246
|
+
b(s), P(s, e), v(s, e), ct(s, e);
|
|
247
|
+
for (const g of l)
|
|
248
|
+
c.positionedParent.appendChild(g);
|
|
249
249
|
},
|
|
250
250
|
onEnd: () => {
|
|
251
251
|
s.style.clipPath = "", s.style.transformOrigin = "", setTimeout(() => {
|
|
252
|
-
for (const g of
|
|
253
|
-
|
|
252
|
+
for (const g of l)
|
|
253
|
+
c.positionedParent.removeChild(g);
|
|
254
254
|
}, 1e3);
|
|
255
255
|
},
|
|
256
256
|
tick: (g) => {
|
|
257
257
|
const u = 1 - g;
|
|
258
|
-
if (
|
|
258
|
+
if (m.start <= u && u <= m.end) {
|
|
259
259
|
const f = C(
|
|
260
260
|
u,
|
|
261
|
-
|
|
262
|
-
|
|
261
|
+
m.start,
|
|
262
|
+
m.end
|
|
263
263
|
);
|
|
264
|
-
|
|
264
|
+
o = 1 - (1 - i) * f;
|
|
265
265
|
}
|
|
266
266
|
if (E.start <= u && u <= E.end) {
|
|
267
267
|
const f = C(
|
|
@@ -269,7 +269,7 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
269
269
|
E.start,
|
|
270
270
|
E.end
|
|
271
271
|
);
|
|
272
|
-
|
|
272
|
+
o = i + (1 - i) * f;
|
|
273
273
|
}
|
|
274
274
|
if (A.start <= u && u <= A.end) {
|
|
275
275
|
const f = C(
|
|
@@ -279,49 +279,49 @@ const V = { stiffness: 80, damping: 25 }, j = { stiffness: 75, damping: 25 }, K
|
|
|
279
279
|
);
|
|
280
280
|
p = -e.top - e.height * f;
|
|
281
281
|
}
|
|
282
|
-
s.style.transform = `translateY(${p}px) scale(${
|
|
283
|
-
const y = (e.width - e.width *
|
|
284
|
-
at(
|
|
282
|
+
s.style.transform = `translateY(${p}px) scale(${o})`;
|
|
283
|
+
const y = (e.width - e.width * o) / 2, h = (e.height - e.height * o) / 2;
|
|
284
|
+
at(l, y, h);
|
|
285
285
|
}
|
|
286
286
|
};
|
|
287
287
|
},
|
|
288
|
-
in: async (s,
|
|
289
|
-
const e = I(
|
|
290
|
-
let a = i,
|
|
288
|
+
in: async (s, c) => {
|
|
289
|
+
const e = I(c);
|
|
290
|
+
let a = i, l = -e.top + e.height;
|
|
291
291
|
return {
|
|
292
292
|
spring: n,
|
|
293
293
|
prepare: () => {
|
|
294
|
-
P(s, e),
|
|
294
|
+
P(s, e), v(s, e), s.style.transform = `translateY(${-e.top + e.height}px) scale(${i})`;
|
|
295
295
|
},
|
|
296
296
|
onEnd: () => {
|
|
297
297
|
s.style.clipPath = "", s.style.transformOrigin = "", s.style.transform = "";
|
|
298
298
|
},
|
|
299
|
-
tick: (
|
|
300
|
-
if (
|
|
299
|
+
tick: (o) => {
|
|
300
|
+
if (m.start <= o && o <= m.end) {
|
|
301
301
|
const p = C(
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
302
|
+
o,
|
|
303
|
+
m.start,
|
|
304
|
+
m.end
|
|
305
305
|
);
|
|
306
306
|
a = 1 - (1 - i) * p;
|
|
307
307
|
}
|
|
308
|
-
if (E.start <=
|
|
308
|
+
if (E.start <= o && o <= E.end) {
|
|
309
309
|
const p = C(
|
|
310
|
-
|
|
310
|
+
o,
|
|
311
311
|
E.start,
|
|
312
312
|
E.end
|
|
313
313
|
);
|
|
314
314
|
a = i + (1 - i) * p;
|
|
315
315
|
}
|
|
316
|
-
if (A.start <=
|
|
316
|
+
if (A.start <= o && o <= A.end) {
|
|
317
317
|
const p = C(
|
|
318
|
-
|
|
318
|
+
o,
|
|
319
319
|
A.start,
|
|
320
320
|
A.end
|
|
321
321
|
);
|
|
322
|
-
|
|
322
|
+
l = -e.top + e.height * (1 - p);
|
|
323
323
|
}
|
|
324
|
-
s.style.transform = `translateY(${
|
|
324
|
+
s.style.transform = `translateY(${l}px) scale(${a})`;
|
|
325
325
|
}
|
|
326
326
|
};
|
|
327
327
|
}
|
|
@@ -336,32 +336,32 @@ function ot(t = "white", n) {
|
|
|
336
336
|
r.style.position = "fixed", r.style.pointerEvents = "none", r.style.zIndex = "9999", r.style.top = `${n.top - 1}px`, r.style.left = `${n.left - 1}px`, r.style.width = "15px", r.style.height = "15px";
|
|
337
337
|
const s = document.createElement("div");
|
|
338
338
|
s.style.position = "absolute", s.style.width = "15px", s.style.height = "1px", s.style.backgroundColor = t, s.style.top = "0", s.style.left = "0";
|
|
339
|
-
const
|
|
340
|
-
|
|
339
|
+
const c = document.createElement("div");
|
|
340
|
+
c.style.position = "absolute", c.style.width = "1px", c.style.height = "15px", c.style.backgroundColor = t, c.style.top = "0", c.style.left = "0", r.appendChild(s), r.appendChild(c);
|
|
341
341
|
const e = document.createElement("div");
|
|
342
342
|
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";
|
|
343
343
|
const a = document.createElement("div");
|
|
344
344
|
a.style.position = "absolute", a.style.width = "15px", a.style.height = "1px", a.style.backgroundColor = t, a.style.top = "0", a.style.right = "0";
|
|
345
|
-
const o = document.createElement("div");
|
|
346
|
-
o.style.position = "absolute", o.style.width = "1px", o.style.height = "15px", o.style.backgroundColor = t, o.style.top = "0", o.style.right = "0", e.appendChild(a), e.appendChild(o);
|
|
347
345
|
const l = document.createElement("div");
|
|
348
|
-
l.style.position = "
|
|
346
|
+
l.style.position = "absolute", l.style.width = "1px", l.style.height = "15px", l.style.backgroundColor = t, l.style.top = "0", l.style.right = "0", e.appendChild(a), e.appendChild(l);
|
|
347
|
+
const o = document.createElement("div");
|
|
348
|
+
o.style.position = "fixed", o.style.pointerEvents = "none", o.style.zIndex = "9999", o.style.top = `${n.top + n.height - 15 + 1}px`, o.style.left = `${n.left - 1}px`, o.style.width = "15px", o.style.height = "15px";
|
|
349
349
|
const p = document.createElement("div");
|
|
350
350
|
p.style.position = "absolute", p.style.width = "15px", p.style.height = "1px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.left = "0";
|
|
351
351
|
const g = document.createElement("div");
|
|
352
|
-
g.style.position = "absolute", g.style.width = "1px", g.style.height = "15px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.left = "0",
|
|
352
|
+
g.style.position = "absolute", g.style.width = "1px", g.style.height = "15px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.left = "0", o.appendChild(p), o.appendChild(g);
|
|
353
353
|
const u = document.createElement("div");
|
|
354
354
|
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";
|
|
355
355
|
const y = document.createElement("div");
|
|
356
356
|
y.style.position = "absolute", y.style.width = "15px", y.style.height = "1px", y.style.backgroundColor = t, y.style.bottom = "0", y.style.right = "0";
|
|
357
|
-
const
|
|
358
|
-
return
|
|
357
|
+
const h = document.createElement("div");
|
|
358
|
+
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), {
|
|
359
359
|
topLeft: r,
|
|
360
360
|
topRight: e,
|
|
361
|
-
bottomLeft:
|
|
361
|
+
bottomLeft: o,
|
|
362
362
|
bottomRight: u,
|
|
363
363
|
*[Symbol.iterator]() {
|
|
364
|
-
yield r, yield e, yield
|
|
364
|
+
yield r, yield e, yield o, yield u;
|
|
365
365
|
}
|
|
366
366
|
};
|
|
367
367
|
}
|
|
@@ -378,7 +378,7 @@ function P(t, n) {
|
|
|
378
378
|
const i = n.left + n.width / 2, d = n.top + n.height / 2;
|
|
379
379
|
t.style.transformOrigin = `${i}px ${d}px`;
|
|
380
380
|
}
|
|
381
|
-
function
|
|
381
|
+
function v(t, n) {
|
|
382
382
|
t.style.clipPath = `polygon(
|
|
383
383
|
${n.left}px ${n.top}px,
|
|
384
384
|
${n.left + n.width}px ${n.top}px,
|
|
@@ -386,7 +386,7 @@ function D(t, n) {
|
|
|
386
386
|
${n.left}px ${n.top + n.height}px
|
|
387
387
|
)`;
|
|
388
388
|
}
|
|
389
|
-
function
|
|
389
|
+
function ct(t, n) {
|
|
390
390
|
t.style.transform = `translateY(${-n.top}px)`;
|
|
391
391
|
}
|
|
392
392
|
function C(t, n, i) {
|
|
@@ -396,15 +396,15 @@ function dt(t, n) {
|
|
|
396
396
|
return t.querySelector(`[data-hero-key="${n}"]`);
|
|
397
397
|
}
|
|
398
398
|
const Ot = (t = {}) => {
|
|
399
|
-
var
|
|
399
|
+
var c, e;
|
|
400
400
|
const n = {
|
|
401
|
-
stiffness: ((
|
|
401
|
+
stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? 300,
|
|
402
402
|
damping: ((e = t.spring) == null ? void 0 : e.damping) ?? 30
|
|
403
403
|
}, i = t.timeout ?? 300, d = t.maxDistance ?? 700;
|
|
404
404
|
let r = null, s = null;
|
|
405
405
|
return {
|
|
406
|
-
in: async (a,
|
|
407
|
-
const
|
|
406
|
+
in: async (a, l) => {
|
|
407
|
+
const o = a, p = Array.from(o.querySelectorAll("[data-hero-key]"));
|
|
408
408
|
if (p.length === 0)
|
|
409
409
|
return {
|
|
410
410
|
spring: n,
|
|
@@ -424,22 +424,22 @@ const Ot = (t = {}) => {
|
|
|
424
424
|
// No fromNode, skip animation
|
|
425
425
|
};
|
|
426
426
|
const u = p.map((y) => {
|
|
427
|
-
const
|
|
428
|
-
if (!
|
|
429
|
-
const f = dt(r,
|
|
427
|
+
const h = y.getAttribute("data-hero-key");
|
|
428
|
+
if (!h) return null;
|
|
429
|
+
const f = dt(r, h);
|
|
430
430
|
if (!f) return null;
|
|
431
|
-
const $ = y,
|
|
431
|
+
const $ = y, w = L(r, f), x = L(o, $), S = w.left - x.left - l.scrollOffset.x, W = w.top - x.top - l.scrollOffset.y, X = w.width / x.width, z = w.height / x.height, B = $.style.transform, H = $.style.position, M = $.style.transformOrigin, N = $.style.zIndex, V = $.style.willChange;
|
|
432
432
|
return {
|
|
433
433
|
toEl: $,
|
|
434
|
-
dx:
|
|
435
|
-
dy:
|
|
436
|
-
dw:
|
|
434
|
+
dx: S,
|
|
435
|
+
dy: W,
|
|
436
|
+
dw: X,
|
|
437
437
|
dh: z,
|
|
438
438
|
originalTransform: B,
|
|
439
439
|
originalPosition: H,
|
|
440
440
|
originalTransformOrigin: M,
|
|
441
441
|
originalZIndex: N,
|
|
442
|
-
originalWillChange:
|
|
442
|
+
originalWillChange: V
|
|
443
443
|
};
|
|
444
444
|
}).filter(
|
|
445
445
|
(y) => y !== null && Math.abs(y.dy) <= d
|
|
@@ -457,21 +457,21 @@ const Ot = (t = {}) => {
|
|
|
457
457
|
});
|
|
458
458
|
},
|
|
459
459
|
tick: (y) => {
|
|
460
|
-
u.forEach(({ toEl:
|
|
461
|
-
|
|
460
|
+
u.forEach(({ toEl: h, dx: f, dy: $, dw: w, dh: x }) => {
|
|
461
|
+
h.style.transform = `translate(${(1 - y) * f}px,${(1 - y) * $}px) scale(${y + (1 - y) * w}, ${y + (1 - y) * x})`;
|
|
462
462
|
});
|
|
463
463
|
},
|
|
464
464
|
onEnd: () => {
|
|
465
465
|
u.forEach(
|
|
466
466
|
({
|
|
467
467
|
toEl: y,
|
|
468
|
-
originalTransform:
|
|
468
|
+
originalTransform: h,
|
|
469
469
|
originalPosition: f,
|
|
470
470
|
originalTransformOrigin: $,
|
|
471
|
-
originalZIndex:
|
|
472
|
-
originalWillChange:
|
|
471
|
+
originalZIndex: w,
|
|
472
|
+
originalWillChange: x
|
|
473
473
|
}) => {
|
|
474
|
-
y.style.transform =
|
|
474
|
+
y.style.transform = h, y.style.position = f, y.style.transformOrigin = $, y.style.zIndex = w, y.style.willChange = x;
|
|
475
475
|
}
|
|
476
476
|
);
|
|
477
477
|
}
|
|
@@ -481,22 +481,22 @@ const Ot = (t = {}) => {
|
|
|
481
481
|
onStart: () => {
|
|
482
482
|
r = a, s && (s(!0), s = null);
|
|
483
483
|
},
|
|
484
|
-
prepare: (
|
|
485
|
-
|
|
484
|
+
prepare: (l) => {
|
|
485
|
+
b(l), l.style.opacity = "0";
|
|
486
486
|
}
|
|
487
487
|
})
|
|
488
488
|
};
|
|
489
489
|
};
|
|
490
|
-
function
|
|
490
|
+
function ht({
|
|
491
491
|
detailRect: t,
|
|
492
492
|
galleryRect: n,
|
|
493
493
|
pageRect: i,
|
|
494
494
|
scrollOffset: d
|
|
495
495
|
}, r) {
|
|
496
|
-
const s = n.left - t.left + (n.width - t.width) / 2 - d.x,
|
|
496
|
+
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;
|
|
497
497
|
return r.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (y) => {
|
|
498
|
-
const
|
|
499
|
-
r.style.clipPath = `inset(${f}% ${$}% ${
|
|
498
|
+
const h = 1 - y, f = o * h, $ = p * h, w = g * h, x = u * h;
|
|
499
|
+
r.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, r.style.transform = `translate(${s * h}px, ${c * h}px) scale(${1 + (l - 1) * h})`;
|
|
500
500
|
};
|
|
501
501
|
}
|
|
502
502
|
function pt({
|
|
@@ -505,10 +505,10 @@ function pt({
|
|
|
505
505
|
pageRect: i,
|
|
506
506
|
scrollOffset: d
|
|
507
507
|
}, r) {
|
|
508
|
-
const s = n.left - t.left + (n.width - t.width) / 2 + d.x,
|
|
508
|
+
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;
|
|
509
509
|
return r.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (y) => {
|
|
510
|
-
const
|
|
511
|
-
r.style.clipPath = `inset(${f}% ${$}% ${
|
|
510
|
+
const h = 1 - y, f = o * h, $ = p * h, w = g * h, x = u * h;
|
|
511
|
+
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})`;
|
|
512
512
|
};
|
|
513
513
|
}
|
|
514
514
|
function yt(t, n, i) {
|
|
@@ -519,30 +519,30 @@ function yt(t, n, i) {
|
|
|
519
519
|
);
|
|
520
520
|
if (t.querySelectorAll("[data-instagram-detail-key]").length > 1 || n.querySelectorAll("[data-instagram-detail-key]").length > 1)
|
|
521
521
|
return null;
|
|
522
|
-
let s = null,
|
|
522
|
+
let s = null, c = null, e = !1;
|
|
523
523
|
if (!d && r) {
|
|
524
|
-
|
|
525
|
-
const
|
|
526
|
-
if (!
|
|
524
|
+
c = r;
|
|
525
|
+
const o = c.getAttribute("data-instagram-detail-key");
|
|
526
|
+
if (!o) return null;
|
|
527
527
|
s = t.querySelector(
|
|
528
|
-
`[data-instagram-gallery-key="${
|
|
528
|
+
`[data-instagram-gallery-key="${o}"]`
|
|
529
529
|
), s && (e = !0);
|
|
530
530
|
} else if (d && !r) {
|
|
531
|
-
|
|
532
|
-
const
|
|
533
|
-
if (!
|
|
531
|
+
c = d;
|
|
532
|
+
const o = c.getAttribute("data-instagram-detail-key");
|
|
533
|
+
if (!o) return null;
|
|
534
534
|
s = n.querySelector(
|
|
535
|
-
`[data-instagram-gallery-key="${
|
|
535
|
+
`[data-instagram-gallery-key="${o}"]`
|
|
536
536
|
), s && (e = !1);
|
|
537
537
|
}
|
|
538
|
-
if (!s || !
|
|
538
|
+
if (!s || !c)
|
|
539
539
|
return null;
|
|
540
|
-
const a = L(e ? t : n, s),
|
|
540
|
+
const a = L(e ? t : n, s), l = L(e ? n : t, c);
|
|
541
541
|
return e ? {
|
|
542
542
|
isEnterMode: !0,
|
|
543
|
-
inAnimation:
|
|
543
|
+
inAnimation: ht(
|
|
544
544
|
{
|
|
545
|
-
detailRect:
|
|
545
|
+
detailRect: l,
|
|
546
546
|
galleryRect: a,
|
|
547
547
|
pageRect: n.getBoundingClientRect(),
|
|
548
548
|
scrollOffset: i
|
|
@@ -554,7 +554,7 @@ function yt(t, n, i) {
|
|
|
554
554
|
isEnterMode: !1,
|
|
555
555
|
outAnimation: pt(
|
|
556
556
|
{
|
|
557
|
-
detailRect:
|
|
557
|
+
detailRect: l,
|
|
558
558
|
galleryRect: a,
|
|
559
559
|
pageRect: t.getBoundingClientRect(),
|
|
560
560
|
scrollOffset: i
|
|
@@ -565,15 +565,15 @@ function yt(t, n, i) {
|
|
|
565
565
|
};
|
|
566
566
|
}
|
|
567
567
|
const Ut = (t = {}) => {
|
|
568
|
-
var
|
|
568
|
+
var c, e;
|
|
569
569
|
const n = {
|
|
570
|
-
stiffness: ((
|
|
570
|
+
stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? 150,
|
|
571
571
|
damping: ((e = t.spring) == null ? void 0 : e.damping) ?? 20
|
|
572
572
|
}, i = t.timeout ?? 300;
|
|
573
573
|
let d = null, r = null, s = null;
|
|
574
574
|
return {
|
|
575
|
-
in: async (a, { scrollOffset:
|
|
576
|
-
const
|
|
575
|
+
in: async (a, { scrollOffset: l }) => {
|
|
576
|
+
const o = a;
|
|
577
577
|
return !await new Promise((g) => {
|
|
578
578
|
d ? g(!0) : (r = g, setTimeout(() => {
|
|
579
579
|
r = null, g(!1);
|
|
@@ -582,7 +582,7 @@ const Ut = (t = {}) => {
|
|
|
582
582
|
spring: n,
|
|
583
583
|
tick: () => {
|
|
584
584
|
}
|
|
585
|
-
}) : (s = yt(d,
|
|
585
|
+
}) : (s = yt(d, o, l), s ? (d = null, {
|
|
586
586
|
spring: n,
|
|
587
587
|
tick: (g) => {
|
|
588
588
|
s != null && s.inAnimation && s.inAnimation(g);
|
|
@@ -593,13 +593,13 @@ const Ut = (t = {}) => {
|
|
|
593
593
|
}
|
|
594
594
|
});
|
|
595
595
|
},
|
|
596
|
-
out: async (a
|
|
596
|
+
out: async (a) => ({
|
|
597
597
|
spring: n,
|
|
598
598
|
onStart: () => {
|
|
599
599
|
d = a, r && (r(!0), r = null);
|
|
600
600
|
},
|
|
601
601
|
prepare: (l) => {
|
|
602
|
-
|
|
602
|
+
b(l), s != null && s.isEnterMode || (l.style.zIndex = "-1");
|
|
603
603
|
},
|
|
604
604
|
tick: (l) => {
|
|
605
605
|
s != null && s.outAnimation && s.outAnimation(l);
|
|
@@ -613,10 +613,10 @@ function ut({
|
|
|
613
613
|
pageRect: i,
|
|
614
614
|
scrollOffset: d
|
|
615
615
|
}, r) {
|
|
616
|
-
const s = n.left - t.left + (n.width - t.width) / 2 - d.x,
|
|
616
|
+
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;
|
|
617
617
|
return r.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (y) => {
|
|
618
|
-
const
|
|
619
|
-
r.style.clipPath = `inset(${f}% ${$}% ${
|
|
618
|
+
const h = 1 - y, f = o * h, $ = p * h, w = g * h, x = u * h;
|
|
619
|
+
r.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, r.style.transform = `translate(${s * h}px, ${c * h}px) scale(${1 + (l - 1) * h})`;
|
|
620
620
|
};
|
|
621
621
|
}
|
|
622
622
|
function gt({
|
|
@@ -624,11 +624,11 @@ function gt({
|
|
|
624
624
|
detailRect: n,
|
|
625
625
|
scrollOffset: i
|
|
626
626
|
}, d) {
|
|
627
|
-
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,
|
|
628
|
-
return (
|
|
627
|
+
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);
|
|
628
|
+
return (l) => {
|
|
629
629
|
d.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
|
|
630
|
-
const
|
|
631
|
-
d.style.transform = `translate(${r *
|
|
630
|
+
const o = 1 - l;
|
|
631
|
+
d.style.transform = `translate(${r * o - i.x}px, ${s * o - i.y}px) scale(${1 + (a - 1) * o})`, d.style.opacity = `${1 - o}`;
|
|
632
632
|
};
|
|
633
633
|
}
|
|
634
634
|
function ft({
|
|
@@ -636,10 +636,10 @@ function ft({
|
|
|
636
636
|
detailRect: n,
|
|
637
637
|
scrollOffset: i
|
|
638
638
|
}, d) {
|
|
639
|
-
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,
|
|
640
|
-
return (
|
|
641
|
-
const
|
|
642
|
-
d.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, d.style.transform = `translate(${r *
|
|
639
|
+
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);
|
|
640
|
+
return (l) => {
|
|
641
|
+
const o = 1 - l, p = l;
|
|
642
|
+
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}`;
|
|
643
643
|
};
|
|
644
644
|
}
|
|
645
645
|
function $t({
|
|
@@ -648,13 +648,13 @@ function $t({
|
|
|
648
648
|
pageRect: i,
|
|
649
649
|
scrollOffset: d
|
|
650
650
|
}, r) {
|
|
651
|
-
const s = n.left - t.left + (n.width - t.width) / 2 + d.x,
|
|
651
|
+
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;
|
|
652
652
|
return r.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (y) => {
|
|
653
|
-
const
|
|
654
|
-
r.style.clipPath = `inset(${f}% ${$}% ${
|
|
653
|
+
const h = 1 - y, f = o * h, $ = p * h, w = g * h, x = u * h;
|
|
654
|
+
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})`;
|
|
655
655
|
};
|
|
656
656
|
}
|
|
657
|
-
function
|
|
657
|
+
function xt(t, n, i) {
|
|
658
658
|
const d = t.querySelector(
|
|
659
659
|
"[data-pinterest-detail-key]"
|
|
660
660
|
), r = n.querySelector(
|
|
@@ -662,29 +662,29 @@ function wt(t, n, i) {
|
|
|
662
662
|
);
|
|
663
663
|
if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
|
|
664
664
|
return null;
|
|
665
|
-
let s = null,
|
|
665
|
+
let s = null, c = null, e = !1;
|
|
666
666
|
if (!d && r) {
|
|
667
|
-
|
|
668
|
-
const
|
|
669
|
-
if (!
|
|
667
|
+
c = r;
|
|
668
|
+
const o = c.getAttribute("data-pinterest-detail-key");
|
|
669
|
+
if (!o) return null;
|
|
670
670
|
s = t.querySelector(
|
|
671
|
-
`[data-pinterest-gallery-key="${
|
|
671
|
+
`[data-pinterest-gallery-key="${o}"]`
|
|
672
672
|
), s && (e = !0);
|
|
673
673
|
} else if (d && !r) {
|
|
674
|
-
|
|
675
|
-
const
|
|
676
|
-
if (!
|
|
674
|
+
c = d;
|
|
675
|
+
const o = c.getAttribute("data-pinterest-detail-key");
|
|
676
|
+
if (!o) return null;
|
|
677
677
|
s = n.querySelector(
|
|
678
|
-
`[data-pinterest-gallery-key="${
|
|
678
|
+
`[data-pinterest-gallery-key="${o}"]`
|
|
679
679
|
), s && (e = !1);
|
|
680
680
|
}
|
|
681
|
-
if (!s || !
|
|
681
|
+
if (!s || !c)
|
|
682
682
|
return null;
|
|
683
|
-
const a = L(e ? t : n, s),
|
|
683
|
+
const a = L(e ? t : n, s), l = L(e ? n : t, c);
|
|
684
684
|
return e ? {
|
|
685
685
|
inAnimation: ut(
|
|
686
686
|
{
|
|
687
|
-
detailRect:
|
|
687
|
+
detailRect: l,
|
|
688
688
|
galleryRect: a,
|
|
689
689
|
pageRect: n.getBoundingClientRect(),
|
|
690
690
|
scrollOffset: i
|
|
@@ -692,17 +692,17 @@ function wt(t, n, i) {
|
|
|
692
692
|
n
|
|
693
693
|
),
|
|
694
694
|
outAnimation: gt(
|
|
695
|
-
{ galleryRect: a, detailRect:
|
|
695
|
+
{ galleryRect: a, detailRect: l, scrollOffset: i },
|
|
696
696
|
t
|
|
697
697
|
)
|
|
698
698
|
} : {
|
|
699
699
|
inAnimation: ft(
|
|
700
|
-
{ galleryRect: a, detailRect:
|
|
700
|
+
{ galleryRect: a, detailRect: l, scrollOffset: i },
|
|
701
701
|
n
|
|
702
702
|
),
|
|
703
703
|
outAnimation: $t(
|
|
704
704
|
{
|
|
705
|
-
detailRect:
|
|
705
|
+
detailRect: l,
|
|
706
706
|
galleryRect: a,
|
|
707
707
|
pageRect: t.getBoundingClientRect(),
|
|
708
708
|
scrollOffset: i
|
|
@@ -711,16 +711,16 @@ function wt(t, n, i) {
|
|
|
711
711
|
)
|
|
712
712
|
};
|
|
713
713
|
}
|
|
714
|
-
const
|
|
715
|
-
var
|
|
714
|
+
const Wt = (t = {}) => {
|
|
715
|
+
var c, e;
|
|
716
716
|
const n = {
|
|
717
|
-
stiffness: ((
|
|
717
|
+
stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? 30,
|
|
718
718
|
damping: ((e = t.spring) == null ? void 0 : e.damping) ?? 10
|
|
719
719
|
}, i = t.timeout ?? 300;
|
|
720
720
|
let d = null, r = null, s = null;
|
|
721
721
|
return {
|
|
722
|
-
in: async (a, { scrollOffset:
|
|
723
|
-
const
|
|
722
|
+
in: async (a, { scrollOffset: l }) => {
|
|
723
|
+
const o = a;
|
|
724
724
|
return !await new Promise((g) => {
|
|
725
725
|
d ? g(!0) : (r = g, setTimeout(() => {
|
|
726
726
|
r = null, g(!1);
|
|
@@ -729,7 +729,7 @@ const Xt = (t = {}) => {
|
|
|
729
729
|
spring: n,
|
|
730
730
|
tick: () => {
|
|
731
731
|
}
|
|
732
|
-
}) : (s =
|
|
732
|
+
}) : (s = xt(d, o, l), s ? (d = null, {
|
|
733
733
|
spring: n,
|
|
734
734
|
tick: (g) => {
|
|
735
735
|
s && s.inAnimation(g);
|
|
@@ -745,59 +745,59 @@ const Xt = (t = {}) => {
|
|
|
745
745
|
onStart: () => {
|
|
746
746
|
d = a, r && (r(!0), r = null);
|
|
747
747
|
},
|
|
748
|
-
prepare: (
|
|
749
|
-
|
|
748
|
+
prepare: (l) => {
|
|
749
|
+
b(l), l.style.zIndex = "-1";
|
|
750
750
|
},
|
|
751
|
-
tick: (
|
|
752
|
-
s && s.outAnimation(
|
|
751
|
+
tick: (l) => {
|
|
752
|
+
s && s.outAnimation(l);
|
|
753
753
|
}
|
|
754
754
|
})
|
|
755
755
|
};
|
|
756
|
-
},
|
|
756
|
+
}, D = {
|
|
757
757
|
stiffness: 5,
|
|
758
758
|
damping: 4
|
|
759
|
-
},
|
|
760
|
-
var a,
|
|
759
|
+
}, Xt = (t = {}) => {
|
|
760
|
+
var a, l;
|
|
761
761
|
const n = t.direction ?? "up", i = {
|
|
762
|
-
stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ??
|
|
763
|
-
damping: ((
|
|
762
|
+
stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? D.stiffness,
|
|
763
|
+
damping: ((l = t.spring) == null ? void 0 : l.damping) ?? D.damping
|
|
764
764
|
}, d = n === "up";
|
|
765
|
-
let r = null, s = null,
|
|
765
|
+
let r = null, s = null, c = null;
|
|
766
766
|
const e = () => {
|
|
767
767
|
if (r === null || s === null)
|
|
768
768
|
return null;
|
|
769
|
-
const
|
|
770
|
-
return Math.max(
|
|
769
|
+
const o = Math.min(r, s), p = window.innerHeight;
|
|
770
|
+
return Math.max(o, p);
|
|
771
771
|
};
|
|
772
772
|
return {
|
|
773
|
-
in: (
|
|
773
|
+
in: (o) => (s = o.offsetHeight, r !== null && (c = e()), {
|
|
774
774
|
spring: i,
|
|
775
775
|
prepare: () => {
|
|
776
|
-
|
|
776
|
+
o.style.willChange = "transform";
|
|
777
777
|
},
|
|
778
778
|
tick: (p) => {
|
|
779
|
-
if (
|
|
779
|
+
if (c === null && (c = e(), c === null))
|
|
780
780
|
return;
|
|
781
|
-
const g = d ? (1 - p) *
|
|
782
|
-
|
|
781
|
+
const g = d ? (1 - p) * c : (1 - p) * -c;
|
|
782
|
+
o.style.transform = `translateY(${g}px)`;
|
|
783
783
|
},
|
|
784
784
|
onEnd: () => {
|
|
785
|
-
|
|
785
|
+
o.style.willChange = "auto";
|
|
786
786
|
}
|
|
787
787
|
}),
|
|
788
|
-
out: (
|
|
788
|
+
out: (o) => ({
|
|
789
789
|
spring: i,
|
|
790
790
|
onStart: () => {
|
|
791
|
-
r =
|
|
791
|
+
r = o.offsetHeight, s !== null && (c = e());
|
|
792
792
|
},
|
|
793
793
|
tick: (p) => {
|
|
794
|
-
if (
|
|
794
|
+
if (c === null && (c = e(), c === null))
|
|
795
795
|
return;
|
|
796
|
-
const g = d ? (1 - p) * -
|
|
797
|
-
|
|
796
|
+
const g = d ? (1 - p) * -c : (1 - p) * c;
|
|
797
|
+
o.style.transform = `translateY(${g}px)`;
|
|
798
798
|
},
|
|
799
799
|
prepare: (p) => {
|
|
800
|
-
|
|
800
|
+
b(p), p.style.zIndex = d ? "-1" : "1", p.style.willChange = "transform";
|
|
801
801
|
}
|
|
802
802
|
})
|
|
803
803
|
};
|
|
@@ -811,27 +811,27 @@ const Xt = (t = {}) => {
|
|
|
811
811
|
damping: ((s = t.spring) == null ? void 0 : s.damping) ?? F.damping
|
|
812
812
|
}, d = n === "left";
|
|
813
813
|
return {
|
|
814
|
-
in: (
|
|
814
|
+
in: (c) => ({
|
|
815
815
|
spring: i,
|
|
816
816
|
prepare: () => {
|
|
817
|
-
|
|
817
|
+
c.style.willChange = "transform";
|
|
818
818
|
},
|
|
819
819
|
tick: (e) => {
|
|
820
820
|
const a = d ? (1 - e) * 100 : (1 - e) * -100;
|
|
821
|
-
|
|
821
|
+
c.style.transform = `translateX(${a}%)`;
|
|
822
822
|
},
|
|
823
823
|
onEnd: () => {
|
|
824
|
-
|
|
824
|
+
c.style.willChange = "auto";
|
|
825
825
|
}
|
|
826
826
|
}),
|
|
827
|
-
out: (
|
|
827
|
+
out: (c, e) => ({
|
|
828
828
|
spring: i,
|
|
829
829
|
tick: (a) => {
|
|
830
|
-
const
|
|
831
|
-
|
|
830
|
+
const l = d ? (1 - a) * -100 : (1 - a) * 100;
|
|
831
|
+
c.style.transform = `translateX(${l}%)`;
|
|
832
832
|
},
|
|
833
833
|
prepare: (a) => {
|
|
834
|
-
|
|
834
|
+
b(a, e), a.style.zIndex = d ? "-1" : "1", a.style.willChange = "transform";
|
|
835
835
|
}
|
|
836
836
|
})
|
|
837
837
|
};
|
|
@@ -859,18 +859,18 @@ const Xt = (t = {}) => {
|
|
|
859
859
|
}), {
|
|
860
860
|
spring: Y,
|
|
861
861
|
prepare: (r) => {
|
|
862
|
-
|
|
862
|
+
b(r, d), r.style.willChange = "transform";
|
|
863
863
|
},
|
|
864
864
|
tick: (r) => {
|
|
865
|
-
const s = 1 - r,
|
|
866
|
-
i.style.transform = `perspective(${_}px) rotateY(${-
|
|
865
|
+
const s = 1 - r, c = s * k, e = s * 100;
|
|
866
|
+
i.style.transform = `perspective(${_}px) rotateY(${-c}deg) translateX(${e}%)`;
|
|
867
867
|
},
|
|
868
868
|
onEnd: () => {
|
|
869
869
|
n && n(), i.style.transform = "";
|
|
870
870
|
}
|
|
871
871
|
})
|
|
872
872
|
};
|
|
873
|
-
},
|
|
873
|
+
}, wt = { stiffness: 1, damping: 1 }, bt = { stiffness: 20, damping: 25 }, mt = "#000000", Et = "circle", O = "CURTAIN_REVEAL_OVERLAY_ID", At = {
|
|
874
874
|
position: "fixed",
|
|
875
875
|
inset: "0",
|
|
876
876
|
width: "100vw",
|
|
@@ -890,7 +890,7 @@ const Xt = (t = {}) => {
|
|
|
890
890
|
height: "100%",
|
|
891
891
|
willChange: "transform",
|
|
892
892
|
transition: "transform 0.3s ease"
|
|
893
|
-
},
|
|
893
|
+
}, St = {
|
|
894
894
|
display: "inline-flex",
|
|
895
895
|
alignItems: "center",
|
|
896
896
|
justifyContent: "center",
|
|
@@ -899,7 +899,7 @@ const Xt = (t = {}) => {
|
|
|
899
899
|
fontWeight: "900",
|
|
900
900
|
letterSpacing: "0.02em",
|
|
901
901
|
color: "#FFFFFF"
|
|
902
|
-
},
|
|
902
|
+
}, Tt = 0.4, T = 0.5, kt = 0.2;
|
|
903
903
|
function _t(t, n) {
|
|
904
904
|
switch (t) {
|
|
905
905
|
case "circle":
|
|
@@ -914,44 +914,44 @@ function _t(t, n) {
|
|
|
914
914
|
}
|
|
915
915
|
const It = (t) => t.reduce((n, i) => n + i, 0), Ht = (t = {}) => {
|
|
916
916
|
const {
|
|
917
|
-
background: n =
|
|
917
|
+
background: n = mt,
|
|
918
918
|
texts: i = [],
|
|
919
919
|
shape: d = Et,
|
|
920
|
-
inSpring: r =
|
|
921
|
-
outSpring: s =
|
|
922
|
-
textStyle:
|
|
920
|
+
inSpring: r = bt,
|
|
921
|
+
outSpring: s = wt,
|
|
922
|
+
textStyle: c = {}
|
|
923
923
|
} = t;
|
|
924
924
|
return {
|
|
925
925
|
out: (e, a) => {
|
|
926
|
-
const
|
|
926
|
+
const l = e.style.opacity;
|
|
927
927
|
return {
|
|
928
928
|
spring: s,
|
|
929
929
|
from: 1,
|
|
930
930
|
to: 0,
|
|
931
|
-
prepare: (
|
|
932
|
-
|
|
931
|
+
prepare: (o) => {
|
|
932
|
+
b(o, a), o.style.opacity = "1";
|
|
933
933
|
},
|
|
934
|
-
tick: (
|
|
935
|
-
const p = Math.max(0,
|
|
934
|
+
tick: (o) => {
|
|
935
|
+
const p = Math.max(0, o - Tt);
|
|
936
936
|
e.style.opacity = String(p);
|
|
937
937
|
},
|
|
938
938
|
onEnd: () => {
|
|
939
|
-
e.style.opacity =
|
|
939
|
+
e.style.opacity = l;
|
|
940
940
|
}
|
|
941
941
|
};
|
|
942
942
|
},
|
|
943
943
|
in: (e) => {
|
|
944
|
-
let a = null,
|
|
944
|
+
let a = null, l = null, o = null;
|
|
945
945
|
const p = document.body.style.overflow, g = document.getElementById(
|
|
946
946
|
O
|
|
947
947
|
);
|
|
948
948
|
let u = [];
|
|
949
949
|
const y = () => {
|
|
950
|
-
a = document.createElement("div"), a.id = O, Object.assign(a.style, At, { background: n }), document.body.appendChild(a),
|
|
950
|
+
a = document.createElement("div"), a.id = O, Object.assign(a.style, At, { background: n }), document.body.appendChild(a), l = document.createElement("div"), Object.assign(l.style, Lt), a.appendChild(l), o = document.createElement("div"), Object.assign(o.style, Ct), l.appendChild(o), i.forEach((h) => {
|
|
951
951
|
const f = document.createElement("div");
|
|
952
|
-
f.textContent =
|
|
953
|
-
}), u = Array.from(
|
|
954
|
-
(
|
|
952
|
+
f.textContent = h, Object.assign(f.style, St, c), o.appendChild(f);
|
|
953
|
+
}), u = Array.from(o.children).map(
|
|
954
|
+
(h) => h.getBoundingClientRect().width
|
|
955
955
|
);
|
|
956
956
|
};
|
|
957
957
|
return {
|
|
@@ -959,44 +959,44 @@ const It = (t) => t.reduce((n, i) => n + i, 0), Ht = (t = {}) => {
|
|
|
959
959
|
from: 0,
|
|
960
960
|
to: 1,
|
|
961
961
|
prepare: () => {
|
|
962
|
-
document.body.style.overflow = "hidden", e.style.opacity = "1", g == null || g.remove(), y(), a &&
|
|
962
|
+
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)");
|
|
963
963
|
},
|
|
964
|
-
tick: (
|
|
965
|
-
if (!(!a || !
|
|
966
|
-
if (
|
|
967
|
-
const f =
|
|
964
|
+
tick: (h) => {
|
|
965
|
+
if (!(!a || !l || !o)) {
|
|
966
|
+
if (h <= T && i.length > 0) {
|
|
967
|
+
const f = h / T, $ = Math.min(
|
|
968
968
|
Math.floor(f * i.length),
|
|
969
969
|
i.length - 1
|
|
970
|
-
),
|
|
971
|
-
|
|
970
|
+
), w = u[$] ?? 0, x = It(u.slice(0, $));
|
|
971
|
+
l.style.width = `${w}px`, o.style.transform = `translateX(-${x}px)`;
|
|
972
972
|
}
|
|
973
|
-
if (
|
|
973
|
+
if (h > T) {
|
|
974
974
|
const $ = 1 - Math.max(
|
|
975
975
|
0,
|
|
976
|
-
Math.min(1, (
|
|
976
|
+
Math.min(1, (h - T) / kt)
|
|
977
977
|
);
|
|
978
|
-
a.style.clipPath = _t(d, $),
|
|
978
|
+
a.style.clipPath = _t(d, $), l.style.transform = `scale(${$})`;
|
|
979
979
|
}
|
|
980
980
|
}
|
|
981
981
|
},
|
|
982
982
|
onEnd: () => {
|
|
983
|
-
a == null || a.remove(), a =
|
|
983
|
+
a == null || a.remove(), a = l = o = null, document.body.style.overflow = p;
|
|
984
984
|
}
|
|
985
985
|
};
|
|
986
986
|
}
|
|
987
987
|
};
|
|
988
988
|
};
|
|
989
989
|
export {
|
|
990
|
-
|
|
990
|
+
vt as blind,
|
|
991
991
|
Ht as curtainReveal,
|
|
992
|
-
|
|
992
|
+
Dt as drill,
|
|
993
993
|
Ft as fade,
|
|
994
994
|
Yt as film,
|
|
995
995
|
Ot as hero,
|
|
996
996
|
Ut as instagram,
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
997
|
+
Vt as jaemin,
|
|
998
|
+
Wt as pinterest,
|
|
999
|
+
Xt as scroll,
|
|
1000
1000
|
zt as slide,
|
|
1001
1001
|
Bt as strip
|
|
1002
1002
|
};
|