@ssgoi/core 3.2.0 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/with-resolvers.d.ts +7 -0
- package/dist/utils/with-resolvers.d.ts.map +1 -0
- package/dist/view-transitions/fade.d.ts.map +1 -1
- package/dist/view-transitions/index.cjs +11 -11
- package/dist/view-transitions/index.js +346 -337
- package/dist/view-transitions/instagram.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
import { p as x, g as b } from "../jaemin-BWkrXq0V.js";
|
|
2
|
-
import { a as
|
|
3
|
-
const
|
|
2
|
+
import { a as Mt } from "../jaemin-BWkrXq0V.js";
|
|
3
|
+
const v = (t) => new Promise((n) => setTimeout(n, t));
|
|
4
|
+
function T() {
|
|
5
|
+
let t, n;
|
|
6
|
+
return { promise: new Promise((d, r) => {
|
|
7
|
+
t = d, n = r;
|
|
8
|
+
}), resolve: t, reject: n };
|
|
9
|
+
}
|
|
10
|
+
const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q = 300, G = 10, j = "horizontal", K = "#000000", _t = (t = {}) => {
|
|
4
11
|
const {
|
|
5
|
-
inSpring: n =
|
|
6
|
-
outSpring:
|
|
7
|
-
transitionDelay: d =
|
|
8
|
-
blindCount: r =
|
|
9
|
-
direction:
|
|
10
|
-
blindColor: l =
|
|
12
|
+
inSpring: n = N,
|
|
13
|
+
outSpring: s = H,
|
|
14
|
+
transitionDelay: d = q,
|
|
15
|
+
blindCount: r = G,
|
|
16
|
+
direction: a = j,
|
|
17
|
+
blindColor: l = K
|
|
11
18
|
} = t;
|
|
12
19
|
let i, c = null;
|
|
13
|
-
const o = (e,
|
|
20
|
+
const o = (e, p, y = "left") => {
|
|
14
21
|
window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
|
|
15
|
-
const
|
|
16
|
-
|
|
22
|
+
const g = document.createElement("div");
|
|
23
|
+
g.className = "blind-container", g.style.cssText = `
|
|
17
24
|
position: absolute;
|
|
18
25
|
top: 0;
|
|
19
26
|
left: 0;
|
|
@@ -23,10 +30,10 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
23
30
|
z-index: 9999;
|
|
24
31
|
overflow: hidden;
|
|
25
32
|
`;
|
|
26
|
-
const
|
|
33
|
+
const u = [];
|
|
27
34
|
for (let m = 0; m < r; m++) {
|
|
28
35
|
const f = document.createElement("div");
|
|
29
|
-
if (
|
|
36
|
+
if (a === "horizontal") {
|
|
30
37
|
const w = 100 / r, $ = `calc(${w}% + 1px)`;
|
|
31
38
|
f.style.cssText = `
|
|
32
39
|
position: absolute;
|
|
@@ -35,8 +42,8 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
35
42
|
width: 100%;
|
|
36
43
|
height: ${$};
|
|
37
44
|
background: ${l};
|
|
38
|
-
transform: scaleX(${
|
|
39
|
-
transform-origin: ${
|
|
45
|
+
transform: scaleX(${p === "hidden" ? 0 : 1});
|
|
46
|
+
transform-origin: ${y} center;
|
|
40
47
|
will-change: transform;
|
|
41
48
|
`;
|
|
42
49
|
} else {
|
|
@@ -48,42 +55,42 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
48
55
|
width: ${$};
|
|
49
56
|
height: 100%;
|
|
50
57
|
background: ${l};
|
|
51
|
-
transform: scaleY(${
|
|
52
|
-
transform-origin: ${
|
|
58
|
+
transform: scaleY(${p === "hidden" ? 0 : 1});
|
|
59
|
+
transform-origin: ${y === "left" ? "top" : "bottom"} center;
|
|
53
60
|
will-change: transform;
|
|
54
61
|
`;
|
|
55
62
|
}
|
|
56
|
-
|
|
63
|
+
u.push(f), g.appendChild(f);
|
|
57
64
|
}
|
|
58
|
-
return e.appendChild(
|
|
65
|
+
return e.appendChild(g), { container: g, blinds: u };
|
|
59
66
|
};
|
|
60
67
|
return {
|
|
61
68
|
out: () => {
|
|
62
69
|
let e = null;
|
|
63
|
-
i = new Promise((
|
|
64
|
-
c =
|
|
70
|
+
i = new Promise((h) => {
|
|
71
|
+
c = h;
|
|
65
72
|
});
|
|
66
|
-
const
|
|
67
|
-
const
|
|
73
|
+
const p = (h) => {
|
|
74
|
+
const g = 1 - h;
|
|
68
75
|
return {
|
|
69
|
-
transform:
|
|
76
|
+
transform: a === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
|
|
70
77
|
};
|
|
71
78
|
};
|
|
72
79
|
return {
|
|
73
|
-
springs: Array.from({ length: r }, (
|
|
74
|
-
spring:
|
|
80
|
+
springs: Array.from({ length: r }, (h, g) => ({
|
|
81
|
+
spring: s,
|
|
75
82
|
offset: 0.2,
|
|
76
83
|
css: {
|
|
77
84
|
// Use getter for lazy element access (evaluated after prepare)
|
|
78
85
|
get element() {
|
|
79
|
-
return e == null ? void 0 : e.blinds[
|
|
86
|
+
return e == null ? void 0 : e.blinds[g];
|
|
80
87
|
},
|
|
81
|
-
style:
|
|
88
|
+
style: p
|
|
82
89
|
}
|
|
83
90
|
})),
|
|
84
91
|
schedule: "stagger",
|
|
85
|
-
prepare: (
|
|
86
|
-
x(
|
|
92
|
+
prepare: (h) => {
|
|
93
|
+
x(h), h.style.zIndex = "1000", e = o(h, "hidden", "left");
|
|
87
94
|
},
|
|
88
95
|
onStart: () => {
|
|
89
96
|
},
|
|
@@ -94,32 +101,32 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
94
101
|
},
|
|
95
102
|
in: () => {
|
|
96
103
|
let e = null;
|
|
97
|
-
const
|
|
98
|
-
const
|
|
104
|
+
const p = (h) => {
|
|
105
|
+
const g = 1 - h;
|
|
99
106
|
return {
|
|
100
|
-
transform:
|
|
107
|
+
transform: a === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
|
|
101
108
|
};
|
|
102
109
|
};
|
|
103
110
|
return {
|
|
104
|
-
springs: Array.from({ length: r }, (
|
|
111
|
+
springs: Array.from({ length: r }, (h, g) => ({
|
|
105
112
|
spring: n,
|
|
106
113
|
offset: 0.2,
|
|
107
114
|
css: {
|
|
108
115
|
// Use getter for lazy element access (evaluated after prepare)
|
|
109
116
|
get element() {
|
|
110
|
-
return e == null ? void 0 : e.blinds[
|
|
117
|
+
return e == null ? void 0 : e.blinds[g];
|
|
111
118
|
},
|
|
112
|
-
style:
|
|
119
|
+
style: p
|
|
113
120
|
}
|
|
114
121
|
})),
|
|
115
122
|
schedule: "stagger",
|
|
116
|
-
prepare: (
|
|
117
|
-
|
|
123
|
+
prepare: (h) => {
|
|
124
|
+
h.style.position = "relative", h.style.zIndex = "0", e = o(h, "closed", "right");
|
|
118
125
|
},
|
|
119
126
|
onStart: () => {
|
|
120
127
|
},
|
|
121
128
|
wait: async () => {
|
|
122
|
-
i && await i, await
|
|
129
|
+
i && await i, await v(d);
|
|
123
130
|
},
|
|
124
131
|
onEnd: () => {
|
|
125
132
|
e && e.container && e.container.remove();
|
|
@@ -127,19 +134,19 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
127
134
|
};
|
|
128
135
|
}
|
|
129
136
|
};
|
|
130
|
-
},
|
|
137
|
+
}, Z = {
|
|
131
138
|
stiffness: 150,
|
|
132
139
|
damping: 20
|
|
133
|
-
},
|
|
140
|
+
}, J = {
|
|
134
141
|
stiffness: 100,
|
|
135
142
|
damping: 20
|
|
136
|
-
},
|
|
137
|
-
var
|
|
138
|
-
const { opacity: n = !1, direction:
|
|
139
|
-
stiffness: ((
|
|
143
|
+
}, It = (t = {}) => {
|
|
144
|
+
var a, l;
|
|
145
|
+
const { opacity: n = !1, direction: s = "enter" } = t, d = s === "enter" ? Z : J, r = {
|
|
146
|
+
stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? d.stiffness,
|
|
140
147
|
damping: ((l = t.spring) == null ? void 0 : l.damping) ?? d.damping
|
|
141
148
|
};
|
|
142
|
-
return
|
|
149
|
+
return s === "enter" ? {
|
|
143
150
|
in: (i) => ({
|
|
144
151
|
spring: r,
|
|
145
152
|
prepare: () => {
|
|
@@ -196,33 +203,35 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
196
203
|
}
|
|
197
204
|
})
|
|
198
205
|
};
|
|
199
|
-
},
|
|
206
|
+
}, Q = { stiffness: 120, damping: 15 }, R = { stiffness: 100, damping: 20 }, tt = 0, Ot = (t = {}) => {
|
|
200
207
|
const {
|
|
201
|
-
inSpring: n =
|
|
202
|
-
outSpring:
|
|
203
|
-
transitionDelay: d =
|
|
208
|
+
inSpring: n = R,
|
|
209
|
+
outSpring: s = Q,
|
|
210
|
+
transitionDelay: d = tt
|
|
204
211
|
} = t;
|
|
205
|
-
let r,
|
|
212
|
+
let { promise: r, resolve: a } = T();
|
|
206
213
|
return {
|
|
207
214
|
in: (l) => ({
|
|
208
215
|
spring: n,
|
|
209
216
|
prepare: () => {
|
|
210
|
-
l.style.willChange = "opacity";
|
|
217
|
+
l.style.opacity = "0", l.style.willChange = "opacity";
|
|
211
218
|
},
|
|
212
219
|
wait: async () => {
|
|
213
|
-
|
|
220
|
+
if (r) {
|
|
221
|
+
await r;
|
|
222
|
+
const i = T();
|
|
223
|
+
r = i.promise, a = i.resolve, await v(d);
|
|
224
|
+
}
|
|
214
225
|
},
|
|
215
226
|
css: (i) => ({
|
|
216
227
|
opacity: i
|
|
217
228
|
}),
|
|
218
229
|
onEnd: () => {
|
|
219
|
-
l.style.willChange = "auto";
|
|
230
|
+
l.style.willChange = "auto", l.style.opacity = "1";
|
|
220
231
|
}
|
|
221
232
|
}),
|
|
222
|
-
out: (l, i) => (
|
|
223
|
-
s
|
|
224
|
-
}), {
|
|
225
|
-
spring: a,
|
|
233
|
+
out: (l, i) => ({
|
|
234
|
+
spring: s,
|
|
226
235
|
css: (c) => ({
|
|
227
236
|
opacity: c
|
|
228
237
|
}),
|
|
@@ -230,11 +239,11 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
230
239
|
x(l, i), l.style.willChange = "opacity";
|
|
231
240
|
},
|
|
232
241
|
onEnd: () => {
|
|
233
|
-
|
|
242
|
+
a && a(), l.style.willChange = "auto";
|
|
234
243
|
}
|
|
235
244
|
})
|
|
236
245
|
};
|
|
237
|
-
},
|
|
246
|
+
}, nt = {
|
|
238
247
|
scaleDown: { stiffness: 20, damping: 7 },
|
|
239
248
|
// Soft start for cinematic scale
|
|
240
249
|
translate: { stiffness: 15, damping: 7 },
|
|
@@ -248,21 +257,21 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
248
257
|
// Start when scaleDown is 25% complete
|
|
249
258
|
scaleUp: 0.8
|
|
250
259
|
// Start when translate is 70% complete
|
|
251
|
-
},
|
|
260
|
+
}, et = 0.8, it = "white", Dt = (t) => {
|
|
252
261
|
var r;
|
|
253
|
-
const n =
|
|
262
|
+
const n = nt, s = et, d = ((r = t == null ? void 0 : t.border) == null ? void 0 : r.color) ?? it;
|
|
254
263
|
return {
|
|
255
|
-
out: async (
|
|
256
|
-
const i =
|
|
264
|
+
out: async (a, l) => {
|
|
265
|
+
const i = k(l), c = b(document.body, l.positionedParent), o = at(d, {
|
|
257
266
|
...i,
|
|
258
267
|
top: c.top
|
|
259
268
|
}), e = {
|
|
260
269
|
scale: 1,
|
|
261
270
|
translateY: -i.top
|
|
262
|
-
},
|
|
263
|
-
|
|
264
|
-
const
|
|
265
|
-
|
|
271
|
+
}, p = () => {
|
|
272
|
+
a.style.transform = `translateY(${e.translateY}px) scale(${e.scale})`;
|
|
273
|
+
const y = (i.width - i.width * e.scale) / 2, h = (i.height - i.height * e.scale) / 2;
|
|
274
|
+
st(o, y, h);
|
|
266
275
|
};
|
|
267
276
|
return {
|
|
268
277
|
springs: [
|
|
@@ -270,50 +279,50 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
270
279
|
{
|
|
271
280
|
spring: n.scaleDown,
|
|
272
281
|
offset: E.scaleDown,
|
|
273
|
-
tick: (
|
|
274
|
-
const
|
|
275
|
-
e.scale = 1 - (1 -
|
|
282
|
+
tick: (y) => {
|
|
283
|
+
const h = 1 - y;
|
|
284
|
+
e.scale = 1 - (1 - s) * h, p();
|
|
276
285
|
}
|
|
277
286
|
},
|
|
278
287
|
// Spring 2: Translate (vertical movement)
|
|
279
288
|
{
|
|
280
289
|
spring: n.translate,
|
|
281
290
|
offset: E.translate,
|
|
282
|
-
tick: (
|
|
283
|
-
const
|
|
284
|
-
e.translateY = -i.top - i.height *
|
|
291
|
+
tick: (y) => {
|
|
292
|
+
const h = 1 - y;
|
|
293
|
+
e.translateY = -i.top - i.height * h, p();
|
|
285
294
|
}
|
|
286
295
|
},
|
|
287
296
|
// Spring 3: Scale Up (scale → 1)
|
|
288
297
|
{
|
|
289
298
|
spring: n.scaleUp,
|
|
290
299
|
offset: E.scaleUp,
|
|
291
|
-
tick: (
|
|
292
|
-
const
|
|
293
|
-
e.scale =
|
|
300
|
+
tick: (y) => {
|
|
301
|
+
const h = 1 - y;
|
|
302
|
+
e.scale = s + (1 - s) * h, p();
|
|
294
303
|
}
|
|
295
304
|
}
|
|
296
305
|
],
|
|
297
306
|
schedule: "stagger",
|
|
298
307
|
prepare: () => {
|
|
299
|
-
x(
|
|
300
|
-
for (const
|
|
301
|
-
l.positionedParent.appendChild(
|
|
308
|
+
x(a), S(a, i), _(a, i), rt(a, i);
|
|
309
|
+
for (const y of o)
|
|
310
|
+
l.positionedParent.appendChild(y);
|
|
302
311
|
},
|
|
303
312
|
onEnd: () => {
|
|
304
|
-
|
|
305
|
-
for (const
|
|
306
|
-
l.positionedParent.removeChild(
|
|
313
|
+
a.style.clipPath = "", a.style.transformOrigin = "", setTimeout(() => {
|
|
314
|
+
for (const y of o)
|
|
315
|
+
l.positionedParent.removeChild(y);
|
|
307
316
|
}, 1e3);
|
|
308
317
|
}
|
|
309
318
|
};
|
|
310
319
|
},
|
|
311
|
-
in: async (
|
|
312
|
-
const i =
|
|
313
|
-
scale:
|
|
320
|
+
in: async (a, l) => {
|
|
321
|
+
const i = k(l), c = {
|
|
322
|
+
scale: s,
|
|
314
323
|
translateY: -i.top + i.height
|
|
315
324
|
}, o = () => {
|
|
316
|
-
|
|
325
|
+
a.style.transform = `translateY(${c.translateY}px) scale(${c.scale})`;
|
|
317
326
|
};
|
|
318
327
|
return {
|
|
319
328
|
springs: [
|
|
@@ -322,7 +331,7 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
322
331
|
spring: n.scaleDown,
|
|
323
332
|
offset: E.scaleDown,
|
|
324
333
|
tick: (e) => {
|
|
325
|
-
c.scale = 1 - (1 -
|
|
334
|
+
c.scale = 1 - (1 - s) * e, o();
|
|
326
335
|
}
|
|
327
336
|
},
|
|
328
337
|
// Spring 2: Translate (vertical movement from bottom to top)
|
|
@@ -338,32 +347,32 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
338
347
|
spring: n.scaleUp,
|
|
339
348
|
offset: E.scaleUp,
|
|
340
349
|
tick: (e) => {
|
|
341
|
-
c.scale =
|
|
350
|
+
c.scale = s + (1 - s) * e, o();
|
|
342
351
|
}
|
|
343
352
|
}
|
|
344
353
|
],
|
|
345
354
|
schedule: "stagger",
|
|
346
355
|
prepare: () => {
|
|
347
|
-
|
|
356
|
+
S(a, i), _(a, i), a.style.transform = `translateY(${-i.top + i.height}px) scale(${s})`;
|
|
348
357
|
},
|
|
349
358
|
onEnd: () => {
|
|
350
|
-
|
|
359
|
+
a.style.clipPath = "", a.style.transformOrigin = "", a.style.transform = "";
|
|
351
360
|
}
|
|
352
361
|
};
|
|
353
362
|
}
|
|
354
363
|
};
|
|
355
364
|
};
|
|
356
|
-
function
|
|
357
|
-
const d = n * 0.7, r =
|
|
365
|
+
function st(t, n, s) {
|
|
366
|
+
const d = n * 0.7, r = s * 0.7;
|
|
358
367
|
t.topLeft.style.transform = `translate(${d}px, ${r}px)`, t.topRight.style.transform = `translate(${-d}px, ${r}px)`, t.bottomLeft.style.transform = `translate(${d}px, ${-r}px)`, t.bottomRight.style.transform = `translate(${-d}px, ${-r}px)`;
|
|
359
368
|
}
|
|
360
|
-
function
|
|
369
|
+
function at(t = "white", n) {
|
|
361
370
|
const r = document.createElement("div");
|
|
362
371
|
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";
|
|
363
|
-
const
|
|
364
|
-
|
|
372
|
+
const a = document.createElement("div");
|
|
373
|
+
a.style.position = "absolute", a.style.width = "15px", a.style.height = "1px", a.style.backgroundColor = t, a.style.top = "0", a.style.left = "0";
|
|
365
374
|
const l = document.createElement("div");
|
|
366
|
-
l.style.position = "absolute", l.style.width = "1px", l.style.height = "15px", l.style.backgroundColor = t, l.style.top = "0", l.style.left = "0", r.appendChild(
|
|
375
|
+
l.style.position = "absolute", l.style.width = "1px", l.style.height = "15px", l.style.backgroundColor = t, l.style.top = "0", l.style.left = "0", r.appendChild(a), r.appendChild(l);
|
|
367
376
|
const i = document.createElement("div");
|
|
368
377
|
i.style.position = "fixed", i.style.pointerEvents = "none", i.style.zIndex = "9999", i.style.top = `${n.top - 1}px`, i.style.left = `${n.left + n.width - 15 + 1}px`, i.style.width = "15px", i.style.height = "15px";
|
|
369
378
|
const c = document.createElement("div");
|
|
@@ -372,26 +381,26 @@ function st(t = "white", n) {
|
|
|
372
381
|
o.style.position = "absolute", o.style.width = "1px", o.style.height = "15px", o.style.backgroundColor = t, o.style.top = "0", o.style.right = "0", i.appendChild(c), i.appendChild(o);
|
|
373
382
|
const e = document.createElement("div");
|
|
374
383
|
e.style.position = "fixed", e.style.pointerEvents = "none", e.style.zIndex = "9999", e.style.top = `${n.top + n.height - 15 + 1}px`, e.style.left = `${n.left - 1}px`, e.style.width = "15px", e.style.height = "15px";
|
|
375
|
-
const h = document.createElement("div");
|
|
376
|
-
h.style.position = "absolute", h.style.width = "15px", h.style.height = "1px", h.style.backgroundColor = t, h.style.bottom = "0", h.style.left = "0";
|
|
377
|
-
const u = document.createElement("div");
|
|
378
|
-
u.style.position = "absolute", u.style.width = "1px", u.style.height = "15px", u.style.backgroundColor = t, u.style.bottom = "0", u.style.left = "0", e.appendChild(h), e.appendChild(u);
|
|
379
384
|
const p = document.createElement("div");
|
|
380
|
-
p.style.position = "
|
|
385
|
+
p.style.position = "absolute", p.style.width = "15px", p.style.height = "1px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.left = "0";
|
|
381
386
|
const y = document.createElement("div");
|
|
382
|
-
y.style.position = "absolute", y.style.width = "
|
|
387
|
+
y.style.position = "absolute", y.style.width = "1px", y.style.height = "15px", y.style.backgroundColor = t, y.style.bottom = "0", y.style.left = "0", e.appendChild(p), e.appendChild(y);
|
|
388
|
+
const h = document.createElement("div");
|
|
389
|
+
h.style.position = "fixed", h.style.pointerEvents = "none", h.style.zIndex = "9999", h.style.top = `${n.top + n.height - 15 + 1}px`, h.style.left = `${n.left + n.width - 15 + 1}px`, h.style.width = "15px", h.style.height = "15px";
|
|
383
390
|
const g = document.createElement("div");
|
|
384
|
-
|
|
391
|
+
g.style.position = "absolute", g.style.width = "15px", g.style.height = "1px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.right = "0";
|
|
392
|
+
const u = document.createElement("div");
|
|
393
|
+
return u.style.position = "absolute", u.style.width = "1px", u.style.height = "15px", u.style.backgroundColor = t, u.style.bottom = "0", u.style.right = "0", h.appendChild(g), h.appendChild(u), {
|
|
385
394
|
topLeft: r,
|
|
386
395
|
topRight: i,
|
|
387
396
|
bottomLeft: e,
|
|
388
|
-
bottomRight:
|
|
397
|
+
bottomRight: h,
|
|
389
398
|
*[Symbol.iterator]() {
|
|
390
|
-
yield r, yield i, yield e, yield
|
|
399
|
+
yield r, yield i, yield e, yield h;
|
|
391
400
|
}
|
|
392
401
|
};
|
|
393
402
|
}
|
|
394
|
-
function
|
|
403
|
+
function k(t) {
|
|
395
404
|
const n = b(document.body, t.positionedParent);
|
|
396
405
|
return {
|
|
397
406
|
top: t.scroll.y,
|
|
@@ -400,11 +409,11 @@ function T(t) {
|
|
|
400
409
|
height: window.innerHeight - n.top
|
|
401
410
|
};
|
|
402
411
|
}
|
|
403
|
-
function k(t, n) {
|
|
404
|
-
const a = n.left + n.width / 2, d = n.top + n.height / 2;
|
|
405
|
-
t.style.transformOrigin = `${a}px ${d}px`;
|
|
406
|
-
}
|
|
407
412
|
function S(t, n) {
|
|
413
|
+
const s = n.left + n.width / 2, d = n.top + n.height / 2;
|
|
414
|
+
t.style.transformOrigin = `${s}px ${d}px`;
|
|
415
|
+
}
|
|
416
|
+
function _(t, n) {
|
|
408
417
|
t.style.clipPath = `polygon(
|
|
409
418
|
${n.left}px ${n.top}px,
|
|
410
419
|
${n.left + n.width}px ${n.top}px,
|
|
@@ -412,33 +421,33 @@ function S(t, n) {
|
|
|
412
421
|
${n.left}px ${n.top + n.height}px
|
|
413
422
|
)`;
|
|
414
423
|
}
|
|
415
|
-
function
|
|
424
|
+
function rt(t, n) {
|
|
416
425
|
t.style.transform = `translateY(${-n.top}px)`;
|
|
417
426
|
}
|
|
418
|
-
function
|
|
427
|
+
function lt(t, n) {
|
|
419
428
|
return t.querySelector(`[data-hero-key="${n}"]`);
|
|
420
429
|
}
|
|
421
|
-
const
|
|
430
|
+
const Pt = (t = {}) => {
|
|
422
431
|
var l, i;
|
|
423
432
|
const n = {
|
|
424
433
|
stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
|
|
425
434
|
damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 30
|
|
426
|
-
},
|
|
427
|
-
let r = null,
|
|
435
|
+
}, s = t.timeout ?? 300, d = t.maxDistance ?? 700;
|
|
436
|
+
let r = null, a = null;
|
|
428
437
|
return {
|
|
429
438
|
in: async (c, o) => {
|
|
430
|
-
const e = c,
|
|
431
|
-
if (
|
|
439
|
+
const e = c, p = Array.from(e.querySelectorAll("[data-hero-key]"));
|
|
440
|
+
if (p.length === 0)
|
|
432
441
|
return {
|
|
433
442
|
spring: n,
|
|
434
443
|
tick: () => {
|
|
435
444
|
}
|
|
436
445
|
// No hero elements, skip animation
|
|
437
446
|
};
|
|
438
|
-
if (!await new Promise((
|
|
439
|
-
r ?
|
|
440
|
-
|
|
441
|
-
},
|
|
447
|
+
if (!await new Promise((g) => {
|
|
448
|
+
r ? g(!0) : (a = g, setTimeout(() => {
|
|
449
|
+
a = null, g(!1);
|
|
450
|
+
}, s));
|
|
442
451
|
}) || !r)
|
|
443
452
|
return r = null, {
|
|
444
453
|
spring: n,
|
|
@@ -446,56 +455,56 @@ const Dt = (t = {}) => {
|
|
|
446
455
|
}
|
|
447
456
|
// No fromNode, skip animation
|
|
448
457
|
};
|
|
449
|
-
const
|
|
450
|
-
const
|
|
451
|
-
if (!
|
|
452
|
-
const m =
|
|
458
|
+
const h = p.map((g) => {
|
|
459
|
+
const u = g.getAttribute("data-hero-key");
|
|
460
|
+
if (!u) return null;
|
|
461
|
+
const m = lt(r, u);
|
|
453
462
|
if (!m) return null;
|
|
454
|
-
const f =
|
|
463
|
+
const f = g, w = b(r, m), $ = b(e, f), F = w.left - $.left - o.scrollOffset.x, Y = w.top - $.top - o.scrollOffset.y, U = w.width / $.width, V = w.height / $.height, W = f.style.transform, z = f.style.position, X = f.style.transformOrigin, M = f.style.zIndex, B = f.style.willChange;
|
|
455
464
|
return {
|
|
456
465
|
toEl: f,
|
|
457
|
-
dx:
|
|
458
|
-
dy:
|
|
459
|
-
dw:
|
|
460
|
-
dh:
|
|
461
|
-
originalTransform:
|
|
462
|
-
originalPosition:
|
|
463
|
-
originalTransformOrigin:
|
|
464
|
-
originalZIndex:
|
|
465
|
-
originalWillChange:
|
|
466
|
+
dx: F,
|
|
467
|
+
dy: Y,
|
|
468
|
+
dw: U,
|
|
469
|
+
dh: V,
|
|
470
|
+
originalTransform: W,
|
|
471
|
+
originalPosition: z,
|
|
472
|
+
originalTransformOrigin: X,
|
|
473
|
+
originalZIndex: M,
|
|
474
|
+
originalWillChange: B
|
|
466
475
|
};
|
|
467
476
|
}).filter(
|
|
468
|
-
(
|
|
477
|
+
(g) => g !== null && Math.abs(g.dy) <= d
|
|
469
478
|
);
|
|
470
|
-
return r = null,
|
|
479
|
+
return r = null, h.length === 0 ? {
|
|
471
480
|
spring: n,
|
|
472
481
|
tick: () => {
|
|
473
482
|
}
|
|
474
483
|
// No matching hero elements
|
|
475
484
|
} : {
|
|
476
|
-
springs:
|
|
485
|
+
springs: h.map(({ toEl: g, dx: u, dy: m, dw: f, dh: w }) => ({
|
|
477
486
|
spring: n,
|
|
478
487
|
tick: ($) => {
|
|
479
|
-
|
|
488
|
+
g.style.transform = `translate(${(1 - $) * u}px, ${(1 - $) * m}px) scale(${$ + (1 - $) * f}, ${$ + (1 - $) * w})`;
|
|
480
489
|
}
|
|
481
490
|
})),
|
|
482
491
|
schedule: "parallel",
|
|
483
492
|
prepare: () => {
|
|
484
|
-
|
|
485
|
-
|
|
493
|
+
h.forEach(({ toEl: g }) => {
|
|
494
|
+
g.style.position = "relative", g.style.transformOrigin = "top left", g.style.zIndex = "1000", g.style.willChange = "transform";
|
|
486
495
|
});
|
|
487
496
|
},
|
|
488
497
|
onEnd: () => {
|
|
489
|
-
|
|
498
|
+
h.forEach(
|
|
490
499
|
({
|
|
491
|
-
toEl:
|
|
492
|
-
originalTransform:
|
|
500
|
+
toEl: g,
|
|
501
|
+
originalTransform: u,
|
|
493
502
|
originalPosition: m,
|
|
494
503
|
originalTransformOrigin: f,
|
|
495
504
|
originalZIndex: w,
|
|
496
505
|
originalWillChange: $
|
|
497
506
|
}) => {
|
|
498
|
-
|
|
507
|
+
g.style.transform = u, g.style.position = m, g.style.transformOrigin = f, g.style.zIndex = w, g.style.willChange = $;
|
|
499
508
|
}
|
|
500
509
|
);
|
|
501
510
|
}
|
|
@@ -504,7 +513,7 @@ const Dt = (t = {}) => {
|
|
|
504
513
|
out: async (c) => ({
|
|
505
514
|
spring: n,
|
|
506
515
|
onStart: () => {
|
|
507
|
-
r = c,
|
|
516
|
+
r = c, a && (a(!0), a = null);
|
|
508
517
|
},
|
|
509
518
|
tick: () => {
|
|
510
519
|
},
|
|
@@ -514,43 +523,43 @@ const Dt = (t = {}) => {
|
|
|
514
523
|
})
|
|
515
524
|
};
|
|
516
525
|
};
|
|
517
|
-
function
|
|
526
|
+
function ot({
|
|
518
527
|
detailRect: t,
|
|
519
528
|
galleryRect: n,
|
|
520
|
-
pageRect:
|
|
529
|
+
pageRect: s,
|
|
521
530
|
scrollOffset: d
|
|
522
531
|
}) {
|
|
523
|
-
const r = n.left - t.left + (n.width - t.width) / 2 - d.x,
|
|
532
|
+
const r = n.left - t.left + (n.width - t.width) / 2 - d.x, a = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
|
|
524
533
|
return {
|
|
525
534
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
526
|
-
animate: (
|
|
527
|
-
const
|
|
535
|
+
animate: (g) => {
|
|
536
|
+
const u = 1 - g;
|
|
528
537
|
return {
|
|
529
|
-
clipPath: `inset(${o *
|
|
530
|
-
transform: `translate(${r *
|
|
538
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
539
|
+
transform: `translate(${r * u}px, ${a * u}px) scale(${1 + (c - 1) * u})`
|
|
531
540
|
};
|
|
532
541
|
}
|
|
533
542
|
};
|
|
534
543
|
}
|
|
535
|
-
function
|
|
544
|
+
function ct({
|
|
536
545
|
detailRect: t,
|
|
537
546
|
galleryRect: n,
|
|
538
|
-
pageRect:
|
|
547
|
+
pageRect: s,
|
|
539
548
|
scrollOffset: d
|
|
540
549
|
}) {
|
|
541
|
-
const r = n.left - t.left + (n.width - t.width) / 2 + d.x,
|
|
550
|
+
const r = n.left - t.left + (n.width - t.width) / 2 + d.x, a = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
|
|
542
551
|
return {
|
|
543
552
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
544
|
-
animate: (
|
|
545
|
-
const
|
|
553
|
+
animate: (g) => {
|
|
554
|
+
const u = 1 - g;
|
|
546
555
|
return {
|
|
547
|
-
clipPath: `inset(${o *
|
|
548
|
-
transform: `translate(${r *
|
|
556
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
557
|
+
transform: `translate(${r * u - d.x}px, ${a * u - d.y}px) scale(${1 + (c - 1) * u})`
|
|
549
558
|
};
|
|
550
559
|
}
|
|
551
560
|
};
|
|
552
561
|
}
|
|
553
|
-
function
|
|
562
|
+
function dt(t, n, s) {
|
|
554
563
|
const d = t.querySelector(
|
|
555
564
|
"[data-instagram-detail-key]"
|
|
556
565
|
), r = n.querySelector(
|
|
@@ -558,31 +567,31 @@ function ct(t, n, a) {
|
|
|
558
567
|
);
|
|
559
568
|
if (t.querySelectorAll("[data-instagram-detail-key]").length > 1 || n.querySelectorAll("[data-instagram-detail-key]").length > 1)
|
|
560
569
|
return null;
|
|
561
|
-
let
|
|
570
|
+
let a = null, l = null, i = !1;
|
|
562
571
|
if (!d && r) {
|
|
563
572
|
l = r;
|
|
564
573
|
const e = l.getAttribute("data-instagram-detail-key");
|
|
565
574
|
if (!e) return null;
|
|
566
|
-
|
|
575
|
+
a = t.querySelector(
|
|
567
576
|
`[data-instagram-gallery-key="${e}"]`
|
|
568
|
-
),
|
|
577
|
+
), a && (i = !0);
|
|
569
578
|
} else if (d && !r) {
|
|
570
579
|
l = d;
|
|
571
580
|
const e = l.getAttribute("data-instagram-detail-key");
|
|
572
581
|
if (!e) return null;
|
|
573
|
-
|
|
582
|
+
a = n.querySelector(
|
|
574
583
|
`[data-instagram-gallery-key="${e}"]`
|
|
575
|
-
),
|
|
584
|
+
), a && (i = !1);
|
|
576
585
|
}
|
|
577
|
-
if (!
|
|
586
|
+
if (!a || !l)
|
|
578
587
|
return null;
|
|
579
|
-
const c = b(i ? t : n,
|
|
588
|
+
const c = b(i ? t : n, a), o = b(i ? n : t, l);
|
|
580
589
|
if (i) {
|
|
581
|
-
const e =
|
|
590
|
+
const e = ot({
|
|
582
591
|
detailRect: o,
|
|
583
592
|
galleryRect: c,
|
|
584
593
|
pageRect: n.getBoundingClientRect(),
|
|
585
|
-
scrollOffset:
|
|
594
|
+
scrollOffset: s
|
|
586
595
|
});
|
|
587
596
|
return n.style.transformOrigin = e.transformOrigin, {
|
|
588
597
|
isEnterMode: !0,
|
|
@@ -590,11 +599,11 @@ function ct(t, n, a) {
|
|
|
590
599
|
// No outAnimation - gallery stays visible
|
|
591
600
|
};
|
|
592
601
|
} else {
|
|
593
|
-
const e =
|
|
602
|
+
const e = ct({
|
|
594
603
|
detailRect: o,
|
|
595
604
|
galleryRect: c,
|
|
596
605
|
pageRect: t.getBoundingClientRect(),
|
|
597
|
-
scrollOffset:
|
|
606
|
+
scrollOffset: s
|
|
598
607
|
});
|
|
599
608
|
return t.style.transformOrigin = e.transformOrigin, {
|
|
600
609
|
isEnterMode: !1,
|
|
@@ -603,119 +612,119 @@ function ct(t, n, a) {
|
|
|
603
612
|
};
|
|
604
613
|
}
|
|
605
614
|
}
|
|
606
|
-
const
|
|
615
|
+
const vt = (t = {}) => {
|
|
607
616
|
var i, c;
|
|
608
617
|
const n = {
|
|
609
618
|
stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 150,
|
|
610
619
|
damping: ((c = t.spring) == null ? void 0 : c.damping) ?? 20
|
|
611
|
-
},
|
|
612
|
-
let d = null, r = null,
|
|
620
|
+
}, s = t.timeout ?? 300;
|
|
621
|
+
let d = null, r = null, a = null, l = null;
|
|
613
622
|
return {
|
|
614
623
|
in: async (o, { scrollOffset: e }) => {
|
|
615
|
-
const
|
|
616
|
-
return !await new Promise((
|
|
617
|
-
d ?
|
|
618
|
-
r = null,
|
|
619
|
-
},
|
|
624
|
+
const p = o;
|
|
625
|
+
return !await new Promise((h) => {
|
|
626
|
+
d ? h(!0) : (r = h, setTimeout(() => {
|
|
627
|
+
r = null, h(!1);
|
|
628
|
+
}, s));
|
|
620
629
|
}) || !d ? (l == null || l(), l = null, d = null, {
|
|
621
630
|
spring: n,
|
|
622
631
|
css: () => ({})
|
|
623
|
-
}) : (
|
|
632
|
+
}) : (a = dt(d, p, e), l == null || l(), l = null, a ? (d = null, {
|
|
624
633
|
spring: n,
|
|
625
|
-
css: (
|
|
634
|
+
css: (h) => a != null && a.inAnimation ? a.inAnimation(h) : {}
|
|
626
635
|
}) : (d = null, {
|
|
627
636
|
spring: n,
|
|
628
637
|
css: () => ({})
|
|
629
638
|
}));
|
|
630
639
|
},
|
|
631
|
-
out: async (o) => {
|
|
632
|
-
const
|
|
633
|
-
l =
|
|
640
|
+
out: async (o, e) => {
|
|
641
|
+
const p = new Promise((y) => {
|
|
642
|
+
l = y;
|
|
634
643
|
});
|
|
635
644
|
return {
|
|
636
645
|
spring: n,
|
|
637
|
-
prepare: (
|
|
638
|
-
|
|
646
|
+
prepare: (y) => {
|
|
647
|
+
a != null && a.isEnterMode ? x(y) : (x(y, e), y.style.zIndex = "-1");
|
|
639
648
|
},
|
|
640
649
|
wait: async () => {
|
|
641
|
-
d = o, r && (r(!0), r = null), await
|
|
650
|
+
d = o, r && (r(!0), r = null), await p;
|
|
642
651
|
},
|
|
643
|
-
css: (
|
|
652
|
+
css: (y) => a != null && a.outAnimation ? a.outAnimation(y) : {}
|
|
644
653
|
};
|
|
645
654
|
}
|
|
646
655
|
};
|
|
647
656
|
};
|
|
648
|
-
function
|
|
657
|
+
function ht({
|
|
649
658
|
detailRect: t,
|
|
650
659
|
galleryRect: n,
|
|
651
|
-
pageRect:
|
|
660
|
+
pageRect: s,
|
|
652
661
|
scrollOffset: d
|
|
653
662
|
}) {
|
|
654
|
-
const r = n.left - t.left + (n.width - t.width) / 2 - d.x,
|
|
663
|
+
const r = n.left - t.left + (n.width - t.width) / 2 - d.x, a = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
|
|
655
664
|
return {
|
|
656
665
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
657
|
-
animate: (
|
|
658
|
-
const
|
|
666
|
+
animate: (g) => {
|
|
667
|
+
const u = 1 - g;
|
|
659
668
|
return {
|
|
660
|
-
clipPath: `inset(${o *
|
|
661
|
-
transform: `translate(${r *
|
|
669
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
670
|
+
transform: `translate(${r * u}px, ${a * u}px) scale(${1 + (c - 1) * u})`
|
|
662
671
|
};
|
|
663
672
|
}
|
|
664
673
|
};
|
|
665
674
|
}
|
|
666
|
-
function
|
|
675
|
+
function pt({
|
|
667
676
|
galleryRect: t,
|
|
668
677
|
detailRect: n,
|
|
669
|
-
scrollOffset:
|
|
678
|
+
scrollOffset: s
|
|
670
679
|
}) {
|
|
671
|
-
const d = n.left - t.left + (n.width - t.width) / 2 +
|
|
680
|
+
const d = n.left - t.left + (n.width - t.width) / 2 + s.x, r = n.top - t.top + (n.height - t.height) / 2 + s.y, a = n.width / t.width, l = n.height / t.height, i = Math.max(a, l);
|
|
672
681
|
return {
|
|
673
682
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
674
683
|
animate: (o) => {
|
|
675
684
|
const e = 1 - o;
|
|
676
685
|
return {
|
|
677
|
-
transform: `translate(${d * e -
|
|
686
|
+
transform: `translate(${d * e - s.x}px, ${r * e - s.y}px) scale(${1 + (i - 1) * e})`,
|
|
678
687
|
opacity: `${1 - e}`
|
|
679
688
|
};
|
|
680
689
|
}
|
|
681
690
|
};
|
|
682
691
|
}
|
|
683
|
-
function
|
|
692
|
+
function yt({
|
|
684
693
|
galleryRect: t,
|
|
685
694
|
detailRect: n,
|
|
686
|
-
scrollOffset:
|
|
695
|
+
scrollOffset: s
|
|
687
696
|
}) {
|
|
688
|
-
const d = n.left - t.left + (n.width - t.width) / 2 -
|
|
697
|
+
const d = n.left - t.left + (n.width - t.width) / 2 - s.x, r = n.top - t.top + (n.height - t.height) / 2 - s.y, a = n.width / t.width, l = n.height / t.height, i = Math.max(a, l);
|
|
689
698
|
return {
|
|
690
699
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
691
700
|
animate: (o) => {
|
|
692
|
-
const e = 1 - o,
|
|
701
|
+
const e = 1 - o, p = o;
|
|
693
702
|
return {
|
|
694
703
|
transform: `translate(${d * e}px, ${r * e}px) scale(${1 + (i - 1) * e})`,
|
|
695
|
-
opacity: `${
|
|
704
|
+
opacity: `${p}`
|
|
696
705
|
};
|
|
697
706
|
}
|
|
698
707
|
};
|
|
699
708
|
}
|
|
700
|
-
function
|
|
709
|
+
function gt({
|
|
701
710
|
detailRect: t,
|
|
702
711
|
galleryRect: n,
|
|
703
|
-
pageRect:
|
|
712
|
+
pageRect: s,
|
|
704
713
|
scrollOffset: d
|
|
705
714
|
}) {
|
|
706
|
-
const r = n.left - t.left + (n.width - t.width) / 2 + d.x,
|
|
715
|
+
const r = n.left - t.left + (n.width - t.width) / 2 + d.x, a = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
|
|
707
716
|
return {
|
|
708
717
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
709
|
-
animate: (
|
|
710
|
-
const
|
|
718
|
+
animate: (g) => {
|
|
719
|
+
const u = 1 - g;
|
|
711
720
|
return {
|
|
712
|
-
clipPath: `inset(${o *
|
|
713
|
-
transform: `translate(${r *
|
|
721
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
722
|
+
transform: `translate(${r * u - d.x}px, ${a * u - d.y}px) scale(${1 + (c - 1) * u})`
|
|
714
723
|
};
|
|
715
724
|
}
|
|
716
725
|
};
|
|
717
726
|
}
|
|
718
|
-
function
|
|
727
|
+
function ut(t, n, s) {
|
|
719
728
|
const d = t.querySelector(
|
|
720
729
|
"[data-pinterest-detail-key]"
|
|
721
730
|
), r = n.querySelector(
|
|
@@ -723,156 +732,156 @@ function gt(t, n, a) {
|
|
|
723
732
|
);
|
|
724
733
|
if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
|
|
725
734
|
return null;
|
|
726
|
-
let
|
|
735
|
+
let a = null, l = null, i = !1;
|
|
727
736
|
if (!d && r) {
|
|
728
737
|
l = r;
|
|
729
738
|
const e = l.getAttribute("data-pinterest-detail-key");
|
|
730
739
|
if (!e) return null;
|
|
731
|
-
|
|
740
|
+
a = t.querySelector(
|
|
732
741
|
`[data-pinterest-gallery-key="${e}"]`
|
|
733
|
-
),
|
|
742
|
+
), a && (i = !0);
|
|
734
743
|
} else if (d && !r) {
|
|
735
744
|
l = d;
|
|
736
745
|
const e = l.getAttribute("data-pinterest-detail-key");
|
|
737
746
|
if (!e) return null;
|
|
738
|
-
|
|
747
|
+
a = n.querySelector(
|
|
739
748
|
`[data-pinterest-gallery-key="${e}"]`
|
|
740
|
-
),
|
|
749
|
+
), a && (i = !1);
|
|
741
750
|
}
|
|
742
|
-
if (!
|
|
751
|
+
if (!a || !l)
|
|
743
752
|
return null;
|
|
744
|
-
const c = b(i ? t : n,
|
|
753
|
+
const c = b(i ? t : n, a), o = b(i ? n : t, l);
|
|
745
754
|
if (i) {
|
|
746
|
-
const e =
|
|
755
|
+
const e = ht({
|
|
747
756
|
detailRect: o,
|
|
748
757
|
galleryRect: c,
|
|
749
758
|
pageRect: n.getBoundingClientRect(),
|
|
750
|
-
scrollOffset:
|
|
751
|
-
}),
|
|
759
|
+
scrollOffset: s
|
|
760
|
+
}), p = pt({
|
|
752
761
|
galleryRect: c,
|
|
753
762
|
detailRect: o,
|
|
754
|
-
scrollOffset:
|
|
763
|
+
scrollOffset: s
|
|
755
764
|
});
|
|
756
|
-
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin =
|
|
765
|
+
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
|
|
757
766
|
inAnimation: e.animate,
|
|
758
|
-
outAnimation:
|
|
767
|
+
outAnimation: p.animate
|
|
759
768
|
};
|
|
760
769
|
} else {
|
|
761
|
-
const e =
|
|
770
|
+
const e = yt({
|
|
762
771
|
galleryRect: c,
|
|
763
772
|
detailRect: o,
|
|
764
|
-
scrollOffset:
|
|
765
|
-
}),
|
|
773
|
+
scrollOffset: s
|
|
774
|
+
}), p = gt({
|
|
766
775
|
detailRect: o,
|
|
767
776
|
galleryRect: c,
|
|
768
777
|
pageRect: t.getBoundingClientRect(),
|
|
769
|
-
scrollOffset:
|
|
778
|
+
scrollOffset: s
|
|
770
779
|
});
|
|
771
|
-
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin =
|
|
780
|
+
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
|
|
772
781
|
inAnimation: e.animate,
|
|
773
|
-
outAnimation:
|
|
782
|
+
outAnimation: p.animate
|
|
774
783
|
};
|
|
775
784
|
}
|
|
776
785
|
}
|
|
777
|
-
const
|
|
786
|
+
const Ft = (t = {}) => {
|
|
778
787
|
var i, c;
|
|
779
788
|
const n = {
|
|
780
789
|
stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 30,
|
|
781
790
|
damping: ((c = t.spring) == null ? void 0 : c.damping) ?? 10
|
|
782
|
-
},
|
|
783
|
-
let d = null, r = null,
|
|
791
|
+
}, s = t.timeout ?? 300;
|
|
792
|
+
let d = null, r = null, a = null, l = null;
|
|
784
793
|
return {
|
|
785
794
|
in: async (o, { scrollOffset: e }) => {
|
|
786
|
-
const
|
|
787
|
-
return !await new Promise((
|
|
788
|
-
d ?
|
|
789
|
-
r = null,
|
|
790
|
-
},
|
|
795
|
+
const p = o;
|
|
796
|
+
return !await new Promise((h) => {
|
|
797
|
+
d ? h(!0) : (r = h, setTimeout(() => {
|
|
798
|
+
r = null, h(!1);
|
|
799
|
+
}, s));
|
|
791
800
|
}) || !d ? (l == null || l(), l = null, d = null, {
|
|
792
801
|
spring: n,
|
|
793
802
|
css: () => ({})
|
|
794
|
-
}) : (
|
|
803
|
+
}) : (a = ut(d, p, e), l == null || l(), l = null, a ? (d = null, {
|
|
795
804
|
spring: n,
|
|
796
|
-
css: (
|
|
805
|
+
css: (h) => a ? a.inAnimation(h) : {}
|
|
797
806
|
}) : (d = null, {
|
|
798
807
|
spring: n,
|
|
799
808
|
css: () => ({})
|
|
800
809
|
}));
|
|
801
810
|
},
|
|
802
811
|
out: async (o) => {
|
|
803
|
-
const e = new Promise((
|
|
804
|
-
l =
|
|
812
|
+
const e = new Promise((p) => {
|
|
813
|
+
l = p;
|
|
805
814
|
});
|
|
806
815
|
return {
|
|
807
816
|
spring: n,
|
|
808
|
-
prepare: (
|
|
809
|
-
x(
|
|
817
|
+
prepare: (p) => {
|
|
818
|
+
x(p), p.style.zIndex = "-1";
|
|
810
819
|
},
|
|
811
820
|
wait: async () => {
|
|
812
821
|
d = o, r && (r(!0), r = null), await e;
|
|
813
822
|
},
|
|
814
|
-
css: (
|
|
823
|
+
css: (p) => a ? a.outAnimation(p) : {}
|
|
815
824
|
};
|
|
816
825
|
}
|
|
817
826
|
};
|
|
818
|
-
},
|
|
827
|
+
}, I = {
|
|
819
828
|
stiffness: 5,
|
|
820
829
|
damping: 4
|
|
821
|
-
},
|
|
830
|
+
}, Yt = (t = {}) => {
|
|
822
831
|
var c, o;
|
|
823
|
-
const n = t.direction ?? "up",
|
|
824
|
-
stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ??
|
|
825
|
-
damping: ((o = t.spring) == null ? void 0 : o.damping) ??
|
|
832
|
+
const n = t.direction ?? "up", s = {
|
|
833
|
+
stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? I.stiffness,
|
|
834
|
+
damping: ((o = t.spring) == null ? void 0 : o.damping) ?? I.damping
|
|
826
835
|
}, d = n === "up";
|
|
827
|
-
let r = null,
|
|
836
|
+
let r = null, a = null, l = null;
|
|
828
837
|
const i = () => {
|
|
829
|
-
if (r === null ||
|
|
838
|
+
if (r === null || a === null)
|
|
830
839
|
return null;
|
|
831
|
-
const e = Math.min(r,
|
|
832
|
-
return Math.max(e,
|
|
840
|
+
const e = Math.min(r, a), p = window.innerHeight;
|
|
841
|
+
return Math.max(e, p);
|
|
833
842
|
};
|
|
834
843
|
return {
|
|
835
|
-
in: (e) => (
|
|
836
|
-
spring:
|
|
844
|
+
in: (e) => (a = e.offsetHeight, r !== null && (l = i()), {
|
|
845
|
+
spring: s,
|
|
837
846
|
prepare: () => {
|
|
838
847
|
e.style.willChange = "transform", e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
|
|
839
848
|
},
|
|
840
|
-
tick: (
|
|
849
|
+
tick: (p) => {
|
|
841
850
|
l === null && (l = i());
|
|
842
|
-
const
|
|
843
|
-
e.style.transform = `translate3d(0, ${
|
|
851
|
+
const y = l ?? window.innerHeight, h = d ? (1 - p) * y : (1 - p) * -y;
|
|
852
|
+
e.style.transform = `translate3d(0, ${h}px, 0)`;
|
|
844
853
|
},
|
|
845
854
|
onEnd: () => {
|
|
846
855
|
e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.contain = "";
|
|
847
856
|
}
|
|
848
857
|
}),
|
|
849
|
-
out: (e,
|
|
850
|
-
spring:
|
|
858
|
+
out: (e, p) => ({
|
|
859
|
+
spring: s,
|
|
851
860
|
onStart: () => {
|
|
852
|
-
r = e.offsetHeight,
|
|
861
|
+
r = e.offsetHeight, a !== null && (l = i());
|
|
853
862
|
},
|
|
854
|
-
tick: (
|
|
863
|
+
tick: (y) => {
|
|
855
864
|
l === null && (l = i());
|
|
856
|
-
const
|
|
857
|
-
e.style.transform = `translate3d(0, ${
|
|
865
|
+
const h = l ?? window.innerHeight, g = d ? (1 - y) * -h : (1 - y) * h;
|
|
866
|
+
e.style.transform = `translate3d(0, ${g}px, 0)`;
|
|
858
867
|
},
|
|
859
|
-
prepare: (
|
|
860
|
-
x(
|
|
868
|
+
prepare: (y) => {
|
|
869
|
+
x(y, p), y.style.zIndex = d ? "-1" : "1", y.style.willChange = "transform", y.style.backfaceVisibility = "hidden", y.style.contain = "layout paint", y.style.pointerEvents = "none";
|
|
861
870
|
}
|
|
862
871
|
})
|
|
863
872
|
};
|
|
864
|
-
},
|
|
873
|
+
}, O = {
|
|
865
874
|
stiffness: 15,
|
|
866
875
|
damping: 7
|
|
867
|
-
},
|
|
868
|
-
var r,
|
|
869
|
-
const n = t.direction ?? "left",
|
|
870
|
-
stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ??
|
|
871
|
-
damping: ((
|
|
876
|
+
}, Ut = (t = {}) => {
|
|
877
|
+
var r, a;
|
|
878
|
+
const n = t.direction ?? "left", s = {
|
|
879
|
+
stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? O.stiffness,
|
|
880
|
+
damping: ((a = t.spring) == null ? void 0 : a.damping) ?? O.damping
|
|
872
881
|
}, d = n === "left";
|
|
873
882
|
return {
|
|
874
883
|
in: (l) => ({
|
|
875
|
-
spring:
|
|
884
|
+
spring: s,
|
|
876
885
|
prepare: () => {
|
|
877
886
|
l.style.willChange = "transform", l.style.backfaceVisibility = "hidden", l.style.contain = "layout paint";
|
|
878
887
|
},
|
|
@@ -884,7 +893,7 @@ const vt = (t = {}) => {
|
|
|
884
893
|
}
|
|
885
894
|
}),
|
|
886
895
|
out: (l, i) => ({
|
|
887
|
-
spring:
|
|
896
|
+
spring: s,
|
|
888
897
|
css: (c) => ({
|
|
889
898
|
transform: `translate3d(${d ? (1 - c) * -100 : (1 - c) * 100}%, 0, 0)`
|
|
890
899
|
}),
|
|
@@ -893,46 +902,46 @@ const vt = (t = {}) => {
|
|
|
893
902
|
}
|
|
894
903
|
})
|
|
895
904
|
};
|
|
896
|
-
},
|
|
905
|
+
}, D = { stiffness: 17, damping: 6 }, L = 20, C = 800, Vt = () => {
|
|
897
906
|
let t, n = null;
|
|
898
907
|
return {
|
|
899
|
-
in: (
|
|
900
|
-
spring:
|
|
908
|
+
in: (s) => ({
|
|
909
|
+
spring: D,
|
|
901
910
|
prepare: () => {
|
|
902
|
-
|
|
911
|
+
s.style.willChange = "transform", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.transform = `perspective(${C}px) rotateY(${L}deg) translate3d(-100%, 0, 0)`;
|
|
903
912
|
},
|
|
904
913
|
wait: async () => {
|
|
905
914
|
t && await t;
|
|
906
915
|
},
|
|
907
916
|
css: (d) => {
|
|
908
|
-
const r = (1 - d) * L,
|
|
917
|
+
const r = (1 - d) * L, a = -(1 - d) * 100;
|
|
909
918
|
return {
|
|
910
|
-
transform: `perspective(${C}px) rotateY(${r}deg) translate3d(${
|
|
919
|
+
transform: `perspective(${C}px) rotateY(${r}deg) translate3d(${a}%, 0, 0)`
|
|
911
920
|
};
|
|
912
921
|
},
|
|
913
922
|
onEnd: () => {
|
|
914
|
-
|
|
923
|
+
s.style.transform = "", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "";
|
|
915
924
|
}
|
|
916
925
|
}),
|
|
917
|
-
out: (
|
|
926
|
+
out: (s, d) => (t = new Promise((r) => {
|
|
918
927
|
n = r;
|
|
919
928
|
}), {
|
|
920
|
-
spring:
|
|
929
|
+
spring: D,
|
|
921
930
|
prepare: (r) => {
|
|
922
931
|
x(r, d), r.style.willChange = "transform", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint", r.style.pointerEvents = "none", r.style.transform = `perspective(${C}px) rotateY(0deg) translate3d(0%, 0, 0)`;
|
|
923
932
|
},
|
|
924
933
|
css: (r) => {
|
|
925
|
-
const
|
|
934
|
+
const a = 1 - r, l = a * L, i = a * 100;
|
|
926
935
|
return {
|
|
927
936
|
transform: `perspective(${C}px) rotateY(${-l}deg) translate3d(${i}%, 0, 0)`
|
|
928
937
|
};
|
|
929
938
|
},
|
|
930
939
|
onEnd: () => {
|
|
931
|
-
n && n(),
|
|
940
|
+
n && n(), s.style.transform = "";
|
|
932
941
|
}
|
|
933
942
|
})
|
|
934
943
|
};
|
|
935
|
-
},
|
|
944
|
+
}, ft = { stiffness: 1, damping: 1 }, $t = { stiffness: 20, damping: 25 }, mt = "#000000", wt = "circle", P = "CURTAIN_REVEAL_OVERLAY_ID", xt = {
|
|
936
945
|
position: "fixed",
|
|
937
946
|
inset: "0",
|
|
938
947
|
width: "100vw",
|
|
@@ -942,17 +951,17 @@ const vt = (t = {}) => {
|
|
|
942
951
|
alignItems: "center",
|
|
943
952
|
justifyContent: "center",
|
|
944
953
|
overflow: "hidden"
|
|
945
|
-
},
|
|
954
|
+
}, bt = {
|
|
946
955
|
position: "relative",
|
|
947
956
|
display: "inline-block",
|
|
948
957
|
height: "5.5rem",
|
|
949
958
|
overflow: "hidden"
|
|
950
|
-
},
|
|
959
|
+
}, Et = {
|
|
951
960
|
display: "flex",
|
|
952
961
|
height: "100%",
|
|
953
962
|
willChange: "transform",
|
|
954
963
|
transition: "transform 0.3s ease"
|
|
955
|
-
},
|
|
964
|
+
}, Ct = {
|
|
956
965
|
display: "inline-flex",
|
|
957
966
|
alignItems: "center",
|
|
958
967
|
justifyContent: "center",
|
|
@@ -961,41 +970,41 @@ const vt = (t = {}) => {
|
|
|
961
970
|
fontWeight: "900",
|
|
962
971
|
letterSpacing: "0.02em",
|
|
963
972
|
color: "#FFFFFF"
|
|
964
|
-
},
|
|
965
|
-
function
|
|
973
|
+
}, At = 0.4, A = 0.5, Lt = 0.2;
|
|
974
|
+
function Tt(t, n) {
|
|
966
975
|
switch (t) {
|
|
967
976
|
case "circle":
|
|
968
977
|
return `circle(${n * 100}% at 50% 50%)`;
|
|
969
978
|
case "square":
|
|
970
979
|
return `inset(${(1 - n) * 50}% round ${10 * n}%)`;
|
|
971
980
|
case "triangle": {
|
|
972
|
-
const
|
|
973
|
-
return `polygon(50% ${50 -
|
|
981
|
+
const s = n * 100;
|
|
982
|
+
return `polygon(50% ${50 - s}%, ${50 - s}% ${50 + s}%, ${50 + s}% ${50 + s}%)`;
|
|
974
983
|
}
|
|
975
984
|
}
|
|
976
985
|
}
|
|
977
|
-
const
|
|
986
|
+
const kt = (t) => t.reduce((n, s) => n + s, 0), Wt = (t = {}) => {
|
|
978
987
|
const {
|
|
979
|
-
background: n =
|
|
980
|
-
texts:
|
|
981
|
-
shape: d =
|
|
982
|
-
inSpring: r =
|
|
983
|
-
outSpring:
|
|
988
|
+
background: n = mt,
|
|
989
|
+
texts: s = [],
|
|
990
|
+
shape: d = wt,
|
|
991
|
+
inSpring: r = $t,
|
|
992
|
+
outSpring: a = ft,
|
|
984
993
|
textStyle: l = {}
|
|
985
994
|
} = t;
|
|
986
995
|
return {
|
|
987
996
|
out: (i, c) => {
|
|
988
997
|
const o = i.style.opacity;
|
|
989
998
|
return {
|
|
990
|
-
spring:
|
|
999
|
+
spring: a,
|
|
991
1000
|
from: 1,
|
|
992
1001
|
to: 0,
|
|
993
1002
|
prepare: (e) => {
|
|
994
1003
|
x(e, c), e.style.opacity = "1";
|
|
995
1004
|
},
|
|
996
1005
|
tick: (e) => {
|
|
997
|
-
const
|
|
998
|
-
i.style.opacity = String(
|
|
1006
|
+
const p = Math.max(0, e - At);
|
|
1007
|
+
i.style.opacity = String(p);
|
|
999
1008
|
},
|
|
1000
1009
|
onEnd: () => {
|
|
1001
1010
|
i.style.opacity = o;
|
|
@@ -1004,16 +1013,16 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
|
|
|
1004
1013
|
},
|
|
1005
1014
|
in: (i) => {
|
|
1006
1015
|
let c = null, o = null, e = null;
|
|
1007
|
-
const
|
|
1008
|
-
|
|
1016
|
+
const p = document.body.style.overflow, y = document.getElementById(
|
|
1017
|
+
P
|
|
1009
1018
|
);
|
|
1010
|
-
let
|
|
1011
|
-
const
|
|
1012
|
-
c = document.createElement("div"), c.id =
|
|
1019
|
+
let h = [];
|
|
1020
|
+
const g = () => {
|
|
1021
|
+
c = document.createElement("div"), c.id = P, Object.assign(c.style, xt, { background: n }), document.body.appendChild(c), o = document.createElement("div"), Object.assign(o.style, bt), c.appendChild(o), e = document.createElement("div"), Object.assign(e.style, Et), o.appendChild(e), s.forEach((u) => {
|
|
1013
1022
|
const m = document.createElement("div");
|
|
1014
|
-
m.textContent =
|
|
1015
|
-
}),
|
|
1016
|
-
(
|
|
1023
|
+
m.textContent = u, Object.assign(m.style, Ct, l), e.appendChild(m);
|
|
1024
|
+
}), h = Array.from(e.children).map(
|
|
1025
|
+
(u) => u.getBoundingClientRect().width
|
|
1017
1026
|
);
|
|
1018
1027
|
};
|
|
1019
1028
|
return {
|
|
@@ -1021,44 +1030,44 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
|
|
|
1021
1030
|
from: 0,
|
|
1022
1031
|
to: 1,
|
|
1023
1032
|
prepare: () => {
|
|
1024
|
-
document.body.style.overflow = "hidden", i.style.opacity = "1",
|
|
1033
|
+
document.body.style.overflow = "hidden", i.style.opacity = "1", y == null || y.remove(), g(), c && o && (c.style.clipPath = "none", o.style.transform = "scale(1)");
|
|
1025
1034
|
},
|
|
1026
|
-
tick: (
|
|
1035
|
+
tick: (u) => {
|
|
1027
1036
|
if (!(!c || !o || !e)) {
|
|
1028
|
-
if (
|
|
1029
|
-
const m =
|
|
1030
|
-
Math.floor(m *
|
|
1031
|
-
|
|
1032
|
-
), w =
|
|
1037
|
+
if (u <= A && s.length > 0) {
|
|
1038
|
+
const m = u / A, f = Math.min(
|
|
1039
|
+
Math.floor(m * s.length),
|
|
1040
|
+
s.length - 1
|
|
1041
|
+
), w = h[f] ?? 0, $ = kt(h.slice(0, f));
|
|
1033
1042
|
o.style.width = `${w}px`, e.style.transform = `translateX(-${$}px)`;
|
|
1034
1043
|
}
|
|
1035
|
-
if (
|
|
1044
|
+
if (u > A) {
|
|
1036
1045
|
const f = 1 - Math.max(
|
|
1037
1046
|
0,
|
|
1038
|
-
Math.min(1, (
|
|
1047
|
+
Math.min(1, (u - A) / Lt)
|
|
1039
1048
|
);
|
|
1040
|
-
c.style.clipPath =
|
|
1049
|
+
c.style.clipPath = Tt(d, f), o.style.transform = `scale(${f})`;
|
|
1041
1050
|
}
|
|
1042
1051
|
}
|
|
1043
1052
|
},
|
|
1044
1053
|
onEnd: () => {
|
|
1045
|
-
c == null || c.remove(), c = o = e = null, document.body.style.overflow =
|
|
1054
|
+
c == null || c.remove(), c = o = e = null, document.body.style.overflow = p;
|
|
1046
1055
|
}
|
|
1047
1056
|
};
|
|
1048
1057
|
}
|
|
1049
1058
|
};
|
|
1050
1059
|
};
|
|
1051
1060
|
export {
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1061
|
+
_t as blind,
|
|
1062
|
+
Wt as curtainReveal,
|
|
1063
|
+
It as drill,
|
|
1064
|
+
Ot as fade,
|
|
1065
|
+
Dt as film,
|
|
1066
|
+
Pt as hero,
|
|
1067
|
+
vt as instagram,
|
|
1068
|
+
Mt as jaemin,
|
|
1069
|
+
Ft as pinterest,
|
|
1070
|
+
Yt as scroll,
|
|
1071
|
+
Ut as slide,
|
|
1072
|
+
Vt as strip
|
|
1064
1073
|
};
|