wish me luck
Browse files
Remotion-app/src/HelloWorld/ImageStream.jsx
CHANGED
@@ -9,8 +9,6 @@ import gsap from 'gsap';
|
|
9 |
import {MotionPathPlugin} from 'gsap-trial/all';
|
10 |
|
11 |
const ImageStream = React.memo(() => {
|
12 |
-
const {fps} = useVideoConfig();
|
13 |
-
|
14 |
return (
|
15 |
<AbsoluteFill
|
16 |
style={{
|
@@ -29,12 +27,7 @@ const ImageStream = React.memo(() => {
|
|
29 |
{imageSequences.map((entry, index) => {
|
30 |
return (
|
31 |
<>
|
32 |
-
<
|
33 |
-
key={entry.start}
|
34 |
-
durationInFrames={fps * (entry.end - entry.start)}
|
35 |
-
>
|
36 |
-
<Images key={index} index={index} entry={entry} />;
|
37 |
-
</TransitionSeries.Sequence>
|
38 |
</>
|
39 |
);
|
40 |
})}
|
@@ -44,6 +37,7 @@ const ImageStream = React.memo(() => {
|
|
44 |
});
|
45 |
|
46 |
const Images = React.memo(({entry, index}) => {
|
|
|
47 |
const plugins = useMemo(() => [MotionPathPlugin], []);
|
48 |
|
49 |
const gsapTimeline = () => {
|
@@ -76,7 +70,10 @@ const Images = React.memo(({entry, index}) => {
|
|
76 |
};
|
77 |
|
78 |
return (
|
79 |
-
|
|
|
|
|
|
|
80 |
<GsapAnimation
|
81 |
plugins={plugins}
|
82 |
style={{
|
@@ -104,7 +101,7 @@ const Images = React.memo(({entry, index}) => {
|
|
104 |
src={staticFile(entry.name)}
|
105 |
/>
|
106 |
</GsapAnimation>
|
107 |
-
|
108 |
);
|
109 |
});
|
110 |
|
|
|
9 |
import {MotionPathPlugin} from 'gsap-trial/all';
|
10 |
|
11 |
const ImageStream = React.memo(() => {
|
|
|
|
|
12 |
return (
|
13 |
<AbsoluteFill
|
14 |
style={{
|
|
|
27 |
{imageSequences.map((entry, index) => {
|
28 |
return (
|
29 |
<>
|
30 |
+
<Images key={index} index={index} entry={entry} />;
|
|
|
|
|
|
|
|
|
|
|
31 |
</>
|
32 |
);
|
33 |
})}
|
|
|
37 |
});
|
38 |
|
39 |
const Images = React.memo(({entry, index}) => {
|
40 |
+
const {fps} = useVideoConfig();
|
41 |
const plugins = useMemo(() => [MotionPathPlugin], []);
|
42 |
|
43 |
const gsapTimeline = () => {
|
|
|
70 |
};
|
71 |
|
72 |
return (
|
73 |
+
<TransitionSeries.Sequence
|
74 |
+
key={entry.start}
|
75 |
+
durationInFrames={fps * (entry.end - entry.start)}
|
76 |
+
>
|
77 |
<GsapAnimation
|
78 |
plugins={plugins}
|
79 |
style={{
|
|
|
101 |
src={staticFile(entry.name)}
|
102 |
/>
|
103 |
</GsapAnimation>
|
104 |
+
</TransitionSeries.Sequence>
|
105 |
);
|
106 |
});
|
107 |
|
Remotion-app/src/HelloWorld/VideoStream.jsx
CHANGED
@@ -35,7 +35,7 @@ const VideoX = React.memo(({entry}) => {
|
|
35 |
startFrom={(fps * entry.props.startFrom) / 30}
|
36 |
endAt={(fps * entry.props.endAt) / 30}
|
37 |
volume={(fps * entry.props.volume) / 30}
|
38 |
-
src={staticFile(
|
39 |
/>
|
40 |
);
|
41 |
});
|
|
|
35 |
startFrom={(fps * entry.props.startFrom) / 30}
|
36 |
endAt={(fps * entry.props.endAt) / 30}
|
37 |
volume={(fps * entry.props.volume) / 30}
|
38 |
+
src={staticFile(entry.name)}
|
39 |
/>
|
40 |
);
|
41 |
});
|