File size: 1,536 Bytes
adc8df4 d86c84c 7380380 520b716 d86c84c 520b716 a78d9ef d86c84c 67065f9 14a8e84 d86c84c 297f51d d86c84c 6167061 297f51d 6167061 d86c84c 448aa60 adc8df4 52fe1f9 448aa60 7380380 67065f9 7380380 14a8e84 d86c84c 308f422 87ec163 308f422 14a8e84 308f422 d86c84c |
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 |
import {Series, interpolate, spring, useCurrentFrame} from 'remotion';
import React from 'react';
import {staticFile, useVideoConfig, Img, Easing} from 'remotion';
import {slide} from '@remotion/transitions/slide';
import imageSequences from './Assets/ImageSequences.json';
import {TransitionSeries, linearTiming} from '@remotion/transitions';
export default function ImageStream() {
const {fps, durationInFrames} = useVideoConfig();
const frame = useCurrentFrame();
return (
<TransitionSeries
style={{
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: 'white',
position: 'absolute',
width: '100%',
height: '100%',
zIndex: 0,
objectFit: 'cover',
}}
>
{imageSequences.map((entry, index) => {
const durationInFrames = (entry.end - entry.start) * fps;
const zoom = interpolate(
frame,
[
fps * entry.start,
fps * entry.start + 2 * (durationInFrames / 4),
fps * entry.end,
],
[1, 1.2, 1],
{
easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
// extrapolateLeft: 'clamp',
// extrapolateRight: 'clamp',
}
);
return (
<TransitionSeries.Sequence
key={index}
from={fps * entry.start}
durationInFrames={fps * (entry.end - entry.start)}
>
<Img
style={{
transform: `scale(${zoom})`,
transition: 'all 1s ease',
}}
src={staticFile(entry.name)}
/>
</TransitionSeries.Sequence>
);
})}
</TransitionSeries>
);
}
|