File size: 2,181 Bytes
57155b1 d86c84c 6afbe7b d86c84c 520b716 7deade8 d86c84c 2d9a860 14a8e84 d86c84c 1419555 57155b1 1419555 05a52d4 1419555 05a52d4 1419555 57155b1 d86c84c ce7cdca 6395d23 7deade8 ce7cdca 7deade8 ce7cdca 7deade8 05a52d4 7deade8 05a52d4 ce7cdca 7deade8 ce7cdca 05a52d4 8da55e6 7deade8 8da55e6 7deade8 ce7cdca 7deade8 ce7cdca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import {
AbsoluteFill,
Series,
interpolate,
spring,
useCurrentFrame,
} from 'remotion';
import React from 'react';
import {staticFile, useVideoConfig, Img, Easing,Audio} from 'remotion';
import imageSequences from './Assets/ImageSequences.json';
import {TransitionSeries, linearTiming} from '@remotion/transitions';
import GsapAnimation from './Components/GsapAnimation';
import gsap from 'gsap';
export default function ImageStream() {
const {fps} = useVideoConfig();
return (
<AbsoluteFill
style={{
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: 'white',
position: 'absolute',
width: '100%',
height: '100%',
zIndex: 0,
objectFit: 'cover',
}}
>
<TransitionSeries>
{imageSequences.map((entry, index) => {
return (
<>
<TransitionSeries.Sequence
key={entry.start}
durationInFrames={fps * (entry.end - entry.start)}
>
<Images key={index} entry={entry} />;
</TransitionSeries.Sequence>
</>
);
})}
</TransitionSeries>
</AbsoluteFill>
);
}
const Images = ({entry}) => {
const gsapTimeline = () => {
let tlContainer = gsap.timeline();
tlContainer.fromTo(
'#gaussianBlur',
{
attr: {stdDeviation: `250,0`},
},
{
attr: {stdDeviation: `0,0`},
duration: 1/2,
},
0
);
return tlContainer;
};
return (
<>
<GsapAnimation
style={{
BackgroundColor: 'black',
}}
className="bg-black"
Timeline={gsapTimeline}
>
<Audio src={staticFile('sfx_1.mp3')} />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="filters">
<defs>
<filter id="blur">
<feGaussianBlur
id="gaussianBlur"
in="SourceGraphic"
/>
</filter>
</defs>
</svg>
<Img
id="imagex"
style={{
filter: `url(#blur)`,
objectPosition: 'center',
objectFit: 'cover',
position: 'absolute',
top: '50%', // Center vertically
left: '50%', // Center horizontally
transform: 'translate(-50%, -50%)',
width: 1080,
height: 1920,
}}
src={staticFile(entry.name)}
/>
</GsapAnimation>
</>
);
};
|