Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

tweening-js

aluc-io13MIT2.1.0TypeScript support: included

Javascript tweening library which support Promise interface written in typescript

tween, tweening, tweeningjs, tweening-js, raf, requestAnimationFrame

readme

tweening-js

CircleCI Coverage Status

Javascript tweening library which support promise interface and use requestAnimationFrame written in typescript.

tweening-js does not directly handle DOM elements, making it compatible with any frontend framework such as React, Vue, Angular.

Install

$ npm install tweening-js
## or
$ yarn add tweening-js

Usage

import { tween } from './tweening-js'

const step = (n: number) => console.log('draw: ' + n)

tween({ from: -200, to: -100, step, duration: 50, done: () => {
  console.log('complete1')
  promiseWay()
}})

const promiseWay = () => {
  tween({ from: 0, to: 100, step, duration: 50 }).promise().then( () => {
    console.log('----- complete2')
    asyncFunction()
  })
}

const asyncFunction = async () => {
  await tween({ from: 0, to: 100, step, duration: 50 }).promise()
  console.log('----- complete3')
  await tween({ from: 200, to: 300, step, duration: 50 }).promise()
  console.log('----- complete4')
}

const concurrent = async () => {
  await Promise.all([
    tween({ from: 0, to: 100, step, duration: 50 }).promise(),
    tween({ from: 200, to: 300, step, duration: 50 }).promise(),
  ])
  console.log('----- complete5')
}

easyFunctions

import { tween, easeFunctions } from './tweening-js'

const {
  linear, inQuad, outQuad, inOutQuad, inCube, outCube, inOutCube, inQuart,
  outQuart, inOutQuart, inQuint, outQuint, inOutQuint, inSine, outSine, inOutSine,
  inExpo, outExpo, inOutExpo, inCirc, outCirc, inOutCirc, inBack, outBack,
  inOutBack, inBounce, outBounce, inOutBounce,
} = easeFunctions

const step = (n: number) => console.log('draw: ' + n)

tween({ from: -200, to: -100, step, easeFunction: outQuint })

Default easy function is outQuad

Use with React

// TODO

Development

Build:

$ yarn build

Test:

$ yarn test

Special thanks & References

changelog

CHANGELOG

2.0.0 (Unreleased)

  • BREAKING CHANGE: remove supporting AMD
  • delete old test code, .travis.yml
  • apply typescript
  • cleanup and refactoring the most of code
  • add the promise interface
  • update README

v1.0.1

  • Remove drawing dom element directly, now just call step function

v0.2.0

  • New Start!