@ssgoi/core 3.5.0 → 3.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animator/integrator/double-spring-integrator.d.ts +25 -0
- package/dist/animator/integrator/double-spring-integrator.d.ts.map +1 -0
- package/dist/animator/integrator/index.d.ts +13 -0
- package/dist/animator/integrator/index.d.ts.map +1 -0
- package/dist/animator/integrator/inertia-integrator.d.ts +19 -0
- package/dist/animator/integrator/inertia-integrator.d.ts.map +1 -0
- package/dist/animator/integrator/provider.d.ts +22 -0
- package/dist/animator/integrator/provider.d.ts.map +1 -0
- package/dist/animator/integrator/spring-integrator.d.ts +13 -0
- package/dist/animator/integrator/spring-integrator.d.ts.map +1 -0
- package/dist/animator/integrator/types.d.ts +34 -0
- package/dist/animator/integrator/types.d.ts.map +1 -0
- package/dist/animator/multi-animator.d.ts +2 -2
- package/dist/animator/multi-animator.d.ts.map +1 -1
- package/dist/animator/{animate → runner}/css-runner.d.ts +2 -2
- package/dist/animator/runner/css-runner.d.ts.map +1 -0
- package/dist/animator/runner/provider.d.ts +35 -0
- package/dist/animator/runner/provider.d.ts.map +1 -0
- package/dist/animator/{animate → runner}/tick-runner.d.ts +2 -2
- package/dist/animator/runner/tick-runner.d.ts.map +1 -0
- package/dist/animator/runner/ticker.d.ts.map +1 -0
- package/dist/animator/{animate → runner}/types.d.ts +6 -3
- package/dist/animator/runner/types.d.ts.map +1 -0
- package/dist/animator/{index.d.ts → single-animator.d.ts} +17 -9
- package/dist/animator/single-animator.d.ts.map +1 -0
- package/dist/animator/{animation.d.ts → types.d.ts} +2 -2
- package/dist/animator/types.d.ts.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +479 -532
- package/dist/provider-B6Xnh0BA.cjs +1 -0
- package/dist/provider-CMBovM_W.js +134 -0
- package/dist/transition/transition-strategy.d.ts +2 -2
- package/dist/transition/transition-strategy.d.ts.map +1 -1
- package/dist/transitions/blur.d.ts +4 -4
- package/dist/transitions/blur.d.ts.map +1 -1
- package/dist/transitions/bounce.d.ts +4 -4
- package/dist/transitions/bounce.d.ts.map +1 -1
- package/dist/transitions/fade.d.ts +4 -4
- package/dist/transitions/fade.d.ts.map +1 -1
- package/dist/transitions/index.cjs +1 -1
- package/dist/transitions/index.d.ts +5 -0
- package/dist/transitions/index.d.ts.map +1 -1
- package/dist/transitions/index.js +141 -191
- package/dist/transitions/rotate.d.ts +4 -4
- package/dist/transitions/rotate.d.ts.map +1 -1
- package/dist/transitions/scale.d.ts +4 -4
- package/dist/transitions/scale.d.ts.map +1 -1
- package/dist/transitions/slide.d.ts +4 -4
- package/dist/transitions/slide.d.ts.map +1 -1
- package/dist/transitions/utils.d.ts +8 -0
- package/dist/transitions/utils.d.ts.map +1 -0
- package/dist/types.cjs +1 -1
- package/dist/types.d.ts +59 -3
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +6 -6
- package/dist/view-transitions/blind.d.ts +2 -3
- package/dist/view-transitions/blind.d.ts.map +1 -1
- package/dist/view-transitions/curtain-reveal.d.ts +2 -3
- package/dist/view-transitions/curtain-reveal.d.ts.map +1 -1
- package/dist/view-transitions/depth.d.ts +2 -2
- package/dist/view-transitions/depth.d.ts.map +1 -1
- package/dist/view-transitions/drill.d.ts +2 -2
- package/dist/view-transitions/drill.d.ts.map +1 -1
- package/dist/view-transitions/fade.d.ts +2 -3
- package/dist/view-transitions/fade.d.ts.map +1 -1
- package/dist/view-transitions/film.d.ts +2 -1
- package/dist/view-transitions/film.d.ts.map +1 -1
- package/dist/view-transitions/hero.d.ts +2 -2
- package/dist/view-transitions/hero.d.ts.map +1 -1
- package/dist/view-transitions/index.cjs +13 -13
- package/dist/view-transitions/index.d.ts +1 -0
- package/dist/view-transitions/index.d.ts.map +1 -1
- package/dist/view-transitions/index.js +867 -847
- package/dist/view-transitions/instagram.d.ts +2 -2
- package/dist/view-transitions/instagram.d.ts.map +1 -1
- package/dist/view-transitions/jaemin.d.ts +2 -2
- package/dist/view-transitions/jaemin.d.ts.map +1 -1
- package/dist/view-transitions/pinterest.d.ts +2 -2
- package/dist/view-transitions/pinterest.d.ts.map +1 -1
- package/dist/view-transitions/rotate.d.ts +5 -2
- package/dist/view-transitions/rotate.d.ts.map +1 -1
- package/dist/view-transitions/scroll.d.ts +2 -2
- package/dist/view-transitions/scroll.d.ts.map +1 -1
- package/dist/view-transitions/sheet.d.ts +2 -2
- package/dist/view-transitions/sheet.d.ts.map +1 -1
- package/dist/view-transitions/slide.d.ts +2 -2
- package/dist/view-transitions/slide.d.ts.map +1 -1
- package/dist/view-transitions/snap.d.ts +14 -0
- package/dist/view-transitions/snap.d.ts.map +1 -0
- package/dist/view-transitions/strip.d.ts +6 -2
- package/dist/view-transitions/strip.d.ts.map +1 -1
- package/dist/view-transitions/swap.d.ts +2 -2
- package/dist/view-transitions/swap.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/animator/animate/css-runner.d.ts.map +0 -1
- package/dist/animator/animate/index.d.ts +0 -42
- package/dist/animator/animate/index.d.ts.map +0 -1
- package/dist/animator/animate/tick-runner.d.ts.map +0 -1
- package/dist/animator/animate/types.d.ts.map +0 -1
- package/dist/animator/animation.d.ts.map +0 -1
- package/dist/animator/index.d.ts.map +0 -1
- package/dist/animator/spring-core.d.ts +0 -82
- package/dist/animator/spring-core.d.ts.map +0 -1
- package/dist/animator/ticker.d.ts.map +0 -1
- /package/dist/animator/{ticker.d.ts → runner/ticker.d.ts} +0 -0
|
@@ -1,81 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
1
|
+
import { D as v, b as T, I as j, a as q } from "../provider-CMBovM_W.js";
|
|
2
|
+
function m(e, t) {
|
|
3
|
+
return e != null && e.spring || e != null && e.inertia || e != null && e.integrator ? e : { spring: t.spring };
|
|
4
|
+
}
|
|
5
|
+
const k = (e = {}) => {
|
|
6
|
+
const { from: t = 0, to: n = 1, key: c } = e, r = m(e.physics, {
|
|
7
|
+
spring: { stiffness: 300, damping: 30 }
|
|
8
|
+
});
|
|
7
9
|
return {
|
|
8
10
|
in: () => ({
|
|
9
|
-
|
|
10
|
-
css: (
|
|
11
|
-
opacity: t + (n - t) *
|
|
11
|
+
physics: r,
|
|
12
|
+
css: (s) => ({
|
|
13
|
+
opacity: t + (n - t) * s
|
|
12
14
|
})
|
|
13
15
|
}),
|
|
14
16
|
out: () => ({
|
|
15
|
-
|
|
16
|
-
css: (
|
|
17
|
-
opacity: t + (n - t) *
|
|
17
|
+
physics: r,
|
|
18
|
+
css: (s) => ({
|
|
19
|
+
opacity: t + (n - t) * s
|
|
18
20
|
})
|
|
19
21
|
}),
|
|
20
22
|
...c && { key: c }
|
|
21
23
|
};
|
|
22
|
-
},
|
|
23
|
-
const {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
spring: c,
|
|
28
|
-
key: s
|
|
29
|
-
} = $, e = {
|
|
30
|
-
stiffness: (c == null ? void 0 : c.stiffness) ?? 300,
|
|
31
|
-
damping: (c == null ? void 0 : c.damping) ?? 30,
|
|
32
|
-
doubleSpring: (c == null ? void 0 : c.doubleSpring) ?? !1
|
|
33
|
-
}, f = (l) => {
|
|
34
|
-
switch (a) {
|
|
24
|
+
}, S = (e = {}) => {
|
|
25
|
+
const { start: t = 0, opacity: n = 0, axis: c = "both", key: r } = e, s = m(e.physics, {
|
|
26
|
+
spring: { stiffness: 300, damping: 30 }
|
|
27
|
+
}), $ = (a) => {
|
|
28
|
+
switch (c) {
|
|
35
29
|
case "x":
|
|
36
|
-
return `scaleX(${
|
|
30
|
+
return `scaleX(${a})`;
|
|
37
31
|
case "y":
|
|
38
|
-
return `scaleY(${
|
|
32
|
+
return `scaleY(${a})`;
|
|
39
33
|
case "both":
|
|
40
34
|
default:
|
|
41
|
-
return `scale(${
|
|
35
|
+
return `scale(${a})`;
|
|
42
36
|
}
|
|
43
|
-
},
|
|
44
|
-
const
|
|
37
|
+
}, u = (a) => {
|
|
38
|
+
const o = t + (1 - t) * a;
|
|
45
39
|
return {
|
|
46
|
-
transform:
|
|
47
|
-
opacity: n + (1 - n) *
|
|
40
|
+
transform: $(o),
|
|
41
|
+
opacity: n + (1 - n) * a
|
|
48
42
|
};
|
|
49
43
|
};
|
|
50
44
|
return {
|
|
51
|
-
in: () => ({
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}),
|
|
55
|
-
out: () => ({
|
|
56
|
-
spring: e,
|
|
57
|
-
css: r
|
|
58
|
-
}),
|
|
59
|
-
...s && { key: s }
|
|
45
|
+
in: () => ({ physics: s, css: u }),
|
|
46
|
+
out: () => ({ physics: s, css: u }),
|
|
47
|
+
...r && { key: r }
|
|
60
48
|
};
|
|
61
|
-
},
|
|
49
|
+
}, w = (e = {}) => {
|
|
62
50
|
const {
|
|
63
51
|
direction: t,
|
|
64
52
|
distance: n = 100,
|
|
65
|
-
opacity:
|
|
66
|
-
fade:
|
|
53
|
+
opacity: c = 0,
|
|
54
|
+
fade: r = !0,
|
|
67
55
|
axis: s,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
doubleSpring: (e == null ? void 0 : e.doubleSpring) ?? !1
|
|
74
|
-
}, u = t || (s === "x" ? "left" : s === "y" ? "up" : "left"), o = (y) => {
|
|
75
|
-
const i = 1 - y;
|
|
56
|
+
key: $
|
|
57
|
+
} = e, u = m(e.physics, {
|
|
58
|
+
spring: { stiffness: 400, damping: 35 }
|
|
59
|
+
}), o = t || (s === "x" ? "left" : s === "y" ? "up" : "left"), l = (g) => {
|
|
60
|
+
const i = 1 - g;
|
|
76
61
|
if (typeof n == "number") {
|
|
77
62
|
const d = i * n;
|
|
78
|
-
switch (
|
|
63
|
+
switch (o) {
|
|
79
64
|
case "left":
|
|
80
65
|
return `translate3d(${-d}px, 0, 0)`;
|
|
81
66
|
case "right":
|
|
@@ -86,7 +71,7 @@ const S = ($ = {}) => {
|
|
|
86
71
|
return `translate3d(0, ${d}px, 0)`;
|
|
87
72
|
}
|
|
88
73
|
} else
|
|
89
|
-
switch (
|
|
74
|
+
switch (o) {
|
|
90
75
|
case "left":
|
|
91
76
|
return `translate3d(calc(-1 * ${n} * ${i}), 0, 0)`;
|
|
92
77
|
case "right":
|
|
@@ -96,162 +81,123 @@ const S = ($ = {}) => {
|
|
|
96
81
|
case "down":
|
|
97
82
|
return `translate3d(0, calc(${n} * ${i}), 0)`;
|
|
98
83
|
}
|
|
99
|
-
},
|
|
84
|
+
}, f = (g) => {
|
|
100
85
|
const i = {
|
|
101
|
-
transform:
|
|
86
|
+
transform: l(g)
|
|
102
87
|
};
|
|
103
|
-
return
|
|
88
|
+
return r && (i.opacity = c + (1 - c) * g), i;
|
|
104
89
|
};
|
|
105
90
|
return {
|
|
106
|
-
in: () => ({
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}),
|
|
110
|
-
out: () => ({
|
|
111
|
-
spring: r,
|
|
112
|
-
css: m
|
|
113
|
-
}),
|
|
114
|
-
...f && { key: f }
|
|
91
|
+
in: () => ({ physics: u, css: f }),
|
|
92
|
+
out: () => ({ physics: u, css: f }),
|
|
93
|
+
...$ && { key: $ }
|
|
115
94
|
};
|
|
116
|
-
},
|
|
95
|
+
}, C = (e = {}) => {
|
|
117
96
|
const {
|
|
118
97
|
degrees: t = 360,
|
|
119
98
|
clockwise: n = !0,
|
|
120
|
-
scale:
|
|
121
|
-
fade:
|
|
99
|
+
scale: c = !1,
|
|
100
|
+
fade: r = !0,
|
|
122
101
|
origin: s = "center",
|
|
123
|
-
axis:
|
|
124
|
-
perspective:
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}, o = n ? t : -t, m = (i) => {
|
|
132
|
-
const d = (1 - i) * o;
|
|
133
|
-
switch (e) {
|
|
102
|
+
axis: $ = "2d",
|
|
103
|
+
perspective: u = 800,
|
|
104
|
+
key: a
|
|
105
|
+
} = e, o = m(e.physics, {
|
|
106
|
+
spring: { stiffness: 500, damping: 25 }
|
|
107
|
+
}), l = n ? t : -t, f = (i) => {
|
|
108
|
+
const d = (1 - i) * l;
|
|
109
|
+
switch ($) {
|
|
134
110
|
case "x":
|
|
135
|
-
return `perspective(${
|
|
111
|
+
return `perspective(${u}px) rotateX(${d}deg)`;
|
|
136
112
|
case "y":
|
|
137
|
-
return `perspective(${
|
|
113
|
+
return `perspective(${u}px) rotateY(${d}deg)`;
|
|
138
114
|
case "z":
|
|
139
115
|
return `rotateZ(${d}deg)`;
|
|
140
116
|
case "2d":
|
|
141
117
|
default:
|
|
142
118
|
return `rotate(${d}deg)`;
|
|
143
119
|
}
|
|
144
|
-
},
|
|
145
|
-
const d = {},
|
|
146
|
-
return
|
|
120
|
+
}, g = (i) => {
|
|
121
|
+
const d = {}, y = [f(i)];
|
|
122
|
+
return c && y.push(`scale(${i})`), d.transform = y.join(" "), d.transformOrigin = s, r && (d.opacity = i), d;
|
|
147
123
|
};
|
|
148
124
|
return {
|
|
149
|
-
in: () => ({
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
}),
|
|
153
|
-
out: () => ({
|
|
154
|
-
spring: u,
|
|
155
|
-
css: y
|
|
156
|
-
}),
|
|
157
|
-
...l && { key: l }
|
|
125
|
+
in: () => ({ physics: o, css: g }),
|
|
126
|
+
out: () => ({ physics: o, css: g }),
|
|
127
|
+
...a && { key: a }
|
|
158
128
|
};
|
|
159
|
-
},
|
|
129
|
+
}, I = (e = {}) => {
|
|
160
130
|
const {
|
|
161
131
|
height: t = 20,
|
|
162
132
|
intensity: n = 1,
|
|
163
|
-
scale:
|
|
164
|
-
fade:
|
|
133
|
+
scale: c = !0,
|
|
134
|
+
fade: r = !0,
|
|
165
135
|
direction: s = "up",
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
if (s === "up" ? m.push(`translateY(${-Math.abs(d)}px)`) : m.push(`translateY(${Math.abs(d)}px)`), a) {
|
|
175
|
-
const g = 0.8 + u * 0.2 + y * 0.05 * i;
|
|
176
|
-
m.push(`scale(${g})`);
|
|
136
|
+
key: $
|
|
137
|
+
} = e, u = m(e.physics, {
|
|
138
|
+
spring: { stiffness: 800, damping: 15 }
|
|
139
|
+
}), a = (o) => {
|
|
140
|
+
const l = {}, f = [], g = Math.sin(o * Math.PI * (1 + n)), i = 1 - o, d = g * t * i;
|
|
141
|
+
if (s === "up" ? f.push(`translateY(${-Math.abs(d)}px)`) : f.push(`translateY(${Math.abs(d)}px)`), c) {
|
|
142
|
+
const y = 0.8 + o * 0.2 + g * 0.05 * i;
|
|
143
|
+
f.push(`scale(${y})`);
|
|
177
144
|
}
|
|
178
|
-
return
|
|
145
|
+
return l.transform = f.join(" "), r && (l.opacity = o), l;
|
|
179
146
|
};
|
|
180
147
|
return {
|
|
181
|
-
in: () => ({
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}),
|
|
185
|
-
out: () => ({
|
|
186
|
-
spring: r,
|
|
187
|
-
css: l
|
|
188
|
-
}),
|
|
189
|
-
...f && { key: f }
|
|
148
|
+
in: () => ({ physics: u, css: a }),
|
|
149
|
+
out: () => ({ physics: u, css: a }),
|
|
150
|
+
...$ && { key: $ }
|
|
190
151
|
};
|
|
191
|
-
},
|
|
192
|
-
const {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
spring: s,
|
|
198
|
-
key: e
|
|
199
|
-
} = $, f = {
|
|
200
|
-
stiffness: (s == null ? void 0 : s.stiffness) ?? 300,
|
|
201
|
-
damping: (s == null ? void 0 : s.damping) ?? 30,
|
|
202
|
-
doubleSpring: (s == null ? void 0 : s.doubleSpring) ?? !1
|
|
203
|
-
}, r = (l) => {
|
|
204
|
-
const u = 1 - l, o = {};
|
|
205
|
-
return typeof t == "number" ? o.filter = `blur(${u * t}px)` : o.filter = `blur(calc(${t} * ${u}))`, a && (o.transform = `scale(${0.8 + l * 0.2})`), c && (o.opacity = n + (1 - n) * l), o;
|
|
152
|
+
}, P = (e = {}) => {
|
|
153
|
+
const { amount: t = 10, opacity: n = 0, scale: c = !1, fade: r = !0, key: s } = e, $ = m(e.physics, {
|
|
154
|
+
spring: { stiffness: 300, damping: 30 }
|
|
155
|
+
}), u = (a) => {
|
|
156
|
+
const o = 1 - a, l = {};
|
|
157
|
+
return typeof t == "number" ? l.filter = `blur(${o * t}px)` : l.filter = `blur(calc(${t} * ${o}))`, c && (l.transform = `scale(${0.8 + a * 0.2})`), r && (l.opacity = n + (1 - n) * a), l;
|
|
206
158
|
};
|
|
207
159
|
return {
|
|
208
|
-
in: () => ({
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}),
|
|
212
|
-
out: () => ({
|
|
213
|
-
spring: f,
|
|
214
|
-
css: r
|
|
215
|
-
}),
|
|
216
|
-
...e && { key: e }
|
|
160
|
+
in: () => ({ physics: $, css: u }),
|
|
161
|
+
out: () => ({ physics: $, css: u }),
|
|
162
|
+
...s && { key: s }
|
|
217
163
|
};
|
|
218
|
-
},
|
|
219
|
-
const { x: t = 0, y: n = -100, opacity:
|
|
220
|
-
stiffness: (
|
|
221
|
-
damping: (
|
|
222
|
-
doubleSpring: (
|
|
223
|
-
},
|
|
224
|
-
const
|
|
225
|
-
let
|
|
226
|
-
return typeof t == "number" ?
|
|
227
|
-
transform: `translate3d(${
|
|
228
|
-
opacity:
|
|
164
|
+
}, D = (e = {}) => {
|
|
165
|
+
const { x: t = 0, y: n = -100, opacity: c = 0, spring: r, key: s } = e, $ = {
|
|
166
|
+
stiffness: (r == null ? void 0 : r.stiffness) ?? 400,
|
|
167
|
+
damping: (r == null ? void 0 : r.damping) ?? 35,
|
|
168
|
+
doubleSpring: (r == null ? void 0 : r.doubleSpring) ?? !1
|
|
169
|
+
}, u = (a) => {
|
|
170
|
+
const o = 1 - a;
|
|
171
|
+
let l, f;
|
|
172
|
+
return typeof t == "number" ? l = `${o * t}px` : l = `calc(${t} * ${o})`, typeof n == "number" ? f = `${o * n}px` : f = `calc(${n} * ${o})`, {
|
|
173
|
+
transform: `translate3d(${l}, ${f}, 0)`,
|
|
174
|
+
opacity: c + (1 - c) * a
|
|
229
175
|
};
|
|
230
176
|
};
|
|
231
177
|
return {
|
|
232
178
|
in: () => ({
|
|
233
|
-
spring:
|
|
234
|
-
css:
|
|
179
|
+
spring: $,
|
|
180
|
+
css: u
|
|
235
181
|
}),
|
|
236
182
|
out: () => ({
|
|
237
|
-
spring:
|
|
238
|
-
css:
|
|
183
|
+
spring: $,
|
|
184
|
+
css: u
|
|
239
185
|
}),
|
|
240
186
|
...s && { key: s }
|
|
241
187
|
};
|
|
242
|
-
},
|
|
188
|
+
}, M = (e = {}) => {
|
|
243
189
|
const {
|
|
244
190
|
shape: t = "circle",
|
|
245
191
|
origin: n = "center",
|
|
246
|
-
scale:
|
|
247
|
-
fade:
|
|
192
|
+
scale: c = 1.5,
|
|
193
|
+
fade: r = !1,
|
|
248
194
|
spring: s,
|
|
249
|
-
key:
|
|
250
|
-
} =
|
|
195
|
+
key: $
|
|
196
|
+
} = e, u = {
|
|
251
197
|
stiffness: (s == null ? void 0 : s.stiffness) ?? 300,
|
|
252
198
|
damping: (s == null ? void 0 : s.damping) ?? 30,
|
|
253
199
|
doubleSpring: (s == null ? void 0 : s.doubleSpring) ?? !1
|
|
254
|
-
},
|
|
200
|
+
}, a = () => {
|
|
255
201
|
switch (n) {
|
|
256
202
|
case "top":
|
|
257
203
|
return "50% 0%";
|
|
@@ -273,62 +219,66 @@ const S = ($ = {}) => {
|
|
|
273
219
|
default:
|
|
274
220
|
return "50% 50%";
|
|
275
221
|
}
|
|
276
|
-
},
|
|
277
|
-
const
|
|
222
|
+
}, o = (f) => {
|
|
223
|
+
const g = f * c * 100, i = a();
|
|
278
224
|
switch (t) {
|
|
279
225
|
case "ellipse":
|
|
280
|
-
return `ellipse(${
|
|
226
|
+
return `ellipse(${g}% ${g * 0.75}% at ${i})`;
|
|
281
227
|
case "square": {
|
|
282
|
-
const
|
|
283
|
-
return `polygon(${
|
|
228
|
+
const d = f * c * 100, [y, x] = i.split(" "), b = parseFloat(y), h = parseFloat(x), p = d / 2;
|
|
229
|
+
return `polygon(${b - p}% ${h - p}%, ${b + p}% ${h - p}%, ${b + p}% ${h + p}%, ${b - p}% ${h + p}%)`;
|
|
284
230
|
}
|
|
285
231
|
case "circle":
|
|
286
232
|
default:
|
|
287
|
-
return `circle(${
|
|
233
|
+
return `circle(${g}% at ${i})`;
|
|
288
234
|
}
|
|
289
|
-
},
|
|
290
|
-
const
|
|
291
|
-
clipPath:
|
|
235
|
+
}, l = (f) => {
|
|
236
|
+
const g = {
|
|
237
|
+
clipPath: o(f)
|
|
292
238
|
};
|
|
293
|
-
return
|
|
239
|
+
return r && (g.opacity = f), g;
|
|
294
240
|
};
|
|
295
241
|
return {
|
|
296
242
|
in: () => ({
|
|
297
|
-
spring:
|
|
298
|
-
css:
|
|
243
|
+
spring: u,
|
|
244
|
+
css: l
|
|
299
245
|
}),
|
|
300
246
|
out: () => ({
|
|
301
|
-
spring:
|
|
302
|
-
css:
|
|
247
|
+
spring: u,
|
|
248
|
+
css: l
|
|
303
249
|
}),
|
|
304
|
-
|
|
250
|
+
...$ && { key: $ }
|
|
305
251
|
};
|
|
306
|
-
},
|
|
307
|
-
const { spring: t, key: n } =
|
|
252
|
+
}, z = (e = {}) => {
|
|
253
|
+
const { spring: t, key: n } = e, c = {
|
|
308
254
|
stiffness: (t == null ? void 0 : t.stiffness) ?? 1e3,
|
|
309
255
|
damping: (t == null ? void 0 : t.damping) ?? 100,
|
|
310
256
|
doubleSpring: (t == null ? void 0 : t.doubleSpring) ?? !1
|
|
311
257
|
};
|
|
312
258
|
return {
|
|
313
259
|
in: () => ({
|
|
314
|
-
spring:
|
|
260
|
+
spring: c,
|
|
315
261
|
css: () => ({})
|
|
316
262
|
}),
|
|
317
263
|
out: () => ({
|
|
318
|
-
spring:
|
|
264
|
+
spring: c,
|
|
319
265
|
css: () => ({})
|
|
320
266
|
}),
|
|
321
267
|
...n && { key: n }
|
|
322
268
|
};
|
|
323
269
|
};
|
|
324
270
|
export {
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
P as
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
271
|
+
v as DoubleSpringIntegrator,
|
|
272
|
+
T as InertiaIntegrator,
|
|
273
|
+
j as IntegratorProvider,
|
|
274
|
+
q as SpringIntegrator,
|
|
275
|
+
P as blur,
|
|
276
|
+
I as bounce,
|
|
277
|
+
k as fade,
|
|
278
|
+
D as fly,
|
|
279
|
+
M as mask,
|
|
280
|
+
z as none,
|
|
281
|
+
C as rotate,
|
|
282
|
+
S as scale,
|
|
283
|
+
w as slide
|
|
334
284
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { PhysicsOptions, Transition, TransitionKey } from '../types';
|
|
2
|
+
type RotateOptions = {
|
|
3
3
|
degrees?: number;
|
|
4
4
|
clockwise?: boolean;
|
|
5
5
|
scale?: boolean;
|
|
@@ -7,9 +7,9 @@ interface RotateOptions {
|
|
|
7
7
|
origin?: string;
|
|
8
8
|
axis?: "2d" | "x" | "y" | "z";
|
|
9
9
|
perspective?: number;
|
|
10
|
-
|
|
10
|
+
physics?: PhysicsOptions;
|
|
11
11
|
key?: TransitionKey;
|
|
12
|
-
}
|
|
12
|
+
};
|
|
13
13
|
export declare const rotate: (options?: RotateOptions) => Transition;
|
|
14
14
|
export {};
|
|
15
15
|
//# sourceMappingURL=rotate.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/rotate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/rotate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAEd,UAAU,EACV,aAAa,EACd,MAAM,UAAU,CAAC;AAGlB,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB,KAAG,UAuDpD,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { PhysicsOptions, Transition, TransitionKey } from '../types';
|
|
2
|
+
type ScaleOptions = {
|
|
3
3
|
start?: number;
|
|
4
4
|
opacity?: number;
|
|
5
5
|
axis?: "x" | "y" | "both";
|
|
6
|
-
|
|
6
|
+
physics?: PhysicsOptions;
|
|
7
7
|
key?: TransitionKey;
|
|
8
|
-
}
|
|
8
|
+
};
|
|
9
9
|
export declare const scale: (options?: ScaleOptions) => Transition;
|
|
10
10
|
export {};
|
|
11
11
|
//# sourceMappingURL=scale.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/scale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/scale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAEd,UAAU,EACV,aAAa,EACd,MAAM,UAAU,CAAC;AAGlB,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB,KAAG,UA+BlD,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { PhysicsOptions, Transition, TransitionKey } from '../types';
|
|
2
|
+
type SlideOptions = {
|
|
3
3
|
direction?: "left" | "right" | "up" | "down";
|
|
4
4
|
distance?: number | string;
|
|
5
5
|
opacity?: number;
|
|
6
6
|
fade?: boolean;
|
|
7
7
|
axis?: "x" | "y";
|
|
8
|
-
|
|
8
|
+
physics?: PhysicsOptions;
|
|
9
9
|
key?: TransitionKey;
|
|
10
|
-
}
|
|
10
|
+
};
|
|
11
11
|
export declare const slide: (options?: SlideOptions) => Transition;
|
|
12
12
|
export {};
|
|
13
13
|
//# sourceMappingURL=slide.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slide.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/slide.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"slide.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/slide.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAEd,UAAU,EACV,aAAa,EACd,MAAM,UAAU,CAAC;AAGlB,KAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB,KAAG,UAmElD,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PhysicsOptions, SpringConfig } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Get physics options with fallback to default spring
|
|
4
|
+
*/
|
|
5
|
+
export declare function getPhysics(physics: PhysicsOptions | undefined, fallback: {
|
|
6
|
+
spring: SpringConfig;
|
|
7
|
+
}): PhysicsOptions;
|
|
8
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/transitions/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7D;;GAEG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,cAAc,GAAG,SAAS,EACnC,QAAQ,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,GACjC,cAAc,CAKhB"}
|
package/dist/types.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function S(n){return("tick"in n||"css"in n)&&!("springs"in n)}function r(n){return"springs"in n}function o(n){return"css"in n&&typeof n.css=="function"}function a(n){return"tick"in n&&typeof n.tick=="function"}function c(n){if(o(n)&&a(n))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function l(n){if(n.tick&&n.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function S(n){return("tick"in n||"css"in n)&&!("springs"in n)}function r(n){return"springs"in n}function o(n){return"css"in n&&typeof n.css=="function"}function a(n){return"tick"in n&&typeof n.tick=="function"}function c(n){if(o(n)&&a(n))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function l(n){if(n.tick&&n.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function g(n){const i=await n;return r(i)?(i.springs.forEach(l),i):(c(i),{prepare:i.prepare,wait:i.wait,onStart:i.onStart,onEnd:i.onEnd,springs:[{physics:i.physics,tick:i.tick,css:i.css}],schedule:"parallel"})}function m(n,i){const u=n.schedule??"parallel",p=n.springs.map(s=>{let e;switch(u){case"parallel":e=0;break;case"sequential":e=1;break;case"stagger":e=Math.max(0,Math.min(1,s.offset??0));break;default:e=0}const{css:t,offset:y,...f}=s,h=t?typeof t=="function"?i?{element:i,style:t}:void 0:{element:t.element,style:t.style}:void 0;return{...f,css:h,normalizedOffset:e}}),{schedule:k,...d}=n;return{...d,springs:p}}exports.isCssAnimation=o;exports.isMultiSpring=r;exports.isSingleSpring=S;exports.isTickAnimation=a;exports.normalizeMultiSpringSchedule=m;exports.normalizeToMultiSpring=g;exports.validateAnimationMode=c;exports.validateSpringItem=l;
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
|
+
import { Integrator } from './animator/integrator';
|
|
1
2
|
export type TransitionKey = string | symbol;
|
|
3
|
+
/**
|
|
4
|
+
* Double spring follower configuration
|
|
5
|
+
* Allows customizing the follower spring independently
|
|
6
|
+
*/
|
|
7
|
+
export type DoubleSpringFollowerConfig = {
|
|
8
|
+
stiffness: number;
|
|
9
|
+
damping: number;
|
|
10
|
+
};
|
|
2
11
|
export type SpringConfig = {
|
|
3
12
|
stiffness: number;
|
|
4
13
|
damping: number;
|
|
@@ -10,12 +19,51 @@ export type SpringConfig = {
|
|
|
10
19
|
* - 1.0: same as true
|
|
11
20
|
* - 0.5: follower has half stiffness → stronger ease-in
|
|
12
21
|
* - 0.3: even stronger ease-in
|
|
22
|
+
* - { stiffness, damping }: custom follower spring config
|
|
13
23
|
*
|
|
14
24
|
* Creates a two-spring system:
|
|
15
25
|
* - Leader spring: tracks the target directly
|
|
16
26
|
* - Follower spring: tracks the leader's position (this is the output)
|
|
17
27
|
*/
|
|
18
|
-
doubleSpring?: boolean | number;
|
|
28
|
+
doubleSpring?: boolean | number | DoubleSpringFollowerConfig;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* Resistance type for inertia physics
|
|
32
|
+
* - linear: resistance proportional to velocity (F = -r * v)
|
|
33
|
+
* - quadratic: resistance proportional to velocity squared (F = -r * v²)
|
|
34
|
+
*/
|
|
35
|
+
export type ResistanceType = "linear" | "quadratic";
|
|
36
|
+
/**
|
|
37
|
+
* Inertia configuration for ease-in effect
|
|
38
|
+
* Simulates acceleration with resistance
|
|
39
|
+
*/
|
|
40
|
+
export type InertiaConfig = {
|
|
41
|
+
/** Acceleration force (higher = faster acceleration) */
|
|
42
|
+
acceleration: number;
|
|
43
|
+
/** Resistance coefficient (higher = more resistance) */
|
|
44
|
+
resistance: number;
|
|
45
|
+
/** Resistance type (default: 'quadratic') */
|
|
46
|
+
resistanceType?: ResistanceType;
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Custom integrator factory function
|
|
50
|
+
* Allows using custom physics implementations
|
|
51
|
+
*/
|
|
52
|
+
export type IntegratorFactory = () => Integrator;
|
|
53
|
+
/**
|
|
54
|
+
* Physics options for animations
|
|
55
|
+
* Use with & to add physics options to any config type
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* type FadeOptions = { from?: number; to?: number } & PhysicsOptions;
|
|
59
|
+
*/
|
|
60
|
+
export type PhysicsOptions = {
|
|
61
|
+
/** Spring physics (ease-out) */
|
|
62
|
+
spring?: SpringConfig;
|
|
63
|
+
/** Inertia physics (ease-in) */
|
|
64
|
+
inertia?: InertiaConfig;
|
|
65
|
+
/** Custom integrator factory */
|
|
66
|
+
integrator?: IntegratorFactory;
|
|
19
67
|
};
|
|
20
68
|
/**
|
|
21
69
|
* CSS style object type
|
|
@@ -46,7 +94,11 @@ export type BaseTransitionConfig = {
|
|
|
46
94
|
* - css: Web Animation API with CSS string generation
|
|
47
95
|
*/
|
|
48
96
|
export type SingleSpringConfig = BaseTransitionConfig & {
|
|
49
|
-
|
|
97
|
+
/**
|
|
98
|
+
* Physics configuration for animation
|
|
99
|
+
* Choose one: spring (ease-out), inertia (ease-in), or custom integrator
|
|
100
|
+
*/
|
|
101
|
+
physics?: PhysicsOptions;
|
|
50
102
|
tick?: (progress: number) => void;
|
|
51
103
|
/**
|
|
52
104
|
* Style generator for Web Animation API mode
|
|
@@ -75,7 +127,11 @@ export type SingleSpringConfig = BaseTransitionConfig & {
|
|
|
75
127
|
* - css: Web Animation API with CSS string generation
|
|
76
128
|
*/
|
|
77
129
|
export type SpringItem = {
|
|
78
|
-
|
|
130
|
+
/**
|
|
131
|
+
* Physics configuration for animation
|
|
132
|
+
* Choose one: spring (ease-out), inertia (ease-in), or custom integrator
|
|
133
|
+
*/
|
|
134
|
+
physics?: PhysicsOptions;
|
|
79
135
|
/**
|
|
80
136
|
* Frame callback - called on each animation frame with progress value (RAF-based)
|
|
81
137
|
*
|