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