Interface TweenableConfig

Data that is passed to StartFunction, RenderFunction, and PromisedData.

How many milliseconds to wait before starting the tween.

How many milliseconds to animate for.

This value can be one of several different types:

• string: Name of the standardEasingFunctions to apply to all properties of the tween.
• EasingFunction: A custom function that computes the rendered position of the tween for the given normalized (0-1) position of the tween.
• Record<string, string | EasingFunction>: Keys are tween property names. Values are the standardEasingFunctions string IDs to be applied to each tween property, or a EasingFunction. Any tween properties not explicitly included in the Record 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.

Executes when the tween completes. This will get overridden by then if that is called, and it will not fire if cancel is called.

Starting position. If omitted, state is used.

Promise implementation constructor for when you want to use Promise library or polyfill Promises in environments where it is not already defined.

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>.

Executes when the tween begins.

Ending position. The keys of this Object should match those of to.