File size: 2,618 Bytes
57155b1 d86c84c 6afbe7b d86c84c 520b716 7deade8 4f51c77 7deade8 d86c84c 2d9a860 14a8e84 4f51c77 d86c84c 1419555 57155b1 1419555 05a52d4 1419555 05a52d4 1419555 57155b1 d86c84c ce7cdca 6395d23 4f51c77 7deade8 f9ca4cd 7deade8 fb03e05 f9ca4cd fb03e05 7deade8 ce7cdca 7deade8 4f51c77 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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
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';
import {MotionPathPlugin} from 'gsap-trial/all';
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 plugins = [MotionPathPlugin];
const gsapTimeline = () => {
let tlContainer = gsap.timeline();
tlContainer.fromTo(
'#gaussianBlur',
{
attr: {stdDeviation: `250,0`},
},
{
attr: {stdDeviation: `0,0`},
scale: 1.5,
duration: 1/2,
},
0
);
tlContainer.to("#imagex", {
duration: 2, // Total duration for one loop
ease: "power1.inOut",
motionPath: {
path: "M0,0 C50,0 100,50 100,100 C100,150 50,200 0,200 C-50,200 -100,150 -100,100 C-100,50 -50,0 0,0",
align: "#imagex",
alignOrigin: [0.5, 0.5],
autoRotate: false
}
});
return tlContainer;
};
return (
<>
<GsapAnimation
plugins={plugins}
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>
</>
);
};
|