API Calls

Overview

In this tutorial, we will use Motion Canvas to learn the fundamentals of making REST API calls to fetch JSON data. This tutorial focuses on understanding how to retrieve and process data from a RESTful API, setting the groundwork for creating dynamic and data-driven animations later on. We’ll start by making a simple API call, parsing the JSON response, and displaying the retrieved data in a structured format. Mastering this essential step will prepare you to incorporate real-time data into your animations in future projects. Let’s get started!

Tutorial Video

Prerequisites

• Node.js installed
  • Version v20.17.0 was used during this tutorial
  • A guide on Node.js is coming in the future
• Your favorite IDE
  • VS Code was used in this tutorial
• Knowledge on REST APIs
  • REST stands for Representational State Transfer
  • A good guide (before one is present at Tomko Tech) can be found here

Useful Links

• Motion Canvas

Tutorial

1. Create a new Motion Canvas Project using the following command and inputs when prompted

   1. npm init @motion-canvas@latest
      1. Project name: api
      2. Project path: api
      3. Languages: TypeScript (Recommended)
      4. How would you like to render your animation? Image Sequence & Video (FFmpeg)

2. Now let's move into the new directory, install the dependencies, and start the web viewer

   1. cd api
   2. npm install
   3. npm start
      1. In the video, the command code . is a shortcut from VS Code.

3. Rename the project

   1. In ./src/project.ts rename example to be api

      import {makeProject} from '@motion-canvas/core';
      
      import api from './scenes/api?scene';
      
      export default makeProject({
        scenes: [api],
      });
   2. Rename the file ./src/scenes/example.tsx to ./src/scenes/api.tsx

4. Change the background

   1. In the UI Viewer, under Video Settings, change the background to be white (drag the color selector to the top left conner) and the alpha layer to 1
   2. The UI Viewer should show rgb(255,255,255)
   

5. Install axios

   1. Axios is a very common module use to make HTTP(s) requests that we will be using in this tutorial.
      1. To install Axios, you can stop the running process for the UI by hitting Ctrl+C in the terminal and then type npm i axios or npm install axios.
   2. Fetch is a built-in module as of Node 18 that we will also take a look at.
   Note

   In the future, if you want to use Fetch instead of Axios you do not have to install Axios.

Note

The rest of this tutorial will happen in our ./src/scenes/api.tsx file.

6. Create a Code Block

   1. Update the 1st line to be import {Code, makeScene2D} from '@motion-canvas/2d'; as this will remove the default settings and let us use the Code Block in our animation.

   2. Remove the 2nd line for @motion-canvas/core as we will not need to make a reference at this time.

   3. Update the body of makeScene2D to just contain a template for our code.

      view.add(<Code 
          fontSize={15} 
          code={"Hello World"}
          fill={"black"}
        />);
      1. This will let us make sure everything is working first.
      Note

      It is a good practice to test your code often and in small steps while writing.

7. Creating an API Call

   Note

   The video goes into the process of figuring the below logic out including some troubleshooting. These steps are not replicated here to help avoid confusion.

   1. Axios
      1. In the line the our imports from @motion-canvas/2d please add the following to import Axios import axios from 'axios';.
      2. Above the code in Step 6 part 3 please add the following logic inside of makeScene2D:

      const response = yield axios.get('https://jsonplaceholder.typicode.com/posts')
      const data = response.data;
   2. Fetch
      1. Above the code in Step 6 part 3 please add the following logic inside of makeScene2D:

      const response = yield fetch('https://jsonplaceholder.typicode.com/posts');
      const data = yield response.json();

8. Update the Code Block

   1. Update the code section of the Code Block to be JSON.stringify(data[0], null, 2) instead of "Hello World".

9. End Results

   1. Axios

   import {Code, makeScene2D} from '@motion-canvas/2d';
   import axios from 'axios';
   
   export default makeScene2D(function* (view) {
     const response = yield axios.get('https://jsonplaceholder.typicode.com/posts')
     const data = response.data;
   
     view.add(<Code 
       fontSize={15} 
       code={JSON.stringify(data[0], null, 2)}
       fill={"black"}
     />);
   });
   2. Fetch

   import {Code, makeScene2D} from '@motion-canvas/2d';
   
   export default makeScene2D(function* (view) {
     const response = yield fetch('https://jsonplaceholder.typicode.com/posts');
     const data = yield response.json();
   
     view.add(<Code 
       fontSize={15} 
       code={JSON.stringify(data[0], null, 2)}
       fill={"black"}
     />);
   });

Congratulations!!

You have now created a working Rest API call with Motion Canvas. In the next project, we will expand upon these concepts.