@ssgoi/core 4.3.2 → 4.4.0
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 +1 -1
- package/dist/index.js +347 -333
- package/dist/ssgoi-transition/create-context-manager.d.ts +5 -0
- package/dist/ssgoi-transition/create-context-manager.d.ts.map +1 -1
- package/dist/ssgoi-transition/find-matching-transition.d.ts.map +1 -1
- package/dist/types.d.ts +13 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/view-transitions/drill.d.ts.map +1 -1
- package/dist/view-transitions/index.cjs +9 -9
- package/dist/view-transitions/index.js +217 -217
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const g = (t,
|
|
1
|
+
const g = (t, i) => {
|
|
2
2
|
var r;
|
|
3
|
-
t.style.position = "absolute", t.style.width = "100%", t.style.top = `${-1 * (((r =
|
|
4
|
-
}, _ = (t) => new Promise((
|
|
5
|
-
function x(t,
|
|
3
|
+
t.style.position = "absolute", t.style.width = "100%", t.style.top = `${-1 * (((r = i == null ? void 0 : i.scrollOffset) == null ? void 0 : r.y) ?? 0)}px`, t.style.left = "0";
|
|
4
|
+
}, _ = (t) => new Promise((i) => setTimeout(i, t));
|
|
5
|
+
function x(t, i) {
|
|
6
6
|
function r(s) {
|
|
7
7
|
let e = 0, a = 0;
|
|
8
8
|
const l = s.offsetWidth, y = s.offsetHeight;
|
|
@@ -11,19 +11,19 @@ function x(t, n) {
|
|
|
11
11
|
e += o.offsetTop, a += o.offsetLeft, o = o.offsetParent;
|
|
12
12
|
return e -= window.scrollY, a -= window.scrollX, { top: e, left: a, width: l, height: y };
|
|
13
13
|
}
|
|
14
|
-
const c = r(t),
|
|
14
|
+
const c = r(t), n = r(i);
|
|
15
15
|
return new DOMRect(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
n.left - c.left,
|
|
17
|
+
n.top - c.top,
|
|
18
|
+
n.width,
|
|
19
|
+
n.height
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
22
|
function E() {
|
|
23
|
-
let t,
|
|
24
|
-
return { promise: new Promise((c,
|
|
25
|
-
t = c,
|
|
26
|
-
}), resolve: t, reject:
|
|
23
|
+
let t, i;
|
|
24
|
+
return { promise: new Promise((c, n) => {
|
|
25
|
+
t = c, i = n;
|
|
26
|
+
}), resolve: t, reject: i };
|
|
27
27
|
}
|
|
28
28
|
const H = {
|
|
29
29
|
spring: { stiffness: 200, damping: 22 }
|
|
@@ -31,10 +31,10 @@ const H = {
|
|
|
31
31
|
spring: { stiffness: 200, damping: 22 }
|
|
32
32
|
}, z = 300, W = 10, M = "horizontal", B = "#000000", Mt = (t = {}) => {
|
|
33
33
|
const {
|
|
34
|
-
transitionDelay:
|
|
34
|
+
transitionDelay: i = z,
|
|
35
35
|
blindCount: r = W,
|
|
36
36
|
direction: c = M,
|
|
37
|
-
blindColor:
|
|
37
|
+
blindColor: n = B
|
|
38
38
|
} = t, s = t.physics ?? X, e = t.physics ?? H;
|
|
39
39
|
let a, l = null;
|
|
40
40
|
const y = (o, h, d = "left") => {
|
|
@@ -61,7 +61,7 @@ const H = {
|
|
|
61
61
|
left: 0;
|
|
62
62
|
width: 100%;
|
|
63
63
|
height: ${C};
|
|
64
|
-
background: ${
|
|
64
|
+
background: ${n};
|
|
65
65
|
transform: scaleX(${h === "hidden" ? 0 : 1});
|
|
66
66
|
transform-origin: ${d} center;
|
|
67
67
|
will-change: transform;
|
|
@@ -74,7 +74,7 @@ const H = {
|
|
|
74
74
|
left: ${b * $}%;
|
|
75
75
|
width: ${C};
|
|
76
76
|
height: 100%;
|
|
77
|
-
background: ${
|
|
77
|
+
background: ${n};
|
|
78
78
|
transform: scaleY(${h === "hidden" ? 0 : 1});
|
|
79
79
|
transform-origin: ${d === "left" ? "top" : "bottom"} center;
|
|
80
80
|
will-change: transform;
|
|
@@ -146,7 +146,7 @@ const H = {
|
|
|
146
146
|
onStart: () => {
|
|
147
147
|
},
|
|
148
148
|
wait: async () => {
|
|
149
|
-
a && await a, await _(
|
|
149
|
+
a && await a, await _(i);
|
|
150
150
|
},
|
|
151
151
|
onEnd: () => {
|
|
152
152
|
h && h.container && h.container.remove();
|
|
@@ -188,24 +188,24 @@ const H = {
|
|
|
188
188
|
letterSpacing: "0.02em",
|
|
189
189
|
color: "#FFFFFF"
|
|
190
190
|
}, R = 0.4, S = 0.5, tt = 0.2;
|
|
191
|
-
function st(t,
|
|
191
|
+
function st(t, i) {
|
|
192
192
|
switch (t) {
|
|
193
193
|
case "circle":
|
|
194
|
-
return `circle(${
|
|
194
|
+
return `circle(${i * 100}% at 50% 50%)`;
|
|
195
195
|
case "square":
|
|
196
|
-
return `inset(${(1 -
|
|
196
|
+
return `inset(${(1 - i) * 50}% round ${10 * i}%)`;
|
|
197
197
|
case "triangle": {
|
|
198
|
-
const r =
|
|
198
|
+
const r = i * 100;
|
|
199
199
|
return `polygon(50% ${50 - r}%, ${50 - r}% ${50 + r}%, ${50 + r}% ${50 + r}%)`;
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
}
|
|
203
|
-
const it = (t) => t.reduce((
|
|
203
|
+
const it = (t) => t.reduce((i, r) => i + r, 0), Bt = (t = {}) => {
|
|
204
204
|
const {
|
|
205
|
-
background:
|
|
205
|
+
background: i = N,
|
|
206
206
|
texts: r = [],
|
|
207
207
|
shape: c = G,
|
|
208
|
-
textStyle:
|
|
208
|
+
textStyle: n = {}
|
|
209
209
|
} = t, s = t.physics ?? j, e = t.physics ?? q;
|
|
210
210
|
return {
|
|
211
211
|
out: (a, l) => {
|
|
@@ -233,9 +233,9 @@ const it = (t) => t.reduce((n, r) => n + r, 0), Bt = (t = {}) => {
|
|
|
233
233
|
);
|
|
234
234
|
let u = [];
|
|
235
235
|
const f = () => {
|
|
236
|
-
l = document.createElement("div"), l.id = k, Object.assign(l.style, Z, { background:
|
|
236
|
+
l = document.createElement("div"), l.id = k, Object.assign(l.style, Z, { background: i }), document.body.appendChild(l), y = document.createElement("div"), Object.assign(y.style, J), l.appendChild(y), o = document.createElement("div"), Object.assign(o.style, K), y.appendChild(o), r.forEach((p) => {
|
|
237
237
|
const $ = document.createElement("div");
|
|
238
|
-
$.textContent = p, Object.assign($.style, Q,
|
|
238
|
+
$.textContent = p, Object.assign($.style, Q, n), o.appendChild($);
|
|
239
239
|
}), u = Array.from(o.children).map(
|
|
240
240
|
(p) => p.getBoundingClientRect().width
|
|
241
241
|
);
|
|
@@ -287,18 +287,18 @@ const it = (t) => t.reduce((n, r) => n + r, 0), Bt = (t = {}) => {
|
|
|
287
287
|
}
|
|
288
288
|
}, at = 0.05;
|
|
289
289
|
function A(t) {
|
|
290
|
-
const
|
|
290
|
+
const i = x(document.body, t.positionedParent), r = t.scroll.y, c = window.innerHeight - i.top;
|
|
291
291
|
return {
|
|
292
292
|
top: r,
|
|
293
293
|
left: 0,
|
|
294
|
-
width:
|
|
294
|
+
width: i.width,
|
|
295
295
|
height: c
|
|
296
296
|
};
|
|
297
297
|
}
|
|
298
298
|
const qt = (t = {}) => {
|
|
299
|
-
const { direction:
|
|
300
|
-
let { promise:
|
|
301
|
-
return
|
|
299
|
+
const { direction: i = "enter" } = t, r = t.physics ?? (i === "enter" ? nt : et), c = t.scaleOffset ?? at;
|
|
300
|
+
let { promise: n, resolve: s } = E();
|
|
301
|
+
return i === "enter" ? {
|
|
302
302
|
// Entering page: scales up from small (0.8 → 1) with fade in
|
|
303
303
|
in: (e, a) => {
|
|
304
304
|
const l = A(a), y = l.left + l.width / 2, o = l.top + l.height / 2;
|
|
@@ -308,10 +308,10 @@ const qt = (t = {}) => {
|
|
|
308
308
|
e.style.opacity = "0", e.style.willChange = "transform, opacity", e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint", e.style.transformOrigin = `${y}px ${o}px`;
|
|
309
309
|
},
|
|
310
310
|
wait: async () => {
|
|
311
|
-
if (
|
|
312
|
-
await
|
|
311
|
+
if (n) {
|
|
312
|
+
await n;
|
|
313
313
|
const h = E();
|
|
314
|
-
|
|
314
|
+
n = h.promise, s = h.resolve;
|
|
315
315
|
}
|
|
316
316
|
},
|
|
317
317
|
css: (h) => ({
|
|
@@ -350,10 +350,10 @@ const qt = (t = {}) => {
|
|
|
350
350
|
e.style.opacity = "0", e.style.willChange = "transform, opacity", e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint", e.style.transformOrigin = `${y}px ${o}px`;
|
|
351
351
|
},
|
|
352
352
|
wait: async () => {
|
|
353
|
-
if (
|
|
354
|
-
await
|
|
353
|
+
if (n) {
|
|
354
|
+
await n;
|
|
355
355
|
const h = E();
|
|
356
|
-
|
|
356
|
+
n = h.promise, s = h.resolve;
|
|
357
357
|
}
|
|
358
358
|
},
|
|
359
359
|
css: (h) => ({
|
|
@@ -394,61 +394,61 @@ const qt = (t = {}) => {
|
|
|
394
394
|
damping: 22
|
|
395
395
|
}
|
|
396
396
|
}, jt = (t = {}) => {
|
|
397
|
-
const { opacity:
|
|
397
|
+
const { opacity: i = !1, direction: r = "enter" } = t, c = t.physics ?? (r === "enter" ? rt : ot);
|
|
398
398
|
return r === "enter" ? {
|
|
399
|
-
in: (
|
|
399
|
+
in: (n) => ({
|
|
400
400
|
physics: c,
|
|
401
401
|
prepare: () => {
|
|
402
|
-
|
|
402
|
+
n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
403
403
|
},
|
|
404
404
|
css: (s) => {
|
|
405
405
|
const e = {
|
|
406
406
|
transform: `translate3d(${(1 - s) * 100}%, 0, 0)`
|
|
407
407
|
};
|
|
408
|
-
return
|
|
408
|
+
return i && (e.opacity = s), e;
|
|
409
409
|
},
|
|
410
410
|
onEnd: () => {
|
|
411
|
-
|
|
411
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
412
412
|
}
|
|
413
413
|
}),
|
|
414
|
-
out: (
|
|
414
|
+
out: (n, s) => ({
|
|
415
415
|
physics: c,
|
|
416
416
|
prepare: () => {
|
|
417
|
-
g(
|
|
417
|
+
g(n, s), n.style.zIndex = "-1", n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
418
418
|
},
|
|
419
419
|
css: (e) => {
|
|
420
420
|
const a = {
|
|
421
421
|
transform: `translate3d(${-(1 - e) * 20}%, 0, 0)`
|
|
422
422
|
};
|
|
423
|
-
return
|
|
423
|
+
return i && (a.opacity = e), a;
|
|
424
424
|
}
|
|
425
425
|
})
|
|
426
426
|
} : {
|
|
427
|
-
in: (
|
|
427
|
+
in: (n) => ({
|
|
428
428
|
physics: c,
|
|
429
429
|
prepare: () => {
|
|
430
|
-
|
|
430
|
+
n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
431
431
|
},
|
|
432
432
|
css: (s) => {
|
|
433
433
|
const e = {
|
|
434
434
|
transform: `translate3d(${-(1 - s) * 20}%, 0, 0)`
|
|
435
435
|
};
|
|
436
|
-
return
|
|
436
|
+
return i && (e.opacity = s), e;
|
|
437
437
|
},
|
|
438
438
|
onEnd: () => {
|
|
439
|
-
|
|
439
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
440
440
|
}
|
|
441
441
|
}),
|
|
442
|
-
out: (
|
|
442
|
+
out: (n, s) => ({
|
|
443
443
|
physics: c,
|
|
444
444
|
prepare: () => {
|
|
445
|
-
g(
|
|
445
|
+
g(n, s), n.style.zIndex = "100", n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
446
446
|
},
|
|
447
447
|
css: (e) => {
|
|
448
448
|
const a = {
|
|
449
449
|
transform: `translate3d(${(1 - e) * 100}%, 0, 0)`
|
|
450
450
|
};
|
|
451
|
-
return
|
|
451
|
+
return i && (a.opacity = e), a;
|
|
452
452
|
}
|
|
453
453
|
})
|
|
454
454
|
};
|
|
@@ -457,8 +457,8 @@ const qt = (t = {}) => {
|
|
|
457
457
|
}, ct = {
|
|
458
458
|
spring: { stiffness: 170, damping: 20, doubleSpring: !0 }
|
|
459
459
|
}, yt = 0, Nt = (t = {}) => {
|
|
460
|
-
const { transitionDelay:
|
|
461
|
-
let { promise:
|
|
460
|
+
const { transitionDelay: i = yt } = t, r = t.physics ?? ct, c = t.physics ?? lt;
|
|
461
|
+
let { promise: n, resolve: s } = E();
|
|
462
462
|
return {
|
|
463
463
|
in: (e) => ({
|
|
464
464
|
physics: r,
|
|
@@ -466,10 +466,10 @@ const qt = (t = {}) => {
|
|
|
466
466
|
e.style.opacity = "0", e.style.willChange = "opacity";
|
|
467
467
|
},
|
|
468
468
|
wait: async () => {
|
|
469
|
-
if (
|
|
470
|
-
await
|
|
469
|
+
if (n) {
|
|
470
|
+
await n;
|
|
471
471
|
const a = E();
|
|
472
|
-
|
|
472
|
+
n = a.promise, s = a.resolve, await _(i);
|
|
473
473
|
}
|
|
474
474
|
},
|
|
475
475
|
css: (a) => ({
|
|
@@ -507,8 +507,8 @@ const qt = (t = {}) => {
|
|
|
507
507
|
scaleUp: 0.8
|
|
508
508
|
// Start when translate is 70% complete
|
|
509
509
|
}, pt = 0.8, dt = "white", Gt = (t) => {
|
|
510
|
-
var
|
|
511
|
-
const
|
|
510
|
+
var n;
|
|
511
|
+
const i = ht, r = pt, c = ((n = t == null ? void 0 : t.border) == null ? void 0 : n.color) ?? dt;
|
|
512
512
|
return {
|
|
513
513
|
out: async (s, e) => {
|
|
514
514
|
const a = v(e), l = x(document.body, e.positionedParent), y = ft(c, {
|
|
@@ -526,7 +526,7 @@ const qt = (t = {}) => {
|
|
|
526
526
|
items: [
|
|
527
527
|
// Spring 1: Scale Down (1 → scale)
|
|
528
528
|
{
|
|
529
|
-
physics: (t == null ? void 0 : t.physics) ?? { spring:
|
|
529
|
+
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleDown },
|
|
530
530
|
offset: O.scaleDown,
|
|
531
531
|
tick: (d) => {
|
|
532
532
|
const u = 1 - d;
|
|
@@ -535,7 +535,7 @@ const qt = (t = {}) => {
|
|
|
535
535
|
},
|
|
536
536
|
// Spring 2: Translate (vertical movement)
|
|
537
537
|
{
|
|
538
|
-
physics: (t == null ? void 0 : t.physics) ?? { spring:
|
|
538
|
+
physics: (t == null ? void 0 : t.physics) ?? { spring: i.translate },
|
|
539
539
|
offset: O.translate,
|
|
540
540
|
tick: (d) => {
|
|
541
541
|
const u = 1 - d;
|
|
@@ -544,7 +544,7 @@ const qt = (t = {}) => {
|
|
|
544
544
|
},
|
|
545
545
|
// Spring 3: Scale Up (scale → 1)
|
|
546
546
|
{
|
|
547
|
-
physics: (t == null ? void 0 : t.physics) ?? { spring:
|
|
547
|
+
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleUp },
|
|
548
548
|
offset: O.scaleUp,
|
|
549
549
|
tick: (d) => {
|
|
550
550
|
const u = 1 - d;
|
|
@@ -577,7 +577,7 @@ const qt = (t = {}) => {
|
|
|
577
577
|
items: [
|
|
578
578
|
// Spring 1: Scale Down (1 → scale) - element starts scaled, shrinks further
|
|
579
579
|
{
|
|
580
|
-
physics: (t == null ? void 0 : t.physics) ?? { spring:
|
|
580
|
+
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleDown },
|
|
581
581
|
offset: O.scaleDown,
|
|
582
582
|
tick: (o) => {
|
|
583
583
|
l.scale = 1 - (1 - r) * o, y();
|
|
@@ -585,7 +585,7 @@ const qt = (t = {}) => {
|
|
|
585
585
|
},
|
|
586
586
|
// Spring 2: Translate (vertical movement from bottom to top)
|
|
587
587
|
{
|
|
588
|
-
physics: (t == null ? void 0 : t.physics) ?? { spring:
|
|
588
|
+
physics: (t == null ? void 0 : t.physics) ?? { spring: i.translate },
|
|
589
589
|
offset: O.translate,
|
|
590
590
|
tick: (o) => {
|
|
591
591
|
l.translateY = -a.top + a.height * (1 - o), y();
|
|
@@ -593,7 +593,7 @@ const qt = (t = {}) => {
|
|
|
593
593
|
},
|
|
594
594
|
// Spring 3: Scale Up (scale → 1) - element returns to full size
|
|
595
595
|
{
|
|
596
|
-
physics: (t == null ? void 0 : t.physics) ?? { spring:
|
|
596
|
+
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleUp },
|
|
597
597
|
offset: O.scaleUp,
|
|
598
598
|
tick: (o) => {
|
|
599
599
|
l.scale = r + (1 - r) * o, y();
|
|
@@ -611,81 +611,81 @@ const qt = (t = {}) => {
|
|
|
611
611
|
}
|
|
612
612
|
};
|
|
613
613
|
};
|
|
614
|
-
function ut(t,
|
|
615
|
-
const c =
|
|
616
|
-
t.topLeft.style.transform = `translate(${c}px, ${
|
|
614
|
+
function ut(t, i, r) {
|
|
615
|
+
const c = i * 0.7, n = r * 0.7;
|
|
616
|
+
t.topLeft.style.transform = `translate(${c}px, ${n}px)`, t.topRight.style.transform = `translate(${-c}px, ${n}px)`, t.bottomLeft.style.transform = `translate(${c}px, ${-n}px)`, t.bottomRight.style.transform = `translate(${-c}px, ${-n}px)`;
|
|
617
617
|
}
|
|
618
|
-
function ft(t = "white",
|
|
619
|
-
const
|
|
620
|
-
|
|
618
|
+
function ft(t = "white", i) {
|
|
619
|
+
const n = document.createElement("div");
|
|
620
|
+
n.style.position = "fixed", n.style.pointerEvents = "none", n.style.zIndex = "9999", n.style.top = `${i.top - 1}px`, n.style.left = `${i.left - 1}px`, n.style.width = "15px", n.style.height = "15px";
|
|
621
621
|
const s = document.createElement("div");
|
|
622
622
|
s.style.position = "absolute", s.style.width = "15px", s.style.height = "1px", s.style.backgroundColor = t, s.style.top = "0", s.style.left = "0";
|
|
623
623
|
const e = document.createElement("div");
|
|
624
|
-
e.style.position = "absolute", e.style.width = "1px", e.style.height = "15px", e.style.backgroundColor = t, e.style.top = "0", e.style.left = "0",
|
|
624
|
+
e.style.position = "absolute", e.style.width = "1px", e.style.height = "15px", e.style.backgroundColor = t, e.style.top = "0", e.style.left = "0", n.appendChild(s), n.appendChild(e);
|
|
625
625
|
const a = document.createElement("div");
|
|
626
|
-
a.style.position = "fixed", a.style.pointerEvents = "none", a.style.zIndex = "9999", a.style.top = `${
|
|
626
|
+
a.style.position = "fixed", a.style.pointerEvents = "none", a.style.zIndex = "9999", a.style.top = `${i.top - 1}px`, a.style.left = `${i.left + i.width - 15 + 1}px`, a.style.width = "15px", a.style.height = "15px";
|
|
627
627
|
const l = document.createElement("div");
|
|
628
628
|
l.style.position = "absolute", l.style.width = "15px", l.style.height = "1px", l.style.backgroundColor = t, l.style.top = "0", l.style.right = "0";
|
|
629
629
|
const y = document.createElement("div");
|
|
630
630
|
y.style.position = "absolute", y.style.width = "1px", y.style.height = "15px", y.style.backgroundColor = t, y.style.top = "0", y.style.right = "0", a.appendChild(l), a.appendChild(y);
|
|
631
631
|
const o = document.createElement("div");
|
|
632
|
-
o.style.position = "fixed", o.style.pointerEvents = "none", o.style.zIndex = "9999", o.style.top = `${
|
|
632
|
+
o.style.position = "fixed", o.style.pointerEvents = "none", o.style.zIndex = "9999", o.style.top = `${i.top + i.height - 15 + 1}px`, o.style.left = `${i.left - 1}px`, o.style.width = "15px", o.style.height = "15px";
|
|
633
633
|
const h = document.createElement("div");
|
|
634
634
|
h.style.position = "absolute", h.style.width = "15px", h.style.height = "1px", h.style.backgroundColor = t, h.style.bottom = "0", h.style.left = "0";
|
|
635
635
|
const d = document.createElement("div");
|
|
636
636
|
d.style.position = "absolute", d.style.width = "1px", d.style.height = "15px", d.style.backgroundColor = t, d.style.bottom = "0", d.style.left = "0", o.appendChild(h), o.appendChild(d);
|
|
637
637
|
const u = document.createElement("div");
|
|
638
|
-
u.style.position = "fixed", u.style.pointerEvents = "none", u.style.zIndex = "9999", u.style.top = `${
|
|
638
|
+
u.style.position = "fixed", u.style.pointerEvents = "none", u.style.zIndex = "9999", u.style.top = `${i.top + i.height - 15 + 1}px`, u.style.left = `${i.left + i.width - 15 + 1}px`, u.style.width = "15px", u.style.height = "15px";
|
|
639
639
|
const f = document.createElement("div");
|
|
640
640
|
f.style.position = "absolute", f.style.width = "15px", f.style.height = "1px", f.style.backgroundColor = t, f.style.bottom = "0", f.style.right = "0";
|
|
641
641
|
const p = document.createElement("div");
|
|
642
642
|
return p.style.position = "absolute", p.style.width = "1px", p.style.height = "15px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.right = "0", u.appendChild(f), u.appendChild(p), {
|
|
643
|
-
topLeft:
|
|
643
|
+
topLeft: n,
|
|
644
644
|
topRight: a,
|
|
645
645
|
bottomLeft: o,
|
|
646
646
|
bottomRight: u,
|
|
647
647
|
*[Symbol.iterator]() {
|
|
648
|
-
yield
|
|
648
|
+
yield n, yield a, yield o, yield u;
|
|
649
649
|
}
|
|
650
650
|
};
|
|
651
651
|
}
|
|
652
652
|
function v(t) {
|
|
653
|
-
const
|
|
653
|
+
const i = x(document.body, t.positionedParent);
|
|
654
654
|
return {
|
|
655
655
|
top: t.scroll.y,
|
|
656
656
|
left: 0,
|
|
657
|
-
width:
|
|
658
|
-
height: window.innerHeight -
|
|
657
|
+
width: i.width,
|
|
658
|
+
height: window.innerHeight - i.top
|
|
659
659
|
};
|
|
660
660
|
}
|
|
661
|
-
function m(t,
|
|
662
|
-
const r =
|
|
661
|
+
function m(t, i) {
|
|
662
|
+
const r = i.left + i.width / 2, c = i.top + i.height / 2;
|
|
663
663
|
t.style.transformOrigin = `${r}px ${c}px`;
|
|
664
664
|
}
|
|
665
|
-
function I(t,
|
|
665
|
+
function I(t, i) {
|
|
666
666
|
t.style.clipPath = `polygon(
|
|
667
|
-
${
|
|
668
|
-
${
|
|
669
|
-
${
|
|
670
|
-
${
|
|
667
|
+
${i.left}px ${i.top}px,
|
|
668
|
+
${i.left + i.width}px ${i.top}px,
|
|
669
|
+
${i.left + i.width}px ${i.top + i.height}px,
|
|
670
|
+
${i.left}px ${i.top + i.height}px
|
|
671
671
|
)`;
|
|
672
672
|
}
|
|
673
|
-
function gt(t,
|
|
674
|
-
t.style.transform = `translateY(${-
|
|
673
|
+
function gt(t, i) {
|
|
674
|
+
t.style.transform = `translateY(${-i.top}px)`;
|
|
675
675
|
}
|
|
676
676
|
const wt = {
|
|
677
677
|
spring: { stiffness: 300, damping: 30 }
|
|
678
678
|
};
|
|
679
|
-
function $t(t,
|
|
680
|
-
return t.querySelector(`[data-hero-key="${
|
|
679
|
+
function $t(t, i) {
|
|
680
|
+
return t.querySelector(`[data-hero-key="${i}"]`);
|
|
681
681
|
}
|
|
682
682
|
const Zt = (t = {}) => {
|
|
683
|
-
const
|
|
684
|
-
let c = null,
|
|
683
|
+
const i = t.physics ?? wt, r = t.maxDistance ?? 700;
|
|
684
|
+
let c = null, n = E();
|
|
685
685
|
return {
|
|
686
686
|
in: async (s, e) => {
|
|
687
687
|
const a = s, l = Array.from(a.querySelectorAll("[data-hero-key]"));
|
|
688
|
-
await
|
|
688
|
+
await n.promise;
|
|
689
689
|
const y = l.map((o) => {
|
|
690
690
|
const h = o.getAttribute("data-hero-key");
|
|
691
691
|
if (!h) return null;
|
|
@@ -707,14 +707,14 @@ const Zt = (t = {}) => {
|
|
|
707
707
|
}).filter(
|
|
708
708
|
(o) => o !== null && Math.abs(o.dy) <= r
|
|
709
709
|
);
|
|
710
|
-
return c = null,
|
|
711
|
-
physics:
|
|
710
|
+
return c = null, n = E(), y.length === 0 ? {
|
|
711
|
+
physics: i,
|
|
712
712
|
tick: () => {
|
|
713
713
|
}
|
|
714
714
|
// No matching hero elements
|
|
715
715
|
} : {
|
|
716
716
|
items: y.map(({ toEl: o, dx: h, dy: d, dw: u, dh: f }) => ({
|
|
717
|
-
physics:
|
|
717
|
+
physics: i,
|
|
718
718
|
tick: (p) => {
|
|
719
719
|
o.style.transform = `translate(${(1 - p) * h}px, ${(1 - p) * d}px) scale(${p + (1 - p) * u}, ${p + (1 - p) * f})`;
|
|
720
720
|
}
|
|
@@ -742,11 +742,11 @@ const Zt = (t = {}) => {
|
|
|
742
742
|
};
|
|
743
743
|
},
|
|
744
744
|
out: async (s) => ({
|
|
745
|
-
physics:
|
|
745
|
+
physics: i,
|
|
746
746
|
tick: () => {
|
|
747
747
|
},
|
|
748
748
|
prepare: () => {
|
|
749
|
-
c = s,
|
|
749
|
+
c = s, n.resolve(), g(s), s.style.opacity = "0";
|
|
750
750
|
}
|
|
751
751
|
})
|
|
752
752
|
};
|
|
@@ -755,75 +755,75 @@ const Zt = (t = {}) => {
|
|
|
755
755
|
};
|
|
756
756
|
function xt({
|
|
757
757
|
detailRect: t,
|
|
758
|
-
galleryRect:
|
|
758
|
+
galleryRect: i,
|
|
759
759
|
pageRect: r,
|
|
760
760
|
scrollOffset: c
|
|
761
761
|
}) {
|
|
762
|
-
const
|
|
762
|
+
const n = i.left - t.left + (i.width - t.width) / 2 - c.x, s = i.top - t.top + (i.height - t.height) / 2 - c.y, e = i.width / t.width, a = i.height / t.height, l = Math.max(e, a), y = t.top / r.height * 100, o = (r.width - (t.left + t.width)) / r.width * 100, h = (r.height - (t.top + t.height)) / r.height * 100, d = t.left / r.width * 100;
|
|
763
763
|
return {
|
|
764
764
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
765
765
|
animate: (f) => {
|
|
766
766
|
const p = 1 - f;
|
|
767
767
|
return {
|
|
768
768
|
clipPath: `inset(${y * p}% ${o * p}% ${h * p}% ${d * p}%)`,
|
|
769
|
-
transform: `translate(${
|
|
769
|
+
transform: `translate(${n * p}px, ${s * p}px) scale(${1 + (l - 1) * p})`
|
|
770
770
|
};
|
|
771
771
|
}
|
|
772
772
|
};
|
|
773
773
|
}
|
|
774
774
|
function Et({
|
|
775
775
|
detailRect: t,
|
|
776
|
-
galleryRect:
|
|
776
|
+
galleryRect: i,
|
|
777
777
|
pageRect: r,
|
|
778
778
|
scrollOffset: c
|
|
779
779
|
}) {
|
|
780
|
-
const
|
|
780
|
+
const n = i.left - t.left + (i.width - t.width) / 2 + c.x, s = i.top - t.top + (i.height - t.height) / 2 + c.y, e = i.width / t.width, a = i.height / t.height, l = Math.min(e, a), y = t.top / r.height * 100, o = (r.width - (t.left + t.width)) / r.width * 100, h = (r.height - (t.top + t.height)) / r.height * 100, d = t.left / r.width * 100;
|
|
781
781
|
return {
|
|
782
782
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
783
783
|
animate: (f) => {
|
|
784
784
|
const p = 1 - f;
|
|
785
785
|
return {
|
|
786
786
|
clipPath: `inset(${y * p}% ${o * p}% ${h * p}% ${d * p}%)`,
|
|
787
|
-
transform: `translate(${
|
|
787
|
+
transform: `translate(${n * p - c.x}px, ${s * p - c.y}px) scale(${1 + (l - 1) * p})`
|
|
788
788
|
};
|
|
789
789
|
}
|
|
790
790
|
};
|
|
791
791
|
}
|
|
792
|
-
function Ct(t,
|
|
792
|
+
function Ct(t, i, r) {
|
|
793
793
|
const c = t.querySelector(
|
|
794
794
|
"[data-instagram-detail-key]"
|
|
795
|
-
),
|
|
795
|
+
), n = i.querySelector(
|
|
796
796
|
"[data-instagram-detail-key]"
|
|
797
797
|
);
|
|
798
|
-
if (t.querySelectorAll("[data-instagram-detail-key]").length > 1 ||
|
|
798
|
+
if (t.querySelectorAll("[data-instagram-detail-key]").length > 1 || i.querySelectorAll("[data-instagram-detail-key]").length > 1)
|
|
799
799
|
return null;
|
|
800
800
|
let s = null, e = null, a = !1;
|
|
801
|
-
if (!c &&
|
|
802
|
-
e =
|
|
801
|
+
if (!c && n) {
|
|
802
|
+
e = n;
|
|
803
803
|
const o = e.getAttribute("data-instagram-detail-key");
|
|
804
804
|
if (!o) return null;
|
|
805
805
|
s = t.querySelector(
|
|
806
806
|
`[data-instagram-gallery-key="${o}"]`
|
|
807
807
|
), s && (a = !0);
|
|
808
|
-
} else if (c && !
|
|
808
|
+
} else if (c && !n) {
|
|
809
809
|
e = c;
|
|
810
810
|
const o = e.getAttribute("data-instagram-detail-key");
|
|
811
811
|
if (!o) return null;
|
|
812
|
-
s =
|
|
812
|
+
s = i.querySelector(
|
|
813
813
|
`[data-instagram-gallery-key="${o}"]`
|
|
814
814
|
), s && (a = !1);
|
|
815
815
|
}
|
|
816
816
|
if (!s || !e)
|
|
817
817
|
return null;
|
|
818
|
-
const l = x(a ? t :
|
|
818
|
+
const l = x(a ? t : i, s), y = x(a ? i : t, e);
|
|
819
819
|
if (a) {
|
|
820
820
|
const o = xt({
|
|
821
821
|
detailRect: y,
|
|
822
822
|
galleryRect: l,
|
|
823
|
-
pageRect:
|
|
823
|
+
pageRect: i.getBoundingClientRect(),
|
|
824
824
|
scrollOffset: r
|
|
825
825
|
});
|
|
826
|
-
return
|
|
826
|
+
return i.style.transformOrigin = o.transformOrigin, {
|
|
827
827
|
isEnterMode: !0,
|
|
828
828
|
inAnimation: o.animate
|
|
829
829
|
// No outAnimation - gallery stays visible
|
|
@@ -843,23 +843,23 @@ function Ct(t, n, r) {
|
|
|
843
843
|
}
|
|
844
844
|
}
|
|
845
845
|
const Jt = (t = {}) => {
|
|
846
|
-
const
|
|
847
|
-
let c = null,
|
|
846
|
+
const i = t.physics ?? bt, r = t.timeout ?? 300;
|
|
847
|
+
let c = null, n = null, s = null, e = null;
|
|
848
848
|
return {
|
|
849
849
|
in: async (a, { scrollOffset: l }) => {
|
|
850
850
|
const y = a;
|
|
851
851
|
return !await new Promise((h) => {
|
|
852
|
-
c ? h(!0) : (
|
|
853
|
-
|
|
852
|
+
c ? h(!0) : (n = h, setTimeout(() => {
|
|
853
|
+
n = null, h(!1);
|
|
854
854
|
}, r));
|
|
855
855
|
}) || !c ? (e == null || e(), e = null, c = null, {
|
|
856
|
-
physics:
|
|
856
|
+
physics: i,
|
|
857
857
|
css: () => ({})
|
|
858
858
|
}) : (s = Ct(c, y, l), e == null || e(), e = null, s ? (c = null, {
|
|
859
|
-
physics:
|
|
859
|
+
physics: i,
|
|
860
860
|
css: (h) => s != null && s.inAnimation ? s.inAnimation(h) : {}
|
|
861
861
|
}) : (c = null, {
|
|
862
|
-
physics:
|
|
862
|
+
physics: i,
|
|
863
863
|
css: () => ({})
|
|
864
864
|
}));
|
|
865
865
|
},
|
|
@@ -868,12 +868,12 @@ const Jt = (t = {}) => {
|
|
|
868
868
|
e = o;
|
|
869
869
|
});
|
|
870
870
|
return {
|
|
871
|
-
physics:
|
|
871
|
+
physics: i,
|
|
872
872
|
prepare: () => {
|
|
873
873
|
s != null && s.isEnterMode ? g(a) : (g(a, l), a.style.zIndex = "-1");
|
|
874
874
|
},
|
|
875
875
|
wait: async () => {
|
|
876
|
-
c = a,
|
|
876
|
+
c = a, n && (n(!0), n = null), await y;
|
|
877
877
|
},
|
|
878
878
|
css: (o) => s != null && s.outAnimation ? s.outAnimation(o) : {}
|
|
879
879
|
};
|
|
@@ -883,16 +883,16 @@ const Jt = (t = {}) => {
|
|
|
883
883
|
spring: { stiffness: 50, damping: 30 }
|
|
884
884
|
};
|
|
885
885
|
function St(t) {
|
|
886
|
-
const
|
|
886
|
+
const i = x(document.body, t.positionedParent);
|
|
887
887
|
return {
|
|
888
888
|
top: t.scroll.y,
|
|
889
889
|
left: 0,
|
|
890
|
-
width:
|
|
891
|
-
height: window.innerHeight -
|
|
890
|
+
width: i.width,
|
|
891
|
+
height: window.innerHeight - i.top
|
|
892
892
|
};
|
|
893
893
|
}
|
|
894
894
|
const Kt = (t = {}) => {
|
|
895
|
-
const
|
|
895
|
+
const i = t.physics ?? Ot, r = t.initialRotation ?? 45, c = t.initialScale ?? 0.01, n = t.rotationTriggerPoint ?? 0.8;
|
|
896
896
|
return {
|
|
897
897
|
out: async (s, e) => {
|
|
898
898
|
const a = s.style.opacity;
|
|
@@ -919,7 +919,7 @@ const Kt = (t = {}) => {
|
|
|
919
919
|
in: async (s, e) => {
|
|
920
920
|
const a = St(e), l = s.style.transform, y = s.style.transformOrigin, o = s.style.position, h = s.style.zIndex;
|
|
921
921
|
return {
|
|
922
|
-
physics:
|
|
922
|
+
physics: i,
|
|
923
923
|
from: 0,
|
|
924
924
|
to: 1,
|
|
925
925
|
prepare: () => {
|
|
@@ -935,11 +935,11 @@ const Kt = (t = {}) => {
|
|
|
935
935
|
let u;
|
|
936
936
|
if (d <= 0.05)
|
|
937
937
|
u = c;
|
|
938
|
-
else if (d <=
|
|
939
|
-
const w = (d - 0.05) / (
|
|
938
|
+
else if (d <= n) {
|
|
939
|
+
const w = (d - 0.05) / (n - 0.05), b = Math.pow(w, 9);
|
|
940
940
|
u = c + (0.8 - c) * b;
|
|
941
941
|
} else {
|
|
942
|
-
const w = (d -
|
|
942
|
+
const w = (d - n) / (1 - n);
|
|
943
943
|
u = 0.8 + 0.2 * (1 - Math.pow(1 - w, 3));
|
|
944
944
|
}
|
|
945
945
|
let f;
|
|
@@ -973,34 +973,34 @@ const Kt = (t = {}) => {
|
|
|
973
973
|
};
|
|
974
974
|
function Tt({
|
|
975
975
|
detailRect: t,
|
|
976
|
-
galleryRect:
|
|
976
|
+
galleryRect: i,
|
|
977
977
|
pageRect: r,
|
|
978
978
|
scrollOffset: c
|
|
979
979
|
}) {
|
|
980
|
-
const
|
|
980
|
+
const n = i.left - t.left + (i.width - t.width) / 2 - c.x, s = i.top - t.top + (i.height - t.height) / 2 - c.y, e = i.width / t.width, a = i.height / t.height, l = Math.max(e, a), y = t.top / r.height * 100, o = (r.width - (t.left + t.width)) / r.width * 100, h = (r.height - (t.top + t.height)) / r.height * 100, d = t.left / r.width * 100;
|
|
981
981
|
return {
|
|
982
982
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
983
983
|
animate: (f) => {
|
|
984
984
|
const p = 1 - f;
|
|
985
985
|
return {
|
|
986
986
|
clipPath: `inset(${y * p}% ${o * p}% ${h * p}% ${d * p}%)`,
|
|
987
|
-
transform: `translate(${
|
|
987
|
+
transform: `translate(${n * p}px, ${s * p}px) scale(${1 + (l - 1) * p})`
|
|
988
988
|
};
|
|
989
989
|
}
|
|
990
990
|
};
|
|
991
991
|
}
|
|
992
992
|
function Lt({
|
|
993
993
|
galleryRect: t,
|
|
994
|
-
detailRect:
|
|
994
|
+
detailRect: i,
|
|
995
995
|
scrollOffset: r
|
|
996
996
|
}) {
|
|
997
|
-
const c =
|
|
997
|
+
const c = i.left - t.left + (i.width - t.width) / 2 + r.x, n = i.top - t.top + (i.height - t.height) / 2 + r.y, s = i.width / t.width, e = i.height / t.height, a = Math.max(s, e);
|
|
998
998
|
return {
|
|
999
999
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1000
1000
|
animate: (y) => {
|
|
1001
1001
|
const o = 1 - y;
|
|
1002
1002
|
return {
|
|
1003
|
-
transform: `translate(${c * o - r.x}px, ${
|
|
1003
|
+
transform: `translate(${c * o - r.x}px, ${n * o - r.y}px) scale(${1 + (a - 1) * o})`,
|
|
1004
1004
|
opacity: `${1 - o}`
|
|
1005
1005
|
};
|
|
1006
1006
|
}
|
|
@@ -1008,16 +1008,16 @@ function Lt({
|
|
|
1008
1008
|
}
|
|
1009
1009
|
function Pt({
|
|
1010
1010
|
galleryRect: t,
|
|
1011
|
-
detailRect:
|
|
1011
|
+
detailRect: i,
|
|
1012
1012
|
scrollOffset: r
|
|
1013
1013
|
}) {
|
|
1014
|
-
const c =
|
|
1014
|
+
const c = i.left - t.left + (i.width - t.width) / 2 - r.x, n = i.top - t.top + (i.height - t.height) / 2 - r.y, s = i.width / t.width, e = i.height / t.height, a = Math.max(s, e);
|
|
1015
1015
|
return {
|
|
1016
1016
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1017
1017
|
animate: (y) => {
|
|
1018
1018
|
const o = 1 - y, h = y;
|
|
1019
1019
|
return {
|
|
1020
|
-
transform: `translate(${c * o}px, ${
|
|
1020
|
+
transform: `translate(${c * o}px, ${n * o}px) scale(${1 + (a - 1) * o})`,
|
|
1021
1021
|
opacity: `${h}`
|
|
1022
1022
|
};
|
|
1023
1023
|
}
|
|
@@ -1025,61 +1025,61 @@ function Pt({
|
|
|
1025
1025
|
}
|
|
1026
1026
|
function kt({
|
|
1027
1027
|
detailRect: t,
|
|
1028
|
-
galleryRect:
|
|
1028
|
+
galleryRect: i,
|
|
1029
1029
|
pageRect: r,
|
|
1030
1030
|
scrollOffset: c
|
|
1031
1031
|
}) {
|
|
1032
|
-
const
|
|
1032
|
+
const n = i.left - t.left + (i.width - t.width) / 2 + c.x, s = i.top - t.top + (i.height - t.height) / 2 + c.y, e = i.width / t.width, a = i.height / t.height, l = Math.min(e, a), y = t.top / r.height * 100, o = (r.width - (t.left + t.width)) / r.width * 100, h = (r.height - (t.top + t.height)) / r.height * 100, d = t.left / r.width * 100;
|
|
1033
1033
|
return {
|
|
1034
1034
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1035
1035
|
animate: (f) => {
|
|
1036
1036
|
const p = 1 - f;
|
|
1037
1037
|
return {
|
|
1038
1038
|
clipPath: `inset(${y * p}% ${o * p}% ${h * p}% ${d * p}%)`,
|
|
1039
|
-
transform: `translate(${
|
|
1039
|
+
transform: `translate(${n * p - c.x}px, ${s * p - c.y}px) scale(${1 + (l - 1) * p})`
|
|
1040
1040
|
};
|
|
1041
1041
|
}
|
|
1042
1042
|
};
|
|
1043
1043
|
}
|
|
1044
|
-
function vt(t,
|
|
1044
|
+
function vt(t, i, r) {
|
|
1045
1045
|
const c = t.querySelector(
|
|
1046
1046
|
"[data-pinterest-detail-key]"
|
|
1047
|
-
),
|
|
1047
|
+
), n = i.querySelector(
|
|
1048
1048
|
"[data-pinterest-detail-key]"
|
|
1049
1049
|
);
|
|
1050
|
-
if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 ||
|
|
1050
|
+
if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || i.querySelectorAll("[data-pinterest-detail-key]").length > 1)
|
|
1051
1051
|
return null;
|
|
1052
1052
|
let s = null, e = null, a = !1;
|
|
1053
|
-
if (!c &&
|
|
1054
|
-
e =
|
|
1053
|
+
if (!c && n) {
|
|
1054
|
+
e = n;
|
|
1055
1055
|
const o = e.getAttribute("data-pinterest-detail-key");
|
|
1056
1056
|
if (!o) return null;
|
|
1057
1057
|
s = t.querySelector(
|
|
1058
1058
|
`[data-pinterest-gallery-key="${o}"]`
|
|
1059
1059
|
), s && (a = !0);
|
|
1060
|
-
} else if (c && !
|
|
1060
|
+
} else if (c && !n) {
|
|
1061
1061
|
e = c;
|
|
1062
1062
|
const o = e.getAttribute("data-pinterest-detail-key");
|
|
1063
1063
|
if (!o) return null;
|
|
1064
|
-
s =
|
|
1064
|
+
s = i.querySelector(
|
|
1065
1065
|
`[data-pinterest-gallery-key="${o}"]`
|
|
1066
1066
|
), s && (a = !1);
|
|
1067
1067
|
}
|
|
1068
1068
|
if (!s || !e)
|
|
1069
1069
|
return null;
|
|
1070
|
-
const l = x(a ? t :
|
|
1070
|
+
const l = x(a ? t : i, s), y = x(a ? i : t, e);
|
|
1071
1071
|
if (a) {
|
|
1072
1072
|
const o = Tt({
|
|
1073
1073
|
detailRect: y,
|
|
1074
1074
|
galleryRect: l,
|
|
1075
|
-
pageRect:
|
|
1075
|
+
pageRect: i.getBoundingClientRect(),
|
|
1076
1076
|
scrollOffset: r
|
|
1077
1077
|
}), h = Lt({
|
|
1078
1078
|
galleryRect: l,
|
|
1079
1079
|
detailRect: y,
|
|
1080
1080
|
scrollOffset: r
|
|
1081
1081
|
});
|
|
1082
|
-
return
|
|
1082
|
+
return i.style.transformOrigin = o.transformOrigin, t.style.transformOrigin = h.transformOrigin, {
|
|
1083
1083
|
inAnimation: o.animate,
|
|
1084
1084
|
outAnimation: h.animate
|
|
1085
1085
|
};
|
|
@@ -1094,30 +1094,30 @@ function vt(t, n, r) {
|
|
|
1094
1094
|
pageRect: t.getBoundingClientRect(),
|
|
1095
1095
|
scrollOffset: r
|
|
1096
1096
|
});
|
|
1097
|
-
return
|
|
1097
|
+
return i.style.transformOrigin = o.transformOrigin, t.style.transformOrigin = h.transformOrigin, {
|
|
1098
1098
|
inAnimation: o.animate,
|
|
1099
1099
|
outAnimation: h.animate
|
|
1100
1100
|
};
|
|
1101
1101
|
}
|
|
1102
1102
|
}
|
|
1103
1103
|
const Qt = (t = {}) => {
|
|
1104
|
-
const
|
|
1105
|
-
let c = null,
|
|
1104
|
+
const i = t.physics ?? At, r = t.timeout ?? 300;
|
|
1105
|
+
let c = null, n = null, s = null, e = null;
|
|
1106
1106
|
return {
|
|
1107
1107
|
in: async (a, { scrollOffset: l }) => {
|
|
1108
1108
|
const y = a;
|
|
1109
1109
|
return !await new Promise((h) => {
|
|
1110
|
-
c ? h(!0) : (
|
|
1111
|
-
|
|
1110
|
+
c ? h(!0) : (n = h, setTimeout(() => {
|
|
1111
|
+
n = null, h(!1);
|
|
1112
1112
|
}, r));
|
|
1113
1113
|
}) || !c ? (e == null || e(), e = null, c = null, {
|
|
1114
|
-
physics:
|
|
1114
|
+
physics: i,
|
|
1115
1115
|
css: () => ({})
|
|
1116
1116
|
}) : (s = vt(c, y, l), e == null || e(), e = null, s ? (c = null, {
|
|
1117
|
-
physics:
|
|
1117
|
+
physics: i,
|
|
1118
1118
|
css: (h) => s ? s.inAnimation(h) : {}
|
|
1119
1119
|
}) : (c = null, {
|
|
1120
|
-
physics:
|
|
1120
|
+
physics: i,
|
|
1121
1121
|
css: () => ({})
|
|
1122
1122
|
}));
|
|
1123
1123
|
},
|
|
@@ -1126,9 +1126,9 @@ const Qt = (t = {}) => {
|
|
|
1126
1126
|
e = y;
|
|
1127
1127
|
});
|
|
1128
1128
|
return {
|
|
1129
|
-
physics:
|
|
1129
|
+
physics: i,
|
|
1130
1130
|
prepare: () => {
|
|
1131
|
-
g(a), a.style.zIndex = "-1", c = a,
|
|
1131
|
+
g(a), a.style.zIndex = "-1", c = a, n && (n(!0), n = null);
|
|
1132
1132
|
},
|
|
1133
1133
|
wait: async () => {
|
|
1134
1134
|
await l;
|
|
@@ -1140,10 +1140,10 @@ const Qt = (t = {}) => {
|
|
|
1140
1140
|
}, mt = {
|
|
1141
1141
|
spring: { stiffness: 100, damping: 30 }
|
|
1142
1142
|
}, Rt = (t = {}) => {
|
|
1143
|
-
const
|
|
1143
|
+
const i = t.physics ?? mt;
|
|
1144
1144
|
return {
|
|
1145
1145
|
in: (r) => ({
|
|
1146
|
-
physics:
|
|
1146
|
+
physics: i,
|
|
1147
1147
|
prepare: () => {
|
|
1148
1148
|
r.style.opacity = "0", r.style.transform = "rotate(-180deg)", r.style.transformOrigin = "center center", r.style.willChange = "transform, opacity";
|
|
1149
1149
|
},
|
|
@@ -1157,14 +1157,14 @@ const Qt = (t = {}) => {
|
|
|
1157
1157
|
}
|
|
1158
1158
|
}),
|
|
1159
1159
|
out: (r, c) => ({
|
|
1160
|
-
physics:
|
|
1160
|
+
physics: i,
|
|
1161
1161
|
prepare: () => {
|
|
1162
1162
|
g(r, c), r.style.transformOrigin = "center center", r.style.willChange = "transform, opacity";
|
|
1163
1163
|
},
|
|
1164
|
-
css: (
|
|
1164
|
+
css: (n) => ({
|
|
1165
1165
|
// 0deg → 180deg, hide after 90deg (progress < 0.5)
|
|
1166
|
-
transform: `rotate(${(1 -
|
|
1167
|
-
opacity:
|
|
1166
|
+
transform: `rotate(${(1 - n) * 180}deg)`,
|
|
1167
|
+
opacity: n > 0.5 ? 1 : 0
|
|
1168
1168
|
}),
|
|
1169
1169
|
onEnd: () => {
|
|
1170
1170
|
r.style.willChange = "auto";
|
|
@@ -1174,16 +1174,16 @@ const Qt = (t = {}) => {
|
|
|
1174
1174
|
}, It = {
|
|
1175
1175
|
spring: { stiffness: 5, damping: 4 }
|
|
1176
1176
|
}, ts = (t = {}) => {
|
|
1177
|
-
const
|
|
1178
|
-
let
|
|
1177
|
+
const i = t.direction ?? "up", r = t.physics ?? It, c = i === "up";
|
|
1178
|
+
let n = null, s = null, e = null;
|
|
1179
1179
|
const a = () => {
|
|
1180
|
-
if (
|
|
1180
|
+
if (n === null || s === null)
|
|
1181
1181
|
return null;
|
|
1182
|
-
const l = Math.min(
|
|
1182
|
+
const l = Math.min(n, s), y = window.innerHeight;
|
|
1183
1183
|
return Math.max(l, y);
|
|
1184
1184
|
};
|
|
1185
1185
|
return {
|
|
1186
|
-
in: (l) => (s = l.offsetHeight,
|
|
1186
|
+
in: (l) => (s = l.offsetHeight, n !== null && (e = a()), {
|
|
1187
1187
|
physics: r,
|
|
1188
1188
|
prepare: () => {
|
|
1189
1189
|
l.style.willChange = "transform", l.style.backfaceVisibility = "hidden", l.style.contain = "layout paint";
|
|
@@ -1205,7 +1205,7 @@ const Qt = (t = {}) => {
|
|
|
1205
1205
|
l.style.transform = `translate3d(0, ${d}px, 0)`;
|
|
1206
1206
|
},
|
|
1207
1207
|
prepare: () => {
|
|
1208
|
-
|
|
1208
|
+
n = l.offsetHeight, s !== null && (e = a()), g(l, y), l.style.zIndex = c ? "-1" : "1", l.style.willChange = "transform", l.style.backfaceVisibility = "hidden", l.style.contain = "layout paint", l.style.pointerEvents = "none";
|
|
1209
1209
|
}
|
|
1210
1210
|
})
|
|
1211
1211
|
};
|
|
@@ -1221,40 +1221,40 @@ const Qt = (t = {}) => {
|
|
|
1221
1221
|
}
|
|
1222
1222
|
}, Yt = 0.2;
|
|
1223
1223
|
function T(t) {
|
|
1224
|
-
const
|
|
1224
|
+
const i = x(document.body, t.positionedParent), r = t.scroll.y, c = window.innerHeight - i.top;
|
|
1225
1225
|
return {
|
|
1226
1226
|
top: r,
|
|
1227
1227
|
left: 0,
|
|
1228
|
-
width:
|
|
1228
|
+
width: i.width,
|
|
1229
1229
|
height: c
|
|
1230
1230
|
};
|
|
1231
1231
|
}
|
|
1232
1232
|
const ss = (t = {}) => {
|
|
1233
|
-
const { direction:
|
|
1234
|
-
return
|
|
1233
|
+
const { direction: i = "enter" } = t, r = t.physics ?? (i === "enter" ? _t : Dt), c = t.scaleOffset ?? Yt;
|
|
1234
|
+
return i === "enter" ? {
|
|
1235
1235
|
// Entering sheet: slides up from bottom
|
|
1236
|
-
in: (
|
|
1236
|
+
in: (n, s) => {
|
|
1237
1237
|
const a = T(s).height;
|
|
1238
1238
|
return {
|
|
1239
1239
|
physics: r,
|
|
1240
1240
|
prepare: () => {
|
|
1241
|
-
|
|
1241
|
+
n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
1242
1242
|
},
|
|
1243
1243
|
css: (l) => ({
|
|
1244
1244
|
transform: `translate3d(0, ${(1 - l) * a}px, 0)`
|
|
1245
1245
|
}),
|
|
1246
1246
|
onEnd: () => {
|
|
1247
|
-
|
|
1247
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
1248
1248
|
}
|
|
1249
1249
|
};
|
|
1250
1250
|
},
|
|
1251
1251
|
// Exiting background: scales down with fade
|
|
1252
|
-
out: (
|
|
1252
|
+
out: (n, s) => {
|
|
1253
1253
|
const e = T(s), a = e.left + e.width / 2, l = e.top + e.height / 2 + s.scrollOffset.y;
|
|
1254
1254
|
return {
|
|
1255
1255
|
physics: r,
|
|
1256
1256
|
prepare: () => {
|
|
1257
|
-
g(
|
|
1257
|
+
g(n, s), n.style.zIndex = "-1", n.style.willChange = "transform, opacity", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none", n.style.transformOrigin = `${a}px ${l}px`;
|
|
1258
1258
|
},
|
|
1259
1259
|
css: (y) => ({
|
|
1260
1260
|
transform: `scale(${1 - c + y * c})`,
|
|
@@ -1264,29 +1264,29 @@ const ss = (t = {}) => {
|
|
|
1264
1264
|
}
|
|
1265
1265
|
} : {
|
|
1266
1266
|
// Entering background: scales up with fade
|
|
1267
|
-
in: (
|
|
1267
|
+
in: (n, s) => {
|
|
1268
1268
|
const e = T(s), a = e.left + e.width / 2, l = e.top + e.height / 2;
|
|
1269
1269
|
return {
|
|
1270
1270
|
physics: r,
|
|
1271
1271
|
prepare: () => {
|
|
1272
|
-
|
|
1272
|
+
n.style.willChange = "transform, opacity", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.transformOrigin = `${a}px ${l}px`;
|
|
1273
1273
|
},
|
|
1274
1274
|
css: (y) => ({
|
|
1275
1275
|
transform: `scale(${1 - c + y * c})`,
|
|
1276
1276
|
opacity: y
|
|
1277
1277
|
}),
|
|
1278
1278
|
onEnd: () => {
|
|
1279
|
-
|
|
1279
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "", n.style.transformOrigin = "";
|
|
1280
1280
|
}
|
|
1281
1281
|
};
|
|
1282
1282
|
},
|
|
1283
1283
|
// Exiting sheet: slides down with high z-index
|
|
1284
|
-
out: (
|
|
1284
|
+
out: (n, s) => {
|
|
1285
1285
|
const a = T(s).height;
|
|
1286
1286
|
return {
|
|
1287
1287
|
physics: r,
|
|
1288
1288
|
prepare: () => {
|
|
1289
|
-
g(
|
|
1289
|
+
g(n, s), n.style.zIndex = "100", n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
1290
1290
|
},
|
|
1291
1291
|
css: (l) => ({
|
|
1292
1292
|
transform: `translate3d(0, ${(1 - l) * a}px, 0)`
|
|
@@ -1301,27 +1301,27 @@ const ss = (t = {}) => {
|
|
|
1301
1301
|
doubleSpring: 0.8
|
|
1302
1302
|
}
|
|
1303
1303
|
}, is = (t = {}) => {
|
|
1304
|
-
const
|
|
1304
|
+
const i = t.direction ?? "left", r = t.physics ?? Ft, c = i === "left";
|
|
1305
1305
|
return {
|
|
1306
|
-
in: (
|
|
1306
|
+
in: (n) => ({
|
|
1307
1307
|
physics: r,
|
|
1308
1308
|
prepare: () => {
|
|
1309
|
-
|
|
1309
|
+
n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
1310
1310
|
},
|
|
1311
1311
|
css: (s) => ({
|
|
1312
1312
|
transform: `translate3d(${c ? (1 - s) * 100 : (1 - s) * -100}%, 0, 0)`
|
|
1313
1313
|
}),
|
|
1314
1314
|
onEnd: () => {
|
|
1315
|
-
|
|
1315
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
1316
1316
|
}
|
|
1317
1317
|
}),
|
|
1318
|
-
out: (
|
|
1318
|
+
out: (n, s) => ({
|
|
1319
1319
|
physics: r,
|
|
1320
1320
|
css: (e) => ({
|
|
1321
1321
|
transform: `translate3d(${c ? (1 - e) * -100 : (1 - e) * 100}%, 0, 0)`
|
|
1322
1322
|
}),
|
|
1323
1323
|
prepare: () => {
|
|
1324
|
-
g(
|
|
1324
|
+
g(n, s), n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
1325
1325
|
}
|
|
1326
1326
|
})
|
|
1327
1327
|
};
|
|
@@ -1333,7 +1333,7 @@ const ss = (t = {}) => {
|
|
|
1333
1333
|
restSpeed: 1e14
|
|
1334
1334
|
}
|
|
1335
1335
|
}, ns = (t = {}) => {
|
|
1336
|
-
const
|
|
1336
|
+
const i = t.direction ?? "left", r = t.physics ?? Vt, c = t.translateOffset ?? Ut, n = i === "left";
|
|
1337
1337
|
let { promise: s, resolve: e } = E();
|
|
1338
1338
|
return {
|
|
1339
1339
|
// Entering page: fades in + slides from opposite direction
|
|
@@ -1350,7 +1350,7 @@ const ss = (t = {}) => {
|
|
|
1350
1350
|
}
|
|
1351
1351
|
},
|
|
1352
1352
|
css: (l) => {
|
|
1353
|
-
const y =
|
|
1353
|
+
const y = n ? (1 - l) * c : (1 - l) * -c, o = `${l}`;
|
|
1354
1354
|
return {
|
|
1355
1355
|
transform: `translate3d(${y}px, 0, 0)`,
|
|
1356
1356
|
opacity: o
|
|
@@ -1367,7 +1367,7 @@ const ss = (t = {}) => {
|
|
|
1367
1367
|
g(a, l), a.style.willChange = "transform, opacity", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.pointerEvents = "none";
|
|
1368
1368
|
},
|
|
1369
1369
|
css: (y) => {
|
|
1370
|
-
const o =
|
|
1370
|
+
const o = n ? (1 - y) * -c : (1 - y) * c, h = `${y}`;
|
|
1371
1371
|
return {
|
|
1372
1372
|
transform: `translate3d(${o}px, 0, 0)`,
|
|
1373
1373
|
opacity: h
|
|
@@ -1381,13 +1381,13 @@ const ss = (t = {}) => {
|
|
|
1381
1381
|
}, Ht = {
|
|
1382
1382
|
spring: { stiffness: 17, damping: 6 }
|
|
1383
1383
|
}, P = 20, L = 800, es = (t = {}) => {
|
|
1384
|
-
const
|
|
1384
|
+
const i = t.physics ?? Ht;
|
|
1385
1385
|
let r, c = null;
|
|
1386
1386
|
return {
|
|
1387
|
-
in: (
|
|
1388
|
-
physics:
|
|
1387
|
+
in: (n) => ({
|
|
1388
|
+
physics: i,
|
|
1389
1389
|
prepare: () => {
|
|
1390
|
-
|
|
1390
|
+
n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.transform = `perspective(${L}px) rotateY(${P}deg) translate3d(-100%, 0, 0)`;
|
|
1391
1391
|
},
|
|
1392
1392
|
wait: async () => {
|
|
1393
1393
|
r && await r;
|
|
@@ -1399,15 +1399,15 @@ const ss = (t = {}) => {
|
|
|
1399
1399
|
};
|
|
1400
1400
|
},
|
|
1401
1401
|
onEnd: () => {
|
|
1402
|
-
|
|
1402
|
+
n.style.transform = "", n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
1403
1403
|
}
|
|
1404
1404
|
}),
|
|
1405
|
-
out: (
|
|
1405
|
+
out: (n, s) => (r = new Promise((e) => {
|
|
1406
1406
|
c = e;
|
|
1407
1407
|
}), {
|
|
1408
|
-
physics:
|
|
1408
|
+
physics: i,
|
|
1409
1409
|
prepare: () => {
|
|
1410
|
-
g(
|
|
1410
|
+
g(n, s), n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none", n.style.transform = `perspective(${L}px) rotateY(0deg) translate3d(0%, 0, 0)`;
|
|
1411
1411
|
},
|
|
1412
1412
|
css: (e) => {
|
|
1413
1413
|
const a = 1 - e, l = a * P, y = a * 100;
|
|
@@ -1416,7 +1416,7 @@ const ss = (t = {}) => {
|
|
|
1416
1416
|
};
|
|
1417
1417
|
},
|
|
1418
1418
|
onEnd: () => {
|
|
1419
|
-
c && c(),
|
|
1419
|
+
c && c(), n.style.transform = "";
|
|
1420
1420
|
}
|
|
1421
1421
|
})
|
|
1422
1422
|
};
|
|
@@ -1429,23 +1429,23 @@ const ss = (t = {}) => {
|
|
|
1429
1429
|
}
|
|
1430
1430
|
}, zt = 0.05;
|
|
1431
1431
|
function Wt(t) {
|
|
1432
|
-
const
|
|
1432
|
+
const i = x(document.body, t.positionedParent), r = t.scroll.y, c = window.innerHeight - i.top;
|
|
1433
1433
|
return {
|
|
1434
1434
|
top: r,
|
|
1435
1435
|
left: 0,
|
|
1436
|
-
width:
|
|
1436
|
+
width: i.width,
|
|
1437
1437
|
height: c
|
|
1438
1438
|
};
|
|
1439
1439
|
}
|
|
1440
1440
|
const as = (t = {}) => {
|
|
1441
|
-
const
|
|
1442
|
-
let { promise: c, resolve:
|
|
1441
|
+
const i = t.physics ?? Xt, r = t.scaleOffset ?? zt;
|
|
1442
|
+
let { promise: c, resolve: n } = E();
|
|
1443
1443
|
return {
|
|
1444
1444
|
// Entering page: scales up from small (0.95 → 1) with fade in
|
|
1445
1445
|
in: (s, e) => {
|
|
1446
1446
|
const a = Wt(e), l = a.left + a.width / 2, y = a.top + a.height / 2;
|
|
1447
1447
|
return {
|
|
1448
|
-
physics:
|
|
1448
|
+
physics: i,
|
|
1449
1449
|
prepare: () => {
|
|
1450
1450
|
s.style.opacity = "0", s.style.willChange = "transform, opacity", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.transformOrigin = `${l}px ${y}px`;
|
|
1451
1451
|
},
|
|
@@ -1453,7 +1453,7 @@ const as = (t = {}) => {
|
|
|
1453
1453
|
if (c) {
|
|
1454
1454
|
await c;
|
|
1455
1455
|
const o = E();
|
|
1456
|
-
c = o.promise,
|
|
1456
|
+
c = o.promise, n = o.resolve;
|
|
1457
1457
|
}
|
|
1458
1458
|
},
|
|
1459
1459
|
css: (o) => ({
|
|
@@ -1467,7 +1467,7 @@ const as = (t = {}) => {
|
|
|
1467
1467
|
},
|
|
1468
1468
|
// Exiting page: fade out only (no scale)
|
|
1469
1469
|
out: (s, e) => ({
|
|
1470
|
-
physics:
|
|
1470
|
+
physics: i,
|
|
1471
1471
|
prepare: () => {
|
|
1472
1472
|
g(s, e), s.style.willChange = "opacity", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.pointerEvents = "none";
|
|
1473
1473
|
},
|
|
@@ -1475,7 +1475,7 @@ const as = (t = {}) => {
|
|
|
1475
1475
|
opacity: a
|
|
1476
1476
|
}),
|
|
1477
1477
|
onEnd: () => {
|
|
1478
|
-
|
|
1478
|
+
n && n();
|
|
1479
1479
|
}
|
|
1480
1480
|
})
|
|
1481
1481
|
};
|