Package Exports

tweening

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tweening) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tweening

A little tweening library.

I thought it would be fun to create a tweening library based around a Javascript generator.

You're going to have to bring your own generator polyfill to the party if you wish to support all browsers.

Installation

npm install tweening

Usage

import tween from 'tweening';

tween({
  duration: 100,
  from: 1,
  to: 1000,
  next: value => console.log( value );
  complete: () => console.log( 'all done' );
});

Tweening can also handle arrays and objects. Even if they're nested. The only requirement is that from and to both need to be of the same structure.

import tween from 'tweening';

tween({
  from: { x: 10, y: 100, z: [ 1, 2, 3 ]},
  to: { x: 500, y: 50, z: [ 9, 8, 7 ]},
  next: value => console.log( value );
});

Options

duration

The duration of the tween in milliseconds.

default: 200
type: number

from

Where you're tweening from.

required
types:
- number
- array (of numbers)
- object (of number values)
- any nested combination of the above

to

Where you're tweening to.

required
types:
- number
- array (of numbers)
- object (of number values)
- any nested combination of the above

A callback that fires at each step of the tween.

The callback is passed the updated value.

Typically this is where you'd update the state / position of an element on your page.

type: function

complete

A callback that fires once the tween has completed.

type: function

easing

A function that calculates a position given time.

default: easeInOutQuad
types:
- string
- function

Easing functions

Tweening comes with a number of Robert Penner's easing functions baked in, thanks to the tween functions library. You can pass in any of the following strings to the easing option.

linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

The easing option also allows you to pass in an easing function of your own. It should return the current position given:

t: milliseconds since tween started
b: start position
e: desired end position
d: duration of tween in milliseconds

f( t, b, e, d )