[go: up one dir, main page]

tween-functions-ts
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

npm version Downloads Uses TypeScript

tween-functions-ts

sample easing functions


Sample easing functions from MDN

A drop-in replacement for tween-functions.

These are Robert Penner's tweening functions. The same as those used in react-tween-state and react-state-stream.

Note: Penner's original functions used the incremental change in time rather than the absolute cumulative time difference between the start time and the current time. For greater precision, these functions use the latter.

Usage

import { easeOutQuad } from 'tween-functions-ts';

const currentValue = easeOutQuad(elapsedTime, fromValue, toValue, duration);

Direct imports are also supported, for maximum performance:

import { easeOutQuad } from 'tween-functions-ts/dist/easeOutQuad';

Functions available

  • linear
  • easeInBack
  • easeInBounce
  • easeInCirc
  • easeInCubic
  • easeInElastic
  • easeInExpo
  • easeInOutBack
  • easeInOutBounce
  • easeInOutCirc
  • easeInOutCubic
  • easeInOutElastic
  • easeInOutExpo
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutQuint
  • easeInOutSine
  • easeInQuad
  • easeInQuart
  • easeInQuint
  • easeInSine
  • easeOutBack
  • easeOutBounce
  • easeOutCirc
  • easeOutCubic
  • easeOutElastic
  • easeOutExpo
  • easeOutQuad
  • easeOutQuart
  • easeOutQuint
  • easeOutSine

Comparison to other libraries

  • This library is a clone of chenglou/tween-functions, with these differences:
    • written in typescript
    • adds JSDoc
    • modern packaging
  • @environment-safe/tween is roughly the same, but has a dependency.
  • d3-ease only deals with values of the range 0..1, so you must do additional calculations.

Package Sidebar

Install

npm i tween-functions-ts

Weekly Downloads

34

Version

1.1.4

License

MIT

Unpacked Size

193 kB

Total Files

195

Last publish

Collaborators

  • ts-web