Media

In this chapter we will take a look at all the different types of media Motion Canvas lets you add to your animations.

Audio

One type of media Motion Canvas supports is audio. To add an audio track to your animation you need to edit your project.ts file. First we need to import the audio file we want to use as follows:

// my-animation/
// ├─ audio/
// │  └─ voice.mp3
// ├─ src/
// ...
import audio from '../audio/voice.mp3';

Once imported we need to let Motion Canvas know that we want to use this audio file. We can do this by specifying the audio property in the project configuration:

export default makeProject({
  // ...
  audio: audio,
});

If we open the editor now, we should see that your audio track has been added.

However, it's not always ideal to start with the audio at the beginning. Sometimes it's better to start with a bit of delay. After configuring the audio, you can edit the offset in the Video Settings tab. You can also hold SHIFT and drag the audio track left and right directly on the timeline.

Supported Formats

A list of supported file formats can be found here

Images

Another type of media Motion Canvas supports are images. To use an image in the animation, we need to import the image:

// my-animation/
// ├─ images/
// │  └─ example.png
// ├─ src/
// ...
import examplePng from '../../images/example.png';

Then we can use Motion Canvas Img component to display the image:

import {makeScene2D, Img} from '@motion-canvas/2d';

import examplePng from '../../images/example.png';

export default makeScene2D(function* (view) {
  view.add(<Img src={examplePng} />);
});

Images can also be animated like every other component in Motion Canvas. For this, we need to create a Reference and pass that to the Img:

// ...
import {all, createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const imageRef = createRef<Img>();

  view.add(<Img ref={imageRef} src={examplePng} scale={2} />);

  yield* all(
    imageRef().scale(2.5, 1.5).to(2, 1.5),
    imageRef().absoluteRotation(90, 1.5).to(0, 1.5),
  );
});

View source code

Supported Formats

A list of supported file formats can be found here

Video

Videos in Motion Canvas work similar to images. First, we need to import our video we want to display:

// my-animation/
// ├─ videos/
// │  └─ example.mp4
// ├─ src/
// ...
import exampleMp4 from '../../videos/example.mp4';

Then we can use Motion Canvas Video component to display the video as follows:

import {makeScene2D, Video} from '@motion-canvas/2d';

import exampleMp4 from '../../videos/example.mp4';

export default makeScene2D(function* (view) {
  view.add(<Video src={exampleMp4} />);
});

However this will only display the video and will not play it. In order to play the video we need to create a Reference to the element.

// ...
import {createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const videoRef = createRef<Video>();

  view.add(<Video ref={videoRef} src={exampleMp4} />);
});

Now that we have a Reference to the Video element, we can use it to animate the video, as well as play and pause it.

export default makeScene2D(function* (view) {
  // ...

  videoRef().play();
  yield* videoRef().scale(1.25, 1.5).to(1, 1.5);
});

Supported Formats

A list of supported file formats can be found here