# keyframe-animator > Created programmatically with a list of actions, timings, and easings Latest version **1.0.2** (published 2015-11-21) · MIT license · 0 weekly downloads ## Install ```sh npm install keyframe-animator pnpm add keyframe-animator yarn add keyframe-animator bun add keyframe-animator ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2015-11-21 | | First published | 2015-11-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 12 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Greg Tatum | | Maintainers | tatumcreative | | Keywords | keyframe, animation, animator, tween, easing, programming-poem, visualization, game, art | ## Links - npm: https://www.npmjs.com/package/keyframe-animator - Repository: https://github.com/TatumCreative/npm-keyframe-animator - Issues: https://github.com/TatumCreative/npm-keyframe-animator/issues - npm.io page: https://npm.io/package/keyframe-animator ## Dependencies (12) - [lerp](https://npm.io/package/lerp.md) ^1.0.3 - [eases](https://npm.io/package/eases.md) ^1.0.6 - [lodash.map](https://npm.io/package/lodash.map.md) ^3.1.4 - [lodash.find](https://npm.io/package/lodash.find.md) ^3.2.1 - [lodash.last](https://npm.io/package/lodash.last.md) ^3.0.0 - [lodash.assign](https://npm.io/package/lodash.assign.md) ^3.2.0 - [lodash.reduce](https://npm.io/package/lodash.reduce.md) ^3.1.2 - [lodash.isarray](https://npm.io/package/lodash.isarray.md) ^3.0.4 - [lodash.isnumber](https://npm.io/package/lodash.isnumber.md) ^3.0.1 - [lodash.isobject](https://npm.io/package/lodash.isobject.md) ^3.0.2 - [lodash.isstring](https://npm.io/package/lodash.isstring.md) ^3.0.1 - [lodash.isfunction](https://npm.io/package/lodash.isfunction.md) ^3.0.6 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 1.0.2 (latest) — 2015-11-21 - 1.0.1 — 2015-11-13 - 1.0.0 — 2015-11-12 ## README # Keyframe Animator [![build status][travis-image]][travis-url] [![stability][stability-image]][stability-url] [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [stability-image]: https://img.shields.io/badge/stability-stable-brightgreen.svg?style=flat-square [stability-url]: https://nodejs.org/api/documentation.html#documentation_stability_index [npm-image]: https://img.shields.io/npm/v/keyframe-animator.svg?style=flat-square [npm-url]: https://npmjs.org/package/keyframe-animator [travis-image]: https://img.shields.io/travis/TatumCreative/npm-keyframe-animator/master.svg?style=flat-square [travis-url]: http://travis-ci.org/TatumCreative/npm-keyframe-animator [downloads-image]: http://img.shields.io/npm/dm/keyframe-animator.svg?style=flat-square [downloads-url]: https://npmjs.org/package/keyframe-animator Create keyframe animations programmatically with a list of actions, timings, and easings. # Live Example ![Keyframe Animator Example](https://tatumcreative.github.io/npm-keyframe-animator/screenshot.jpg) [Pentagons keyframe animated](https://tatumcreative.github.io/npm-keyframe-animator) ## Creating the Animator var animator = require('keyframe-animator') var update = animator( sceneGraph, keyframes, runOnce ) update( elapsedMilliseconds ) ### `sceneGraph` The scene graph can be any type of object that represents your scene. The individual properties on this graph are accessed in the scene graph using "key.path[0]" syntax. ### `keyframes` Keyframes are a list of keyframe objects as defined below. ### `runOnce` (optional) Set to true if the animation should only run through once. ## Keyframe Object { duration: , easing: , actions: [ [ "path.in.object", [, ] ], [ "path.in.object", ], [ "path.in.object" ], ], // Relative frames subframes: [ keyframe, keyframe, ... ], //Debug parameters: isolate: , startHere: , }, ### `duration` The length in seconds of the keyframe. ### `easing` (optional) Either the easing function name or a custom function. See the available functions in the [eases package](https://npmjs.com/packages/eases). ### `isolate` (optional) A flag on whether or to only play this keyframe. Useful for debugging and live-reloading. ### `startHere` (optional) Ignores all of the keyframes before this one. Useful for debugging and live-reloading. ### `actions` An array of actions to perform. Each action is composed of a keypath into the main scene graph object, and the values of the action. The keypath can include dot separated values like `"key.path.position.x"` and array values like `"key.path.position[0]"`. The value at the keypath can either be a value or a function. If it's a value then the actions will be applied like `scene.key.path = value`. If the keypath points to a function then it will invoked with the value like `scene.key.path(value)`. #### `[ 'key.path', [valueStart, valueEnd] ]` If the action value is an array, then the start and end values will be run through an easing function based on the elapsed time. So for instance if the action was equal to `['key.path', [0, 10]]`, then the `scene.key.path` would be eased between 0 and 10 based on the elapsed time. #### `[ 'key.path', value ]` If the action is a single value or undefined, then for the first frame that the keyframe is in range, the property will be set to that value, or the function will be invoked with that value. ## Example usage var animator = require('animator') var drawScene = require('./draw-scene') var scene = { square : new Square() } var keyframes = [ { duration : 2, easing : "elastic-in", actions : { [ "square.position.x", [ 0, 100 ] ], [ "square.position.y", [ 0, 100 ] ], [ "square.opacity", [ 0, 1 ] ], }, }, { duration : 2, easing : "elastic-out", actions : { [ "square.color[0]", [ 0, 1 ] ], [ "square.color[1]", [ 1, 0 ] ], [ "square.addStroke" ], [ "square.setTextContents", "I'm trapped in a box!" ], }, } ] var update = animator( sceneGraph, keyframes, runOnce ) var start = Date.now() function loop() { update( Date.now() - start ) requestAnimationFrame(loop) } loop() --- _Source: https://npm.io/package/keyframe-animator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._