Using Motion Canvas on GitHub Actions

sprout ⋄ posted over 1 year ago ⋄ last updated over 1 year ago ⋄ 3 min read

Start by creating a new node project at the root of your repo and install some dependencies:

npm init @motion-canvas@latest -- --name motion-canvas-github-actions --path ./motion-canvas-github-actions --language ts
cd animations
npm i
npm i -S @motion-canvas/player
npm run serve

Create your animation:

1
import { makeScene2D, Circle } from "@motion-canvas/2d";
2
import { createRef, all } from "@motion-canvas/core";
3

4
export default makeScene2D(function* (view) {
5
  const myCircle = createRef<Circle>();
6

7
  view.add(
8
    <Circle ref={myCircle} x={-300} width={140} height={140} fill="#e13238" />
9
  );
10

11
  yield* all(
12
    myCircle().position.x(300, 1).to(-300, 1),
13
    myCircle().fill("#e6a700", 1).to("#e13238", 1)
14
  );
15
});

Update your vite config in the animations folder:

1
import { defineConfig } from "vite";
2
import motionCanvas from "@motion-canvas/vite-plugin";
3

4
export default defineConfig({
5
  plugins: [motionCanvas()],
6
  build: {
7
    rollupOptions: {
8
      input: {
9
        main: "index.html",
10
      },
11
      output: {
12
        dir: "dist/",
13
        entryFileNames: "[name].js",
14
      },
15
    },
16
  },
17
});

Add a main script to load the player, and a script to add the base URL for the GitHub Pages subdirectory structure:

1
import '@motion-canvas/core';
2
import '@motion-canvas/player';
3

4
// Run this function so that the player can be used with relative paths, such as
5
// a github pages deployment. Since this is a separate build file, vite doesn't
6
// know how to add the base url to the player's src attribute.
7
(function prependBase() {
8
  // If there's no BASE_URL, then there's nothing to do
9
  const base = import.meta.env.BASE_URL;
10
  if (!base) {
11
    return;
12
  }
13
  document.querySelectorAll('motion-canvas-player').forEach(player => {
14
    let url = player.getAttribute('src');
15
    // URL is absolute
16
    if (url?.startsWith('/')) {
17
      // Copy everything after the '/'
18
      url = base + url.slice(1);
19
      // Create a new player
20
      const newElement = document.createElement('motion-canvas-player');
21
      // Set the same attributes
22
      newElement.setAttribute('auto', player.getAttribute('auto') ?? 'true');
23
      newElement.setAttribute('src', url);
24
      // Replace the old player
25
      player.replaceWith(newElement);
26
    }
27
  });
28
})();

Add a root-level index.html:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Document</title>
7
    <style>
8
        motion-canvas-player {
9
            width: 100%;
10
            height: 100%;
11
            display: block;
12
        }
13
    </style>
14
</head>
15
<body>
16
    <motion-canvas-player src="/project.js"></motion-canvas-player>
17
    <script type="module" src="web/player.ts"></script>
18
</body>
19
</html>

Build the site:

npm run build

Note that you cannot open the generated html file and have it work; you will have to serve it:

npx light-server -s dist -p 8000

You should see the animation working at http://localhost:8000. Now to build it in GitHub actions, add a workflow file:

1
name: Deploy
2

3
on:
4
  push:
5
    branches:
6
      - main
7

8
permissions:
9
  contents: read
10
  pages: write
11
  id-token: write
12

13
# Allow one concurrent deployment
14
concurrency:
15
  group: "pages"
16
  cancel-in-progress: true
17

18
jobs:
19
  build:
20
    name: Deploy
21
    runs-on: ubuntu-latest
22

23
    steps:
24
      - name: Checkout repo
25
        uses: actions/checkout@v3
26

27
      - name: Setup Node
28
        uses: actions/setup-node@v3
29

30
      - name: Install dependencies
31
        run: npm ci
32

33
      - name: Install animation dependencies
34
        run: npm ci
35
        working-directory: animations
36

37
      - name: Build project
38
        run: npm run build -- --base=/${{ github.event.repository.name }}/
39

40
      - name: Setup Pages
41
        uses: actions/configure-pages@v3
42

43
      - name: Upload artifact
44
        uses: actions/upload-pages-artifact@v1
45
        with:
46
          path: "./dist"
47

48
      - name: Deploy to GitHub Pages
49
        id: deployment
50
        uses: actions/deploy-pages@v1

And be sure to configure GitHub pages to deploy from GitHub Actions.