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