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[];
};
12345type InputFrame = {
code: string;
ranges?: InputRange[];
decorations?: InputDecoration[];
};
Each object represents one keyframe in the resulting animation.
code
: String, required. Source code for the current frameranges
: 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;
};
1234567type 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 orDate.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 tofalse
.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;
};
1234type 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;
};
12345type 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 orDate.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 tofalse
.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).