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