shifty

shifty

Source:

Classes

Scene
Tweenable

Methods

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

Compute the midpoint of two Objects. This method effectively calculates a specific frame of animation that 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:
Parameters:
Name Type Attributes Default Description
from T

The starting values to tween from.
to T

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 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:
T

(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 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 Tweenable.setScheduleFunction, override Tweenable.now and manage the scheduling logic yourself.

Source:
See:

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

Create a Bezier easing function and attach it to 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:
Parameters:
Name Type Description
name string

The name of the easing curve. Overwrites the old easing function on Tweenable.formulas if it exists.
x1 number
y1 number
x2 number
y2 number
Returns:
Type:
shifty.easingFunction

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

(static) shouldScheduleUpdate(doScheduleUpdate)

Determines whether or not a heartbeat tick should be scheduled. This is generally only useful for testing environments where Shifty's continuous heartbeat mechanism causes test runner issues.

If you are using Jest, you'll want to put this in a global afterAll hook. If you don't already have a Jest setup file, follow the setup in this StackOverflow post, and then add this to it:

import { shouldScheduleUpdate } from 'shifty'

afterAll(() => {
  shouldScheduleUpdate(false)
})
Source:
See:
Parameters:
Name Type Description
doScheduleUpdate boolean

(static) tween(configopt) → {Tweenable}

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

import { tween } from 'shifty';

tween({ from: { x: 0 }, to: { x: 10 } }).then(
  () => console.log('All done!')
);
Source:
Parameters:
Name Type Attributes Default Description
config shifty.tweenConfig <optional>
 {}
Returns:
Type:
Tweenable

A new Tweenable instance.

(static) unsetBezierFunction(name) → {boolean}

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

Source:
Parameters:
Name Type Description
name string

The name of the easing function to delete.
Returns:
Type:
boolean

Whether or not the functions was deleted.

Type Definitions

afterTweenFilter(tweenable) → {void}

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

Source:
Parameters:
Name Type Description
tweenable Tweenable

The Tweenable instance.
Returns:
Type:
void

beforeTweenFilter(tweenable) → {void}

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

Source:
Parameters:
Name Type Description
tweenable Tweenable

The Tweenable instance.
Returns:
Type:
void

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:
Parameters:
Name Type Description
tweenable Tweenable

The Tweenable instance.
Returns:
Type:
boolean

easingFunction(position) → {number}

Source:
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 Numbers 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:
Type:
  • Object

finishFunction(promisedData) → {void}

Source:
Parameters:
Name Type Description
promisedData shifty.promisedData
Returns:
Type:
void

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 Tweenable

The Tweenable instance to which the tween belonged.
Source:
Type:
  • Object

renderFunction(state, data, timeElapsed) → {void}

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

Source:
Parameters:
Name Type Description
state Object

The current state of the tween.
data Object | undefined

User-defined data provided via a shifty.tweenConfig.
timeElapsed number

The time elapsed since the start of the tween.
Returns:
Type:
void

scheduleFunction(callback, timeout) → {void}

Source:
Parameters:
Name Type Description
callback function
timeout number
Returns:
Type:
void

startFunction(state, dataopt) → {void}

Source:
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.
Returns:
Type:
void

tweenConfig

Properties:
Name Type Attributes Description
from Object <optional>

Starting position. If omitted, 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.
finish shifty.finishFunction <optional>

Executes when the tween completes. This will get overridden by Tweenable#then if that is called, and it will not fire if Tweenable#cancel is called.
render shifty.renderFunction <optional>

Executes on every tick. Shifty assumes a retained mode rendering environment, which in practice means that render only gets called when the tween state changes. Importantly, this means that render is not called when a tween is not animating (for instance, when it is paused or waiting to start via the delay option). This works naturally with DOM environments, but you may need to account for this design in more custom environments such as <canvas>.

Legacy property name: step.
easing string | shifty.easingFunction | Object.<(string|shifty.easingFunction)> | Array.<number> <optional>
  • string: Name of the Tweenable.formulas to apply to all properties of the tween.
  • shifty.easingFunction: A custom function that computes the rendered position of the tween for the given normalized position of the tween.
  • Object: Keys are tween property names. Values are the Tweenable.formulas to be applied to each tween property, or a shifty.easingFunction. Any tween properties not included in the Object default to 'linear'.
  • Array.<number>: The array must contain four number values that correspond to the [x1, y1, x2, y2] values of a Bezier curve.

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:
Type:
  • Object

tweenCreatedFilter(tweenable) → {void}

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:
Parameters:
Name Type Description
tweenable Tweenable

The Tweenable instance.
Returns:
Type:
void