# 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:

```typescript
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:

```typescript
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](../languages/Readme.md).
- `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:

```typescript
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](./../styling/Theme.md) 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](https://github.com/CodeMovie/code-movie-runtime).
