raf-tween v0.0.4

A factory for creating cancelable raf tweens

Basic usage

import makeTween from 'raf-tween';

const tween = makeTween({
  onUpdate: console.log,
});

const cancel = tween(1, 10);

Options

// no need to pass by default:
const defaultOptions = {
  duration: 608,
  ease: timeFraction => timeFraction,
  interpolate: (a, b) => progress => ((b - a) * progress) + a,
};

// can be optionally provided
const options = {
  onComplete: console.log('Tween complete'),
};

const requiredOptions = { onUpdate: console.log };

// 2 ways to pass options, instance options win
const tween = makeTween({ ...requiredOptions, ...options });
const cancel = tween(1, 10, { onComplete: console.warn });

Custom interpolator

import makeTween from 'raf-tween';
import { interpolate } from 'd3-interpolate';

const a = { x: 1, y: 101 };
const b = { x: 10, y: -110 };

const tween = makeTween({
  interpolator: d3Interpolate,
  onUpdate: console.log,
});

tween(a, b);

Custom easing

import makeTween from 'raf-tween';
import expoOut from 'eases/expo-out';

const tween = makeTween({
  ease: expoOut,
  onUpdate: console.log,
});

...