@remotion/transitions 4.0.448 → 4.0.449
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/esm/clock-wipe.mjs +10 -26
- package/dist/esm/iris.mjs +10 -26
- package/dist/esm/wipe.mjs +31 -127
- package/dist/presentations/clock-wipe.js +5 -5
- package/dist/presentations/iris.js +5 -9
- package/dist/presentations/wipe.js +26 -106
- package/package.json +1 -1
package/dist/esm/clock-wipe.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// src/presentations/clock-wipe.tsx
|
|
2
2
|
import { translatePath } from "@remotion/paths";
|
|
3
3
|
import { makePie } from "@remotion/shapes";
|
|
4
|
-
import { useMemo
|
|
5
|
-
import { AbsoluteFill
|
|
6
|
-
import { jsx
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { AbsoluteFill } from "remotion";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
var ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
|
|
8
8
|
const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
|
|
9
9
|
const { path } = makePie({
|
|
@@ -11,16 +11,15 @@ var ClockWipePresentation = ({ children, presentationDirection, presentationProg
|
|
|
11
11
|
progress: presentationProgress
|
|
12
12
|
});
|
|
13
13
|
const translatedPath = translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
|
|
14
|
-
const [clipId] = useState(() => String(random(null)));
|
|
15
14
|
const style = useMemo(() => {
|
|
16
15
|
return {
|
|
17
16
|
width: "100%",
|
|
18
17
|
height: "100%",
|
|
19
|
-
clipPath: presentationDirection === "exiting" ? undefined : `
|
|
18
|
+
clipPath: presentationDirection === "exiting" ? undefined : `path("${translatedPath}")`,
|
|
20
19
|
...presentationDirection === "entering" ? passedProps.innerEnterStyle : passedProps.innerExitStyle
|
|
21
20
|
};
|
|
22
21
|
}, [
|
|
23
|
-
|
|
22
|
+
translatedPath,
|
|
24
23
|
passedProps.innerEnterStyle,
|
|
25
24
|
passedProps.innerExitStyle,
|
|
26
25
|
presentationDirection
|
|
@@ -32,27 +31,12 @@ var ClockWipePresentation = ({ children, presentationDirection, presentationProg
|
|
|
32
31
|
passedProps.outerExitStyle,
|
|
33
32
|
presentationDirection
|
|
34
33
|
]);
|
|
35
|
-
return /* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
36
35
|
style: outerStyle,
|
|
37
|
-
children:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}),
|
|
42
|
-
presentationDirection === "exiting" ? null : /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
43
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
44
|
-
children: /* @__PURE__ */ jsx("defs", {
|
|
45
|
-
children: /* @__PURE__ */ jsx("clipPath", {
|
|
46
|
-
id: clipId,
|
|
47
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
48
|
-
d: translatedPath,
|
|
49
|
-
fill: "black"
|
|
50
|
-
})
|
|
51
|
-
})
|
|
52
|
-
})
|
|
53
|
-
})
|
|
54
|
-
})
|
|
55
|
-
]
|
|
36
|
+
children: /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
37
|
+
style,
|
|
38
|
+
children
|
|
39
|
+
})
|
|
56
40
|
});
|
|
57
41
|
};
|
|
58
42
|
var clockWipe = (props) => {
|
package/dist/esm/iris.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// src/presentations/iris.tsx
|
|
2
2
|
import { translatePath } from "@remotion/paths";
|
|
3
3
|
import { makeCircle } from "@remotion/shapes";
|
|
4
|
-
import { useMemo
|
|
5
|
-
import { AbsoluteFill
|
|
6
|
-
import { jsx
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { AbsoluteFill } from "remotion";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
var IrisPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
|
|
8
8
|
const maxRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
|
|
9
9
|
const minRadius = 0;
|
|
@@ -12,16 +12,15 @@ var IrisPresentation = ({ children, presentationDirection, presentationProgress,
|
|
|
12
12
|
radius: currentRadius
|
|
13
13
|
});
|
|
14
14
|
const translatedPath = translatePath(path, passedProps.width / 2 - currentRadius, passedProps.height / 2 - currentRadius);
|
|
15
|
-
const [clipId] = useState(() => String(random(null)));
|
|
16
15
|
const style = useMemo(() => {
|
|
17
16
|
return {
|
|
18
17
|
width: "100%",
|
|
19
18
|
height: "100%",
|
|
20
|
-
clipPath: presentationDirection === "exiting" ? undefined : `
|
|
19
|
+
clipPath: presentationDirection === "exiting" ? undefined : `path("${translatedPath}")`,
|
|
21
20
|
...presentationDirection === "entering" ? passedProps.innerEnterStyle : passedProps.innerExitStyle
|
|
22
21
|
};
|
|
23
22
|
}, [
|
|
24
|
-
|
|
23
|
+
translatedPath,
|
|
25
24
|
passedProps.innerEnterStyle,
|
|
26
25
|
passedProps.innerExitStyle,
|
|
27
26
|
presentationDirection
|
|
@@ -33,27 +32,12 @@ var IrisPresentation = ({ children, presentationDirection, presentationProgress,
|
|
|
33
32
|
passedProps.outerExitStyle,
|
|
34
33
|
presentationDirection
|
|
35
34
|
]);
|
|
36
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
37
36
|
style: outerStyle,
|
|
38
|
-
children:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}),
|
|
43
|
-
presentationDirection === "exiting" ? null : /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
44
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
45
|
-
children: /* @__PURE__ */ jsx("defs", {
|
|
46
|
-
children: /* @__PURE__ */ jsx("clipPath", {
|
|
47
|
-
id: clipId,
|
|
48
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
49
|
-
d: translatedPath,
|
|
50
|
-
fill: "black"
|
|
51
|
-
})
|
|
52
|
-
})
|
|
53
|
-
})
|
|
54
|
-
})
|
|
55
|
-
})
|
|
56
|
-
]
|
|
37
|
+
children: /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
38
|
+
style,
|
|
39
|
+
children
|
|
40
|
+
})
|
|
57
41
|
});
|
|
58
42
|
};
|
|
59
43
|
var iris = (props) => {
|
package/dist/esm/wipe.mjs
CHANGED
|
@@ -1,119 +1,49 @@
|
|
|
1
1
|
// src/presentations/wipe.tsx
|
|
2
|
-
import { useMemo
|
|
3
|
-
import { AbsoluteFill
|
|
4
|
-
import { jsx
|
|
5
|
-
var
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { AbsoluteFill } from "remotion";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var makePolygonIn = (progress, direction) => {
|
|
6
|
+
const p = progress * 100;
|
|
6
7
|
switch (direction) {
|
|
7
8
|
case "from-left":
|
|
8
|
-
return `
|
|
9
|
-
M 0 0
|
|
10
|
-
L ${progress} 0
|
|
11
|
-
L ${progress} 1
|
|
12
|
-
L 0 1
|
|
13
|
-
Z`;
|
|
9
|
+
return `polygon(0% 0%, ${p}% 0%, ${p}% 100%, 0% 100%)`;
|
|
14
10
|
case "from-top-left":
|
|
15
|
-
return `
|
|
16
|
-
M 0 0
|
|
17
|
-
L ${progress * 2} 0
|
|
18
|
-
L 0 ${progress * 2}
|
|
19
|
-
Z`;
|
|
11
|
+
return `polygon(0% 0%, ${p * 2}% 0%, 0% ${p * 2}%)`;
|
|
20
12
|
case "from-top":
|
|
21
|
-
return `
|
|
22
|
-
M 0 0
|
|
23
|
-
L 1 0
|
|
24
|
-
L 1 ${progress}
|
|
25
|
-
L 0 ${progress}
|
|
26
|
-
Z`;
|
|
13
|
+
return `polygon(0% 0%, 100% 0%, 100% ${p}%, 0% ${p}%)`;
|
|
27
14
|
case "from-top-right":
|
|
28
|
-
return `
|
|
29
|
-
M 1 0
|
|
30
|
-
L ${1 - progress * 2} 0
|
|
31
|
-
L 1 ${progress * 2}
|
|
32
|
-
Z`;
|
|
15
|
+
return `polygon(100% 0%, ${100 - p * 2}% 0%, 100% ${p * 2}%)`;
|
|
33
16
|
case "from-right":
|
|
34
|
-
return `
|
|
35
|
-
M 1 0
|
|
36
|
-
L 1 1
|
|
37
|
-
L ${1 - progress} 1
|
|
38
|
-
L ${1 - progress} 0
|
|
39
|
-
Z`;
|
|
17
|
+
return `polygon(100% 0%, 100% 100%, ${100 - p}% 100%, ${100 - p}% 0%)`;
|
|
40
18
|
case "from-bottom-right":
|
|
41
|
-
return `
|
|
42
|
-
M 1 1
|
|
43
|
-
L ${1 - progress * 2} 1
|
|
44
|
-
L 1 ${1 - progress * 2}
|
|
45
|
-
Z`;
|
|
19
|
+
return `polygon(100% 100%, ${100 - p * 2}% 100%, 100% ${100 - p * 2}%)`;
|
|
46
20
|
case "from-bottom":
|
|
47
|
-
return `
|
|
48
|
-
M 0 1
|
|
49
|
-
L 1 1
|
|
50
|
-
L 1 ${1 - progress}
|
|
51
|
-
L 0 ${1 - progress}
|
|
52
|
-
Z`;
|
|
21
|
+
return `polygon(0% 100%, 100% 100%, 100% ${100 - p}%, 0% ${100 - p}%)`;
|
|
53
22
|
case "from-bottom-left":
|
|
54
|
-
return `
|
|
55
|
-
M 0 1
|
|
56
|
-
L 0 ${1 - progress * 2}
|
|
57
|
-
L ${progress * 2} 1
|
|
58
|
-
Z`;
|
|
23
|
+
return `polygon(0% 100%, 0% ${100 - p * 2}%, ${p * 2}% 100%)`;
|
|
59
24
|
default:
|
|
60
25
|
throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
|
|
61
26
|
}
|
|
62
27
|
};
|
|
63
|
-
var
|
|
28
|
+
var makePolygonOut = (progress, direction) => {
|
|
29
|
+
const p = progress * 100;
|
|
64
30
|
switch (direction) {
|
|
65
31
|
case "from-left":
|
|
66
|
-
return `
|
|
67
|
-
M 1 1
|
|
68
|
-
L ${1 - progress} 1
|
|
69
|
-
L ${1 - progress} 0
|
|
70
|
-
L 1 0
|
|
71
|
-
Z`;
|
|
32
|
+
return `polygon(100% 100%, ${100 - p}% 100%, ${100 - p}% 0%, 100% 0%)`;
|
|
72
33
|
case "from-top-left":
|
|
73
|
-
return `
|
|
74
|
-
M 1 1
|
|
75
|
-
L ${1 - 2 * progress} 1
|
|
76
|
-
L 1 ${1 - 2 * progress}
|
|
77
|
-
Z`;
|
|
34
|
+
return `polygon(100% 100%, ${100 - p * 2}% 100%, 100% ${100 - p * 2}%)`;
|
|
78
35
|
case "from-top":
|
|
79
|
-
return `
|
|
80
|
-
M 1 1
|
|
81
|
-
L 0 1
|
|
82
|
-
L 0 ${1 - progress}
|
|
83
|
-
L 1 ${1 - progress}
|
|
84
|
-
Z`;
|
|
36
|
+
return `polygon(100% 100%, 0% 100%, 0% ${100 - p}%, 100% ${100 - p}%)`;
|
|
85
37
|
case "from-top-right":
|
|
86
|
-
return `
|
|
87
|
-
M 0 1
|
|
88
|
-
L ${progress * 2} 1
|
|
89
|
-
L 0 ${1 - progress * 2}
|
|
90
|
-
Z`;
|
|
38
|
+
return `polygon(0% 100%, ${p * 2}% 100%, 0% ${100 - p * 2}%)`;
|
|
91
39
|
case "from-right":
|
|
92
|
-
return `
|
|
93
|
-
M 0 0
|
|
94
|
-
L ${progress} 0
|
|
95
|
-
L ${progress} 1
|
|
96
|
-
L 0 1
|
|
97
|
-
Z`;
|
|
40
|
+
return `polygon(0% 0%, ${p}% 0%, ${p}% 100%, 0% 100%)`;
|
|
98
41
|
case "from-bottom-right":
|
|
99
|
-
return `
|
|
100
|
-
M 0 0
|
|
101
|
-
L ${progress * 2} 0
|
|
102
|
-
L 0 ${progress * 2}
|
|
103
|
-
Z`;
|
|
42
|
+
return `polygon(0% 0%, ${p * 2}% 0%, 0% ${p * 2}%)`;
|
|
104
43
|
case "from-bottom":
|
|
105
|
-
return `
|
|
106
|
-
M 1 0
|
|
107
|
-
L 0 0
|
|
108
|
-
L 0 ${progress}
|
|
109
|
-
L 1 ${progress}
|
|
110
|
-
Z`;
|
|
44
|
+
return `polygon(100% 0%, 0% 0%, 0% ${p}%, 100% ${p}%)`;
|
|
111
45
|
case "from-bottom-left":
|
|
112
|
-
return `
|
|
113
|
-
M 1 0
|
|
114
|
-
L ${1 - progress * 2} 0
|
|
115
|
-
L 1 ${progress * 2}
|
|
116
|
-
Z`;
|
|
46
|
+
return `polygon(100% 0%, ${100 - p * 2}% 0%, 100% ${p * 2}%)`;
|
|
117
47
|
default:
|
|
118
48
|
throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
|
|
119
49
|
}
|
|
@@ -130,53 +60,27 @@ var WipePresentation = ({
|
|
|
130
60
|
outerExitStyle
|
|
131
61
|
}
|
|
132
62
|
}) => {
|
|
133
|
-
const [clipId] = useState(() => String(random(null)));
|
|
134
63
|
const progressInDirection = presentationDirection === "entering" ? presentationProgress : 1 - presentationProgress;
|
|
135
|
-
const
|
|
64
|
+
const clipPath = presentationDirection === "entering" ? makePolygonIn(progressInDirection, direction) : makePolygonOut(progressInDirection, direction);
|
|
136
65
|
const style = useMemo(() => {
|
|
137
66
|
return {
|
|
138
67
|
width: "100%",
|
|
139
68
|
height: "100%",
|
|
140
69
|
justifyContent: "center",
|
|
141
70
|
alignItems: "center",
|
|
142
|
-
clipPath
|
|
71
|
+
clipPath,
|
|
143
72
|
...presentationDirection === "entering" ? innerEnterStyle : innerExitStyle
|
|
144
73
|
};
|
|
145
|
-
}, [
|
|
74
|
+
}, [clipPath, innerEnterStyle, innerExitStyle, presentationDirection]);
|
|
146
75
|
const outerStyle = useMemo(() => {
|
|
147
76
|
return presentationDirection === "entering" ? outerEnterStyle : outerExitStyle;
|
|
148
77
|
}, [outerEnterStyle, outerExitStyle, presentationDirection]);
|
|
149
|
-
|
|
150
|
-
return {
|
|
151
|
-
width: "100%",
|
|
152
|
-
height: "100%",
|
|
153
|
-
pointerEvents: "none"
|
|
154
|
-
};
|
|
155
|
-
}, []);
|
|
156
|
-
return /* @__PURE__ */ jsxs(AbsoluteFill, {
|
|
78
|
+
return /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
157
79
|
style: outerStyle,
|
|
158
|
-
children:
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
}),
|
|
163
|
-
/* @__PURE__ */ jsx(AbsoluteFill, {
|
|
164
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
165
|
-
viewBox: "0 0 1 1",
|
|
166
|
-
style: svgStyle,
|
|
167
|
-
children: /* @__PURE__ */ jsx("defs", {
|
|
168
|
-
children: /* @__PURE__ */ jsx("clipPath", {
|
|
169
|
-
id: clipId,
|
|
170
|
-
clipPathUnits: "objectBoundingBox",
|
|
171
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
172
|
-
d: path,
|
|
173
|
-
fill: "black"
|
|
174
|
-
})
|
|
175
|
-
})
|
|
176
|
-
})
|
|
177
|
-
})
|
|
178
|
-
})
|
|
179
|
-
]
|
|
80
|
+
children: /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
81
|
+
style,
|
|
82
|
+
children
|
|
83
|
+
})
|
|
180
84
|
});
|
|
181
85
|
};
|
|
182
86
|
var wipe = (props) => {
|
|
@@ -13,18 +13,19 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
|
|
|
13
13
|
progress: presentationProgress,
|
|
14
14
|
});
|
|
15
15
|
const translatedPath = (0, paths_1.translatePath)(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
|
|
16
|
-
const [clipId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
|
|
17
16
|
const style = (0, react_1.useMemo)(() => {
|
|
18
17
|
return {
|
|
19
18
|
width: '100%',
|
|
20
19
|
height: '100%',
|
|
21
|
-
clipPath: presentationDirection === 'exiting'
|
|
20
|
+
clipPath: presentationDirection === 'exiting'
|
|
21
|
+
? undefined
|
|
22
|
+
: `path("${translatedPath}")`,
|
|
22
23
|
...(presentationDirection === 'entering'
|
|
23
24
|
? passedProps.innerEnterStyle
|
|
24
25
|
: passedProps.innerExitStyle),
|
|
25
26
|
};
|
|
26
27
|
}, [
|
|
27
|
-
|
|
28
|
+
translatedPath,
|
|
28
29
|
passedProps.innerEnterStyle,
|
|
29
30
|
passedProps.innerExitStyle,
|
|
30
31
|
presentationDirection,
|
|
@@ -38,8 +39,7 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
|
|
|
38
39
|
passedProps.outerExitStyle,
|
|
39
40
|
presentationDirection,
|
|
40
41
|
]);
|
|
41
|
-
return (jsx_runtime_1.
|
|
42
|
-
jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("svg", { children: jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsx("clipPath", { id: clipId, children: jsx_runtime_1.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
|
|
42
|
+
return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: outerStyle, children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }) }));
|
|
43
43
|
};
|
|
44
44
|
/*
|
|
45
45
|
* @description Creates a clock wipe transition that uses a circular wipe to reveal the underlying scene as the current scene exits.
|
|
@@ -7,10 +7,7 @@ const shapes_1 = require("@remotion/shapes");
|
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const remotion_1 = require("remotion");
|
|
9
9
|
const IrisPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
|
|
10
|
-
// Calculate the radius needed to cover the entire viewport
|
|
11
10
|
const maxRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
|
|
12
|
-
// For iris, we want to start small and grow large (entering)
|
|
13
|
-
// or start large and shrink small (exiting)
|
|
14
11
|
const minRadius = 0;
|
|
15
12
|
const currentRadius = presentationDirection === 'entering'
|
|
16
13
|
? minRadius + (maxRadius - minRadius) * presentationProgress
|
|
@@ -18,20 +15,20 @@ const IrisPresentation = ({ children, presentationDirection, presentationProgres
|
|
|
18
15
|
const { path } = (0, shapes_1.makeCircle)({
|
|
19
16
|
radius: currentRadius,
|
|
20
17
|
});
|
|
21
|
-
// Center the circle in the viewport
|
|
22
18
|
const translatedPath = (0, paths_1.translatePath)(path, passedProps.width / 2 - currentRadius, passedProps.height / 2 - currentRadius);
|
|
23
|
-
const [clipId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
|
|
24
19
|
const style = (0, react_1.useMemo)(() => {
|
|
25
20
|
return {
|
|
26
21
|
width: '100%',
|
|
27
22
|
height: '100%',
|
|
28
|
-
clipPath: presentationDirection === 'exiting'
|
|
23
|
+
clipPath: presentationDirection === 'exiting'
|
|
24
|
+
? undefined
|
|
25
|
+
: `path("${translatedPath}")`,
|
|
29
26
|
...(presentationDirection === 'entering'
|
|
30
27
|
? passedProps.innerEnterStyle
|
|
31
28
|
: passedProps.innerExitStyle),
|
|
32
29
|
};
|
|
33
30
|
}, [
|
|
34
|
-
|
|
31
|
+
translatedPath,
|
|
35
32
|
passedProps.innerEnterStyle,
|
|
36
33
|
passedProps.innerExitStyle,
|
|
37
34
|
presentationDirection,
|
|
@@ -45,8 +42,7 @@ const IrisPresentation = ({ children, presentationDirection, presentationProgres
|
|
|
45
42
|
passedProps.outerExitStyle,
|
|
46
43
|
presentationDirection,
|
|
47
44
|
]);
|
|
48
|
-
return (jsx_runtime_1.
|
|
49
|
-
jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("svg", { children: jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsx("clipPath", { id: clipId, children: jsx_runtime_1.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
|
|
45
|
+
return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: outerStyle, children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }) }));
|
|
50
46
|
};
|
|
51
47
|
/*
|
|
52
48
|
* @description Creates an iris transition that uses a circular mask starting from the center to reveal the underlying scene.
|
|
@@ -4,157 +4,77 @@ exports.wipe = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const remotion_1 = require("remotion");
|
|
7
|
-
const
|
|
7
|
+
const makePolygonIn = (progress, direction) => {
|
|
8
|
+
const p = progress * 100;
|
|
8
9
|
switch (direction) {
|
|
9
10
|
case 'from-left':
|
|
10
|
-
return `
|
|
11
|
-
M 0 0
|
|
12
|
-
L ${progress} 0
|
|
13
|
-
L ${progress} 1
|
|
14
|
-
L 0 1
|
|
15
|
-
Z`;
|
|
11
|
+
return `polygon(0% 0%, ${p}% 0%, ${p}% 100%, 0% 100%)`;
|
|
16
12
|
case 'from-top-left':
|
|
17
|
-
return `
|
|
18
|
-
M 0 0
|
|
19
|
-
L ${progress * 2} 0
|
|
20
|
-
L 0 ${progress * 2}
|
|
21
|
-
Z`;
|
|
13
|
+
return `polygon(0% 0%, ${p * 2}% 0%, 0% ${p * 2}%)`;
|
|
22
14
|
case 'from-top':
|
|
23
|
-
return `
|
|
24
|
-
M 0 0
|
|
25
|
-
L 1 0
|
|
26
|
-
L 1 ${progress}
|
|
27
|
-
L 0 ${progress}
|
|
28
|
-
Z`;
|
|
15
|
+
return `polygon(0% 0%, 100% 0%, 100% ${p}%, 0% ${p}%)`;
|
|
29
16
|
case 'from-top-right':
|
|
30
|
-
return `
|
|
31
|
-
M 1 0
|
|
32
|
-
L ${1 - progress * 2} 0
|
|
33
|
-
L 1 ${progress * 2}
|
|
34
|
-
Z`;
|
|
17
|
+
return `polygon(100% 0%, ${100 - p * 2}% 0%, 100% ${p * 2}%)`;
|
|
35
18
|
case 'from-right':
|
|
36
|
-
return `
|
|
37
|
-
M 1 0
|
|
38
|
-
L 1 1
|
|
39
|
-
L ${1 - progress} 1
|
|
40
|
-
L ${1 - progress} 0
|
|
41
|
-
Z`;
|
|
19
|
+
return `polygon(100% 0%, 100% 100%, ${100 - p}% 100%, ${100 - p}% 0%)`;
|
|
42
20
|
case 'from-bottom-right':
|
|
43
|
-
return `
|
|
44
|
-
M 1 1
|
|
45
|
-
L ${1 - progress * 2} 1
|
|
46
|
-
L 1 ${1 - progress * 2}
|
|
47
|
-
Z`;
|
|
21
|
+
return `polygon(100% 100%, ${100 - p * 2}% 100%, 100% ${100 - p * 2}%)`;
|
|
48
22
|
case 'from-bottom':
|
|
49
|
-
return `
|
|
50
|
-
M 0 1
|
|
51
|
-
L 1 1
|
|
52
|
-
L 1 ${1 - progress}
|
|
53
|
-
L 0 ${1 - progress}
|
|
54
|
-
Z`;
|
|
23
|
+
return `polygon(0% 100%, 100% 100%, 100% ${100 - p}%, 0% ${100 - p}%)`;
|
|
55
24
|
case 'from-bottom-left':
|
|
56
|
-
return `
|
|
57
|
-
M 0 1
|
|
58
|
-
L 0 ${1 - progress * 2}
|
|
59
|
-
L ${progress * 2} 1
|
|
60
|
-
Z`;
|
|
25
|
+
return `polygon(0% 100%, 0% ${100 - p * 2}%, ${p * 2}% 100%)`;
|
|
61
26
|
default:
|
|
62
27
|
throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
|
|
63
28
|
}
|
|
64
29
|
};
|
|
65
|
-
const
|
|
30
|
+
const makePolygonOut = (progress, direction) => {
|
|
31
|
+
const p = progress * 100;
|
|
66
32
|
switch (direction) {
|
|
67
33
|
case 'from-left':
|
|
68
|
-
return `
|
|
69
|
-
M 1 1
|
|
70
|
-
L ${1 - progress} 1
|
|
71
|
-
L ${1 - progress} 0
|
|
72
|
-
L 1 0
|
|
73
|
-
Z`;
|
|
34
|
+
return `polygon(100% 100%, ${100 - p}% 100%, ${100 - p}% 0%, 100% 0%)`;
|
|
74
35
|
case 'from-top-left':
|
|
75
|
-
return `
|
|
76
|
-
M 1 1
|
|
77
|
-
L ${1 - 2 * progress} 1
|
|
78
|
-
L 1 ${1 - 2 * progress}
|
|
79
|
-
Z`;
|
|
36
|
+
return `polygon(100% 100%, ${100 - p * 2}% 100%, 100% ${100 - p * 2}%)`;
|
|
80
37
|
case 'from-top':
|
|
81
|
-
return `
|
|
82
|
-
M 1 1
|
|
83
|
-
L 0 1
|
|
84
|
-
L 0 ${1 - progress}
|
|
85
|
-
L 1 ${1 - progress}
|
|
86
|
-
Z`;
|
|
38
|
+
return `polygon(100% 100%, 0% 100%, 0% ${100 - p}%, 100% ${100 - p}%)`;
|
|
87
39
|
case 'from-top-right':
|
|
88
|
-
return `
|
|
89
|
-
M 0 1
|
|
90
|
-
L ${progress * 2} 1
|
|
91
|
-
L 0 ${1 - progress * 2}
|
|
92
|
-
Z`;
|
|
40
|
+
return `polygon(0% 100%, ${p * 2}% 100%, 0% ${100 - p * 2}%)`;
|
|
93
41
|
case 'from-right':
|
|
94
|
-
return `
|
|
95
|
-
M 0 0
|
|
96
|
-
L ${progress} 0
|
|
97
|
-
L ${progress} 1
|
|
98
|
-
L 0 1
|
|
99
|
-
Z`;
|
|
42
|
+
return `polygon(0% 0%, ${p}% 0%, ${p}% 100%, 0% 100%)`;
|
|
100
43
|
case 'from-bottom-right':
|
|
101
|
-
return `
|
|
102
|
-
M 0 0
|
|
103
|
-
L ${progress * 2} 0
|
|
104
|
-
L 0 ${progress * 2}
|
|
105
|
-
Z`;
|
|
44
|
+
return `polygon(0% 0%, ${p * 2}% 0%, 0% ${p * 2}%)`;
|
|
106
45
|
case 'from-bottom':
|
|
107
|
-
return `
|
|
108
|
-
M 1 0
|
|
109
|
-
L 0 0
|
|
110
|
-
L 0 ${progress}
|
|
111
|
-
L 1 ${progress}
|
|
112
|
-
Z`;
|
|
46
|
+
return `polygon(100% 0%, 0% 0%, 0% ${p}%, 100% ${p}%)`;
|
|
113
47
|
case 'from-bottom-left':
|
|
114
|
-
return `
|
|
115
|
-
M 1 0
|
|
116
|
-
L ${1 - progress * 2} 0
|
|
117
|
-
L 1 ${progress * 2}
|
|
118
|
-
Z`;
|
|
48
|
+
return `polygon(100% 0%, ${100 - p * 2}% 0%, 100% ${p * 2}%)`;
|
|
119
49
|
default:
|
|
120
50
|
throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
|
|
121
51
|
}
|
|
122
52
|
};
|
|
123
53
|
const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
|
|
124
|
-
const [clipId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
|
|
125
54
|
const progressInDirection = presentationDirection === 'entering'
|
|
126
55
|
? presentationProgress
|
|
127
56
|
: 1 - presentationProgress;
|
|
128
|
-
const
|
|
129
|
-
?
|
|
130
|
-
:
|
|
57
|
+
const clipPath = presentationDirection === 'entering'
|
|
58
|
+
? makePolygonIn(progressInDirection, direction)
|
|
59
|
+
: makePolygonOut(progressInDirection, direction);
|
|
131
60
|
const style = (0, react_1.useMemo)(() => {
|
|
132
61
|
return {
|
|
133
62
|
width: '100%',
|
|
134
63
|
height: '100%',
|
|
135
64
|
justifyContent: 'center',
|
|
136
65
|
alignItems: 'center',
|
|
137
|
-
clipPath
|
|
66
|
+
clipPath,
|
|
138
67
|
...(presentationDirection === 'entering'
|
|
139
68
|
? innerEnterStyle
|
|
140
69
|
: innerExitStyle),
|
|
141
70
|
};
|
|
142
|
-
}, [
|
|
71
|
+
}, [clipPath, innerEnterStyle, innerExitStyle, presentationDirection]);
|
|
143
72
|
const outerStyle = (0, react_1.useMemo)(() => {
|
|
144
73
|
return presentationDirection === 'entering'
|
|
145
74
|
? outerEnterStyle
|
|
146
75
|
: outerExitStyle;
|
|
147
76
|
}, [outerEnterStyle, outerExitStyle, presentationDirection]);
|
|
148
|
-
|
|
149
|
-
return {
|
|
150
|
-
width: '100%',
|
|
151
|
-
height: '100%',
|
|
152
|
-
pointerEvents: 'none',
|
|
153
|
-
};
|
|
154
|
-
}, []);
|
|
155
|
-
return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: outerStyle, children: [
|
|
156
|
-
jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx_runtime_1.jsx("path", { d: path, fill: "black" }) }) }) }) })
|
|
157
|
-
] }));
|
|
77
|
+
return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: outerStyle, children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }) }));
|
|
158
78
|
};
|
|
159
79
|
/*
|
|
160
80
|
* @description A presentation where the entering slide slides over the exiting slide.
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/transitions",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.449",
|
|
7
7
|
"description": "Library for creating transitions in Remotion",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"main": "dist/esm/index.mjs",
|