transition gsap test
Browse files
Remotion-app/src/HelloWorld/ImageStream.jsx
CHANGED
@@ -9,7 +9,9 @@ import React from 'react';
|
|
9 |
import {staticFile, useVideoConfig, Img, Easing} from 'remotion';
|
10 |
import imageSequences from './Assets/ImageSequences.json';
|
11 |
import {TransitionSeries, linearTiming} from '@remotion/transitions';
|
12 |
-
import
|
|
|
|
|
13 |
export default function ImageStream() {
|
14 |
const {fps} = useVideoConfig();
|
15 |
|
@@ -37,13 +39,6 @@ export default function ImageStream() {
|
|
37 |
>
|
38 |
<Images key={index} entry={entry} />;
|
39 |
</TransitionSeries.Sequence>
|
40 |
-
<TransitionSeries.Transition
|
41 |
-
presentation={slide('from-left')}
|
42 |
-
timing={linearTiming({
|
43 |
-
durationInFrames: 2,
|
44 |
-
easing: Easing.bezier(0.02, 1.85, 0.83, 0.43),
|
45 |
-
})}
|
46 |
-
/>
|
47 |
</>
|
48 |
);
|
49 |
})}
|
@@ -53,65 +48,59 @@ export default function ImageStream() {
|
|
53 |
}
|
54 |
|
55 |
const Images = ({entry}) => {
|
56 |
-
const
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
delay: 0,
|
66 |
-
from: 0,
|
67 |
-
to: 1,
|
68 |
-
durationInFrames: durationInFrames,
|
69 |
-
});
|
70 |
-
const initialSpring = spring({
|
71 |
-
fps,
|
72 |
-
frame,
|
73 |
-
config: {
|
74 |
-
damping: 100,
|
75 |
-
},
|
76 |
-
delay: 0,
|
77 |
-
from: 0,
|
78 |
-
to: 1,
|
79 |
-
durationInFrames: durationInFrames,
|
80 |
-
});
|
81 |
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
-
|
90 |
-
|
91 |
-
|
92 |
-
|
93 |
-
|
94 |
-
|
95 |
-
|
96 |
-
|
97 |
-
|
|
|
|
|
|
|
98 |
|
99 |
return (
|
100 |
<>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
101 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="filters">
|
102 |
<defs>
|
103 |
<filter id="blur">
|
104 |
-
<feGaussianBlur
|
|
|
|
|
|
|
105 |
</filter>
|
106 |
</defs>
|
107 |
</svg>
|
108 |
<Img
|
|
|
109 |
style={{
|
110 |
-
transform: ` scale(${zoom}) ${
|
111 |
-
initialSpring > 0.99
|
112 |
-
? `translateX(${blur * 5}px)`
|
113 |
-
: `translateX(-${blur * 5}px)`
|
114 |
-
}`,
|
115 |
filter: `url(#blur)`,
|
116 |
objectPosition: 'center',
|
117 |
objectFit: 'cover',
|
@@ -120,17 +109,14 @@ const Images = ({entry}) => {
|
|
120 |
top: '50%', // Center vertically
|
121 |
left: '50%', // Center horizontally
|
122 |
transform: 'translate(-50%, -50%)',
|
123 |
-
|
124 |
-
// height: '100vh',
|
125 |
width: 1080,
|
126 |
height: 1920,
|
127 |
-
|
128 |
-
// opacity: 0.1
|
129 |
-
// transform: `translateX(-${blur * 5}px)`,
|
130 |
-
// transition: 'all 5s ease',
|
131 |
}}
|
132 |
src={staticFile(entry.name)}
|
133 |
/>
|
|
|
134 |
</>
|
135 |
);
|
136 |
};
|
|
|
9 |
import {staticFile, useVideoConfig, Img, Easing} from 'remotion';
|
10 |
import imageSequences from './Assets/ImageSequences.json';
|
11 |
import {TransitionSeries, linearTiming} from '@remotion/transitions';
|
12 |
+
import GsapAnimation from './Components/GsapAnimation';
|
13 |
+
import gsap from 'gsap';
|
14 |
+
|
15 |
export default function ImageStream() {
|
16 |
const {fps} = useVideoConfig();
|
17 |
|
|
|
39 |
>
|
40 |
<Images key={index} entry={entry} />;
|
41 |
</TransitionSeries.Sequence>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
42 |
</>
|
43 |
);
|
44 |
})}
|
|
|
48 |
}
|
49 |
|
50 |
const Images = ({entry}) => {
|
51 |
+
const gsapTimeline = () => {
|
52 |
+
let tlContainer = gsap.timeline();
|
53 |
+
tlContainer.fromTo(
|
54 |
+
'#gaussianBlur',
|
55 |
+
{
|
56 |
+
attr: {stdDeviation: `250,0`},
|
57 |
+
},
|
58 |
+
{
|
59 |
+
attr: {stdDeviation: `0,0`},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
60 |
|
61 |
+
duration: 1/2,
|
62 |
+
},
|
63 |
+
0
|
64 |
+
);
|
65 |
+
tlContainer.fromTo(
|
66 |
+
'#imagex',
|
67 |
+
{
|
68 |
+
scale: 1.1,
|
69 |
+
xPercent:-10,
|
70 |
+
},
|
71 |
+
{
|
72 |
+
scale: 1,
|
73 |
+
xPercent:0,
|
74 |
+
duration: 1/2,
|
75 |
+
},
|
76 |
+
0
|
77 |
+
);
|
78 |
+
return tlContainer;
|
79 |
+
};
|
80 |
|
81 |
return (
|
82 |
<>
|
83 |
+
<GsapAnimation
|
84 |
+
style={{
|
85 |
+
BackgroundColor: 'black',
|
86 |
+
}}
|
87 |
+
className="bg-black"
|
88 |
+
Timeline={gsapTimeline}
|
89 |
+
>
|
90 |
+
<Audio src={staticFile('sfx_1.mp3')} />
|
91 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="filters">
|
92 |
<defs>
|
93 |
<filter id="blur">
|
94 |
+
<feGaussianBlur
|
95 |
+
id="gaussianBlur"
|
96 |
+
in="SourceGraphic"
|
97 |
+
/>
|
98 |
</filter>
|
99 |
</defs>
|
100 |
</svg>
|
101 |
<Img
|
102 |
+
id="imagex"
|
103 |
style={{
|
|
|
|
|
|
|
|
|
|
|
104 |
filter: `url(#blur)`,
|
105 |
objectPosition: 'center',
|
106 |
objectFit: 'cover',
|
|
|
109 |
top: '50%', // Center vertically
|
110 |
left: '50%', // Center horizontally
|
111 |
transform: 'translate(-50%, -50%)',
|
112 |
+
|
|
|
113 |
width: 1080,
|
114 |
height: 1920,
|
115 |
+
|
|
|
|
|
|
|
116 |
}}
|
117 |
src={staticFile(entry.name)}
|
118 |
/>
|
119 |
+
</GsapAnimation>
|
120 |
</>
|
121 |
);
|
122 |
};
|