Introduction to Remotion — Create Videos and Animations with React
By: Chameera Dulanga
Tags: Videos, Web Development, React, Remotion, Animation

Basics of Remotion

Since you have initiated your Remotion project, You can start creating your video. But I think it would be better if you have some understanding of Remotion basics before that.

Video Properties

Width , height , durationInFrames , and fps are the video properties provided by Remotion.

You can use those properties within components to configure the component’s size in terms of pixels, how many frames that component should play, and the number of frames per second.

import { useVideoConfig } from “remotion”; export const ExampleVideo = () => {

const { fps, durationInFrames, width, height } = useVideoConfig(); return (

<div style={{ flex: 1, justifyContent: “center”, alignItems: “center” }}>

This video is {durationInFrames / fps} seconds long.

</div>

);

};

It is advised to derive those properties using useVideoConfig like the above example to make your components reusable.

Compositions

Compositions are also a type of component in Remotion where you can use the above properties as metadata.

import {Composition} from 'remotion';

import {HelloReaders} from './HelloReaders'; export const RemotionVideo: React.FC = () => {

return (

<>

<Composition

id=”HelloReaders”

component={HelloReaders}

durationInFrames={150}

fps={30}

width={1024}

height={720}

defaultProps={{

titleText: ‘Welcome to My Blog’,

titleColor: ‘black’,

}}

/>

<Composition

...

/>

<Composition

...

/>

</>

);

}

If you observe the Video.tsx file in your project, you will see 3 Composition components with metadata passed into each of them, including video properties.

Also, those Compositions are shown in the top left corner of the Remotion Player as well.

Compositions List

Animation Properties

Animations are the most important thing when it comes to videos, and Remotion gives you the freedom of configuring some amazing animations.

For example, If you need a simple face in effect, you can adjust the frame’s opacity frame by frame.

const frame = useCurrentFrame();

const opacity = frame >= 20 ? 1 : (frame / 20);

return (

<div style={{

opacity: opacity

}}>

Hello Readers!

</div>

)

In addition to that, Remotion has 2 inbuild functions named interpolate and spring, which you can use to build more advanced animations.

Interpolate function accepts 4 input parameters, including input value (mostly the frame), range values that the input can assume, The range of values you want to map the input to, and an optional parameter.

Spring animations allow you to be more creative with your presentation by making animation more natural. For example, the below spring animation configuration will add a small scaling effect to your text.

const {fps} = useVideoConfig();

const scale = spring({

fps,

from: 0,

to: 1,

frame

}); return (

<span

style={{

color: titleColor,

marginLeft: 10,

marginRight: 10,

transform: `scale(${scale})`,

display: ‘inline-block’,

}}

>

Welcome to My Blog

</span>

)

Spring animation

Sequence Component

Sequence components in Remotion fulfill 2 major tasks. Mainly it is used to assign different time frames to elements in videos. While maintaining the connection between elements, it also allows you to reuse the same component repeatedly.

The sequence component is a higher-order component, and it has the ability to hold child components. In addition to that, it accepts 3 props, including 2 required props and 1 optional prop.

name: This is an optional prop, and the name you specify will appear in the Remotion player timeline. You will be able to understand how each component is linked if you use a proper naming pattern.

Timeline View of Remotion Player

from: This defines the frame, which component should appear in the video.

durationInFrames: Length of the sequence component in terms of frames.

For example, the below Sequence component will appear in the video after 20 frames, and it will last till the end since durationOnFrames is Infinity.

<Sequence from={20} durationInFrames={Infinity}>

<Title titleText={titleText} titleColor={titleColor} /></Sequence>

Since you now have a basic understanding of several essential properties and components in Remotion, we can start creating the first video using Remotion.