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