tween-functions-ts

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.