Remotion-app/src/HelloWorld/ImageStream.jsx

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>
	);
}