WTC Tween

wtc-tween provides a way to create simple tweens without the need for a massive library.

Install

npm i wtc-tween

You can also use it directly as a module from skypack.

import tween from 'https://cdn.skypack.dev/wtc-tween'

Usage

tween(from: Number|Array[Numbers], to: Number|Array[Numbers], callback: Function, options: Object);

from: Number or Array[Numbers]
If passing an array of numbers, make sure that from and to have the same order and length.

to: Number or Array[Numbers]

callback: Function
Receives the Number|Array[Numbers] current value.

options: Object
options.duration: Number - default 1000
The duration in miliseconds for the tween.

options.timingFunction: Function - default easings.linear
The timing function to be used by the tween.

options.onComplete: Function - default null
A function to be called after completion of the tween.

Examples

Basic

import tween from 'https://cdn.skypack.dev/wtc-tween';

tween(0, 1, (value) => {
  // Do stuff with value
});

Array of values

import tween from 'https://cdn.skypack.dev/wtc-tween';

tween([0, 50, 2100], [1, 200, 1000], (value) => {
  for (let val of value) {
    // Do stuff with value
  }
});

Cancel tween

const mytween = tween(0,1);
// whenever you need to cancel
cancelAnimationFrame(mytween);

With options

import tween, { easing } from 'https://cdn.skypack.dev/wtc-tween'

tween(
  0,
  1,
  (value) => {
    // Do stuff with value
  },
  {
    duration: 400,
    timingFunction: easing.sineOut,
  }
);

Easings

This library also comes with some basic easing functions included but feel free to use other easing libraries like easing-functions.

Included easings

• linear
• sineIn
• sineOut