@ssgoi/core 4.0.0 → 4.1.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/integrator/double-spring-integrator.d.ts +6 -0
- package/dist/animator/integrator/double-spring-integrator.d.ts.map +1 -1
- package/dist/animator/integrator/inertia-integrator.d.ts +15 -0
- package/dist/animator/integrator/inertia-integrator.d.ts.map +1 -1
- package/dist/animator/integrator/provider.d.ts.map +1 -1
- package/dist/animator/integrator/spring-integrator.d.ts +6 -0
- package/dist/animator/integrator/spring-integrator.d.ts.map +1 -1
- package/dist/animator/multi-animator.d.ts +16 -11
- package/dist/animator/multi-animator.d.ts.map +1 -1
- package/dist/animator/runner/css-runner.d.ts.map +1 -1
- package/dist/animator/single-animator.d.ts +6 -4
- package/dist/animator/single-animator.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +299 -263
- package/dist/provider-Cs5iBqRD.cjs +1 -0
- package/dist/provider-Cu4NSF1Q.js +167 -0
- package/dist/transition/create-transition-callback.d.ts.map +1 -1
- package/dist/transition/transition-strategy.d.ts +6 -6
- package/dist/transition/transition-strategy.d.ts.map +1 -1
- package/dist/transitions/index.cjs +1 -1
- package/dist/transitions/index.js +1 -1
- package/dist/types.cjs +1 -1
- package/dist/types.d.ts +65 -35
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +39 -46
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/wait-paint.d.ts +15 -0
- package/dist/utils/wait-paint.d.ts.map +1 -0
- package/dist/view-transitions/depth.d.ts.map +1 -1
- 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 +15 -15
- package/dist/view-transitions/index.js +673 -688
- package/dist/view-transitions/pinterest.d.ts.map +1 -1
- package/dist/view-transitions/scroll.d.ts.map +1 -1
- package/dist/view-transitions/sheet.d.ts.map +1 -1
- package/dist/view-transitions/swap.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/provider-B6Xnh0BA.cjs +0 -1
- package/dist/provider-CMBovM_W.js +0 -134
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
const
|
|
2
|
-
var
|
|
3
|
-
t.style.position = "absolute", t.style.width = "100%", t.style.top = `${-1 * (((
|
|
4
|
-
},
|
|
1
|
+
const g = (t, i) => {
|
|
2
|
+
var l;
|
|
3
|
+
t.style.position = "absolute", t.style.width = "100%", t.style.top = `${-1 * (((l = i == null ? void 0 : i.scrollOffset) == null ? void 0 : l.y) ?? 0)}px`, t.style.left = "0";
|
|
4
|
+
}, F = (t) => new Promise((i) => setTimeout(i, t));
|
|
5
5
|
function x(t, i) {
|
|
6
|
-
function
|
|
7
|
-
let
|
|
6
|
+
function l(s) {
|
|
7
|
+
let r = 0, e = 0;
|
|
8
8
|
const c = s.offsetWidth, y = s.offsetHeight;
|
|
9
|
-
let
|
|
10
|
-
for (;
|
|
11
|
-
|
|
12
|
-
return
|
|
9
|
+
let o = s;
|
|
10
|
+
for (; o; )
|
|
11
|
+
r += o.offsetTop, e += o.offsetLeft, o = o.offsetParent;
|
|
12
|
+
return r -= window.scrollY, e -= window.scrollX, { top: r, left: e, width: c, height: y };
|
|
13
13
|
}
|
|
14
|
-
const
|
|
14
|
+
const a = l(t), n = l(i);
|
|
15
15
|
return new DOMRect(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
n.left - a.left,
|
|
17
|
+
n.top - a.top,
|
|
18
|
+
n.width,
|
|
19
|
+
n.height
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
22
|
function E() {
|
|
23
23
|
let t, i;
|
|
24
|
-
return { promise: new Promise((
|
|
25
|
-
t =
|
|
24
|
+
return { promise: new Promise((a, n) => {
|
|
25
|
+
t = a, i = n;
|
|
26
26
|
}), resolve: t, reject: i };
|
|
27
27
|
}
|
|
28
|
-
const
|
|
29
|
-
spring: { stiffness:
|
|
30
|
-
},
|
|
31
|
-
spring: { stiffness:
|
|
32
|
-
},
|
|
28
|
+
const W = {
|
|
29
|
+
spring: { stiffness: 200, damping: 22 }
|
|
30
|
+
}, M = {
|
|
31
|
+
spring: { stiffness: 200, damping: 22 }
|
|
32
|
+
}, B = 300, q = 10, j = "horizontal", N = "#000000", Wt = (t = {}) => {
|
|
33
33
|
const {
|
|
34
|
-
transitionDelay: i =
|
|
35
|
-
blindCount:
|
|
36
|
-
direction:
|
|
37
|
-
blindColor:
|
|
38
|
-
} = t, s = t.physics ??
|
|
34
|
+
transitionDelay: i = B,
|
|
35
|
+
blindCount: l = q,
|
|
36
|
+
direction: a = j,
|
|
37
|
+
blindColor: n = N
|
|
38
|
+
} = t, s = t.physics ?? M, r = t.physics ?? W;
|
|
39
39
|
let e, c = null;
|
|
40
|
-
const y = (
|
|
41
|
-
window.getComputedStyle(
|
|
42
|
-
const
|
|
43
|
-
|
|
40
|
+
const y = (o, p, d = "left") => {
|
|
41
|
+
window.getComputedStyle(o).position === "static" && (o.style.position = "relative");
|
|
42
|
+
const f = document.createElement("div");
|
|
43
|
+
f.className = "blind-container", f.style.cssText = `
|
|
44
44
|
position: absolute;
|
|
45
45
|
top: 0;
|
|
46
46
|
left: 0;
|
|
@@ -50,67 +50,67 @@ const N = {
|
|
|
50
50
|
z-index: 9999;
|
|
51
51
|
overflow: hidden;
|
|
52
52
|
`;
|
|
53
|
-
const
|
|
54
|
-
for (let
|
|
55
|
-
const
|
|
56
|
-
if (
|
|
57
|
-
const b = 100 /
|
|
58
|
-
|
|
53
|
+
const h = [];
|
|
54
|
+
for (let $ = 0; $ < l; $++) {
|
|
55
|
+
const w = document.createElement("div");
|
|
56
|
+
if (a === "horizontal") {
|
|
57
|
+
const b = 100 / l, C = `calc(${b}% + 1px)`;
|
|
58
|
+
w.style.cssText = `
|
|
59
59
|
position: absolute;
|
|
60
|
-
top: ${b *
|
|
60
|
+
top: ${b * $}%;
|
|
61
61
|
left: 0;
|
|
62
62
|
width: 100%;
|
|
63
|
-
height: ${
|
|
64
|
-
background: ${
|
|
65
|
-
transform: scaleX(${
|
|
66
|
-
transform-origin: ${
|
|
63
|
+
height: ${C};
|
|
64
|
+
background: ${n};
|
|
65
|
+
transform: scaleX(${p === "hidden" ? 0 : 1});
|
|
66
|
+
transform-origin: ${d} center;
|
|
67
67
|
will-change: transform;
|
|
68
68
|
`;
|
|
69
69
|
} else {
|
|
70
|
-
const b = 100 /
|
|
71
|
-
|
|
70
|
+
const b = 100 / l, C = `calc(${b}% + 1px)`;
|
|
71
|
+
w.style.cssText = `
|
|
72
72
|
position: absolute;
|
|
73
73
|
top: 0;
|
|
74
|
-
left: ${b *
|
|
75
|
-
width: ${
|
|
74
|
+
left: ${b * $}%;
|
|
75
|
+
width: ${C};
|
|
76
76
|
height: 100%;
|
|
77
|
-
background: ${
|
|
78
|
-
transform: scaleY(${
|
|
79
|
-
transform-origin: ${
|
|
77
|
+
background: ${n};
|
|
78
|
+
transform: scaleY(${p === "hidden" ? 0 : 1});
|
|
79
|
+
transform-origin: ${d === "left" ? "top" : "bottom"} center;
|
|
80
80
|
will-change: transform;
|
|
81
81
|
`;
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
h.push(w), f.appendChild(w);
|
|
84
84
|
}
|
|
85
|
-
return
|
|
85
|
+
return o.appendChild(f), { container: f, blinds: h };
|
|
86
86
|
};
|
|
87
87
|
return {
|
|
88
|
-
out: () => {
|
|
89
|
-
let
|
|
90
|
-
e = new Promise((
|
|
91
|
-
c =
|
|
88
|
+
out: (o) => {
|
|
89
|
+
let p = null;
|
|
90
|
+
e = new Promise((f) => {
|
|
91
|
+
c = f;
|
|
92
92
|
});
|
|
93
|
-
const d = (
|
|
94
|
-
const
|
|
93
|
+
const d = (f) => {
|
|
94
|
+
const h = 1 - f;
|
|
95
95
|
return {
|
|
96
|
-
transform:
|
|
96
|
+
transform: a === "horizontal" ? `scaleX(${h})` : `scaleY(${h})`
|
|
97
97
|
};
|
|
98
98
|
};
|
|
99
99
|
return {
|
|
100
|
-
|
|
101
|
-
physics:
|
|
100
|
+
items: Array.from({ length: l }, (f, h) => ({
|
|
101
|
+
physics: r,
|
|
102
102
|
offset: 0.2,
|
|
103
103
|
css: {
|
|
104
104
|
// Use getter for lazy element access (evaluated after prepare)
|
|
105
105
|
get element() {
|
|
106
|
-
return
|
|
106
|
+
return p == null ? void 0 : p.blinds[h];
|
|
107
107
|
},
|
|
108
108
|
style: d
|
|
109
109
|
}
|
|
110
110
|
})),
|
|
111
111
|
schedule: "stagger",
|
|
112
|
-
prepare: (
|
|
113
|
-
|
|
112
|
+
prepare: () => {
|
|
113
|
+
g(o), o.style.zIndex = "1000", p = y(o, "hidden", "left");
|
|
114
114
|
},
|
|
115
115
|
onStart: () => {
|
|
116
116
|
},
|
|
@@ -119,46 +119,46 @@ const N = {
|
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
121
|
},
|
|
122
|
-
in: () => {
|
|
123
|
-
let
|
|
124
|
-
const d = (
|
|
125
|
-
const
|
|
122
|
+
in: (o) => {
|
|
123
|
+
let p = null;
|
|
124
|
+
const d = (f) => {
|
|
125
|
+
const h = 1 - f;
|
|
126
126
|
return {
|
|
127
|
-
transform:
|
|
127
|
+
transform: a === "horizontal" ? `scaleX(${h})` : `scaleY(${h})`
|
|
128
128
|
};
|
|
129
129
|
};
|
|
130
130
|
return {
|
|
131
|
-
|
|
131
|
+
items: Array.from({ length: l }, (f, h) => ({
|
|
132
132
|
physics: s,
|
|
133
133
|
offset: 0.2,
|
|
134
134
|
css: {
|
|
135
135
|
// Use getter for lazy element access (evaluated after prepare)
|
|
136
136
|
get element() {
|
|
137
|
-
return
|
|
137
|
+
return p == null ? void 0 : p.blinds[h];
|
|
138
138
|
},
|
|
139
139
|
style: d
|
|
140
140
|
}
|
|
141
141
|
})),
|
|
142
142
|
schedule: "stagger",
|
|
143
|
-
prepare: (
|
|
144
|
-
|
|
143
|
+
prepare: () => {
|
|
144
|
+
o.style.position = "relative", o.style.zIndex = "0", p = y(o, "closed", "right");
|
|
145
145
|
},
|
|
146
146
|
onStart: () => {
|
|
147
147
|
},
|
|
148
148
|
wait: async () => {
|
|
149
|
-
e && await e, await
|
|
149
|
+
e && await e, await F(i);
|
|
150
150
|
},
|
|
151
151
|
onEnd: () => {
|
|
152
|
-
|
|
152
|
+
p && p.container && p.container.remove();
|
|
153
153
|
}
|
|
154
154
|
};
|
|
155
155
|
}
|
|
156
156
|
};
|
|
157
|
-
},
|
|
157
|
+
}, G = {
|
|
158
158
|
spring: { stiffness: 1, damping: 1 }
|
|
159
|
-
},
|
|
159
|
+
}, Z = {
|
|
160
160
|
spring: { stiffness: 20, damping: 25 }
|
|
161
|
-
},
|
|
161
|
+
}, J = "#000000", K = "circle", m = "CURTAIN_REVEAL_OVERLAY_ID", Q = {
|
|
162
162
|
position: "fixed",
|
|
163
163
|
inset: "0",
|
|
164
164
|
width: "100vw",
|
|
@@ -168,17 +168,17 @@ const N = {
|
|
|
168
168
|
alignItems: "center",
|
|
169
169
|
justifyContent: "center",
|
|
170
170
|
overflow: "hidden"
|
|
171
|
-
},
|
|
171
|
+
}, R = {
|
|
172
172
|
position: "relative",
|
|
173
173
|
display: "inline-block",
|
|
174
174
|
height: "5.5rem",
|
|
175
175
|
overflow: "hidden"
|
|
176
|
-
},
|
|
176
|
+
}, tt = {
|
|
177
177
|
display: "flex",
|
|
178
178
|
height: "100%",
|
|
179
179
|
willChange: "transform",
|
|
180
180
|
transition: "transform 0.3s ease"
|
|
181
|
-
},
|
|
181
|
+
}, st = {
|
|
182
182
|
display: "inline-flex",
|
|
183
183
|
alignItems: "center",
|
|
184
184
|
justifyContent: "center",
|
|
@@ -187,39 +187,39 @@ const N = {
|
|
|
187
187
|
fontWeight: "900",
|
|
188
188
|
letterSpacing: "0.02em",
|
|
189
189
|
color: "#FFFFFF"
|
|
190
|
-
},
|
|
191
|
-
function
|
|
190
|
+
}, it = 0.4, A = 0.5, nt = 0.2;
|
|
191
|
+
function et(t, i) {
|
|
192
192
|
switch (t) {
|
|
193
193
|
case "circle":
|
|
194
194
|
return `circle(${i * 100}% at 50% 50%)`;
|
|
195
195
|
case "square":
|
|
196
196
|
return `inset(${(1 - i) * 50}% round ${10 * i}%)`;
|
|
197
197
|
case "triangle": {
|
|
198
|
-
const
|
|
199
|
-
return `polygon(50% ${50 -
|
|
198
|
+
const l = i * 100;
|
|
199
|
+
return `polygon(50% ${50 - l}%, ${50 - l}% ${50 + l}%, ${50 + l}% ${50 + l}%)`;
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
}
|
|
203
|
-
const
|
|
203
|
+
const rt = (t) => t.reduce((i, l) => i + l, 0), Mt = (t = {}) => {
|
|
204
204
|
const {
|
|
205
|
-
background: i =
|
|
206
|
-
texts:
|
|
207
|
-
shape:
|
|
208
|
-
textStyle:
|
|
209
|
-
} = t, s = t.physics ??
|
|
205
|
+
background: i = J,
|
|
206
|
+
texts: l = [],
|
|
207
|
+
shape: a = K,
|
|
208
|
+
textStyle: n = {}
|
|
209
|
+
} = t, s = t.physics ?? Z, r = t.physics ?? G;
|
|
210
210
|
return {
|
|
211
211
|
out: (e, c) => {
|
|
212
212
|
const y = e.style.opacity;
|
|
213
213
|
return {
|
|
214
|
-
physics:
|
|
214
|
+
physics: r,
|
|
215
215
|
from: 1,
|
|
216
216
|
to: 0,
|
|
217
|
-
prepare: (
|
|
218
|
-
|
|
217
|
+
prepare: () => {
|
|
218
|
+
g(e, c), e.style.opacity = "1";
|
|
219
219
|
},
|
|
220
|
-
tick: (
|
|
221
|
-
const
|
|
222
|
-
e.style.opacity = String(
|
|
220
|
+
tick: (o) => {
|
|
221
|
+
const p = Math.max(0, o - it);
|
|
222
|
+
e.style.opacity = String(p);
|
|
223
223
|
},
|
|
224
224
|
onEnd: () => {
|
|
225
225
|
e.style.opacity = y;
|
|
@@ -227,17 +227,17 @@ const ct = (t) => t.reduce((i, o) => i + o, 0), jt = (t = {}) => {
|
|
|
227
227
|
};
|
|
228
228
|
},
|
|
229
229
|
in: (e) => {
|
|
230
|
-
let c = null, y = null,
|
|
231
|
-
const
|
|
232
|
-
|
|
230
|
+
let c = null, y = null, o = null;
|
|
231
|
+
const p = document.body.style.overflow, d = document.getElementById(
|
|
232
|
+
m
|
|
233
233
|
);
|
|
234
234
|
let u = [];
|
|
235
|
-
const
|
|
236
|
-
c = document.createElement("div"), c.id =
|
|
237
|
-
const
|
|
238
|
-
|
|
239
|
-
}), u = Array.from(
|
|
240
|
-
(
|
|
235
|
+
const f = () => {
|
|
236
|
+
c = document.createElement("div"), c.id = m, Object.assign(c.style, Q, { background: i }), document.body.appendChild(c), y = document.createElement("div"), Object.assign(y.style, R), c.appendChild(y), o = document.createElement("div"), Object.assign(o.style, tt), y.appendChild(o), l.forEach((h) => {
|
|
237
|
+
const $ = document.createElement("div");
|
|
238
|
+
$.textContent = h, Object.assign($.style, st, n), o.appendChild($);
|
|
239
|
+
}), u = Array.from(o.children).map(
|
|
240
|
+
(h) => h.getBoundingClientRect().width
|
|
241
241
|
);
|
|
242
242
|
};
|
|
243
243
|
return {
|
|
@@ -245,74 +245,78 @@ const ct = (t) => t.reduce((i, o) => i + o, 0), jt = (t = {}) => {
|
|
|
245
245
|
from: 0,
|
|
246
246
|
to: 1,
|
|
247
247
|
prepare: () => {
|
|
248
|
-
document.body.style.overflow = "hidden", e.style.opacity = "1",
|
|
248
|
+
document.body.style.overflow = "hidden", e.style.opacity = "1", d == null || d.remove(), f(), c && y && (c.style.clipPath = "none", y.style.transform = "scale(1)");
|
|
249
249
|
},
|
|
250
|
-
tick: (
|
|
251
|
-
if (!(!c || !y || !
|
|
252
|
-
if (
|
|
253
|
-
const
|
|
254
|
-
Math.floor(
|
|
255
|
-
|
|
256
|
-
), b = u[
|
|
257
|
-
y.style.width = `${b}px`,
|
|
250
|
+
tick: (h) => {
|
|
251
|
+
if (!(!c || !y || !o)) {
|
|
252
|
+
if (h <= A && l.length > 0) {
|
|
253
|
+
const $ = h / A, w = Math.min(
|
|
254
|
+
Math.floor($ * l.length),
|
|
255
|
+
l.length - 1
|
|
256
|
+
), b = u[w] ?? 0, C = rt(u.slice(0, w));
|
|
257
|
+
y.style.width = `${b}px`, o.style.transform = `translateX(-${C}px)`;
|
|
258
258
|
}
|
|
259
|
-
if (
|
|
260
|
-
const
|
|
259
|
+
if (h > A) {
|
|
260
|
+
const w = 1 - Math.max(
|
|
261
261
|
0,
|
|
262
|
-
Math.min(1, (
|
|
262
|
+
Math.min(1, (h - A) / nt)
|
|
263
263
|
);
|
|
264
|
-
c.style.clipPath =
|
|
264
|
+
c.style.clipPath = et(a, w), y.style.transform = `scale(${w})`;
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
267
|
},
|
|
268
268
|
onEnd: () => {
|
|
269
|
-
c == null || c.remove(), c = y =
|
|
269
|
+
c == null || c.remove(), c = y = o = null, document.body.style.overflow = p;
|
|
270
270
|
}
|
|
271
271
|
};
|
|
272
272
|
}
|
|
273
273
|
};
|
|
274
|
-
},
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
274
|
+
}, at = {
|
|
275
|
+
spring: {
|
|
276
|
+
stiffness: 600,
|
|
277
|
+
damping: 40,
|
|
278
|
+
restDelta: 0.1,
|
|
279
|
+
restSpeed: 1e14
|
|
278
280
|
}
|
|
279
|
-
},
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
281
|
+
}, ot = {
|
|
282
|
+
spring: {
|
|
283
|
+
stiffness: 600,
|
|
284
|
+
damping: 40,
|
|
285
|
+
restDelta: 0.1,
|
|
286
|
+
restSpeed: 1e14
|
|
283
287
|
}
|
|
284
|
-
},
|
|
285
|
-
function
|
|
286
|
-
const i = x(document.body, t.positionedParent),
|
|
288
|
+
}, O = 0.05;
|
|
289
|
+
function T(t) {
|
|
290
|
+
const i = x(document.body, t.positionedParent), l = t.scroll.y, a = window.innerHeight - i.top;
|
|
287
291
|
return {
|
|
288
|
-
top:
|
|
292
|
+
top: l,
|
|
289
293
|
left: 0,
|
|
290
294
|
width: i.width,
|
|
291
|
-
height:
|
|
295
|
+
height: a
|
|
292
296
|
};
|
|
293
297
|
}
|
|
294
|
-
const
|
|
295
|
-
const { direction: i = "enter" } = t,
|
|
296
|
-
let { promise:
|
|
298
|
+
const Bt = (t = {}) => {
|
|
299
|
+
const { direction: i = "enter" } = t, l = t.physics ?? (i === "enter" ? at : ot);
|
|
300
|
+
let { promise: a, resolve: n } = E();
|
|
297
301
|
return i === "enter" ? {
|
|
298
302
|
// Entering page: scales up from small (0.8 → 1) with fade in
|
|
299
|
-
in: (s,
|
|
300
|
-
const e =
|
|
303
|
+
in: (s, r) => {
|
|
304
|
+
const e = T(r), c = e.left + e.width / 2, y = e.top + e.height / 2;
|
|
301
305
|
return {
|
|
302
|
-
physics:
|
|
306
|
+
physics: l,
|
|
303
307
|
prepare: () => {
|
|
304
308
|
s.style.opacity = "0", s.style.willChange = "transform, opacity", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.transformOrigin = `${c}px ${y}px`;
|
|
305
309
|
},
|
|
306
310
|
wait: async () => {
|
|
307
|
-
if (
|
|
308
|
-
await
|
|
309
|
-
const
|
|
310
|
-
|
|
311
|
+
if (a) {
|
|
312
|
+
await a;
|
|
313
|
+
const o = E();
|
|
314
|
+
a = o.promise, n = o.resolve;
|
|
311
315
|
}
|
|
312
316
|
},
|
|
313
|
-
css: (
|
|
314
|
-
transform: `scale(${1 -
|
|
315
|
-
opacity:
|
|
317
|
+
css: (o) => ({
|
|
318
|
+
transform: `scale(${1 - O + o * O})`,
|
|
319
|
+
opacity: o
|
|
316
320
|
}),
|
|
317
321
|
onEnd: () => {
|
|
318
322
|
s.style.opacity = "1", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "", s.style.transformOrigin = "";
|
|
@@ -320,41 +324,41 @@ const Gt = (t = {}) => {
|
|
|
320
324
|
};
|
|
321
325
|
},
|
|
322
326
|
// Exiting page: scales up (1 → 1.2) with fade out, goes to back
|
|
323
|
-
out: (s,
|
|
324
|
-
const e =
|
|
327
|
+
out: (s, r) => {
|
|
328
|
+
const e = T(r), c = e.left + e.width / 2, y = e.top + e.height / 2 + r.scrollOffset.y;
|
|
325
329
|
return {
|
|
326
|
-
physics:
|
|
327
|
-
prepare: (
|
|
328
|
-
|
|
330
|
+
physics: l,
|
|
331
|
+
prepare: () => {
|
|
332
|
+
g(s, r), s.style.zIndex = "-1", s.style.willChange = "transform, opacity", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.pointerEvents = "none", s.style.transformOrigin = `${c}px ${y}px`;
|
|
329
333
|
},
|
|
330
|
-
css: (
|
|
331
|
-
transform: `scale(${1 + (1 -
|
|
332
|
-
opacity:
|
|
334
|
+
css: (o) => ({
|
|
335
|
+
transform: `scale(${1 + (1 - o) * O})`,
|
|
336
|
+
opacity: o
|
|
333
337
|
}),
|
|
334
338
|
onEnd: () => {
|
|
335
|
-
|
|
339
|
+
n && n();
|
|
336
340
|
}
|
|
337
341
|
};
|
|
338
342
|
}
|
|
339
343
|
} : {
|
|
340
344
|
// Entering page: scales down from large (1.2 → 1) with fade in
|
|
341
|
-
in: (s,
|
|
342
|
-
const e =
|
|
345
|
+
in: (s, r) => {
|
|
346
|
+
const e = T(r), c = e.left + e.width / 2, y = e.top + e.height / 2;
|
|
343
347
|
return {
|
|
344
|
-
physics:
|
|
348
|
+
physics: l,
|
|
345
349
|
prepare: () => {
|
|
346
350
|
s.style.opacity = "0", s.style.willChange = "transform, opacity", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.transformOrigin = `${c}px ${y}px`;
|
|
347
351
|
},
|
|
348
352
|
wait: async () => {
|
|
349
|
-
if (
|
|
350
|
-
await
|
|
351
|
-
const
|
|
352
|
-
|
|
353
|
+
if (a) {
|
|
354
|
+
await a;
|
|
355
|
+
const o = E();
|
|
356
|
+
a = o.promise, n = o.resolve;
|
|
353
357
|
}
|
|
354
358
|
},
|
|
355
|
-
css: (
|
|
356
|
-
transform: `scale(${1 +
|
|
357
|
-
opacity:
|
|
359
|
+
css: (o) => ({
|
|
360
|
+
transform: `scale(${1 + O - o * O})`,
|
|
361
|
+
opacity: o
|
|
358
362
|
}),
|
|
359
363
|
onEnd: () => {
|
|
360
364
|
s.style.opacity = "1", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "", s.style.transformOrigin = "";
|
|
@@ -362,243 +366,243 @@ const Gt = (t = {}) => {
|
|
|
362
366
|
};
|
|
363
367
|
},
|
|
364
368
|
// Exiting page: scales down to small (1 → 0.8) with fade out
|
|
365
|
-
out: (s,
|
|
366
|
-
const e =
|
|
369
|
+
out: (s, r) => {
|
|
370
|
+
const e = T(r), c = e.left + e.width / 2, y = e.top + e.height / 2 + r.scrollOffset.y;
|
|
367
371
|
return {
|
|
368
|
-
physics:
|
|
369
|
-
prepare: (
|
|
370
|
-
|
|
372
|
+
physics: l,
|
|
373
|
+
prepare: () => {
|
|
374
|
+
g(s, r), s.style.zIndex = "100", s.style.willChange = "transform, opacity", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.pointerEvents = "none", s.style.transformOrigin = `${c}px ${y}px`;
|
|
371
375
|
},
|
|
372
|
-
css: (
|
|
373
|
-
transform: `scale(${1 - (1 -
|
|
374
|
-
opacity:
|
|
376
|
+
css: (o) => ({
|
|
377
|
+
transform: `scale(${1 - (1 - o) * O})`,
|
|
378
|
+
opacity: o
|
|
375
379
|
}),
|
|
376
380
|
onEnd: () => {
|
|
377
|
-
|
|
381
|
+
n && n();
|
|
378
382
|
}
|
|
379
383
|
};
|
|
380
384
|
}
|
|
381
385
|
};
|
|
382
|
-
},
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
+
}, lt = {
|
|
387
|
+
spring: {
|
|
388
|
+
stiffness: 170,
|
|
389
|
+
damping: 22
|
|
386
390
|
}
|
|
387
|
-
},
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
+
}, ct = {
|
|
392
|
+
spring: {
|
|
393
|
+
stiffness: 170,
|
|
394
|
+
damping: 22
|
|
391
395
|
}
|
|
392
|
-
},
|
|
393
|
-
const { opacity: i = !1, direction:
|
|
394
|
-
return
|
|
395
|
-
in: (
|
|
396
|
-
physics:
|
|
396
|
+
}, qt = (t = {}) => {
|
|
397
|
+
const { opacity: i = !1, direction: l = "enter" } = t, a = t.physics ?? (l === "enter" ? lt : ct);
|
|
398
|
+
return l === "enter" ? {
|
|
399
|
+
in: (n) => ({
|
|
400
|
+
physics: a,
|
|
397
401
|
prepare: () => {
|
|
398
|
-
|
|
402
|
+
n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
399
403
|
},
|
|
400
404
|
css: (s) => {
|
|
401
|
-
const
|
|
405
|
+
const r = {
|
|
402
406
|
transform: `translate3d(${(1 - s) * 100}%, 0, 0)`
|
|
403
407
|
};
|
|
404
|
-
return i && (
|
|
408
|
+
return i && (r.opacity = s), r;
|
|
405
409
|
},
|
|
406
410
|
onEnd: () => {
|
|
407
|
-
|
|
411
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
408
412
|
}
|
|
409
413
|
}),
|
|
410
|
-
out: (
|
|
411
|
-
physics:
|
|
412
|
-
prepare: (
|
|
413
|
-
|
|
414
|
+
out: (n, s) => ({
|
|
415
|
+
physics: a,
|
|
416
|
+
prepare: () => {
|
|
417
|
+
g(n, s), n.style.zIndex = "-1", n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
414
418
|
},
|
|
415
|
-
css: (
|
|
419
|
+
css: (r) => {
|
|
416
420
|
const e = {
|
|
417
|
-
transform: `translate3d(${-(1 -
|
|
421
|
+
transform: `translate3d(${-(1 - r) * 20}%, 0, 0)`
|
|
418
422
|
};
|
|
419
|
-
return i && (e.opacity =
|
|
423
|
+
return i && (e.opacity = r), e;
|
|
420
424
|
}
|
|
421
425
|
})
|
|
422
426
|
} : {
|
|
423
|
-
in: (
|
|
424
|
-
physics:
|
|
427
|
+
in: (n) => ({
|
|
428
|
+
physics: a,
|
|
425
429
|
prepare: () => {
|
|
426
|
-
|
|
430
|
+
n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
427
431
|
},
|
|
428
432
|
css: (s) => {
|
|
429
|
-
const
|
|
433
|
+
const r = {
|
|
430
434
|
transform: `translate3d(${-(1 - s) * 20}%, 0, 0)`
|
|
431
435
|
};
|
|
432
|
-
return i && (
|
|
436
|
+
return i && (r.opacity = s), r;
|
|
433
437
|
},
|
|
434
438
|
onEnd: () => {
|
|
435
|
-
|
|
439
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
436
440
|
}
|
|
437
441
|
}),
|
|
438
|
-
out: (
|
|
439
|
-
physics:
|
|
440
|
-
prepare: (
|
|
441
|
-
|
|
442
|
+
out: (n, s) => ({
|
|
443
|
+
physics: a,
|
|
444
|
+
prepare: () => {
|
|
445
|
+
g(n, s), n.style.zIndex = "100", n.style.willChange = i ? "transform, opacity" : "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
442
446
|
},
|
|
443
|
-
css: (
|
|
447
|
+
css: (r) => {
|
|
444
448
|
const e = {
|
|
445
|
-
transform: `translate3d(${(1 -
|
|
449
|
+
transform: `translate3d(${(1 - r) * 100}%, 0, 0)`
|
|
446
450
|
};
|
|
447
|
-
return i && (e.opacity =
|
|
451
|
+
return i && (e.opacity = r), e;
|
|
448
452
|
}
|
|
449
453
|
})
|
|
450
454
|
};
|
|
451
|
-
},
|
|
455
|
+
}, yt = {
|
|
452
456
|
spring: { stiffness: 180, damping: 20, doubleSpring: !0 }
|
|
453
|
-
},
|
|
457
|
+
}, ht = {
|
|
454
458
|
spring: { stiffness: 170, damping: 20, doubleSpring: !0 }
|
|
455
|
-
},
|
|
456
|
-
const { transitionDelay: i =
|
|
457
|
-
let { promise:
|
|
459
|
+
}, pt = 0, jt = (t = {}) => {
|
|
460
|
+
const { transitionDelay: i = pt } = t, l = t.physics ?? ht, a = t.physics ?? yt;
|
|
461
|
+
let { promise: n, resolve: s } = E();
|
|
458
462
|
return {
|
|
459
|
-
in: (
|
|
460
|
-
physics:
|
|
463
|
+
in: (r) => ({
|
|
464
|
+
physics: l,
|
|
461
465
|
prepare: () => {
|
|
462
|
-
|
|
466
|
+
r.style.opacity = "0", r.style.willChange = "opacity";
|
|
463
467
|
},
|
|
464
468
|
wait: async () => {
|
|
465
|
-
if (
|
|
466
|
-
await
|
|
469
|
+
if (n) {
|
|
470
|
+
await n;
|
|
467
471
|
const e = E();
|
|
468
|
-
|
|
472
|
+
n = e.promise, s = e.resolve, await F(i);
|
|
469
473
|
}
|
|
470
474
|
},
|
|
471
475
|
css: (e) => ({
|
|
472
476
|
opacity: e
|
|
473
477
|
}),
|
|
474
478
|
onEnd: () => {
|
|
475
|
-
|
|
479
|
+
r.style.willChange = "auto", r.style.opacity = "1";
|
|
476
480
|
}
|
|
477
481
|
}),
|
|
478
|
-
out: (
|
|
479
|
-
physics:
|
|
482
|
+
out: (r, e) => ({
|
|
483
|
+
physics: a,
|
|
480
484
|
css: (c) => ({
|
|
481
485
|
opacity: c
|
|
482
486
|
}),
|
|
483
487
|
prepare: () => {
|
|
484
|
-
|
|
488
|
+
g(r, e), r.style.willChange = "opacity";
|
|
485
489
|
},
|
|
486
490
|
onEnd: () => {
|
|
487
|
-
s && s(),
|
|
491
|
+
s && s(), r.style.willChange = "auto";
|
|
488
492
|
}
|
|
489
493
|
})
|
|
490
494
|
};
|
|
491
|
-
},
|
|
495
|
+
}, dt = {
|
|
492
496
|
scaleDown: { stiffness: 20, damping: 7 },
|
|
493
497
|
// Soft start for cinematic scale
|
|
494
498
|
translate: { stiffness: 15, damping: 7 },
|
|
495
499
|
// Medium for movement
|
|
496
500
|
scaleUp: { stiffness: 20, damping: 7 }
|
|
497
501
|
// Crisp return to full size
|
|
498
|
-
},
|
|
502
|
+
}, S = {
|
|
499
503
|
scaleDown: 0,
|
|
500
504
|
// Start immediately
|
|
501
505
|
translate: 0.2,
|
|
502
506
|
// Start when scaleDown is 25% complete
|
|
503
507
|
scaleUp: 0.8
|
|
504
508
|
// Start when translate is 70% complete
|
|
505
|
-
},
|
|
506
|
-
var
|
|
507
|
-
const i =
|
|
509
|
+
}, ut = 0.8, ft = "white", Nt = (t) => {
|
|
510
|
+
var n;
|
|
511
|
+
const i = dt, l = ut, a = ((n = t == null ? void 0 : t.border) == null ? void 0 : n.color) ?? ft;
|
|
508
512
|
return {
|
|
509
|
-
out: async (s,
|
|
510
|
-
const e =
|
|
513
|
+
out: async (s, r) => {
|
|
514
|
+
const e = I(r), c = x(document.body, r.positionedParent), y = wt(a, {
|
|
511
515
|
...e,
|
|
512
516
|
top: c.top
|
|
513
|
-
}),
|
|
517
|
+
}), o = {
|
|
514
518
|
scale: 1,
|
|
515
519
|
translateY: -e.top
|
|
516
|
-
},
|
|
517
|
-
s.style.transform = `translateY(${
|
|
518
|
-
const
|
|
519
|
-
|
|
520
|
+
}, p = () => {
|
|
521
|
+
s.style.transform = `translateY(${o.translateY}px) scale(${o.scale})`;
|
|
522
|
+
const d = (e.width - e.width * o.scale) / 2, u = (e.height - e.height * o.scale) / 2;
|
|
523
|
+
gt(y, d, u);
|
|
520
524
|
};
|
|
521
525
|
return {
|
|
522
|
-
|
|
526
|
+
items: [
|
|
523
527
|
// Spring 1: Scale Down (1 → scale)
|
|
524
528
|
{
|
|
525
529
|
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleDown },
|
|
526
|
-
offset:
|
|
527
|
-
tick: (
|
|
528
|
-
const u = 1 -
|
|
529
|
-
|
|
530
|
+
offset: S.scaleDown,
|
|
531
|
+
tick: (d) => {
|
|
532
|
+
const u = 1 - d;
|
|
533
|
+
o.scale = 1 - (1 - l) * u, p();
|
|
530
534
|
}
|
|
531
535
|
},
|
|
532
536
|
// Spring 2: Translate (vertical movement)
|
|
533
537
|
{
|
|
534
538
|
physics: (t == null ? void 0 : t.physics) ?? { spring: i.translate },
|
|
535
|
-
offset:
|
|
536
|
-
tick: (
|
|
537
|
-
const u = 1 -
|
|
538
|
-
|
|
539
|
+
offset: S.translate,
|
|
540
|
+
tick: (d) => {
|
|
541
|
+
const u = 1 - d;
|
|
542
|
+
o.translateY = -e.top - e.height * u, p();
|
|
539
543
|
}
|
|
540
544
|
},
|
|
541
545
|
// Spring 3: Scale Up (scale → 1)
|
|
542
546
|
{
|
|
543
547
|
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleUp },
|
|
544
|
-
offset:
|
|
545
|
-
tick: (
|
|
546
|
-
const u = 1 -
|
|
547
|
-
|
|
548
|
+
offset: S.scaleUp,
|
|
549
|
+
tick: (d) => {
|
|
550
|
+
const u = 1 - d;
|
|
551
|
+
o.scale = l + (1 - l) * u, p();
|
|
548
552
|
}
|
|
549
553
|
}
|
|
550
554
|
],
|
|
551
555
|
schedule: "stagger",
|
|
552
556
|
prepare: () => {
|
|
553
|
-
|
|
554
|
-
for (const
|
|
555
|
-
|
|
557
|
+
g(s), Y(s, e), _(s, e), $t(s, e);
|
|
558
|
+
for (const d of y)
|
|
559
|
+
r.positionedParent.appendChild(d);
|
|
556
560
|
},
|
|
557
561
|
onEnd: () => {
|
|
558
562
|
s.style.clipPath = "", s.style.transformOrigin = "", setTimeout(() => {
|
|
559
|
-
for (const
|
|
560
|
-
|
|
563
|
+
for (const d of y)
|
|
564
|
+
r.positionedParent.removeChild(d);
|
|
561
565
|
}, 1e3);
|
|
562
566
|
}
|
|
563
567
|
};
|
|
564
568
|
},
|
|
565
|
-
in: async (s,
|
|
566
|
-
const e =
|
|
567
|
-
scale:
|
|
569
|
+
in: async (s, r) => {
|
|
570
|
+
const e = I(r), c = {
|
|
571
|
+
scale: l,
|
|
568
572
|
translateY: -e.top + e.height
|
|
569
573
|
}, y = () => {
|
|
570
574
|
s.style.transform = `translateY(${c.translateY}px) scale(${c.scale})`;
|
|
571
575
|
};
|
|
572
576
|
return {
|
|
573
|
-
|
|
577
|
+
items: [
|
|
574
578
|
// Spring 1: Scale Down (1 → scale) - element starts scaled, shrinks further
|
|
575
579
|
{
|
|
576
580
|
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleDown },
|
|
577
|
-
offset:
|
|
578
|
-
tick: (
|
|
579
|
-
c.scale = 1 - (1 -
|
|
581
|
+
offset: S.scaleDown,
|
|
582
|
+
tick: (o) => {
|
|
583
|
+
c.scale = 1 - (1 - l) * o, y();
|
|
580
584
|
}
|
|
581
585
|
},
|
|
582
586
|
// Spring 2: Translate (vertical movement from bottom to top)
|
|
583
587
|
{
|
|
584
588
|
physics: (t == null ? void 0 : t.physics) ?? { spring: i.translate },
|
|
585
|
-
offset:
|
|
586
|
-
tick: (
|
|
587
|
-
c.translateY = -e.top + e.height * (1 -
|
|
589
|
+
offset: S.translate,
|
|
590
|
+
tick: (o) => {
|
|
591
|
+
c.translateY = -e.top + e.height * (1 - o), y();
|
|
588
592
|
}
|
|
589
593
|
},
|
|
590
594
|
// Spring 3: Scale Up (scale → 1) - element returns to full size
|
|
591
595
|
{
|
|
592
596
|
physics: (t == null ? void 0 : t.physics) ?? { spring: i.scaleUp },
|
|
593
|
-
offset:
|
|
594
|
-
tick: (
|
|
595
|
-
c.scale =
|
|
597
|
+
offset: S.scaleUp,
|
|
598
|
+
tick: (o) => {
|
|
599
|
+
c.scale = l + (1 - l) * o, y();
|
|
596
600
|
}
|
|
597
601
|
}
|
|
598
602
|
],
|
|
599
603
|
schedule: "stagger",
|
|
600
604
|
prepare: () => {
|
|
601
|
-
|
|
605
|
+
Y(s, e), _(s, e), s.style.transform = `translateY(${-e.top + e.height}px) scale(${l})`;
|
|
602
606
|
},
|
|
603
607
|
onEnd: () => {
|
|
604
608
|
s.style.clipPath = "", s.style.transformOrigin = "", s.style.transform = "";
|
|
@@ -607,45 +611,45 @@ const Gt = (t = {}) => {
|
|
|
607
611
|
}
|
|
608
612
|
};
|
|
609
613
|
};
|
|
610
|
-
function
|
|
611
|
-
const
|
|
612
|
-
t.topLeft.style.transform = `translate(${
|
|
614
|
+
function gt(t, i, l) {
|
|
615
|
+
const a = i * 0.7, n = l * 0.7;
|
|
616
|
+
t.topLeft.style.transform = `translate(${a}px, ${n}px)`, t.topRight.style.transform = `translate(${-a}px, ${n}px)`, t.bottomLeft.style.transform = `translate(${a}px, ${-n}px)`, t.bottomRight.style.transform = `translate(${-a}px, ${-n}px)`;
|
|
613
617
|
}
|
|
614
|
-
function
|
|
615
|
-
const
|
|
616
|
-
|
|
618
|
+
function wt(t = "white", i) {
|
|
619
|
+
const n = document.createElement("div");
|
|
620
|
+
n.style.position = "fixed", n.style.pointerEvents = "none", n.style.zIndex = "9999", n.style.top = `${i.top - 1}px`, n.style.left = `${i.left - 1}px`, n.style.width = "15px", n.style.height = "15px";
|
|
617
621
|
const s = document.createElement("div");
|
|
618
622
|
s.style.position = "absolute", s.style.width = "15px", s.style.height = "1px", s.style.backgroundColor = t, s.style.top = "0", s.style.left = "0";
|
|
619
|
-
const
|
|
620
|
-
|
|
623
|
+
const r = document.createElement("div");
|
|
624
|
+
r.style.position = "absolute", r.style.width = "1px", r.style.height = "15px", r.style.backgroundColor = t, r.style.top = "0", r.style.left = "0", n.appendChild(s), n.appendChild(r);
|
|
621
625
|
const e = document.createElement("div");
|
|
622
626
|
e.style.position = "fixed", e.style.pointerEvents = "none", e.style.zIndex = "9999", e.style.top = `${i.top - 1}px`, e.style.left = `${i.left + i.width - 15 + 1}px`, e.style.width = "15px", e.style.height = "15px";
|
|
623
627
|
const c = document.createElement("div");
|
|
624
628
|
c.style.position = "absolute", c.style.width = "15px", c.style.height = "1px", c.style.backgroundColor = t, c.style.top = "0", c.style.right = "0";
|
|
625
629
|
const y = document.createElement("div");
|
|
626
630
|
y.style.position = "absolute", y.style.width = "1px", y.style.height = "15px", y.style.backgroundColor = t, y.style.top = "0", y.style.right = "0", e.appendChild(c), e.appendChild(y);
|
|
627
|
-
const
|
|
628
|
-
|
|
631
|
+
const o = document.createElement("div");
|
|
632
|
+
o.style.position = "fixed", o.style.pointerEvents = "none", o.style.zIndex = "9999", o.style.top = `${i.top + i.height - 15 + 1}px`, o.style.left = `${i.left - 1}px`, o.style.width = "15px", o.style.height = "15px";
|
|
633
|
+
const p = document.createElement("div");
|
|
634
|
+
p.style.position = "absolute", p.style.width = "15px", p.style.height = "1px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.left = "0";
|
|
629
635
|
const d = document.createElement("div");
|
|
630
|
-
d.style.position = "absolute", d.style.width = "
|
|
631
|
-
const h = document.createElement("div");
|
|
632
|
-
h.style.position = "absolute", h.style.width = "1px", h.style.height = "15px", h.style.backgroundColor = t, h.style.bottom = "0", h.style.left = "0", r.appendChild(d), r.appendChild(h);
|
|
636
|
+
d.style.position = "absolute", d.style.width = "1px", d.style.height = "15px", d.style.backgroundColor = t, d.style.bottom = "0", d.style.left = "0", o.appendChild(p), o.appendChild(d);
|
|
633
637
|
const u = document.createElement("div");
|
|
634
638
|
u.style.position = "fixed", u.style.pointerEvents = "none", u.style.zIndex = "9999", u.style.top = `${i.top + i.height - 15 + 1}px`, u.style.left = `${i.left + i.width - 15 + 1}px`, u.style.width = "15px", u.style.height = "15px";
|
|
635
|
-
const
|
|
636
|
-
|
|
637
|
-
const
|
|
638
|
-
return
|
|
639
|
-
topLeft:
|
|
639
|
+
const f = document.createElement("div");
|
|
640
|
+
f.style.position = "absolute", f.style.width = "15px", f.style.height = "1px", f.style.backgroundColor = t, f.style.bottom = "0", f.style.right = "0";
|
|
641
|
+
const h = document.createElement("div");
|
|
642
|
+
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(f), u.appendChild(h), {
|
|
643
|
+
topLeft: n,
|
|
640
644
|
topRight: e,
|
|
641
|
-
bottomLeft:
|
|
645
|
+
bottomLeft: o,
|
|
642
646
|
bottomRight: u,
|
|
643
647
|
*[Symbol.iterator]() {
|
|
644
|
-
yield
|
|
648
|
+
yield n, yield e, yield o, yield u;
|
|
645
649
|
}
|
|
646
650
|
};
|
|
647
651
|
}
|
|
648
|
-
function
|
|
652
|
+
function I(t) {
|
|
649
653
|
const i = x(document.body, t.positionedParent);
|
|
650
654
|
return {
|
|
651
655
|
top: t.scroll.y,
|
|
@@ -654,11 +658,11 @@ function _(t) {
|
|
|
654
658
|
height: window.innerHeight - i.top
|
|
655
659
|
};
|
|
656
660
|
}
|
|
657
|
-
function I(t, i) {
|
|
658
|
-
const o = i.left + i.width / 2, l = i.top + i.height / 2;
|
|
659
|
-
t.style.transformOrigin = `${o}px ${l}px`;
|
|
660
|
-
}
|
|
661
661
|
function Y(t, i) {
|
|
662
|
+
const l = i.left + i.width / 2, a = i.top + i.height / 2;
|
|
663
|
+
t.style.transformOrigin = `${l}px ${a}px`;
|
|
664
|
+
}
|
|
665
|
+
function _(t, i) {
|
|
662
666
|
t.style.clipPath = `polygon(
|
|
663
667
|
${i.left}px ${i.top}px,
|
|
664
668
|
${i.left + i.width}px ${i.top}px,
|
|
@@ -666,239 +670,219 @@ function Y(t, i) {
|
|
|
666
670
|
${i.left}px ${i.top + i.height}px
|
|
667
671
|
)`;
|
|
668
672
|
}
|
|
669
|
-
function
|
|
673
|
+
function $t(t, i) {
|
|
670
674
|
t.style.transform = `translateY(${-i.top}px)`;
|
|
671
675
|
}
|
|
672
|
-
const
|
|
676
|
+
const bt = {
|
|
673
677
|
spring: { stiffness: 300, damping: 30 }
|
|
674
678
|
};
|
|
675
|
-
function
|
|
679
|
+
function xt(t, i) {
|
|
676
680
|
return t.querySelector(`[data-hero-key="${i}"]`);
|
|
677
681
|
}
|
|
678
|
-
const
|
|
679
|
-
const i = t.physics ??
|
|
680
|
-
let a = null,
|
|
682
|
+
const Gt = (t = {}) => {
|
|
683
|
+
const i = t.physics ?? bt, l = t.maxDistance ?? 700;
|
|
684
|
+
let a = null, n = E();
|
|
681
685
|
return {
|
|
682
|
-
in: async (
|
|
683
|
-
const
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
if (!await new Promise((h) => {
|
|
692
|
-
a ? h(!0) : (s = h, setTimeout(() => {
|
|
693
|
-
s = null, h(!1);
|
|
694
|
-
}, o));
|
|
695
|
-
}) || !a)
|
|
696
|
-
return a = null, {
|
|
697
|
-
physics: i,
|
|
698
|
-
tick: () => {
|
|
699
|
-
}
|
|
700
|
-
// No fromNode, skip animation
|
|
701
|
-
};
|
|
702
|
-
const d = y.map((h) => {
|
|
703
|
-
const u = h.getAttribute("data-hero-key");
|
|
704
|
-
if (!u) return null;
|
|
705
|
-
const g = Ot(a, u);
|
|
706
|
-
if (!g) return null;
|
|
707
|
-
const p = h, w = x(a, g), f = x(c, p), b = w.left - f.left - e.scrollOffset.x, m = w.top - f.top - e.scrollOffset.y, H = w.width / f.width, X = w.height / f.height, z = p.style.transform, M = p.style.position, W = p.style.transformOrigin, B = p.style.zIndex, q = p.style.willChange;
|
|
686
|
+
in: async (s, r) => {
|
|
687
|
+
const e = s, c = Array.from(e.querySelectorAll("[data-hero-key]"));
|
|
688
|
+
await n.promise;
|
|
689
|
+
const y = c.map((o) => {
|
|
690
|
+
const p = o.getAttribute("data-hero-key");
|
|
691
|
+
if (!p) return null;
|
|
692
|
+
const d = xt(a, p);
|
|
693
|
+
if (!d) return null;
|
|
694
|
+
const u = o, f = x(a, d), h = x(e, u), $ = f.left - h.left - r.scrollOffset.x, w = f.top - h.top - r.scrollOffset.y, b = f.width / h.width, C = f.height / h.height, V = u.style.transform, U = u.style.position, H = u.style.transformOrigin, X = u.style.zIndex, z = u.style.willChange;
|
|
708
695
|
return {
|
|
709
|
-
toEl:
|
|
710
|
-
dx:
|
|
711
|
-
dy:
|
|
712
|
-
dw:
|
|
713
|
-
dh:
|
|
714
|
-
originalTransform:
|
|
715
|
-
originalPosition:
|
|
716
|
-
originalTransformOrigin:
|
|
717
|
-
originalZIndex:
|
|
718
|
-
originalWillChange:
|
|
696
|
+
toEl: u,
|
|
697
|
+
dx: $,
|
|
698
|
+
dy: w,
|
|
699
|
+
dw: b,
|
|
700
|
+
dh: C,
|
|
701
|
+
originalTransform: V,
|
|
702
|
+
originalPosition: U,
|
|
703
|
+
originalTransformOrigin: H,
|
|
704
|
+
originalZIndex: X,
|
|
705
|
+
originalWillChange: z
|
|
719
706
|
};
|
|
720
707
|
}).filter(
|
|
721
|
-
(
|
|
708
|
+
(o) => o !== null && Math.abs(o.dy) <= l
|
|
722
709
|
);
|
|
723
|
-
return a = null,
|
|
710
|
+
return a = null, n = E(), y.length === 0 ? {
|
|
724
711
|
physics: i,
|
|
725
712
|
tick: () => {
|
|
726
713
|
}
|
|
727
714
|
// No matching hero elements
|
|
728
715
|
} : {
|
|
729
|
-
|
|
716
|
+
items: y.map(({ toEl: o, dx: p, dy: d, dw: u, dh: f }) => ({
|
|
730
717
|
physics: i,
|
|
731
|
-
tick: (
|
|
732
|
-
|
|
718
|
+
tick: (h) => {
|
|
719
|
+
o.style.transform = `translate(${(1 - h) * p}px, ${(1 - h) * d}px) scale(${h + (1 - h) * u}, ${h + (1 - h) * f})`;
|
|
733
720
|
}
|
|
734
721
|
})),
|
|
735
722
|
schedule: "parallel",
|
|
736
723
|
prepare: () => {
|
|
737
|
-
|
|
738
|
-
|
|
724
|
+
y.forEach(({ toEl: o }) => {
|
|
725
|
+
o.style.position = "relative", o.style.transformOrigin = "top left", o.style.zIndex = "1000", o.style.willChange = "transform";
|
|
739
726
|
});
|
|
740
727
|
},
|
|
741
728
|
onEnd: () => {
|
|
742
|
-
|
|
729
|
+
y.forEach(
|
|
743
730
|
({
|
|
744
|
-
toEl:
|
|
745
|
-
originalTransform:
|
|
746
|
-
originalPosition:
|
|
747
|
-
originalTransformOrigin:
|
|
748
|
-
originalZIndex:
|
|
749
|
-
originalWillChange:
|
|
731
|
+
toEl: o,
|
|
732
|
+
originalTransform: p,
|
|
733
|
+
originalPosition: d,
|
|
734
|
+
originalTransformOrigin: u,
|
|
735
|
+
originalZIndex: f,
|
|
736
|
+
originalWillChange: h
|
|
750
737
|
}) => {
|
|
751
|
-
|
|
738
|
+
o.style.transform = p, o.style.position = d, o.style.transformOrigin = u, o.style.zIndex = f, o.style.willChange = h;
|
|
752
739
|
}
|
|
753
740
|
);
|
|
754
741
|
}
|
|
755
742
|
};
|
|
756
743
|
},
|
|
757
|
-
out: async (
|
|
744
|
+
out: async (s) => ({
|
|
758
745
|
physics: i,
|
|
759
|
-
onStart: () => {
|
|
760
|
-
a = n, s && (s(!0), s = null);
|
|
761
|
-
},
|
|
762
746
|
tick: () => {
|
|
763
747
|
},
|
|
764
|
-
prepare: (
|
|
765
|
-
|
|
748
|
+
prepare: () => {
|
|
749
|
+
a = s, n.resolve(), g(s), s.style.opacity = "0";
|
|
766
750
|
}
|
|
767
751
|
})
|
|
768
752
|
};
|
|
769
|
-
},
|
|
770
|
-
spring: { stiffness:
|
|
753
|
+
}, Et = {
|
|
754
|
+
spring: { stiffness: 180, damping: 22, doubleSpring: 1 }
|
|
771
755
|
};
|
|
772
|
-
function
|
|
756
|
+
function Ct({
|
|
773
757
|
detailRect: t,
|
|
774
758
|
galleryRect: i,
|
|
775
|
-
pageRect:
|
|
776
|
-
scrollOffset:
|
|
759
|
+
pageRect: l,
|
|
760
|
+
scrollOffset: a
|
|
777
761
|
}) {
|
|
778
|
-
const
|
|
762
|
+
const n = i.left - t.left + (i.width - t.width) / 2 - a.x, s = i.top - t.top + (i.height - t.height) / 2 - a.y, r = i.width / t.width, e = i.height / t.height, c = Math.max(r, e), y = t.top / l.height * 100, o = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, d = t.left / l.width * 100;
|
|
779
763
|
return {
|
|
780
764
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
781
|
-
animate: (
|
|
782
|
-
const
|
|
765
|
+
animate: (f) => {
|
|
766
|
+
const h = 1 - f;
|
|
783
767
|
return {
|
|
784
|
-
clipPath: `inset(${y *
|
|
785
|
-
transform: `translate(${
|
|
768
|
+
clipPath: `inset(${y * h}% ${o * h}% ${p * h}% ${d * h}%)`,
|
|
769
|
+
transform: `translate(${n * h}px, ${s * h}px) scale(${1 + (c - 1) * h})`
|
|
786
770
|
};
|
|
787
771
|
}
|
|
788
772
|
};
|
|
789
773
|
}
|
|
790
|
-
function
|
|
774
|
+
function Ot({
|
|
791
775
|
detailRect: t,
|
|
792
776
|
galleryRect: i,
|
|
793
|
-
pageRect:
|
|
794
|
-
scrollOffset:
|
|
777
|
+
pageRect: l,
|
|
778
|
+
scrollOffset: a
|
|
795
779
|
}) {
|
|
796
|
-
const
|
|
780
|
+
const n = i.left - t.left + (i.width - t.width) / 2 + a.x, s = i.top - t.top + (i.height - t.height) / 2 + a.y, r = i.width / t.width, e = i.height / t.height, c = Math.min(r, e), y = t.top / l.height * 100, o = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, d = t.left / l.width * 100;
|
|
797
781
|
return {
|
|
798
782
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
799
|
-
animate: (
|
|
800
|
-
const
|
|
783
|
+
animate: (f) => {
|
|
784
|
+
const h = 1 - f;
|
|
801
785
|
return {
|
|
802
|
-
clipPath: `inset(${y *
|
|
803
|
-
transform: `translate(${
|
|
786
|
+
clipPath: `inset(${y * h}% ${o * h}% ${p * h}% ${d * h}%)`,
|
|
787
|
+
transform: `translate(${n * h - a.x}px, ${s * h - a.y}px) scale(${1 + (c - 1) * h})`
|
|
804
788
|
};
|
|
805
789
|
}
|
|
806
790
|
};
|
|
807
791
|
}
|
|
808
|
-
function
|
|
809
|
-
const
|
|
792
|
+
function St(t, i, l) {
|
|
793
|
+
const a = t.querySelector(
|
|
810
794
|
"[data-instagram-detail-key]"
|
|
811
|
-
),
|
|
795
|
+
), n = i.querySelector(
|
|
812
796
|
"[data-instagram-detail-key]"
|
|
813
797
|
);
|
|
814
798
|
if (t.querySelectorAll("[data-instagram-detail-key]").length > 1 || i.querySelectorAll("[data-instagram-detail-key]").length > 1)
|
|
815
799
|
return null;
|
|
816
|
-
let s = null,
|
|
817
|
-
if (!
|
|
818
|
-
|
|
819
|
-
const
|
|
820
|
-
if (!
|
|
800
|
+
let s = null, r = null, e = !1;
|
|
801
|
+
if (!a && n) {
|
|
802
|
+
r = n;
|
|
803
|
+
const o = r.getAttribute("data-instagram-detail-key");
|
|
804
|
+
if (!o) return null;
|
|
821
805
|
s = t.querySelector(
|
|
822
|
-
`[data-instagram-gallery-key="${
|
|
806
|
+
`[data-instagram-gallery-key="${o}"]`
|
|
823
807
|
), s && (e = !0);
|
|
824
|
-
} else if (
|
|
825
|
-
|
|
826
|
-
const
|
|
827
|
-
if (!
|
|
808
|
+
} else if (a && !n) {
|
|
809
|
+
r = a;
|
|
810
|
+
const o = r.getAttribute("data-instagram-detail-key");
|
|
811
|
+
if (!o) return null;
|
|
828
812
|
s = i.querySelector(
|
|
829
|
-
`[data-instagram-gallery-key="${
|
|
813
|
+
`[data-instagram-gallery-key="${o}"]`
|
|
830
814
|
), s && (e = !1);
|
|
831
815
|
}
|
|
832
|
-
if (!s || !
|
|
816
|
+
if (!s || !r)
|
|
833
817
|
return null;
|
|
834
|
-
const c = x(e ? t : i, s), y = x(e ? i : t,
|
|
818
|
+
const c = x(e ? t : i, s), y = x(e ? i : t, r);
|
|
835
819
|
if (e) {
|
|
836
|
-
const
|
|
820
|
+
const o = Ct({
|
|
837
821
|
detailRect: y,
|
|
838
822
|
galleryRect: c,
|
|
839
823
|
pageRect: i.getBoundingClientRect(),
|
|
840
|
-
scrollOffset:
|
|
824
|
+
scrollOffset: l
|
|
841
825
|
});
|
|
842
|
-
return i.style.transformOrigin =
|
|
826
|
+
return i.style.transformOrigin = o.transformOrigin, {
|
|
843
827
|
isEnterMode: !0,
|
|
844
|
-
inAnimation:
|
|
828
|
+
inAnimation: o.animate
|
|
845
829
|
// No outAnimation - gallery stays visible
|
|
846
830
|
};
|
|
847
831
|
} else {
|
|
848
|
-
const
|
|
832
|
+
const o = Ot({
|
|
849
833
|
detailRect: y,
|
|
850
834
|
galleryRect: c,
|
|
851
835
|
pageRect: t.getBoundingClientRect(),
|
|
852
|
-
scrollOffset:
|
|
836
|
+
scrollOffset: l
|
|
853
837
|
});
|
|
854
|
-
return t.style.transformOrigin =
|
|
838
|
+
return t.style.transformOrigin = o.transformOrigin, {
|
|
855
839
|
isEnterMode: !1,
|
|
856
|
-
outAnimation:
|
|
840
|
+
outAnimation: o.animate
|
|
857
841
|
// No inAnimation - gallery stays visible
|
|
858
842
|
};
|
|
859
843
|
}
|
|
860
844
|
}
|
|
861
|
-
const
|
|
862
|
-
const i = t.physics ??
|
|
863
|
-
let
|
|
845
|
+
const Zt = (t = {}) => {
|
|
846
|
+
const i = t.physics ?? Et, l = t.timeout ?? 300;
|
|
847
|
+
let a = null, n = null, s = null, r = null;
|
|
864
848
|
return {
|
|
865
849
|
in: async (e, { scrollOffset: c }) => {
|
|
866
850
|
const y = e;
|
|
867
|
-
return !await new Promise((
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
},
|
|
871
|
-
}) || !
|
|
851
|
+
return !await new Promise((p) => {
|
|
852
|
+
a ? p(!0) : (n = p, setTimeout(() => {
|
|
853
|
+
n = null, p(!1);
|
|
854
|
+
}, l));
|
|
855
|
+
}) || !a ? (r == null || r(), r = null, a = null, {
|
|
872
856
|
physics: i,
|
|
873
857
|
css: () => ({})
|
|
874
|
-
}) : (s =
|
|
858
|
+
}) : (s = St(a, y, c), r == null || r(), r = null, s ? (a = null, {
|
|
875
859
|
physics: i,
|
|
876
|
-
css: (
|
|
877
|
-
}) : (
|
|
860
|
+
css: (p) => s != null && s.inAnimation ? s.inAnimation(p) : {}
|
|
861
|
+
}) : (a = null, {
|
|
878
862
|
physics: i,
|
|
879
863
|
css: () => ({})
|
|
880
864
|
}));
|
|
881
865
|
},
|
|
882
866
|
out: async (e, c) => {
|
|
883
|
-
const y = new Promise((
|
|
884
|
-
|
|
867
|
+
const y = new Promise((o) => {
|
|
868
|
+
r = o;
|
|
885
869
|
});
|
|
886
870
|
return {
|
|
887
871
|
physics: i,
|
|
888
|
-
prepare: (
|
|
889
|
-
s != null && s.isEnterMode ?
|
|
872
|
+
prepare: () => {
|
|
873
|
+
s != null && s.isEnterMode ? g(e) : (g(e, c), e.style.zIndex = "-1");
|
|
890
874
|
},
|
|
891
875
|
wait: async () => {
|
|
892
|
-
|
|
876
|
+
a = e, n && (n(!0), n = null), await y;
|
|
893
877
|
},
|
|
894
|
-
css: (
|
|
878
|
+
css: (o) => s != null && s.outAnimation ? s.outAnimation(o) : {}
|
|
895
879
|
};
|
|
896
880
|
}
|
|
897
881
|
};
|
|
898
|
-
},
|
|
882
|
+
}, At = {
|
|
899
883
|
spring: { stiffness: 50, damping: 30 }
|
|
900
884
|
};
|
|
901
|
-
function
|
|
885
|
+
function Tt(t) {
|
|
902
886
|
const i = x(document.body, t.positionedParent);
|
|
903
887
|
return {
|
|
904
888
|
top: t.scroll.y,
|
|
@@ -907,10 +891,10 @@ function Lt(t) {
|
|
|
907
891
|
height: window.innerHeight - i.top
|
|
908
892
|
};
|
|
909
893
|
}
|
|
910
|
-
const
|
|
911
|
-
const i = t.physics ??
|
|
894
|
+
const Jt = (t = {}) => {
|
|
895
|
+
const i = t.physics ?? At, l = t.initialRotation ?? 45, a = t.initialScale ?? 0.01, n = t.rotationTriggerPoint ?? 0.8;
|
|
912
896
|
return {
|
|
913
|
-
out: async (s,
|
|
897
|
+
out: async (s, r) => {
|
|
914
898
|
const e = s.style.opacity;
|
|
915
899
|
return {
|
|
916
900
|
physics: {
|
|
@@ -922,7 +906,7 @@ const ts = (t = {}) => {
|
|
|
922
906
|
from: 1,
|
|
923
907
|
to: 0,
|
|
924
908
|
prepare: () => {
|
|
925
|
-
|
|
909
|
+
g(s, r), s.style.opacity = "1";
|
|
926
910
|
},
|
|
927
911
|
tick: (c) => {
|
|
928
912
|
s.style.opacity = String(c);
|
|
@@ -932,348 +916,345 @@ const ts = (t = {}) => {
|
|
|
932
916
|
}
|
|
933
917
|
};
|
|
934
918
|
},
|
|
935
|
-
in: async (s,
|
|
936
|
-
const e =
|
|
919
|
+
in: async (s, r) => {
|
|
920
|
+
const e = Tt(r), c = s.style.transform, y = s.style.transformOrigin, o = s.style.position, p = s.style.zIndex;
|
|
937
921
|
return {
|
|
938
922
|
physics: i,
|
|
939
923
|
from: 0,
|
|
940
924
|
to: 1,
|
|
941
925
|
prepare: () => {
|
|
942
|
-
const
|
|
926
|
+
const d = Math.min(e.width, e.height) * 0.4;
|
|
943
927
|
s.style.setProperty(
|
|
944
928
|
"--max-border-radius",
|
|
945
|
-
`${
|
|
929
|
+
`${d}px`
|
|
946
930
|
), s.style.setProperty("--border-radius-scale", "1"), s.style.willChange = "transform", s.style.backfaceVisibility = "hidden";
|
|
947
|
-
const u = e.left + e.width / 2,
|
|
948
|
-
s.style.transformOrigin = `${u}px ${
|
|
931
|
+
const u = e.left + e.width / 2, f = e.top + e.height / 2;
|
|
932
|
+
s.style.transformOrigin = `${u}px ${f}px`, s.style.position = "fixed", s.style.top = `${e.top}px`, s.style.left = `${e.left}px`, s.style.width = `${e.width}px`, s.style.height = `${e.height}px`, s.style.zIndex = "1000", s.style.overflow = "hidden", s.style.transform = `rotate(${l}deg) scale(${a}) translateZ(0)`, s.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", s.style.opacity = "1";
|
|
949
933
|
},
|
|
950
|
-
tick: (
|
|
934
|
+
tick: (d) => {
|
|
951
935
|
let u;
|
|
952
|
-
if (
|
|
953
|
-
u =
|
|
954
|
-
else if (
|
|
955
|
-
const
|
|
956
|
-
u =
|
|
936
|
+
if (d <= 0.05)
|
|
937
|
+
u = a;
|
|
938
|
+
else if (d <= n) {
|
|
939
|
+
const w = (d - 0.05) / (n - 0.05), b = Math.pow(w, 9);
|
|
940
|
+
u = a + (0.8 - a) * b;
|
|
957
941
|
} else {
|
|
958
|
-
const
|
|
959
|
-
u = 0.8 + 0.2 * (1 - Math.pow(1 -
|
|
942
|
+
const w = (d - n) / (1 - n);
|
|
943
|
+
u = 0.8 + 0.2 * (1 - Math.pow(1 - w, 3));
|
|
960
944
|
}
|
|
961
|
-
let
|
|
962
|
-
const
|
|
963
|
-
if (
|
|
964
|
-
|
|
945
|
+
let f;
|
|
946
|
+
const h = 0.7;
|
|
947
|
+
if (d <= h)
|
|
948
|
+
f = l;
|
|
965
949
|
else {
|
|
966
|
-
const
|
|
967
|
-
|
|
950
|
+
const w = (d - h) / (1 - h), b = 1 - Math.pow(1 - w, 2);
|
|
951
|
+
f = l * (1 - b);
|
|
968
952
|
}
|
|
969
|
-
let
|
|
970
|
-
if (
|
|
971
|
-
|
|
953
|
+
let $;
|
|
954
|
+
if (d <= h)
|
|
955
|
+
$ = 1;
|
|
972
956
|
else {
|
|
973
|
-
const
|
|
974
|
-
|
|
957
|
+
const w = (d - h) / (1 - h);
|
|
958
|
+
$ = 1 - Math.pow(w, 0.5);
|
|
975
959
|
}
|
|
976
|
-
s.style.transform = `rotate(${
|
|
960
|
+
s.style.transform = `rotate(${f.toFixed(2)}deg) scale(${u.toFixed(4)}) translateZ(0)`, s.style.setProperty(
|
|
977
961
|
"--border-radius-scale",
|
|
978
|
-
|
|
962
|
+
$.toFixed(4)
|
|
979
963
|
);
|
|
980
964
|
},
|
|
981
965
|
onEnd: () => {
|
|
982
|
-
s.style.willChange = "", s.style.backfaceVisibility = "", s.style.removeProperty("--max-border-radius"), s.style.removeProperty("--border-radius-scale"), s.style.transform = c, s.style.transformOrigin = y, s.style.position =
|
|
966
|
+
s.style.willChange = "", s.style.backfaceVisibility = "", s.style.removeProperty("--max-border-radius"), s.style.removeProperty("--border-radius-scale"), s.style.transform = c, s.style.transformOrigin = y, s.style.position = o, s.style.zIndex = p, s.style.top = "", s.style.left = "", s.style.width = "", s.style.height = "", s.style.overflow = "", s.style.borderRadius = "";
|
|
983
967
|
}
|
|
984
968
|
};
|
|
985
969
|
}
|
|
986
970
|
};
|
|
987
|
-
},
|
|
988
|
-
spring: { stiffness:
|
|
971
|
+
}, Pt = {
|
|
972
|
+
spring: { stiffness: 200, damping: 23, doubleSpring: 1 }
|
|
989
973
|
};
|
|
990
|
-
function
|
|
974
|
+
function kt({
|
|
991
975
|
detailRect: t,
|
|
992
976
|
galleryRect: i,
|
|
993
|
-
pageRect:
|
|
994
|
-
scrollOffset:
|
|
977
|
+
pageRect: l,
|
|
978
|
+
scrollOffset: a
|
|
995
979
|
}) {
|
|
996
|
-
const
|
|
980
|
+
const n = i.left - t.left + (i.width - t.width) / 2 - a.x, s = i.top - t.top + (i.height - t.height) / 2 - a.y, r = i.width / t.width, e = i.height / t.height, c = Math.max(r, e), y = t.top / l.height * 100, o = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, d = t.left / l.width * 100;
|
|
997
981
|
return {
|
|
998
982
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
999
|
-
animate: (
|
|
1000
|
-
const
|
|
983
|
+
animate: (f) => {
|
|
984
|
+
const h = 1 - f;
|
|
1001
985
|
return {
|
|
1002
|
-
clipPath: `inset(${y *
|
|
1003
|
-
transform: `translate(${
|
|
986
|
+
clipPath: `inset(${y * h}% ${o * h}% ${p * h}% ${d * h}%)`,
|
|
987
|
+
transform: `translate(${n * h}px, ${s * h}px) scale(${1 + (c - 1) * h})`
|
|
1004
988
|
};
|
|
1005
989
|
}
|
|
1006
990
|
};
|
|
1007
991
|
}
|
|
1008
|
-
function
|
|
992
|
+
function Lt({
|
|
1009
993
|
galleryRect: t,
|
|
1010
994
|
detailRect: i,
|
|
1011
|
-
scrollOffset:
|
|
995
|
+
scrollOffset: l
|
|
1012
996
|
}) {
|
|
1013
|
-
const
|
|
997
|
+
const a = i.left - t.left + (i.width - t.width) / 2 + l.x, n = i.top - t.top + (i.height - t.height) / 2 + l.y, s = i.width / t.width, r = i.height / t.height, e = Math.max(s, r);
|
|
1014
998
|
return {
|
|
1015
999
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1016
1000
|
animate: (y) => {
|
|
1017
|
-
const
|
|
1001
|
+
const o = 1 - y;
|
|
1018
1002
|
return {
|
|
1019
|
-
transform: `translate(${
|
|
1020
|
-
opacity: `${1 -
|
|
1003
|
+
transform: `translate(${a * o - l.x}px, ${n * o - l.y}px) scale(${1 + (e - 1) * o})`,
|
|
1004
|
+
opacity: `${1 - o}`
|
|
1021
1005
|
};
|
|
1022
1006
|
}
|
|
1023
1007
|
};
|
|
1024
1008
|
}
|
|
1025
|
-
function
|
|
1009
|
+
function vt({
|
|
1026
1010
|
galleryRect: t,
|
|
1027
1011
|
detailRect: i,
|
|
1028
|
-
scrollOffset:
|
|
1012
|
+
scrollOffset: l
|
|
1029
1013
|
}) {
|
|
1030
|
-
const
|
|
1014
|
+
const a = i.left - t.left + (i.width - t.width) / 2 - l.x, n = i.top - t.top + (i.height - t.height) / 2 - l.y, s = i.width / t.width, r = i.height / t.height, e = Math.max(s, r);
|
|
1031
1015
|
return {
|
|
1032
1016
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1033
1017
|
animate: (y) => {
|
|
1034
|
-
const
|
|
1018
|
+
const o = 1 - y, p = y;
|
|
1035
1019
|
return {
|
|
1036
|
-
transform: `translate(${
|
|
1037
|
-
opacity: `${
|
|
1020
|
+
transform: `translate(${a * o}px, ${n * o}px) scale(${1 + (e - 1) * o})`,
|
|
1021
|
+
opacity: `${p}`
|
|
1038
1022
|
};
|
|
1039
1023
|
}
|
|
1040
1024
|
};
|
|
1041
1025
|
}
|
|
1042
|
-
function
|
|
1026
|
+
function mt({
|
|
1043
1027
|
detailRect: t,
|
|
1044
1028
|
galleryRect: i,
|
|
1045
|
-
pageRect:
|
|
1046
|
-
scrollOffset:
|
|
1029
|
+
pageRect: l,
|
|
1030
|
+
scrollOffset: a
|
|
1047
1031
|
}) {
|
|
1048
|
-
const
|
|
1032
|
+
const n = i.left - t.left + (i.width - t.width) / 2 + a.x, s = i.top - t.top + (i.height - t.height) / 2 + a.y, r = i.width / t.width, e = i.height / t.height, c = Math.min(r, e), y = t.top / l.height * 100, o = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, d = t.left / l.width * 100;
|
|
1049
1033
|
return {
|
|
1050
1034
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
1051
|
-
animate: (
|
|
1052
|
-
const
|
|
1035
|
+
animate: (f) => {
|
|
1036
|
+
const h = 1 - f;
|
|
1053
1037
|
return {
|
|
1054
|
-
clipPath: `inset(${y *
|
|
1055
|
-
transform: `translate(${
|
|
1038
|
+
clipPath: `inset(${y * h}% ${o * h}% ${p * h}% ${d * h}%)`,
|
|
1039
|
+
transform: `translate(${n * h - a.x}px, ${s * h - a.y}px) scale(${1 + (c - 1) * h})`
|
|
1056
1040
|
};
|
|
1057
1041
|
}
|
|
1058
1042
|
};
|
|
1059
1043
|
}
|
|
1060
|
-
function
|
|
1061
|
-
const
|
|
1044
|
+
function It(t, i, l) {
|
|
1045
|
+
const a = t.querySelector(
|
|
1062
1046
|
"[data-pinterest-detail-key]"
|
|
1063
|
-
),
|
|
1047
|
+
), n = i.querySelector(
|
|
1064
1048
|
"[data-pinterest-detail-key]"
|
|
1065
1049
|
);
|
|
1066
1050
|
if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || i.querySelectorAll("[data-pinterest-detail-key]").length > 1)
|
|
1067
1051
|
return null;
|
|
1068
|
-
let s = null,
|
|
1069
|
-
if (!
|
|
1070
|
-
|
|
1071
|
-
const
|
|
1072
|
-
if (!
|
|
1052
|
+
let s = null, r = null, e = !1;
|
|
1053
|
+
if (!a && n) {
|
|
1054
|
+
r = n;
|
|
1055
|
+
const o = r.getAttribute("data-pinterest-detail-key");
|
|
1056
|
+
if (!o) return null;
|
|
1073
1057
|
s = t.querySelector(
|
|
1074
|
-
`[data-pinterest-gallery-key="${
|
|
1058
|
+
`[data-pinterest-gallery-key="${o}"]`
|
|
1075
1059
|
), s && (e = !0);
|
|
1076
|
-
} else if (
|
|
1077
|
-
|
|
1078
|
-
const
|
|
1079
|
-
if (!
|
|
1060
|
+
} else if (a && !n) {
|
|
1061
|
+
r = a;
|
|
1062
|
+
const o = r.getAttribute("data-pinterest-detail-key");
|
|
1063
|
+
if (!o) return null;
|
|
1080
1064
|
s = i.querySelector(
|
|
1081
|
-
`[data-pinterest-gallery-key="${
|
|
1065
|
+
`[data-pinterest-gallery-key="${o}"]`
|
|
1082
1066
|
), s && (e = !1);
|
|
1083
1067
|
}
|
|
1084
|
-
if (!s || !
|
|
1068
|
+
if (!s || !r)
|
|
1085
1069
|
return null;
|
|
1086
|
-
const c = x(e ? t : i, s), y = x(e ? i : t,
|
|
1070
|
+
const c = x(e ? t : i, s), y = x(e ? i : t, r);
|
|
1087
1071
|
if (e) {
|
|
1088
|
-
const
|
|
1072
|
+
const o = kt({
|
|
1089
1073
|
detailRect: y,
|
|
1090
1074
|
galleryRect: c,
|
|
1091
1075
|
pageRect: i.getBoundingClientRect(),
|
|
1092
|
-
scrollOffset:
|
|
1093
|
-
}),
|
|
1076
|
+
scrollOffset: l
|
|
1077
|
+
}), p = Lt({
|
|
1094
1078
|
galleryRect: c,
|
|
1095
1079
|
detailRect: y,
|
|
1096
|
-
scrollOffset:
|
|
1080
|
+
scrollOffset: l
|
|
1097
1081
|
});
|
|
1098
|
-
return i.style.transformOrigin =
|
|
1099
|
-
inAnimation:
|
|
1100
|
-
outAnimation:
|
|
1082
|
+
return i.style.transformOrigin = o.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
|
|
1083
|
+
inAnimation: o.animate,
|
|
1084
|
+
outAnimation: p.animate
|
|
1101
1085
|
};
|
|
1102
1086
|
} else {
|
|
1103
|
-
const
|
|
1087
|
+
const o = vt({
|
|
1104
1088
|
galleryRect: c,
|
|
1105
1089
|
detailRect: y,
|
|
1106
|
-
scrollOffset:
|
|
1107
|
-
}),
|
|
1090
|
+
scrollOffset: l
|
|
1091
|
+
}), p = mt({
|
|
1108
1092
|
detailRect: y,
|
|
1109
1093
|
galleryRect: c,
|
|
1110
1094
|
pageRect: t.getBoundingClientRect(),
|
|
1111
|
-
scrollOffset:
|
|
1095
|
+
scrollOffset: l
|
|
1112
1096
|
});
|
|
1113
|
-
return i.style.transformOrigin =
|
|
1114
|
-
inAnimation:
|
|
1115
|
-
outAnimation:
|
|
1097
|
+
return i.style.transformOrigin = o.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
|
|
1098
|
+
inAnimation: o.animate,
|
|
1099
|
+
outAnimation: p.animate
|
|
1116
1100
|
};
|
|
1117
1101
|
}
|
|
1118
1102
|
}
|
|
1119
|
-
const
|
|
1120
|
-
const i = t.physics ??
|
|
1121
|
-
let
|
|
1103
|
+
const Kt = (t = {}) => {
|
|
1104
|
+
const i = t.physics ?? Pt, l = t.timeout ?? 300;
|
|
1105
|
+
let a = null, n = null, s = null, r = null;
|
|
1122
1106
|
return {
|
|
1123
1107
|
in: async (e, { scrollOffset: c }) => {
|
|
1124
1108
|
const y = e;
|
|
1125
|
-
return !await new Promise((
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
},
|
|
1129
|
-
}) || !
|
|
1109
|
+
return !await new Promise((p) => {
|
|
1110
|
+
a ? p(!0) : (n = p, setTimeout(() => {
|
|
1111
|
+
n = null, p(!1);
|
|
1112
|
+
}, l));
|
|
1113
|
+
}) || !a ? (r == null || r(), r = null, a = null, {
|
|
1130
1114
|
physics: i,
|
|
1131
1115
|
css: () => ({})
|
|
1132
|
-
}) : (s =
|
|
1116
|
+
}) : (s = It(a, y, c), r == null || r(), r = null, s ? (a = null, {
|
|
1133
1117
|
physics: i,
|
|
1134
|
-
css: (
|
|
1135
|
-
}) : (
|
|
1118
|
+
css: (p) => s ? s.inAnimation(p) : {}
|
|
1119
|
+
}) : (a = null, {
|
|
1136
1120
|
physics: i,
|
|
1137
1121
|
css: () => ({})
|
|
1138
1122
|
}));
|
|
1139
1123
|
},
|
|
1140
1124
|
out: async (e) => {
|
|
1141
1125
|
const c = new Promise((y) => {
|
|
1142
|
-
|
|
1126
|
+
r = y;
|
|
1143
1127
|
});
|
|
1144
1128
|
return {
|
|
1145
1129
|
physics: i,
|
|
1146
|
-
prepare: (
|
|
1147
|
-
|
|
1130
|
+
prepare: () => {
|
|
1131
|
+
g(e), e.style.zIndex = "-1", a = e, n && (n(!0), n = null);
|
|
1148
1132
|
},
|
|
1149
1133
|
wait: async () => {
|
|
1150
|
-
|
|
1134
|
+
await c;
|
|
1151
1135
|
},
|
|
1152
1136
|
css: (y) => s ? s.outAnimation(y) : {}
|
|
1153
1137
|
};
|
|
1154
1138
|
}
|
|
1155
1139
|
};
|
|
1156
|
-
},
|
|
1140
|
+
}, Yt = {
|
|
1157
1141
|
spring: { stiffness: 100, damping: 30 }
|
|
1158
|
-
},
|
|
1159
|
-
const i = t.physics ??
|
|
1142
|
+
}, Qt = (t = {}) => {
|
|
1143
|
+
const i = t.physics ?? Yt;
|
|
1160
1144
|
return {
|
|
1161
|
-
in: (
|
|
1145
|
+
in: (l) => ({
|
|
1162
1146
|
physics: i,
|
|
1163
1147
|
prepare: () => {
|
|
1164
|
-
|
|
1148
|
+
l.style.opacity = "0", l.style.transform = "rotate(-180deg)", l.style.transformOrigin = "center center", l.style.willChange = "transform, opacity";
|
|
1165
1149
|
},
|
|
1166
|
-
css: (
|
|
1150
|
+
css: (a) => ({
|
|
1167
1151
|
// -180deg → 0deg, show after 90deg (progress > 0.5)
|
|
1168
|
-
transform: `rotate(${(
|
|
1169
|
-
opacity:
|
|
1152
|
+
transform: `rotate(${(a - 1) * 180}deg)`,
|
|
1153
|
+
opacity: a > 0.5 ? 1 : 0
|
|
1170
1154
|
}),
|
|
1171
1155
|
onEnd: () => {
|
|
1172
|
-
|
|
1156
|
+
l.style.willChange = "auto", l.style.transform = "", l.style.transformOrigin = "", l.style.opacity = "";
|
|
1173
1157
|
}
|
|
1174
1158
|
}),
|
|
1175
|
-
out: (
|
|
1159
|
+
out: (l, a) => ({
|
|
1176
1160
|
physics: i,
|
|
1177
1161
|
prepare: () => {
|
|
1178
|
-
|
|
1162
|
+
g(l, a), l.style.transformOrigin = "center center", l.style.willChange = "transform, opacity";
|
|
1179
1163
|
},
|
|
1180
|
-
css: (
|
|
1164
|
+
css: (n) => ({
|
|
1181
1165
|
// 0deg → 180deg, hide after 90deg (progress < 0.5)
|
|
1182
|
-
transform: `rotate(${(1 -
|
|
1183
|
-
opacity:
|
|
1166
|
+
transform: `rotate(${(1 - n) * 180}deg)`,
|
|
1167
|
+
opacity: n > 0.5 ? 1 : 0
|
|
1184
1168
|
}),
|
|
1185
1169
|
onEnd: () => {
|
|
1186
|
-
|
|
1170
|
+
l.style.willChange = "auto";
|
|
1187
1171
|
}
|
|
1188
1172
|
})
|
|
1189
1173
|
};
|
|
1190
|
-
},
|
|
1174
|
+
}, _t = {
|
|
1191
1175
|
spring: { stiffness: 5, damping: 4 }
|
|
1192
|
-
},
|
|
1193
|
-
const i = t.direction ?? "up",
|
|
1194
|
-
let
|
|
1176
|
+
}, Rt = (t = {}) => {
|
|
1177
|
+
const i = t.direction ?? "up", l = t.physics ?? _t, a = i === "up";
|
|
1178
|
+
let n = null, s = null, r = null;
|
|
1195
1179
|
const e = () => {
|
|
1196
|
-
if (
|
|
1180
|
+
if (n === null || s === null)
|
|
1197
1181
|
return null;
|
|
1198
|
-
const c = Math.min(
|
|
1182
|
+
const c = Math.min(n, s), y = window.innerHeight;
|
|
1199
1183
|
return Math.max(c, y);
|
|
1200
1184
|
};
|
|
1201
1185
|
return {
|
|
1202
|
-
in: (c) => (s = c.offsetHeight,
|
|
1203
|
-
physics:
|
|
1186
|
+
in: (c) => (s = c.offsetHeight, n !== null && (r = e()), {
|
|
1187
|
+
physics: l,
|
|
1204
1188
|
prepare: () => {
|
|
1205
1189
|
c.style.willChange = "transform", c.style.backfaceVisibility = "hidden", c.style.contain = "layout paint";
|
|
1206
1190
|
},
|
|
1207
1191
|
tick: (y) => {
|
|
1208
|
-
|
|
1209
|
-
const
|
|
1210
|
-
c.style.transform = `translate3d(0, ${
|
|
1192
|
+
r === null && (r = e());
|
|
1193
|
+
const o = r ?? window.innerHeight, p = a ? (1 - y) * o : (1 - y) * -o;
|
|
1194
|
+
c.style.transform = `translate3d(0, ${p}px, 0)`;
|
|
1211
1195
|
},
|
|
1212
1196
|
onEnd: () => {
|
|
1213
1197
|
c.style.willChange = "auto", c.style.backfaceVisibility = "", c.style.contain = "";
|
|
1214
1198
|
}
|
|
1215
1199
|
}),
|
|
1216
1200
|
out: (c, y) => ({
|
|
1217
|
-
physics:
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
n === null && (n = e());
|
|
1223
|
-
const d = n ?? window.innerHeight, h = l ? (1 - r) * -d : (1 - r) * d;
|
|
1224
|
-
c.style.transform = `translate3d(0, ${h}px, 0)`;
|
|
1201
|
+
physics: l,
|
|
1202
|
+
tick: (o) => {
|
|
1203
|
+
r === null && (r = e());
|
|
1204
|
+
const p = r ?? window.innerHeight, d = a ? (1 - o) * -p : (1 - o) * p;
|
|
1205
|
+
c.style.transform = `translate3d(0, ${d}px, 0)`;
|
|
1225
1206
|
},
|
|
1226
|
-
prepare: (
|
|
1227
|
-
|
|
1207
|
+
prepare: () => {
|
|
1208
|
+
n = c.offsetHeight, s !== null && (r = e()), g(c, y), c.style.zIndex = a ? "-1" : "1", c.style.willChange = "transform", c.style.backfaceVisibility = "hidden", c.style.contain = "layout paint", c.style.pointerEvents = "none";
|
|
1228
1209
|
}
|
|
1229
1210
|
})
|
|
1230
1211
|
};
|
|
1231
|
-
},
|
|
1212
|
+
}, Dt = {
|
|
1232
1213
|
inertia: {
|
|
1233
1214
|
acceleration: 20,
|
|
1234
1215
|
resistance: 1.5
|
|
1235
1216
|
}
|
|
1236
|
-
},
|
|
1217
|
+
}, Ft = {
|
|
1237
1218
|
inertia: {
|
|
1238
1219
|
acceleration: 20,
|
|
1239
1220
|
resistance: 1
|
|
1240
1221
|
}
|
|
1241
1222
|
};
|
|
1242
|
-
function
|
|
1243
|
-
const i = x(document.body, t.positionedParent),
|
|
1223
|
+
function P(t) {
|
|
1224
|
+
const i = x(document.body, t.positionedParent), l = t.scroll.y, a = window.innerHeight - i.top;
|
|
1244
1225
|
return {
|
|
1245
|
-
top:
|
|
1226
|
+
top: l,
|
|
1246
1227
|
left: 0,
|
|
1247
1228
|
width: i.width,
|
|
1248
|
-
height:
|
|
1229
|
+
height: a
|
|
1249
1230
|
};
|
|
1250
1231
|
}
|
|
1251
|
-
const
|
|
1252
|
-
const { direction: i = "enter" } = t,
|
|
1232
|
+
const ts = (t = {}) => {
|
|
1233
|
+
const { direction: i = "enter" } = t, l = t.physics ?? (i === "enter" ? Dt : Ft);
|
|
1253
1234
|
return i === "enter" ? {
|
|
1254
1235
|
// Entering sheet: slides up from bottom
|
|
1255
|
-
in: (
|
|
1256
|
-
const
|
|
1236
|
+
in: (a, n) => {
|
|
1237
|
+
const r = P(n).height;
|
|
1257
1238
|
return {
|
|
1258
|
-
physics:
|
|
1239
|
+
physics: l,
|
|
1259
1240
|
prepare: () => {
|
|
1260
|
-
|
|
1241
|
+
a.style.willChange = "transform", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint";
|
|
1261
1242
|
},
|
|
1262
1243
|
css: (e) => ({
|
|
1263
|
-
transform: `translate3d(0, ${(1 - e) *
|
|
1244
|
+
transform: `translate3d(0, ${(1 - e) * r}px, 0)`
|
|
1264
1245
|
}),
|
|
1265
1246
|
onEnd: () => {
|
|
1266
|
-
|
|
1247
|
+
a.style.willChange = "auto", a.style.backfaceVisibility = "", a.style.contain = "";
|
|
1267
1248
|
}
|
|
1268
1249
|
};
|
|
1269
1250
|
},
|
|
1270
1251
|
// Exiting background: scales down with fade
|
|
1271
|
-
out: (
|
|
1272
|
-
const s =
|
|
1252
|
+
out: (a, n) => {
|
|
1253
|
+
const s = P(n), r = s.left + s.width / 2, e = s.top + s.height / 2 + n.scrollOffset.y;
|
|
1273
1254
|
return {
|
|
1274
|
-
physics:
|
|
1275
|
-
prepare: (
|
|
1276
|
-
|
|
1255
|
+
physics: l,
|
|
1256
|
+
prepare: () => {
|
|
1257
|
+
g(a, n), a.style.zIndex = "-1", a.style.willChange = "transform, opacity", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.pointerEvents = "none", a.style.transformOrigin = `${r}px ${e}px`;
|
|
1277
1258
|
},
|
|
1278
1259
|
css: (c) => ({
|
|
1279
1260
|
transform: `scale(${0.8 + c * 0.2})`,
|
|
@@ -1283,234 +1264,238 @@ const es = (t = {}) => {
|
|
|
1283
1264
|
}
|
|
1284
1265
|
} : {
|
|
1285
1266
|
// Entering background: scales up with fade
|
|
1286
|
-
in: (
|
|
1287
|
-
const s =
|
|
1267
|
+
in: (a, n) => {
|
|
1268
|
+
const s = P(n), r = s.left + s.width / 2, e = s.top + s.height / 2;
|
|
1288
1269
|
return {
|
|
1289
|
-
physics:
|
|
1270
|
+
physics: l,
|
|
1290
1271
|
prepare: () => {
|
|
1291
|
-
|
|
1272
|
+
a.style.willChange = "transform, opacity", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.transformOrigin = `${r}px ${e}px`;
|
|
1292
1273
|
},
|
|
1293
1274
|
css: (c) => ({
|
|
1294
1275
|
transform: `scale(${0.8 + c * 0.2})`,
|
|
1295
1276
|
opacity: c
|
|
1296
1277
|
}),
|
|
1297
1278
|
onEnd: () => {
|
|
1298
|
-
|
|
1279
|
+
a.style.willChange = "auto", a.style.backfaceVisibility = "", a.style.contain = "", a.style.transformOrigin = "";
|
|
1299
1280
|
}
|
|
1300
1281
|
};
|
|
1301
1282
|
},
|
|
1302
1283
|
// Exiting sheet: slides down with high z-index
|
|
1303
|
-
out: (
|
|
1304
|
-
const
|
|
1284
|
+
out: (a, n) => {
|
|
1285
|
+
const r = P(n).height;
|
|
1305
1286
|
return {
|
|
1306
|
-
physics:
|
|
1307
|
-
prepare: (
|
|
1308
|
-
|
|
1287
|
+
physics: l,
|
|
1288
|
+
prepare: () => {
|
|
1289
|
+
g(a, n), a.style.zIndex = "100", a.style.willChange = "transform", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.pointerEvents = "none";
|
|
1309
1290
|
},
|
|
1310
1291
|
css: (e) => ({
|
|
1311
|
-
transform: `translate3d(0, ${(1 - e) *
|
|
1292
|
+
transform: `translate3d(0, ${(1 - e) * r}px, 0)`
|
|
1312
1293
|
})
|
|
1313
1294
|
};
|
|
1314
1295
|
}
|
|
1315
1296
|
};
|
|
1316
|
-
},
|
|
1297
|
+
}, Vt = {
|
|
1317
1298
|
spring: {
|
|
1318
1299
|
stiffness: 140,
|
|
1319
1300
|
damping: 19,
|
|
1320
1301
|
doubleSpring: 0.8
|
|
1321
1302
|
}
|
|
1322
|
-
},
|
|
1323
|
-
const i = t.direction ?? "left",
|
|
1303
|
+
}, ss = (t = {}) => {
|
|
1304
|
+
const i = t.direction ?? "left", l = t.physics ?? Vt, a = i === "left";
|
|
1324
1305
|
return {
|
|
1325
|
-
in: (
|
|
1326
|
-
physics:
|
|
1306
|
+
in: (n) => ({
|
|
1307
|
+
physics: l,
|
|
1327
1308
|
prepare: () => {
|
|
1328
|
-
|
|
1309
|
+
n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
1329
1310
|
},
|
|
1330
1311
|
css: (s) => ({
|
|
1331
|
-
transform: `translate3d(${
|
|
1312
|
+
transform: `translate3d(${a ? (1 - s) * 100 : (1 - s) * -100}%, 0, 0)`
|
|
1332
1313
|
}),
|
|
1333
1314
|
onEnd: () => {
|
|
1334
|
-
|
|
1315
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
1335
1316
|
}
|
|
1336
1317
|
}),
|
|
1337
|
-
out: (
|
|
1338
|
-
physics:
|
|
1339
|
-
css: (
|
|
1340
|
-
transform: `translate3d(${
|
|
1318
|
+
out: (n, s) => ({
|
|
1319
|
+
physics: l,
|
|
1320
|
+
css: (r) => ({
|
|
1321
|
+
transform: `translate3d(${a ? (1 - r) * -100 : (1 - r) * 100}%, 0, 0)`
|
|
1341
1322
|
}),
|
|
1342
|
-
prepare: (
|
|
1343
|
-
|
|
1323
|
+
prepare: () => {
|
|
1324
|
+
g(n, s), n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
1344
1325
|
}
|
|
1345
1326
|
})
|
|
1346
1327
|
};
|
|
1347
|
-
}, k =
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1328
|
+
}, k = 8, Ut = {
|
|
1329
|
+
spring: {
|
|
1330
|
+
stiffness: 600,
|
|
1331
|
+
damping: 40,
|
|
1332
|
+
restDelta: 0.1,
|
|
1333
|
+
restSpeed: 1e14
|
|
1351
1334
|
}
|
|
1352
|
-
},
|
|
1353
|
-
const i = t.direction ?? "left",
|
|
1354
|
-
let { promise:
|
|
1335
|
+
}, is = (t = {}) => {
|
|
1336
|
+
const i = t.direction ?? "left", l = t.physics ?? Ut, a = i === "left";
|
|
1337
|
+
let { promise: n, resolve: s } = E();
|
|
1355
1338
|
return {
|
|
1356
1339
|
// Entering page: fades in + slides from opposite direction
|
|
1357
|
-
in: (
|
|
1358
|
-
physics:
|
|
1340
|
+
in: (r) => ({
|
|
1341
|
+
physics: l,
|
|
1359
1342
|
prepare: () => {
|
|
1360
|
-
|
|
1343
|
+
r.style.opacity = "0", r.style.willChange = "transform, opacity", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint";
|
|
1361
1344
|
},
|
|
1362
1345
|
wait: async () => {
|
|
1363
|
-
if (
|
|
1364
|
-
await
|
|
1346
|
+
if (n) {
|
|
1347
|
+
await n;
|
|
1365
1348
|
const e = E();
|
|
1366
|
-
|
|
1349
|
+
n = e.promise, s = e.resolve;
|
|
1367
1350
|
}
|
|
1368
1351
|
},
|
|
1369
1352
|
css: (e) => {
|
|
1370
|
-
const c =
|
|
1353
|
+
const c = a ? (1 - e) * k : (1 - e) * -k, y = `${e}`;
|
|
1371
1354
|
return {
|
|
1372
1355
|
transform: `translate3d(${c}px, 0, 0)`,
|
|
1373
1356
|
opacity: y
|
|
1374
1357
|
};
|
|
1375
1358
|
},
|
|
1376
1359
|
onEnd: () => {
|
|
1377
|
-
|
|
1360
|
+
r.style.opacity = "1", r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "";
|
|
1378
1361
|
}
|
|
1379
1362
|
}),
|
|
1380
1363
|
// Exiting page: fade out + slide in same direction as navigation
|
|
1381
|
-
out: (
|
|
1382
|
-
physics:
|
|
1364
|
+
out: (r, e) => ({
|
|
1365
|
+
physics: l,
|
|
1383
1366
|
prepare: () => {
|
|
1384
|
-
|
|
1367
|
+
g(r, e), r.style.willChange = "transform, opacity", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint", r.style.pointerEvents = "none";
|
|
1385
1368
|
},
|
|
1386
1369
|
css: (c) => {
|
|
1387
|
-
const y =
|
|
1370
|
+
const y = a ? (1 - c) * -k : (1 - c) * k, o = `${c}`;
|
|
1388
1371
|
return {
|
|
1389
1372
|
transform: `translate3d(${y}px, 0, 0)`,
|
|
1390
|
-
opacity:
|
|
1373
|
+
opacity: o
|
|
1391
1374
|
};
|
|
1392
1375
|
},
|
|
1393
1376
|
onEnd: () => {
|
|
1394
|
-
s && s(),
|
|
1377
|
+
s && s(), r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "";
|
|
1395
1378
|
}
|
|
1396
1379
|
})
|
|
1397
1380
|
};
|
|
1398
|
-
},
|
|
1381
|
+
}, Ht = {
|
|
1399
1382
|
spring: { stiffness: 17, damping: 6 }
|
|
1400
|
-
},
|
|
1401
|
-
const i = t.physics ??
|
|
1402
|
-
let
|
|
1383
|
+
}, v = 20, L = 800, ns = (t = {}) => {
|
|
1384
|
+
const i = t.physics ?? Ht;
|
|
1385
|
+
let l, a = null;
|
|
1403
1386
|
return {
|
|
1404
|
-
in: (
|
|
1387
|
+
in: (n) => ({
|
|
1405
1388
|
physics: i,
|
|
1406
1389
|
prepare: () => {
|
|
1407
|
-
|
|
1390
|
+
n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.transform = `perspective(${L}px) rotateY(${v}deg) translate3d(-100%, 0, 0)`;
|
|
1408
1391
|
},
|
|
1409
1392
|
wait: async () => {
|
|
1410
|
-
|
|
1393
|
+
l && await l;
|
|
1411
1394
|
},
|
|
1412
1395
|
css: (s) => {
|
|
1413
|
-
const
|
|
1396
|
+
const r = (1 - s) * v, e = -(1 - s) * 100;
|
|
1414
1397
|
return {
|
|
1415
|
-
transform: `perspective(${
|
|
1398
|
+
transform: `perspective(${L}px) rotateY(${r}deg) translate3d(${e}%, 0, 0)`
|
|
1416
1399
|
};
|
|
1417
1400
|
},
|
|
1418
1401
|
onEnd: () => {
|
|
1419
|
-
|
|
1402
|
+
n.style.transform = "", n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "";
|
|
1420
1403
|
}
|
|
1421
1404
|
}),
|
|
1422
|
-
out: (
|
|
1423
|
-
|
|
1405
|
+
out: (n, s) => (l = new Promise((r) => {
|
|
1406
|
+
a = r;
|
|
1424
1407
|
}), {
|
|
1425
1408
|
physics: i,
|
|
1426
|
-
prepare: (
|
|
1427
|
-
|
|
1409
|
+
prepare: () => {
|
|
1410
|
+
g(n, s), n.style.willChange = "transform", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none", n.style.transform = `perspective(${L}px) rotateY(0deg) translate3d(0%, 0, 0)`;
|
|
1428
1411
|
},
|
|
1429
|
-
css: (
|
|
1430
|
-
const e = 1 -
|
|
1412
|
+
css: (r) => {
|
|
1413
|
+
const e = 1 - r, c = e * v, y = e * 100;
|
|
1431
1414
|
return {
|
|
1432
|
-
transform: `perspective(${
|
|
1415
|
+
transform: `perspective(${L}px) rotateY(${-c}deg) translate3d(${y}%, 0, 0)`
|
|
1433
1416
|
};
|
|
1434
1417
|
},
|
|
1435
1418
|
onEnd: () => {
|
|
1436
|
-
|
|
1419
|
+
a && a(), n.style.transform = "";
|
|
1437
1420
|
}
|
|
1438
1421
|
})
|
|
1439
1422
|
};
|
|
1440
|
-
},
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1423
|
+
}, Xt = {
|
|
1424
|
+
spring: {
|
|
1425
|
+
stiffness: 600,
|
|
1426
|
+
damping: 40,
|
|
1427
|
+
restDelta: 0.1,
|
|
1428
|
+
restSpeed: 1e14
|
|
1444
1429
|
}
|
|
1445
|
-
},
|
|
1446
|
-
function
|
|
1447
|
-
const i = x(document.body, t.positionedParent),
|
|
1430
|
+
}, D = 0.05;
|
|
1431
|
+
function zt(t) {
|
|
1432
|
+
const i = x(document.body, t.positionedParent), l = t.scroll.y, a = window.innerHeight - i.top;
|
|
1448
1433
|
return {
|
|
1449
|
-
top:
|
|
1434
|
+
top: l,
|
|
1450
1435
|
left: 0,
|
|
1451
1436
|
width: i.width,
|
|
1452
|
-
height:
|
|
1437
|
+
height: a
|
|
1453
1438
|
};
|
|
1454
1439
|
}
|
|
1455
|
-
const
|
|
1456
|
-
const i = t.physics ??
|
|
1457
|
-
let { promise:
|
|
1440
|
+
const es = (t = {}) => {
|
|
1441
|
+
const i = t.physics ?? Xt;
|
|
1442
|
+
let { promise: l, resolve: a } = E();
|
|
1458
1443
|
return {
|
|
1459
1444
|
// Entering page: scales up from small (0.95 → 1) with fade in
|
|
1460
|
-
in: (
|
|
1461
|
-
const
|
|
1445
|
+
in: (n, s) => {
|
|
1446
|
+
const r = zt(s), e = r.left + r.width / 2, c = r.top + r.height / 2;
|
|
1462
1447
|
return {
|
|
1463
1448
|
physics: i,
|
|
1464
1449
|
prepare: () => {
|
|
1465
|
-
|
|
1450
|
+
n.style.opacity = "0", n.style.willChange = "transform, opacity", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.transformOrigin = `${e}px ${c}px`;
|
|
1466
1451
|
},
|
|
1467
1452
|
wait: async () => {
|
|
1468
|
-
if (
|
|
1469
|
-
await
|
|
1453
|
+
if (l) {
|
|
1454
|
+
await l;
|
|
1470
1455
|
const y = E();
|
|
1471
|
-
|
|
1456
|
+
l = y.promise, a = y.resolve;
|
|
1472
1457
|
}
|
|
1473
1458
|
},
|
|
1474
1459
|
css: (y) => ({
|
|
1475
|
-
transform: `scale(${1 -
|
|
1460
|
+
transform: `scale(${1 - D + y * D})`,
|
|
1476
1461
|
opacity: y
|
|
1477
1462
|
}),
|
|
1478
1463
|
onEnd: () => {
|
|
1479
|
-
|
|
1464
|
+
n.style.opacity = "1", n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "", n.style.transformOrigin = "";
|
|
1480
1465
|
}
|
|
1481
1466
|
};
|
|
1482
1467
|
},
|
|
1483
1468
|
// Exiting page: fade out only (no scale)
|
|
1484
|
-
out: (
|
|
1469
|
+
out: (n, s) => ({
|
|
1485
1470
|
physics: i,
|
|
1486
|
-
prepare: (
|
|
1487
|
-
|
|
1471
|
+
prepare: () => {
|
|
1472
|
+
g(n, s), n.style.willChange = "opacity", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint", n.style.pointerEvents = "none";
|
|
1488
1473
|
},
|
|
1489
|
-
css: (
|
|
1490
|
-
opacity:
|
|
1474
|
+
css: (r) => ({
|
|
1475
|
+
opacity: r
|
|
1491
1476
|
}),
|
|
1492
1477
|
onEnd: () => {
|
|
1493
|
-
|
|
1478
|
+
a && a();
|
|
1494
1479
|
}
|
|
1495
1480
|
})
|
|
1496
1481
|
};
|
|
1497
1482
|
};
|
|
1498
1483
|
export {
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1484
|
+
Wt as blind,
|
|
1485
|
+
Mt as curtainReveal,
|
|
1486
|
+
Bt as depth,
|
|
1487
|
+
qt as drill,
|
|
1488
|
+
jt as fade,
|
|
1489
|
+
Nt as film,
|
|
1490
|
+
Gt as hero,
|
|
1491
|
+
Zt as instagram,
|
|
1492
|
+
Jt as jaemin,
|
|
1493
|
+
Kt as pinterest,
|
|
1494
|
+
Qt as rotate,
|
|
1495
|
+
Rt as scroll,
|
|
1496
|
+
ts as sheet,
|
|
1497
|
+
ss as slide,
|
|
1498
|
+
is as snap,
|
|
1499
|
+
ns as strip,
|
|
1500
|
+
es as swap
|
|
1516
1501
|
};
|