additive

NOTE: This is a WIP (work in progress). Please refer to the github repo

additive

Additive animations the MVVM way

Install

$ npm install additive --save

Usage

First you require the bits and bobs:

var additive = require('additive');

Then you make a viewmodel, specifying the initial model value:

var value = additive.make({
  model: 0,
});

Then you can trigger a transition with:

// @NOTE: this function mutates the viewmodel
additive.animate(value, { to: 100 });

And get the current state with:

var state = additive.render(value);

Interpolation

Every viewmodel does contain an interpolation schema alongside the model. Note that interpolation schema is different from easing function, as interpolation schema is a property of the model, while easing function is a property of transition between two model values.

By default the model is considered to be a single linear number. additive provides several built-in interpolation schemas and means to compose compound schemas.

Built-in schemas:

• Linear (linear space)
• Spinor (surface of the circle, for 2D rotations)
• [@TODO] Quaternions (surface of the sphere, for 3D rotations)
• [@TODO] Color (color spaces)

Schema composition:

• Object of schemas: { length: linear.schema, angle: spinor.schema }
• Array of schemas: [ linear.schema, spinor.schema ]
• Bag: composite.bag(linear.schema)
• List: composite.list(linear.schema)

Easing

When applying a transition you can also specify an easing function to be used for this transition.

Default easing is a fast approximation of the default CSS easing. additive does not provide any built-in easing functions except for the default one. You can write your own easing functions or use existing modules.

Examples

You can find examples in the examples folder.

Running tests

$ npm run lint
$ npm run test

API

@TODO

License

ISC