# shifty

Source:
  - index.js, line 1

### Classes

Scene
Tweenable

### Methods

#### (static) interpolate(from, to, position, easing, delayopt) → {Object}

Compute the midpoint of two Objects. This method effectively calculates a specific frame of animation that `shifty.Tweenable#tween` does many times over the course of a full tween.

    import { interpolate } from 'shifty';

    const interpolatedValues = interpolate({
        width: '100px',
        opacity: 0,
        color: '#fff'
      }, {
        width: '200px',
        opacity: 1,
        color: '#000'
      },
      0.5
    );

    console.log(interpolatedValues); // Logs: {opacity: 0.5, width: "150px", color: "rgb(127,127,127)"}

Source:
  - interpolate.js, line 9

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`from` | `Object` |  |  | The starting values to tween from.
`to` | `Object` |  |  | The ending values to tween to.
`position` | `number` |  |  | The normalized position value (between `0.0` and `1.0`) to interpolate the values between `from` and `to` for. `from` represents `0` and `to` represents `1`.
`easing` | `Object.<(string|shifty.easingFunction)>` | `string` | `shifty.easingFunction` |  |  | The easing curve(s) to calculate the midpoint against. You can reference any easing function attached to `shifty.Tweenable.formulas`, or provide the `shifty.easingFunction`(s) directly. If omitted, this defaults to "linear".
`delay` | `number` | <optional> | 0 | Optional delay to pad the beginning of the interpolated tween with. This increases the range of `position` from (`0` through `1`) to (`0` through `1 + delay`). So, a delay of `0.5` would increase all valid values of `position` to numbers between `0` and `1.5`.

##### Returns:

Type:
  `Object`

#### (static) processTweens()

