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