Animations

Function animateHTML(inputFrames, options)

Turns keyframe objects into a giant string of HTML and CSS that renders the animation.

Parameter inputFrames

An array of objects conforming to the following TypeScript type:

type InputFrame = {
  code: string;
  ranges?: InputRange[];
  decorations?: InputDecoration[];
};

type InputFrame = {
  code: string;
  ranges?: InputRange[];
  decorations?: InputDecoration[];
};

Each object represents one keyframe in the resulting animation.

• code: String, required. Source code for the current frame
• ranges: Array, optional. Defaults to an empty array. Work in Progress; Ignore this for now.
• decorations: Array, optional. Defaults to an empty array. Contains decorations.

Parameter options

An object conforming to the following TypeScript type:

type InputOptions = {
  language: LanguageDefinition;
  tabSize: number;
  rootClassSeed?: number;
  debugOverride?: boolean;
  theme?: Theme;
};

type InputOptions = {
  language: LanguageDefinition;
  tabSize: number;
  rootClassSeed?: number;
  debugOverride?: boolean;
  theme?: Theme;
};

• language: Describes the programming language to parse the input as. LanguageDefinition objects are obtained by calling one of the functions from one of the language modules. Required.
• tabSize: Sets the number of spaces that tab characters should be converted to. Required, must be a whole number.
• rootClassSeed: Input used to generate a unique ID for the animation, which is used to namespace the CSS so that multiple animations can co-exist on one web page. Set this to something reasonably unique-ish, like an automatically incrementing ID or Date.now(). Must be a whole number. Optional, defaults to an automatically-incrementing number starting from a random value.
• debugOverride: When true, turns off class name minification/obfuscation and spams the console with debug information. Optional, defaults to false.
• theme: Theme object to use. Optional, defaults to the default theme.

Return value

A string of HTML containing the animation, expressed as a <div> and a <style> element.

You can jump between keyframes by switching between the classes frame0, frame1, frameN etc. on the element with the class cm-animation or use the Code.Movie runtime element to get a more high-level API and UI.

Function fromStringsToScene(inputFrames, inputOptions)

Turns keyframe objects into a SceneData object that contains the animation information. Only useful if you need to read or modify the resulting SceneData object before turning it into HTML and CSS.

Parameter inputFrames

Same as the fist parameter to animateHTML(inputFrames, options).

Parameter inputOptions

An object conforming to the following TypeScript type:

type InputOptions = {
  language: LanguageDefinition;
  tabSize: number;
};

type InputOptions = {
  language: LanguageDefinition;
  tabSize: number;
};

• language: Describes the programming language to parse the input as. LanguageDefinition objects are obtained by calling one of the functions from one of the language modules. Required.
• tabSize: Sets the number of spaces that tab characters should be converted to. Required, must be a whole number.

Return value

A SceneData object. Contains the language definition, animation information and some metadata. Usually passed straight to toAnimationHTML(). The exact object interface may change at any time. Use with caution.

Function toAnimationHTML(sceneData, animationOptions)

Turns scene data and animation options into a giant string of HTML and CSS that renders the animation. Only useful when you use fromStringsToScene() instead of the more convenient animateHTML().

Parameter sceneData

The animation information object generated by fromStringsToScene().

Parameter animationOptions

An object conforming to the following TypeScript type:

type AnimationOptions = {
  rootClassSeed?: number;
  debugOverride?: boolean;
  theme?: Theme;
};

type AnimationOptions = {
  rootClassSeed?: number;
  debugOverride?: boolean;
  theme?: Theme;
};

• rootClassSeed: Input used to generate a unique ID for the animation, which is used to namespace the CSS so that multiple animations can co-exist on one web page. Set this to something reasonably unique-ish, like an automatically incrementing ID or Date.now(). Must be a whole number. Optional, defaults to an automatically-incrementing number starting from a random value.
• debugOverride: When true turns off class name minification/obfuscation and spams the console with debug information. Optional, defaults to false.
• theme: Theme object to use. Optional, defaults to the default theme.

Return value

Same as animateHTML(inputFrames, options) (a huge string of HTML and CSS containing the finished animation).