Process all tweens currently managed by Shifty for the current tick. This does not perform any timing or update scheduling; it is the logic that is run by the scheduling functionality. Specifically, it computes the state and calls all of the relevant `shifty.tweenConfig` functions supplied to each of the tweens for the current point in time (as determined by `shifty.Tweenable.now`.

This is a low-level API that won't be needed in the majority of situations. It is primarily useful as a hook for higher-level animation systems that are built on top of Shifty. If you need this function, it is likely you need to pass something like `() => {}` to `shifty.Tweenable.setScheduleFunction`, override `shifty.Tweenable.now` and manage the scheduling logic yourself.

Source:
  - tweenable.js, line 140
See:
  - https://github.com/jeremyckahn/shifty/issues/109

#### (static) setBezierFunction(name, x1, y1, x2, y2) → {shifty.easingFunction}

Create a Bezier easing function and attach it to `shifty.Tweenable.formulas`. This function gives you total control over the easing curve. Matthew Lein's Ceaser is a useful tool for visualizing the curves you can make with this function.

Source:
  - bezier.js, line 153

##### Parameters:

Name | Type | Description
--- | --- | ---
`name` | `string` | The name of the easing curve. Overwrites the old easing function on `shifty.Tweenable.formulas` if it exists.
`x1` | `number` |
`y1` | `number` |
`x2` | `number` |
`y2` | `number` |

##### Returns:

Type:
  `shifty.easingFunction`

The `shifty.easingFunction` that was attached to `shifty.Tweenable.formulas`.

#### (static) tween(configopt) → {external:Promise}

Standalone convenience method that functions identically to `shifty.Tweenable#tween`. You can use this to create tweens without needing to set up a `shifty.Tweenable` instance.

    import { tween } from 'shifty';

    tween({ from: { x: 0 }, to: { x: 10 } }).then(
      () => console.log('All done!')
    );

Source:
  - tweenable.js, line 649

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`config` | `shifty.tweenConfig` | <optional> | {} |

##### Returns:

Type:
  `external:Promise`

This `Promise` has a property called `tweenable` that is the `shifty.Tweenable` instance that is running the tween.

#### (static) unsetBezierFunction(name) → {boolean}

`delete` an easing function from `shifty.Tweenable.formulas`. Be careful with this method, as it `delete`s whatever easing formula matches `name` (which means you can delete standard Shifty easing functions).

Source:
  - bezier.js, line 180

##### Parameters:

Name | Type | Description
--- | --- | ---
`name` | `string` | The name of the easing function to delete.

##### Returns:

Type:
  `boolean`

Whether or not the functions was `delete`d.

### Type Definitions

#### afterTweenFilter(tweenable)

Is called right after a tween is processed in a tick.

Source:
  - index.js, line 105

##### Parameters:

Name | Type | Description
--- | --- | ---
`tweenable` | `shifty.Tweenable` | The `shifty.Tweenable` instance.

#### beforeTweenFilter(tweenable)

Is called right before a tween is processed in a tick.

Source:
  - index.js, line 99

##### Parameters:

Name | Type | Description
--- | --- | ---
`tweenable` | `shifty.Tweenable` | The `shifty.Tweenable` instance.

#### doesApplyFilter(tweenable) → {boolean}

Is called when a tween is created to determine if a filter is needed. Filters are only added to a tween when it is created so that they are not unnecessarily processed if they don't apply during an update tick.

Source:
  - index.js, line 82

##### Parameters:

Name | Type | Description
--- | --- | ---
`tweenable` | `shifty.Tweenable` | The `shifty.Tweenable` instance.

##### Returns:

Type:
  `boolean`

#### easingFunction(position) → {number}

Source:
  - index.js, line 20

##### Parameters:

Name | Type | Description
--- | --- | ---
`position` | `number` | The normalized (0-1) position of the tween.

##### Returns:

Type:
  `number`

The curve-adjusted value.

#### filter

An Object that contains functions that are called at key points in a tween's lifecycle. Shifty can only process `Number`s internally, but filters can expand support for any type of data. This is the mechanism that powers string interpolation.

##### Properties:

Name | Type | Description
--- | --- | ---
`doesApply` | `shifty.doesApplyFilter` | Is called when a tween is created.
`tweenCreated` | `shifty.tweenCreatedFilter` | Is called when a tween is created.
`beforeTween` | `shifty.beforeTweenFilter` | Is called right before a tween starts.
`afterTween` | `shifty.afterTweenFilter` | Is called right after a tween ends.

Source:
  - index.js, line 111

##### Type:

- `Object`

#### promisedData

##### Properties:

Name | Type | Description
--- | --- | ---
`state` | `Object` | The current state of the tween.
`data` | `Object` | The `data` Object that the tween was configured with.
`tweenable` | `shifty.Tweenable` | The `shifty.Tweenable` instance to which the tween belonged.

Source:
  - index.js, line 74

##### Type:

- `Object`

#### renderFunction(state, dataopt, timeElapsed)

Gets called for every tick of the tween. This function is not called on the final tick of the animation.

Source:
  - index.js, line 33

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`state` | `Object` |  | The current state of the tween.
`data` | `Object` | `undefined` | <optional> | User-defined data provided via a `shifty.tweenConfig`.
`timeElapsed` | `number` |  | The time elapsed since the start of the tween.

#### scheduleFunction(callback, timeout)

Source:
  - index.js, line 43

##### Parameters:

Name | Type | Description
--- | --- | ---
`callback` | `function` |
`timeout` | `number` |

#### startFunction(state, dataopt)

Source:
  - index.js, line 26

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`state` | `Object` |  | The current state of the tween.
`data` | `Object` | `undefined` | <optional> | User-defined data provided via a `shifty.tweenConfig`.

#### tweenConfig

##### Properties:

Name | Type | Attributes | Description
--- | --- | --- | ---
`from` | `Object` | <optional> | Starting position. If omitted, `shifty.Tweenable#get` is used.
`to` | `Object` | <optional> | Ending position. The keys of this Object should match those of `to`.
`duration` | `number` | <optional> | How many milliseconds to animate for.
`delay` | `number` | <optional> | How many milliseconds to wait before starting the tween.
`start` | `shifty.startFunction` | <optional> | Executes when the tween begins.
`render` | `shifty.renderFunction` | <optional> | Executes on every tick. Legacy property name: `step`.
`easing` | `Object.<(string|shifty.easingFunction)>` | `string` | `shifty.easingFunction` | <optional> | Easing curve name(s) or `shifty.easingFunction`(s) to apply to the properties of the tween. If this is an Object, the keys should correspond to `to`/`from`. You can learn more about this in the Easing Curves in Depth tutorial.
`data` | `Object` | <optional> | Data that is passed to `shifty.startFunction`, `shifty.renderFunction`, and `shifty.promisedData`. Legacy property name: `attachment`.
`promise` | `function` | <optional> | Promise constructor for when you want to use Promise library or polyfill Promises in unsupported environments.

Source:
  - index.js, line 49

##### Type:

- `Object`

#### tweenCreatedFilter(tweenable)

Is called when a tween is created. This should perform any setup needed by subsequent per-tick calls to `shifty.beforeTween` and `shifty.afterTween`.

Source:
  - index.js, line 91

##### Parameters:

Name | Type | Description
--- | --- | ---
`tweenable` | `shifty.Tweenable` | The `shifty.Tweenable` instance.