Tutorial

In this tutorial, we are going to create the following mighty morphing JSON animation:

This is a somewhat modest example, but the process is essentially the same for other programming languages and larger, more complex animations.

Get the library

The library is written in TypeScript, but can also be used with plain JavaScript. It works in browsers as well as in server-side environments. You can use your preferred package manager to install the library...

$ npm install @codemovie/code-movie # adjust for use with yarn etc.

$ npm install @codemovie/code-movie # adjust for use with yarn etc.

... but for particularly easy use in web browsers, you can also load the library from a CDN: https://cdn.jsdelivr.net/npm/@codemovie/code-movie

Load the modules

Creating an animation involves three steps:

Loading the language module for our programming language
Turning frames code into animation information (a scene data object)
Turning the animation information into something that actually moves, which takes the form of a giant string of HTML

To take care of steps 1 and 2, there's two functions to load from the main module: fromStringsToScene and toAnimationHTML. Assuming we are using a web browser, we import both functions from @code-movie/code-movie in a module:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Tutorial</title>
    <script type="module">




    </script>
  </head>
  <body></body>
</html>







      import {
        fromStringsToScene,
        toAnimationHTML,
      } from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";

1234567891011121314

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Tutorial</title>
    <script type="module">
      import {
        fromStringsToScene,
        toAnimationHTML,
      } from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
    </script>
  </head>
  <body></body>
</html>

Load and configure the language

Support for programming languages must be imported explicitly, which for JSON means importing @codemovie/code-movie/languages/json. Every language module exports a function as its sole default export. Calling the function returns an object that represents the language and that we can use in the next step:

import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";
const language = json();
// "language" now contains everything needed for JSON support

123

import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";
const language = json();
// "language" now contains everything needed for JSON support

Having to import every language manually is a tad annoying, but help to keep download times in check. The function call also allows some languages to be configured in detail (like activating or deactivating support for JSX or type annotations in JavaScript).

Create the scene

To create a scene, we first need a list of keyframe objects that our code animation steps through. This list is an array of objects like this:

let keyframes = [
  { code: `[]` },
  { code: `["World"]` },
  { code: `["Hello", "World"]` },
  { code: `[\n  "Hello",\n  "World"\n]` },
];

123456

let keyframes = [
  { code: `[]` },
  { code: `["World"]` },
  { code: `["Hello", "World"]` },
  { code: `[\n  "Hello",\n  "World"\n]` },
];

This array then gets passed into the fromStringsToScene function alongside our choice of tab size and the language we previously imported:

import {
  fromStringsToScene,
  toAnimationHTML,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";

const language = json();

let keyframes = [
  /* keyframes go here */
];

let sceneData = fromStringsToScene(keyframes, {
  tabSize: 2,
  language,
});

12345678910111213141516

import {
  fromStringsToScene,
  toAnimationHTML,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";

const language = json();

let keyframes = [
  /* keyframes go here */
];

let sceneData = fromStringsToScene(keyframes, {
  tabSize: 2,
  language,
});

fromStringsToScene parses the code, computes the animation and finally returns a scene data object that contains all the animation information.

Rendering the animation

A scene data object contains nothing but data, which is not much to look at. Luckily we can quickly turn the scene into an HTML animation by passing it into toAnimationHTML:

import {
  fromStringsToScene,
  toAnimationHTML,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";

const language = json();

let keyframes = [
  /* keyframes go here */
];

let sceneData = fromStringsToScene(keyframes, {
  tabSize: 2,
  language,
});

let html = toAnimationHTML(sceneData);
// this can take more options, all of which we ignore for now

12345678910111213141516171819

import {
  fromStringsToScene,
  toAnimationHTML,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";

const language = json();

let keyframes = [
  /* keyframes go here */
];

let sceneData = fromStringsToScene(keyframes, {
  tabSize: 2,
  language,
});

let html = toAnimationHTML(sceneData);
// this can take more options, all of which we ignore for now

The resulting HTML string is huge and contains everything a browser needs to display the animation. The animation is advanced by switching between the classes frame0, frame1, frameN etc. on the element with the class cm-animation contained in the HTML, which by itself is not very user-friendly. We can add the custom element <code-movie-runtime> to our code to get a minimal user interface with equally minimal effort. Wrap the HTML returned by toAnimationHTML in <code-movie-runtime> tags, dump it into the page and we are done!

import {
  fromStringsToScene,
  toAnimationHTML,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";

const language = json();

let keyframes = [
  /* keyframes go here */
];

let sceneData = fromStringsToScene(keyframes, {
  tabSize: 2,
  language,
});

let html = toAnimationHTML(sceneData);

// Load the custom element
import "https://cdn.jsdelivr.net/npm/@codemovie/code-movie-runtime";

// Wrap the generated HTML and use it in the page!
document.body.innerHTML = `<code-movie-runtime controls keyframes="0 1 2 3">
  ${html}
</code-movie-runtime>`;

1234567891011121314151617181920212223242526

import {
  fromStringsToScene,
  toAnimationHTML,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";

const language = json();

let keyframes = [
  /* keyframes go here */
];

let sceneData = fromStringsToScene(keyframes, {
  tabSize: 2,
  language,
});

let html = toAnimationHTML(sceneData);

// Load the custom element
import "https://cdn.jsdelivr.net/npm/@codemovie/code-movie-runtime";

// Wrap the generated HTML and use it in the page!
document.body.innerHTML = `<code-movie-runtime controls keyframes="0 1 2 3">
  ${html}
</code-movie-runtime>`;

Next steps

You can check out the styling options or read up on API details next.