web-animation-eases

Advanced easing functions for Web Animations API using eases.

The Web Animations API's default easing is limited by cubic-bezier timing function which cannot replicate effects like "elastic" and "bounce" - unless you use keyframes which can be a chore to write.

In comes this handy tool that converts those complex easing functions to keyframes for you!

Install

npm i web-animation-eases

Usage

Example

import eases from 'web-animation-eases'

document.getElementById('…').animate(
  eases.elasticIn({ keyframes: 100 })(x => ({
    transform: `scale(${x})`
  })),
  { duration: 1000 }
)

API

eases.<easing-function>(options)(<keyframe-returning-function>)

• <easing-function> Any one of the functions exported by eases library.

• options:

  • keyframes [number:int] (default:100) Maximum number of objects in the keyframe array, limited by precision.

  • precision [number:float] (default:2) Control decimal places (using toPrecision) when resolving the eased value (x) used in styling keyframes. Higher precision = more keyframes and more accurate easing.

• <keyframe-returning-function> [required] Function that accepts a number and returns a keyframe object:

  • Arguments:

    • x [number] An eased value from 0 to 1 used in the returning the keyframeObject object. May go outside the 0-1 range, especially for "elastic" and "bounce" functions.

  • Returns:

    • keyframeObject [object] An object containing key-value pairs to style the element.

Libraries used

• eases: A grab-bag of Robert Penner's easing equations