<commit_before>[![img](http://i.imgur.com/6vBJwmP.png)](http://mattdesl.github.io/timeline-tests/demo1/index.html)

# keytime

[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

Modular keyframe-based animation tools. Currently at a work-in-progress/proof-of-concept stage. 

The idea is to break down animation data into a simple format that can easily be manipulated and used in real-time playback. Some novel goals of the project:

- modular; the tools can be used independently of render engine, and may be useful to non-JavaScript devs (for e.g. Java/C++/C# game devs)
- concise and standard animation format that is application agnostic
- no assumptions about what is being animated; could be numbers, 2D paths, vectors, quaternions, etc
- custom interpolators and easing functions are easy to add (e.g. interpolating CSS properties)
- easy to pipe into other tools, like a visual editor for designers
- using CommonJS to export animation data, so you can `require('mattdesl/my-fancy-timeline')`

## demos

There are a couple examples in the [demo](demo/) folder. Here are two:

- [canvas/path animation](http://mattdesl.github.io/timeline-tests/demo1/index.html)
- [CSS animation and timeline switching](http://mattdesl.github.io/keytime/demo/dom/)

## Usage

[![NPM](https://nodei.co/npm/keytime.png)](https://nodei.co/npm/keytime/)

This module builds on [keyframes](https://github.com/mattdesl/keyframes) to interpolate between keyframe values. 

#### timeline

A timeline provides a list of named `properties` that make up this keyframed timeline. It also handles easing and interpolation. The default timeline interpolates numbers and arrays of numbers; and supports a [set of common easing equations](https://github.com/mattdesl/eases).

```js
var timeline = require('keytime')(data)

//get all values at a time stamp
var values = timeline.values(3)

//the value of 'position' property at this time stamp
console.log( values.position )
```

### properties

A property holds a set of [keyframes](https://github.com/mattdesl/keyframes), a unique `name` identifier and a default `value` (used when no keyframes are present).

### keyframes

The keyframes hold a `time` stamp (no assumptions are made about unit of time), a `value` (can be array, number, object, etc). They can optionally include an `ease`. For a pair of keyframes, the second determines the easing function; so the ease of the first keyframe in a timeline is ignored.

## Wiki

- [keytime format](https://github.com/mattdesl/keytime/wiki/Format)
- [subclassing keytime](https://github.com/mattdesl/keytime/wiki/Subclassing)

## API

#### `var timeline = require('keytime')([data])`

Creates a new timeline with the optional data in the form of a JS object. The data is assumed to follow the keytime animation format.

#### `timeline.values(timeStamp[, out])`<commit_msg>udpating readme<commit_after>[![img](http://i.imgur.com/6vBJwmP.png)](http://mattdesl.github.io/timeline-tests/demo1/index.html)

# keytime

[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

Modular keyframe-based animation tools. Currently at a work-in-progress/proof-of-concept stage. 

The idea is to break down animation data into a simple format that can easily be manipulated and used in real-time playback. Some novel goals of the project:

- modular; the tools can be used independently of render engine, and may be useful to non-JavaScript devs (for e.g. Java/C++/C# game devs)
- concise and standard animation format that is application agnostic
- no assumptions about what is being animated; could be numbers, 2D paths, vectors, quaternions, etc
- custom interpolators and easing functions are easy to add (e.g. interpolating CSS properties)
- easy to pipe into other tools, like a visual editor for designers
- using CommonJS and JSON to export animation data, so you can `require('mattdesl/my-fancy-timeline')`

## demos

There are a couple examples in the [demo](demo/) folder. Here are two:

- [canvas/path animation](http://mattdesl.github.io/timeline-tests/demo1/index.html) - animates paths created with [path-illustrator](http://mattdesl.github.io/path-illustrator/demo/advanced.html)
- [CSS animation and timeline switching](http://mattdesl.github.io/keytime/demo/dom/)

## Usage

[![NPM](https://nodei.co/npm/keytime.png)](https://nodei.co/npm/keytime/)

This module builds on [keyframes](https://github.com/mattdesl/keyframes) to interpolate between keyframe values. The core concepts are as follows:

#### `timeline`

A `keytime` instance (or timeline) provides a list of named `properties` that make up this keyframed timeline. It also handles easing and interpolation. The default timeline interpolates numbers and arrays of numbers; and supports a [set of common easing equations](https://github.com/mattdesl/eases).

```js
var timeline = require('keytime')(data)

//get all values at a time stamp
var values = timeline.values(3)

//the value of 'position' property at this time stamp
console.log( values.position )
```

#### `properties`

A property holds a set of [keyframes](https://github.com/mattdesl/keyframes), a unique `name` identifier and a default `value` (used when no keyframes are present).

#### `keyframes`

The keyframes hold a `time` stamp (no assumptions are made about unit of time), a `value` (can be array, number, object, etc). They can optionally include an `ease`. For a pair of keyframes, the second determines the easing function; so the ease of the first keyframe in a timeline is ignored.

## Wiki

- [keytime format](https://github.com/mattdesl/keytime/wiki/Format)
- [subclassing keytime](https://github.com/mattdesl/keytime/wiki/Subclassing)

## API

#### `var timeline = require('keytime')([data])`

Creates a new timeline with the optional data in the form of a JS object. The data is assumed to follow the keytime animation format.

#### `timeline.values(timeStamp[, out])`
{'fraction_non_alphanumeric': 0.11389257294429708, 'fraction_numerical': 0.0016578249336870027, 'mean_word_length': 4.6754468485418625, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3328774', 'n_tokens_mistral': 1832, 'n_tokens_neox': 1779, 'n_words': 668}