4. Easing functions

What it is?

I think no point to explain what is the easing function. It's just applied to progress to speed up/slow down it

Usage

1. Import easing functions from easings folder.
2. Use .easing() method

import NanoTween from 'nanotween'
import { backIn } from 'nanotween/easings'
// or
// import backIn from 'nanotween/easings/backIn'

const tween = new NanoTween()
  .duration(1000)
  .easing(backIn)

Reverse on-fly problem

To correctly reverse the tweening in points other than 0 or 1, we should know symmetrical reversed easing function.

Otherwise it causes unexpected changes on each .reverse()
I recommend you to read that article with explanation of emulating CSS timing functions with JavaScript.
If you want to add custom easing function, NanoTween requires it to have .reverse function inside to get reversed values from.
Example:

function backOut (k) {
  var s = 1.70158

  return --k * k * ((s + 1) * k + s) + 1
}

backOut.reverse = backIn

function backIn (k) {
  var s = 1.70158

  return k * k * ((s + 1) * k - s)
}

backIn.reverse = backOut

module.exports = backIn

NOTE: If no .reverse is provided, NanoTween will use original function instead. This is done because fully symmetrical easing functions are equal with their reversed ones (all ...InOut are symmetrical too).

List of available easing functions

Looks like that demo has all of these functions.

• backIn
• backInOut
• backOut
• bounceIn
• bounceInOut
• bounceOut
• circularIn
• circularInOut
• circularOut
• cubicIn
• cubicInOut
• cubicOut
• elasticIn
• elasticInOut
• elasticOut
• expoIn
• expoInOut
• expoOut
• linear
• quadraticIn
• quadraticInOut
• quadraticOut
• quarticIn
• quarticInOut
• quarticOut
• quinticIn
• quinticInOut
• quinticOut
• sinussoidalIn
• sinussoidalInOut
• sinussoidalOut