@ssgoi/core 6.1.0 → 6.2.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 +11 -11
- package/dist/index.js +967 -727
- package/dist/transitions/axis/index.d.ts +9 -1
- package/dist/transitions/axis/index.d.ts.map +1 -1
- package/dist/transitions/axis/provider/index.d.ts.map +1 -1
- package/dist/transitions/axis/provider/x/index.d.ts +3 -1
- package/dist/transitions/axis/provider/x/index.d.ts.map +1 -1
- package/dist/transitions/axis/provider/y/directional.d.ts +3 -0
- package/dist/transitions/axis/provider/y/directional.d.ts.map +1 -0
- package/dist/transitions/axis/provider/y/index.d.ts +5 -0
- package/dist/transitions/axis/provider/y/index.d.ts.map +1 -0
- package/dist/transitions/axis/provider/y/non-directional.d.ts +3 -0
- package/dist/transitions/axis/provider/y/non-directional.d.ts.map +1 -0
- package/dist/transitions/axis/types.d.ts +9 -6
- package/dist/transitions/axis/types.d.ts.map +1 -1
- package/dist/transitions/hero/index.d.ts +10 -7
- package/dist/transitions/hero/index.d.ts.map +1 -1
- package/dist/transitions/hero/keys.d.ts +15 -0
- package/dist/transitions/hero/keys.d.ts.map +1 -0
- package/dist/transitions/hero/provider/fade.d.ts +3 -0
- package/dist/transitions/hero/provider/fade.d.ts.map +1 -0
- package/dist/transitions/hero/provider/index.d.ts +8 -0
- package/dist/transitions/hero/provider/index.d.ts.map +1 -0
- package/dist/transitions/hero/provider/static.d.ts +3 -0
- package/dist/transitions/hero/provider/static.d.ts.map +1 -0
- package/dist/transitions/hero/transition.d.ts +7 -6
- package/dist/transitions/hero/transition.d.ts.map +1 -1
- package/dist/transitions/hero/types.d.ts +50 -7
- package/dist/transitions/hero/types.d.ts.map +1 -1
- package/dist/transitions/zoom/transition.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/transitions/axis/provider/y.d.ts +0 -3
- package/dist/transitions/axis/provider/y.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var $ = (e, t, n) =>
|
|
4
|
-
import { P as
|
|
5
|
-
import { A as
|
|
6
|
-
function
|
|
1
|
+
var Mt = Object.defineProperty;
|
|
2
|
+
var Ut = (e, t, n) => t in e ? Mt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
|
+
var $ = (e, t, n) => Ut(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
|
+
import { P as ct, V as At, W as b, M as C, S as zt } from "./multi-animation-CnxqLEka.js";
|
|
5
|
+
import { A as Es } from "./multi-animation-CnxqLEka.js";
|
|
6
|
+
function _(e, t) {
|
|
7
7
|
const n = [];
|
|
8
8
|
for (let s = 0; s < e.length; s++)
|
|
9
9
|
for (let o = s + 1; o < e.length; o++) {
|
|
10
|
-
const
|
|
11
|
-
!
|
|
12
|
-
from:
|
|
13
|
-
to:
|
|
10
|
+
const r = e[s], i = e[o];
|
|
11
|
+
!r || !i || n.push({
|
|
12
|
+
from: r,
|
|
13
|
+
to: i,
|
|
14
14
|
transition: t(),
|
|
15
15
|
symmetric: !0
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
18
|
return n;
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function Dt(e, t) {
|
|
21
21
|
return [
|
|
22
22
|
{
|
|
23
23
|
from: e.exit,
|
|
@@ -31,27 +31,27 @@ function ht(e, t) {
|
|
|
31
31
|
}
|
|
32
32
|
];
|
|
33
33
|
}
|
|
34
|
-
function
|
|
34
|
+
function pt(e, t, n) {
|
|
35
35
|
const s = [];
|
|
36
36
|
for (let o = 0; o < e.length; o++)
|
|
37
|
-
for (let
|
|
38
|
-
const
|
|
39
|
-
!
|
|
37
|
+
for (let r = o + 1; r < e.length; r++) {
|
|
38
|
+
const i = e[o], c = e[r];
|
|
39
|
+
!i || !c || s.push(
|
|
40
40
|
{
|
|
41
|
-
from:
|
|
42
|
-
to:
|
|
41
|
+
from: i,
|
|
42
|
+
to: c,
|
|
43
43
|
transition: n(t.forward)
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
|
-
from:
|
|
47
|
-
to:
|
|
46
|
+
from: c,
|
|
47
|
+
to: i,
|
|
48
48
|
transition: n(t.backward)
|
|
49
49
|
}
|
|
50
50
|
);
|
|
51
51
|
}
|
|
52
52
|
return s;
|
|
53
53
|
}
|
|
54
|
-
class
|
|
54
|
+
class B {
|
|
55
55
|
constructor(t) {
|
|
56
56
|
$(this, "omega");
|
|
57
57
|
// Angular frequency
|
|
@@ -60,13 +60,13 @@ class F {
|
|
|
60
60
|
$(this, "restDelta");
|
|
61
61
|
$(this, "restSpeed");
|
|
62
62
|
const { stiffness: n, damping: s } = t, o = 1;
|
|
63
|
-
this.omega = Math.sqrt(n / o), this.zeta = s / (2 * Math.sqrt(n * o)), this.restDelta = t.restDelta ??
|
|
63
|
+
this.omega = Math.sqrt(n / o), this.zeta = s / (2 * Math.sqrt(n * o)), this.restDelta = t.restDelta ?? ct, this.restSpeed = t.restSpeed ?? At;
|
|
64
64
|
}
|
|
65
65
|
step(t, n, s) {
|
|
66
|
-
const o = Math.min(s, 0.033), { omega:
|
|
66
|
+
const o = Math.min(s, 0.033), { omega: r, zeta: i } = this, { position: c, velocity: l } = t, a = -2 * o * i * r * l, p = o * r * r * (n - c), f = l + a + p;
|
|
67
67
|
return {
|
|
68
|
-
position:
|
|
69
|
-
velocity:
|
|
68
|
+
position: c + o * f,
|
|
69
|
+
velocity: f
|
|
70
70
|
};
|
|
71
71
|
}
|
|
72
72
|
isSettled(t, n) {
|
|
@@ -74,39 +74,39 @@ class F {
|
|
|
74
74
|
return s < this.restDelta && o < this.restSpeed;
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
class
|
|
77
|
+
class Xt {
|
|
78
78
|
constructor(t) {
|
|
79
79
|
$(this, "leader");
|
|
80
80
|
$(this, "follower");
|
|
81
81
|
$(this, "restDelta");
|
|
82
82
|
$(this, "restSpeed");
|
|
83
|
-
this.restDelta = t.restDelta ??
|
|
83
|
+
this.restDelta = t.restDelta ?? ct, this.restSpeed = t.restSpeed ?? At, this.leader = new B({
|
|
84
84
|
stiffness: t.stiffness,
|
|
85
85
|
damping: t.damping,
|
|
86
86
|
restDelta: this.restDelta,
|
|
87
87
|
restSpeed: this.restSpeed
|
|
88
88
|
});
|
|
89
|
-
let n, s, o,
|
|
90
|
-
typeof t.follower == "number" ? (n = t.stiffness * t.follower, s = t.damping) : t.follower ? (n = t.follower.stiffness, s = t.follower.damping, o = t.follower.restDelta,
|
|
89
|
+
let n, s, o, r;
|
|
90
|
+
typeof t.follower == "number" ? (n = t.stiffness * t.follower, s = t.damping) : t.follower ? (n = t.follower.stiffness, s = t.follower.damping, o = t.follower.restDelta, r = t.follower.restSpeed) : (n = t.stiffness, s = t.damping), this.follower = new B({
|
|
91
91
|
stiffness: n,
|
|
92
92
|
damping: s,
|
|
93
93
|
restDelta: o ?? this.restDelta,
|
|
94
|
-
restSpeed:
|
|
94
|
+
restSpeed: r ?? this.restSpeed
|
|
95
95
|
});
|
|
96
96
|
}
|
|
97
97
|
step(t, n, s) {
|
|
98
|
-
const
|
|
98
|
+
const r = t._leader ?? {
|
|
99
99
|
position: t.position,
|
|
100
100
|
velocity: t.velocity
|
|
101
|
-
},
|
|
101
|
+
}, i = this.leader.step(r, n, s), c = this.follower.step(
|
|
102
102
|
t,
|
|
103
|
-
|
|
103
|
+
i.position,
|
|
104
104
|
s
|
|
105
105
|
);
|
|
106
106
|
return {
|
|
107
|
-
position:
|
|
108
|
-
velocity:
|
|
109
|
-
_leader:
|
|
107
|
+
position: c.position,
|
|
108
|
+
velocity: c.velocity,
|
|
109
|
+
_leader: i
|
|
110
110
|
};
|
|
111
111
|
}
|
|
112
112
|
isSettled(t, n) {
|
|
@@ -114,8 +114,8 @@ class Pt {
|
|
|
114
114
|
return s._leader ? Math.abs(n - s._leader.position) < this.restDelta && Math.abs(s._leader.velocity) < this.restSpeed && o : o;
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
|
-
const
|
|
118
|
-
class
|
|
117
|
+
const Nt = 0.01, Vt = 500, Bt = 10;
|
|
118
|
+
class Wt {
|
|
119
119
|
constructor(t) {
|
|
120
120
|
$(this, "acceleration");
|
|
121
121
|
$(this, "resistance");
|
|
@@ -125,28 +125,28 @@ class _t {
|
|
|
125
125
|
$(this, "bounceStiffness");
|
|
126
126
|
$(this, "bounceDamping");
|
|
127
127
|
$(this, "restDelta");
|
|
128
|
-
this.acceleration = t.acceleration, this.resistance = t.resistance, this.resistanceType = t.resistanceType ?? "quadratic", this.min = t.min, this.max = t.max, this.bounceStiffness = t.bounceStiffness ??
|
|
128
|
+
this.acceleration = t.acceleration, this.resistance = t.resistance, this.resistanceType = t.resistanceType ?? "quadratic", this.min = t.min, this.max = t.max, this.bounceStiffness = t.bounceStiffness ?? Vt, this.bounceDamping = t.bounceDamping ?? Bt, this.restDelta = t.restDelta ?? Nt;
|
|
129
129
|
}
|
|
130
130
|
step(t, n, s) {
|
|
131
|
-
const o = Math.min(s, 0.033), { acceleration:
|
|
132
|
-
let
|
|
133
|
-
if (
|
|
134
|
-
const
|
|
135
|
-
|
|
131
|
+
const o = Math.min(s, 0.033), { acceleration: r, resistance: i, resistanceType: c, min: l, max: a } = this, { position: p, velocity: f } = t, h = l !== void 0 && p < l, m = a !== void 0 && p > a;
|
|
132
|
+
let d;
|
|
133
|
+
if (h || m) {
|
|
134
|
+
const w = p - (h ? l : a), E = -this.bounceStiffness * w, P = -this.bounceDamping * f;
|
|
135
|
+
d = E + P;
|
|
136
136
|
} else {
|
|
137
|
-
const
|
|
138
|
-
let
|
|
139
|
-
|
|
137
|
+
const S = n > p ? 1 : -1;
|
|
138
|
+
let w;
|
|
139
|
+
c === "linear" ? w = i * f : w = i * f * Math.abs(f), d = S * r - w;
|
|
140
140
|
}
|
|
141
|
-
const
|
|
142
|
-
let
|
|
143
|
-
if (!
|
|
144
|
-
const
|
|
145
|
-
(
|
|
141
|
+
const y = f + d * o;
|
|
142
|
+
let u = p + y * o;
|
|
143
|
+
if (!h && !m) {
|
|
144
|
+
const S = n > p ? 1 : -1;
|
|
145
|
+
(S > 0 && u > n || S < 0 && u < n) && (u = n);
|
|
146
146
|
}
|
|
147
147
|
return {
|
|
148
|
-
position:
|
|
149
|
-
velocity:
|
|
148
|
+
position: u,
|
|
149
|
+
velocity: u === n ? 0 : y
|
|
150
150
|
};
|
|
151
151
|
}
|
|
152
152
|
isSettled(t, n) {
|
|
@@ -167,7 +167,7 @@ class g {
|
|
|
167
167
|
"Cannot use both 'spring' and 'inertia' together. Choose one physics type."
|
|
168
168
|
);
|
|
169
169
|
if (t.inertia)
|
|
170
|
-
return new
|
|
170
|
+
return new Wt({
|
|
171
171
|
acceleration: t.inertia.acceleration,
|
|
172
172
|
resistance: t.inertia.resistance,
|
|
173
173
|
resistanceType: t.inertia.resistanceType,
|
|
@@ -184,7 +184,7 @@ class g {
|
|
|
184
184
|
return typeof s == "number" ? o = s : typeof s == "object" && (o = {
|
|
185
185
|
stiffness: s.stiffness,
|
|
186
186
|
damping: s.damping
|
|
187
|
-
}), new
|
|
187
|
+
}), new Xt({
|
|
188
188
|
stiffness: n.stiffness,
|
|
189
189
|
damping: n.damping,
|
|
190
190
|
follower: o,
|
|
@@ -192,7 +192,7 @@ class g {
|
|
|
192
192
|
restSpeed: n.restSpeed
|
|
193
193
|
});
|
|
194
194
|
}
|
|
195
|
-
return new
|
|
195
|
+
return new B({
|
|
196
196
|
stiffness: n.stiffness,
|
|
197
197
|
damping: n.damping,
|
|
198
198
|
restDelta: n.restDelta,
|
|
@@ -207,7 +207,7 @@ class g {
|
|
|
207
207
|
return g.from({ spring: t });
|
|
208
208
|
}
|
|
209
209
|
}
|
|
210
|
-
class
|
|
210
|
+
class Rt {
|
|
211
211
|
constructor(t) {
|
|
212
212
|
$(this, "durationSec");
|
|
213
213
|
this.durationSec = Math.max(1 / 60, t.durationSec);
|
|
@@ -215,20 +215,20 @@ class At {
|
|
|
215
215
|
step(t, n, s) {
|
|
216
216
|
const o = n - t.position;
|
|
217
217
|
if (o === 0) return t;
|
|
218
|
-
const
|
|
219
|
-
return (
|
|
218
|
+
const r = Math.sign(o), i = Math.abs(o) / this.durationSec, c = r * i * s, l = t.position + c;
|
|
219
|
+
return (r > 0 ? l >= n : l <= n) ? { position: n, velocity: 0 } : { position: l, velocity: r * i };
|
|
220
220
|
}
|
|
221
221
|
isSettled(t, n) {
|
|
222
|
-
return Math.abs(t.position - n) <
|
|
222
|
+
return Math.abs(t.position - n) < ct;
|
|
223
223
|
}
|
|
224
224
|
}
|
|
225
|
-
const
|
|
225
|
+
const ft = 8, dt = {
|
|
226
226
|
spring: { stiffness: 1e3, damping: 40, doubleSpring: 1.2 }
|
|
227
227
|
};
|
|
228
|
-
function
|
|
228
|
+
function Zt({
|
|
229
229
|
direction: e
|
|
230
230
|
}) {
|
|
231
|
-
const t = e === "forward" ?
|
|
231
|
+
const t = e === "forward" ? ft : -ft;
|
|
232
232
|
return {
|
|
233
233
|
out: {
|
|
234
234
|
willChange: "transform, opacity",
|
|
@@ -250,25 +250,25 @@ function It({
|
|
|
250
250
|
}
|
|
251
251
|
};
|
|
252
252
|
}
|
|
253
|
-
function
|
|
253
|
+
function qt() {
|
|
254
254
|
return {
|
|
255
|
-
outPhysics:
|
|
256
|
-
inPhysics:
|
|
255
|
+
outPhysics: dt,
|
|
256
|
+
inPhysics: dt,
|
|
257
257
|
// Both sides run together — the cross-fade is the whole point of the
|
|
258
258
|
// snappy feel. (fluid's sibling uses staggered fade-through.)
|
|
259
259
|
composition: { mode: "parallel", startAt: [0, 0] },
|
|
260
|
-
build:
|
|
260
|
+
build: Zt
|
|
261
261
|
};
|
|
262
262
|
}
|
|
263
|
-
const
|
|
263
|
+
const ht = 30, jt = {
|
|
264
264
|
inertia: { acceleration: 150, resistance: 1.5 }
|
|
265
|
-
},
|
|
265
|
+
}, Kt = {
|
|
266
266
|
spring: { stiffness: 180, damping: 34 }
|
|
267
267
|
};
|
|
268
|
-
function
|
|
268
|
+
function Gt({
|
|
269
269
|
direction: e
|
|
270
270
|
}) {
|
|
271
|
-
const t = e === "forward" ? 1 : -1, n = -
|
|
271
|
+
const t = e === "forward" ? 1 : -1, n = -ht * t, s = ht * t;
|
|
272
272
|
return {
|
|
273
273
|
out: {
|
|
274
274
|
willChange: "transform, opacity",
|
|
@@ -291,59 +291,103 @@ function Ft({
|
|
|
291
291
|
}
|
|
292
292
|
};
|
|
293
293
|
}
|
|
294
|
-
function
|
|
294
|
+
function Jt() {
|
|
295
295
|
return {
|
|
296
|
-
outPhysics:
|
|
297
|
-
inPhysics:
|
|
296
|
+
outPhysics: jt,
|
|
297
|
+
inPhysics: Kt,
|
|
298
298
|
// Phased motion: outgoing falls away first under inertia, then incoming
|
|
299
299
|
// springs in. The fade-through shape comes from the integrator curves
|
|
300
300
|
// plus the sequence handoff, not from FADE_SPLIT inside animate(t).
|
|
301
301
|
composition: { mode: "sequence" },
|
|
302
|
-
build:
|
|
302
|
+
build: Gt
|
|
303
303
|
};
|
|
304
304
|
}
|
|
305
|
-
const
|
|
306
|
-
snappy:
|
|
307
|
-
fluid:
|
|
308
|
-
},
|
|
309
|
-
|
|
310
|
-
},
|
|
311
|
-
|
|
312
|
-
|
|
305
|
+
const Qt = {
|
|
306
|
+
snappy: qt(),
|
|
307
|
+
fluid: Jt()
|
|
308
|
+
}, yt = 8, te = {
|
|
309
|
+
inertia: { acceleration: 150, resistance: 1.5 }
|
|
310
|
+
}, ee = {
|
|
311
|
+
spring: { stiffness: 180, damping: 34 }
|
|
312
|
+
};
|
|
313
|
+
function ne({
|
|
314
|
+
direction: e
|
|
315
|
+
}) {
|
|
316
|
+
const t = e === "forward" ? 1 : -1, n = -yt * t, s = yt * t;
|
|
313
317
|
return {
|
|
314
318
|
out: {
|
|
315
319
|
willChange: "transform, opacity",
|
|
316
320
|
startStyle: {},
|
|
317
|
-
animate: (
|
|
318
|
-
transform: `translate3d(0, ${
|
|
319
|
-
opacity: `${1 -
|
|
321
|
+
animate: (o) => ({
|
|
322
|
+
transform: `translate3d(0, ${n * o}px, 0)`,
|
|
323
|
+
opacity: `${1 - o}`
|
|
320
324
|
})
|
|
321
325
|
},
|
|
322
326
|
in: {
|
|
323
327
|
willChange: "transform, opacity",
|
|
324
328
|
startStyle: {
|
|
325
|
-
transform: `translate3d(0, ${
|
|
329
|
+
transform: `translate3d(0, ${s}px, 0)`,
|
|
326
330
|
opacity: "0"
|
|
327
331
|
},
|
|
328
|
-
animate: (
|
|
329
|
-
transform: `translate3d(0, ${
|
|
330
|
-
opacity: `${
|
|
332
|
+
animate: (o) => ({
|
|
333
|
+
transform: `translate3d(0, ${s * (1 - o)}px, 0)`,
|
|
334
|
+
opacity: `${o}`
|
|
335
|
+
})
|
|
336
|
+
}
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
function se() {
|
|
340
|
+
return {
|
|
341
|
+
outPhysics: te,
|
|
342
|
+
inPhysics: ee,
|
|
343
|
+
composition: { mode: "sequence" },
|
|
344
|
+
build: ne
|
|
345
|
+
};
|
|
346
|
+
}
|
|
347
|
+
const oe = 8, re = {
|
|
348
|
+
inertia: { acceleration: 150, resistance: 1.5 }
|
|
349
|
+
}, ie = {
|
|
350
|
+
spring: { stiffness: 180, damping: 34 }
|
|
351
|
+
};
|
|
352
|
+
function ae(e) {
|
|
353
|
+
const t = oe;
|
|
354
|
+
return {
|
|
355
|
+
out: {
|
|
356
|
+
willChange: "opacity",
|
|
357
|
+
startStyle: {},
|
|
358
|
+
animate: (n) => ({
|
|
359
|
+
opacity: `${1 - n}`
|
|
360
|
+
})
|
|
361
|
+
},
|
|
362
|
+
in: {
|
|
363
|
+
willChange: "transform, opacity",
|
|
364
|
+
startStyle: {
|
|
365
|
+
transform: `translate3d(0, ${t}px, 0)`,
|
|
366
|
+
opacity: "0"
|
|
367
|
+
},
|
|
368
|
+
animate: (n) => ({
|
|
369
|
+
transform: `translate3d(0, ${t * (1 - n)}px, 0)`,
|
|
370
|
+
opacity: `${n}`
|
|
331
371
|
})
|
|
332
372
|
}
|
|
333
373
|
};
|
|
334
374
|
}
|
|
335
|
-
function
|
|
375
|
+
function le() {
|
|
336
376
|
return {
|
|
337
|
-
outPhysics:
|
|
338
|
-
inPhysics:
|
|
339
|
-
composition: { mode: "
|
|
340
|
-
build:
|
|
377
|
+
outPhysics: re,
|
|
378
|
+
inPhysics: ie,
|
|
379
|
+
composition: { mode: "sequence" },
|
|
380
|
+
build: ae
|
|
341
381
|
};
|
|
342
382
|
}
|
|
343
|
-
const
|
|
383
|
+
const mt = se(), ce = {
|
|
384
|
+
snappy: mt,
|
|
385
|
+
directional: mt,
|
|
386
|
+
"non-directional": le()
|
|
387
|
+
}, ut = {
|
|
344
388
|
spring: { stiffness: 280, damping: 30 }
|
|
345
|
-
},
|
|
346
|
-
function
|
|
389
|
+
}, X = 0.05;
|
|
390
|
+
function pe() {
|
|
347
391
|
return {
|
|
348
392
|
// Outgoing scales up slightly (1 → 1+s) while fading — recedes toward
|
|
349
393
|
// viewer feel, complementing the incoming page rising from below.
|
|
@@ -351,7 +395,7 @@ function Ut() {
|
|
|
351
395
|
willChange: "transform, opacity",
|
|
352
396
|
startStyle: {},
|
|
353
397
|
animate: (e) => ({
|
|
354
|
-
transform: `scale(${1 + e *
|
|
398
|
+
transform: `scale(${1 + e * X})`,
|
|
355
399
|
opacity: `${1 - e}`
|
|
356
400
|
})
|
|
357
401
|
},
|
|
@@ -359,88 +403,86 @@ function Ut() {
|
|
|
359
403
|
in: {
|
|
360
404
|
willChange: "transform, opacity",
|
|
361
405
|
startStyle: {
|
|
362
|
-
transform: `scale(${1 -
|
|
406
|
+
transform: `scale(${1 - X})`,
|
|
363
407
|
opacity: "0"
|
|
364
408
|
},
|
|
365
409
|
animate: (e) => ({
|
|
366
|
-
transform: `scale(${1 -
|
|
410
|
+
transform: `scale(${1 - X + e * X})`,
|
|
367
411
|
opacity: `${e}`
|
|
368
412
|
})
|
|
369
413
|
}
|
|
370
414
|
};
|
|
371
415
|
}
|
|
372
|
-
function
|
|
416
|
+
function fe() {
|
|
373
417
|
return {
|
|
374
|
-
outPhysics:
|
|
375
|
-
inPhysics:
|
|
418
|
+
outPhysics: ut,
|
|
419
|
+
inPhysics: ut,
|
|
376
420
|
// Both pages share the canvas (in-place scale+fade), so a strict
|
|
377
421
|
// fade-through-with-offset would feel disjointed. Run them together
|
|
378
422
|
// for a cleaner cross-fade.
|
|
379
423
|
composition: { mode: "parallel" },
|
|
380
|
-
build:
|
|
424
|
+
build: pe
|
|
381
425
|
};
|
|
382
426
|
}
|
|
383
|
-
const
|
|
384
|
-
x:
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
y: { snappy: Vt },
|
|
388
|
-
z: { snappy: Bt }
|
|
427
|
+
const de = fe(), he = {
|
|
428
|
+
x: Qt,
|
|
429
|
+
y: ce,
|
|
430
|
+
z: { snappy: de }
|
|
389
431
|
};
|
|
390
|
-
function
|
|
391
|
-
const n =
|
|
432
|
+
function ye(e, t) {
|
|
433
|
+
const n = he[e];
|
|
392
434
|
return n[t] ?? n.snappy;
|
|
393
435
|
}
|
|
394
|
-
const
|
|
395
|
-
function
|
|
436
|
+
const me = "x", ue = "snappy";
|
|
437
|
+
function gt(e, t) {
|
|
396
438
|
e.style.willChange = t.willChange, e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
|
|
397
439
|
for (const [n, s] of Object.entries(t.startStyle))
|
|
398
440
|
e.style[n] = s;
|
|
399
441
|
}
|
|
400
|
-
function
|
|
442
|
+
function ge(e) {
|
|
401
443
|
e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.contain = "", e.style.transform = "", e.style.opacity = "";
|
|
402
444
|
}
|
|
403
|
-
const
|
|
404
|
-
const t = e.direction ?? "forward", n = e.type ??
|
|
445
|
+
const be = (e = {}) => {
|
|
446
|
+
const t = e.direction ?? "forward", n = e.type ?? me, s = e.feel ?? ue, o = ye(n, s), r = o.build({ direction: t });
|
|
405
447
|
return {
|
|
406
|
-
prepare: ({ from:
|
|
407
|
-
|
|
408
|
-
}),
|
|
409
|
-
|
|
448
|
+
prepare: ({ from: i, to: c }) => (i.then((l) => {
|
|
449
|
+
gt(l, r.out), l.style.pointerEvents = "none";
|
|
450
|
+
}), c.then((l) => {
|
|
451
|
+
gt(l, r.in);
|
|
410
452
|
}), {}),
|
|
411
|
-
animation: ({ from:
|
|
412
|
-
const
|
|
413
|
-
element:
|
|
453
|
+
animation: ({ from: i, to: c }) => {
|
|
454
|
+
const l = new b({
|
|
455
|
+
element: i,
|
|
414
456
|
integrator: g.from(o.outPhysics),
|
|
415
|
-
style: (p) =>
|
|
457
|
+
style: (p) => r.out.animate(p)
|
|
416
458
|
}), a = new b({
|
|
417
|
-
element:
|
|
459
|
+
element: c,
|
|
418
460
|
integrator: g.from(o.inPhysics),
|
|
419
|
-
style: (p) =>
|
|
420
|
-
onComplete: () =>
|
|
461
|
+
style: (p) => r.in.animate(p),
|
|
462
|
+
onComplete: () => ge(c)
|
|
421
463
|
});
|
|
422
|
-
return new
|
|
464
|
+
return new C([l, a], o.composition);
|
|
423
465
|
}
|
|
424
466
|
};
|
|
425
467
|
};
|
|
426
|
-
function
|
|
427
|
-
return e !== "x" || t === "snappy" || n === "snappy" ? "snappy" : "fluid";
|
|
468
|
+
function we(e, t, n) {
|
|
469
|
+
return e === "y" ? t === "non-directional" ? "non-directional" : "directional" : e !== "x" || t === "snappy" || n === "snappy" ? "snappy" : "fluid";
|
|
428
470
|
}
|
|
429
|
-
function
|
|
430
|
-
const { paths: t } = e, n = e.type ?? "x", s = e.variant, o = e.feel,
|
|
431
|
-
return
|
|
471
|
+
function as(e) {
|
|
472
|
+
const { paths: t } = e, n = e.type ?? "x", s = e.variant, o = e.feel, r = we(n, s, o);
|
|
473
|
+
return pt(
|
|
432
474
|
t,
|
|
433
475
|
{ forward: "forward", backward: "backward" },
|
|
434
|
-
(
|
|
476
|
+
(i) => be({ type: n, direction: i, feel: r })
|
|
435
477
|
);
|
|
436
478
|
}
|
|
437
|
-
const
|
|
479
|
+
const Se = {
|
|
438
480
|
spring: { stiffness: 200, damping: 22 }
|
|
439
|
-
},
|
|
440
|
-
function
|
|
481
|
+
}, xe = 10, $e = "horizontal", Ee = "#000000";
|
|
482
|
+
function bt(e, t, n, s, o, r) {
|
|
441
483
|
window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
|
|
442
|
-
const
|
|
443
|
-
|
|
484
|
+
const c = document.createElement("div");
|
|
485
|
+
c.style.cssText = `
|
|
444
486
|
position: absolute;
|
|
445
487
|
top: 0;
|
|
446
488
|
left: 0;
|
|
@@ -450,57 +492,57 @@ function et(e, t, n, s, o, i) {
|
|
|
450
492
|
z-index: 9999;
|
|
451
493
|
overflow: hidden;
|
|
452
494
|
`;
|
|
453
|
-
const
|
|
495
|
+
const l = [];
|
|
454
496
|
for (let a = 0; a < t; a++) {
|
|
455
497
|
const p = document.createElement("div");
|
|
456
498
|
if (n === "horizontal") {
|
|
457
|
-
const
|
|
499
|
+
const f = 100 / t;
|
|
458
500
|
p.style.cssText = `
|
|
459
501
|
position: absolute;
|
|
460
|
-
top: ${
|
|
502
|
+
top: ${f * a}%;
|
|
461
503
|
left: 0;
|
|
462
504
|
width: 100%;
|
|
463
|
-
height: calc(${
|
|
505
|
+
height: calc(${f}% + 1px);
|
|
464
506
|
background: ${s};
|
|
465
507
|
transform: scaleX(${o === "hidden" ? 0 : 1});
|
|
466
|
-
transform-origin: ${
|
|
508
|
+
transform-origin: ${r} center;
|
|
467
509
|
will-change: transform;
|
|
468
510
|
`;
|
|
469
511
|
} else {
|
|
470
|
-
const
|
|
512
|
+
const f = 100 / t;
|
|
471
513
|
p.style.cssText = `
|
|
472
514
|
position: absolute;
|
|
473
515
|
top: 0;
|
|
474
|
-
left: ${
|
|
475
|
-
width: calc(${
|
|
516
|
+
left: ${f * a}%;
|
|
517
|
+
width: calc(${f}% + 1px);
|
|
476
518
|
height: 100%;
|
|
477
519
|
background: ${s};
|
|
478
520
|
transform: scaleY(${o === "hidden" ? 0 : 1});
|
|
479
|
-
transform-origin: ${
|
|
521
|
+
transform-origin: ${r === "left" ? "top" : "bottom"} center;
|
|
480
522
|
will-change: transform;
|
|
481
523
|
`;
|
|
482
524
|
}
|
|
483
|
-
|
|
525
|
+
l.push(p), c.appendChild(p);
|
|
484
526
|
}
|
|
485
|
-
return e.appendChild(
|
|
527
|
+
return e.appendChild(c), { container: c, blinds: l };
|
|
486
528
|
}
|
|
487
|
-
const
|
|
488
|
-
const t = e.blindCount ??
|
|
529
|
+
const Ce = (e = {}) => {
|
|
530
|
+
const t = e.blindCount ?? xe, n = e.direction ?? $e, s = e.blindColor ?? Ee, o = e.physics ?? Se;
|
|
489
531
|
return {
|
|
490
|
-
prepare: async ({ from:
|
|
491
|
-
const
|
|
492
|
-
|
|
493
|
-
const a =
|
|
494
|
-
|
|
532
|
+
prepare: async ({ from: r, to: i }) => {
|
|
533
|
+
const c = await r, l = await i;
|
|
534
|
+
c.style.zIndex = "1000";
|
|
535
|
+
const a = bt(
|
|
536
|
+
c,
|
|
495
537
|
t,
|
|
496
538
|
n,
|
|
497
539
|
s,
|
|
498
540
|
"hidden",
|
|
499
541
|
"left"
|
|
500
542
|
);
|
|
501
|
-
|
|
502
|
-
const p =
|
|
503
|
-
|
|
543
|
+
l.style.position = "relative", l.style.zIndex = "0";
|
|
544
|
+
const p = bt(
|
|
545
|
+
l,
|
|
504
546
|
t,
|
|
505
547
|
n,
|
|
506
548
|
s,
|
|
@@ -514,42 +556,42 @@ const ee = (e = {}) => {
|
|
|
514
556
|
toContainer: p.container
|
|
515
557
|
};
|
|
516
558
|
},
|
|
517
|
-
animation: ({ fromBlinds:
|
|
518
|
-
const a =
|
|
559
|
+
animation: ({ fromBlinds: r, fromContainer: i, toBlinds: c, toContainer: l }) => {
|
|
560
|
+
const a = r.map(
|
|
519
561
|
(m) => new b({
|
|
520
562
|
element: m,
|
|
521
563
|
integrator: g.from(o),
|
|
522
|
-
style: (
|
|
523
|
-
transform: n === "horizontal" ? `scaleX(${
|
|
564
|
+
style: (d) => ({
|
|
565
|
+
transform: n === "horizontal" ? `scaleX(${d})` : `scaleY(${d})`
|
|
524
566
|
})
|
|
525
567
|
})
|
|
526
|
-
), p =
|
|
527
|
-
(m,
|
|
568
|
+
), p = c.map(
|
|
569
|
+
(m, d) => new b({
|
|
528
570
|
element: m,
|
|
529
571
|
integrator: g.from(o),
|
|
530
|
-
style: (
|
|
531
|
-
transform: n === "horizontal" ? `scaleX(${
|
|
572
|
+
style: (y, u) => ({
|
|
573
|
+
transform: n === "horizontal" ? `scaleX(${u})` : `scaleY(${u})`
|
|
532
574
|
}),
|
|
533
|
-
onComplete:
|
|
534
|
-
|
|
575
|
+
onComplete: d === c.length - 1 ? () => {
|
|
576
|
+
l.remove(), i.remove();
|
|
535
577
|
} : void 0
|
|
536
578
|
})
|
|
537
|
-
),
|
|
538
|
-
return new
|
|
579
|
+
), f = new C(a, { mode: "parallel" }), h = new C(p, { mode: "parallel" });
|
|
580
|
+
return new C([f, h], { mode: "sequence" });
|
|
539
581
|
}
|
|
540
582
|
};
|
|
541
583
|
};
|
|
542
|
-
function
|
|
584
|
+
function ls(e) {
|
|
543
585
|
const { paths: t, type: n = "horizontal" } = e;
|
|
544
|
-
return
|
|
586
|
+
return _(
|
|
545
587
|
t,
|
|
546
|
-
() =>
|
|
588
|
+
() => Ce({ direction: n })
|
|
547
589
|
);
|
|
548
590
|
}
|
|
549
|
-
const
|
|
591
|
+
const Pe = {
|
|
550
592
|
spring: { stiffness: 200, damping: 20, doubleSpring: 0.7 }
|
|
551
|
-
},
|
|
552
|
-
function
|
|
593
|
+
}, Y = 0.5;
|
|
594
|
+
function ve(e) {
|
|
553
595
|
const t = e === "enter" ? -100 : 100, n = e === "enter" ? 100 : -100;
|
|
554
596
|
return {
|
|
555
597
|
out: {
|
|
@@ -557,32 +599,32 @@ function se(e) {
|
|
|
557
599
|
startStyle: {},
|
|
558
600
|
animate: (s) => ({
|
|
559
601
|
transform: `translate3d(${t * s}%, 0, 0)`,
|
|
560
|
-
opacity: `${
|
|
602
|
+
opacity: `${Y + (1 - Y) * (1 - s)}`
|
|
561
603
|
})
|
|
562
604
|
},
|
|
563
605
|
in: {
|
|
564
606
|
willChange: "transform, opacity",
|
|
565
607
|
startStyle: {
|
|
566
608
|
transform: `translate3d(${n}%, 0, 0)`,
|
|
567
|
-
opacity: `${
|
|
609
|
+
opacity: `${Y}`
|
|
568
610
|
},
|
|
569
611
|
animate: (s) => ({
|
|
570
612
|
transform: `translate3d(${n * (1 - s)}%, 0, 0)`,
|
|
571
|
-
opacity: `${
|
|
613
|
+
opacity: `${Y + (1 - Y) * s}`
|
|
572
614
|
})
|
|
573
615
|
}
|
|
574
616
|
};
|
|
575
617
|
}
|
|
576
|
-
function
|
|
618
|
+
function Te() {
|
|
577
619
|
return {
|
|
578
|
-
physics:
|
|
579
|
-
build:
|
|
620
|
+
physics: Pe,
|
|
621
|
+
build: ve
|
|
580
622
|
};
|
|
581
623
|
}
|
|
582
|
-
const
|
|
624
|
+
const _e = {
|
|
583
625
|
spring: { stiffness: 170, damping: 22 }
|
|
584
626
|
};
|
|
585
|
-
function
|
|
627
|
+
function Ie(e) {
|
|
586
628
|
const t = e === "enter" ? -20 : 100, n = e === "enter" ? 100 : -20;
|
|
587
629
|
return {
|
|
588
630
|
out: {
|
|
@@ -603,100 +645,100 @@ function ie(e) {
|
|
|
603
645
|
}
|
|
604
646
|
};
|
|
605
647
|
}
|
|
606
|
-
function
|
|
648
|
+
function Oe() {
|
|
607
649
|
return {
|
|
608
|
-
physics:
|
|
609
|
-
build:
|
|
650
|
+
physics: _e,
|
|
651
|
+
build: Ie
|
|
610
652
|
};
|
|
611
653
|
}
|
|
612
|
-
const
|
|
613
|
-
parallax:
|
|
614
|
-
crossfade:
|
|
615
|
-
},
|
|
616
|
-
function
|
|
654
|
+
const Ae = {
|
|
655
|
+
parallax: Oe(),
|
|
656
|
+
crossfade: Te()
|
|
657
|
+
}, De = "parallax";
|
|
658
|
+
function wt(e, t) {
|
|
617
659
|
e.style.willChange = t.willChange, e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
|
|
618
660
|
for (const [n, s] of Object.entries(t.startStyle))
|
|
619
661
|
e.style[n] = s;
|
|
620
662
|
}
|
|
621
|
-
const
|
|
622
|
-
const t = e.direction ?? "enter", n =
|
|
663
|
+
const Fe = (e = {}) => {
|
|
664
|
+
const t = e.direction ?? "enter", n = Ae[e.type ?? De], s = n.physics, o = n.build(t);
|
|
623
665
|
return {
|
|
624
|
-
prepare: ({ from:
|
|
625
|
-
|
|
626
|
-
}),
|
|
627
|
-
|
|
666
|
+
prepare: ({ from: r, to: i }) => (r.then((c) => {
|
|
667
|
+
wt(c, o.out), c.style.pointerEvents = "none", c.style.zIndex = t === "enter" ? "-1" : "100";
|
|
668
|
+
}), i.then((c) => {
|
|
669
|
+
wt(c, o.in);
|
|
628
670
|
}), {}),
|
|
629
|
-
animation: ({ from:
|
|
630
|
-
const
|
|
631
|
-
element:
|
|
671
|
+
animation: ({ from: r, to: i }) => {
|
|
672
|
+
const c = new b({
|
|
673
|
+
element: r,
|
|
632
674
|
integrator: g.from(s),
|
|
633
675
|
style: (a) => o.out.animate(a)
|
|
634
|
-
}),
|
|
635
|
-
element:
|
|
676
|
+
}), l = new b({
|
|
677
|
+
element: i,
|
|
636
678
|
integrator: g.from(s),
|
|
637
679
|
style: (a) => o.in.animate(a),
|
|
638
680
|
onComplete: () => {
|
|
639
|
-
|
|
681
|
+
i.style.willChange = "auto", i.style.backfaceVisibility = "", i.style.contain = "", i.style.transform = "", i.style.opacity = "";
|
|
640
682
|
}
|
|
641
683
|
});
|
|
642
|
-
return new
|
|
684
|
+
return new C([c, l], { mode: "parallel" });
|
|
643
685
|
}
|
|
644
686
|
};
|
|
645
687
|
};
|
|
646
|
-
function
|
|
688
|
+
function Le(e) {
|
|
647
689
|
return e === "slide" || e === "crossfade" ? "crossfade" : "parallax";
|
|
648
690
|
}
|
|
649
|
-
function
|
|
650
|
-
const { enter: t, exit: n } = e, s = e.type, o =
|
|
651
|
-
return
|
|
691
|
+
function cs(e) {
|
|
692
|
+
const { enter: t, exit: n } = e, s = e.type, o = Le(s);
|
|
693
|
+
return Dt(
|
|
652
694
|
{ enter: t, exit: n },
|
|
653
|
-
(
|
|
695
|
+
(r) => Fe({ direction: r, type: o })
|
|
654
696
|
);
|
|
655
697
|
}
|
|
656
|
-
const
|
|
698
|
+
const Ye = {
|
|
657
699
|
spring: { stiffness: 180, damping: 20, doubleSpring: !0 }
|
|
658
|
-
},
|
|
700
|
+
}, ke = {
|
|
659
701
|
spring: { stiffness: 170, damping: 20, doubleSpring: !0 }
|
|
660
|
-
},
|
|
661
|
-
const t = e.physics ??
|
|
702
|
+
}, He = (e = {}) => {
|
|
703
|
+
const t = e.physics ?? ke, n = e.physics ?? Ye;
|
|
662
704
|
return {
|
|
663
705
|
prepare: ({ to: s }) => (s.then((o) => {
|
|
664
706
|
o.style.opacity = "0", o.style.willChange = "opacity";
|
|
665
707
|
}), {}),
|
|
666
708
|
animation: ({ from: s, to: o }) => {
|
|
667
|
-
const
|
|
709
|
+
const r = new b({
|
|
668
710
|
element: s,
|
|
669
711
|
integrator: g.from(n),
|
|
670
712
|
// Default bounds (0, 1). `u` runs 1→0 as the animation moves
|
|
671
713
|
// forward, mapping opacity from fully visible to invisible.
|
|
672
|
-
style: (
|
|
714
|
+
style: (c, l) => ({ opacity: l }),
|
|
673
715
|
onComplete: () => {
|
|
674
716
|
s.style.willChange = "auto";
|
|
675
717
|
}
|
|
676
|
-
}),
|
|
718
|
+
}), i = new b({
|
|
677
719
|
element: o,
|
|
678
720
|
integrator: g.from(t),
|
|
679
|
-
style: (
|
|
721
|
+
style: (c) => ({ opacity: c }),
|
|
680
722
|
onComplete: () => {
|
|
681
723
|
o.style.willChange = "auto", o.style.opacity = "";
|
|
682
724
|
}
|
|
683
725
|
});
|
|
684
|
-
return new
|
|
726
|
+
return new C([r, i], { mode: "sequence" });
|
|
685
727
|
}
|
|
686
728
|
};
|
|
687
729
|
};
|
|
688
|
-
function
|
|
730
|
+
function ps(e) {
|
|
689
731
|
const { paths: t } = e;
|
|
690
|
-
return
|
|
732
|
+
return _(t, () => He());
|
|
691
733
|
}
|
|
692
|
-
function
|
|
693
|
-
function n(
|
|
694
|
-
let
|
|
695
|
-
const
|
|
696
|
-
let p =
|
|
734
|
+
function k(e, t) {
|
|
735
|
+
function n(r) {
|
|
736
|
+
let i = 0, c = 0;
|
|
737
|
+
const l = r.offsetWidth, a = r.offsetHeight;
|
|
738
|
+
let p = r;
|
|
697
739
|
for (; p; )
|
|
698
|
-
|
|
699
|
-
return
|
|
740
|
+
i += p.offsetTop, c += p.offsetLeft, p = p.offsetParent;
|
|
741
|
+
return i -= window.scrollY, c -= window.scrollX, { top: i, left: c, width: l, height: a };
|
|
700
742
|
}
|
|
701
743
|
const s = n(e), o = n(t);
|
|
702
744
|
return new DOMRect(
|
|
@@ -706,8 +748,8 @@ function T(e, t) {
|
|
|
706
748
|
o.height
|
|
707
749
|
);
|
|
708
750
|
}
|
|
709
|
-
function
|
|
710
|
-
const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ?
|
|
751
|
+
function H(e, t) {
|
|
752
|
+
const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ? k(n, s).top : 0;
|
|
711
753
|
return {
|
|
712
754
|
top: e[t].scroll.y,
|
|
713
755
|
left: 0,
|
|
@@ -715,19 +757,19 @@ function _(e, t) {
|
|
|
715
757
|
height: n.clientHeight - o
|
|
716
758
|
};
|
|
717
759
|
}
|
|
718
|
-
const
|
|
760
|
+
const et = {
|
|
719
761
|
scaleDown: { stiffness: 20, damping: 7 },
|
|
720
762
|
translate: { stiffness: 15, damping: 7 },
|
|
721
763
|
scaleUp: { stiffness: 20, damping: 7 }
|
|
722
|
-
},
|
|
764
|
+
}, A = {
|
|
723
765
|
scaleDown: 0,
|
|
724
766
|
translate: 0.2,
|
|
725
767
|
scaleUp: 0.8
|
|
726
|
-
},
|
|
727
|
-
function
|
|
728
|
-
const { items: t, from: n, to: s, recordFrame: o } = e,
|
|
768
|
+
}, Me = 0.8, Ue = "white", St = 1e3 / 60, ze = 600;
|
|
769
|
+
function Xe(e) {
|
|
770
|
+
const { items: t, from: n, to: s, recordFrame: o } = e, r = St / 1e3, i = Math.abs(s - n), c = t.map((a) => ({
|
|
729
771
|
item: a,
|
|
730
|
-
integrator: new
|
|
772
|
+
integrator: new B({
|
|
731
773
|
stiffness: a.spring.stiffness,
|
|
732
774
|
damping: a.spring.damping
|
|
733
775
|
}),
|
|
@@ -736,121 +778,121 @@ function be(e) {
|
|
|
736
778
|
settled: !1,
|
|
737
779
|
settleTime: 0
|
|
738
780
|
}));
|
|
739
|
-
for (let a = 0; a <
|
|
740
|
-
(a === 0 ||
|
|
781
|
+
for (let a = 0; a < c.length; a++)
|
|
782
|
+
(a === 0 || c[a].item.offset === 0) && (c[a].started = !0);
|
|
741
783
|
o(0);
|
|
742
|
-
let
|
|
743
|
-
for (let a = 1; a <=
|
|
744
|
-
const p = a *
|
|
745
|
-
|
|
746
|
-
for (const
|
|
747
|
-
!
|
|
748
|
-
for (let
|
|
749
|
-
const
|
|
750
|
-
if (
|
|
751
|
-
const m =
|
|
784
|
+
let l = 0;
|
|
785
|
+
for (let a = 1; a <= ze; a++) {
|
|
786
|
+
const p = a * St;
|
|
787
|
+
l = p;
|
|
788
|
+
for (const f of c)
|
|
789
|
+
!f.started || f.settled || (f.state = f.integrator.step(f.state, s, r), f.integrator.isSettled(f.state, s) ? (f.settleTime += r, f.settleTime >= zt && (f.state = { position: s, velocity: 0 }, f.settled = !0)) : f.settleTime = 0, f.item.tick(f.state.position));
|
|
790
|
+
for (let f = 1; f < c.length; f++) {
|
|
791
|
+
const h = c[f];
|
|
792
|
+
if (h.started) continue;
|
|
793
|
+
const m = c[f - 1];
|
|
752
794
|
if (!m.started) continue;
|
|
753
|
-
(
|
|
795
|
+
(i === 0 ? 1 : Math.abs(m.state.position - n) / i) >= h.item.offset && (h.started = !0);
|
|
754
796
|
}
|
|
755
|
-
if (o(p),
|
|
797
|
+
if (o(p), c.every((f) => f.settled)) return p;
|
|
756
798
|
}
|
|
757
|
-
return
|
|
799
|
+
return l;
|
|
758
800
|
}
|
|
759
|
-
function
|
|
801
|
+
function nt(e, t) {
|
|
760
802
|
return e != null && e.spring ? {
|
|
761
803
|
stiffness: e.spring.stiffness,
|
|
762
804
|
damping: e.spring.damping
|
|
763
805
|
} : t;
|
|
764
806
|
}
|
|
765
|
-
function
|
|
766
|
-
const { rect: t, scale: n, direction: s, override: o } = e,
|
|
807
|
+
function xt(e) {
|
|
808
|
+
const { rect: t, scale: n, direction: s, override: o } = e, r = s === "out" ? { scale: 1, translateY: -t.top } : { scale: n, translateY: -t.top + t.height }, i = nt(o, et.scaleDown), c = nt(o, et.translate), l = nt(o, et.scaleUp), a = s === "out" ? 1 : 0, p = s === "out" ? 0 : 1, f = s === "out" ? [
|
|
767
809
|
{
|
|
768
|
-
spring:
|
|
769
|
-
offset:
|
|
770
|
-
tick: (
|
|
771
|
-
const
|
|
772
|
-
|
|
810
|
+
spring: i,
|
|
811
|
+
offset: A.scaleDown,
|
|
812
|
+
tick: (d) => {
|
|
813
|
+
const y = 1 - d;
|
|
814
|
+
r.scale = 1 - (1 - n) * y;
|
|
773
815
|
}
|
|
774
816
|
},
|
|
775
817
|
{
|
|
776
|
-
spring:
|
|
777
|
-
offset:
|
|
778
|
-
tick: (
|
|
779
|
-
const
|
|
780
|
-
|
|
818
|
+
spring: c,
|
|
819
|
+
offset: A.translate,
|
|
820
|
+
tick: (d) => {
|
|
821
|
+
const y = 1 - d;
|
|
822
|
+
r.translateY = -t.top - t.height * y;
|
|
781
823
|
}
|
|
782
824
|
},
|
|
783
825
|
{
|
|
784
|
-
spring:
|
|
785
|
-
offset:
|
|
786
|
-
tick: (
|
|
787
|
-
const
|
|
788
|
-
|
|
826
|
+
spring: l,
|
|
827
|
+
offset: A.scaleUp,
|
|
828
|
+
tick: (d) => {
|
|
829
|
+
const y = 1 - d;
|
|
830
|
+
r.scale = n + (1 - n) * y;
|
|
789
831
|
}
|
|
790
832
|
}
|
|
791
833
|
] : [
|
|
792
834
|
{
|
|
793
|
-
spring:
|
|
794
|
-
offset:
|
|
795
|
-
tick: (
|
|
796
|
-
|
|
835
|
+
spring: i,
|
|
836
|
+
offset: A.scaleDown,
|
|
837
|
+
tick: (d) => {
|
|
838
|
+
r.scale = 1 - (1 - n) * d;
|
|
797
839
|
}
|
|
798
840
|
},
|
|
799
841
|
{
|
|
800
|
-
spring:
|
|
801
|
-
offset:
|
|
802
|
-
tick: (
|
|
803
|
-
|
|
842
|
+
spring: c,
|
|
843
|
+
offset: A.translate,
|
|
844
|
+
tick: (d) => {
|
|
845
|
+
r.translateY = -t.top + t.height * (1 - d);
|
|
804
846
|
}
|
|
805
847
|
},
|
|
806
848
|
{
|
|
807
|
-
spring:
|
|
808
|
-
offset:
|
|
809
|
-
tick: (
|
|
810
|
-
|
|
849
|
+
spring: l,
|
|
850
|
+
offset: A.scaleUp,
|
|
851
|
+
tick: (d) => {
|
|
852
|
+
r.scale = n + (1 - n) * d;
|
|
811
853
|
}
|
|
812
854
|
}
|
|
813
|
-
],
|
|
814
|
-
items:
|
|
855
|
+
], h = [], m = Xe({
|
|
856
|
+
items: f,
|
|
815
857
|
from: a,
|
|
816
858
|
to: p,
|
|
817
|
-
recordFrame: (
|
|
818
|
-
time:
|
|
819
|
-
scale:
|
|
820
|
-
translateY:
|
|
859
|
+
recordFrame: (d) => h.push({
|
|
860
|
+
time: d,
|
|
861
|
+
scale: r.scale,
|
|
862
|
+
translateY: r.translateY
|
|
821
863
|
})
|
|
822
864
|
});
|
|
823
|
-
return { snapshots:
|
|
865
|
+
return { snapshots: h, totalDuration: m };
|
|
824
866
|
}
|
|
825
|
-
function
|
|
867
|
+
function Ne(e, t) {
|
|
826
868
|
if (e.length === 0) return { time: 0, scale: 1, translateY: 0 };
|
|
827
869
|
if (e.length === 1 || t <= 0) return e[0];
|
|
828
870
|
if (t >= 1) return e[e.length - 1];
|
|
829
871
|
const n = t * (e.length - 1), s = Math.floor(n), o = Math.ceil(n);
|
|
830
872
|
if (s === o) return e[s];
|
|
831
|
-
const
|
|
873
|
+
const r = e[s], i = e[o], c = n - s;
|
|
832
874
|
return {
|
|
833
|
-
time:
|
|
834
|
-
scale:
|
|
835
|
-
translateY:
|
|
875
|
+
time: r.time + (i.time - r.time) * c,
|
|
876
|
+
scale: r.scale + (i.scale - r.scale) * c,
|
|
877
|
+
translateY: r.translateY + (i.translateY - r.translateY) * c
|
|
836
878
|
};
|
|
837
879
|
}
|
|
838
|
-
const
|
|
880
|
+
const Ve = [
|
|
839
881
|
[1, 1],
|
|
840
882
|
[-1, 1],
|
|
841
883
|
[1, -1],
|
|
842
884
|
[-1, -1]
|
|
843
885
|
];
|
|
844
|
-
function
|
|
845
|
-
const o = (
|
|
846
|
-
const
|
|
847
|
-
Object.assign(
|
|
886
|
+
function Be(e, t) {
|
|
887
|
+
const o = (r, i, c) => {
|
|
888
|
+
const l = document.createElement("div");
|
|
889
|
+
Object.assign(l.style, {
|
|
848
890
|
position: "fixed",
|
|
849
891
|
pointerEvents: "none",
|
|
850
892
|
zIndex: "9999",
|
|
851
893
|
width: "15px",
|
|
852
894
|
height: "15px",
|
|
853
|
-
...
|
|
895
|
+
...r
|
|
854
896
|
});
|
|
855
897
|
const a = document.createElement("div");
|
|
856
898
|
Object.assign(a.style, {
|
|
@@ -858,8 +900,8 @@ function $e(e, t) {
|
|
|
858
900
|
width: "15px",
|
|
859
901
|
height: "1px",
|
|
860
902
|
backgroundColor: e,
|
|
861
|
-
[
|
|
862
|
-
[
|
|
903
|
+
[c]: "0",
|
|
904
|
+
[i]: "0"
|
|
863
905
|
});
|
|
864
906
|
const p = document.createElement("div");
|
|
865
907
|
return Object.assign(p.style, {
|
|
@@ -867,9 +909,9 @@ function $e(e, t) {
|
|
|
867
909
|
width: "1px",
|
|
868
910
|
height: "15px",
|
|
869
911
|
backgroundColor: e,
|
|
870
|
-
[
|
|
871
|
-
[
|
|
872
|
-
}),
|
|
912
|
+
[c]: "0",
|
|
913
|
+
[i]: "0"
|
|
914
|
+
}), l.appendChild(a), l.appendChild(p), l;
|
|
873
915
|
};
|
|
874
916
|
return {
|
|
875
917
|
topLeft: o(
|
|
@@ -906,11 +948,11 @@ function $e(e, t) {
|
|
|
906
948
|
)
|
|
907
949
|
};
|
|
908
950
|
}
|
|
909
|
-
function
|
|
951
|
+
function $t(e, t) {
|
|
910
952
|
const n = t.left + t.width / 2, s = t.top + t.height / 2;
|
|
911
953
|
e.style.transformOrigin = `${n}px ${s}px`;
|
|
912
954
|
}
|
|
913
|
-
function
|
|
955
|
+
function Et(e, t) {
|
|
914
956
|
e.style.clipPath = `polygon(
|
|
915
957
|
${t.left}px ${t.top}px,
|
|
916
958
|
${t.left + t.width}px ${t.top}px,
|
|
@@ -918,232 +960,430 @@ function it(e, t) {
|
|
|
918
960
|
${t.left}px ${t.top + t.height}px
|
|
919
961
|
)`;
|
|
920
962
|
}
|
|
921
|
-
function
|
|
922
|
-
const
|
|
963
|
+
function st(e, t, n, s, o) {
|
|
964
|
+
const r = n / 1e3;
|
|
923
965
|
return new b({
|
|
924
966
|
element: e,
|
|
925
|
-
integrator: new
|
|
967
|
+
integrator: new Rt({ durationSec: r }),
|
|
926
968
|
lowerBound: 0,
|
|
927
969
|
upperBound: 1,
|
|
928
|
-
style: (
|
|
970
|
+
style: (i) => s(Ne(t, i)),
|
|
929
971
|
onComplete: o
|
|
930
972
|
});
|
|
931
973
|
}
|
|
932
|
-
const
|
|
974
|
+
const We = (e = {}) => {
|
|
933
975
|
var o;
|
|
934
|
-
const t = ((o = e.border) == null ? void 0 : o.color) ??
|
|
976
|
+
const t = ((o = e.border) == null ? void 0 : o.color) ?? Ue, n = Me, s = e.physics;
|
|
935
977
|
return {
|
|
936
|
-
prepare: ({ from:
|
|
937
|
-
const
|
|
938
|
-
...
|
|
978
|
+
prepare: ({ from: r, to: i, context: c }) => {
|
|
979
|
+
const l = H(c, "from"), a = H(c, "to"), p = k(document.body, c.positionedParent), f = Be(t, {
|
|
980
|
+
...l,
|
|
939
981
|
top: p.top
|
|
940
982
|
});
|
|
941
|
-
for (const
|
|
983
|
+
for (const h of [
|
|
942
984
|
"topLeft",
|
|
943
985
|
"topRight",
|
|
944
986
|
"bottomLeft",
|
|
945
987
|
"bottomRight"
|
|
946
988
|
])
|
|
947
|
-
|
|
948
|
-
return
|
|
949
|
-
|
|
950
|
-
}),
|
|
951
|
-
|
|
952
|
-
}), { borders:
|
|
989
|
+
c.positionedParent.appendChild(f[h]);
|
|
990
|
+
return r.then((h) => {
|
|
991
|
+
$t(h, l), Et(h, l), h.style.transform = `translateY(${-l.top}px)`;
|
|
992
|
+
}), i.then((h) => {
|
|
993
|
+
$t(h, a), Et(h, a), h.style.transform = `translateY(${-a.top + a.height}px) scale(${n})`;
|
|
994
|
+
}), { borders: f, fromRect: l, toRect: a };
|
|
953
995
|
},
|
|
954
|
-
animation: ({ from:
|
|
955
|
-
const
|
|
996
|
+
animation: ({ from: r, to: i, context: c, borders: l, fromRect: a, toRect: p }) => {
|
|
997
|
+
const f = xt({
|
|
956
998
|
rect: a,
|
|
957
999
|
scale: n,
|
|
958
1000
|
direction: "out",
|
|
959
1001
|
override: s
|
|
960
|
-
}),
|
|
1002
|
+
}), h = xt({
|
|
961
1003
|
rect: p,
|
|
962
1004
|
scale: n,
|
|
963
1005
|
direction: "in",
|
|
964
1006
|
override: s
|
|
965
|
-
}), m =
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
(
|
|
970
|
-
transform: `translateY(${
|
|
1007
|
+
}), m = st(
|
|
1008
|
+
r,
|
|
1009
|
+
f.snapshots,
|
|
1010
|
+
f.totalDuration,
|
|
1011
|
+
(w) => ({
|
|
1012
|
+
transform: `translateY(${w.translateY}px) scale(${w.scale})`
|
|
971
1013
|
}),
|
|
972
1014
|
() => {
|
|
973
|
-
|
|
1015
|
+
r.style.clipPath = "", r.style.transformOrigin = "";
|
|
974
1016
|
}
|
|
975
|
-
),
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
(
|
|
980
|
-
transform: `translateY(${
|
|
1017
|
+
), d = st(
|
|
1018
|
+
i,
|
|
1019
|
+
h.snapshots,
|
|
1020
|
+
h.totalDuration,
|
|
1021
|
+
(w) => ({
|
|
1022
|
+
transform: `translateY(${w.translateY}px) scale(${w.scale})`
|
|
981
1023
|
}),
|
|
982
1024
|
() => {
|
|
983
|
-
|
|
1025
|
+
i.style.clipPath = "", i.style.transformOrigin = "", i.style.transform = "";
|
|
984
1026
|
}
|
|
985
|
-
),
|
|
986
|
-
const
|
|
987
|
-
return
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
(
|
|
992
|
-
const
|
|
993
|
-
return { transform: `translate(${
|
|
1027
|
+
), y = Ve.map(([w, E], P) => {
|
|
1028
|
+
const D = ["topLeft", "topRight", "bottomLeft", "bottomRight"][P];
|
|
1029
|
+
return st(
|
|
1030
|
+
l[D],
|
|
1031
|
+
f.snapshots,
|
|
1032
|
+
f.totalDuration,
|
|
1033
|
+
(I) => {
|
|
1034
|
+
const F = (a.width - a.width * I.scale) / 2 * 0.7 * w, O = (a.height - a.height * I.scale) / 2 * 0.7 * E;
|
|
1035
|
+
return { transform: `translate(${F}px, ${O}px)` };
|
|
994
1036
|
}
|
|
995
1037
|
);
|
|
996
|
-
}),
|
|
1038
|
+
}), u = new C([m, d, ...y], {
|
|
997
1039
|
mode: "parallel"
|
|
998
|
-
}),
|
|
999
|
-
return
|
|
1000
|
-
|
|
1001
|
-
const
|
|
1002
|
-
for (const
|
|
1040
|
+
}), S = u.onComplete;
|
|
1041
|
+
return u.onComplete = () => {
|
|
1042
|
+
S == null || S();
|
|
1043
|
+
const w = c.positionedParent;
|
|
1044
|
+
for (const E of [
|
|
1003
1045
|
"topLeft",
|
|
1004
1046
|
"topRight",
|
|
1005
1047
|
"bottomLeft",
|
|
1006
1048
|
"bottomRight"
|
|
1007
1049
|
]) {
|
|
1008
|
-
const
|
|
1009
|
-
|
|
1050
|
+
const P = l[E];
|
|
1051
|
+
P.parentElement === w && w.removeChild(P);
|
|
1010
1052
|
}
|
|
1011
|
-
},
|
|
1053
|
+
}, u;
|
|
1012
1054
|
}
|
|
1013
1055
|
};
|
|
1014
1056
|
};
|
|
1015
|
-
function
|
|
1057
|
+
function fs(e) {
|
|
1016
1058
|
const { paths: t, options: n } = e, s = (n == null ? void 0 : n.borderColor) !== void 0 ? { border: { color: n.borderColor } } : void 0;
|
|
1017
|
-
return
|
|
1059
|
+
return _(t, () => We(s));
|
|
1018
1060
|
}
|
|
1019
|
-
const
|
|
1061
|
+
const Ct = "data-hero-enter-key", Pt = "data-hero-exit-key", ot = "data-hero-key";
|
|
1062
|
+
class Re {
|
|
1063
|
+
prepare(t) {
|
|
1064
|
+
t.from.then((n) => {
|
|
1065
|
+
n.style.opacity = "0";
|
|
1066
|
+
});
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
1069
|
+
const Ze = () => new Re();
|
|
1070
|
+
class qe {
|
|
1071
|
+
contribute(t) {
|
|
1072
|
+
const { from: n, to: s, physics: o, onComplete: r } = t, i = n.style.opacity, c = s.style.opacity, l = n.style.willChange, a = s.style.willChange;
|
|
1073
|
+
return s.style.opacity = "0", n.style.willChange = "opacity", s.style.willChange = "opacity", r(() => {
|
|
1074
|
+
n.style.opacity = i, s.style.opacity = c, n.style.willChange = l, s.style.willChange = a;
|
|
1075
|
+
}), [
|
|
1076
|
+
new b({
|
|
1077
|
+
element: n,
|
|
1078
|
+
integrator: g.from(o),
|
|
1079
|
+
style: (p, f) => ({ opacity: f })
|
|
1080
|
+
}),
|
|
1081
|
+
new b({
|
|
1082
|
+
element: s,
|
|
1083
|
+
integrator: g.from(o),
|
|
1084
|
+
style: (p) => ({ opacity: p })
|
|
1085
|
+
})
|
|
1086
|
+
];
|
|
1087
|
+
}
|
|
1088
|
+
}
|
|
1089
|
+
const je = () => new qe(), Ke = {
|
|
1090
|
+
static: Ze,
|
|
1091
|
+
fade: je
|
|
1092
|
+
}, Ge = {
|
|
1020
1093
|
spring: { stiffness: 300, damping: 30 }
|
|
1094
|
+
}, Je = 700, Qe = "data-hero-aspect-ratio";
|
|
1095
|
+
function tn(e) {
|
|
1096
|
+
if (!e) return null;
|
|
1097
|
+
if (e.includes("/")) {
|
|
1098
|
+
const [n, s] = e.split("/"), o = parseFloat(n ?? ""), r = parseFloat(s ?? "");
|
|
1099
|
+
return !Number.isFinite(o) || !Number.isFinite(r) || r === 0 ? null : o / r;
|
|
1100
|
+
}
|
|
1101
|
+
const t = parseFloat(e);
|
|
1102
|
+
return Number.isFinite(t) && t > 0 ? t : null;
|
|
1103
|
+
}
|
|
1104
|
+
function W(e, t) {
|
|
1105
|
+
const n = k(e, t), s = tn(t.getAttribute(Qe));
|
|
1106
|
+
if (s === null)
|
|
1107
|
+
return {
|
|
1108
|
+
visible: n,
|
|
1109
|
+
bbox: n,
|
|
1110
|
+
letterbox: { top: 0, right: 0, bottom: 0, left: 0 }
|
|
1111
|
+
};
|
|
1112
|
+
const o = n.width / n.height;
|
|
1113
|
+
let r, i;
|
|
1114
|
+
o > s ? (i = n.height, r = i * s) : (r = n.width, i = r / s);
|
|
1115
|
+
const c = (n.width - r) / 2, l = (n.height - i) / 2;
|
|
1116
|
+
return {
|
|
1117
|
+
visible: {
|
|
1118
|
+
left: n.left + c,
|
|
1119
|
+
top: n.top + l,
|
|
1120
|
+
width: r,
|
|
1121
|
+
height: i
|
|
1122
|
+
},
|
|
1123
|
+
bbox: n,
|
|
1124
|
+
letterbox: { top: l, right: c, bottom: l, left: c }
|
|
1125
|
+
};
|
|
1126
|
+
}
|
|
1127
|
+
function N(e, t) {
|
|
1128
|
+
const n = /* @__PURE__ */ new Map(), s = e.querySelectorAll(`[${t}]`);
|
|
1129
|
+
for (const o of Array.from(s)) {
|
|
1130
|
+
const r = o.getAttribute(t);
|
|
1131
|
+
r && (n.has(r) || n.set(r, o));
|
|
1132
|
+
}
|
|
1133
|
+
return n;
|
|
1134
|
+
}
|
|
1135
|
+
function en(e, t) {
|
|
1136
|
+
const n = [], s = N(t, Ct), o = N(e, Pt);
|
|
1137
|
+
for (const [c, l] of s) {
|
|
1138
|
+
const a = o.get(c);
|
|
1139
|
+
a && n.push({ key: c, fromEl: a, toEl: l });
|
|
1140
|
+
}
|
|
1141
|
+
const r = N(e, Ct), i = N(t, Pt);
|
|
1142
|
+
for (const [c, l] of r) {
|
|
1143
|
+
const a = i.get(c);
|
|
1144
|
+
a && n.push({ key: c, fromEl: l, toEl: a });
|
|
1145
|
+
}
|
|
1146
|
+
return n;
|
|
1147
|
+
}
|
|
1148
|
+
function nn(e, t) {
|
|
1149
|
+
const n = [], s = Array.from(
|
|
1150
|
+
t.querySelectorAll(`[${ot}]`)
|
|
1151
|
+
);
|
|
1152
|
+
for (const o of s) {
|
|
1153
|
+
const r = o.getAttribute(ot);
|
|
1154
|
+
if (!r) continue;
|
|
1155
|
+
const i = e.querySelector(
|
|
1156
|
+
`[${ot}="${r}"]`
|
|
1157
|
+
);
|
|
1158
|
+
i && n.push({ key: r, fromEl: i, toEl: o });
|
|
1159
|
+
}
|
|
1160
|
+
return n;
|
|
1161
|
+
}
|
|
1162
|
+
function sn(e, t) {
|
|
1163
|
+
const n = en(e, t);
|
|
1164
|
+
return n.length > 0 ? n : nn(e, t);
|
|
1165
|
+
}
|
|
1166
|
+
let on = class {
|
|
1167
|
+
contribute(t) {
|
|
1168
|
+
const {
|
|
1169
|
+
from: n,
|
|
1170
|
+
to: s,
|
|
1171
|
+
resolved: o,
|
|
1172
|
+
physics: r,
|
|
1173
|
+
scrollOffset: i,
|
|
1174
|
+
maxDistance: c,
|
|
1175
|
+
onComplete: l
|
|
1176
|
+
} = t, a = [];
|
|
1177
|
+
for (const { fromEl: p, toEl: f } of o.pairs) {
|
|
1178
|
+
const h = W(n, p), m = W(s, f), d = h.visible, y = m.visible, u = m.bbox, S = m.letterbox, w = Math.max(
|
|
1179
|
+
d.width / y.width,
|
|
1180
|
+
d.height / y.height
|
|
1181
|
+
), E = d.left + d.width / 2, P = d.top + d.height / 2, D = u.left + u.width / 2, I = u.top + u.height / 2, F = E - D - i.x, O = P - I - i.y;
|
|
1182
|
+
if (Math.abs(O) > c) continue;
|
|
1183
|
+
const M = d.width / w, U = d.height / w, x = Math.max(
|
|
1184
|
+
0,
|
|
1185
|
+
(y.width - M) / 2
|
|
1186
|
+
), L = Math.max(
|
|
1187
|
+
0,
|
|
1188
|
+
(y.height - U) / 2
|
|
1189
|
+
), z = f.style.transform, R = f.style.position, Z = f.style.transformOrigin, q = f.style.clipPath, v = f.style.zIndex, j = f.style.willChange;
|
|
1190
|
+
f.style.position = "relative", f.style.transformOrigin = "center center", f.style.zIndex = "1000", f.style.willChange = "transform, clip-path", l(() => {
|
|
1191
|
+
f.style.transform = z, f.style.position = R, f.style.transformOrigin = Z, f.style.clipPath = q, f.style.zIndex = v, f.style.willChange = j;
|
|
1192
|
+
}), a.push(
|
|
1193
|
+
new b({
|
|
1194
|
+
element: f,
|
|
1195
|
+
integrator: g.from(r),
|
|
1196
|
+
style: (K, T) => {
|
|
1197
|
+
const G = T * F, J = T * O, Q = K + T * w, tt = S.top + T * L, Yt = S.right + T * x, kt = S.bottom + T * L, Ht = S.left + T * x;
|
|
1198
|
+
return {
|
|
1199
|
+
transform: `translate(${G}px, ${J}px) scale(${Q})`,
|
|
1200
|
+
clipPath: `inset(${tt}px ${Yt}px ${kt}px ${Ht}px)`
|
|
1201
|
+
};
|
|
1202
|
+
}
|
|
1203
|
+
})
|
|
1204
|
+
);
|
|
1205
|
+
}
|
|
1206
|
+
return a;
|
|
1207
|
+
}
|
|
1021
1208
|
};
|
|
1022
|
-
|
|
1023
|
-
|
|
1209
|
+
class rn {
|
|
1210
|
+
contribute(t) {
|
|
1211
|
+
const { resolved: n, physics: s, positionedParent: o, maxDistance: r, onComplete: i } = t, c = [];
|
|
1212
|
+
for (const { fromEl: l, toEl: a } of n.pairs) {
|
|
1213
|
+
const p = W(o, l), f = W(o, a), h = p.visible, m = f.visible, d = f.bbox, y = f.letterbox;
|
|
1214
|
+
if (h.width === 0 || h.height === 0 || m.width === 0 || m.height === 0)
|
|
1215
|
+
continue;
|
|
1216
|
+
const u = Math.max(
|
|
1217
|
+
h.width / m.width,
|
|
1218
|
+
h.height / m.height
|
|
1219
|
+
), S = h.left + h.width / 2, w = h.top + h.height / 2, E = d.left + d.width / 2, P = d.top + d.height / 2, D = S - E, I = w - P;
|
|
1220
|
+
if (Math.abs(I) > r) continue;
|
|
1221
|
+
const F = h.width / u, O = h.height / u, M = Math.max(
|
|
1222
|
+
0,
|
|
1223
|
+
(m.width - F) / 2
|
|
1224
|
+
), U = Math.max(
|
|
1225
|
+
0,
|
|
1226
|
+
(m.height - O) / 2
|
|
1227
|
+
), x = a.cloneNode(!0);
|
|
1228
|
+
x.style.position = "absolute", x.style.left = `${d.left}px`, x.style.top = `${d.top}px`, x.style.width = `${d.width}px`, x.style.height = `${d.height}px`, x.style.margin = "0", x.style.transformOrigin = "center center", x.style.zIndex = "1000", x.style.willChange = "transform, clip-path", x.style.pointerEvents = "none", x.style.maxWidth = "none", x.style.maxHeight = "none";
|
|
1229
|
+
const L = (q, v) => {
|
|
1230
|
+
const j = v * D, K = v * I, T = q + v * u, G = y.top + v * U, J = y.right + v * M, Q = y.bottom + v * U, tt = y.left + v * M;
|
|
1231
|
+
return {
|
|
1232
|
+
transform: `translate(${j}px, ${K}px) scale(${T})`,
|
|
1233
|
+
clipPath: `inset(${G}px ${J}px ${Q}px ${tt}px)`
|
|
1234
|
+
};
|
|
1235
|
+
}, z = L(0, 1);
|
|
1236
|
+
x.style.transform = z.transform, x.style.clipPath = z.clipPath, o.appendChild(x);
|
|
1237
|
+
const R = l.style.opacity, Z = a.style.opacity;
|
|
1238
|
+
l.style.opacity = "0", a.style.opacity = "0", i(() => {
|
|
1239
|
+
l.style.opacity = R, a.style.opacity = Z, x.parentElement && x.parentElement.removeChild(x);
|
|
1240
|
+
}), c.push(
|
|
1241
|
+
new b({
|
|
1242
|
+
element: x,
|
|
1243
|
+
integrator: g.from(s),
|
|
1244
|
+
style: L
|
|
1245
|
+
})
|
|
1246
|
+
);
|
|
1247
|
+
}
|
|
1248
|
+
return c;
|
|
1249
|
+
}
|
|
1024
1250
|
}
|
|
1025
|
-
const
|
|
1026
|
-
|
|
1251
|
+
const an = {
|
|
1252
|
+
static: () => new on(),
|
|
1253
|
+
fade: () => new rn()
|
|
1254
|
+
};
|
|
1255
|
+
function ln(e) {
|
|
1256
|
+
return [
|
|
1257
|
+
an[e.type](),
|
|
1258
|
+
Ke[e.type]()
|
|
1259
|
+
];
|
|
1260
|
+
}
|
|
1261
|
+
const cn = (e) => {
|
|
1262
|
+
const t = ln(e), n = Ge, s = Je;
|
|
1027
1263
|
return {
|
|
1028
|
-
prepare: (
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
}
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
const u = new E(p, {
|
|
1064
|
-
mode: "parallel"
|
|
1065
|
-
}), m = u.onComplete;
|
|
1066
|
-
return u.onComplete = () => {
|
|
1067
|
-
for (const f of d) f();
|
|
1264
|
+
prepare: (o) => {
|
|
1265
|
+
var c;
|
|
1266
|
+
const r = Promise.all([
|
|
1267
|
+
o.from,
|
|
1268
|
+
o.to
|
|
1269
|
+
]).then(([l, a]) => ({ pairs: sn(l, a) })), i = {
|
|
1270
|
+
from: o.from,
|
|
1271
|
+
to: o.to,
|
|
1272
|
+
resolved: r
|
|
1273
|
+
};
|
|
1274
|
+
for (const l of t)
|
|
1275
|
+
(c = l.prepare) == null || c.call(l, i);
|
|
1276
|
+
return r.then((l) => ({ resolved: l }));
|
|
1277
|
+
},
|
|
1278
|
+
animation: ({ from: o, to: r, context: i, resolved: c }) => {
|
|
1279
|
+
if (c.pairs.length === 0)
|
|
1280
|
+
return new C([], { mode: "parallel" });
|
|
1281
|
+
const l = [], a = (d) => {
|
|
1282
|
+
l.push(d);
|
|
1283
|
+
}, p = {
|
|
1284
|
+
from: o,
|
|
1285
|
+
to: r,
|
|
1286
|
+
resolved: c,
|
|
1287
|
+
physics: n,
|
|
1288
|
+
scrollOffset: i.scrollOffset,
|
|
1289
|
+
positionedParent: i.positionedParent,
|
|
1290
|
+
maxDistance: s,
|
|
1291
|
+
onComplete: a
|
|
1292
|
+
}, f = [];
|
|
1293
|
+
for (const d of t)
|
|
1294
|
+
d.contribute && f.push(...d.contribute(p));
|
|
1295
|
+
if (f.length === 0)
|
|
1296
|
+
return new C([], { mode: "parallel" });
|
|
1297
|
+
const h = new C(f, { mode: "parallel" }), m = h.onComplete;
|
|
1298
|
+
return h.onComplete = () => {
|
|
1068
1299
|
m == null || m();
|
|
1069
|
-
|
|
1300
|
+
for (const d of l)
|
|
1301
|
+
try {
|
|
1302
|
+
d();
|
|
1303
|
+
} catch (y) {
|
|
1304
|
+
console.error("[hero] cleanup error", y);
|
|
1305
|
+
}
|
|
1306
|
+
}, h;
|
|
1070
1307
|
}
|
|
1071
1308
|
};
|
|
1072
1309
|
};
|
|
1073
|
-
function
|
|
1074
|
-
const { paths: t } = e;
|
|
1075
|
-
return
|
|
1310
|
+
function hs(e) {
|
|
1311
|
+
const { paths: t } = e, n = e.type ?? "static";
|
|
1312
|
+
return e.variant, _(
|
|
1313
|
+
t,
|
|
1314
|
+
() => cn({ type: n })
|
|
1315
|
+
);
|
|
1076
1316
|
}
|
|
1077
|
-
const
|
|
1317
|
+
const pn = {
|
|
1078
1318
|
spring: { stiffness: 50, damping: 30 }
|
|
1079
|
-
},
|
|
1319
|
+
}, fn = {
|
|
1080
1320
|
spring: { stiffness: 80, damping: 25 }
|
|
1081
|
-
},
|
|
1082
|
-
const t = e.physics ??
|
|
1321
|
+
}, dn = (e = {}) => {
|
|
1322
|
+
const t = e.physics ?? pn, n = e.initialRotation ?? 45, s = e.initialScale ?? 0.01, o = e.rotationTriggerPoint ?? 0.8;
|
|
1083
1323
|
return {
|
|
1084
|
-
prepare: ({ from:
|
|
1085
|
-
|
|
1086
|
-
}),
|
|
1087
|
-
const a =
|
|
1088
|
-
|
|
1089
|
-
const
|
|
1090
|
-
|
|
1324
|
+
prepare: ({ from: r, to: i, context: c }) => (r.then((l) => {
|
|
1325
|
+
l.style.opacity = "1";
|
|
1326
|
+
}), i.then((l) => {
|
|
1327
|
+
const a = H(c, "to"), p = Math.min(a.width, a.height) * 0.4;
|
|
1328
|
+
l.style.setProperty("--max-border-radius", `${p}px`), l.style.setProperty("--border-radius-scale", "1"), l.style.willChange = "transform", l.style.backfaceVisibility = "hidden";
|
|
1329
|
+
const f = a.left + a.width / 2, h = a.top + a.height / 2;
|
|
1330
|
+
l.style.transformOrigin = `${f}px ${h}px`, l.style.position = "fixed", l.style.top = `${a.top}px`, l.style.left = `${a.left}px`, l.style.width = `${a.width}px`, l.style.height = `${a.height}px`, l.style.zIndex = "1000", l.style.overflow = "hidden", l.style.transform = `rotate(${n}deg) scale(${s}) translateZ(0)`, l.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", l.style.opacity = "1";
|
|
1091
1331
|
}), {}),
|
|
1092
|
-
animation: ({ from:
|
|
1093
|
-
const
|
|
1094
|
-
element: i,
|
|
1095
|
-
integrator: g.from(Te),
|
|
1096
|
-
style: (a, p) => ({ opacity: p })
|
|
1097
|
-
}), c = new b({
|
|
1332
|
+
animation: ({ from: r, to: i }) => {
|
|
1333
|
+
const c = new b({
|
|
1098
1334
|
element: r,
|
|
1335
|
+
integrator: g.from(fn),
|
|
1336
|
+
style: (a, p) => ({ opacity: p })
|
|
1337
|
+
}), l = new b({
|
|
1338
|
+
element: i,
|
|
1099
1339
|
integrator: g.from(t),
|
|
1100
1340
|
style: (a) => {
|
|
1101
1341
|
let p;
|
|
1102
1342
|
if (a <= 0.05)
|
|
1103
1343
|
p = s;
|
|
1104
1344
|
else if (a <= o) {
|
|
1105
|
-
const
|
|
1106
|
-
p = s + (0.8 - s) *
|
|
1345
|
+
const d = (a - 0.05) / (o - 0.05), y = Math.pow(d, 9);
|
|
1346
|
+
p = s + (0.8 - s) * y;
|
|
1107
1347
|
} else {
|
|
1108
|
-
const
|
|
1109
|
-
p = 0.8 + 0.2 * (1 - Math.pow(1 -
|
|
1348
|
+
const d = (a - o) / (1 - o);
|
|
1349
|
+
p = 0.8 + 0.2 * (1 - Math.pow(1 - d, 3));
|
|
1110
1350
|
}
|
|
1111
|
-
const
|
|
1112
|
-
let
|
|
1113
|
-
if (a <=
|
|
1114
|
-
|
|
1351
|
+
const f = 0.7;
|
|
1352
|
+
let h;
|
|
1353
|
+
if (a <= f)
|
|
1354
|
+
h = n;
|
|
1115
1355
|
else {
|
|
1116
|
-
const
|
|
1117
|
-
|
|
1356
|
+
const d = (a - f) / (1 - f), y = 1 - Math.pow(1 - d, 2);
|
|
1357
|
+
h = n * (1 - y);
|
|
1118
1358
|
}
|
|
1119
1359
|
let m;
|
|
1120
|
-
if (a <=
|
|
1360
|
+
if (a <= f)
|
|
1121
1361
|
m = 1;
|
|
1122
1362
|
else {
|
|
1123
|
-
const
|
|
1124
|
-
m = 1 - Math.pow(
|
|
1363
|
+
const d = (a - f) / (1 - f);
|
|
1364
|
+
m = 1 - Math.pow(d, 0.5);
|
|
1125
1365
|
}
|
|
1126
1366
|
return {
|
|
1127
|
-
transform: `rotate(${
|
|
1367
|
+
transform: `rotate(${h.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,
|
|
1128
1368
|
"--border-radius-scale": m.toFixed(4)
|
|
1129
1369
|
};
|
|
1130
1370
|
},
|
|
1131
1371
|
onComplete: () => {
|
|
1132
|
-
|
|
1372
|
+
i.style.willChange = "", i.style.backfaceVisibility = "", i.style.removeProperty("--max-border-radius"), i.style.removeProperty("--border-radius-scale"), i.style.transform = "", i.style.transformOrigin = "", i.style.position = "", i.style.zIndex = "", i.style.top = "", i.style.left = "", i.style.width = "", i.style.height = "", i.style.overflow = "", i.style.borderRadius = "";
|
|
1133
1373
|
}
|
|
1134
1374
|
});
|
|
1135
|
-
return new
|
|
1375
|
+
return new C([c, l], { mode: "parallel" });
|
|
1136
1376
|
}
|
|
1137
1377
|
};
|
|
1138
1378
|
};
|
|
1139
|
-
function
|
|
1379
|
+
function ys(e) {
|
|
1140
1380
|
const { paths: t } = e;
|
|
1141
|
-
return
|
|
1381
|
+
return _(t, () => dn());
|
|
1142
1382
|
}
|
|
1143
|
-
const
|
|
1383
|
+
const hn = {
|
|
1144
1384
|
spring: { stiffness: 100, damping: 30 }
|
|
1145
|
-
},
|
|
1146
|
-
const t = e.physics ??
|
|
1385
|
+
}, yn = (e = {}) => {
|
|
1386
|
+
const t = e.physics ?? hn;
|
|
1147
1387
|
return {
|
|
1148
1388
|
prepare: ({ from: n, to: s }) => (n.then((o) => {
|
|
1149
1389
|
o.style.transformOrigin = "center center", o.style.willChange = "transform, opacity";
|
|
@@ -1154,31 +1394,31 @@ const _e = {
|
|
|
1154
1394
|
const o = new b({
|
|
1155
1395
|
element: n,
|
|
1156
1396
|
integrator: g.from(t),
|
|
1157
|
-
style: (
|
|
1158
|
-
transform: `rotate(${
|
|
1159
|
-
opacity:
|
|
1397
|
+
style: (i) => ({
|
|
1398
|
+
transform: `rotate(${i * 180}deg)`,
|
|
1399
|
+
opacity: i < 0.5 ? 1 : 0
|
|
1160
1400
|
})
|
|
1161
|
-
}),
|
|
1401
|
+
}), r = new b({
|
|
1162
1402
|
element: s,
|
|
1163
1403
|
integrator: g.from(t),
|
|
1164
1404
|
// u runs 1→0, so -u*180 unwinds -180→0.
|
|
1165
|
-
style: (
|
|
1166
|
-
transform: `rotate(${-
|
|
1167
|
-
opacity:
|
|
1405
|
+
style: (i, c) => ({
|
|
1406
|
+
transform: `rotate(${-c * 180}deg)`,
|
|
1407
|
+
opacity: i > 0.5 ? 1 : 0
|
|
1168
1408
|
}),
|
|
1169
1409
|
onComplete: () => {
|
|
1170
1410
|
s.style.willChange = "auto", s.style.transform = "", s.style.transformOrigin = "", s.style.opacity = "";
|
|
1171
1411
|
}
|
|
1172
1412
|
});
|
|
1173
|
-
return new
|
|
1413
|
+
return new C([o, r], { mode: "parallel" });
|
|
1174
1414
|
}
|
|
1175
1415
|
};
|
|
1176
1416
|
};
|
|
1177
|
-
function
|
|
1417
|
+
function ms(e) {
|
|
1178
1418
|
const { paths: t } = e;
|
|
1179
|
-
return
|
|
1419
|
+
return _(t, () => yn());
|
|
1180
1420
|
}
|
|
1181
|
-
const
|
|
1421
|
+
const mn = {
|
|
1182
1422
|
spring: {
|
|
1183
1423
|
stiffness: 20,
|
|
1184
1424
|
damping: 8,
|
|
@@ -1186,73 +1426,73 @@ const Ie = {
|
|
|
1186
1426
|
restDelta: 1e-3,
|
|
1187
1427
|
restSpeed: 1e-3
|
|
1188
1428
|
}
|
|
1189
|
-
},
|
|
1190
|
-
const t = e.direction ?? "up", n = e.physics ??
|
|
1429
|
+
}, vt = (e = {}) => {
|
|
1430
|
+
const t = e.direction ?? "up", n = e.physics ?? mn, s = t === "up";
|
|
1191
1431
|
return {
|
|
1192
|
-
prepare: ({ from: o, to:
|
|
1193
|
-
|
|
1194
|
-
}),
|
|
1195
|
-
|
|
1432
|
+
prepare: ({ from: o, to: r }) => (o.then((i) => {
|
|
1433
|
+
i.style.zIndex = s ? "-1" : "1", i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint", i.style.pointerEvents = "none";
|
|
1434
|
+
}), r.then((i) => {
|
|
1435
|
+
i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint";
|
|
1196
1436
|
}), {}),
|
|
1197
|
-
animation: ({ from: o, to:
|
|
1198
|
-
const
|
|
1437
|
+
animation: ({ from: o, to: r }) => {
|
|
1438
|
+
const i = o.offsetHeight, c = r.offsetHeight, l = window.innerHeight, a = Math.max(Math.min(i, c), l), p = new b({
|
|
1199
1439
|
element: o,
|
|
1200
1440
|
integrator: g.from(n),
|
|
1201
|
-
style: (
|
|
1202
|
-
}),
|
|
1203
|
-
element:
|
|
1441
|
+
style: (h) => ({ transform: `translate3d(0, ${s ? -a * h : a * h}px, 0)` })
|
|
1442
|
+
}), f = new b({
|
|
1443
|
+
element: r,
|
|
1204
1444
|
integrator: g.from(n),
|
|
1205
|
-
style: (
|
|
1445
|
+
style: (h, m) => ({ transform: `translate3d(0, ${s ? m * a : m * -a}px, 0)` }),
|
|
1206
1446
|
onComplete: () => {
|
|
1207
|
-
|
|
1447
|
+
r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "", r.style.transform = "";
|
|
1208
1448
|
}
|
|
1209
1449
|
});
|
|
1210
|
-
return new
|
|
1450
|
+
return new C([p, f], { mode: "parallel" });
|
|
1211
1451
|
}
|
|
1212
1452
|
};
|
|
1213
1453
|
};
|
|
1214
|
-
function
|
|
1454
|
+
function us(e) {
|
|
1215
1455
|
const { paths: t, type: n = "directional" } = e;
|
|
1216
|
-
return n === "non-directional" ?
|
|
1456
|
+
return n === "non-directional" ? _(
|
|
1217
1457
|
t,
|
|
1218
|
-
() =>
|
|
1219
|
-
) :
|
|
1458
|
+
() => vt({ direction: "up" })
|
|
1459
|
+
) : pt(
|
|
1220
1460
|
t,
|
|
1221
1461
|
{ forward: "up", backward: "down" },
|
|
1222
|
-
(s) =>
|
|
1462
|
+
(s) => vt({ direction: s })
|
|
1223
1463
|
);
|
|
1224
1464
|
}
|
|
1225
|
-
const
|
|
1465
|
+
const un = {
|
|
1226
1466
|
spring: { stiffness: 200, damping: 24 }
|
|
1227
|
-
},
|
|
1467
|
+
}, gn = {
|
|
1228
1468
|
inertia: { acceleration: 25, resistance: 1.2 }
|
|
1229
|
-
},
|
|
1230
|
-
function
|
|
1469
|
+
}, rt = 0.2;
|
|
1470
|
+
function bn() {
|
|
1231
1471
|
return {
|
|
1232
|
-
enterPhysics:
|
|
1233
|
-
exitPhysics:
|
|
1472
|
+
enterPhysics: un,
|
|
1473
|
+
exitPhysics: gn,
|
|
1234
1474
|
background: {
|
|
1235
1475
|
willChange: "transform, opacity",
|
|
1236
1476
|
enterStyle: (e, t) => ({
|
|
1237
|
-
transform: `scale(${1 -
|
|
1477
|
+
transform: `scale(${1 - rt * e})`,
|
|
1238
1478
|
opacity: t
|
|
1239
1479
|
}),
|
|
1240
1480
|
exitStyle: (e) => ({
|
|
1241
|
-
transform: `scale(${1 -
|
|
1481
|
+
transform: `scale(${1 - rt + rt * e})`,
|
|
1242
1482
|
opacity: e
|
|
1243
1483
|
})
|
|
1244
1484
|
}
|
|
1245
1485
|
};
|
|
1246
1486
|
}
|
|
1247
|
-
const
|
|
1487
|
+
const wn = {
|
|
1248
1488
|
spring: { stiffness: 300, damping: 30 }
|
|
1249
|
-
},
|
|
1489
|
+
}, Sn = {
|
|
1250
1490
|
inertia: { acceleration: 70, resistance: 1.2 }
|
|
1251
1491
|
};
|
|
1252
|
-
function
|
|
1492
|
+
function xn() {
|
|
1253
1493
|
return {
|
|
1254
|
-
enterPhysics:
|
|
1255
|
-
exitPhysics:
|
|
1494
|
+
enterPhysics: wn,
|
|
1495
|
+
exitPhysics: Sn,
|
|
1256
1496
|
background: {
|
|
1257
1497
|
willChange: "",
|
|
1258
1498
|
enterStyle: () => ({}),
|
|
@@ -1260,249 +1500,249 @@ function He() {
|
|
|
1260
1500
|
}
|
|
1261
1501
|
};
|
|
1262
1502
|
}
|
|
1263
|
-
const
|
|
1264
|
-
static:
|
|
1265
|
-
"background-scale":
|
|
1266
|
-
},
|
|
1267
|
-
const t = e.direction ?? "enter", n =
|
|
1503
|
+
const $n = {
|
|
1504
|
+
static: xn(),
|
|
1505
|
+
"background-scale": bn()
|
|
1506
|
+
}, En = "static", Cn = "transform", Pn = (e = {}) => {
|
|
1507
|
+
const t = e.direction ?? "enter", n = $n[e.type ?? En], s = t === "enter" ? n.enterPhysics : n.exitPhysics, o = n.background, r = o.willChange !== "";
|
|
1268
1508
|
return {
|
|
1269
|
-
prepare: ({ from:
|
|
1270
|
-
const
|
|
1271
|
-
return
|
|
1272
|
-
p.style.willChange =
|
|
1509
|
+
prepare: ({ from: i, to: c }) => {
|
|
1510
|
+
const l = t === "enter" ? c : i, a = t === "enter" ? i : c;
|
|
1511
|
+
return l.then((p) => {
|
|
1512
|
+
p.style.willChange = Cn, p.style.backfaceVisibility = "hidden", p.style.contain = "layout paint", t === "exit" && (p.style.pointerEvents = "none", p.style.zIndex = "100");
|
|
1273
1513
|
}), a.then((p) => {
|
|
1274
|
-
|
|
1514
|
+
r && (p.style.willChange = o.willChange, p.style.backfaceVisibility = "hidden", p.style.contain = "layout paint"), t === "enter" && (p.style.pointerEvents = "none", p.style.zIndex = "-1");
|
|
1275
1515
|
}), {};
|
|
1276
1516
|
},
|
|
1277
|
-
animation: ({ from:
|
|
1278
|
-
const a = t === "enter" ?
|
|
1279
|
-
|
|
1517
|
+
animation: ({ from: i, to: c, context: l }) => {
|
|
1518
|
+
const a = t === "enter" ? c : i, p = t === "enter" ? i : c, f = H(
|
|
1519
|
+
l,
|
|
1280
1520
|
t === "enter" ? "to" : "from"
|
|
1281
1521
|
);
|
|
1282
|
-
a.style.clipPath = `inset(${
|
|
1283
|
-
const
|
|
1284
|
-
transform: `translate3d(0, ${
|
|
1285
|
-
}) : (
|
|
1286
|
-
transform: `translate3d(0, ${
|
|
1522
|
+
a.style.clipPath = `inset(${f.top}px 0 calc(100% - ${f.top + f.height}px) 0)`;
|
|
1523
|
+
const h = t === "enter" ? (E, P) => ({
|
|
1524
|
+
transform: `translate3d(0, ${P * f.height}px, 0)`
|
|
1525
|
+
}) : (E) => ({
|
|
1526
|
+
transform: `translate3d(0, ${E * f.height}px, 0)`
|
|
1287
1527
|
}), m = new b({
|
|
1288
1528
|
element: a,
|
|
1289
1529
|
integrator: g.from(s),
|
|
1290
|
-
style:
|
|
1530
|
+
style: h,
|
|
1291
1531
|
onComplete: () => {
|
|
1292
1532
|
a.style.willChange = "auto", a.style.backfaceVisibility = "", a.style.contain = "", a.style.clipPath = "", a.style.transform = "";
|
|
1293
1533
|
}
|
|
1294
1534
|
});
|
|
1295
|
-
if (!
|
|
1296
|
-
return new
|
|
1297
|
-
const
|
|
1298
|
-
|
|
1535
|
+
if (!r)
|
|
1536
|
+
return new C([m], { mode: "parallel" });
|
|
1537
|
+
const d = H(
|
|
1538
|
+
l,
|
|
1299
1539
|
t === "enter" ? "from" : "to"
|
|
1300
|
-
),
|
|
1301
|
-
p.style.clipPath = `inset(${
|
|
1302
|
-
const
|
|
1540
|
+
), y = d.left + d.width / 2, u = d.top + d.height / 2;
|
|
1541
|
+
p.style.clipPath = `inset(${d.top}px 0 calc(100% - ${d.top + d.height}px) 0)`, p.style.transformOrigin = `${y}px ${u}px`;
|
|
1542
|
+
const S = t === "enter" ? (E, P) => o.enterStyle(E, P) : (E) => o.exitStyle(E), w = new b({
|
|
1303
1543
|
element: p,
|
|
1304
1544
|
integrator: g.from(s),
|
|
1305
|
-
style:
|
|
1545
|
+
style: S,
|
|
1306
1546
|
onComplete: t === "exit" ? () => {
|
|
1307
1547
|
p.style.willChange = "auto", p.style.backfaceVisibility = "", p.style.contain = "", p.style.clipPath = "", p.style.transformOrigin = "";
|
|
1308
1548
|
} : void 0
|
|
1309
1549
|
});
|
|
1310
|
-
return new
|
|
1550
|
+
return new C([m, w], { mode: "parallel" });
|
|
1311
1551
|
}
|
|
1312
1552
|
};
|
|
1313
1553
|
};
|
|
1314
|
-
function
|
|
1554
|
+
function vn(e) {
|
|
1315
1555
|
return e === "scale" || e === "background-scale" ? "background-scale" : "static";
|
|
1316
1556
|
}
|
|
1317
|
-
function
|
|
1318
|
-
const { enter: t, exit: n } = e, s = e.type, o =
|
|
1319
|
-
return
|
|
1557
|
+
function gs(e) {
|
|
1558
|
+
const { enter: t, exit: n } = e, s = e.type, o = vn(s);
|
|
1559
|
+
return Dt(
|
|
1320
1560
|
{ enter: t, exit: n },
|
|
1321
|
-
(
|
|
1561
|
+
(r) => Pn({ direction: r, type: o })
|
|
1322
1562
|
);
|
|
1323
1563
|
}
|
|
1324
|
-
const
|
|
1564
|
+
const Tn = {
|
|
1325
1565
|
spring: { stiffness: 170, damping: 22, doubleSpring: 0.8 }
|
|
1326
|
-
},
|
|
1327
|
-
const t = e.direction ?? "left", n = e.physics ??
|
|
1566
|
+
}, _n = (e = {}) => {
|
|
1567
|
+
const t = e.direction ?? "left", n = e.physics ?? Tn, s = t === "left";
|
|
1328
1568
|
return {
|
|
1329
|
-
prepare: ({ from: o, to:
|
|
1330
|
-
|
|
1331
|
-
}),
|
|
1332
|
-
const
|
|
1333
|
-
|
|
1569
|
+
prepare: ({ from: o, to: r }) => (o.then((i) => {
|
|
1570
|
+
i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint", i.style.pointerEvents = "none";
|
|
1571
|
+
}), r.then((i) => {
|
|
1572
|
+
const c = s ? 100 : -100;
|
|
1573
|
+
i.style.transform = `translate3d(${c}%, 0, 0)`, i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint";
|
|
1334
1574
|
}), {}),
|
|
1335
|
-
animation: ({ from: o, to:
|
|
1336
|
-
const
|
|
1575
|
+
animation: ({ from: o, to: r }) => {
|
|
1576
|
+
const i = new b({
|
|
1337
1577
|
element: o,
|
|
1338
1578
|
integrator: g.from(n),
|
|
1339
|
-
style: (
|
|
1340
|
-
}),
|
|
1341
|
-
element:
|
|
1579
|
+
style: (l) => ({ transform: `translate3d(${s ? -100 * l : 100 * l}%, 0, 0)` })
|
|
1580
|
+
}), c = new b({
|
|
1581
|
+
element: r,
|
|
1342
1582
|
integrator: g.from(n),
|
|
1343
|
-
style: (
|
|
1583
|
+
style: (l, a) => ({ transform: `translate3d(${s ? a * 100 : a * -100}%, 0, 0)` }),
|
|
1344
1584
|
onComplete: () => {
|
|
1345
|
-
|
|
1585
|
+
r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "", r.style.transform = "";
|
|
1346
1586
|
}
|
|
1347
1587
|
});
|
|
1348
|
-
return new
|
|
1588
|
+
return new C([i, c], { mode: "parallel" });
|
|
1349
1589
|
}
|
|
1350
1590
|
};
|
|
1351
1591
|
};
|
|
1352
|
-
function
|
|
1592
|
+
function bs(e) {
|
|
1353
1593
|
const { paths: t } = e;
|
|
1354
|
-
return
|
|
1594
|
+
return pt(
|
|
1355
1595
|
t,
|
|
1356
1596
|
{ forward: "left", backward: "right" },
|
|
1357
|
-
(n) =>
|
|
1597
|
+
(n) => _n({ direction: n })
|
|
1358
1598
|
);
|
|
1359
1599
|
}
|
|
1360
|
-
const
|
|
1600
|
+
const In = {
|
|
1361
1601
|
spring: { stiffness: 17, damping: 6 }
|
|
1362
|
-
},
|
|
1363
|
-
const t = e.physics ??
|
|
1602
|
+
}, it = 20, V = 800, On = (e = {}) => {
|
|
1603
|
+
const t = e.physics ?? In;
|
|
1364
1604
|
return {
|
|
1365
1605
|
prepare: ({ from: n, to: s }) => (n.then((o) => {
|
|
1366
|
-
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none", o.style.transform = `perspective(${
|
|
1606
|
+
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none", o.style.transform = `perspective(${V}px) rotateY(0deg) translate3d(0%, 0, 0)`;
|
|
1367
1607
|
}), s.then((o) => {
|
|
1368
|
-
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.transform = `perspective(${
|
|
1608
|
+
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.transform = `perspective(${V}px) rotateY(${it}deg) translate3d(-100%, 0, 0)`;
|
|
1369
1609
|
}), {}),
|
|
1370
1610
|
animation: ({ from: n, to: s }) => {
|
|
1371
1611
|
const o = new b({
|
|
1372
1612
|
element: n,
|
|
1373
1613
|
integrator: g.from(t),
|
|
1374
|
-
style: (
|
|
1375
|
-
const
|
|
1614
|
+
style: (i) => {
|
|
1615
|
+
const c = -i * it, l = i * 100;
|
|
1376
1616
|
return {
|
|
1377
|
-
transform: `perspective(${
|
|
1617
|
+
transform: `perspective(${V}px) rotateY(${c}deg) translate3d(${l}%, 0, 0)`
|
|
1378
1618
|
};
|
|
1379
1619
|
}
|
|
1380
|
-
}),
|
|
1620
|
+
}), r = new b({
|
|
1381
1621
|
element: s,
|
|
1382
1622
|
integrator: g.from(t),
|
|
1383
|
-
style: (
|
|
1384
|
-
const
|
|
1623
|
+
style: (i, c) => {
|
|
1624
|
+
const l = c * it, a = -c * 100;
|
|
1385
1625
|
return {
|
|
1386
|
-
transform: `perspective(${
|
|
1626
|
+
transform: `perspective(${V}px) rotateY(${l}deg) translate3d(${a}%, 0, 0)`
|
|
1387
1627
|
};
|
|
1388
1628
|
},
|
|
1389
1629
|
onComplete: () => {
|
|
1390
1630
|
s.style.transform = "", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "";
|
|
1391
1631
|
}
|
|
1392
1632
|
});
|
|
1393
|
-
return new
|
|
1633
|
+
return new C([o, r], { mode: "sequence" });
|
|
1394
1634
|
}
|
|
1395
1635
|
};
|
|
1396
1636
|
};
|
|
1397
|
-
function
|
|
1637
|
+
function ws(e) {
|
|
1398
1638
|
const { paths: t } = e;
|
|
1399
|
-
return
|
|
1639
|
+
return _(t, () => On());
|
|
1400
1640
|
}
|
|
1401
|
-
function
|
|
1641
|
+
function An({
|
|
1402
1642
|
enterRect: e,
|
|
1403
1643
|
exitRect: t,
|
|
1404
1644
|
pageRect: n,
|
|
1405
1645
|
scrollOffset: s,
|
|
1406
1646
|
enterRadius: o,
|
|
1407
|
-
exitRadius:
|
|
1647
|
+
exitRadius: r
|
|
1408
1648
|
}) {
|
|
1409
|
-
const
|
|
1649
|
+
const i = t.left - e.left + (t.width - e.width) / 2 - s.x, c = t.top - e.top + (t.height - e.height) / 2 - s.y, l = t.width / e.width, a = t.height / e.height, p = e.top / n.height * 100, f = (n.width - (e.left + e.width)) / n.width * 100, h = (n.height - (e.top + e.height)) / n.height * 100, m = e.left / n.width * 100;
|
|
1410
1650
|
return {
|
|
1411
1651
|
transformOrigin: `${e.left + e.width / 2}px ${e.top + e.height / 2}px`,
|
|
1412
|
-
animate: (
|
|
1413
|
-
const
|
|
1652
|
+
animate: (d) => {
|
|
1653
|
+
const y = 1 - d, u = 1 + (l - 1) * y, S = 1 + (a - 1) * y, E = (r * y + o * (1 - y)) / ((u + S) / 2);
|
|
1414
1654
|
return {
|
|
1415
|
-
clipPath: `inset(${p *
|
|
1416
|
-
transform: `translate(${
|
|
1655
|
+
clipPath: `inset(${p * y}% ${f * y}% ${h * y}% ${m * y}% round ${E}px)`,
|
|
1656
|
+
transform: `translate(${i * y}px, ${c * y}px) scale(${u}, ${S})`
|
|
1417
1657
|
};
|
|
1418
1658
|
}
|
|
1419
1659
|
};
|
|
1420
1660
|
}
|
|
1421
|
-
function
|
|
1661
|
+
function Dn({
|
|
1422
1662
|
enterRect: e,
|
|
1423
1663
|
exitRect: t,
|
|
1424
1664
|
pageRect: n,
|
|
1425
1665
|
scrollOffset: s,
|
|
1426
1666
|
enterRadius: o,
|
|
1427
|
-
exitRadius:
|
|
1667
|
+
exitRadius: r
|
|
1428
1668
|
}) {
|
|
1429
|
-
const
|
|
1669
|
+
const i = t.left - e.left + (t.width - e.width) / 2 + s.x, c = t.top - e.top + (t.height - e.height) / 2 + s.y, l = t.width / e.width, a = t.height / e.height, p = e.top / n.height * 100, f = (n.width - (e.left + e.width)) / n.width * 100, h = (n.height - (e.top + e.height)) / n.height * 100, m = e.left / n.width * 100;
|
|
1430
1670
|
return {
|
|
1431
1671
|
transformOrigin: `${e.left + e.width / 2}px ${e.top + e.height / 2}px`,
|
|
1432
|
-
animate: (
|
|
1433
|
-
const
|
|
1672
|
+
animate: (d) => {
|
|
1673
|
+
const y = 1 - d, u = 1 + (l - 1) * y, S = 1 + (a - 1) * y, E = (o * (1 - y) + r * y) / ((u + S) / 2);
|
|
1434
1674
|
return {
|
|
1435
|
-
clipPath: `inset(${p *
|
|
1436
|
-
transform: `translate(${
|
|
1675
|
+
clipPath: `inset(${p * y}% ${f * y}% ${h * y}% ${m * y}% round ${E}px)`,
|
|
1676
|
+
transform: `translate(${i * y - s.x}px, ${c * y}px) scale(${u}, ${S})`
|
|
1437
1677
|
};
|
|
1438
1678
|
}
|
|
1439
1679
|
};
|
|
1440
1680
|
}
|
|
1441
|
-
const
|
|
1681
|
+
const Fn = {
|
|
1442
1682
|
spring: { stiffness: 200, damping: 24 }
|
|
1443
|
-
},
|
|
1444
|
-
function
|
|
1683
|
+
}, Ft = 0.12, Ln = 18;
|
|
1684
|
+
function Yn() {
|
|
1445
1685
|
return {
|
|
1446
1686
|
transformOrigin: "50% 50%",
|
|
1447
1687
|
animate: (e) => {
|
|
1448
1688
|
const t = 1 - e;
|
|
1449
1689
|
return {
|
|
1450
|
-
transform: `scale(${1 -
|
|
1690
|
+
transform: `scale(${1 - Ft * t})`
|
|
1451
1691
|
};
|
|
1452
1692
|
}
|
|
1453
1693
|
};
|
|
1454
1694
|
}
|
|
1455
|
-
function
|
|
1695
|
+
function kn() {
|
|
1456
1696
|
return {
|
|
1457
1697
|
transformOrigin: "50% 50%",
|
|
1458
1698
|
animate: (e) => {
|
|
1459
1699
|
const t = 1 - e;
|
|
1460
1700
|
return {
|
|
1461
|
-
transform: `scale(${1 -
|
|
1701
|
+
transform: `scale(${1 - Ft * t})`
|
|
1462
1702
|
};
|
|
1463
1703
|
}
|
|
1464
1704
|
};
|
|
1465
1705
|
}
|
|
1466
|
-
const
|
|
1706
|
+
const at = {
|
|
1467
1707
|
willChange: "backdrop-filter",
|
|
1468
1708
|
initialStyle: {
|
|
1469
1709
|
position: "absolute",
|
|
1470
1710
|
inset: "0",
|
|
1471
1711
|
pointerEvents: "none",
|
|
1472
|
-
// Sits above the background page but below the zoomed page (z-index
|
|
1712
|
+
// Sits above the background page but below the zoomed page (z-index 2
|
|
1473
1713
|
// in transition.ts). backdrop-filter therefore blurs the background,
|
|
1474
1714
|
// while the zoom tile stays sharp as it expands on top.
|
|
1475
|
-
zIndex: "
|
|
1715
|
+
zIndex: "1",
|
|
1476
1716
|
backdropFilter: "blur(0px)",
|
|
1477
1717
|
WebkitBackdropFilter: "blur(0px)"
|
|
1478
1718
|
},
|
|
1479
1719
|
style: (e, t) => {
|
|
1480
|
-
const n = e === "enter" ? t : 1 - t, s = `blur(${
|
|
1720
|
+
const n = e === "enter" ? t : 1 - t, s = `blur(${Ln * n}px)`;
|
|
1481
1721
|
return {
|
|
1482
1722
|
backdropFilter: s,
|
|
1483
1723
|
WebkitBackdropFilter: s
|
|
1484
1724
|
};
|
|
1485
1725
|
}
|
|
1486
1726
|
};
|
|
1487
|
-
class
|
|
1727
|
+
class Hn {
|
|
1488
1728
|
constructor() {
|
|
1489
|
-
$(this, "physics",
|
|
1729
|
+
$(this, "physics", Fn);
|
|
1490
1730
|
}
|
|
1491
1731
|
contribute(t) {
|
|
1492
|
-
const { from: n, to: s, resolved: o, physics:
|
|
1493
|
-
return
|
|
1732
|
+
const { from: n, to: s, resolved: o, physics: r } = t, i = o.mode === "enter", c = i ? n : s, l = i ? Yn() : kn();
|
|
1733
|
+
return l && (c.style.transformOrigin = l.transformOrigin), [
|
|
1494
1734
|
new b({
|
|
1495
|
-
element:
|
|
1496
|
-
integrator: g.from(
|
|
1497
|
-
style:
|
|
1735
|
+
element: c,
|
|
1736
|
+
integrator: g.from(r),
|
|
1737
|
+
style: i ? (a, p) => l.animate(p) : (a) => l.animate(a)
|
|
1498
1738
|
})
|
|
1499
1739
|
];
|
|
1500
1740
|
}
|
|
1501
1741
|
}
|
|
1502
|
-
class
|
|
1742
|
+
class Mn {
|
|
1503
1743
|
prepare(t) {
|
|
1504
1744
|
const n = t.createElement("zoom-overlay");
|
|
1505
|
-
return Object.assign(n.style,
|
|
1745
|
+
return Object.assign(n.style, at.initialStyle), n.style.willChange = at.willChange, t.context.positionedParent.appendChild(n), { overlay: n };
|
|
1506
1746
|
}
|
|
1507
1747
|
contribute(t) {
|
|
1508
1748
|
const n = t.extras.overlay;
|
|
@@ -1510,220 +1750,220 @@ class tn {
|
|
|
1510
1750
|
new b({
|
|
1511
1751
|
element: n,
|
|
1512
1752
|
integrator: g.from(t.physics),
|
|
1513
|
-
style: (s) =>
|
|
1753
|
+
style: (s) => at.style(t.resolved.mode, s)
|
|
1514
1754
|
})
|
|
1515
1755
|
] : [];
|
|
1516
1756
|
}
|
|
1517
1757
|
}
|
|
1518
|
-
const
|
|
1758
|
+
const Un = {
|
|
1519
1759
|
spring: { stiffness: 340, damping: 30, doubleSpring: 1 }
|
|
1520
1760
|
};
|
|
1521
|
-
function
|
|
1761
|
+
function zn({
|
|
1522
1762
|
enterRect: e,
|
|
1523
1763
|
exitRect: t,
|
|
1524
1764
|
scrollOffset: n
|
|
1525
1765
|
}) {
|
|
1526
|
-
const s = e.left - t.left + (e.width - t.width) / 2 + n.x, o = e.top - t.top + (e.height - t.height) / 2 + n.y,
|
|
1766
|
+
const s = e.left - t.left + (e.width - t.width) / 2 + n.x, o = e.top - t.top + (e.height - t.height) / 2 + n.y, r = e.width / t.width, i = e.height / t.height, c = Math.max(r, i);
|
|
1527
1767
|
return {
|
|
1528
1768
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1529
|
-
animate: (
|
|
1530
|
-
const a = 1 -
|
|
1769
|
+
animate: (l) => {
|
|
1770
|
+
const a = 1 - l;
|
|
1531
1771
|
return {
|
|
1532
|
-
transform: `translate(${s * a - n.x}px, ${o * a}px) scale(${1 + (
|
|
1772
|
+
transform: `translate(${s * a - n.x}px, ${o * a}px) scale(${1 + (c - 1) * a})`,
|
|
1533
1773
|
opacity: `${1 - a}`
|
|
1534
1774
|
};
|
|
1535
1775
|
}
|
|
1536
1776
|
};
|
|
1537
1777
|
}
|
|
1538
|
-
function
|
|
1778
|
+
function Xn({
|
|
1539
1779
|
enterRect: e,
|
|
1540
1780
|
exitRect: t,
|
|
1541
1781
|
scrollOffset: n
|
|
1542
1782
|
}) {
|
|
1543
|
-
const s = e.left - t.left + (e.width - t.width) / 2 - n.x, o = e.top - t.top + (e.height - t.height) / 2 - n.y,
|
|
1783
|
+
const s = e.left - t.left + (e.width - t.width) / 2 - n.x, o = e.top - t.top + (e.height - t.height) / 2 - n.y, r = e.width / t.width, i = e.height / t.height, c = Math.max(r, i);
|
|
1544
1784
|
return {
|
|
1545
1785
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1546
|
-
animate: (
|
|
1547
|
-
const a = 1 -
|
|
1786
|
+
animate: (l) => {
|
|
1787
|
+
const a = 1 - l;
|
|
1548
1788
|
return {
|
|
1549
|
-
transform: `translate(${s * a}px, ${o * a}px) scale(${1 + (
|
|
1550
|
-
opacity: `${
|
|
1789
|
+
transform: `translate(${s * a}px, ${o * a}px) scale(${1 + (c - 1) * a})`,
|
|
1790
|
+
opacity: `${l}`
|
|
1551
1791
|
};
|
|
1552
1792
|
}
|
|
1553
1793
|
};
|
|
1554
1794
|
}
|
|
1555
|
-
class
|
|
1795
|
+
class Nn {
|
|
1556
1796
|
constructor() {
|
|
1557
|
-
$(this, "physics",
|
|
1797
|
+
$(this, "physics", Un);
|
|
1558
1798
|
}
|
|
1559
1799
|
contribute(t) {
|
|
1560
|
-
const { from: n, to: s, resolved: o, input:
|
|
1561
|
-
return a && (
|
|
1800
|
+
const { from: n, to: s, resolved: o, input: r, physics: i } = t, c = o.mode === "enter", l = c ? n : s, a = c ? zn(r) : Xn(r);
|
|
1801
|
+
return a && (l.style.transformOrigin = a.transformOrigin), [
|
|
1562
1802
|
new b({
|
|
1563
|
-
element:
|
|
1564
|
-
integrator: g.from(
|
|
1565
|
-
style:
|
|
1803
|
+
element: l,
|
|
1804
|
+
integrator: g.from(i),
|
|
1805
|
+
style: c ? (p, f) => a.animate(f) : (p) => a.animate(p)
|
|
1566
1806
|
})
|
|
1567
1807
|
];
|
|
1568
1808
|
}
|
|
1569
1809
|
}
|
|
1570
|
-
const
|
|
1810
|
+
const Vn = {
|
|
1571
1811
|
spring: { stiffness: 420, damping: 34 }
|
|
1572
1812
|
};
|
|
1573
|
-
class
|
|
1813
|
+
class Bn {
|
|
1574
1814
|
constructor() {
|
|
1575
|
-
$(this, "physics",
|
|
1815
|
+
$(this, "physics", Vn);
|
|
1576
1816
|
}
|
|
1577
1817
|
contribute(t) {
|
|
1578
1818
|
return [];
|
|
1579
1819
|
}
|
|
1580
1820
|
}
|
|
1581
|
-
const
|
|
1582
|
-
expand: () => new
|
|
1583
|
-
static: () => new
|
|
1584
|
-
blur: () => new
|
|
1821
|
+
const Wn = {
|
|
1822
|
+
expand: () => new Nn(),
|
|
1823
|
+
static: () => new Bn(),
|
|
1824
|
+
blur: () => new Hn()
|
|
1585
1825
|
};
|
|
1586
|
-
function
|
|
1587
|
-
return
|
|
1826
|
+
function Rn(e) {
|
|
1827
|
+
return Wn[e]();
|
|
1588
1828
|
}
|
|
1589
|
-
const
|
|
1590
|
-
function
|
|
1591
|
-
const t = e.getAttribute(
|
|
1829
|
+
const lt = "data-zoom-enter-key", Tt = "data-zoom-exit-key", Zn = "data-zoom-radius";
|
|
1830
|
+
function _t(e) {
|
|
1831
|
+
const t = e.getAttribute(Zn);
|
|
1592
1832
|
if (!t) return 0;
|
|
1593
1833
|
const n = parseFloat(t);
|
|
1594
1834
|
return Number.isFinite(n) && n > 0 ? n : 0;
|
|
1595
1835
|
}
|
|
1596
|
-
function
|
|
1836
|
+
function qn(e, t) {
|
|
1597
1837
|
const n = [];
|
|
1598
1838
|
let s = t;
|
|
1599
1839
|
for (; s && s !== e; ) {
|
|
1600
1840
|
const o = s.parentElement;
|
|
1601
1841
|
if (!o) break;
|
|
1602
|
-
for (const
|
|
1603
|
-
|
|
1842
|
+
for (const r of Array.from(o.children))
|
|
1843
|
+
r !== s && r instanceof HTMLElement && n.push(r);
|
|
1604
1844
|
s = o;
|
|
1605
1845
|
}
|
|
1606
1846
|
return n;
|
|
1607
1847
|
}
|
|
1608
|
-
function
|
|
1609
|
-
const t = e.querySelectorAll(`[${
|
|
1848
|
+
function It(e) {
|
|
1849
|
+
const t = e.querySelectorAll(`[${lt}]`);
|
|
1610
1850
|
return t.length !== 1 ? null : t[0];
|
|
1611
1851
|
}
|
|
1612
|
-
function
|
|
1613
|
-
const n = e.querySelectorAll(`[${
|
|
1852
|
+
function Ot(e, t) {
|
|
1853
|
+
const n = e.querySelectorAll(`[${Tt}]`);
|
|
1614
1854
|
for (const s of n)
|
|
1615
|
-
if (s.getAttribute(
|
|
1855
|
+
if (s.getAttribute(Tt) === t)
|
|
1616
1856
|
return s;
|
|
1617
1857
|
return null;
|
|
1618
1858
|
}
|
|
1619
|
-
function
|
|
1620
|
-
const n =
|
|
1859
|
+
function jn(e, t) {
|
|
1860
|
+
const n = It(e), s = It(t);
|
|
1621
1861
|
if (!n && s) {
|
|
1622
|
-
const o = s.getAttribute(
|
|
1862
|
+
const o = s.getAttribute(lt);
|
|
1623
1863
|
if (!o) return null;
|
|
1624
|
-
const
|
|
1625
|
-
return
|
|
1864
|
+
const r = Ot(e, o);
|
|
1865
|
+
return r ? { mode: "enter", enterEl: s, exitEl: r } : null;
|
|
1626
1866
|
}
|
|
1627
1867
|
if (n && !s) {
|
|
1628
|
-
const o = n.getAttribute(
|
|
1868
|
+
const o = n.getAttribute(lt);
|
|
1629
1869
|
if (!o) return null;
|
|
1630
|
-
const
|
|
1631
|
-
return
|
|
1870
|
+
const r = Ot(t, o);
|
|
1871
|
+
return r ? { mode: "exit", enterEl: n, exitEl: r } : null;
|
|
1632
1872
|
}
|
|
1633
1873
|
return null;
|
|
1634
1874
|
}
|
|
1635
|
-
function
|
|
1875
|
+
function Kn(e, t, n, s) {
|
|
1636
1876
|
return {
|
|
1637
|
-
enterRect:
|
|
1877
|
+
enterRect: k(
|
|
1638
1878
|
e.mode === "enter" ? n : t,
|
|
1639
1879
|
e.enterEl
|
|
1640
1880
|
),
|
|
1641
|
-
exitRect:
|
|
1881
|
+
exitRect: k(
|
|
1642
1882
|
e.mode === "enter" ? t : n,
|
|
1643
1883
|
e.exitEl
|
|
1644
1884
|
),
|
|
1645
1885
|
pageRect: e.mode === "enter" ? n.getBoundingClientRect() : t.getBoundingClientRect(),
|
|
1646
1886
|
scrollOffset: s,
|
|
1647
|
-
enterRadius:
|
|
1648
|
-
exitRadius:
|
|
1887
|
+
enterRadius: _t(e.enterEl),
|
|
1888
|
+
exitRadius: _t(e.exitEl)
|
|
1649
1889
|
};
|
|
1650
1890
|
}
|
|
1651
|
-
class
|
|
1891
|
+
class Gn {
|
|
1652
1892
|
prepare(t) {
|
|
1653
1893
|
t.from.then((n) => {
|
|
1654
1894
|
n.style.willChange = "transform, clip-path, opacity", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
1655
1895
|
});
|
|
1656
1896
|
}
|
|
1657
1897
|
contribute(t) {
|
|
1658
|
-
const { from: n, to: s, resolved: o, input:
|
|
1898
|
+
const { from: n, to: s, resolved: o, input: r, physics: i, onComplete: c } = t, l = o.mode === "enter", a = l ? An(r) : Dn(r), p = l ? s : n, f = l ? "t" : "u";
|
|
1659
1899
|
a && (p.style.transformOrigin = a.transformOrigin);
|
|
1660
|
-
const
|
|
1661
|
-
return p.style.zIndex = "
|
|
1662
|
-
p.style.willChange = "auto", p.style.backfaceVisibility = "", p.style.transformOrigin = "", p.style.contain = "", p.style.zIndex =
|
|
1900
|
+
const h = p.style.zIndex;
|
|
1901
|
+
return p.style.zIndex = "2", c(() => {
|
|
1902
|
+
p.style.willChange = "auto", p.style.backfaceVisibility = "", p.style.transformOrigin = "", p.style.contain = "", p.style.zIndex = h;
|
|
1663
1903
|
}), [
|
|
1664
1904
|
new b({
|
|
1665
1905
|
element: p,
|
|
1666
|
-
integrator: g.from(
|
|
1906
|
+
integrator: g.from(i),
|
|
1667
1907
|
// Enter: tile expands as `t` (0 → 1). Exit: tile shrinks as `u` —
|
|
1668
1908
|
// the legacy convention from v5's outAnim path. Either way, feed
|
|
1669
1909
|
// the progress that matches the tileConfig's authored direction.
|
|
1670
|
-
style:
|
|
1910
|
+
style: f === "t" ? (m) => a.animate(m) : (m, d) => a.animate(d)
|
|
1671
1911
|
})
|
|
1672
1912
|
];
|
|
1673
1913
|
}
|
|
1674
1914
|
}
|
|
1675
|
-
class
|
|
1915
|
+
class Jn {
|
|
1676
1916
|
contribute(t) {
|
|
1677
|
-
const { resolved: n, physics: s, from: o, to:
|
|
1678
|
-
if (
|
|
1679
|
-
const a =
|
|
1917
|
+
const { resolved: n, physics: s, from: o, to: r, onComplete: i } = t, c = n.mode === "enter" ? r : o, l = qn(c, n.enterEl);
|
|
1918
|
+
if (l.length === 0) return [];
|
|
1919
|
+
const a = l.map((p) => p.style.opacity);
|
|
1680
1920
|
if (n.mode === "enter")
|
|
1681
|
-
for (const p of
|
|
1682
|
-
return
|
|
1683
|
-
for (let p = 0; p <
|
|
1684
|
-
const
|
|
1685
|
-
|
|
1921
|
+
for (const p of l) p.style.opacity = "0";
|
|
1922
|
+
return i(() => {
|
|
1923
|
+
for (let p = 0; p < l.length; p++) {
|
|
1924
|
+
const f = l[p];
|
|
1925
|
+
f && (f.style.opacity = a[p] ?? "");
|
|
1686
1926
|
}
|
|
1687
|
-
}),
|
|
1927
|
+
}), l.map(
|
|
1688
1928
|
(p) => new b({
|
|
1689
1929
|
element: p,
|
|
1690
1930
|
integrator: g.from(s),
|
|
1691
|
-
style: (
|
|
1692
|
-
opacity: n.mode === "enter" ?
|
|
1931
|
+
style: (f, h) => ({
|
|
1932
|
+
opacity: n.mode === "enter" ? f : h
|
|
1693
1933
|
})
|
|
1694
1934
|
})
|
|
1695
1935
|
);
|
|
1696
1936
|
}
|
|
1697
1937
|
}
|
|
1698
|
-
class
|
|
1938
|
+
class Lt {
|
|
1699
1939
|
contribute() {
|
|
1700
1940
|
return [];
|
|
1701
1941
|
}
|
|
1702
1942
|
}
|
|
1703
|
-
const
|
|
1704
|
-
default: () => new
|
|
1705
|
-
fade: () => new
|
|
1943
|
+
const Qn = {
|
|
1944
|
+
default: () => new Lt(),
|
|
1945
|
+
fade: () => new Jn()
|
|
1706
1946
|
};
|
|
1707
|
-
function
|
|
1708
|
-
return
|
|
1947
|
+
function ts(e) {
|
|
1948
|
+
return Qn[e]();
|
|
1709
1949
|
}
|
|
1710
|
-
class
|
|
1950
|
+
class es extends Lt {
|
|
1711
1951
|
}
|
|
1712
|
-
function
|
|
1713
|
-
const t =
|
|
1952
|
+
function ns(e) {
|
|
1953
|
+
const t = Rn(e.type);
|
|
1714
1954
|
return { strategies: [
|
|
1715
|
-
new
|
|
1955
|
+
new Gn(),
|
|
1716
1956
|
t,
|
|
1717
|
-
|
|
1718
|
-
new
|
|
1957
|
+
ts(e.variant),
|
|
1958
|
+
new es(),
|
|
1719
1959
|
// Overlay is intrinsically tied to backdrop-filter-driven types. Today
|
|
1720
1960
|
// that's only `blur`; the table-driven factory above owns the mapping
|
|
1721
1961
|
// so this conditional is the single line that knows the relationship.
|
|
1722
|
-
...e.type === "blur" ? [new
|
|
1962
|
+
...e.type === "blur" ? [new Mn()] : []
|
|
1723
1963
|
], physics: t.physics };
|
|
1724
1964
|
}
|
|
1725
|
-
const
|
|
1726
|
-
const { strategies: t, physics: n } =
|
|
1965
|
+
const ss = (e) => {
|
|
1966
|
+
const { strategies: t, physics: n } = ns(e);
|
|
1727
1967
|
return {
|
|
1728
1968
|
prepare: (s) => {
|
|
1729
1969
|
const o = {
|
|
@@ -1734,74 +1974,74 @@ const Sn = (e) => {
|
|
|
1734
1974
|
// strategy interface narrows the cast to keep both signatures
|
|
1735
1975
|
// compatible.
|
|
1736
1976
|
createElement: s.createElement
|
|
1737
|
-
},
|
|
1738
|
-
for (const
|
|
1739
|
-
if (!
|
|
1740
|
-
const
|
|
1741
|
-
|
|
1977
|
+
}, r = {};
|
|
1978
|
+
for (const i of t) {
|
|
1979
|
+
if (!i.prepare) continue;
|
|
1980
|
+
const c = i.prepare(o);
|
|
1981
|
+
c && Object.assign(r, c);
|
|
1742
1982
|
}
|
|
1743
|
-
return
|
|
1983
|
+
return r;
|
|
1744
1984
|
},
|
|
1745
|
-
animation: ({ from: s, to: o, context:
|
|
1746
|
-
const
|
|
1747
|
-
if (!
|
|
1748
|
-
return new
|
|
1749
|
-
const
|
|
1985
|
+
animation: ({ from: s, to: o, context: r, ...i }) => {
|
|
1986
|
+
const c = jn(s, o);
|
|
1987
|
+
if (!c)
|
|
1988
|
+
return new C([], { mode: "parallel" });
|
|
1989
|
+
const l = Kn(c, s, o, r.scrollOffset), a = [], f = {
|
|
1750
1990
|
from: s,
|
|
1751
1991
|
to: o,
|
|
1752
|
-
resolved:
|
|
1753
|
-
input:
|
|
1992
|
+
resolved: c,
|
|
1993
|
+
input: l,
|
|
1754
1994
|
physics: n,
|
|
1755
|
-
extras:
|
|
1756
|
-
onComplete: (
|
|
1757
|
-
a.push(
|
|
1995
|
+
extras: i,
|
|
1996
|
+
onComplete: (d) => {
|
|
1997
|
+
a.push(d);
|
|
1758
1998
|
}
|
|
1759
|
-
},
|
|
1760
|
-
for (const
|
|
1761
|
-
|
|
1762
|
-
const m =
|
|
1999
|
+
}, h = [];
|
|
2000
|
+
for (const d of t)
|
|
2001
|
+
d.contribute && h.push(...d.contribute(f));
|
|
2002
|
+
const m = h[0];
|
|
1763
2003
|
if (m) {
|
|
1764
|
-
const
|
|
2004
|
+
const d = m.onComplete;
|
|
1765
2005
|
m.onComplete = () => {
|
|
1766
|
-
|
|
1767
|
-
for (const
|
|
2006
|
+
d == null || d();
|
|
2007
|
+
for (const y of a)
|
|
1768
2008
|
try {
|
|
1769
|
-
|
|
1770
|
-
} catch (
|
|
1771
|
-
console.error("[zoom] cleanup error",
|
|
2009
|
+
y();
|
|
2010
|
+
} catch (u) {
|
|
2011
|
+
console.error("[zoom] cleanup error", u);
|
|
1772
2012
|
}
|
|
1773
2013
|
};
|
|
1774
2014
|
}
|
|
1775
|
-
return new
|
|
2015
|
+
return new C(h, { mode: "parallel" });
|
|
1776
2016
|
}
|
|
1777
2017
|
};
|
|
1778
2018
|
};
|
|
1779
|
-
function
|
|
2019
|
+
function os(e) {
|
|
1780
2020
|
const t = e.type ?? "static", n = e.variant ?? (e.fade ? "fade" : "default");
|
|
1781
2021
|
return { type: t, variant: n };
|
|
1782
2022
|
}
|
|
1783
|
-
function
|
|
1784
|
-
const t =
|
|
1785
|
-
return
|
|
2023
|
+
function Ss(e) {
|
|
2024
|
+
const t = os(e);
|
|
2025
|
+
return _(
|
|
1786
2026
|
e.paths,
|
|
1787
|
-
() =>
|
|
2027
|
+
() => ss(t)
|
|
1788
2028
|
);
|
|
1789
2029
|
}
|
|
1790
2030
|
export {
|
|
1791
|
-
|
|
1792
|
-
|
|
2031
|
+
Es as Animation,
|
|
2032
|
+
C as MultiAnimation,
|
|
1793
2033
|
b as WebAnimation,
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
2034
|
+
as as axis,
|
|
2035
|
+
ls as blind,
|
|
2036
|
+
cs as drill,
|
|
2037
|
+
ps as fade,
|
|
2038
|
+
fs as film,
|
|
2039
|
+
hs as hero,
|
|
2040
|
+
ys as jaemin,
|
|
2041
|
+
ms as rotate,
|
|
2042
|
+
us as scroll,
|
|
2043
|
+
gs as sheet,
|
|
2044
|
+
bs as slide,
|
|
2045
|
+
ws as strip,
|
|
2046
|
+
Ss as zoom
|
|
1807
2047
|
};
|