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!
npm i web-animation-eases
import eases from 'web-animation-eases'
document.getElementById('…').animate(
eases.elasticIn({ keyframes: 100 })(x => ({
transform: `scale(${x})`
})),
{ duration: 1000 }
)
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 byprecision
. -
precision
[number:float]
(default:2)
Control decimal places (usingtoPrecision
) 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 from0
to1
used in the returning thekeyframeObject
object. May go outside the0-1
range, especially for "elastic" and "bounce" functions.
-
-
Returns:
-
keyframeObject
[object]
An object containing key-value pairs to style the element.
-
-
- eases: A grab-bag of Robert Penner's easing equations