Animations

Input: fromStringsToScene(inputFrames, inputOptions)

Turns frames of code into a SceneData object that contains the animation information.

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: 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. Work in Progress; Ignore this for now.

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 to parse the input as. LanguageDefinition objects are obtained by calling one of the functions from one of the language modules.
• tabSize: Sets the tab size. Must be a whole number.

Return value

A SceneData object. Contains the language definition, animation information and some metadata. Best passed straight to toAnimationHTML().

Output: toAnimationHTML(sceneData, animationOptions)

Turns scene data and animation options into a giant string of HTML and CSS that renders the animation.

Parameter sceneData

The animation information generated by fromStringsToScene(). The object interface may change at any time. Use with caution.

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 required 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 0.
• 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.